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

package/chip/chip/chip.component.js

@@ -4,7 +4,7 @@ var v = (e) => {
 var p = (e, r, b) => r.has(e) || v("Cannot " + b);
 var m = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, o) => (p(e, r, "write to private field"), o ? o.call(e, b) : r.set(e, b), b);
 import { __runInitializers as c, __esDecorate as f } from "tslib";
-import { css as y, LitElement as x, html as k } from "lit";
+import { css as x, LitElement as y, html as k } from "lit";
 import { customElement as w, property as S } from "lit/decorators.js";
 import { SbbLanguageController as z } from "../../core/controllers.js";
 import { i18nChipDelete as D } from "../../core/i18n.js";
@@ -12,10 +12,10 @@ import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, Sb
 import { boxSizingStyles as I } from "../../core/styles.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const M = y`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-active: var(--sbb-color-2);--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-active: var(--sbb-color-2-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
+const M = x`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-active: var(--sbb-color-2);--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-active: var(--sbb-color-2-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
 let H = (() => {
   var s, t;
-  let e = [w("sbb-chip")], r, b = [], o, n = E(C(q(B(x)))), d, u = [], h = [];
+  let e = [w("sbb-chip")], r, b = [], o, n = E(C(q(B(y)))), d, u = [], h = [];
   return t = class extends n {
     constructor() {
       super(...arguments);

package/chip-label/chip-label.component.js

@@ -1,33 +1,33 @@
-var y = (e) => {
+var k = (e) => {
   throw TypeError(e);
 };
-var k = (e, s, t) => s.has(e) || y("Cannot " + t);
-var d = (e, s, t) => (k(e, s, "read from private field"), t ? t.call(e) : s.get(e)), p = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (k(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
+var y = (e, s, t) => s.has(e) || k("Cannot " + t);
+var p = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), d = (e, s, t) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (y(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
 import { __esDecorate as g, __runInitializers as c } from "tslib";
 import { css as S, LitElement as E, html as I } from "lit";
 import { customElement as j, property as w } from "lit/decorators.js";
 import { boxSizingStyles as D } from "../core/styles.js";
-const C = S`:host{display:inline-block;--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-3);--sbb-chip-label-padding-block: 0em;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip-label{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+const C = S`:host{display:inline-block;--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-3);--sbb-chip-label-padding-block: 0em;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-text-font-size-xxs)}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
 let B = (() => {
   var o, b, i;
   let e = [j("sbb-chip-label")], s, t = [], a, v = E, f, u = [], x = [], m, _ = [], z = [];
   return i = class extends v {
     constructor() {
       super(...arguments);
-      p(this, o, c(this, u, "xxs"));
-      p(this, b, (c(this, x), c(this, _, "milk")));
+      d(this, o, c(this, u, "xxs"));
+      d(this, b, (c(this, x), c(this, _, "milk")));
       c(this, z);
     }
     /** Size of the chip. */
     get size() {
-      return d(this, o);
+      return p(this, o);
     }
     set size(r) {
       h(this, o, r);
     }
     /** Color of the chip. */
     get color() {
-      return d(this, b);
+      return p(this, b);
     }
     set color(r) {
       h(this, b, r);

package/core/controllers/media-matchers-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-matchers-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/media-matchers-controller.ts"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAKjE,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AACnE,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AACpE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAC9D,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AACxG,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AACxG,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AAGxG;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAehE;;;;;;;GAOG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAGhE,OAAO,CAAC,QAAQ;gBADhB,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC;IAK1D;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IAoBrB,gBAAgB,IAAI,IAAI;CAWhC;AAED;;;;;;;GAOG;AACH,qBAAa,qBAAsB,SAAQ,yBAAyB;IAyBhE,OAAO,CAAC,KAAK;IAxBf,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,YAAY,CAAsE;IAEjG,kFAAkF;IAClF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAUxB;IAET,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAGrC;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAa;gBAG7C,KAAK,EAAE,sBAAsB,GAAG,WAAW,GAAG,4BAA4B,EAClF,QAAQ,EAAE,sBAAsB;IAYlC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC;;;OAGG;WAEW,aAAa,IAAI,IAAI;IAOnB,aAAa,IAAI,IAAI;IAerB,gBAAgB,IAAI,IAAI;IAQxB,OAAO,IAAI,OAAO;CAWnC"}
+{"version":3,"file":"media-matchers-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/media-matchers-controller.ts"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAGjE,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AACnE,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AACpE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAC9D,eAAO,MAAM,oCAAoC,QAA0C,CAAC;AAC5F,eAAO,MAAM,oCAAoC,QAA0C,CAAC;AAC5F,eAAO,MAAM,oCAAoC,QAA0C,CAAC;AAG5F;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAehE;;;;;;;GAOG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAGhE,OAAO,CAAC,QAAQ;gBADhB,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC;IAK1D;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IAoBrB,gBAAgB,IAAI,IAAI;CAWhC;AAED;;;;;;;GAOG;AACH,qBAAa,qBAAsB,SAAQ,yBAAyB;IAyBhE,OAAO,CAAC,KAAK;IAxBf,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,YAAY,CAAsE;IAEjG,kFAAkF;IAClF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAUxB;IAET,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAGrC;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAa;gBAG7C,KAAK,EAAE,sBAAsB,GAAG,WAAW,GAAG,4BAA4B,EAClF,QAAQ,EAAE,sBAAsB;IAYlC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC;;;OAGG;WAEW,aAAa,IAAI,IAAI;IAOnB,aAAa,IAAI,IAAI;IAerB,gBAAgB,IAAI,IAAI;IAQxB,OAAO,IAAI,OAAO;CAWnC"}

package/core/controllers/media-matchers-controller.js

@@ -1,7 +1,7 @@
-import { S as p, a as g, b, c as y } from "../../sbb-tokens-CB1Hgctn.js";
-import { isServer as i } from "lit";
-const c = (d) => d / p, L = "(forced-colors: active)", n = "(prefers-color-scheme: dark)", k = "(any-hover: hover)", Q = "(pointer: coarse)", w = `(min-width: ${c(y)}rem)`, B = `(max-width: ${c(g)}rem)`, C = `(max-width: ${c(b)}rem)`, a = /* @__PURE__ */ new Map();
-class v {
+import { S as m, a as f, b as g } from "../../sbb-tokens-BNWpZrLn.js";
+import { isServer as n } from "lit";
+const M = "(forced-colors: active)", i = "(prefers-color-scheme: dark)", S = "(any-hover: hover)", L = "(pointer: coarse)", k = `(min-width: ${m})`, Q = `(max-width: ${f})`, w = `(max-width: ${g})`, a = /* @__PURE__ */ new Map();
+class p {
   constructor(e, t) {
     this._queries = t, e.addController(this);
   }
@@ -11,17 +11,17 @@ class v {
    * @returns Whether the query matches or null with SSR.
    */
   matches(e) {
-    return i ? null : matchMedia(e).matches;
+    return n ? null : matchMedia(e).matches;
   }
   hostConnected() {
-    if (!i)
+    if (!n)
       for (const [e, t] of Object.entries(this._queries)) {
         const r = a.get(e);
         if (r)
           r.handlers.add(t);
         else {
-          const o = matchMedia(e), h = /* @__PURE__ */ new Set([t]), u = (m) => h.forEach((f) => f(m.matches));
-          o.addEventListener("change", u), a.set(e, { mediaQueryList: o, handlers: h, eventHandler: u });
+          const o = matchMedia(e), c = /* @__PURE__ */ new Set([t]), d = (u) => c.forEach((l) => l(u.matches));
+          o.addEventListener("change", d), a.set(e, { mediaQueryList: o, handlers: c, eventHandler: d });
         }
       }
   }
@@ -32,17 +32,17 @@ class v {
     }
   }
 }
-const s = class s extends v {
+const s = class s extends p {
   constructor(e, t) {
     const r = () => {
       t(this.matches()), this._host.toggleState("dark", this.matches());
     };
     super(e, {
-      [n]: r
+      [i]: r
     }), this._host = e, this._onChangeWithStateUpdater = r;
   }
   static _readLightDarkClass() {
-    if (i)
+    if (n)
       return null;
     const e = document.documentElement.classList;
     return ["light-dark", "dark", "light"].find((t) => e.contains(`sbb-${t}`)) ?? null;
@@ -53,24 +53,24 @@ const s = class s extends v {
    */
   // eslint-disable-next-line lyne/needs-super-call-rule
   static requestUpdate() {
-    const e = a.get(n);
+    const e = a.get(i);
     e && e.handlers.forEach((t) => t(e.mediaQueryList.matches));
   }
   hostConnected() {
-    const e = (a.get(n)?.handlers.size ?? 0) === 0;
+    const e = (a.get(i)?.handlers.size ?? 0) === 0;
     super.hostConnected(), e && s._observer.observe(document.documentElement, s._observerConfig), this._onChangeWithStateUpdater();
   }
   hostDisconnected() {
-    super.hostDisconnected(), (a.get(n)?.handlers.size ?? 0) === 0 && s._observer.disconnect();
+    super.hostDisconnected(), (a.get(i)?.handlers.size ?? 0) === 0 && s._observer.disconnect();
   }
   matches() {
-    if (i)
+    if (n)
       return !1;
     const e = getComputedStyle(this._host).getPropertyValue("color-scheme"), t = e.includes("dark"), r = e.trim() === "dark";
-    return super.matches(n) && t || r;
+    return super.matches(i) && t || r;
   }
 };
-s._currentMode = s._readLightDarkClass(), s._observer = i ? null : new MutationObserver((e) => {
+s._currentMode = s._readLightDarkClass(), s._observer = n ? null : new MutationObserver((e) => {
   if (e[0].oldValue !== document.documentElement.getAttribute("class")) {
     const t = s._readLightDarkClass();
     s._currentMode !== t && (s.requestUpdate(), s._currentMode = t);
@@ -79,15 +79,15 @@ s._currentMode = s._readLightDarkClass(), s._observer = i ? null : new MutationO
   attributeFilter: ["class"],
   attributeOldValue: !0
 };
-let l = s;
+let h = s;
 export {
-  l as SbbDarkModeController,
-  v as SbbMediaMatcherController,
-  w as SbbMediaQueryBreakpointLargeAndAbove,
-  B as SbbMediaQueryBreakpointLargeAndBelow,
-  C as SbbMediaQueryBreakpointSmallAndBelow,
-  n as SbbMediaQueryDarkMode,
-  L as SbbMediaQueryForcedColors,
-  k as SbbMediaQueryHover,
-  Q as SbbMediaQueryPointerCoarse
+  h as SbbDarkModeController,
+  p as SbbMediaMatcherController,
+  k as SbbMediaQueryBreakpointLargeAndAbove,
+  Q as SbbMediaQueryBreakpointLargeAndBelow,
+  w as SbbMediaQueryBreakpointSmallAndBelow,
+  i as SbbMediaQueryDarkMode,
+  M as SbbMediaQueryForcedColors,
+  S as SbbMediaQueryHover,
+  L as SbbMediaQueryPointerCoarse
 };

package/core/dom/breakpoint.d.ts

@@ -8,6 +8,7 @@ export type Breakpoint = (typeof breakpoints)[number];
  * @param to The breakpoint corresponding to the `max-width` value of the media query (optional).
  * @param properties Whether the max breakpoint should be included
  * @returns A boolean indicating whether the window matches the breakpoint.
+ * @deprecated use the mediaMatcherController
  */
 export declare function isBreakpoint(from?: Breakpoint, to?: Breakpoint, properties?: {
     includeMaxBreakpoint: boolean;

package/core/dom/breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,8CAA+C,CAAC;AACxE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,CAAC,EAAE,UAAU,EACjB,EAAE,CAAC,EAAE,UAAU,EACf,UAAU,CAAC,EAAE;IAAE,oBAAoB,EAAE,OAAO,CAAA;CAAE,GAC7C,OAAO,GAAG,IAAI,CAsBhB"}
+{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,8CAA+C,CAAC;AACxE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,CAAC,EAAE,UAAU,EACjB,EAAE,CAAC,EAAE,UAAU,EACf,UAAU,CAAC,EAAE;IAAE,oBAAoB,EAAE,OAAO,CAAA;CAAE,GAC7C,OAAO,GAAG,IAAI,CAsBhB"}

package/core/styles/core.scss

@@ -1,5 +1,6 @@
 $theme: 'standard' !default;
 
+@use 'sass:string';
 @use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
@@ -39,37 +40,29 @@ $theme: 'standard' !default;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
 
-  // Title
-  --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);
-
-  &.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;
+  // TODO: Remove complete block when new lean theme is complete
+  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
+  // Only render the block in standard theme as fallback for CSS class usage
+  @if not string.index($theme, 'lean') {
+    &.sbb-lean {
+      --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;
+    }
   }
 
   // Infinity border radius, can be used to achieve rounded border on start and end
@@ -95,6 +88,14 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    // TODO: Remove complete block when new lean theme is complete
+    // Only render the block in standard theme as fallback for CSS class usage
+    @if not string.index($theme, 'lean') {
+      &.sbb-lean {
+        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
+      }
+    }
+
     // Header
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
@@ -129,7 +130,7 @@ $theme: 'standard' !default;
 html {
   @include typo.text;
 
-  color: var(--sbb-font-default-color);
+  color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
 
@@ -161,7 +162,7 @@ html {
     // TODO: Find a better solution
     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;
 
     &::placeholder {
       @include typo.placeholder;
@@ -205,7 +206,7 @@ html {
 
     // We add the missing block spacing to fit the line-height
     margin-block: calc(
-      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25))
+      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
     );
   }
 
@@ -219,7 +220,7 @@ html {
       // White-space break needed for Firefox
       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));
     }
   }
 
@@ -292,7 +293,7 @@ html {
 // Ensure stable breadcrumb height during hydrating
 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;
 }
 
@@ -313,7 +314,7 @@ sbb-breadcrumb-group:not(:defined) {
   color: var(--sbb-color-1);
 
   strong + * {
-    font-size: var(--sbb-font-size-text-xxs);
+    font-size: var(--sbb-text-font-size-xxs);
     color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 }
@@ -622,33 +623,31 @@ sbb-dialog-close-button {
   // The close button positioning needs the current dialog title size
   sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
   sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
-    // TODO: Adapt to lean size title
-    --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
+    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
   }
 
   // The close button positioning needs the current dialog title size
   sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
   sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
-    // TODO: Adapt to lean size title
-    --_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);
 
   &[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: 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 {

package/core/styles/mixins/chip.scss

@@ -25,19 +25,19 @@
 @mixin chip-label-variables--size-xxs {
   --sbb-chip-label-padding-block: 0em;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
 }
 
 @mixin chip-label-variables--size-xs {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
 }
 
 @mixin chip-label-variables--size-s {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
 }
 
 @mixin chip-label-rules {
@@ -49,7 +49,7 @@
   align-items: center;
   justify-content: center;
   height: calc(
-    var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) +
+    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) +
       var(--sbb-chip-label-padding-block) * 2
   );
   background-color: var(--sbb-chip-label-background-color);

package/core/styles/mixins/lists.scss

@@ -64,7 +64,7 @@
           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));
 
           // Scale 1.3 to match Figma specs.
@@ -108,7 +108,7 @@
   --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)
       )
   );
@@ -166,7 +166,7 @@
   --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)
       )
   );

package/core/styles/mixins/panel.scss

@@ -11,7 +11,7 @@
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
   --sbb-panel-triangle-height: #{functions.px-to-rem-build(33)};
   --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
-  --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
   --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
   --sbb-panel-color: var(--sbb-color-1-negative);
   --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
@@ -71,6 +71,6 @@
   font-size: var(--sbb-panel-font-size);
   font-weight: 300;
   line-height: var(--sbb-panel-line-height);
-  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   color: var(--sbb-panel-color);
 }