feat(sbb-badge): draft implementation

src/components/badge.ts

@@ -0,0 +1 @@
+export * from './badge/badge.js';

src/components/badge/__snapshots__/badge.spec.snap.js

@@ -0,0 +1,21 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-badge should render with default values"] = 
+`<slot>
+</slot>
+<div class="sbb-badge">
+</div>
+`;
+/* end snapshot sbb-badge should render with default values */
+
+snapshots["sbb-badge A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-badge A11y tree Chrome */
+

src/components/badge/badge.scss

@@ -0,0 +1,17 @@
+@use '../core/styles' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  position: relative;
+  display: inline-flex;
+}
+
+.sbb-badge {
+  position: absolute;
+  inset-block-start: #{sbb.px-to-rem-build(-2)};
+  inset-inline-end: #{sbb.px-to-rem-build(-2)};
+
+  @include sbb.badge;
+}

src/components/badge/badge.spec.ts

@@ -0,0 +1,18 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+
+import type { SbbBadgeElement } from './badge.js';
+
+import './badge.js';
+
+describe(`sbb-badge`, () => {
+  it('should render with default values', async () => {
+    const element: SbbBadgeElement = await fixture(html`<sbb-badge></sbb-badge>`);
+
+    await expect(element).shadowDom.to.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot(html`<sbb-badge></sbb-badge>`);
+});

src/components/badge/badge.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import readme from './readme.md?raw';
+import './badge.js';
+import '../icon.js';
+
+const Template = (): TemplateResult => html`
+  <sbb-badge label="2"><sbb-icon name="arrow-right-small"></sbb-icon></sbb-badge>
+`;
+
+export const Badge: StoryObj = {
+  render: Template,
+};
+
+const meta: Meta = {
+  parameters: {
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-badge',
+};
+
+export default meta;

src/components/badge/badge.ts

@@ -0,0 +1,29 @@
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { SbbNegativeMixin } from '../core/mixins.js';
+
+import style from './badge.scss?lit&inline';
+
+/**
+ * It displays a badge.
+ */
+@customElement('sbb-badge')
+export class SbbBadgeElement extends SbbNegativeMixin(LitElement) {
+  public static override styles: CSSResultGroup = style;
+
+  @property() public label?: string;
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>
+      <div class="sbb-badge">${this.label}</div> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-badge': SbbBadgeElement;
+  }
+}

src/components/badge/readme.md

@@ -0,0 +1,10 @@
+The `sbb-badge` is used to display amount information.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name          | Attribute  | Privacy | Type             | Default        | Description                                                                                   |
+| ------------- | ---------- | ------- | ---------------- | -------------- | --------------------------------------------------------------------------------------------- |
+| `orientation` | -          | public  | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. |
+| `negative`    | `negative` | public  | `boolean`        | `false`        | Negative coloring variant flag.                                                               |

src/components/core/styles/mixins/badge.scss

@@ -10,5 +10,6 @@
   border-radius: var(--sbb-border-radius-infinity);
   background-color: var(--sbb-color-red);
   color: var(--sbb-color-white);
-  min-width: fit-content;
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
 }

src/components/menu/common/menu-action.scss

@@ -96,7 +96,6 @@
 
   margin-inline-start: auto;
   width: var(--sbb-spacing-fixed-4x);
-  max-height: var(--sbb-spacing-fixed-4x);
 
   @include sbb.if-forced-colors {
     color: var(--sbb-menu-action-color);