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

package/off-brand-theme.css

@@ -105,9 +105,86 @@ summary {
 }
 
 /**
- * Do not edit directly
- * Generated on Tue, 28 Oct 2025 06:41:21 GMT
+ * 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([data-has-panel]) {
+  --sbb-checkbox-group-width: 100%;
+  --sbb-checkbox-group-checkbox-flex: auto;
+}
+
+:host([data-has-panel][orientation=vertical]) {
+  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+}
+
+@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([data-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([data-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([data-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([data-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);
+  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);
+}
+
 *,
 ::before,
 ::after {
@@ -733,10 +810,10 @@ summary {
    */
   --sbb-spacing-responsive-xxl-ultra: 7.5rem;
   --sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --sbb-typo-letter-spacing-titles: 0;
-  --sbb-typo-letter-spacing-body-text: 0.03em;
-  --sbb-typo-line-height-titles: 1.3;
-  --sbb-typo-line-height-body-text: 1.75;
+  --sbb-typo-letter-spacing-heading: 0em;
+  --sbb-typo-letter-spacing-text: 0.03em;
+  --sbb-typo-line-height-heading: 1.4;
+  --sbb-typo-line-height-text: 1.75;
   /**
    * Original Value: 12px
    */
@@ -1011,7 +1088,7 @@ summary {
   --sbb-box-shadow-level-11-hard-negative:
     var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2-negative),
     var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1-negative);
-  --sbb-font-default-color: var(--sbb-color-2);
+  --sbb-font-color-default: var(--sbb-color-2);
   /* Focus outline */
   --sbb-focus-outline-color-default: var(--sbb-color-black);
   --sbb-focus-outline-color-dark: var(--sbb-color-white);
@@ -1022,19 +1099,25 @@ summary {
   );
   --sbb-focus-outline-width: var(--sbb-border-width-1x);
   /* Title */
-  --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
-  --sbb-font-size-title-2: var(--sbb-typo-scale-2x);
-  --sbb-font-size-title-3: var(--sbb-typo-scale-1-5x);
-  --sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-title-7: var(--sbb-typo-scale-0-75x);
-  --sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-text-m: var(--sbb-typo-scale-default);
-  --sbb-font-size-text-s: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-text-xs: var(--sbb-typo-scale-0-75x);
-  --sbb-font-size-text-xxs: var(--sbb-typo-scale-0-75x);
+  --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
+  --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
+  --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
+  --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
+  --sbb-heading-font-size-5: var(--sbb-typo-scale-1-125x);
+  --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
+  --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s);
+  --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x);
+  --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x);
+  /* Text */
+  --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
+  --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
+  --sbb-text-font-size-m: var(--sbb-typo-scale-default);
+  --sbb-text-font-size-s: var(--sbb-typo-scale-0-875x);
+  --sbb-text-font-size-xs: var(--sbb-typo-scale-0-75x);
+  --sbb-text-font-size-xxs: var(--sbb-typo-scale-0-75x);
   /* Spacing */
   --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
   --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
@@ -1055,45 +1138,112 @@ summary {
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-selection-panel-background-default: var(--sbb-background-color-1);
+  --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
+  --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
+  --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
+  --sbb-selection-panel-border-color-borderless: transparent;
+  --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
+  --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
+  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
+  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
+  --sbb-selection-panel-suffix-color: var(--sbb-color-3);
+  --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
+  --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --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-font-size: var(--sbb-text-font-size-m);
+  --sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-label-color: var(--sbb-color-color-3);
+  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
+  --sbb-selection-action-panel-action-margin-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
+  --sbb-selection-expansion-panel-content-visibility: visible;
+  --sbb-selection-expansion-panel-content-padding-block-start: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-expansion-panel-content-padding-block-end: var(
+    --sbb-selection-panel-input-padding-block-m
+  );
+  --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-visual-checkbox-dimension-xs: 1.25rem;
+  --sbb-visual-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-visual-checkbox-dimension: var(--sbb-visual-checkbox-dimension-m);
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
+  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
+  --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
+  --sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
+  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
+  --sbb-visual-checkbox-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-visual-checkbox-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-visual-checkbox-background-color-negative-disabled: var(--sbb-background-color-3-negative);
+  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-color-disabled: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-style: solid;
+  --sbb-visual-checkbox-border-style-disabled: dashed;
+  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
+  --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
+}
+@media (forced-colors: active) {
+  :root {
+    /* Focus outline */
+    --sbb-focus-outline-color-default: Highlight;
+    --sbb-focus-outline-color-dark: Highlight;
+    --sbb-focus-outline-width: var(--sbb-border-width-2x);
+    --sbb-visual-checkbox-selection-color: Canvas;
+    --sbb-visual-checkbox-selection-color-negative: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
+    --sbb-visual-checkbox-border-color: ButtonBorder;
+    --sbb-visual-checkbox-border-color-disabled: GrayText;
+    --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
+    --sbb-visual-checkbox-border-style-disabled: solid;
+  }
+}
+:root {
   --sbb-train-formation-wagon-width: 5rem;
   --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-border-radius: 0.75rem;
   --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;
   --sbb-cursor-pointer: pointer;
-  --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
-  --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
-  --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
-  --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
-  --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
-  --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
-  --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
-  --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
-  --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
-  --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
 }
 :root.sbb-lean {
-  --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
-  --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
-  --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
-  --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
-  --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
-  --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
-  --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
-  --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
-  --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
-  --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
-  --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
-  --sbb-title-margin-block-end-level-6: 0;
+  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
+  --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
+  --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
+  --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
+  --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
+  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
+  --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-2x);
+  --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
+    var(--sbb-spacing-fixed-1x);
+  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
 }
 :root {
   --sbb-border-radius-infinity: 100000em;
@@ -1107,7 +1257,7 @@ summary {
 @media (min-width: calc(37.5rem)) {
   :root {
     /* Title */
-    --sbb-font-size-title-1: var(--sbb-typo-scale-3x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-3x);
     /* Spacing */
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
     --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
@@ -1121,18 +1271,18 @@ summary {
 @media (min-width: calc(64rem)) {
   :root {
     /* Title */
-    --sbb-font-size-title-1: var(--sbb-typo-scale-3-5x);
-    --sbb-font-size-title-2: var(--sbb-typo-scale-2-5x);
-    --sbb-font-size-title-3: var(--sbb-typo-scale-2x);
-    --sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
-    --sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
-    --sbb-font-size-title-6: var(--sbb-typo-scale-default);
-    --sbb-font-size-title-7: var(--sbb-typo-scale-0-875x);
-    --sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
-    --sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
-    --sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
-    --sbb-font-size-text-s: var(--sbb-typo-scale-default);
-    --sbb-font-size-text-xs: var(--sbb-typo-scale-0-875x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-3-5x);
+    --sbb-heading-font-size-2: var(--sbb-typo-scale-2-5x);
+    --sbb-heading-font-size-3: var(--sbb-typo-scale-2x);
+    --sbb-heading-font-size-4: var(--sbb-typo-scale-1-5x);
+    --sbb-heading-font-size-5: var(--sbb-typo-scale-1-25x);
+    --sbb-heading-font-size-6: var(--sbb-typo-scale-default);
+    /* Text */
+    --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
+    --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
+    --sbb-text-font-size-m: var(--sbb-typo-scale-1-125x);
+    --sbb-text-font-size-s: var(--sbb-typo-scale-default);
+    --sbb-text-font-size-xs: var(--sbb-typo-scale-0-875x);
     /* Spacing */
     --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-large);
     --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-large);
@@ -1153,6 +1303,11 @@ summary {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+  }
+  :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;
   }
@@ -1163,7 +1318,7 @@ summary {
 @media (min-width: calc(90rem)) {
   :root {
     /* Title */
-    --sbb-font-size-title-1: var(--sbb-typo-scale-4x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
     /* Spacing */
     --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
@@ -1209,10 +1364,10 @@ summary {
 html {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
-  color: var(--sbb-font-default-color);
+  color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
 
@@ -1223,11 +1378,11 @@ html {
 }
 
 :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-font-size-text-m);
+  --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-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  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;
@@ -1247,7 +1402,7 @@ html {
   background-color: transparent;
   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-body-text) !important;
+  line-height: var(--sbb-typo-line-height-text) !important;
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
   color: var(--sbb-color-5);
@@ -1279,7 +1434,7 @@ html {
 :is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
   height: calc(var(--sbb-form-field-input-text-size) * 1.25);
   line-height: 1 !important;
-  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
+  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25));
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
@@ -1330,7 +1485,7 @@ html {
   resize: none;
   white-space: break-spaces;
   overflow-y: auto;
-  min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  min-height: calc(var(--sbb-typo-line-height-text) * 1em);
 }
 :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
@@ -1432,7 +1587,7 @@ sbb-toast) {
 
 sbb-breadcrumb-group:not(:defined) {
   display: block;
-  height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));
+  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
   overflow: hidden;
 }
 
@@ -1441,11 +1596,11 @@ sbb-breadcrumb-group:not(:defined) {
 }
 
 .sbb-header-info {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   display: flex;
   padding-inline: var(--sbb-spacing-fixed-4x);
@@ -1454,7 +1609,7 @@ sbb-breadcrumb-group:not(:defined) {
   color: var(--sbb-color-1);
 }
 .sbb-header-info strong + * {
-  font-size: var(--sbb-font-size-text-xxs);
+  font-size: var(--sbb-text-font-size-xxs);
   color: var(--sbb-color-granite);
   color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
 }
@@ -1666,27 +1821,27 @@ sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:i
   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-font-size-title-3);
+  --_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-font-size-title-5);
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
 }
 
 sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles);
+  --_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-font-size-title-6);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);
+  --_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: 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-font-size-title-5);
-  --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
+  --_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 {
@@ -1737,33 +1892,33 @@ sup {
 .sbb-text-xl {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
 .sbb-text-xxs {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
 }
 
 .sbb-text-xs {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
 }
 
 .sbb-text-s {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
 }
 
 .sbb-text-m {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
 }
 
 .sbb-text-l {
-  --sbb-text-font-size: var(--sbb-font-size-text-l);
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
 }
 
 .sbb-text-xl {
-  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
 }
 
 .sbb-text--bold {
@@ -1771,11 +1926,11 @@ sup {
 }
 
 .sbb-legend {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   padding: 0;
   color: var(--sbb-color-granite);
@@ -1810,11 +1965,11 @@ sup {
   position: relative;
 }
 [sbb-badge]::after {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   display: flex;
@@ -1871,11 +2026,11 @@ sup {
   padding-block-start: var(--sbb-spacing-fixed-4x);
   color: var(--sbb-color-granite);
   color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 .sbb-figure :is(.sbb-figure-overlap-start-start,
@@ -2035,16 +2190,16 @@ sup {
   width: 1em;
   align-items: center;
   justify-content: center;
-  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
+  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
   inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
   transform: scale(1.3);
 }
 .sbb-list:where(dl) {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   margin: 0;
   padding: 0;
@@ -2068,7 +2223,7 @@ sup {
   --sbb-step-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );
@@ -2098,11 +2253,11 @@ sup {
   min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 }
 .sbb-step-list > li::before {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   content: counter(steps);
@@ -2146,7 +2301,7 @@ sup {
   --sbb-icon-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );
@@ -2181,6 +2336,11 @@ sup {
   mask-position: center;
   mask-size: 100%;
 }
+@media (forced-colors: active) {
+  .sbb-icon-list > li::before {
+    background-color: CanvasText;
+  }
+}
 
 .sbb-scrollbar,
 .sbb-scrollbar-negative,
@@ -2425,11 +2585,11 @@ sup {
 .sbb-table-m thead > tr > th,
 .sbb-table-s thead > tr > th,
 .sbb-table-xs thead > tr > th {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
@@ -2448,11 +2608,11 @@ sup {
 .sbb-table-m tbody > tr > td,
 .sbb-table-s tbody > tr > td,
 .sbb-table-xs tbody > tr > td {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   background-color: var(--sbb-table-background-color);
   border-block-end: var(--sbb-table-border);
@@ -2470,11 +2630,11 @@ sup {
 .sbb-table-m caption,
 .sbb-table-s caption,
 .sbb-table-xs caption {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
   --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -2497,11 +2657,11 @@ sup {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 .sbb-table-s tbody > tr > td {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
@@ -2512,11 +2672,11 @@ sup {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
 }
 .sbb-table-xs tbody > tr > td {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
@@ -2552,11 +2712,11 @@ sbb-table-wrapper[negative] .sbb-table,
 }
 
 .sbb-table-header-cell {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
@@ -2571,11 +2731,11 @@ sbb-table-wrapper[negative] .sbb-table,
 }
 
 .sbb-table-data-cell {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   background-color: var(--sbb-table-background-color);
   border-block-end: var(--sbb-table-border);
@@ -2585,11 +2745,11 @@ sbb-table-wrapper[negative] .sbb-table,
 }
 
 .sbb-table-caption {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
   --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -2647,11 +2807,11 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }