@sbb-esta/lyne-elements 3.12.0 → 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/form-associated-input-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGhB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,4BAA4B,CAAC;;AAIpC,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAAgC,SAAQ,oCAErE;IACC,gBAAuB,mBAAmB,QAAQ;IAElD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;IAChC,IAAW,KAAK,IAAI,MAAM,CAAC;IAE3B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAEjC;;;;OAIG;IACI,MAAM,IAAI,IAAI;IAEd,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IACjD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAgBD;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACnF,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CAqXzD,CAAC"}
+{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGhB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,qBAAqB,EAA8B,MAAM,mBAAmB,CAAC;AAItF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,4BAA4B,CAAC;;AAIpC,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAAgC,SAAQ,oCAErE;IACC,gBAAuB,mBAAmB,QAAQ;IAElD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;IAChC,IAAW,KAAK,IAAI,MAAM,CAAC;IAE3B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAEjC;;;;OAIG;IACI,MAAM,IAAI,IAAI;IAEd,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IACjD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAgBD;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACnF,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CAmazD,CAAC"}

package/core/mixins/form-associated-input-mixin.js

@@ -1,24 +1,24 @@
-import { __esDecorate as r, __runInitializers as p } from "tslib";
-import { isServer as l, html as f } from "lit";
+import { __esDecorate as l, __runInitializers as f } from "tslib";
+import { isServer as r, html as m } from "lit";
 import { property as c, eventOptions as b } from "lit/decorators.js";
-import { sbbInputModalityDetector as m } from "../a11y.js";
-import { SbbLanguageController as g } from "../controllers.js";
-import { isWebkit as v } from "../dom.js";
-import { i18nInputRequired as _ } from "../i18n.js";
-import { SbbDisabledMixin as y } from "./disabled-mixin.js";
-import { SbbElementInternalsMixin as C } from "./element-internals-mixin.js";
-import { SbbFormAssociatedMixin as E } from "./form-associated-mixin.js";
-import { SbbReadonlyMixin as x } from "./readonly-mixin.js";
-import { SbbRequiredMixin as S } from "./required-mixin.js";
-const k = () => {
-  if (l)
+import { sbbInputModalityDetector as p } from "../a11y.js";
+import { SbbLanguageController as g, SbbMediaQueryPointerCoarse as _ } from "../controllers.js";
+import { isWebkit as v, isBlink as y } from "../dom.js";
+import { i18nInputRequired as C } from "../i18n.js";
+import { SbbDisabledMixin as E } from "./disabled-mixin.js";
+import { SbbElementInternalsMixin as S } from "./element-internals-mixin.js";
+import { SbbFormAssociatedMixin as x } from "./form-associated-mixin.js";
+import { SbbReadonlyMixin as k } from "./readonly-mixin.js";
+import { SbbRequiredMixin as w } from "./required-mixin.js";
+const A = () => {
+  if (r)
     return !1;
   const a = document.createElement("div");
   return a.setAttribute("contenteditable", "PLAINTEXT-ONLY"), a.contentEditable === "plaintext-only";
-}, w = k(), H = (a) => (() => {
+}, O = A(), z = (a) => (() => {
   var s;
-  let d = x(y(S(E(C(a))))), n = [], o, h, u;
-  return s = class extends d {
+  let h = k(E(w(x(S(a))))), n = [], d, u, o;
+  return s = class extends h {
     /**
      * Form type of element.
      * @default 'text'
@@ -30,7 +30,7 @@ const k = () => {
      * The value of the input. Reflects the current text value of this input.
      */
     set value(e) {
-      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
+      this._value = this._cleanText(e), this.hasUpdated && this._assignValue(this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
     }
     get value() {
       return this._value ?? "";
@@ -42,11 +42,11 @@ const k = () => {
       return this.getAttribute("placeholder") ?? "";
     }
     constructor() {
-      super(), this._shouldEmitChange = (p(this, n), !1), this._shouldTriggerSubmit = !1, this.language = new g(this), this._value = "", this.addEventListener?.("input", () => {
+      super(), this._shouldEmitChange = (f(this, n), !1), this._shouldTriggerSubmit = !1, this.language = new g(this), this._value = "", this.addEventListener?.("input", () => {
         const e = this._value;
         this._value = this._cleanText(this.textContent ?? ""), this.requestUpdate("value", e), this.internals.states.add("interacted"), this._shouldEmitChange = !0;
       }, { capture: !0 }), this.addEventListener?.("change", () => this._shouldEmitChange = !1, { capture: !0 }), this.addEventListener?.("keydown", (e) => {
-        if ((e.key === "Enter" || e.key === `
+        if (this._requiresEmptyPatch() && this._assignValue(""), (e.key === "Enter" || e.key === `
 `) && e.isTrusted)
           e.preventDefault(), e.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", e));
         else if (v && this.value && (e.key === "Backspace" || e.key === "Delete") && e.isTrusted) {
@@ -58,33 +58,37 @@ const k = () => {
           t.startOffset !== t.endOffset ? (t.deleteContents(), this._dispatchInputEvent()) : e.key === "Backspace" && t.startOffset > 0 ? (t.setStart(t.startContainer, t.startOffset - 1), t.deleteContents(), this._dispatchInputEvent()) : e.key === "Delete" && t.endOffset < this.value.length && (t.setEnd(t.endContainer, t.endOffset + 1), t.deleteContents(), this._dispatchInputEvent());
         }
       }, { capture: !0 }), this.addEventListener?.("keyup", (e) => {
-        (e.key === "Enter" || e.key === `
-`) && (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, this.form?.requestSubmit()));
+        e.key === "Enter" || e.key === `
+` ? (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, this.form?.requestSubmit())) : this._requiresEmptyPatch() && this._setCursorAt(0);
       }, { capture: !0 }), this.addEventListener?.("paste", (e) => {
-        e.preventDefault();
+        e.preventDefault(), this._requiresEmptyPatch() && this._assignValue("");
         const t = this._cleanText(e.clipboardData?.getData("text/plain") ?? ""), i = window.getSelection()?.getRangeAt(0);
         !i || !t || (i.deleteContents(), i.insertNode(document.createTextNode(this.preparePastedText(t))), i.setStart(i.endContainer, i.endOffset), this._dispatchInputEvent());
       }), this.addEventListener?.("focus", () => {
-        m.mostRecentModality === "keyboard" && window.getSelection()?.selectAllChildren(this);
+        p.mostRecentModality === "keyboard" && window.getSelection()?.selectAllChildren(this);
+      }), this.addEventListener?.("touchend", () => {
+        this._requiresEmptyPatch() && (this._assignValue("&nbsp;"), this._setCursorAt(0));
+      }), this.addEventListener?.("click", () => {
+        this._requiresEmptyPatch() && p.mostRecentModality === "touch" && this._setCursorAt(0);
       }), this.addEventListener?.("blur", () => {
-        window.getSelection()?.removeAllRanges(), this._emitChangeIfNecessary(), this.scrollLeft = 0;
+        window.getSelection()?.removeAllRanges(), this.value === "" && this._assignValue(""), this._emitChangeIfNecessary(), this.scrollLeft = 0;
       }, { capture: !0 });
     }
     isDisabledExternally() {
       return this.formDisabled;
     }
     connectedCallback() {
-      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this.innerHTML = this.value;
+      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this._assignValue(this.value);
     }
     focus(e) {
       if (super.focus(e), this._canSelect()) {
         const t = window.getSelection();
         if (!t)
           return;
-        let i = t.rangeCount > 0 ? t.getRangeAt(0) : null;
+        const i = t.rangeCount > 0 ? t.getRangeAt(0) : null;
         if (i && i.startOffset !== 0)
           return;
-        i = document.createRange(), i.setStart(this.firstChild, this.textContent.length), i.collapse(!0), t.removeAllRanges(), t.addRange(i);
+        this._setCursorAt(this.textContent.length);
       }
     }
     attributeChangedCallback(e, t, i) {
@@ -119,7 +123,7 @@ const k = () => {
       window.getSelection()?.selectAllChildren(this);
     }
     firstUpdated(e) {
-      super.firstUpdated(e), this.value && !this.innerHTML.length && (this.innerHTML = this.value);
+      super.firstUpdated(e), this.value && !this.innerHTML.length && this._assignValue(this.value);
     }
     requestUpdate(e, t, i) {
       super.requestUpdate(e, t, i), this.isConnected && (e === "disabled" || e === "formDisabled" || e === "readOnly") && this._updateContenteditable();
@@ -128,11 +132,24 @@ const k = () => {
       return super.shouldValidate(e) || e === "value" || e === "required";
     }
     validate() {
-      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", _[this.language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", C[this.language.current]) : this.removeValidityFlag("valueMissing");
     }
     preparePastedText(e) {
       return e;
     }
+    _requiresEmptyPatch() {
+      return r ? !1 : y && this.value === "" && window.matchMedia(_).matches;
+    }
+    _assignValue(e) {
+      this.innerHTML = e;
+    }
+    _setCursorAt(e) {
+      const t = window.getSelection();
+      if (!t)
+        return;
+      const i = document.createRange();
+      i.setStart(this.firstChild, e), i.collapse(!0), t.removeAllRanges(), t.addRange(i);
+    }
     _cleanText(e) {
       return e === null ? "" : `${e}`.replace(/[\n\r]+/g, "");
     }
@@ -145,9 +162,9 @@ const k = () => {
           e.remove();
     }
     _updateContenteditable() {
-      if (!l && this.isConnected) {
+      if (!r && this.isConnected) {
         this.internals.ariaReadOnly = this.readOnly ? "true" : null, this.internals.ariaDisabled = this.disabled ? "true" : null;
-        const e = this.disabled || this.readOnly ? "false" : w ? "plaintext-only" : "true";
+        const e = this.disabled || this.readOnly ? "false" : O ? "plaintext-only" : "true";
         this.setAttribute("contenteditable", e), this.readOnly ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
       }
     }
@@ -155,20 +172,20 @@ const k = () => {
       this._shouldEmitChange && (this._shouldEmitChange = !1, this.dispatchEvent(new Event("change", { bubbles: !0 })));
     }
     _canSelect() {
-      return !l && !this.disabled && !this.readOnly && !!this.value;
+      return !r && !this.disabled && !this.readOnly && !!this.value;
     }
     render() {
-      return f`<slot @slotchange=${this._cleanChildren}></slot>`;
+      return m`<slot @slotchange=${this._cleanChildren}></slot>`;
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    o = [c()], h = [c({ attribute: !1 })], u = [b({ passive: !0 })], r(s, null, o, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    d = [c()], u = [c({ attribute: !1 })], o = [b({ passive: !0 })], l(s, null, d, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
       t.value = i;
-    } }, metadata: e }, null, n), r(s, null, h, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
+    } }, metadata: e }, null, n), l(s, null, u, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
       t.placeholder = i;
-    } }, metadata: e }, null, n), r(s, null, u, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, null, n), l(s, null, o, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), s.role = "textbox", s.formFieldAssociated = !0, s;
 })();
 export {
-  H as SbbFormAssociatedInputMixin
+  z as SbbFormAssociatedInputMixin
 };

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;