@sbb-esta/lyne-elements 4.8.1 → 4.10.0

package/off-brand-theme.css

@@ -1687,11 +1687,37 @@ slot[name=error]::slotted(*) {
   --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-overlay-background-color: var(--sbb-background-color-3);
+  --sbb-overlay-display: none;
+  --sbb-overlay-height: 100%;
+  --sbb-overlay-inset: 0 auto auto 0;
+  --sbb-overlay-animation-easing: ease;
+  --sbb-overlay-pointer-events: none;
+  --sbb-overlay-container-display: none;
   --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-paginator-height: var(--sbb-size-element-m);
+  --sbb-paginator-page-color: var(--sbb-color-metal);
+  --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-page-border-width: 0;
+  --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
+  --sbb-paginator-animation-easing: var(--sbb-animation-easing);
+  --sbb-paginator-font-size: var(--sbb-text-font-size-s);
+  --sbb-compact-paginator-height: var(--sbb-size-element-m);
+  --sbb-compact-paginator-color: var(--sbb-color-metal);
+  --sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
+  --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
+  --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
+  --sbb-popover-border-radius: var(--sbb-border-radius-8x);
+  --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-background: var(--sbb-background-color-1);
+  --sbb-popover-animation-easing: ease-out;
   --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);
@@ -1726,11 +1752,62 @@ slot[name=error]::slotted(*) {
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-signet-background-color: var(--sbb-color-brand);
+  --sbb-signet-panel-color: var(--sbb-color-brand);
+  --sbb-signet-icon-color: var(--sbb-color-white);
+  --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-slider-line-height: 0.25rem;
+  --sbb-slider-knob-size: 1.75rem;
+  --sbb-slider-knob-size-active: 1.9375rem;
+  --sbb-slider-knob-border-size: 0.1875rem;
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: 25rem;
+  --sbb-slider-min-width: 9.375rem;
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: 0.125rem;
   --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-step-label-color: var(--sbb-color-4);
+  --sbb-step-label-font-size: var(--sbb-text-font-size-l);
+  --sbb-step-label-prefix-size: var(--sbb-size-element-xxs);
+  --sbb-step-label-prefix-border-style: solid;
+  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-step-label-prefix-background-color: var(--sbb-background-color-1);
+  --sbb-step-label-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-step-label-inset-block-start-size-m: calc(
+    var(--sbb-text-font-size-l) * (var(--sbb-typo-line-height-text) / 2) +
+      (var(--sbb-border-width-1x) / 2)
+  );
+  --sbb-step-label-inset-block-start-size-s: calc(
+    var(--sbb-text-font-size-m) * (var(--sbb-typo-line-height-text) / 2) +
+      (var(--sbb-border-width-1x) / 2)
+  );
+  --sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-m);
+  --sbb-stepper-orientation: row;
+  --sbb-stepper-border-width: var(--sbb-border-width-1x);
+  --sbb-stepper-marker-width: var(--sbb-border-width-3x);
+  --sbb-stepper-marker-color: var(--sbb-color-3);
   --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);
@@ -1750,6 +1827,48 @@ slot[name=error]::slotted(*) {
   --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
+  --sbb-tag-animation-easing: var(--sbb-animation-easing);
+  --sbb-tag-background-color: var(--sbb-background-color-1);
+  --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-tag-border-style: solid;
+  --sbb-tag-border-width: var(--sbb-border-width-1x);
+  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tag-text-color: var(--sbb-color-2);
+  --sbb-tag-amount-color: var(--sbb-color-metal);
+  --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tag-height: var(--sbb-size-element-xs);
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: var(--sbb-color-granite);
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-image-width: 18.75rem;
+  --sbb-teaser-product-background-color: var(--sbb-color-cloud);
+  --sbb-teaser-product-background-color: light-dark(
+    var(--sbb-color-cloud),
+    var(--sbb-color-midnight)
+  );
+  --sbb-teaser-product-background-gradient-direction: to right;
+  --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-product-min-height: 37.5rem;
+  --sbb-teaser-product-background-gradient-start: 25%;
+  --sbb-teaser-product-background-gradient-end: 75%;
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
+  --sbb-teaser-product-content-color: var(--sbb-color-4);
+  --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
+  --sbb-teaser-product-footer-color: light-dark(
+    var(--sbb-color-anthracite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-footer-padding-block-end: 0;
   --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -1800,6 +1919,18 @@ slot[name=error]::slotted(*) {
     --sbb-radio-button-background-color: Canvas;
     --sbb-radio-button-border-width: var(--sbb-border-width-2x);
     --sbb-radio-button-border-color: ButtonBorder;
+    --sbb-signet-background-color: ButtonText !important;
+    --sbb-signet-panel-color: ButtonText !important;
+    --sbb-signet-icon-color: Canvas !important;
+    --sbb-slider-selected-line-color: Highlight;
+    --sbb-slider-line-color: CanvasText;
+    --sbb-step-label-color: ButtonText;
+    --sbb-step-label-prefix-border-color: ButtonText;
+    --sbb-tag-amount-color: ButtonText;
+    --sbb-tag-background-color: Canvas !important;
+    --sbb-tag-text-color: ButtonText;
+    --sbb-tag-border-color: CanvasText;
+    --sbb-tag-border-width: var(--sbb-border-width-2x);
   }
 }
 :root {
@@ -1903,6 +2034,12 @@ slot[name=error]::slotted(*) {
     --sbb-menu-max-width: 20rem;
     --sbb-menu-min-width: 11.25rem;
     --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
+    --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
+    --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
+    --sbb-teaser-product-content-align-content: center;
+    --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
+    --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
+    --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -2163,6 +2300,32 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 
+:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
+:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
+:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
+  --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
+  --sbb-form-field-background-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+    color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+  );
+}
+:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
+:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
+:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
+  --sbb-form-field-background-color: color-mix(
+    in srgb,
+    var(--sbb-color-peach) 10%,
+    var(--sbb-background-color-1-negative)
+  );
+}
+
+@media (forced-colors: active) {
+  :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]) label::after, :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight label::after {
+    content: " *";
+    color: Highlight;
+  }
+}
+
 sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
   margin-block-start: var(--sbb-header-height);
 }
@@ -2216,6 +2379,37 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
+sbb-sidebar:has(sbb-sidebar-title) {
+  --_sbb-sidebar-padding-block-start: 0;
+}
+
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
+:is(:state(state-opened),[state--state-opened]))) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
+[mode=over],
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
+:not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
+  --_sbb-sidebar-content-margin-inline-end: 0;
+}
+sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
+[mode=over],
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
+:not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
+  --_sbb-sidebar-content-margin-inline-start: 0;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -2223,6 +2417,15 @@ sbb-tab-nav-bar .sbb-tab-amount {
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
+:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: 0;
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 16 / 9;
+}
+:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
+  place-self: stretch;
+}
+
 .sbb-dark {
   color-scheme: dark;
 }
@@ -2339,15 +2542,6 @@ img {
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: 0;
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 16 / 9;
-}
-:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
-  place-self: stretch;
-}
-
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
@@ -2399,40 +2593,6 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
 
-sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
-  --sbb-sidebar-container-animation-duration: 0s;
-}
-
-sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-:is(:state(mode-over-forced),[state--mode-over-forced]))),
-:not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
-  --sbb-sidebar-content__margin-inline-start: 0;
-}
-
-sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-:is(:state(mode-over-forced),[state--mode-over-forced]))),
-:not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
-  --sbb-sidebar-content__margin-inline-end: 0;
-}
-
-sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
-:is(:state(state-opened),[state--state-opened]))) {
-  --sbb-sidebar-container__backdrop-visibility: visible;
-  --sbb-sidebar-container-backdrop-opacity: 0.4;
-}
-
-sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-  position: absolute;
-}
-
-sbb-sidebar:has(sbb-sidebar-title) {
-  --sbb-sidebar__padding-block-start: 0;
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);
@@ -3159,42 +3319,25 @@ sup {
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 }
-.sbb-table thead > tr:last-of-type > th,
-.sbb-table-m thead > tr:last-of-type > th,
-.sbb-table-s thead > tr:last-of-type > th,
-.sbb-table-xs thead > tr:last-of-type > th {
-  border-block-end: var(--sbb-table-border);
-}
-.sbb-table thead > tr:first-of-type > th,
-.sbb-table-m thead > tr:first-of-type > th,
-.sbb-table-s thead > tr:first-of-type > th,
-.sbb-table-xs thead > tr:first-of-type > th {
-  border-block-start: var(--sbb-table-border);
-}
-.sbb-table thead > tr > th,
-.sbb-table-m thead > tr > th,
-.sbb-table-s thead > tr > th,
-.sbb-table-xs thead > tr > th {
+.sbb-table th,
+.sbb-table-m th,
+.sbb-table-s th,
+.sbb-table-xs th {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
-}
-.sbb-table thead > tr > th:first-of-type,
-.sbb-table-m thead > tr > th:first-of-type,
-.sbb-table-s thead > tr > th:first-of-type,
-.sbb-table-xs thead > tr > th:first-of-type {
-  border-inline-start: var(--sbb-table-border);
 }
-.sbb-table tbody > tr > td,
-.sbb-table-m tbody > tr > td,
-.sbb-table-s tbody > tr > td,
-.sbb-table-xs tbody > tr > td {
+.sbb-table td,
+.sbb-table-m td,
+.sbb-table-s td,
+.sbb-table-xs td {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
@@ -3203,12 +3346,33 @@ sup {
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.sbb-table tbody > tr > td:first-of-type,
-.sbb-table-m tbody > tr > td:first-of-type,
-.sbb-table-s tbody > tr > td:first-of-type,
-.sbb-table-xs tbody > tr > td:first-of-type {
+.sbb-table :is(th, td).sbb-table-group-with-next,
+.sbb-table-m :is(th, td).sbb-table-group-with-next,
+.sbb-table-s :is(th, td).sbb-table-group-with-next,
+.sbb-table-xs :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+.sbb-table :is(th, td):first-child,
+.sbb-table-m :is(th, td):first-child,
+.sbb-table-s :is(th, td):first-child,
+.sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,
@@ -3221,12 +3385,6 @@ sup {
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
-.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
-  border-block-start: var(--sbb-table-border);
-}
 
 .sbb-table-m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3291,10 +3449,10 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
 .sbb-table-row--striped {
@@ -3372,6 +3530,34 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+.sbb-table-align-start {
+  text-align: start;
+}
+
+.sbb-table-align-center {
+  text-align: center;
+}
+
+.sbb-table-align-end {
+  text-align: end;
+}
+
+.sbb-table-align-justify {
+  text-align: justify;
+}
+
+.sbb-table-align-left {
+  text-align: left;
+}
+
+.sbb-table-align-right {
+  text-align: right;
+}
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
+}
+
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/{optgroup-base-element-C8LeifgF.js → optgroup-base-element-B2WJv9gb.js}

@@ -1,5 +1,5 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r, nothing as i } from "lit";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
 import { property as a, state as o } from "lit/decorators.js";
 import { SbbElement as s } from "./core/base-elements.js";
 import { forceType as c } from "./core/decorators.js";
@@ -7,13 +7,13 @@ import { isSafari as l } from "./core/dom.js";
 import { SbbDisabledMixin as u } from "./core/mixins.js";
 import { boxSizingStyles as d } from "./core/styles.js";
 import "./divider.js";
-//#region src/elements/option/optgroup/optgroup-base-element.scss?lit&inline
-var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display:none}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color:var(--sbb-color-5)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end);display:flex}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display,block);padding-block:var(--sbb-options-panel-divider-margin-block)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}`, p = l, m = (() => {
-	let n = u(s), l, m = [], h = [], g, _ = [], v = [];
-	return class extends n {
+//#region src/elements/option/optgroup/optgroup-base-element.scss?inline
+var f = ":host{display:block}:host(:first-child){--sbb-optgroup-divider-display: none}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color: var(--sbb-color-5)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end)}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display, block);padding-block:var(--sbb-options-panel-divider-margin-block)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}", p = l, m = (() => {
+	let l = u(s), m, h = [], g = [], _, v = [], y = [];
+	return class extends l {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			l = [c(), a()], g = [o()], e(this, null, l, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			m = [c(), a()], _ = [o()], e(this, null, m, {
 				kind: "accessor",
 				name: "label",
 				static: !1,
@@ -26,7 +26,7 @@ var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display
 					}
 				},
 				metadata: t
-			}, m, h), e(this, null, g, {
+			}, h, g), e(this, null, _, {
 				kind: "accessor",
 				name: "_inertAriaGroups",
 				static: !1,
@@ -39,7 +39,7 @@ var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display
 					}
 				},
 				metadata: t
-			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -50,16 +50,16 @@ var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display
 			this.role = p ? null : "group";
 		}
 		static {
-			this.styles = [d, f];
+			this.styles = [d, i(f)];
 		}
-		#e = t(this, m, "");
+		#e = t(this, h, "");
 		get label() {
 			return this.#e;
 		}
 		set label(e) {
 			this.#e = e;
 		}
-		#t = (t(this, h), t(this, _, !1));
+		#t = (t(this, g), t(this, v, !1));
 		get _inertAriaGroups() {
 			return this.#t;
 		}
@@ -67,7 +67,7 @@ var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display
 			this.#t = e;
 		}
 		constructor() {
-			super(), t(this, v), p && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = p) : this._inertAriaGroups = p);
+			super(), t(this, y), p && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = p) : this._inertAriaGroups = p);
 		}
 		connectedCallback() {
 			super.connectedCallback(), this._updateAriaLabel();
@@ -88,16 +88,16 @@ var f = n`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display
 			t && this.options.forEach((e) => e.highlight(t));
 		}
 		render() {
-			return r`
+			return n`
       <div class="sbb-optgroup__divider">
         <sbb-divider ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}></sbb-divider>
       </div>
-      ${this.label ? r`
+      ${this.label ? n`
             <div class="sbb-optgroup__label" aria-hidden="true">
               <div class="sbb-optgroup__icon-space"></div>
               <span>${this.label}</span>
             </div>
-          ` : i}
+          ` : r}
       <slot @slotchange=${this._handleSlotchange}></slot>
     `;
 		}

package/option/optgroup/optgroup-base-element.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../optgroup-base-element-C8LeifgF.js";
+import { t as e } from "../../optgroup-base-element-B2WJv9gb.js";
 export { e as SbbOptgroupBaseElement };

package/option/optgroup/optgroup.component.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../optgroup-base-element-C8LeifgF.js";
+import { t as e } from "../../optgroup-base-element-B2WJv9gb.js";
 import { SbbPropertyWatcherController as t } from "../../core/controllers.js";
 //#region src/elements/option/optgroup/optgroup.component.ts
 var n = class extends e {

package/option/optgroup.js

@@ -1,4 +1,4 @@
-import { t as e } from "../optgroup-base-element-C8LeifgF.js";
+import { t as e } from "../optgroup-base-element-B2WJv9gb.js";
 import { SbbOptGroupElement as t } from "./optgroup/optgroup.component.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements/option/optgroup.js' has been deprecated.\nUse either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.");
 //#endregion

package/option/option/option.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../option.component-DF9ZTj12.js";
+import { t as e } from "../../option.component-M-V_tdSC.js";
 export { e as SbbOptionElement };

package/option/option-hint/option-hint.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../option-hint.component-kPdwK61Z.js";
+import { t as e } from "../../option-hint.component-CZH1i3mN.js";
 export { e as SbbOptionHintElement };

package/option/option-hint.js

@@ -1,4 +1,4 @@
-import { t as e } from "../option-hint.component-kPdwK61Z.js";
+import { t as e } from "../option-hint.component-CZH1i3mN.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/option/option-hint.js' has been deprecated.\nUse either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.");
 //#endregion
 export { e as SbbOptionHintElement };

package/option/option.js

@@ -1,5 +1,5 @@
 import { SbbOptionBaseElement as e } from "./option/option-base-element.js";
-import { t } from "../option.component-DF9ZTj12.js";
+import { t } from "../option.component-M-V_tdSC.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements/option/option.js' has been deprecated.\nUse either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.");
 //#endregion
 export { e as SbbOptionBaseElement, t as SbbOptionElement };

package/option-hint.component-CZH1i3mN.js

@@ -0,0 +1,23 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+import { SbbNegativeMixin as r } from "./core/mixins.js";
+import { boxSizingStyles as i } from "./core/styles.js";
+//#region src/elements/option/option-hint/option-hint.scss?inline
+var a = ":host{display:flex;column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);padding-block-end:var(--sbb-option-hint-padding-block-end);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}", o = class extends r(n) {
+	static {
+		this.elementName = "sbb-option-hint";
+	}
+	static {
+		this.styles = [i, t(a)];
+	}
+	render() {
+		return e`
+      <div class="sbb-optgroup__icon-space"></div>
+      <span class="sbb-option-hint">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+//#endregion
+export { o as t };