@sbb-esta/lyne-elements 4.6.0 → 4.8.0

package/core/styles/core.scss

@@ -10,6 +10,7 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
+@use './mixins/overlay' as overlay;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -29,6 +30,12 @@ $theme: 'standard' !default;
 @use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
   $theme: $theme
 );
+@use '../../calendar/calendar/calendar.global' as calendar with (
+  $theme: $theme
+);
+@use '../../calendar/common/calendar-cell-base-element.global' as calendar-cell with (
+  $theme: $theme
+);
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
@@ -50,10 +57,7 @@ $theme: 'standard' !default;
 @use '../../core/mixins/panel-common.global' as panel-common with (
   $theme: $theme
 );
-@use '../../checkbox/checkbox/checkbox.global' as checkbox with (
-  $theme: $theme
-);
-@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group with (
+@use '../../checkbox/checkbox.global' as checkbox with (
   $theme: $theme
 );
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
@@ -68,6 +72,18 @@ $theme: 'standard' !default;
 @use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
   $theme: $theme
 );
+@use '../../dialog/dialog/dialog.global' as dialog with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-close-button/dialog-close-button.global' as dialog-close-button with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-content/dialog-content.global' as dialog-content with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-title/dialog-title.global' as dialog-title with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -82,10 +98,87 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../flip-card/flip-card/flip-card.global' as flip-card with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
+  $theme: $theme
+);
+@use '../../header/common/header-action.global' as header-common with (
+  $theme: $theme
+);
+@use '../../header/header-environment/header-environment.global' as header-environment with (
+  $theme: $theme
+);
+@use '../../header/header/header.global' as header with (
+  $theme: $theme
+);
+@use '../../footer/footer.global' as footer with (
+  $theme: $theme
+);
+@use '../../form-field/error/error.global' as error with (
+  $theme: $theme
+);
+@use '../../form-field/form-field/form-field.global' as form-field with (
+  $theme: $theme
+);
+@use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
+  $theme: $theme
+);
+@use '../../lead-container/lead-container.global' as lead-container with (
+  $theme: $theme
+);
+@use '../../link/common/block-link.global' as block-link with (
+  $theme: $theme
+);
+@use '../../loading-indicator/loading-indicator.global' as loading-indicator with (
+  $theme: $theme
+);
+@use '../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
+  with (
+  $theme: $theme
+);
+@use '../../logo/logo.global' as logo with (
+  $theme: $theme
+);
+@use '../../map-container/map-container.global' as map-container with (
+  $theme: $theme
+);
+@use '../../menu/menu/menu.global' as menu with (
+  $theme: $theme
+);
+@use '../../menu/common/menu-action.global' as menu-action with (
+  $theme: $theme
+);
+@use '../../message/message.global' as message with (
+  $theme: $theme
+);
+@use '../../mini-calendar/mini-calendar-day/mini-calendar-day.global' as mini-calendar-day with (
+  $theme: $theme
+);
+@use '../../mini-calendar/mini-calendar-month/mini-calendar-month.global' as mini-calendar-month
+  with (
+  $theme: $theme
+);
+@use '../../notification/notification.global' as notification with (
+  $theme: $theme
+);
+@use '../../option/option/option.global' as option with (
+  $theme: $theme
+);
+@use '../../option/option-hint/option-hint.global' as option-hint with (
+  $theme: $theme
+);
+@use '../../option/optgroup/optgroup.global' as optgroup with (
+  $theme: $theme
+);
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
-@use '../../radio-button/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 (
@@ -95,6 +188,9 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../status/status.global' as status with (
+  $theme: $theme
+);
 @use '../../tabs/common/tab-group-common.global' as tab-group-common with (
   $theme: $theme
 );
@@ -120,6 +216,8 @@ $theme: 'standard' !default;
   @include button.base;
   @include mini-button.base;
   @include mini-button-group.base;
+  @include calendar.base;
+  @include calendar-cell.base;
   @include card.base;
   @include card-badge.base;
   @include carousel.base;
@@ -128,19 +226,46 @@ $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;
   @include clock.base;
+  @include dialog.base;
+  @include dialog-close-button.base;
   @include divider.base;
+  @include error.base;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include flip-card.base;
+  @include flip-card-details.base;
+  @include footer.base;
+  @include form-field.base;
+  @include header.base;
+  @include header-common.base;
+  @include header-environment.base;
+  @include icon-sidebar.base;
+  @include lead-container.base;
+  @include block-link.base;
+  @include loading-indicator.base;
+  @include loading-indicator-circle.base;
+  @include logo.base;
+  @include map-container.base;
+  @include menu.base;
+  @include menu-action.base;
+  @include message.base;
+  @include mini-calendar-day.base;
+  @include mini-calendar-month.base;
+  @include notification.base;
+  @include option.base;
+  @include option-hint.base;
+  @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;
   @include tab-group-common.base;
   @include tab-label-common.base;
   @include visual-checkbox.base;
@@ -151,7 +276,11 @@ $theme: 'standard' !default;
     @include breadcrumb.base-forced-colors;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
+    @include header-common.base-forced-colors;
     @include expansion-panel-header.base-forced-colors;
+    @include form-field.base-forced-colors;
+    @include loading-indicator-circle.base-forced-colors;
+    @include logo.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;
   }
@@ -161,9 +290,6 @@ $theme: 'standard' !default;
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
   --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)};
 
@@ -203,10 +329,6 @@ $theme: 'standard' !default;
     }
   }
 
-  &:has(sbb-header[size='s']) {
-    --sbb-header-height: #{functions.px-to-rem-build(52)};
-  }
-
   // 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.
@@ -217,6 +339,10 @@ $theme: 'standard' !default;
 
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
+
+    @include dialog.base-breakpoint-small;
+    @include footer.base-breakpoint-small;
+    @include notification.base-breakpoint-small;
   }
 
   @include mediaqueries.mq($from: large) {
@@ -225,6 +351,11 @@ $theme: 'standard' !default;
     @include button.base-breakpoint-large;
 
     @include chip-group.base-breakpoint-large;
+    @include dialog.base-breakpoint-large;
+    @include flip-card.base-breakpoint-large;
+    @include form-field.base-breakpoint-large;
+    @include header.base-breakpoint-large;
+    @include menu.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -234,26 +365,33 @@ $theme: 'standard' !default;
       }
     }
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-
     // 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);
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {
     @include sbb-css-tokens.breakpoint-ultra;
+
+    @include lead-container.base-breakpoint-ultra;
+    @include map-container.base-breakpoint-ultra;
   }
 }
 
 @include font-face.font-declarations;
 
 // Components global styles
+@include breadcrumb-group.rules;
 @include container.rules;
+@include dialog-close-button.rules;
+@include dialog-content.rules;
+@include dialog-title.rules;
+@include flip-card-summary.rules;
+@include form-field.rules;
+@include header.rules;
+@include icon-sidebar.rules;
+@include lead-container.rules;
+@include message.rules;
+@include option.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -282,122 +420,6 @@ html {
   @include typo.placeholder;
 }
 
-:is(sbb-form-field, sbb-timetable-form-field) {
-  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-    @include typo.text-m--regular;
-    @include helpers.ellipsis;
-    @include inputs.input-reset;
-
-    // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize CSS of several frameworks.
-    outline: none !important;
-    overflow: var(--sbb-form-field-overflow);
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--sbb-form-field-text-color);
-
-    // Fill color needed for Safari
-    -webkit-text-fill-color: var(--sbb-form-field-text-color);
-    opacity: 1;
-    background-color: transparent;
-
-    // To be more specific than the styles in normalize.scss we need to use !important
-    // TODO: Find a better solution
-    font-size: var(--sbb-form-field-input-text-size) !important;
-    font-family: var(--sbb-typo-font-family) !important;
-    line-height: var(--sbb-typo-line-height-text) !important;
-
-    &::placeholder {
-      @include typo.placeholder;
-    }
-  }
-
-  &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
-  // This covers the placeholder of the sbb-date-input and sbb-time-input
-  &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
-    color: transparent !important;
-    -webkit-text-fill-color: transparent !important;
-
-    @include a11y.if-forced-colors {
-      color: Canvas !important;
-      -webkit-text-fill-color: Canvas !important;
-    }
-  }
-
-  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
-  &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-    -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  }
-
-  // Fix positioning issue for select which occurs in Safari
-  :where(select) {
-    vertical-align: middle;
-  }
-
-  :where(select, sbb-select) {
-    padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
-  }
-
-  &[size='s'] :where(input, sbb-date-input, sbb-time-input) {
-    // We shrink the input's height to support all types of inputs (especially type=number).
-    // Factor 1.25 ensures, letters are not cut.
-    height: calc(var(--sbb-form-field-input-text-size) * 1.25);
-
-    // Avoids Safari bug, where text gets misaligned with type=number
-    line-height: 1 !important;
-
-    // We add the missing block spacing to fit the line-height
-    margin-block: calc(
-      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
-    );
-  }
-
-  :where(textarea) {
-    @include scrollbar.scrollbar;
-
-    position: relative;
-    resize: none;
-
-    // White-space break needed for Firefox
-    white-space: break-spaces;
-    overflow-y: auto;
-    min-height: calc((var(--sbb-typo-line-height-text) * 1em));
-    height: 100%;
-  }
-
-  &[size='l'] :where(textarea) {
-    padding-block-end: #{functions.px-to-rem-build(5.5)};
-  }
-
-  &[negative] :where(textarea) {
-    @include scrollbar.scrollbar($negative: true);
-  }
-
-  &:has(
-    :is(
-      :is(input, textarea, select):user-invalid,
-      :state(interacted):invalid,
-      .ng-touched.ng-invalid,
-      .sbb-invalid
-    )
-  ),
-  :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
-    --sbb-form-field-border-color: var(--sbb-color-error);
-    --sbb-form-field-text-color: var(--sbb-color-error);
-
-    &[negative] {
-      --sbb-form-field-border-color: var(--sbb-color-red85);
-      --sbb-form-field-text-color: var(--sbb-color-red85);
-    }
-
-    @include a11y.if-forced-colors {
-      --sbb-form-field-border-color: LinkText !important;
-      --sbb-form-field-text-color: LinkText !important;
-    }
-  }
-}
-
 // Hiding components until they are instantiated
 :is(
   sbb-autocomplete,
@@ -432,13 +454,6 @@ html {
   @include popover.popover-reset;
 }
 
-// Ensure stable breadcrumb height during hydrating
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-
 // 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.
 :is(sbb-card, sbb-flip-card) .sbb-action {
@@ -474,38 +489,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
-sbb-flip-card-summary {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: auto;
-    --sbb-image-object-fit: cover;
-
-    border-radius: 0;
-    display: block;
-    height: 100%;
-  }
-}
-
-// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
-sbb-lead-container {
-  > [slot='image']:is(sbb-image, img, picture),
-  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-lead-container-image-border-radius);
-  }
-}
-
-// TODO: Move back to the sbb-message components when the global CSS refactoring happens
-sbb-message {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: var(--sbb-message-image-border-radius);
-  }
-}
-
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
 // TODO: Move back to the teaser components when the global CSS refactoring happens
@@ -662,17 +645,6 @@ sbb-sidebar-container:has(
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }
 
-// Move the current-page-border to the right side if the sidebar is right positioned
-sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
-  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
-}
-
-// Set the border radius at the left top side if the sidebar is right positioned
-sbb-icon-sidebar-content + sbb-icon-sidebar {
-  border-start-end-radius: 0;
-  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
-}
-
 // If there is no close button, avoid reserving any space for the button in the sidebar title
 sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
   position: absolute;
@@ -683,11 +655,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-// Move container below header
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 // We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
 .sbb-select-trigger {
   width: 100%;
@@ -704,82 +671,6 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] {
-  :where(sbb-option, sbb-autocomplete-grid-option) {
-    --sbb-option-min-height: var(--sbb-size-element-xxs);
-    --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-    --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-optgroup {
-    --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-option-hint {
-    --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-  }
-}
-
-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-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: var(--sbb-spacing-fixed-1x);
-  }
-
-  // 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;
-  }
-}
-
-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: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:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-  }
-
-  // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
-  }
-}
-
-sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
-
-  &[size='s'] {
-    --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
-    --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
-  }
-}
-
-sbb-status:has(sbb-title) {
-  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
@@ -792,29 +683,3 @@ sbb-status:has(sbb-title) {
   --sbb-option-overflow: hidden;
   --sbb-option-white-space: nowrap;
 }
-
-sbb-mini-calendar[orientation='horizontal'] {
-  sbb-mini-calendar-month {
-    --sbb-mini-calendar-grid-auto-flow: row;
-    --sbb-mini-calendar-month-height: #{functions.px-to-rem-build(48)};
-    --sbb-mini-calendar-month-grid-template-rows: none;
-    --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
-
-    sbb-mini-calendar-day:first-child {
-      grid-column-start: var(--sbb-mini-calendar-month-offset);
-    }
-  }
-}
-
-sbb-mini-calendar[orientation='vertical'] {
-  sbb-mini-calendar-month {
-    --sbb-mini-calendar-grid-auto-flow: column;
-    --sbb-mini-calendar-month-height: auto;
-    --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
-    --sbb-mini-calendar-month-grid-template-columns: none;
-
-    sbb-mini-calendar-day:first-child {
-      grid-row-start: var(--sbb-mini-calendar-month-offset);
-    }
-  }
-}

package/core/styles/mixins/overlay.scss

@@ -1,5 +1,20 @@
+@use '../core/functions';
 @use './scrollbar';
 
+@mixin options-panel-overlay-variables--global($theme: 'standard') {
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-1);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+}
+
 @mixin options-panel-overlay-variables {
   @include scrollbar.scrollbar-variables;
 
@@ -12,24 +27,15 @@
     var(--sbb-options-panel-max-height, 100000em)
   );
   --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
-  --sbb-options-panel-visibility: visible;
-  --sbb-options-panel-width: fit-content;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
     var(--sbb-options-panel-border-radius);
   --sbb-options-panel-animation-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-gap-fix-opacity: 0;
-  --sbb-options-panel-gap-fix-transform: none;
   --sbb-options-panel-gap-fix-top: calc(
     var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
   );
-  --sbb-options-panel-background-color: var(--sbb-background-color-1);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.
@@ -53,6 +59,10 @@
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
 }
 
+@mixin options-panel-overlay-size-m-variables {
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
+}
+
 @mixin options-panel-overlay-container {
   position: fixed;
   pointer-events: none;
@@ -64,14 +74,14 @@
   display: flex;
   justify-content: space-between;
   position: fixed;
-  visibility: var(--sbb-options-panel-visibility);
-  opacity: var(--sbb-options-panel-gap-fix-opacity);
+  visibility: var(--sbb-options-panel-visibility, visible);
+  opacity: var(--sbb-options-panel-gap-fix-opacity, 0);
   background-color: transparent;
-  width: var(--sbb-options-panel-width);
+  width: var(--sbb-options-panel-width, fit-content);
   height: var(--sbb-options-panel-border-radius);
   top: var(--sbb-options-panel-gap-fix-top);
   left: var(--sbb-options-panel-position-x);
-  transform: var(--sbb-options-panel-gap-fix-transform);
+  transform: var(--sbb-options-panel-gap-fix-transform, none);
   transition: opacity var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);
 }
@@ -79,14 +89,14 @@
 @mixin options-panel-overlay {
   display: block;
   position: absolute;
-  visibility: var(--sbb-options-panel-visibility);
+  visibility: var(--sbb-options-panel-visibility, 'visible');
   overflow: hidden;
   background-color: transparent;
   border: none;
   border-radius: var(--sbb-options-panel-border-radius);
   top: var(--sbb-options-panel-position-y);
   left: var(--sbb-options-panel-position-x);
-  width: var(--sbb-options-panel-width);
+  width: var(--sbb-options-panel-width, fit-content);
   transition: box-shadow var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);