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

package/core.css

@@ -1,7 +1,84 @@
 /**
- * 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 {
@@ -627,10 +704,10 @@
    */
   --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
    */
@@ -905,7 +982,7 @@
   --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);
@@ -916,19 +993,25 @@
   );
   --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);
@@ -949,45 +1032,112 @@
   --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;
@@ -1001,7 +1151,7 @@
 @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);
@@ -1015,18 +1165,18 @@
 @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);
@@ -1047,6 +1197,11 @@
     --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;
   }
@@ -1057,7 +1212,7 @@
 @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);
@@ -1103,10 +1258,10 @@
 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);
 }
 
@@ -1117,11 +1272,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;
@@ -1141,7 +1296,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);
@@ -1173,7 +1328,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;
@@ -1224,7 +1379,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;
@@ -1326,7 +1481,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;
 }
 
@@ -1335,11 +1490,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);
@@ -1348,7 +1503,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));
 }
@@ -1560,27 +1715,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 {