@sbb-esta/lyne-elements-dev 4.7.0-dev.1773744201 → 4.7.0-dev.1773755649

package/{block-link-common-D4aizuV-.js → block-link-common-BMTrbSfi.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./link-common-CYxyP4XZ.js";
+import { n as e, t } from "./link-common-akQv_-UR.js";
 import { __esDecorate as n, __runInitializers as r } from "tslib";
 import { css as i } from "lit";
 import { property as a } from "lit/decorators.js";

package/checkbox/checkbox.component.js

@@ -1,3 +1,3 @@
-import { t as e } from "../checkbox.component-CJcC5JnN.js";
-import "../checkbox-common-D9htxWLZ.js";
+import { t as e } from "../checkbox.component-Bazdxs9R.js";
+import "../checkbox-common-J-7Y966k.js";
 export { e as SbbCheckboxElement };

package/checkbox/checkbox.js

@@ -1,5 +1,5 @@
-import { t as e } from "../checkbox.component-CJcC5JnN.js";
-import "../checkbox-common-D9htxWLZ.js";
+import { t as e } from "../checkbox.component-Bazdxs9R.js";
+import "../checkbox-common-J-7Y966k.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/checkbox/checkbox.js' has been deprecated.\nUse either '@sbb-esta/elements/checkbox.js' or '@sbb-esta/elements/checkbox.pure.js' instead.");
 //#endregion
 export { e as SbbCheckboxElement };

package/checkbox/common/checkbox-common.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../checkbox-common-D9htxWLZ.js";
+import { n as e, t } from "../../checkbox-common-J-7Y966k.js";
 export { t as SbbCheckboxCommonElementMixin, e as checkboxCommonStyle };

package/checkbox/common.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../checkbox-common-D9htxWLZ.js";
+import { n as e, t } from "../checkbox-common-J-7Y966k.js";
 //#region src/elements/checkbox/common.ts
 console.warn("The entrypoint '@sbb-esta/elements/checkbox/common.js' has been deprecated.\nUse either '@sbb-esta/elements/checkbox.js' or '@sbb-esta/elements/checkbox.pure.js' instead.");
 //#endregion

package/checkbox-group/checkbox-group.component.js

@@ -1,2 +1,20 @@
-import { t as e } from "../checkbox-group.component-CNAwwaS0.js";
-export { e as SbbCheckboxGroupElement };
+import { SbbSelectionGroupBaseElement as e } from "../core/base-elements.js";
+import { getNextElementIndex as t, interactivityChecker as n, isArrowKeyPressed as r } from "../core/a11y.js";
+//#region src/elements/checkbox-group/checkbox-group.component.ts
+var i = class extends e {
+	static {
+		this.elementName = "sbb-checkbox-group";
+	}
+	get checkboxes() {
+		return this.selectionElements;
+	}
+	constructor() {
+		super(), this.selectionElementSelectors = "sbb-checkbox, sbb-checkbox-panel", this.panelElementSelector = "sbb-checkbox-panel", this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+	}
+	_handleKeyDown(e) {
+		let i = this.checkboxes.filter((e) => !e.disabled && n.isVisible(e));
+		!i || e.target !== this && e.target.parentElement !== this && e.target.parentElement.localName !== "sbb-selection-expansion-panel" && e.target.parentElement.localName !== "sbb-selection-action-panel" || r(e) && i[t(e, i.findIndex((t) => t === e.target), i.length)]?.focus();
+	}
+};
+//#endregion
+export { i as SbbCheckboxGroupElement };

package/checkbox-group.js

@@ -1,4 +1,4 @@
-import { t as e } from "./checkbox-group.component-CNAwwaS0.js";
+import { SbbCheckboxGroupElement as e } from "./checkbox-group/checkbox-group.component.js";
 import "./checkbox-group.pure.js";
 //#region src/elements/checkbox-group.ts
 e.define();

package/checkbox-group.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./checkbox-group.component-CNAwwaS0.js";
+import { SbbCheckboxGroupElement as e } from "./checkbox-group/checkbox-group.component.js";
 export { e as SbbCheckboxGroupElement };

package/{checkbox.component-CJcC5JnN.js → checkbox.component-Bazdxs9R.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./checkbox-common-D9htxWLZ.js";
+import { n as e, t } from "./checkbox-common-J-7Y966k.js";
 import { __esDecorate as n, __runInitializers as r } from "tslib";
 import { css as i, html as a } from "lit";
 import { property as o } from "lit/decorators.js";

package/checkbox.js

@@ -1,9 +1,9 @@
-import { t as e } from "./checkbox-group.component-CNAwwaS0.js";
+import { SbbCheckboxGroupElement as e } from "./checkbox-group/checkbox-group.component.js";
 import "./checkbox-group.pure.js";
 import { SbbCheckboxPanelElement as t } from "./checkbox-panel/checkbox-panel.component.js";
 import "./checkbox-panel.pure.js";
-import { t as n } from "./checkbox.component-CJcC5JnN.js";
-import { n as r, t as i } from "./checkbox-common-D9htxWLZ.js";
+import { t as n } from "./checkbox.component-Bazdxs9R.js";
+import { n as r, t as i } from "./checkbox-common-J-7Y966k.js";
 import "./checkbox.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./checkbox.component-CJcC5JnN.js";
-import { n as t, t as n } from "./checkbox-common-D9htxWLZ.js";
+import { t as e } from "./checkbox.component-Bazdxs9R.js";
+import { n as t, t as n } from "./checkbox-common-J-7Y966k.js";
 export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };

package/chip/chip/chip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chip.component-BNOs8T6O.js";
+import { t as e } from "../../chip.component-DMB36gvC.js";
 export { e as SbbChipElement };

package/chip/chip-group/chip-group.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chip-group.component-D2AZqL3m.js";
+import { n as e, t } from "../../chip-group.component-CbruCoHR.js";
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip-group.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../chip-group.component-D2AZqL3m.js";
+import { n as e, t } from "../chip-group.component-CbruCoHR.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements/chip/chip-group.js' has been deprecated.\nUse either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.");
 //#endregion
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip.js

@@ -1,4 +1,4 @@
-import { t as e } from "../chip.component-BNOs8T6O.js";
+import { t as e } from "../chip.component-DMB36gvC.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/chip/chip.js' has been deprecated.\nUse either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.");
 //#endregion
 export { e as SbbChipElement };

package/chip-label/chip-label.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chip-label.component-DBN4jfW7.js";
+import { t as e } from "../chip-label.component-D9AZdMSJ.js";
 export { e as SbbChipLabelElement };

package/chip-label.js

@@ -1,4 +1,4 @@
-import { t as e } from "./chip-label.component-DBN4jfW7.js";
+import { t as e } from "./chip-label.component-D9AZdMSJ.js";
 import "./chip-label.pure.js";
 //#region src/elements/chip-label.ts
 e.define();

package/chip-label.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./chip-label.component-DBN4jfW7.js";
+import { t as e } from "./chip-label.component-D9AZdMSJ.js";
 export { e as SbbChipLabelElement };

package/chip.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./chip-group.component-D2AZqL3m.js";
-import { t as n } from "./chip.component-BNOs8T6O.js";
+import { n as e, t } from "./chip-group.component-CbruCoHR.js";
+import { t as n } from "./chip.component-DMB36gvC.js";
 import "./chip.pure.js";
 n.define(), t.define();
 //#endregion

package/chip.pure.js

@@ -1,3 +1,3 @@
-import { n as e, t } from "./chip-group.component-D2AZqL3m.js";
-import { t as n } from "./chip.component-BNOs8T6O.js";
+import { n as e, t } from "./chip-group.component-CbruCoHR.js";
+import { t as n } from "./chip.component-DMB36gvC.js";
 export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/clock/clock.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../clock.component-DDaWbXHW.js";
+import { t as e } from "../clock.component-gZJy4AU4.js";
 export { e as SbbClockElement };

package/clock.js

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

package/clock.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./clock.component-DDaWbXHW.js";
+import { t as e } from "./clock.component-gZJy4AU4.js";
 export { e as SbbClockElement };

package/container/container/container.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../container.component-DXFIvseq.js";
+import { t as e } from "../../container.component-C-jpJN2k.js";
 export { e as SbbContainerElement };

package/container/container.js

@@ -1,4 +1,4 @@
-import { t as e } from "../container.component-DXFIvseq.js";
+import { t as e } from "../container.component-C-jpJN2k.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/container/container.js' has been deprecated.\nUse either '@sbb-esta/elements/container.js' or '@sbb-esta/elements/container.pure.js' instead.");
 //#endregion
 export { e as SbbContainerElement };

package/container/sticky-bar/sticky-bar.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sticky-bar.component-CYCOEGz7.js";
+import { t as e } from "../../sticky-bar.component-BqZVKHc7.js";
 export { e as SbbStickyBarElement };

package/container/sticky-bar.js

@@ -1,4 +1,4 @@
-import { t as e } from "../sticky-bar.component-CYCOEGz7.js";
+import { t as e } from "../sticky-bar.component-BqZVKHc7.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/container/sticky-bar.js' has been deprecated.\nUse either '@sbb-esta/elements/container.js' or '@sbb-esta/elements/container.pure.js' instead.");
 //#endregion
 export { e as SbbStickyBarElement };

package/container.js

@@ -1,5 +1,5 @@
-import { t as e } from "./container.component-DXFIvseq.js";
-import { t } from "./sticky-bar.component-CYCOEGz7.js";
+import { t as e } from "./container.component-C-jpJN2k.js";
+import { t } from "./sticky-bar.component-BqZVKHc7.js";
 import "./container.pure.js";
 e.define(), t.define();
 //#endregion

package/container.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./container.component-DXFIvseq.js";
-import { t } from "./sticky-bar.component-CYCOEGz7.js";
+import { t as e } from "./container.component-C-jpJN2k.js";
+import { t } from "./sticky-bar.component-BqZVKHc7.js";
 export { e as SbbContainerElement, t as SbbStickyBarElement };

package/core/base-elements/selection-group-base-element.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../selection-group-base-element-Bd6na8dT.js";
+export { e as SbbSelectionGroupBaseElement };

package/core/base-elements.js

@@ -3,4 +3,5 @@ import { SbbActionBaseElement as t } from "./base-elements/action-base-element.j
 import { SbbButtonBaseElement as n, SbbButtonLikeBaseElement as r } from "./base-elements/button-base-element.js";
 import { SbbLinkBaseElement as i } from "./base-elements/link-base-element.js";
 import { SbbOpenCloseBaseElement as a } from "./base-elements/open-close-base-element.js";
-export { t as SbbActionBaseElement, n as SbbButtonBaseElement, r as SbbButtonLikeBaseElement, e as SbbElement, i as SbbLinkBaseElement, a as SbbOpenCloseBaseElement };
+import { t as o } from "../selection-group-base-element-Bd6na8dT.js";
+export { t as SbbActionBaseElement, n as SbbButtonBaseElement, r as SbbButtonLikeBaseElement, e as SbbElement, i as SbbLinkBaseElement, a as SbbOpenCloseBaseElement, o as SbbSelectionGroupBaseElement };

package/core/controllers/media-matchers-controller.js

@@ -1,4 +1,4 @@
-import { c as e, i as t, n, o as r, r as i, t as a } from "../../sbb-tokens-BJzKBCf8.js";
+import { c as e, i as t, n, o as r, r as i, t as a } from "../../sbb-tokens-BtASsKhQ.js";
 import { isServer as o } from "lit";
 import { ɵstateController as s } from "../mixins/element-internals-mixin.js";
 //#region src/elements/core/controllers/media-matchers-controller.ts

package/core/styles/core.scss

@@ -60,9 +60,6 @@ $theme: 'standard' !default;
 @use '../../checkbox/checkbox.global' as checkbox with (
   $theme: $theme
 );
-@use '../../checkbox-group/checkbox-group.global' as checkbox-group with (
-  $theme: $theme
-);
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
   $theme: $theme
 );
@@ -175,7 +172,7 @@ $theme: 'standard' !default;
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
-@use '../../radio-button-group/radio-button-group.global' as radio-button-group with (
+@use '../base-elements/selection-group-base-element.global' as selection-group with (
   $theme: $theme
 );
 @use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
@@ -223,7 +220,6 @@ $theme: 'standard' !default;
   @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
-  @include checkbox-group.base;
   @include checkbox-common.base;
   @include container.base;
   @include sticky-bar.base;
@@ -258,7 +254,7 @@ $theme: 'standard' !default;
   @include optgroup.base;
   @include overlay.options-panel-overlay-variables--global($theme);
   @include radio-button-common.base;
-  @include radio-button-group.base;
+  @include selection-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
   @include status.base;

package/core.css

@@ -2,150 +2,71 @@
  * Do not edit directly, this file was auto-generated.
  */
 :host {
-  display: block;
-}
-
-:host([orientation=vertical]) {
-  --sbb-checkbox-group-orientation: column;
-  --sbb-checkbox-group-width: 100%;
-  --sbb-checkbox-group-checkbox-width: 100%;
-}
-
-:host(:is(:state(has-panel),[state--has-panel])) {
-  --sbb-checkbox-group-width: 100%;
-  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --sbb-checkbox-group-checkbox-flex: auto;
-}
-
-@media (min-width: calc(0rem)) {
-  :host([orientation=vertical][horizontal-from=zero]) {
-    --sbb-checkbox-group-orientation: row;
-    --sbb-checkbox-group-checkbox-width: auto;
-    --sbb-checkbox-group-checkbox-width: initial;
-  }
-  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-checkbox-group-width: max-content;
-  }
-}
-@media (min-width: calc(37.5rem)) {
-  :host([orientation=vertical][horizontal-from=small]) {
-    --sbb-checkbox-group-orientation: row;
-    --sbb-checkbox-group-checkbox-width: auto;
-    --sbb-checkbox-group-checkbox-width: initial;
-  }
-  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-checkbox-group-width: max-content;
-  }
-}
-@media (min-width: calc(64rem)) {
-  :host([orientation=vertical][horizontal-from=large]) {
-    --sbb-checkbox-group-orientation: row;
-    --sbb-checkbox-group-checkbox-width: auto;
-    --sbb-checkbox-group-checkbox-width: initial;
-  }
-  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-checkbox-group-width: max-content;
-  }
-}
-@media (min-width: calc(90rem)) {
-  :host([orientation=vertical][horizontal-from=ultra]) {
-    --sbb-checkbox-group-orientation: row;
-    --sbb-checkbox-group-checkbox-width: auto;
-    --sbb-checkbox-group-checkbox-width: initial;
-  }
-  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-checkbox-group-width: max-content;
-  }
-}
-.sbb-checkbox-group {
   display: flex;
-  flex-direction: var(--sbb-checkbox-group-orientation);
-  gap: var(--sbb-checkbox-group-gap);
+  flex-flow: var(--sbb-selection-group-orientation) wrap;
+  gap: var(--sbb-selection-group-gap);
   align-items: flex-start;
-  width: var(--sbb-checkbox-group-width);
-}
-:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-checkbox-group {
-  margin-block-end: var(--sbb-spacing-fixed-1x);
-}
-
-::slotted(:is(sbb-checkbox, sbb-checkbox-panel)) {
-  width: var(--sbb-checkbox-group-checkbox-width);
-}
-
-::slotted(sbb-checkbox-panel) {
-  flex: var(--sbb-checkbox-group-checkbox-flex);
-}
-
-:host {
-  display: block;
+  width: var(--sbb-selection-group-width);
 }
 
 :host([orientation=vertical]) {
-  --sbb-radio-button-group-orientation: column;
-  --sbb-radio-button-group-width: 100%;
-  --sbb-radio-button-group-radio-button-width: 100%;
+  --sbb-selection-group-orientation: column;
+  --sbb-selection-group-width: 100%;
+  --sbb-selection-group-elements-width: 100%;
 }
 
 :host(:is(:state(has-panel),[state--has-panel])) {
-  --sbb-radio-button-group-width: 100%;
-  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --sbb-radio-button-group-radio-button-flex: auto;
+  --sbb-selection-group-width: 100%;
+  --sbb-selection-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-selection-group-elements-flex: auto;
 }
 
 @media (min-width: calc(0rem)) {
   :host([orientation=vertical][horizontal-from=zero]) {
-    --sbb-radio-button-group-orientation: row;
-    --sbb-radio-button-group-radio-button-width: auto;
-    --sbb-radio-button-group-radio-button-width: initial;
+    --sbb-selection-group-orientation: row;
+    --sbb-selection-group-elements-width: auto;
   }
   :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-radio-button-group-width: max-content;
+    --sbb-selection-group-width: auto;
   }
 }
 @media (min-width: calc(37.5rem)) {
   :host([orientation=vertical][horizontal-from=small]) {
-    --sbb-radio-button-group-orientation: row;
-    --sbb-radio-button-group-radio-button-width: auto;
-    --sbb-radio-button-group-radio-button-width: initial;
+    --sbb-selection-group-orientation: row;
+    --sbb-selection-group-elements-width: auto;
   }
   :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-radio-button-group-width: max-content;
+    --sbb-selection-group-width: auto;
   }
 }
 @media (min-width: calc(64rem)) {
   :host([orientation=vertical][horizontal-from=large]) {
-    --sbb-radio-button-group-orientation: row;
-    --sbb-radio-button-group-radio-button-width: auto;
-    --sbb-radio-button-group-radio-button-width: initial;
+    --sbb-selection-group-orientation: row;
+    --sbb-selection-group-elements-width: auto;
   }
   :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-radio-button-group-width: max-content;
+    --sbb-selection-group-width: auto;
   }
 }
 @media (min-width: calc(90rem)) {
   :host([orientation=vertical][horizontal-from=ultra]) {
-    --sbb-radio-button-group-orientation: row;
-    --sbb-radio-button-group-radio-button-width: auto;
-    --sbb-radio-button-group-radio-button-width: initial;
+    --sbb-selection-group-orientation: row;
+    --sbb-selection-group-elements-width: auto;
   }
   :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-radio-button-group-width: max-content;
+    --sbb-selection-group-width: auto;
   }
 }
-.sbb-radio-group {
-  display: flex;
-  flex-direction: var(--sbb-radio-button-group-orientation);
-  gap: var(--sbb-radio-button-group-gap);
-  align-items: flex-start;
-  width: var(--sbb-radio-button-group-width);
+slot[name=error]::slotted(*) {
+  flex-basis: 100%;
 }
-:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-radio-group {
-  margin-block-end: var(--sbb-spacing-fixed-1x);
+
+::slotted(:is(sbb-checkbox-panel, sbb-radio-button-panel)) {
+  flex: var(--sbb-selection-group-elements-flex);
 }
 
-::slotted(sbb-radio-button-panel) {
-  width: var(--sbb-radio-button-group-radio-button-width);
-  flex: var(--sbb-radio-button-group-radio-button-flex);
+::slotted(:is(sbb-checkbox, sbb-checkbox-panel, sbb-radio-button-panel)) {
+  width: var(--sbb-selection-group-elements-width);
 }
 
 :host {
@@ -1430,11 +1351,6 @@
   --sbb-checkbox-label-icon-justify-content: space-between;
   --sbb-checkbox-label-icon-flex-grow: 1;
   --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-checkbox-group-orientation: row;
-  --sbb-checkbox-group-checkbox-width: auto;
-  --sbb-checkbox-group-width: max-content;
-  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
-  --sbb-checkbox-group-checkbox-flex: none;
   --sbb-checkbox-dimension-xs: 1.25rem;
   --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
   --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
@@ -1668,11 +1584,11 @@
   --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
   --sbb-radio-button-inner-circle-dimension: 0.625rem;
   --sbb-radio-button-font-size: var(--sbb-text-font-size-m);
-  --sbb-radio-button-group-orientation: row;
-  --sbb-radio-button-group-radio-button-width: auto;
-  --sbb-radio-button-group-width: max-content;
-  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
-  --sbb-radio-button-group-radio-button-flex: none;
+  --sbb-selection-group-orientation: row;
+  --sbb-selection-group-elements-width: auto;
+  --sbb-selection-group-width: auto;
+  --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-selection-group-elements-flex: none;
   --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
   --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
   --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);