@sbb-esta/lyne-elements 3.12.1 → 4.0.0-next

package/core/controllers/slot-state-controller.js

@@ -1,31 +1,37 @@
-import { isServer as n } from "lit";
-class h {
-  constructor(s, t = null) {
-    this._host = s, this._onChangeCallback = t, this.slots = /* @__PURE__ */ new Set(), this._textObserver = !n && new MutationObserver(() => {
-      Array.from(this._host.childNodes).filter((e) => e.nodeType === e.TEXT_NODE).some((e) => e.textContent?.trim()) ? this.slots.add("unnamed") : Array.from(this._host.children).every((e) => e.slot) && this.slots.delete("unnamed"), this._updateSlotNameAttribute();
-    }), this._slotchangeHandler = (o) => {
-      this._syncSlots(o.target);
+import { isServer as h } from "lit";
+class n extends Event {
+  constructor(e) {
+    super("slottedchange", { composed: !0 }), this.slot = e;
+  }
+}
+class r {
+  constructor(e, t) {
+    this._host = e, this._internals = t, this._textObserver = !h && new MutationObserver(() => {
+      const s = this._host.shadowRoot.querySelector("slot:not([name])");
+      s ? this._updateSlottedState(s) : this._textObserver.disconnect();
+    }), this.hostConnected = () => {
+      this._host.shadowRoot?.addEventListener("slotchange", (s) => this._slotchangeHandler(s, s.target)), this._host.shadowRoot?.addEventListener("slottedchange", (s) => this._slotchangeHandler(s, s.slot), { capture: !0 }), this._internals.shadowRoot?.querySelectorAll("slot").forEach((s) => this._handleSlotChange(s)), this.hostConnected = void 0;
     }, this._host.addController(this);
   }
-  hostConnected() {
-    this._syncSlots(...this._host.shadowRoot?.querySelectorAll?.("slot") ?? []), this._host.shadowRoot?.addEventListener("slotchange", this._slotchangeHandler);
+  _slotchangeHandler(e, t) {
+    const s = this._host.shadowRoot.contains(t) ? t : e.composedPath().find((o) => o instanceof HTMLSlotElement && this._host.shadowRoot.contains(o));
+    s && this._handleSlotChange(s);
+  }
+  _handleSlotChange(e) {
+    this._updateSlottedState(e), e.name || this._observeTextNodesInSlot(e);
   }
-  hostDisconnected() {
-    this._host.shadowRoot?.removeEventListener("slotchange", this._slotchangeHandler), this._textObserver.disconnect();
+  _updateSlottedState(e) {
+    const t = e.name ? `slotted-${e.name}` : "slotted", s = this._hasSlottedContent(e);
+    s && !this._internals.states.has(t) ? (this._internals.states.add(t), this._host.dispatchEvent(new n(e))) : !s && this._internals.states.has(t) && (this._internals.states.delete(t), this._host.dispatchEvent(new n(e)));
   }
-  _syncSlots(...s) {
-    this._textObserver.disconnect();
-    for (const t of s) {
-      const o = t.name || "unnamed";
-      t.assignedNodes().some((e) => "tagName" in e || e.textContent?.trim()) ? this.slots.add(o) : this.slots.delete(o), this._updateSlotNameAttribute();
-    }
-    s.find((t) => !t.name)?.assignedNodes().filter((t) => t.nodeType === t.TEXT_NODE).forEach((t) => this._textObserver.observe(t, { characterData: !0 }));
+  _observeTextNodesInSlot(e) {
+    this._textObserver.disconnect(), e.assignedNodes().filter((t) => t.nodeType === t.TEXT_NODE).forEach((t) => this._textObserver.observe(t, { characterData: !0 }));
   }
-  _updateSlotNameAttribute() {
-    const s = this._host.getAttribute("data-slot-names"), t = [...this.slots].sort().join(" ");
-    t ? this._host.getAttribute("data-slot-names") !== t && this._host.setAttribute("data-slot-names", t) : this._host.removeAttribute("data-slot-names"), t !== s && this._onChangeCallback?.();
+  _hasSlottedContent(e) {
+    return e.name ? e.assignedElements().some((t) => !(t instanceof HTMLSlotElement) || this._hasSlottedContent(t)) : e.assignedNodes().some((t) => t instanceof HTMLSlotElement ? this._hasSlottedContent(t) : t.nodeType !== t.TEXT_NODE || !!t.textContent?.trim());
   }
 }
 export {
-  h as SbbSlotStateController
+  r as SbbSlotStateController,
+  n as SbbSlottedChangeEvent
 };

package/core/controllers.js

@@ -1,24 +1,25 @@
 import { SbbEscapableOverlayController as o } from "./controllers/escapable-overlay-controller.js";
-import { SbbIdReferenceController as l } from "./controllers/id-reference-controller.js";
-import { SbbInertController as a } from "./controllers/inert-controller.js";
+import { SbbIdReferenceController as t } from "./controllers/id-reference-controller.js";
+import { SbbInertController as l } from "./controllers/inert-controller.js";
 import { SbbLanguageController as S } from "./controllers/language-controller.js";
-import { SbbDarkModeController as i, SbbMediaMatcherController as M, SbbMediaQueryBreakpointMediumAndAbove as p, SbbMediaQueryBreakpointMediumAndBelow as m, SbbMediaQueryBreakpointSmallAndBelow as u, SbbMediaQueryDarkMode as C, SbbMediaQueryForcedColors as y, SbbMediaQueryHover as f, SbbMediaQueryPointerCoarse as x } from "./controllers/media-matchers-controller.js";
-import { SbbSlotStateController as k } from "./controllers/slot-state-controller.js";
-import { SbbOverlayPositionController as c } from "./controllers/overlay-position-controller.js";
+import { SbbDarkModeController as i, SbbMediaMatcherController as p, SbbMediaQueryBreakpointLargeAndAbove as C, SbbMediaQueryBreakpointLargeAndBelow as M, SbbMediaQueryBreakpointSmallAndBelow as y, SbbMediaQueryDarkMode as f, SbbMediaQueryForcedColors as m, SbbMediaQueryHover as u, SbbMediaQueryPointerCoarse as x } from "./controllers/media-matchers-controller.js";
+import { SbbSlotStateController as g, SbbSlottedChangeEvent as k } from "./controllers/slot-state-controller.js";
+import { SbbOverlayPositionController as B } from "./controllers/overlay-position-controller.js";
 export {
   i as SbbDarkModeController,
   o as SbbEscapableOverlayController,
-  l as SbbIdReferenceController,
-  a as SbbInertController,
+  t as SbbIdReferenceController,
+  l as SbbInertController,
   S as SbbLanguageController,
-  M as SbbMediaMatcherController,
-  p as SbbMediaQueryBreakpointMediumAndAbove,
-  m as SbbMediaQueryBreakpointMediumAndBelow,
-  u as SbbMediaQueryBreakpointSmallAndBelow,
-  C as SbbMediaQueryDarkMode,
-  y as SbbMediaQueryForcedColors,
-  f as SbbMediaQueryHover,
+  p as SbbMediaMatcherController,
+  C as SbbMediaQueryBreakpointLargeAndAbove,
+  M as SbbMediaQueryBreakpointLargeAndBelow,
+  y as SbbMediaQueryBreakpointSmallAndBelow,
+  f as SbbMediaQueryDarkMode,
+  m as SbbMediaQueryForcedColors,
+  u as SbbMediaQueryHover,
   x as SbbMediaQueryPointerCoarse,
-  c as SbbOverlayPositionController,
-  k as SbbSlotStateController
+  B as SbbOverlayPositionController,
+  g as SbbSlotStateController,
+  k as SbbSlottedChangeEvent
 };

package/core/decorators.d.ts

@@ -8,5 +8,4 @@ export * from './decorators/host-attributes.js';
 export * from './decorators/id-reference.js';
 export * from './decorators/omit-empty-converter.js';
 export * from './decorators/plain-date.js';
-export * from './decorators/slot-state.js';
 //# sourceMappingURL=decorators.d.ts.map

package/core/decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/elements/core/decorators.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/elements/core/decorators.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4BAA4B,CAAC"}

package/core/decorators.js

@@ -3,17 +3,15 @@ import { getOverride as p } from "./decorators/get-override.js";
 import { handleDistinctChange as m } from "./decorators/handle-distinct-change.js";
 import { hostAttributes as n } from "./decorators/host-attributes.js";
 import { idReference as a } from "./decorators/id-reference.js";
-import { omitEmptyConverter as s } from "./decorators/omit-empty-converter.js";
-import { plainDate as d, plainDateConverter as h } from "./decorators/plain-date.js";
-import { slotState as C } from "./decorators/slot-state.js";
+import { omitEmptyConverter as d } from "./decorators/omit-empty-converter.js";
+import { plainDate as l, plainDateConverter as s } from "./decorators/plain-date.js";
 export {
   t as forceType,
   p as getOverride,
   m as handleDistinctChange,
   n as hostAttributes,
   a as idReference,
-  s as omitEmptyConverter,
-  d as plainDate,
-  h as plainDateConverter,
-  C as slotState
+  d as omitEmptyConverter,
+  l as plainDate,
+  s as plainDateConverter
 };

package/core/dom/breakpoint.d.ts

@@ -1,4 +1,4 @@
-export declare const breakpoints: readonly ["zero", "micro", "small", "medium", "large", "wide", "ultra"];
+export declare const breakpoints: readonly ["zero", "small", "large", "ultra"];
 export type Breakpoint = (typeof breakpoints)[number];
 /**
  * Checks whether the document matches a particular media query.

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,yEAA0E,CAAC;AACnG,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;;;;;;;;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"}

package/core/dom/breakpoint.js

@@ -1,12 +1,12 @@
 import { isServer as d } from "lit";
-const s = ["zero", "micro", "small", "medium", "large", "wide", "ultra"];
-function u(n, i, a) {
+const s = ["zero", "small", "large", "ultra"];
+function p(n, a, i) {
   if (d)
     return null;
-  const o = getComputedStyle(document.documentElement), t = n ? o.getPropertyValue(`--sbb-breakpoint-${n}-min`) : "", e = i ? `${parseFloat(o.getPropertyValue(`--sbb-breakpoint-${i}-${a?.includeMaxBreakpoint ? "max" : "min"}`)) - (a?.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", r = t && `(min-width: ${t})`, m = e && `(max-width: ${e})`, c = t && e && " and ";
+  const o = getComputedStyle(document.documentElement), t = n ? o.getPropertyValue(`--sbb-breakpoint-${n}-min`) : "", e = a ? `${parseFloat(o.getPropertyValue(`--sbb-breakpoint-${a}-${i?.includeMaxBreakpoint ? "max" : "min"}`)) - (i?.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", r = t && `(min-width: ${t})`, m = e && `(max-width: ${e})`, c = t && e && " and ";
   return window.matchMedia(`${r}${c}${m}`).matches;
 }
 export {
   s as breakpoints,
-  u as isBreakpoint
+  p as isBreakpoint
 };

package/core/i18n/i18n.js

@@ -49,7 +49,7 @@ const i = {
 }, d = {
   de: "Wagen",
   en: "Train coach",
-  fr: "Wagon du train",
+  fr: "Wagon",
   it: "Carrozza del treno"
 }, u = {
   de: "Nummer",
@@ -400,7 +400,7 @@ const i = {
 }, Y = {
   de: "Nächster Tag",
   en: "Next day",
-  fr: "Le prochain jour",
+  fr: "Jour suivant",
   it: "Giorno successivo"
 }, X = {
   de: "Vorheriger Tag",
@@ -480,7 +480,7 @@ const i = {
 }), ue = {
   de: "erweitert",
   en: "expanded",
-  fr: "est tiré",
+  fr: "étendu",
   it: "espanso"
 }, fe = {
   de: "reduziert",
@@ -495,7 +495,7 @@ const i = {
 }, ge = {
   de: "Mehr Breadcrumbs anzeigen",
   en: "Show more breadcrumbs",
-  fr: "Afficher plus breadcrumbs",
+  fr: "Afficher plus de fils d’Ariane",
   it: "Mostra più breadcrumbs"
 }, pe = {
   de: "Feldinhalt löschen",
@@ -550,7 +550,7 @@ const i = {
 }, Te = {
   de: "Nächste Seite",
   en: "Next page",
-  fr: "Prochaine page",
+  fr: "Page suivante",
   it: "Pagina successiva"
 }, we = {
   de: "Vorherige Seite",
@@ -585,7 +585,7 @@ const i = {
 }, ke = {
   de: "Muss gesetzt sein.",
   en: "Must be checked.",
-  fr: "Doit être défini.",
+  fr: "Doit être cochée.",
   it: "Deve essere impostato."
 }, Fe = {
   de: "Auswahl erforderlich.",

package/core/interfaces/types.d.ts

@@ -1,6 +1,6 @@
 export type SbbLanguage = 'de' | 'en' | 'fr' | 'it';
 export type SbbTime = `${number}:${number}:${number}`;
-export type SbbHorizontalFrom = 'zero' | 'micro' | 'small' | 'medium' | 'large' | 'wide' | 'ultra';
+export type SbbHorizontalFrom = 'zero' | 'small' | 'large' | 'ultra';
 export type SbbIconPlacement = 'start' | 'end';
 export type SbbOccupancy = 'high' | 'medium' | 'low' | 'none';
 export type SbbOrientation = 'horizontal' | 'vertical';

package/core/interfaces/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/interfaces/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,mBAAmB,CAAC;AAElG,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG,cAAc,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/interfaces/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,mBAAmB,CAAC;AAElG,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG,cAAc,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}

package/core/mixins/element-internals-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-internals-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/element-internals-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAA2B,MAAM,KAAK,CAAC;AAEzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA8C5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,2BAA2B,EAAE,OAAO,GAAG,IAAI,CAAC;QAC5C,oBAAoB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAChD,uBAAuB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACnD,mBAAmB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAC/C,wBAAwB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACpD,sBAAsB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAClD,gBAAgB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;KAC7C;CACF;AAyKD,MAAM,WAAW,8BAA8B;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,4BAA4B;IACxD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAC/C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;CAC5D;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACjC,OAAO,EAAE,GAAG,IAGd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACvC,OAAO,EAAE,GAAG,IAId,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,4BAA4B,CAAC,GAAG,CAAC,GAAG,8BA2C1D,CAAC"}
+{"version":3,"file":"element-internals-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/element-internals-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA8C5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,2BAA2B,EAAE,OAAO,GAAG,IAAI,CAAC;QAC5C,oBAAoB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAChD,uBAAuB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACnD,mBAAmB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAC/C,wBAAwB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACpD,sBAAsB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAClD,gBAAgB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;KAC7C;CACF;AAyKD,MAAM,WAAW,8BAA8B;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,4BAA4B;IACxD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAC/C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;CAC5D;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACjC,OAAO,EAAE,GAAG,IAGd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACvC,OAAO,EAAE,GAAG,IAId,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,4BAA4B,CAAC,GAAG,CAAC,GAAG,8BA4C1D,CAAC"}

package/core/mixins/element-internals-mixin.js

@@ -1,5 +1,6 @@
-import { isServer as E } from "lit";
-const g = E || !CSS.supports("selector(:state(loading))") ? class extends Set {
+import { isServer as p } from "lit";
+import { SbbSlotStateController as E } from "../controllers.js";
+const g = p || !CSS.supports("selector(:state(loading))") ? class extends Set {
   constructor(e) {
     super(), this._host = e, this._host.addController(this);
   }
@@ -19,7 +20,7 @@ const g = E || !CSS.supports("selector(:state(loading))") ? class extends Set {
     this._host.toggleAttribute(`state--${e}`, a);
   }
 } : null;
-if (!E) {
+if (!p) {
   let h = 0;
   const e = (r) => r.shadowRoot?.host ?? (r instanceof Element ? r : (() => {
     throw new Error("Unable to resolve related element! This should never happen.");
@@ -95,10 +96,10 @@ if (!E) {
       }
   }
 }
-const y = (h, ...e) => {
+const S = (h, ...e) => {
   const a = e.filter((c) => !!c);
   return h?.length ? h.concat(a) : e.length ? a : null;
-}, O = (h, ...e) => {
+}, w = (h, ...e) => {
   e = e.filter((c) => !!c);
   const a = h?.filter((c) => !e.includes(c)) ?? null;
   return a?.length ? a : null;
@@ -116,7 +117,7 @@ const y = (h, ...e) => {
         for (const r of this.getAttributeNames().filter((d) => d.startsWith("state--")))
           this.internals.states.add(r.slice(7)), this.removeAttribute(r);
       const u = this.constructor.role;
-      u && (this.internals.role = u);
+      u && (this.internals.role = u), this.addController(new E(this, this.internals));
     }
     toggleState(c, u) {
       u || u !== !1 && !this.internals.states.has(c) ? this.internals.states.add(c) : this.internals.states.delete(c);
@@ -126,6 +127,6 @@ const y = (h, ...e) => {
 };
 export {
   A as SbbElementInternalsMixin,
-  y as appendAriaElements,
-  O as removeAriaElements
+  S as appendAriaElements,
+  w as removeAriaElements
 };

package/core/mixins.js

@@ -1,5 +1,5 @@
 import { SbbAnimationCompleteMixin as b } from "./mixins/animation-complete-mixin.js";
-import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
+import { SbbDisabledInteractiveMixin as t, SbbDisabledMixin as a, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
 import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u } from "./mixins/element-internals-mixin.js";
 import { SbbFormAssociatedCheckboxMixin as v } from "./mixins/form-associated-checkbox-mixin.js";
 import { SbbFormAssociatedInputMixin as f } from "./mixins/form-associated-input-mixin.js";
@@ -14,11 +14,11 @@ import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
 import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
 import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{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-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const s = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: var(--sbb-cursor-pointer);--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-cursor-default)}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{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-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
 export {
   b as SbbAnimationCompleteMixin,
-  a as SbbDisabledInteractiveMixin,
-  t as SbbDisabledMixin,
+  t as SbbDisabledInteractiveMixin,
+  a as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
   v as SbbFormAssociatedCheckboxMixin,
@@ -34,7 +34,7 @@ export {
   q as SbbSelectionPanelMixin,
   H as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
-  n as panelCommonStyle,
+  s as panelCommonStyle,
   M as radioButtonRegistry,
   u as removeAriaElements
 };

package/core/styles/_index.scss

@@ -19,7 +19,6 @@
 @forward './mixins/pearl-chain-bullet';
 @forward './mixins/popover';
 @forward './mixins/scrollbar';
-@forward './mixins/shadows';
 @forward './mixins/table';
 @forward './mixins/typo';
 

package/core/styles/box-sizing.scss

@@ -0,0 +1,3 @@
+@use './mixins/helpers';
+
+@include helpers.box-sizing;

package/core/styles/core/mediaqueries.scss

@@ -7,23 +7,17 @@
 @use '../node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
-  zero: sbb-tokens.$sbb-breakpoint-zero-min,
   // 0
-  micro: sbb-tokens.$sbb-breakpoint-micro-min,
-  // 360
-  small: sbb-tokens.$sbb-breakpoint-small-min,
+  zero: sbb-tokens.$sbb-breakpoint-zero-min,
   // 600
-  medium: sbb-tokens.$sbb-breakpoint-medium-min,
-  // 840
-  large: sbb-tokens.$sbb-breakpoint-large-min,
+  small: sbb-tokens.$sbb-breakpoint-small-min,
   // 1024
-  wide: sbb-tokens.$sbb-breakpoint-wide-min,
-  // 1280
-  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
+  large: sbb-tokens.$sbb-breakpoint-large-min,
   // 1440
+  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
   ultra--max-content: (
-      sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x),
-    ),
+    sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x)
+  )
 ) !default;
 $mq-media-type: all !default;
 

package/core/styles/core.scss

@@ -1,6 +1,6 @@
 $theme: 'standard' !default;
 
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens with (
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
 @use './core/mediaqueries';
@@ -11,93 +11,104 @@ $theme: 'standard' !default;
 @use './mixins/inputs';
 @use './mixins/popover';
 @use './mixins/scrollbar';
-@use './mixins/shadows';
 @use './mixins/typo';
 
 @include helpers.box-sizing;
 
-// Core variables, are always needed
+// Core variables
 :root {
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
-  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+  @include sbb-css-tokens.base;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Cursor
+  --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;
+  }
 
-  & {
-    // Train formation
-    --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-    --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-    --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-    --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 100000em;
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
-    // Overlay
-    --sbb-overlay-default-z-index: 1000;
-
-    // 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;
-    }
+  &:has(sbb-header[size='s']) {
+    --sbb-header-height: #{functions.px-to-rem-build(52)};
+  }
 
-    // Infinity border radius, can be used to achieve rounded border on start and end
-    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-    --sbb-border-radius-infinity: 100000em;
+  // When the input modality is either mouse or touch,
+  // the focus outline should be hidden.
+  // We achieve this by setting the outline style to none.
+  // This is primarily to work around Safari bugs.
+  &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+    --sbb-focus-outline-style: none;
+  }
 
-    &:has(sbb-header[size='s']) {
-      --sbb-header-height: #{functions.px-to-rem-build(52)};
-    }
+  @include mediaqueries.mq($from: small) {
+    @include sbb-css-tokens.breakpoint-small;
+  }
 
-    // When the input modality is either mouse or touch,
-    // the focus outline should be hidden.
-    // We achieve this by setting the outline style to none.
-    // This is primarily to work around Safari bugs.
-    &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
-      --sbb-focus-outline-style: none;
-    }
+  @include mediaqueries.mq($from: large) {
+    @include sbb-css-tokens.breakpoint-large;
 
-    @include mediaqueries.mq($from: medium) {
-      // Header
-      --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-      // Time Input
-      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
 
-      &:has(sbb-header[size='s']) {
-        --sbb-header-height: var(--sbb-spacing-fixed-14x);
-      }
+    &:has(sbb-header[size='s']) {
+      --sbb-header-height: var(--sbb-spacing-fixed-14x);
     }
   }
+
+  @include mediaqueries.mq($from: ultra) {
+    @include sbb-css-tokens.breakpoint-ultra;
+  }
 }
 
 @include font-face.font-declarations;
@@ -586,11 +597,11 @@ sbb-dialog-actions {
   sbb-dialog:state(overflows) & {
     --sbb-dialog-actions-border-color: transparent;
 
-    @include shadows.shadow-level-9-soft;
+    box-shadow: var(--sbb-box-shadow-level-9-soft);
   }
 
   sbb-dialog[negative]:state(overflows) & {
-    @include shadows.shadow-level-9-soft-negative;
+    box-shadow: var(--sbb-box-shadow-level-9-soft-negative);
   }
 }