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

package/_index.scss

@@ -1,6 +1,68 @@
+// This file is auto-generated by scripts/generate-scss-api.ts
 @forward './core/styles';
+@forward './alert/alert.global' as alert-*;
 @forward './badge/badge.global' as badge-*;
-@forward './card/card.library.global' as card-*;
-@forward './link/link.library.global' as link-*;
+@forward './breadcrumb/breadcrumb.global' as breadcrumb-*;
+@forward './button/button.global' as button-*;
+@forward './calendar/calendar.global' as calendar-*;
+@forward './card/card.global' as card-*;
+@forward './carousel/carousel.global' as carousel-*;
+@forward './checkbox/checkbox.global' as checkbox-*;
+@forward './chip/chip.global' as chip-*;
+@forward './chip-label/chip-label.global' as chip-label-*;
+@forward './clock/clock.global' as clock-*;
+@forward './container/container.global' as container-*;
+@forward './dialog/dialog.global' as dialog-*;
+@forward './divider/divider.global' as divider-*;
+@forward './expansion-panel/expansion-panel.global' as expansion-panel-*;
+@forward './file-selector/file-selector.global' as file-selector-*;
+@forward './flip-card/flip-card.global' as flip-card-*;
+@forward './footer/footer.global' as footer-*;
+@forward './form-field/form-field.global' as form-field-*;
+@forward './header/header.global' as header-*;
+@forward './icon-sidebar/icon-sidebar.global' as icon-sidebar-*;
+@forward './lead-container/lead-container.global' as lead-container-*;
+@forward './link/link.global' as link-*;
+@forward './loading-indicator/loading-indicator.global' as loading-indicator-*;
+@forward './loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle-*;
+@forward './logo/logo.global' as logo-*;
+@forward './map-container/map-container.global' as map-container-*;
+@forward './menu/menu.global' as menu-*;
+@forward './message/message.global' as message-*;
+@forward './mini-calendar/mini-calendar.global' as mini-calendar-*;
+@forward './navigation/navigation.global' as navigation-*;
+@forward './notification/notification.global' as notification-*;
+@forward './option/option.global' as option-*;
+@forward './overlay/overlay.global' as overlay-*;
+@forward './paginator/paginator.global' as paginator-*;
+@forward './core/mixins/panel-common.global' as panel-common-*;
+@forward './popover/popover.global' as popover-*;
+@forward './radio-button/radio-button.global' as radio-button-*;
+@forward './select/select.global' as select-*;
+@forward './selection-action-panel/selection-action-panel.global' as selection-action-panel-*;
+@forward './selection-expansion-panel/selection-expansion-panel.global' as
+  selection-expansion-panel-*;
+@forward './core/base-elements/selection-group-base-element.global' as
+  selection-group-base-element-*;
+@forward './sidebar/sidebar.global' as sidebar-*;
+@forward './signet/signet.global' as signet-*;
+@forward './slider/slider.global' as slider-*;
+@forward './status/status.global' as status-*;
+@forward './stepper/stepper.global' as stepper-*;
 @forward './table/table.global' as table-*;
-@forward './timetable-form/timetable-form/timetable-form.global' as timetable-form-*;
+@forward './tabs/tabs.global' as tabs-*;
+@forward './tag/tag.global' as tag-*;
+@forward './teaser/teaser.global' as teaser-*;
+@forward './teaser-hero/teaser-hero.global' as teaser-hero-*;
+@forward './teaser-panel/teaser-panel.global' as teaser-panel-*;
+@forward './teaser-product/teaser-product.global' as teaser-product-*;
+@forward './time-input/time-input.global' as time-input-*;
+@forward './timetable-form/timetable-form.global' as timetable-form-*;
+@forward './timetable-occupancy/timetable-occupancy.global' as timetable-occupancy-*;
+@forward './title/title.global' as title-*;
+@forward './toast/toast.global' as toast-*;
+@forward './toggle/toggle.global' as toggle-*;
+@forward './toggle-check/toggle-check.global' as toggle-check-*;
+@forward './tooltip/tooltip.global' as tooltip-*;
+@forward './train/train.global' as train-*;
+@forward './visual-checkbox/visual-checkbox.global' as visual-checkbox-*;

package/alert/{alert/alert.global.scss → _alert.global.scss}

@@ -1,8 +1,10 @@
-@use '../../core/styles/index' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
   --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
   --sbb-alert-border-radius: var(--sbb-border-radius-4x);
   --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
@@ -28,18 +30,18 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   // Use outline here to not influence content position.
   // Due to overflow hidden of inner elements it's placed on host.
   --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
   --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
 }
 
-@mixin base-breakpoint-large {
-  --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
-  --sbb-alert-icon-size-l: #{sbb.px-to-rem-build(34)};
+@mixin breakpoint-small {
+  --sbb-alert-close-button-divider-display: block;
 }
 
-@mixin base-breakpoint-small {
-  --sbb-alert-close-button-divider-display: block;
+@mixin breakpoint-large {
+  --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
+  --sbb-alert-icon-size-l: #{sbb.px-to-rem-build(34)};
 }

package/badge/{badge.global.scss → _badge.global.scss}

@@ -1,6 +1,8 @@
 @use '../core/styles' as sbb;
 
-@mixin base-rules {
+$theme: 'standard' !default;
+
+@mixin element-rules {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,7 +28,7 @@
     position: relative;
 
     &::after {
-      @include base-rules;
+      @include element-rules;
 
       content: attr(sbb-badge);
       position: absolute;

package/breadcrumb/{breadcrumb-group/breadcrumb-group.global.scss → _breadcrumb.global.scss}

@@ -1,8 +1,13 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
+  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
+  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
+  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
   --sbb-breadcrumb-group-wrap: nowrap;
   --sbb-breadcrumb-group-visibility: hidden;
   --sbb-breadcrumb-group-ellipsis-color: light-dark(
@@ -17,6 +22,11 @@ $theme: 'standard' !default;
   );
 }
 
+@mixin forced-colors {
+  --sbb-breadcrumb-color: ButtonText;
+  --sbb-breadcrumb-color-active: Highlight;
+}
+
 @mixin rules {
   sbb-breadcrumb-group:not(:defined) {
     display: block;

package/button/{common/button-common.global.scss → _button.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -49,9 +49,50 @@ $theme: 'standard' !default;
   --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
   --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
+  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
+  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
+  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
+  --sbb-mini-button-group-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-min-height-m),
+        'lean': var(--sbb-mini-button-group-min-height-s),
+      ),
+      $theme
+    )};
+  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
+  --sbb-mini-button-group-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-padding-inline-m),
+        'lean': var(--sbb-mini-button-group-padding-inline-s),
+      ),
+      $theme
+    )};
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
   --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
   --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);

package/calendar/{calendar/calendar.global.scss → _calendar.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -12,6 +12,16 @@ $theme: 'standard' !default;
   --sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
   --sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
+    var(--sbb-border-color-1-inverted);
+  --sbb-calendar-cell-color: var(--sbb-color-2);
+  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
+  --sbb-calendar-cell-justify-content: normal;
+  --sbb-calendar-cell-inset: #{sbb.px-to-rem-build(1)};
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-font-weight: unset;
+  --sbb-calendar-cell-year-month-width: #{sbb.px-to-rem-build(77)};
+  --sbb-calendar-cell-year-month-height: #{sbb.px-to-rem-build(44)};
   --sbb-calendar-control-gap: var(--sbb-spacing-fixed-2x);
   --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
   --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(44)};
@@ -20,12 +30,18 @@ $theme: 'standard' !default;
   --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
     var(--sbb-spacing-fixed-2x);
   --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --sbb-calendar-table-animation-shift: #{sbb.px-to-rem-build(0.1)};
-  --sbb-calendar-table-column-spaces: 12;
-  --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
 
   // While changing views, there would be a few frames where the height of the calendar collapses to just
   // the height of the controls and then grow back to the height of the next view.
   // By using 0.1ms this can be avoided.
   --sbb-calendar-table-animation-duration: 0.1ms;
+  --sbb-calendar-table-animation-shift: #{sbb.px-to-rem-build(0.1)};
+  --sbb-calendar-table-column-spaces: 12;
+  --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
+  --sbb-calendar-day-width: #{sbb.px-to-rem-build(44)};
+  --sbb-calendar-day-height: #{sbb.px-to-rem-build(48)};
+  --sbb-calendar-day-extra-display: block;
+  --sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);
+  --sbb-calendar-day-crossed-out-top: 33%;
+  --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
 }

package/card/{card.library.global.scss → _card.global.scss}

@@ -2,9 +2,6 @@
 
 $theme: 'standard' !default;
 
-// -----------------------------------------------------------------------------
-// Card: Mixins & CSS custom properties
-// -----------------------------------------------------------------------------
 @mixin variables--global {
   @include variables--white;
 
@@ -82,7 +79,6 @@ $theme: 'standard' !default;
   }
 }
 
-// Card sizing
 @mixin variables--spacing-default {
   --sbb-card-padding-block: var(--sbb-card-padding-block-default);
   --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);
@@ -146,7 +142,7 @@ $theme: 'standard' !default;
   }
 }
 
-@mixin rules {
+@mixin element-rules {
   // As the card has always a white/milk background, we have to fix the focus outline color
   // to default color for cases where the card is used in a negative context.
   --sbb-focus-outline-color: light-dark(
@@ -201,3 +197,31 @@ $theme: 'standard' !default;
   display: block;
   height: 100%;
 }
+
+@mixin base {
+  @include variables--global;
+
+  --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-card-badge-color: var(--sbb-color-2-inverted);
+  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
+  --sbb-card-badge-border-color: transparent;
+  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
+  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-badge-skew: skew(16deg, 0deg);
+}
+
+@mixin forced-colors {
+  @include variables--global-forced-colors;
+
+  --sbb-card-badge-border-display: block;
+  --sbb-card-badge-inline-border-display: none;
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-card .sbb-action {
+    pointer-events: all;
+  }
+}

package/carousel/{carousel/carousel.global.scss → _carousel.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -7,4 +7,5 @@ $theme: 'standard' !default;
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);
 }

package/carousel/carousel-list/carousel-list.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel-list.component-7mbfkw4K.js";
+import { t as e } from "../../carousel-list.component-DAPO_Oce.js";
 export { e as SbbCarouselListElement };

package/{carousel-list.component-7mbfkw4K.js → carousel-list.component-DAPO_Oce.js}

@@ -4,7 +4,7 @@ import { ResizeController as o } from "@lit-labs/observers/resize-controller.js"
 import { IntersectionController as s } from "@lit-labs/observers/intersection-controller.js";
 import { SbbCarouselItemShowEvent as c } from "./carousel/carousel-item/carousel-item.component.js";
 //#region src/elements/carousel/carousel-list/carousel-list.scss?inline
-var l = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:\"\";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}", u = class extends n {
+var l = ":host{display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:\"\";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}", u = class extends n {
 	static {
 		this.elementName = "sbb-carousel-list";
 	}

package/carousel.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./carousel-item.component-DRfpza-9.js";
-import { t as n } from "./carousel-list.component-7mbfkw4K.js";
+import { t as n } from "./carousel-list.component-DAPO_Oce.js";
 import { t as r } from "./carousel.component-B6XqR3Bc.js";
 import "./carousel.pure.js";
 r.define(), t.define(), n.define();

package/carousel.pure.js

@@ -1,4 +1,4 @@
 import { n as e, t } from "./carousel-item.component-DRfpza-9.js";
-import { t as n } from "./carousel-list.component-7mbfkw4K.js";
+import { t as n } from "./carousel-list.component-DAPO_Oce.js";
 import { t as r } from "./carousel.component-B6XqR3Bc.js";
 export { r as SbbCarouselElement, t as SbbCarouselItemElement, e as SbbCarouselItemShowEvent, n as SbbCarouselListElement };

package/checkbox/{common/checkbox-common.global.scss → _checkbox.global.scss}

@@ -1,8 +1,12 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --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-dimension-xs: #{sbb.px-to-rem-build(20)};
   --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
   --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);

package/chip/{chip-group/chip-group.global.scss → _chip.global.scss}

@@ -1,8 +1,18 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-chip-background-color: var(--sbb-background-color-3);
+  --sbb-chip-background-color-active: var(--sbb-background-color-1);
+  --sbb-chip-background-color-hover: var(--sbb-background-color-1);
+  --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-chip-border-radius: var(--sbb-border-radius-2x);
+  --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-color-hover: var(--sbb-color-2);
+  --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-height: #{sbb.px-to-rem-build(24)};
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: #{sbb.px-to-rem-build(150)};
   --_sbb-chip-group-margin-block-start-default: #{sbb.px-to-rem-build(2)};
@@ -41,7 +51,7 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default-large) 0;
   --_sbb-chip-group-margin-block-with-label-s: #{sbb.px-to-rem-build(5)} #{sbb.px-to-rem-build(3)};
   --_sbb-chip-group-margin-block-without-label-s: 0 #{sbb.px-to-rem-build(5)};

package/container/{sticky-bar/sticky-bar.global.scss → _container.global.scss}

@@ -1,8 +1,10 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
   --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
   --sbb-sticky-bar-padding-block: #{sbb.theme-pattern-select(
@@ -15,3 +17,16 @@ $theme: 'standard' !default;
   --sbb-sticky-bar-position: sticky;
   --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
 }
+
+@mixin rules {
+  sbb-container {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-object-fit: cover;
+
+      border-radius: var(--sbb-container-background-border-radius);
+      height: 100%;
+      position: absolute;
+    }
+  }
+}

package/core/base-elements/{selection-group-base-element.global.scss → _selection-group-base-element.global.scss}

@@ -1,10 +1,14 @@
 @use '../styles' as sbb;
-@use './selection-group-base-element' as group;
+
+@mixin horizontal-orientation {
+  --sbb-selection-group-orientation: row;
+  --sbb-selection-group-elements-width: auto;
+}
 
 $theme: 'standard' !default;
 
 @mixin base {
-  @include group.horizontal-orientation;
+  @include horizontal-orientation;
 
   --sbb-selection-group-width: auto;
   --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);

package/core/styles/_index.scss

@@ -1,8 +1,8 @@
-@forward './core/functions';
-@forward './core/mediaqueries';
-
+@forward './mixins/functions';
+@forward './mixins/mediaqueries';
 @forward './mixins/a11y';
 @forward './mixins/animation';
+@forward './mixins/core';
 @forward './mixins/font-face';
 @forward './mixins/helpers';
 @forward './mixins/layout';