@sbb-esta/lyne-elements 1.9.0 → 1.11.0

package/teaser.js

@@ -5,13 +5,13 @@ import { slotState as h } from "./core/decorators.js";
 import { css as p } from "lit";
 import "./chip.js";
 import "./title.js";
-const f = p`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: 1.075;--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){will-change:transform;display:block;object-fit:cover;width:18.75rem;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);aspect-ratio:4/3}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--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:inline-block;color:var(--sbb-teaser-description-color)}`;
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (l, a, b, r) => {
+const f = p`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){will-change:transform;display:block;object-fit:cover;width:18.75rem;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);aspect-ratio:4/3}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--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:inline-block;color:var(--sbb-teaser-description-color)}`;
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (l, a, b, r) => {
   for (var e = r > 1 ? void 0 : r ? u(a, b) : a, i = l.length - 1, n; i >= 0; i--)
     (n = l[i]) && (e = (r ? n(a, b, e) : n(e)) || e);
   return r && e && m(a, b, e), e;
 };
-let t = class extends c {
+let s = class extends c {
   constructor() {
     super(...arguments), this.alignment = "after-centered", this.titleLevel = "5";
   }
@@ -36,23 +36,23 @@ let t = class extends c {
     `;
   }
 };
-t.styles = f;
-s([
+s.styles = f;
+t([
   o({ reflect: !0 })
-], t.prototype, "alignment", 2);
-s([
+], s.prototype, "alignment", 2);
+t([
   o({ attribute: "title-level" })
-], t.prototype, "titleLevel", 2);
-s([
+], s.prototype, "titleLevel", 2);
+t([
   o({ attribute: "title-content" })
-], t.prototype, "titleContent", 2);
-s([
+], s.prototype, "titleContent", 2);
+t([
   o({ attribute: "chip-content", reflect: !0 })
-], t.prototype, "chipContent", 2);
-t = s([
+], s.prototype, "chipContent", 2);
+s = t([
   d("sbb-teaser"),
   h()
-], t);
+], s);
 export {
-  t as SbbTeaserElement
+  s as SbbTeaserElement
 };

package/title.js

@@ -1,15 +1,15 @@
-import { property as v, customElement as m } from "lit/decorators.js";
-import { css as g, LitElement as c } from "lit";
-import { html as f, unsafeStatic as h } from "lit/static-html.js";
-import { hostAttributes as p } from "./core/decorators.js";
+import { property as v, customElement as c } from "lit/decorators.js";
+import { css as g, LitElement as m } from "lit";
+import { html as p, unsafeStatic as h } from "lit/static-html.js";
+import { hostAttributes as f } from "./core/decorators.js";
 import { SbbNegativeMixin as d } from "./core/mixins.js";
-const y = g`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
-var u = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, i, b, l) => {
-  for (var t = l > 1 ? void 0 : l ? k(i, b) : i, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
-  return l && t && u(i, b, t), t;
+const u = g`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, l, b, i) => {
+  for (var t = i > 1 ? void 0 : i ? k(l, b) : l, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (t = (i ? a(l, b, t) : a(t)) || t);
+  return i && t && y(l, b, t), t;
 };
-let s = class extends d(c) {
+let s = class extends d(m) {
   constructor() {
     super(...arguments), this.level = "1";
   }
@@ -18,14 +18,14 @@ let s = class extends d(c) {
   }
   render() {
     const e = `h${this.level}`;
-    return f`
+    return p`
       <${h(e)} class="sbb-title" role="presentation">
         <slot></slot>
       </${h(e)}>
     `;
   }
 };
-s.styles = y;
+s.styles = u;
 n([
   v({ reflect: !0 })
 ], s.prototype, "level", 2);
@@ -36,23 +36,23 @@ n([
   v({ attribute: "visually-hidden", reflect: !0, type: Boolean })
 ], s.prototype, "visuallyHidden", 2);
 s = n([
-  p({
+  f({
     role: "heading"
   })
 ], s);
 const w = g`:host{--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end)}:host(:where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);--sbb-title-margin-block-end: var(--sbb-spacing-responsive-s)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"]):where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-l)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"]):where(:not([visually-hidden]))),:host(:where([level="3"]:not([visual-level]),[visual-level="3"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x)}`;
-var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, _ = (e, i, b, l) => {
-  for (var t = l > 1 ? void 0 : l ? z(i, b) : i, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
-  return l && t && x(i, b, t), t;
+var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, _ = (e, l, b, i) => {
+  for (var t = i > 1 ? void 0 : i ? z(l, b) : l, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (t = (i ? a(l, b, t) : a(t)) || t);
+  return i && t && x(l, b, t), t;
 };
-let r = class extends s {
+let o = class extends s {
 };
-r.styles = [s.styles, w];
-r = _([
-  m("sbb-title")
-], r);
+o.styles = [s.styles, w];
+o = _([
+  c("sbb-title")
+], o);
 export {
   s as SbbTitleBase,
-  r as SbbTitleElement
+  o as SbbTitleElement
 };

package/toast.js

@@ -7,16 +7,16 @@ import { isFirefox as _ } from "./core/dom.js";
 import { composedPathHasAttribute as x } from "./core/eventing.js";
 import { i18nCloseAlert as y } from "./core/i18n.js";
 import { SbbHydrationMixin as T } from "./core/mixins.js";
-import { SbbIconNameMixin as k } from "./icon.js";
+import { SbbIconNameMixin as N } from "./icon.js";
 import "./button/transparent-button.js";
-const N = m`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: flex;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:block}:host(:not([data-state])),:host([data-state=closed]){--sbb-toast-container-display: none}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`;
+const k = m`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: flex;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:block}:host(:not([data-state])),:host([data-state=closed]){--sbb-toast-container-display: none}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`;
 var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, s, i, a) => {
   for (var t = a > 1 ? void 0 : a ? S(s, i) : s, r = o.length - 1, l; r >= 0; r--)
     (l = o[r]) && (t = (a ? l(s, i, t) : l(t)) || t);
   return a && t && C(s, i, t), t;
 };
 const c = /* @__PURE__ */ new Set();
-let e = class extends k(T(f)) {
+let e = class extends N(T(f)) {
   constructor() {
     super(...arguments), this.timeout = 6e3, this.position = "bottom-center", this.dismissible = !1, this.politeness = "polite", this._abort = new v(this), this._language = new g(this);
   }
@@ -128,7 +128,7 @@ let e = class extends k(T(f)) {
     `;
   }
 };
-e.styles = N;
+e.styles = k;
 n([
   b({ type: Number })
 ], e.prototype, "timeout", 2);

package/toggle/toggle/toggle.d.ts

@@ -35,8 +35,6 @@ export declare class SbbToggleElement extends LitElement {
     get options(): SbbToggleOptionElement[];
     private _loaded;
     private _toggleResizeObserver;
-    private _valueChanged;
-    private _updateDisabled;
     /**
      * @deprecated only used for React. Will probably be removed once React 19 is available.
      * Emits whenever the toggle value changes.
@@ -49,8 +47,9 @@ export declare class SbbToggleElement extends LitElement {
     updatePillPosition(resizing: boolean): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    disconnectedCallback(): void;
     private _updateToggle;
+    private _valueChanged;
+    private _updateDisabled;
     private _handleInput;
     private _handleKeyDown;
     protected render(): TemplateResult;

package/toggle/toggle/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAI1B;IAEH;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7F,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/toggle/toggle.js

@@ -1,25 +1,29 @@
-import { css as u, LitElement as v, isServer as c, html as m } from "lit";
-import { property as b, customElement as f } from "lit/decorators.js";
-import { interactivityChecker as y, isArrowKeyPressed as w, getNextElementIndex as _ } from "../core/a11y.js";
-import { SbbConnectedAbortController as x } from "../core/controllers.js";
-import { hostAttributes as k } from "../core/decorators.js";
+import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
+import { css as v, LitElement as m, isServer as c, html as f } from "lit";
+import { property as b, customElement as y } from "lit/decorators.js";
+import { interactivityChecker as w, isArrowKeyPressed as _, getNextElementIndex as x } from "../core/a11y.js";
+import { SbbConnectedAbortController as k } from "../core/controllers.js";
+import { hostAttributes as C } from "../core/decorators.js";
 import { EventEmitter as p } from "../core/eventing.js";
-import { AgnosticResizeObserver as C } from "../core/observers.js";
-const z = u`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
-var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);
-  return i && o && P(t, s, o), o;
+const z = v`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
+var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? E(t, o) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (s = (i ? l(t, o, s) : l(s)) || s);
+  return i && s && P(t, o, s), s;
 };
-let r = class extends v {
+let r = class extends m {
   constructor() {
-    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(() => this.updatePillPosition(!0)), this._didChange = new p(this, r.events.didChange, {
+    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new u(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this.updatePillPosition(!0)
+    }), this._didChange = new p(this, r.events.didChange, {
       bubbles: !0,
       composed: !0
     }), this._change = new p(this, r.events.change, {
       bubbles: !0,
       composed: !0
-    }), this._abort = new x(this);
+    }), this._abort = new k(this);
   }
   set disabled(e) {
     this._disabled = e, this._updateDisabled();
@@ -32,33 +36,23 @@ let r = class extends v {
   }
   get value() {
     var e, t;
-    return c ? this._value ?? "" : ((e = this.options.find((s) => s.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
+    return c ? this._value ?? "" : ((e = this.options.find((o) => o.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
   }
   /** The child instances of sbb-toggle-option as an array. */
   get options() {
     var e;
     return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-toggle-option")) ?? []);
   }
-  _valueChanged(e) {
-    const t = this.options, s = t.find(
-      (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
-    ) ?? t.find((i) => i.checked) ?? t[0];
-    s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
-  }
-  _updateDisabled() {
-    for (const e of this.options)
-      e.disabled = this.disabled;
-  }
   /** @internal */
   updatePillPosition(e) {
     var g, h;
     if (!this._loaded)
       return;
-    const t = this.options, s = this.shadowRoot.querySelector(".sbb-toggle");
-    if (t.every((d) => !d.checked) || t.every((d) => !d.clientWidth) || !s)
+    const t = this.options, o = this.shadowRoot.querySelector(".sbb-toggle");
+    if (t.every((d) => !d.checked) || t.every((d) => !d.clientWidth) || !o)
       return;
     this.toggleAttribute("data-disable-animation-on-resizing", e);
-    const i = t[0], o = i.checked, n = i.checked ? "0px" : `${i.clientWidth}px`, l = o ? `${s.clientWidth - i.clientWidth}px` : "0px";
+    const i = t[0], s = i.checked, n = i.checked ? "0px" : `${i.clientWidth}px`, l = s ? `${o.clientWidth - i.clientWidth}px` : "0px";
     (g = this.style) == null || g.setProperty("--sbb-toggle-option-left", n), (h = this.style) == null || h.setProperty("--sbb-toggle-option-right", l);
   }
   connectedCallback() {
@@ -69,31 +63,38 @@ let r = class extends v {
   async firstUpdated(e) {
     super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.updatePillPosition(!1);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._toggleResizeObserver.disconnect();
-  }
   _updateToggle() {
     this._valueChanged(this.value), this._updateDisabled();
   }
+  _valueChanged(e) {
+    const t = this.options, o = t.find(
+      (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
+    ) ?? t.find((i) => i.checked) ?? t[0];
+    o && (o.checked || (o.checked = !0), this.updatePillPosition(!1));
+  }
+  _updateDisabled() {
+    for (const e of this.options)
+      e.disabled = this.disabled;
+  }
   _handleInput() {
     this.updatePillPosition(!1), this._change.emit(), this._didChange.emit();
   }
   _handleKeyDown(e) {
     const t = this.options.filter(
-      (s) => !s.disabled && y.isVisible(s)
+      (o) => !o.disabled && w.isVisible(o)
     );
     if (!(!t || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && w(e)) {
-      const s = t.findIndex(
-        (o) => o.checked
-      ), i = _(e, s, t.length);
+    e.target !== this && e.target.parentElement !== this) && _(e)) {
+      const o = t.findIndex(
+        (s) => s.checked
+      ), i = x(e, o, t.length);
       t[i].checked || (t[i].checked = !0, t[i].focus(), t[i].dispatchEvent(
         new InputEvent("input", { bubbles: !0, composed: !0 })
       )), e.preventDefault();
     }
   }
   render() {
-    return m`
+    return f`
       <div class="sbb-toggle">
         <slot @slotchange=${this._updateToggle}></slot>
       </div>
@@ -118,8 +119,8 @@ a([
   b()
 ], r.prototype, "value", 1);
 r = a([
-  f("sbb-toggle"),
-  k({
+  y("sbb-toggle"),
+  C({
     role: "radiogroup"
   })
 ], r);

package/train/train-formation/train-formation.d.ts

@@ -14,12 +14,11 @@ export declare class SbbTrainFormationElement extends SbbTrainFormationElement_b
     hideWagonLabel: boolean;
     private _sectors;
     /** Element that defines the visible content width. */
-    private _formationDiv;
+    private _formationDiv?;
     private _contentResizeObserver;
     private _abort;
     private _language;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * Apply width of the scrollable space of the formation as a css variable. This will be used from
      * every slotted sbb-train for the direction-label

package/train/train-formation/train-formation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,sBAAsB,CAA2D;IACzF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5C;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAcd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAC,CAAiB;IACvC,OAAO,CAAC,sBAAsB,CAI3B;IACH,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzC;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAgBd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/train/train-formation.js

@@ -1,28 +1,29 @@
-import { css as c, LitElement as d, html as e, nothing as f } from "lit";
-import { property as h, state as p, customElement as m } from "lit/decorators.js";
-import { ref as u } from "lit/directives/ref.js";
-import { SbbConnectedAbortController as g, SbbLanguageController as v } from "../core/controllers.js";
-import { i18nSectorShort as _, i18nSector as w, i18nTrains as k } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
-import { AgnosticResizeObserver as x } from "../core/observers.js";
-const C = c`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
-var z = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
-  for (var o = a > 1 ? void 0 : a ? L(t, i) : t, s = r.length - 1, b; s >= 0; s--)
+import { ResizeController as c } from "@lit-labs/observers/resize-controller.js";
+import { css as d, LitElement as f, html as e, nothing as h } from "lit";
+import { property as m, state as p, customElement as u } from "lit/decorators.js";
+import { ref as g } from "lit/directives/ref.js";
+import { SbbConnectedAbortController as v, SbbLanguageController as _ } from "../core/controllers.js";
+import { i18nSectorShort as w, i18nSector as k, i18nTrains as y } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as x } from "../core/mixins.js";
+const C = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
+  for (var o = a > 1 ? void 0 : a ? D(t, i) : t, s = r.length - 1, b; s >= 0; s--)
     (b = r[s]) && (o = (a ? b(t, i, o) : b(o)) || o);
   return a && o && z(t, i, o), o;
 };
-let n = class extends y(d) {
+let n = class extends x(f) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new x(() => this._applyCssWidth()), this._abort = new g(this), this._language = new v(this);
+    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new c(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this._applyCssWidth()
+    }), this._abort = new v(this), this._language = new _(this);
   }
   connectedCallback() {
     super.connectedCallback();
     const r = this._abort.signal;
     this.addEventListener("trainSlotChange", (t) => this._readSectors(t), { signal: r }), this.addEventListener("sectorChange", (t) => this._readSectors(t), { signal: r });
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._contentResizeObserver.disconnect();
-  }
   /**
    * Apply width of the scrollable space of the formation as a css variable. This will be used from
    * every slotted sbb-train for the direction-label
@@ -55,14 +56,14 @@ let n = class extends y(d) {
     );
   }
   async _updateFormationDiv(r) {
-    r && (this._contentResizeObserver.disconnect(), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
+    r && (this._formationDiv && this._contentResizeObserver.unobserve(this._formationDiv), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
   }
   willUpdate(r) {
     super.willUpdate(r), r.has("listChildren") && this._readSectors();
   }
   render() {
     return e`
-      <div class="sbb-train-formation" ${u(this._updateFormationDiv)}>
+      <div class="sbb-train-formation" ${g(this._updateFormationDiv)}>
         ${this._sectors.length && this._sectors[0].label !== void 0 ? e`<div class="sbb-train-formation__sectors" aria-hidden="true">
               ${this._sectors.map(
       (r) => e`<span
@@ -72,16 +73,16 @@ let n = class extends y(d) {
                 --sbb-train-formation-wagon-blocked-passage-count: ${r.blockedPassageCount}"
                   >
                     <span class="sbb-train-formation__sector-sticky-wrapper">
-                      ${`${r.wagonCount === 1 && r.label ? _[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
+                      ${`${r.wagonCount === 1 && r.label ? w[this._language.current] : k[this._language.current]} ${r.label ? r.label : ""}`}
                     </span>
                   </span>`
     )}
-            </div>` : f}
+            </div>` : h}
 
         <div class="sbb-train-formation__trains">
           ${this.renderList({
       class: "sbb-train-formation__train-list",
-      ariaLabel: k[this._language.current]
+      ariaLabel: y[this._language.current]
     })}
         </div>
       </div>
@@ -90,13 +91,13 @@ let n = class extends y(d) {
 };
 n.styles = C;
 l([
-  h({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
+  m({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
 ], n.prototype, "hideWagonLabel", 2);
 l([
   p()
 ], n.prototype, "_sectors", 2);
 n = l([
-  m("sbb-train-formation")
+  u("sbb-train-formation")
 ], n);
 export {
   n as SbbTrainFormationElement

package/train/train-wagon.js

@@ -3,17 +3,17 @@ import { property as b, customElement as m } from "lit/decorators.js";
 import { html as s, unsafeStatic as p } from "lit/static-html.js";
 import { SbbLanguageController as y } from "../core/controllers.js";
 import { EventEmitter as u } from "../core/eventing.js";
-import { i18nSector as _, i18nWagonLabel as f, i18nClass as h, i18nBlockedPassage as v, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
+import { i18nSector as _, i18nWagonLabel as v, i18nClass as h, i18nBlockedPassage as f, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as L } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
 import "../icon.js";
 import "../timetable-occupancy-icon.js";
-const z = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+const z = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (a, e, l, o) => {
   for (var r = o > 1 ? void 0 : o ? A(e, l) : e, c = a.length - 1, g; c >= 0; c--)
     (g = a[c]) && (r = (o ? g(e, l, r) : g(r)) || r);
   return o && r && S(e, l, r), r;
 };
-let n = class extends L(
+let n = class extends k(
   w
 ) {
   constructor() {
@@ -47,7 +47,7 @@ let n = class extends L(
       return s`
         <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
           ${this.label ? s` <span class="sbb-screen-reader-only">
-                    ${`${k[this._language.current]},`}&nbsp;
+                    ${`${L[this._language.current]},`}&nbsp;
                   </span>
                   ${this.label}` : t}
         </${p(o)}>
@@ -56,7 +56,7 @@ let n = class extends L(
     return s`
       <div class="sbb-train-wagon">
         ${this.type === "wagon" ? s`<ul
-              aria-label=${f[this._language.current]}
+              aria-label=${v[this._language.current]}
               class="sbb-train-wagon__compartment"
             >
               ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
@@ -73,7 +73,7 @@ let n = class extends L(
                     .occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>` : t}
               ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
-                    ${v[this.blockedPassage][this._language.current]}
+                    ${f[this.blockedPassage][this._language.current]}
                   </li>` : t}
             </ul>` : t}
         ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">

package/typography.css

@@ -1,16 +1,3 @@
-/**
- * Better font rendering (on OS X)
- * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
- *
- * Usage:
- *
- * .var_dark_on_light {
- * 	@include font-smoothing;
- * }
- * .var_light_on_dark {
- * 	@include font-smoothing-reset;
- * }
- */
 sub, sup {
   font-size: 60%;
   line-height: 0;