@sbb-esta/lyne-elements 3.13.0 → 4.0.0-next.1

package/core/mixins.js

@@ -1,5 +1,5 @@
 import { SbbAnimationCompleteMixin as b } from "./mixins/animation-complete-mixin.js";
-import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
+import { SbbDisabledInteractiveMixin as t, SbbDisabledMixin as a, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
 import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u } from "./mixins/element-internals-mixin.js";
 import { SbbFormAssociatedCheckboxMixin as v } from "./mixins/form-associated-checkbox-mixin.js";
 import { SbbFormAssociatedInputMixin as f } from "./mixins/form-associated-input-mixin.js";
@@ -14,11 +14,11 @@ import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
 import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
 import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const r = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: var(--sbb-cursor-pointer);--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-cursor-default)}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const s = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: var(--sbb-cursor-pointer);--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-cursor-default)}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
 export {
   b as SbbAnimationCompleteMixin,
-  a as SbbDisabledInteractiveMixin,
-  t as SbbDisabledMixin,
+  t as SbbDisabledInteractiveMixin,
+  a as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
   v as SbbFormAssociatedCheckboxMixin,
@@ -34,7 +34,7 @@ export {
   q as SbbSelectionPanelMixin,
   H as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
-  r as panelCommonStyle,
+  s as panelCommonStyle,
   M as radioButtonRegistry,
   u as removeAriaElements
 };

package/core/styles/_index.scss

@@ -19,7 +19,6 @@
 @forward './mixins/pearl-chain-bullet';
 @forward './mixins/popover';
 @forward './mixins/scrollbar';
-@forward './mixins/shadows';
 @forward './mixins/table';
 @forward './mixins/typo';
 

package/core/styles/box-sizing.scss

@@ -0,0 +1,3 @@
+@use './mixins/helpers';
+
+@include helpers.box-sizing;

package/core/styles/core/mediaqueries.scss

@@ -7,23 +7,17 @@
 @use '../node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
-  zero: sbb-tokens.$sbb-breakpoint-zero-min,
   // 0
-  micro: sbb-tokens.$sbb-breakpoint-micro-min,
-  // 360
-  small: sbb-tokens.$sbb-breakpoint-small-min,
+  zero: sbb-tokens.$sbb-breakpoint-zero-min,
   // 600
-  medium: sbb-tokens.$sbb-breakpoint-medium-min,
-  // 840
-  large: sbb-tokens.$sbb-breakpoint-large-min,
+  small: sbb-tokens.$sbb-breakpoint-small-min,
   // 1024
-  wide: sbb-tokens.$sbb-breakpoint-wide-min,
-  // 1280
-  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
+  large: sbb-tokens.$sbb-breakpoint-large-min,
   // 1440
+  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
   ultra--max-content: (
-      sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x),
-    ),
+    sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x)
+  )
 ) !default;
 $mq-media-type: all !default;
 

package/core/styles/core.scss

@@ -1,6 +1,6 @@
 $theme: 'standard' !default;
 
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens with (
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
 @use './core/mediaqueries';
@@ -11,97 +11,104 @@ $theme: 'standard' !default;
 @use './mixins/inputs';
 @use './mixins/popover';
 @use './mixins/scrollbar';
-@use './mixins/shadows';
 @use './mixins/typo';
 
 @include helpers.box-sizing;
 
-// Core variables, are always needed
+// Core variables
 :root {
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
-  @include sbb-css-tokens.lyne-design-tokens-css-variables;
-
-  & {
-    // Train formation
-    --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-    --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-    --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-    --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  @include sbb-css-tokens.base;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Cursor
+  --sbb-cursor-default: default;
+  --sbb-cursor-pointer: pointer;
+
+  // Title
+  --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
+  --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
+  --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
+  --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
+  --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
+  --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
+  --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
+  --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
+  --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
+  --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
+  --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+  --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
+  --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
+  --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
+
+  &.sbb-lean {
+    --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
+    --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
+    --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
+    --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
+    --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
+    --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
+    --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
+    --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
+    --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
+    --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
+    --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+    --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
+    --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
+    --sbb-title-margin-block-end-level-6: 0;
+  }
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 100000em;
 
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
-    // Overlay
-    --sbb-overlay-default-z-index: 1000;
-
-    // Cursor
-    --sbb-cursor-default: default;
-    --sbb-cursor-pointer: pointer;
-
-    // Title
-    --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
-    --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
-    --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
-    --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
-    --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
-    --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
-    --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
-    --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
-    --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
-    --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
-    --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-    --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
-    --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
-    --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
-
-    &.sbb-lean {
-      --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
-      --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
-      --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
-      --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
-      --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
-      --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
-      --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
-      --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
-      --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
-      --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
-      --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-      --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
-      --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
-      --sbb-title-margin-block-end-level-6: 0;
-    }
+  &:has(sbb-header[size='s']) {
+    --sbb-header-height: #{functions.px-to-rem-build(52)};
+  }
 
-    // Infinity border radius, can be used to achieve rounded border on start and end
-    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-    --sbb-border-radius-infinity: 100000em;
+  // When the input modality is either mouse or touch,
+  // the focus outline should be hidden.
+  // We achieve this by setting the outline style to none.
+  // This is primarily to work around Safari bugs.
+  &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+    --sbb-focus-outline-style: none;
+  }
 
-    &:has(sbb-header[size='s']) {
-      --sbb-header-height: #{functions.px-to-rem-build(52)};
-    }
+  @include mediaqueries.mq($from: small) {
+    @include sbb-css-tokens.breakpoint-small;
+  }
 
-    // When the input modality is either mouse or touch,
-    // the focus outline should be hidden.
-    // We achieve this by setting the outline style to none.
-    // This is primarily to work around Safari bugs.
-    &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
-      --sbb-focus-outline-style: none;
-    }
+  @include mediaqueries.mq($from: large) {
+    @include sbb-css-tokens.breakpoint-large;
 
-    @include mediaqueries.mq($from: medium) {
-      // Header
-      --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-      // Time Input
-      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
 
-      &:has(sbb-header[size='s']) {
-        --sbb-header-height: var(--sbb-spacing-fixed-14x);
-      }
+    &:has(sbb-header[size='s']) {
+      --sbb-header-height: var(--sbb-spacing-fixed-14x);
     }
   }
+
+  @include mediaqueries.mq($from: ultra) {
+    @include sbb-css-tokens.breakpoint-ultra;
+  }
 }
 
 @include font-face.font-declarations;
@@ -582,47 +589,46 @@ sbb-toggle:has(:focus-visible) {
   }
 }
 
-sbb-dialog-actions {
-  sbb-dialog[negative] & {
-    --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
+sbb-dialog-title {
+  // Hide margin on the right side. Distance to button is defined by flex gap already.
+  sbb-dialog:has(> sbb-dialog-close-button) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
+    padding-inline-end: 0;
   }
+}
 
-  sbb-dialog:state(overflows) & {
-    --sbb-dialog-actions-border-color: transparent;
-
-    @include shadows.shadow-level-9-soft;
+sbb-dialog-content {
+  // If there is a title, remove top spacing for the content
+  sbb-dialog:has(> sbb-dialog-title) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
+    padding-block-start: 0;
   }
 
-  sbb-dialog[negative]:state(overflows) & {
-    @include shadows.shadow-level-9-soft-negative;
+  // Set the negative scrollbar colors for dialog content when dialog is negative
+  sbb-dialog[negative] > &,
+  sbb-dialog[negative]:state(has-intermediate-element) > * > & {
+    @include scrollbar.scrollbar-variables--color-negative;
   }
 }
 
-// If there is a title, remove top spacing for the content
-sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
-  padding-block-start: 0;
-}
-
-// Hide margin on the right side. Distance to button is defined by flex gap already.
-sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
-  margin-inline-end: 0;
-}
-
 sbb-dialog-close-button {
   // If there is no dialog title, the close button should be positioned absolute
-  sbb-dialog:not(:has(> sbb-dialog-title)) > & {
+  sbb-dialog:not(:has(> sbb-dialog-title)) > &,
+  sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
     position: absolute;
     z-index: 1;
   }
 
   // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > & {
+  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
     // TODO: Adapt to lean size title
     --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
   }
 
   // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > & {
+  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
     // TODO: Adapt to lean size title
     --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
   }

package/core/styles/mixins/buttons.scss

@@ -1,15 +1,3 @@
-@use './a11y';
-@use '../core/mediaqueries';
-@use '../core/functions';
-@use './typo';
-
-$disabled: '[disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled]';
-$active: ':active, [data-active]';
-
-// ----------------------------------------------------------------------------------------------------
-// Buttons Mixins
-// ----------------------------------------------------------------------------------------------------
-
 @mixin button-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -23,162 +11,3 @@ $active: ':active, [data-active]';
   -webkit-tap-highlight-color: transparent;
   color: inherit;
 }
-
-// Icon-button style
-@mixin icon-button($button-selector, $icon-selector) {
-  @include icon-button-base(':host', #{$button-selector}, #{$icon-selector});
-
-  :host([negative]) {
-    @include icon-button-variables-negative;
-  }
-
-  :host(:is(#{$disabled})) {
-    @include icon-button-disabled(#{$button-selector});
-  }
-
-  :host(:is([data-focus-visible], :focus-visible)) {
-    @include icon-button-focus-visible(#{$button-selector});
-  }
-
-  :host([data-focus-visible]) {
-    // Basically the focus-outline mixin is made for use with focus-visible.
-    // As we use it here with data-focus-visible, we have to ensure that the outline is not overridden when mouse or touch is in use.
-    --sbb-focus-outline-style: initial;
-  }
-
-  :host(:not(#{$disabled}, #{$active}):hover) {
-    @include icon-button-hover(#{$button-selector});
-  }
-
-  :host(:not(#{$disabled}):is(#{$active})) {
-    @include icon-button-active(#{$button-selector});
-  }
-}
-
-// Variables used in the icon-button
-@mixin icon-button-variables {
-  --sbb-button-color-text: var(--sbb-color-3);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3);
-  --sbb-button-color-active-background: var(--sbb-background-color-4);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
-  --sbb-button-border-disabled-style: dashed;
-  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-transition-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
-
-  @include a11y.if-forced-colors {
-    --sbb-button-color-text: ButtonText !important;
-    --sbb-button-color-hover-background: Highlight !important;
-    --sbb-button-color-active-background: Highlight !important;
-    --sbb-button-color-disabled-background: Canvas !important;
-    --sbb-button-color-disabled-border: GrayText !important;
-    --sbb-button-color-disabled-text: GrayText !important;
-  }
-}
-
-// Variables used in the icon-button negative variant
-@mixin icon-button-variables-negative {
-  --sbb-button-color-text: var(--sbb-color-3-negative);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: var(--sbb-color-5);
-}
-
-// Default state for icon-button in form-field
-@mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
-  #{$host-selector} {
-    display: inline-block;
-    -webkit-tap-highlight-color: transparent;
-    height: fit-content;
-
-    // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize CSS of several frameworks.
-    outline: none !important;
-
-    @include icon-button-variables;
-
-    #{$button-selector} {
-      position: relative;
-      transition-duration: var(--sbb-button-transition-duration);
-      transition-timing-function: var(--sbb-button-transition-easing-function);
-      transition-property: color;
-      border-radius: var(--sbb-button-border-radius);
-      color: var(--sbb-button-color-text);
-      cursor: pointer;
-      user-select: none;
-      display: flex;
-
-      // Renders background in the background absolute to enable the hover animation
-      &::before {
-        position: absolute;
-        content: '';
-        inset: 0;
-        border-radius: var(--sbb-button-border-radius);
-        background-color: var(--sbb-button-color-default-background);
-        transition-duration: var(--sbb-button-transition-duration);
-        transition-timing-function: var(--sbb-button-transition-easing-function);
-        transition-property: inset, background-color;
-      }
-    }
-  }
-
-  #{$icon-selector} {
-    transition: transform var(--sbb-button-transition-duration)
-      var(--sbb-button-transition-easing-function);
-    transform: translateY(
-      var(--sbb-button-translate-y-content-hover, #{functions.px-to-rem-build(0)})
-    );
-    display: flex;
-  }
-}
-
-// Disabled state for icon-button in form-field
-@mixin icon-button-disabled($button-selector) {
-  #{$button-selector} {
-    color: var(--sbb-button-color-disabled-text);
-    cursor: default;
-    pointer-events: none;
-  }
-
-  #{$button-selector}::before {
-    background-color: var(--sbb-button-color-disabled-background);
-    border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)
-      var(--sbb-button-color-disabled-border);
-  }
-}
-
-@mixin icon-button-focus-visible($button-selector) {
-  #{$button-selector}::before {
-    @include a11y.focus-outline;
-  }
-}
-
-// Hover state for icon-button in form-field (exclude active state)
-@mixin icon-button-hover($button-selector) {
-  @include mediaqueries.hover-mq($hover: true) {
-    --sbb-button-translate-y-content-hover: #{functions.px-to-rem-build(-1)};
-  }
-
-  #{$button-selector}::before {
-    @include mediaqueries.hover-mq($hover: true) {
-      background-color: var(--sbb-button-color-hover-background);
-    }
-  }
-}
-
-// Active state for icon-button in form-field
-@mixin icon-button-active($button-selector) {
-  #{$button-selector}::before {
-    background-color: var(--sbb-button-color-active-background);
-  }
-}

package/core/styles/mixins/card.scss

@@ -2,7 +2,6 @@
 @use '../core/mediaqueries';
 @use './a11y';
 @use './buttons';
-@use './shadows';
 @use './typo';
 
 // -----------------------------------------------------------------------------
@@ -162,7 +161,7 @@
     --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
 
     #{$cardSelector} {
-      @include shadows.shadow-level-9-hard;
+      box-shadow: var(--sbb-box-shadow-level-9-hard);
     }
 
     @include a11y.if-forced-colors {

package/core/styles/mixins/lists.scss

@@ -186,7 +186,7 @@
   }
 
   &:where(.sbb-text-xl) {
-    @include mediaqueries.mq($from: medium) {
+    @include mediaqueries.mq($from: large) {
       --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)};
     }
   }

package/core/styles/mixins/panel.scss

@@ -24,7 +24,7 @@
   );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 
-  @include mediaqueries.mq($from: medium) {
+  @include mediaqueries.mq($from: large) {
     --sbb-panel-width: #{functions.px-to-rem-build(321)};
     --sbb-panel-inner-height: #{functions.px-to-rem-build(240.11)};
     --sbb-panel-triangle-height: #{functions.px-to-rem-build(47.45)};