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

package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { SbbTooltipDefaultPositions } from '../../tooltip.js';
-declare const SbbIconSidebarButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
+declare const SbbIconSidebarButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
 /**
  * Button to be placed inside `sbb-icon-sidebar`.
  *

package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
 import { SbbTooltipDefaultPositions } from '../../tooltip.js';
-declare const SbbIconSidebarLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbLinkBaseElement;
+declare const SbbIconSidebarLinkElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbLinkBaseElement;
 /**
  * Link to be placed inside `sbb-icon-sidebar`.
  *

package/sidebar/sidebar-title/sidebar-title.component.js

@@ -4,13 +4,13 @@ var _ = (e) => {
 var d = (e, t, l) => t.has(e) || _("Cannot " + l);
 var h = (e, t, l) => (d(e, t, "read from private field"), l ? l.call(e) : t.get(e)), v = (e, t, l) => t.has(e) ? _("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), p = (e, t, l, s) => (d(e, t, "write to private field"), s ? s.call(e, l) : t.set(e, l), l);
 import { __esDecorate as y, __runInitializers as o } from "tslib";
-import { customElement as g, property as k } from "lit/decorators.js";
+import { customElement as S, property as k } from "lit/decorators.js";
 import { SbbTitleBase as f } from "../../title.js";
 import { css as z } from "lit";
-const x = z`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - 1em * var(--sbb-typo-line-height-titles)));min-height:var(--sbb-sidebar__close-button-size)}`;
+const x = z`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - 1em * var(--sbb-typo-line-height-heading)));min-height:var(--sbb-sidebar__close-button-size)}`;
 let C = (() => {
   var r, a;
-  let e = [g("sbb-sidebar-title")], t, l = [], s, n = f, b, m = [], u = [];
+  let e = [S("sbb-sidebar-title")], t, l = [], s, n = f, b, m = [], u = [];
   return a = class extends n {
     constructor() {
       super();
@@ -29,8 +29,8 @@ let C = (() => {
     }
   }, r = new WeakMap(), s = a, (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    b = [k({ reflect: !0 })], y(a, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (c) => "level" in c, get: (c) => c.level, set: (c, S) => {
-      c.level = S;
+    b = [k({ reflect: !0 })], y(a, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (c) => "level" in c, get: (c) => c.level, set: (c, g) => {
+      c.level = g;
     } }, metadata: i }, m, u), y(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: i }, null, l), s = t.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
   })(), a.styles = [f.styles, x], o(s, l), s;
 })();

package/standard-theme.css

@@ -105,8 +105,7 @@ summary {
 }
 
 /**
- * Do not edit directly
- * Generated on Tue, 28 Oct 2025 06:41:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 *,
 ::before,
@@ -733,10 +732,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 +1010,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 +1021,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);
@@ -1064,36 +1069,25 @@ summary {
   --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 +1101,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 +1115,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 +1147,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 +1162,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 +1208,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 +1222,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 +1246,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 +1278,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 +1329,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 +1431,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 +1440,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 +1453,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 +1665,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 +1736,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 +1770,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 +1809,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 +1870,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 +2034,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 +2067,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 +2097,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 +2145,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)
       )
   );
@@ -2425,11 +2424,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 +2447,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 +2469,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 +2496,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 +2511,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 +2551,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 +2570,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 +2584,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 +2646,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);
 }
 

package/status/status.component.js

@@ -1,15 +1,15 @@
-var y = (t) => {
+var h = (t) => {
   throw TypeError(t);
 };
-var h = (t, s, e) => s.has(t) || y("Cannot " + e);
-var f = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, r) => (h(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
+var y = (t, s, e) => s.has(t) || h("Cannot " + e);
+var f = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, r) => (y(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
 import { __esDecorate as g, __runInitializers as b } from "tslib";
 import { css as v, LitElement as x, html as S } from "lit";
 import { customElement as z, property as k } from "lit/decorators.js";
 import { SbbElementInternalsMixin as I } from "../core/mixins.js";
 import { boxSizingStyles as E } from "../core/styles.js";
 import { SbbIconNameMixin as w } from "../icon.js";
-const N = v`:host{--sbb-status-color: var(--sbb-color-4);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-font-size-text-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
+const N = v`:host{--sbb-status-color: var(--sbb-color-4);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.sbb-status{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;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;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-text-font-size-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
 let P = (() => {
   var i, l;
   let t = [z("sbb-status")], s, e = [], r, p = w(I(x)), u, m = [], d = [];