@sbb-esta/lyne-elements 5.0.0-next.3 → 5.0.0

package/table/_table.global.scss

@@ -0,0 +1,295 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-s),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  // Notes:
+  // We cannot use `border-collapse` because in sticky variants it gets visually broken.
+  // Therefore, we have to build the grid avoiding double borders.
+  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
+    --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+    --sbb-table-sticky-shadow-transition-duration: var(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-6x)
+    );
+
+    border-spacing: 0;
+    caption-side: bottom;
+    color: var(--sbb-table-color);
+    table-layout: auto;
+    text-align: left;
+
+    th {
+      font-size: var(--sbb-table-header-cell-font-size);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      font-weight: bold;
+      background-color: var(--sbb-table-background-color);
+      border-block-end: var(--sbb-table-border);
+      border-inline-end: var(--sbb-table-border);
+      padding-block: var(--sbb-table-header-padding-block);
+      padding-inline: var(--sbb-table-header-padding-inline);
+    }
+
+    td {
+      font-size: var(--sbb-table-data-cell-font-size);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      background-color: var(--sbb-table-background-color);
+      border-block-end: var(--sbb-table-border);
+      border-inline-end: var(--sbb-table-border);
+      padding-block: var(--sbb-table-cell-padding-block);
+      padding-inline: var(--sbb-table-cell-padding-inline);
+    }
+
+    :is(th, td) {
+      &.sbb-table-group-with-next {
+        border-inline-end: none;
+      }
+
+      &:first-child {
+        border-inline-start: var(--sbb-table-border);
+      }
+    }
+
+    // In Angular the CDK table always adds a thead even if there are no headers.
+    // Due to this fact we have to also insert `tr` in the `:has()` selector.
+    &:has(thead tr) thead,
+    &:not(:has(thead tr)) tbody {
+      tr:first-of-type > :is(th, td) {
+        border-block-start: var(--sbb-table-border);
+      }
+    }
+
+    // Avoid borders between header rows (design specification).
+    thead > tr:has(+ tr) > :is(th, td) {
+      border-block-end: none;
+    }
+  }
+
+  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) caption,
+  .sbb-table-caption {
+    // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+    --sbb-table-caption-color-fallback: light-dark(
+      var(--sbb-color-granite),
+      var(--sbb-color-cement)
+    );
+
+    font-size: var(--sbb-text-font-size-xs);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+    margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+    text-align: left;
+  }
+
+  .sbb-table-xs {
+    --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+    --sbb-table-header-padding-block: 0;
+    --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+    --sbb-table-cell-padding-block: 0;
+    --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+  }
+
+  .sbb-table-s {
+    --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+    --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+    --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+    --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+    --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+  }
+
+  .sbb-table-m {
+    --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+    --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+    --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+    --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+    --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+  }
+
+  sbb-table-wrapper[negative] .sbb-table,
+  .sbb-table--negative {
+    --sbb-table-border-color: var(--sbb-color-anthracite);
+    --sbb-table-background-color: var(--sbb-background-color-1-negative);
+    --sbb-table-color: var(--sbb-color-1-negative);
+    --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
+    --sbb-table-caption-color: var(--sbb-color-cement);
+  }
+
+  .sbb-table--striped {
+    tbody tr:nth-child(odd) :is(th, td) {
+      background-color: var(--sbb-table-row-striped-color);
+    }
+  }
+
+  .sbb-table--unstriped {
+    tbody tr:nth-child(odd) :is(th, td) {
+      background-color: var(--sbb-table-background-color);
+    }
+  }
+
+  .sbb-table--theme-iron {
+    --sbb-table-cell-color: var(--sbb-color-4);
+
+    sbb-table-wrapper[negative] &,
+    &.sbb-table--negative {
+      --sbb-table-cell-color: var(--sbb-color-cloud);
+    }
+
+    tbody > tr > td {
+      color: var(--sbb-table-cell-color);
+    }
+  }
+
+  .sbb-table-header-subtitle {
+    font-weight: normal;
+  }
+
+  .sbb-table-row--striped {
+    background-color: var(--sbb-table-row-striped-color);
+  }
+
+  .sbb-table-filter {
+    padding-block-start: 0 !important;
+  }
+
+  .sbb-table-caption {
+    // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+    --sbb-table-caption-color-fallback: light-dark(
+      var(--sbb-color-granite),
+      var(--sbb-color-cement)
+    );
+
+    font-size: var(--sbb-text-font-size-xs);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+    margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+    text-align: left;
+  }
+
+  .sbb-table-sticky {
+    // Note that the table can either set this class or an inline style to make something sticky.
+    // We set the style as `!important` so that we get an identical specificity in both cases
+    // and to avoid cases where user styles have a higher specificity.
+    position: sticky !important;
+  }
+
+  // The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
+  // Do not rename them, please.
+  :is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+    content: '';
+    transition: {
+      timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+      duration: var(--sbb-table-sticky-shadow-transition-duration);
+      property: visibility, opacity;
+    }
+
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    width: var(--sbb-table-sticky-shadow-width);
+    inset: 0;
+  }
+
+  .sbb-table-sticky-border-elem-left {
+    :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
+      border-inline-end: var(--sbb-table-border);
+
+      &::after {
+        visibility: visible;
+        opacity: 1;
+        background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+        inset-inline-start: unset;
+        inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+      }
+    }
+  }
+
+  .sbb-table-sticky-border-elem-right {
+    :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
+      border-inline-start: var(--sbb-table-border);
+
+      &::after {
+        visibility: visible;
+        opacity: 1;
+        background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+        inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+        inset-inline-end: unset;
+      }
+    }
+  }
+
+  .sbb-table-align-start {
+    text-align: start;
+  }
+
+  .sbb-table-align-center {
+    text-align: center;
+  }
+
+  .sbb-table-align-end {
+    text-align: end;
+  }
+
+  .sbb-table-align-justify {
+    text-align: justify;
+  }
+
+  // Backwards compatibility for sbb-angular
+  .sbb-table-align-left {
+    text-align: left;
+  }
+
+  // Backwards compatibility for sbb-angular
+  .sbb-table-align-right {
+    text-align: right;
+  }
+}

package/table/table-wrapper/table-wrapper.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../table-wrapper.component-C83EYuZP.js";
+import { t as e } from "../../table-wrapper.component-BzmzJJim.js";
 export { e as SbbTableWrapperElement };

package/table.js

@@ -1,4 +1,4 @@
-import { t as e } from "./table-wrapper.component-C83EYuZP.js";
+import { t as e } from "./table-wrapper.component-BzmzJJim.js";
 import "./table.pure.js";
 //#region src/elements/table.ts
 e.define();

package/table.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./table-wrapper.component-C83EYuZP.js";
+import { t as e } from "./table-wrapper.component-BzmzJJim.js";
 export { e as SbbTableWrapperElement };

package/tabs/_tabs.global.scss

@@ -0,0 +1,61 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin tab-label-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
+// These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
+@mixin base {
+  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
+  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
+  --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tab-group-content-gap-size-l),
+        'lean': var(--sbb-tab-group-content-gap-size-s),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-inline-padding: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
+  --sbb-tab-label-marker-thickness: var(--sbb-border-width-3x);
+  --sbb-tab-label-text-decoration: none;
+  --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
+  --sbb-tab-label-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-font-weight: bold;
+  --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
+  --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
+  --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
+}
+
+@mixin rules {
+  sbb-tab-nav-bar .sbb-tab-amount {
+    @include tab-label-amount;
+  }
+}

package/tabs/common/styles.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../styles-DisU4TWi.js";
+import { n as e, t } from "../../styles-DGAxTLMz.js";
 export { t as tabGroupCommonStyles, e as tabLabelCommonStyles };

package/tabs/tab/tab.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab.component-D6hfhlZw.js";
+import { t as e } from "../../tab.component-C5xxMwwX.js";
 export { e as SbbTabElement };

package/tabs/tab-group/tab-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-group.component-t4eeCNf-.js";
-export { e as SbbTabGroupElement };
+import { n as e, t } from "../../tab-group.component-Dx0xldWI.js";
+export { t as SbbTabChangeEvent, e as SbbTabGroupElement };

package/tabs/tab-label/tab-label.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-label.component-DvvSohaG.js";
+import { t as e } from "../../tab-label.component-C5HCrNFB.js";
 export { e as SbbTabLabelElement };

package/tabs/tab-nav-bar/tab-nav-bar.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-nav-bar.component-FT2W0urU.js";
+import { t as e } from "../../tab-nav-bar.component-7j-RCq7p.js";
 export { e as SbbTabNavBarElement };

package/tabs.js

@@ -1,9 +1,9 @@
-import { t as e } from "./tab-group.component-t4eeCNf-.js";
-import { t } from "./tab-label.component-DvvSohaG.js";
-import { t as n } from "./tab-nav-bar.component-FT2W0urU.js";
-import { t as r } from "./tab.component-D6hfhlZw.js";
-import { n as i, t as a } from "./styles-DisU4TWi.js";
+import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
+import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
+import { t as i } from "./tab.component-C5xxMwwX.js";
+import { n as a, t as o } from "./styles-DGAxTLMz.js";
 import "./tabs.pure.js";
-r.define(), e.define(), t.define(), n.define();
+i.define(), e.define(), n.define(), r.define();
 //#endregion
-export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, a as tabGroupCommonStyles, i as tabLabelCommonStyles };
+export { t as SbbTabChangeEvent, i as SbbTabElement, e as SbbTabGroupElement, n as SbbTabLabelElement, r as SbbTabNavBarElement, o as tabGroupCommonStyles, a as tabLabelCommonStyles };

package/tabs.pure.js

@@ -1,6 +1,6 @@
-import { t as e } from "./tab-group.component-t4eeCNf-.js";
-import { t } from "./tab-label.component-DvvSohaG.js";
-import { t as n } from "./tab-nav-bar.component-FT2W0urU.js";
-import { t as r } from "./tab.component-D6hfhlZw.js";
-import { n as i, t as a } from "./styles-DisU4TWi.js";
-export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, a as tabGroupCommonStyles, i as tabLabelCommonStyles };
+import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
+import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
+import { t as i } from "./tab.component-C5xxMwwX.js";
+import { n as a, t as o } from "./styles-DGAxTLMz.js";
+export { t as SbbTabChangeEvent, i as SbbTabElement, e as SbbTabGroupElement, n as SbbTabLabelElement, r as SbbTabNavBarElement, o as tabGroupCommonStyles, a as tabLabelCommonStyles };

package/tag/_tag.global.scss

@@ -0,0 +1,41 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-tag-animation-easing: var(--sbb-animation-easing);
+  --sbb-tag-background-color: var(--sbb-background-color-1);
+  --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-tag-border-style: solid;
+  --sbb-tag-border-width: var(--sbb-border-width-1x);
+  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tag-text-color: var(--sbb-color-2);
+  --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tag-height-s: var(--sbb-size-element-xxxs);
+  --sbb-tag-height-m: var(--sbb-size-element-xs);
+  --sbb-tag-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tag-height-m),
+        'lean': var(--sbb-tag-height-s),
+      ),
+      $theme
+    )};
+  --sbb-tag-padding-inline-s: var(--sbb-spacing-fixed-3x);
+  --sbb-tag-padding-inline-m: var(--sbb-spacing-fixed-5x);
+  --sbb-tag-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tag-padding-inline-m),
+        'lean': var(--sbb-tag-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin forced-colors {
+  --sbb-tag-amount-color: ButtonText;
+  --sbb-tag-background-color: Canvas !important;
+  --sbb-tag-text-color: ButtonText;
+  --sbb-tag-border-color: CanvasText;
+  --sbb-tag-border-width: var(--sbb-border-width-2x);
+}

package/tag/tag/tag.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tag.component-BKuxfdDi.js";
+import { t as e } from "../../tag.component-r8diGGP-.js";
 export { e as SbbTagElement };

package/tag/tag-group/tag-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tag-group.component-9UfHHJ79.js";
+import { t as e } from "../../tag-group.component-CJwbkP70.js";
 export { e as SbbTagGroupElement };

package/{tag-group.component-9UfHHJ79.js → tag-group.component-CJwbkP70.js}

@@ -1,30 +1,27 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-import { SbbDisabledMixin as o, SbbElement as s, SbbNamedSlotListMixin as c, forceType as l } from "./core.js";
+import { SbbDisabledMixin as o, SbbElement as s, SbbNamedSlotListMixin as c, forceType as l, getNextElementIndex as u, isArrowKeyPressed as d } from "./core.js";
 //#region src/elements/tag/tag-group/tag-group.scss?inline
-var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}", d = (() => {
-	let d = o(c(s)), f = [], p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [], S;
-	return class extends d {
-		constructor() {
-			super(...arguments), this.listChildLocalNames = (t(this, f), ["sbb-tag", "div"]), this.#e = t(this, m, ""), this.#t = (t(this, h), t(this, _, !1)), this.#n = (t(this, v), t(this, b, null)), this._value = (t(this, x), null);
-		}
+var f = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}", p = (() => {
+	let p = o(c(s)), m = [], h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [], w;
+	return class extends p {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-			p = [l(), a({ attribute: "list-accessibility-label" })], g = [l(), a({ type: Boolean })], y = [a({ reflect: !0 })], S = [a()], e(this, null, p, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+			h = [l(), a({ attribute: "accessibility-label" })], v = [l(), a({ type: Boolean })], x = [a({ reflect: !0 })], w = [a()], e(this, null, h, {
 				kind: "accessor",
-				name: "listAccessibilityLabel",
+				name: "accessibilityLabel",
 				static: !1,
 				private: !1,
 				access: {
-					has: (e) => "listAccessibilityLabel" in e,
-					get: (e) => e.listAccessibilityLabel,
+					has: (e) => "accessibilityLabel" in e,
+					get: (e) => e.accessibilityLabel,
 					set: (e, t) => {
-						e.listAccessibilityLabel = t;
+						e.accessibilityLabel = t;
 					}
 				},
 				metadata: t
-			}, m, h), e(this, null, g, {
+			}, g, _), e(this, null, v, {
 				kind: "accessor",
 				name: "multiple",
 				static: !1,
@@ -37,7 +34,7 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 					}
 				},
 				metadata: t
-			}, _, v), e(this, null, y, {
+			}, y, b), e(this, null, x, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -50,7 +47,7 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 					}
 				},
 				metadata: t
-			}, b, x), e(this, null, S, {
+			}, S, C), e(this, null, w, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -62,7 +59,7 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 					}
 				},
 				metadata: t
-			}, null, f), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -73,13 +70,13 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 			this.elementName = "sbb-tag-group";
 		}
 		static {
-			this.styles = [i(u)];
+			this.styles = [i(f)];
 		}
 		#e;
-		get listAccessibilityLabel() {
+		get accessibilityLabel() {
 			return this.#e;
 		}
-		set listAccessibilityLabel(e) {
+		set accessibilityLabel(e) {
 			this.#e = e;
 		}
 		#t;
@@ -109,8 +106,26 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 		get tags() {
 			return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
 		}
+		constructor() {
+			super(), this.listChildLocalNames = (t(this, m), ["sbb-tag", "div"]), this.#e = t(this, g, ""), this.#t = (t(this, _), t(this, y, !1)), this.#n = (t(this, b), t(this, S, null)), this._value = (t(this, C), null), this.addEventListener?.("keydown", (e) => this._handleArrowKeyDown(e));
+		}
 		willUpdate(e) {
-			super.willUpdate(e), e.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), e.has("disabled") && this.tags.forEach((e) => e.requestUpdate?.("disabled")), (e.has("listChildren") || e.has("multiple")) && !this.multiple && this.tags.filter((e) => e.checked).slice(1).forEach((e) => e.checked = !1), e.has("listAccessibilityLabel") && (this.internals.role = this.listAccessibilityLabel ? null : "group");
+			super.willUpdate(e), e.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), e.has("disabled") && this.tags.forEach((e) => e.requestUpdate?.("disabled")), (e.has("listChildren") || e.has("multiple")) && (this.multiple ? e.has("multiple") && this._enabledTags().forEach((e) => e.tabIndex = 0) : (this.tags.filter((e) => e.checked).slice(1).forEach((e) => e.checked = !1), this.updateExclusiveTabIndex())), (e.has("accessibilityLabel") || e.has("multiple")) && (this.multiple ? (this.internals.role = this.accessibilityLabel ? null : "group", this.internals.ariaLabel = null) : (this.internals.role = "radiogroup", this.internals.ariaLabel = this.accessibilityLabel));
+		}
+		_enabledTags() {
+			return this.tags.filter((e) => !e.disabled);
+		}
+		updateExclusiveTabIndex() {
+			let e = this._enabledTags(), t = e.find((e) => e.checked) ?? e[0];
+			e.forEach((e) => e.tabIndex = e === t ? 0 : -1);
+		}
+		_handleArrowKeyDown(e) {
+			if (this.multiple || !d(e)) return;
+			e.preventDefault();
+			let t = this._enabledTags(), n = t.indexOf(e.target);
+			if (n === -1) return;
+			let r = t[u(e, n, t.length)];
+			t.forEach((e) => e.tabIndex = e === r ? 0 : -1), r.focus();
 		}
 		_applyValueToTags(e) {
 			let t = this.tags;
@@ -127,11 +142,11 @@ var u = ":host{display:block}.sbb-tag-group__list{list-style:none;margin:0;paddi
 			return n`
       ${this.renderList({
 				class: "sbb-tag-group__list",
-				ariaLabel: this.listAccessibilityLabel
+				ariaLabel: this.multiple ? this.accessibilityLabel : void 0
 			})}
     `;
 		}
 	};
 })();
 //#endregion
-export { d as t };
+export { p as t };

package/{tag.component-BKuxfdDi.js → tag.component-r8diGGP-.js}

@@ -116,13 +116,20 @@ var d = ":host{--sbb-tag-animation-duration: var( --sbb-disable-animation-durati
 			this.#r = e;
 		}
 		constructor() {
-			super(), t(this, w), this.addEventListener?.("click", () => this._handleClick()), this.addController(new s(this, () => this._tagGroup(), { size: (e) => {
-				this.size = e.size;
-			} }));
+			super(), t(this, w), this.addEventListener?.("click", () => this._handleClick()), this.addController(new s(this, () => this._tagGroup(), {
+				multiple: () => this._updateAriaRole(),
+				size: (e) => {
+					this.size = e.size;
+				}
+			}));
 		}
 		_tagGroup() {
 			return this.closest?.("sbb-tag-group") ?? null;
 		}
+		_updateAriaRole() {
+			let e = this._tagGroup();
+			e && !e.multiple ? (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`, this.internals.ariaPressed = null) : (this.internals.role = "button", this.internals.ariaChecked = null, this.internals.ariaPressed = `${this.checked}`);
+		}
 		isDisabledExternally() {
 			return this._tagGroup()?.disabled ?? !1;
 		}
@@ -135,9 +142,11 @@ var d = ":host{--sbb-tag-animation-duration: var( --sbb-disable-animation-durati
 			})), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
 		}
 		willUpdate(e) {
-			super.willUpdate(e), e.has("checked") && (this.internals.ariaPressed = `${this.checked}`, this.toggleState("checked", this.checked), this.updateFormValue());
+			super.willUpdate(e);
 			let t = this._tagGroup();
-			t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((e) => e !== this).forEach((e) => e.checked = !1);
+			e.has("checked") && (this._updateAriaRole(), this.toggleState("checked", this.checked), this.updateFormValue()), t && !t.multiple && e.has("checked") && (this.checked ? t.tags.forEach((e) => {
+				e.tabIndex = e === this ? 0 : -1, e.checked = e === this;
+			}) : t.tags.some((e) => e.checked) || t.updateExclusiveTabIndex());
 		}
 		formResetCallback() {
 			this.checked = this.hasAttribute("checked");

package/tag.js

@@ -1,5 +1,5 @@
-import { t as e } from "./tag-group.component-9UfHHJ79.js";
-import { t } from "./tag.component-BKuxfdDi.js";
+import { t as e } from "./tag-group.component-CJwbkP70.js";
+import { t } from "./tag.component-r8diGGP-.js";
 import "./tag.pure.js";
 t.define(), e.define();
 //#endregion

package/tag.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./tag-group.component-9UfHHJ79.js";
-import { t } from "./tag.component-BKuxfdDi.js";
+import { t as e } from "./tag-group.component-CJwbkP70.js";
+import { t } from "./tag.component-r8diGGP-.js";
 export { t as SbbTagElement, e as SbbTagGroupElement };