@sbb-esta/lyne-elements 4.5.1 → 4.7.0

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -6,6 +6,7 @@
 // ----------------------------------------------------------------------------------------------------
 
 @mixin pearl-chain-bullet-variables {
+  --sbb-pearl-chain-position-color: var(--sbb-color-primary);
   --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
   --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
   --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
@@ -14,7 +15,7 @@
     var(--sbb-color-metal),
     var(--sbb-color-granite)
   );
-  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
   --sbb-pearl-chain-bullet-animation-duration: 1920ms;
   --sbb-pearl-chain-bullet-animation-easing: ease-out;
@@ -107,24 +108,29 @@
 @mixin pearl-chain-bullet-position {
   @include pearl-chain-bullet-start-end;
   @include pearl-chain-bullet;
-  @include pearl-chain-bullet-disruption;
+
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-position-color: Highlight;
+  }
 
   @keyframes pearl-chain-bullet-position-pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
 
     25% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
 
     50% {
       box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
-        color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
+        color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);
     }
 
     100% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
   }
 

package/core.css

@@ -1412,6 +1412,27 @@
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-dialog-color: var(--sbb-color-2);
+  --sbb-dialog-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
+  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
+  --sbb-dialog-width: 100%;
+  --sbb-dialog-max-width: 100%;
+  --sbb-dialog-max-width-default: 55.75rem;
+  --sbb-dialog-height: 100%;
+  --sbb-dialog-max-height: 100%;
+  --sbb-dialog-inset: 0 auto auto 0;
+  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
+  --sbb-dialog-animation-easing: ease;
+  --sbb-dialog-pointer-events: none;
+  --sbb-dialog-backdrop-visibility: hidden;
+  --sbb-dialog-backdrop-pointer-events: none;
+  --sbb-dialog-backdrop-color: transparent;
+  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
+  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
+  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
   --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);
@@ -1439,6 +1460,48 @@
   --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-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: 4.75rem;
+  --sbb-footer-color: var(--sbb-color-granite);
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --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-option-color: var(--sbb-color-3);
+  --sbb-option-background-color: inherit;
+  --sbb-option-background-color-hover: var(--sbb-background-color-3);
+  --sbb-option-background-color-active: var(--sbb-background-color-4);
+  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
+  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
+  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-min-height: var(--sbb-size-element-s);
+  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-justify-content: start;
+  --sbb-option-cursor: var(--sbb-cursor-pointer);
+  --sbb-option-border-radius: var(--sbb-border-radius-4x);
+  --sbb-option-icon-color: var(--sbb-color-metal);
+  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-focus-outline-color: transparent;
+  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
+  --sbb-option-font-size: var(--sbb-text-font-size-s);
+  --sbb-option-hint-color: var(--sbb-color-metal);
+  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
+  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-optgroup-label-color: var(--sbb-color-metal);
+  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
+  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --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: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-color: var(--sbb-color-3);
   --sbb-radio-button-background-color: var(--sbb-background-color-1);
@@ -1473,6 +1536,11 @@
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-status-color: var(--sbb-color-4);
+  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-status-font-size: var(--sbb-text-font-size-s);
+  --sbb-status-title-color: var(--sbb-color-granite);
+  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
   --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
   --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -1582,6 +1650,8 @@
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
     --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;
   }
 }
 @media (min-width: calc(64rem)) {
@@ -1625,6 +1695,8 @@
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --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));
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1671,6 +1743,12 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-breadcrumb-group:not(:defined) {
+  display: block;
+  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
+  overflow: hidden;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -1679,6 +1757,41 @@ sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image)
   position: absolute;
 }
 
+sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
+  position: absolute;
+  z-index: 1;
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
+}
+
+sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
+  padding-block-start: var(--sbb-spacing-fixed-1x);
+}
+sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
+}
+
+sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
+  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);
@@ -1824,6 +1937,7 @@ html {
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-text) * 1em);
+  height: 100%;
 }
 :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
@@ -1923,12 +2037,6 @@ sbb-toast) {
   pointer-events: none;
 }
 
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-
 :is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
@@ -2122,41 +2230,6 @@ sbb-toggle:has(:focus-visible) {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
-: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-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
-  padding-inline-end: 0;
-}
-
-sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
-  padding-block-start: var(--sbb-spacing-fixed-1x);
-}
-sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
-  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
-  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
-}
-
-sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
-  position: absolute;
-  z-index: 1;
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
-  --_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);
@@ -2166,14 +2239,6 @@ sbb-notification:has(sbb-title)[size=s] {
   --_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: var(--sbb-color-granite);
-  --_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;