@sbb-esta/lyne-elements 4.7.0 → 4.8.1

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 {
@@ -1314,6 +1235,46 @@
   --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
   --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-calendar-cell-background-color: transparent;
+  --sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);
+  --sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);
+  --sbb-calendar-cell-padding: 0.125rem;
+  --sbb-calendar-cell-border-width: var(--sbb-border-width-2x);
+  --sbb-calendar-cell-disabled-height: 0.09375rem;
+  --sbb-calendar-cell-disabled-width: 1.59375rem;
+  --sbb-calendar-cell-disabled-color: var(--sbb-color-granite);
+  --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-control-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
+  --sbb-calendar-control-view-change-height: 2.75rem;
+  --sbb-calendar-control-view-change-color: var(--sbb-color-3);
+  --sbb-calendar-control-view-change-background: var(--sbb-background-color-1);
+  --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
+    var(--sbb-spacing-fixed-2x);
+  --sbb-calendar-header-color: var(--sbb-color-granite);
+  --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-table-animation-shift: 0.00625rem;
+  --sbb-calendar-table-column-spaces: 12;
+  --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
+  --sbb-calendar-table-animation-duration: 0.1ms;
+  --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: 0.0625rem;
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-font-weight: unset;
+  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-cell-year-month-width: 4.8125rem;
+  --sbb-calendar-cell-year-month-height: 2.75rem;
+  --sbb-calendar-day-width: 2.75rem;
+  --sbb-calendar-day-height: 3rem;
+  --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);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1390,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);
@@ -1436,6 +1392,9 @@
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: 1.0625rem;
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1460,6 +1419,14 @@
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: 17.5rem;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-footer-background-color: var(--sbb-background-color-3);
   --sbb-footer-clock-width: 4.75rem;
   --sbb-footer-color: var(--sbb-color-granite);
@@ -1468,6 +1435,125 @@
   --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
   --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
   --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-border-color: var(--sbb-border-color-5);
+  --sbb-form-field-border-style: solid;
+  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
+  --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-color: var(--sbb-color-3);
+  --sbb-form-field-label-color: var(--sbb-color-metal);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color: var(--sbb-color-metal);
+  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-form-field-min-height: var(--sbb-size-element-m);
+  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
+  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);
+  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-floating-label-transform: 0.53125rem;
+  --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+  --sbb-header-background: var(--sbb-background-color-1);
+  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-header-inset-inline-end: 0;
+  --sbb-header-position: fixed;
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-header-action-color: var(--sbb-color-1);
+  --sbb-header-action-background-color: transparent;
+  --sbb-header-action-min-height: var(--sbb-size-element-s);
+  --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
+  --sbb-header-action-border-color: transparent;
+  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
+  --sbb-header-action-active-border-color: var(--sbb-header-action-color);
+  --sbb-header-first-item-icon-shift: 0.125rem;
+  --sbb-header-environment-background-color: var(--sbb-color-granite);
+  --sbb-header-environment-color: var(--sbb-color-1-negative);
+  --sbb-header-environment-size: 2.375rem;
+  --sbb-header-environment-rotate: 45deg;
+  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-lead-container-background-color: var(--sbb-background-color-1);
+  --sbb-lead-container-image-ratio: 2 / 1;
+  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
+  --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
+  --sbb-lead-container-image-border-radius: 0;
+  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
+  --sbb-loading-indicator-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-window-element-rotation: 55.24deg;
+  --sbb-loading-indicator-window-height: 1.125rem;
+  --sbb-loading-indicator-window-element-width: 3.4375rem;
+  --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-circle-padding: 0.125rem;
+  --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
+  --sbb-loading-indicator-circle-animated-width: 0.1875em;
+  --sbb-loading-indicator-circle-animated-height: 0.1875em;
+  --sbb-loading-indicator-circle-animated-border-radius: 50%;
+  --sbb-logo-panel-color: var(--sbb-color-brand);
+  --sbb-logo-signet-color: var(--sbb-color-white);
+  --sbb-logo-word-mark-color: var(--sbb-color-black);
+  --sbb-logo-word-mark-color: light-dark(var(--sbb-color-black), var(--sbb-color-white));
+  --sbb-logo-aspect-ratio: 454 / 48;
+  --sbb-map-container-map-height-zero: 18.4375rem;
+  --sbb-map-container-map-height-small: 20rem;
+  --sbb-map-container-sidebar-width: 25rem;
+  --sbb-map-container-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
+  --sbb-menu-animation-easing: ease;
+  --sbb-menu-max-width: 100%;
+  --sbb-menu-min-width: 100%;
+  --sbb-menu-container-height: 100dvh;
+  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
+  --sbb-menu-min-height: 3.03125rem;
+  --sbb-menu-border-radius: var(--sbb-border-radius-4x);
+  --sbb-menu-color: var(--sbb-color-2-inverted);
+  --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
+  --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-menu-action-color: var(--sbb-color-2-inverted);
+  --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-menu-action-forced-color-border-color: CanvasText;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
+  --sbb-mini-calendar-day-dimensions: 0.375rem;
+  --sbb-mini-calendar-day-scale: 1.333;
+  --sbb-mini-calendar-month-offset: 0;
+  --sbb-mini-calendar-month-visibilty-year: hidden;
+  --sbb-mini-calendar-month-label-color: var(--sbb-color-granite);
+  --sbb-mini-calendar-month-label-color: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-silver)
+  );
+  --sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
+  --sbb-notification-border-width: var(--sbb-border-width-1x);
+  --sbb-notification-color: var(--sbb-color-2-negative-inverted);
+  --sbb-notification-icon-align-self: center;
+  --sbb-notification-margin: 0;
+  --sbb-notification-timing-function: ease-in;
+  --sbb-notification-font-size: var(--sbb-text-font-size-s);
+  --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);
+  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
+  --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1515,11 +1601,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);
@@ -1588,7 +1674,17 @@
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-header-action-border-color: CanvasText;
+    --sbb-header-action-color: LinkText;
+    --sbb-header-action-active-border-width: 0;
     --sbb-expansion-panel-header-text-color: ButtonText;
+    --sbb-form-field-border-color: ButtonBorder;
+    --sbb-loading-indicator-circle-animated-width: 50%;
+    --sbb-loading-indicator-circle-animated-height: 100%;
+    --sbb-loading-indicator-circle-animated-border-radius: 0;
+    --sbb-loading-indicator-circle-background: transparent;
+    --sbb-logo-panel-color: ButtonText !important;
+    --sbb-logo-signet-color: Canvas !important;
     --sbb-visual-checkbox-selection-color: Canvas;
     --sbb-visual-checkbox-selection-color-negative: Canvas;
     --sbb-visual-checkbox-selection-color-disabled: Canvas;
@@ -1606,7 +1702,6 @@
   --sbb-train-formation-wagon-width: 5rem;
   --sbb-train-formation-wagon-height: 2.5rem;
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
   --sbb-time-input-max-width: 3.625rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
@@ -1632,9 +1727,6 @@
     var(--sbb-spacing-fixed-1x);
   --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
 }
-:root:has(sbb-header[size=s]) {
-  --sbb-header-height: 3.25rem;
-}
 :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
   --sbb-focus-outline-style: none;
 }
@@ -1652,6 +1744,8 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
     --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
     --sbb-footer-clock-width: 7rem;
+    --sbb-notification-icon-align-self: flex-start;
+    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
   }
 }
 @media (min-width: calc(64rem)) {
@@ -1697,17 +1791,21 @@
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
+    --sbb-flip-card-min-height: 20rem;
+    --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-floating-label-transform: 0.65625rem;
+    --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    --sbb-menu-max-width: 20rem;
+    --sbb-menu-min-width: 11.25rem;
+    --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
   }
   :root {
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
   }
-  :root:has(sbb-header[size=s]) {
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -1722,6 +1820,9 @@
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
+    --sbb-lead-container-image-ratio: 21 / 9;
+    --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
+    --sbb-map-container-sidebar-width: 30rem;
   }
 }
 
@@ -1780,61 +1881,16 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
-: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);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-}
-
-sbb-tab-nav-bar .sbb-tab-amount {
-  margin: 0;
-  color: var(--sbb-tab-label-amount-color);
-  font-weight: normal;
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-
-.sbb-dark {
-  color-scheme: dark;
-}
-
-.sbb-light {
-  color-scheme: light;
-}
-
-.sbb-light-dark {
-  color-scheme: light dark;
-}
-
-html {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color-scheme: light dark;
-  color: var(--sbb-font-color-default);
-  background-color: var(--sbb-background-color-1);
-}
-
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [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%;
 }
 
 :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-  --sbb-text-font-size: var(--sbb-text-font-size-m);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1844,7 +1900,7 @@ html {
   padding: 0;
   appearance: none;
   outline: none !important;
-  overflow: var(--sbb-form-field-overflow);
+  overflow: var(--sbb-form-field-overflow, hidden);
   width: 100%;
   box-sizing: border-box;
   color: var(--sbb-form-field-text-color);
@@ -1852,6 +1908,7 @@ html {
   opacity: 1;
   background-color: transparent;
   font-size: var(--sbb-form-field-input-text-size) !important;
+  letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
   font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-text) !important;
 }
@@ -2002,6 +2059,95 @@ html {
   }
 }
 
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}
+
+:root:has(sbb-header[size=m]) {
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+}
+
+:root:has(sbb-header[size=s]) {
+  --sbb-header-height: 3.25rem;
+}
+
+@media (min-width: calc(64rem)) {
+  :root:has(sbb-header[size=m]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+  }
+  :root:has(sbb-header[size=s]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  }
+}
+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;
+}
+
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
+sbb-lead-container > [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);
+}
+
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
+: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);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+}
+
+sbb-tab-nav-bar .sbb-tab-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
+html {
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+  color-scheme: light dark;
+  color: var(--sbb-font-color-default);
+  background-color: var(--sbb-background-color-1);
+}
+
+::placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
+  opacity: 1;
+}
+
 :is(sbb-autocomplete,
 sbb-autocomplete-grid,
 sbb-datepicker,
@@ -2070,27 +2216,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [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%;
-}
-
-sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
-sbb-lead-container > [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);
-}
-
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(
@@ -2196,15 +2321,6 @@ sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-for
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }
 
-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;
-}
-
-sbb-icon-sidebar-content + sbb-icon-sidebar {
-  border-start-end-radius: 0;
-  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
-}
-
 sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
   position: absolute;
 }
@@ -2213,10 +2329,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);
@@ -2230,15 +2342,6 @@ sbb-toggle:has(:focus-visible) {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
-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);
-}
-sbb-notification:has(sbb-title)[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-overlay-outlet {
   position: fixed;
   inset: 0;
@@ -2249,24 +2352,4 @@ sbb-notification:has(sbb-title)[size=s] {
   --sbb-option-text-overflow: ellipsis;
   --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: 3rem;
-  --sbb-mini-calendar-month-grid-template-rows: none;
-  --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
-}
-sbb-mini-calendar[orientation=horizontal] sbb-mini-calendar-month 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[orientation=vertical] sbb-mini-calendar-month sbb-mini-calendar-day:first-child {
-  grid-row-start: var(--sbb-mini-calendar-month-offset);
 }