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

package/timetable-form/timetable-form/timetable-form.component.js

@@ -1,18 +1,18 @@
 import { __esDecorate as b, __runInitializers as i } from "tslib";
 import { css as m, LitElement as c, html as n } from "lit";
 import { customElement as u } from "lit/decorators.js";
-const d = m`*,:before,:after{box-sizing:border-box}:host{--sbb-timetable-form-background-color: var(--sbb-background-color-1);--sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);display:flex;flex-direction:column}`;
+const d = m`:host{--sbb-timetable-form-background-color: var(--sbb-background-color-1);--sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);display:flex;flex-direction:column}`;
 let y = (() => {
   var t;
-  let s = [u("sbb-timetable-form")], a, o = [], e, l = c;
-  return t = class extends l {
+  let s = [u("sbb-timetable-form")], a, l = [], e, o = c;
+  return t = class extends o {
     render() {
       return n`<slot></slot>`;
     }
   }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    b(null, a = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, o), e = a.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = d, i(e, o), e;
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    b(null, a = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, l), e = a.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = d, i(e, l), e;
 })();
 export {
   y as SbbTimetableFormElement

package/timetable-form/timetable-form-details/timetable-form-details.component.js

@@ -1,17 +1,17 @@
 import { __esDecorate as b, __runInitializers as o } from "tslib";
 import { css as d, LitElement as n, html as m } from "lit";
 import { customElement as c } from "lit/decorators.js";
-const f = d`*,:before,:after{box-sizing:border-box}:host{--sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);--sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-timetable-form-details-horizontal-divider-height: 1.5rem;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);padding-block:var(--sbb-timetable-form-details-padding-block);padding-inline-start:calc(var(--sbb-size-icon-ui-small) + var(--sbb-spacing-responsive-xxxs));align-items:center}::slotted(sbb-form-field){--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem}::slotted(sbb-divider[orientation=vertical]){height:var(--sbb-timetable-form-details-horizontal-divider-height)}::slotted(:last-child){margin-inline-end:var(--sbb-timetable-form-details-padding-inline)}`;
+const f = d`:host{--sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);--sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-timetable-form-details-horizontal-divider-height: 1.5rem;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);padding-block:var(--sbb-timetable-form-details-padding-block);padding-inline-start:calc(var(--sbb-size-icon-ui-small) + var(--sbb-spacing-responsive-xxxs));align-items:center}::slotted(sbb-form-field){--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem}::slotted(sbb-divider[orientation=vertical]){height:var(--sbb-timetable-form-details-horizontal-divider-height)}::slotted(:last-child){margin-inline-end:var(--sbb-timetable-form-details-padding-inline)}`;
 let g = (() => {
   var t;
-  let l = [c("sbb-timetable-form-details")], a, s = [], e, r = n;
+  let l = [c("sbb-timetable-form-details")], i, s = [], e, r = n;
   return t = class extends r {
     render() {
       return m`<slot></slot>`;
     }
   }, e = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    b(null, a = { value: e }, l, { kind: "class", name: e.name, metadata: i }, null, s), e = a.value, i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    b(null, i = { value: e }, l, { kind: "class", name: e.name, metadata: a }, null, s), e = i.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), t.styles = f, o(e, s), e;
 })();
 export {

package/timetable-form/timetable-form-field/timetable-form-field.component.js

@@ -1,17 +1,17 @@
-import { __esDecorate as n, __runInitializers as c } from "tslib";
-import { css as f, isServer as d, html as i } from "lit";
-import { customElement as m } from "lit/decorators.js";
+import { __esDecorate as b, __runInitializers as c } from "tslib";
+import { css as f, isServer as m, html as i } from "lit";
+import { customElement as d } from "lit/decorators.js";
 import { SbbFormFieldElement as l } from "../../form-field/form-field.js";
-const u = f`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem;--sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);--sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1)}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate: 90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate: -90deg;--sbb-timetable-form-field-route-icon-translate: -.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}.sbb-timetable-form-field__start-route-icon{align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline);rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate)}.sbb-timetable-form-field__start-route-icon:after{--connecting-line-offset: .1875rem;--connecting-line-width: calc( (var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--connecting-line-offset) );content:"";position:absolute;inset-block-start:50%;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--connecting-line-width);margin-left:calc(var(--connecting-line-offset) * -1)}.sbb-timetable-form-field__via-route-icon{align-self:stretch;position:relative;width:var(--sbb-size-icon-ui-small);margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__via-route-icon:before{content:"";position:absolute;inset-inline-start:50%;height:100%;margin-inline-start:-.0625rem;border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color)}.sbb-timetable-form-field__via-route-icon:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:.4375rem;height:.4375rem;border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem}.sbb-form-field__space-wrapper{flex-grow:1}`;
+const u = f`:host{display:flex;--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem;--sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);--sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1)}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate: 90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate: -90deg;--sbb-timetable-form-field-route-icon-translate: -.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}.sbb-timetable-form-field__start-route-icon{align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline);rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate)}.sbb-timetable-form-field__start-route-icon:after{--connecting-line-offset: .1875rem;--connecting-line-width: calc( (var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--connecting-line-offset) );content:"";position:absolute;inset-block-start:50%;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--connecting-line-width);margin-left:calc(var(--connecting-line-offset) * -1)}.sbb-timetable-form-field__via-route-icon{align-self:stretch;position:relative;width:var(--sbb-size-icon-ui-small);margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__via-route-icon:before{content:"";position:absolute;inset-inline-start:50%;height:100%;margin-inline-start:-.0625rem;border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color)}.sbb-timetable-form-field__via-route-icon:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:.4375rem;height:.4375rem;border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem}.sbb-form-field__space-wrapper{flex-grow:1}`;
 let g = (() => {
   var t;
-  let b = [m("sbb-timetable-form-field")], o, a = [], e, s = l;
+  let n = [d("sbb-timetable-form-field")], o, a = [], e, s = l;
   return t = class extends s {
     constructor() {
       super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
     }
     connectedCallback() {
-      super.connectedCallback(), !d && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
+      super.connectedCallback(), !m && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
     }
     render() {
       return i`
@@ -24,7 +24,7 @@ let g = (() => {
     }
   }, e = t, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    n(null, o = { value: e }, b, { kind: "class", name: e.name, metadata: r }, null, a), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+    b(null, o = { value: e }, n, { kind: "class", name: e.name, metadata: r }, null, a), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), t.styles = [l.styles, u], c(e, a), e;
 })();
 export {

package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts

@@ -14,6 +14,7 @@ export declare class SbbTimetableFormSwapButtonElement extends SbbSecondaryButto
      * Search for `sbb-timetable-form-field` inputs, invert their values and dispatch the respective input and change events
      */
     private _invertFieldValues;
+    protected renderIconName(): string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-form-swap-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAM7E;;;GAGG;AACH,qBAEM,iCAAkC,SAAQ,yBAAyB;IACvE,OAAuB,MAAM,EAAE,cAAc,CAA6C;IAE1F,OAAO,CAAC,mBAAmB,CAAmC;;IAQ9C,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK5E;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAiB3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gCAAgC,EAAE,iCAAiC,CAAC;KACrE;CACF"}
+{"version":3,"file":"timetable-form-swap-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAM7E;;;GAGG;AACH,qBAEM,iCAAkC,SAAQ,yBAAyB;IACvE,OAAuB,MAAM,EAAE,cAAc,CAA6C;IAE1F,OAAO,CAAC,mBAAmB,CAAmC;;IAO9C,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK5E;;OAEG;IACH,OAAO,CAAC,kBAAkB;cAkBP,cAAc,IAAI,MAAM;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gCAAgC,EAAE,iCAAiC,CAAC;KACrE;CACF"}

package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js

@@ -4,13 +4,13 @@ import { SbbSecondaryButtonElement as m } from "../../button/secondary-button.js
 import { SbbLanguageController as v } from "../../core/controllers.js";
 import { i18nTimetableFormSwapButtonLabel as h } from "../../core/i18n.js";
 import { css as w } from "lit";
-const g = w`*,:before,:after{box-sizing:border-box}:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end: var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate: 0 -50%;--sbb-timetable-form-swap-button-z-index: 1;--sbb-timetable-form-swap-button-position: absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position, relative);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);inset-inline-end:0}`;
-let C = (() => {
+const g = w`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end: var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate: 0 -50%;--sbb-timetable-form-swap-button-z-index: 1;--sbb-timetable-form-swap-button-position: absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position, relative);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);inset-inline-end:0}`;
+let z = (() => {
   var a;
-  let u = [d("sbb-timetable-form-swap-button")], l, r = [], e, o = m;
+  let u = [d("sbb-timetable-form-swap-button")], l, i = [], e, o = m;
   return a = class extends o {
     constructor() {
-      super(), this._languageController = new v(this), this.iconName = "arrow-change-small", this.addEventListener("click", () => this._invertFieldValues());
+      super(), this._languageController = new v(this), this.addEventListener("click", () => this._invertFieldValues());
     }
     connectedCallback() {
       super.connectedCallback(), this.toggleState("timetable-form-context", !!this.closest("sbb-timetable-form"));
@@ -22,17 +22,20 @@ let C = (() => {
      * Search for `sbb-timetable-form-field` inputs, invert their values and dispatch the respective input and change events
      */
     _invertFieldValues() {
-      const t = this.closest("sbb-timetable-form"), b = Array.from(t?.querySelectorAll("sbb-timetable-form-field") || []), i = b.map((n) => n.inputElement?.value);
-      !t || i.length === 0 || i.every((n) => !n) || i.reverse().forEach((n, c) => {
+      const t = this.closest("sbb-timetable-form"), b = Array.from(t?.querySelectorAll("sbb-timetable-form-field") || []), r = b.map((n) => n.inputElement?.value);
+      !t || r.length === 0 || r.every((n) => !n) || r.reverse().forEach((n, c) => {
         const s = b[c].inputElement;
         s instanceof HTMLInputElement && (s.value = n, s.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), s.dispatchEvent(new Event("change", { bubbles: !0 })));
       });
     }
+    renderIconName() {
+      return super.renderIconName() || "arrow-change-small";
+    }
   }, e = a, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    p(null, l = { value: e }, u, { kind: "class", name: e.name, metadata: t }, null, r), e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = [m.styles, g], f(e, r), e;
+    p(null, l = { value: e }, u, { kind: "class", name: e.name, metadata: t }, null, i), e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = [m.styles, g], f(e, i), e;
 })();
 export {
-  C as SbbTimetableFormSwapButtonElement
+  z as SbbTimetableFormSwapButtonElement
 };

package/timetable-occupancy/timetable-occupancy.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy.component.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy/timetable-occupancy.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;;AAExC;;GAEG;AACH,qBAEM,4BAA6B,SAAQ,iCAA4B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,SACgB,mBAAmB,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEhE,yCAAyC;IACzC,SACgB,oBAAoB,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEjE,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}
+{"version":3,"file":"timetable-occupancy.component.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy/timetable-occupancy.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;;AAExC;;GAEG;AACH,qBAEM,4BAA6B,SAAQ,iCAA4B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,wCAAwC;IACxC,SACgB,mBAAmB,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEhE,yCAAyC;IACzC,SACgB,oBAAoB,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEjE,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}

package/timetable-occupancy/timetable-occupancy.component.js

@@ -9,10 +9,11 @@ import { customElement as E, property as w } from "lit/decorators.js";
 import { SbbLanguageController as I } from "../core/controllers.js";
 import { i18nClass as D } from "../core/i18n.js";
 import { SbbNegativeMixin as j } from "../core/mixins.js";
+import { boxSizingStyles as L } from "../core/styles.js";
 import "../screen-reader-only.js";
 import "../timetable-occupancy-icon.js";
-const L = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-timetable-occupancy-color: var(--sbb-color-2);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem}@media(min-width:52.5rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--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);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
-let J = (() => {
+const T = S`:host{display:inline-block;--sbb-timetable-occupancy-color: var(--sbb-color-2);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem}@media(min-width:64rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--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);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
+let Q = (() => {
   var l, r, n;
   let s = [E("sbb-timetable-occupancy")], t, a = [], i, h = j($), d, _ = [], g = [], O, C = [], v = [];
   return n = class extends h {
@@ -68,8 +69,8 @@ let J = (() => {
     } }, metadata: c }, _, g), y(n, null, O, { kind: "accessor", name: "secondClassOccupancy", static: !1, private: !1, access: { has: (e) => "secondClassOccupancy" in e, get: (e) => e.secondClassOccupancy, set: (e, p) => {
       e.secondClassOccupancy = p;
     } }, metadata: c }, C, v), y(null, t = { value: i }, s, { kind: "class", name: i.name, metadata: c }, null, a), i = t.value, c && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
-  })(), n.styles = L, b(i, a), i;
+  })(), n.styles = [L, T], b(i, a), i;
 })();
 export {
-  J as SbbTimetableOccupancyElement
+  Q as SbbTimetableOccupancyElement
 };

package/title/title-base.js

@@ -4,14 +4,14 @@ var d = (e) => {
 var g = (e, t, l) => t.has(e) || d("Cannot " + l);
 var c = (e, t, l) => (g(e, t, "read from private field"), l ? l.call(e) : t.get(e)), u = (e, t, l) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), h = (e, t, l, r) => (g(e, t, "write to private field"), r ? r.call(e, l) : t.set(e, l), l);
 import { __esDecorate as z, __runInitializers as n } from "tslib";
-import { css as _, LitElement as x } from "lit";
+import { css as _, LitElement as L } from "lit";
 import { property as y } from "lit/decorators.js";
-import { html as L } from "lit/static-html.js";
+import { html as x } from "lit/static-html.js";
 import { SbbElementInternalsMixin as w } from "../core/mixins.js";
-const k = _`*,:before,:after{box-sizing:border-box}:host{margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-text-color-normal: var(--sbb-title-text-color-normal-override, var(--sbb-color-3));display:block;color:var(--sbb-title-text-color-normal)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"])){--sbb-title-font-size: var(--sbb-title-font-size-level-1)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"])){--sbb-title-font-size: var(--sbb-title-font-size-level-2)}:host(:where([level="3"]:not([visual-level]),[visual-level="3"])){--sbb-title-font-size: var(--sbb-title-font-size-level-3)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"])){--sbb-title-font-size: var(--sbb-title-font-size-level-4)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"])){--sbb-title-font-size: var(--sbb-title-font-size-level-5)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"])){--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
+const k = _`:host{margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-text-color-normal: var(--sbb-title-text-color-normal-override, var(--sbb-color-3));display:block;color:var(--sbb-title-text-color-normal)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"])){--sbb-title-font-size: var(--sbb-title-font-size-level-1)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"])){--sbb-title-font-size: var(--sbb-title-font-size-level-2)}:host(:where([level="3"]:not([visual-level]),[visual-level="3"])){--sbb-title-font-size: var(--sbb-title-font-size-level-3)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"])){--sbb-title-font-size: var(--sbb-title-font-size-level-4)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"])){--sbb-title-font-size: var(--sbb-title-font-size-level-5)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"])){--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
 let M = (() => {
   var o, v, a;
-  let e = w(x), t, l = [], r = [], f, m = [], p = [];
+  let e = w(L), t, l = [], r = [], f, m = [], p = [];
   return a = class extends e {
     constructor() {
       super(...arguments);
@@ -37,7 +37,7 @@ let M = (() => {
       super.willUpdate(s), s.has("level") && (this.internals.ariaLevel = this.level);
     }
     render() {
-      return L`<slot></slot>`;
+      return x`<slot></slot>`;
     }
   }, o = new WeakMap(), v = new WeakMap(), (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;

package/toast/toast.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,OAAO,iCAAiC,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;GASG;AACH,qBAEM,eAAgB,SAAQ,oBAE7B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;OAIG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAK;IAEpC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,mBAAmB,CAGxB;;IAOa,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAQzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;;OAGG;IACI,IAAI,IAAI,IAAI;IAgBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAepB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,wBAAwB;IAIhC;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,YAAY;cAID,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAanE,OAAO,iCAAiC,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;GASG;AACH,qBAEM,eAAgB,SAAQ,oBAE7B;IACC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;;;OAIG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAK;IAEpC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,mBAAmB,CAGxB;;IAOa,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAQzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;;OAGG;IACI,IAAI,IAAI,IAAI;IAgBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAepB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,wBAAwB;IAIhC;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,YAAY;cAID,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/toast/toast.component.js

@@ -13,20 +13,21 @@ import { isZeroAnimationDuration as j, isLean as q } from "../core/dom.js";
 import { composedPathHasAttribute as B } from "../core/eventing.js";
 import { i18nCloseAlert as P } from "../core/i18n.js";
 import { SbbHydrationMixin as U, SbbReadonlyMixin as H } from "../core/mixins.js";
-import { SbbIconNameMixin as R } from "../icon.js";
+import { boxSizingStyles as R } from "../core/styles.js";
+import { SbbIconNameMixin as X } from "../icon.js";
 import "../button/transparent-button.js";
 import "../divider.js";
-const X = M`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-text-color: var(--sbb-color-3-inverted);--sbb-toast-background-color: var(--sbb-background-color-1-inverted);--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: none;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;--sbb-toast-gap: var(--sbb-spacing-fixed-2x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none}:host([data-state]:not([data-state=closed])){--sbb-toast-container-display: flex;display:block}: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}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;inset: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);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-text-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-wrapper{display:flex;align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline)}slot:not([name=icon]),.sbb-toast__close{color-scheme:only light}.sbb-toast__content{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);flex:1 1 0}.sbb-toast__close{display:flex;align-items:center}.sbb-toast__close-divider{padding-block:var(--sbb-toast-padding-block)}.sbb-toast__close-button{margin-inline:var(--sbb-spacing-responsive-xxxs)}@keyframes open{0%{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}to{visibility:visible;opacity:1;translate:0}}@keyframes close{0%{visibility:visible;opacity:1;translate:0}to{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}}`, g = /* @__PURE__ */ new Set();
-let rt = (() => {
+const F = M`:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-text-color: var(--sbb-color-3-inverted);--sbb-toast-background-color: var(--sbb-background-color-1-inverted);--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: none;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;--sbb-toast-gap: var(--sbb-spacing-fixed-2x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none}:host([data-state]:not([data-state=closed])){--sbb-toast-container-display: flex;display:block}: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}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;inset: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);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-text-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-wrapper{display:flex;align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline)}slot:not([name=icon]),.sbb-toast__close{color-scheme:only light}.sbb-toast__content{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);flex:1 1 0}.sbb-toast__close{display:flex;align-items:center}.sbb-toast__close-divider{padding-block:var(--sbb-toast-padding-block)}.sbb-toast__close-button{margin-inline:var(--sbb-spacing-responsive-xxxs)}@keyframes open{0%{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}to{visibility:visible;opacity:1;translate:0}}@keyframes close{0%{visibility:visible;opacity:1;translate:0}to{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}}`, g = /* @__PURE__ */ new Set();
+let bt = (() => {
   var c, d, p, n;
-  let i = [L("sbb-toast")], o, e = [], a, _ = R(U(H(N))), f, y = [], x = [], k, z = [], E = [], S, C = [], T = [];
+  let i = [L("sbb-toast")], o, e = [], a, _ = X(U(H(N))), f, y = [], x = [], k, z = [], S = [], E, C = [], T = [];
   return n = class extends _ {
     constructor() {
       super();
       m(this, c);
       m(this, d);
       m(this, p);
-      l(this, c, b(this, y, 0)), l(this, d, (b(this, x), b(this, z, "bottom-center"))), l(this, p, (b(this, E), b(this, C, "polite"))), this._closeTimeout = b(this, T), this._language = new $(this), this._darkModeController = new I(this, () => {
+      l(this, c, b(this, y, 0)), l(this, d, (b(this, x), b(this, z, "bottom-center"))), l(this, p, (b(this, S), b(this, C, "polite"))), this._closeTimeout = b(this, T), this._language = new $(this), this._darkModeController = new I(this, () => {
         this._syncSlottedElements(), this.requestUpdate();
       }), this.addEventListener?.("click", (t) => this._onClick(t));
     }
@@ -165,15 +166,15 @@ let rt = (() => {
     }
   }, c = new WeakMap(), d = new WeakMap(), p = new WeakMap(), a = n, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    f = [Z(), v({ type: Number })], k = [v({ reflect: !0 })], S = [v()], u(n, null, f, { kind: "accessor", name: "timeout", static: !1, private: !1, access: { has: (s) => "timeout" in s, get: (s) => s.timeout, set: (s, r) => {
+    f = [Z(), v({ type: Number })], k = [v({ reflect: !0 })], E = [v()], u(n, null, f, { kind: "accessor", name: "timeout", static: !1, private: !1, access: { has: (s) => "timeout" in s, get: (s) => s.timeout, set: (s, r) => {
       s.timeout = r;
     } }, metadata: t }, y, x), u(n, null, k, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (s) => "position" in s, get: (s) => s.position, set: (s, r) => {
       s.position = r;
-    } }, metadata: t }, z, E), u(n, null, S, { kind: "accessor", name: "politeness", static: !1, private: !1, access: { has: (s) => "politeness" in s, get: (s) => s.politeness, set: (s, r) => {
+    } }, metadata: t }, z, S), u(n, null, E, { kind: "accessor", name: "politeness", static: !1, private: !1, access: { has: (s) => "politeness" in s, get: (s) => s.politeness, set: (s, r) => {
       s.politeness = r;
     } }, metadata: t }, C, T), u(null, o = { value: a }, i, { kind: "class", name: a.name, metadata: t }, null, e), a = o.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = X, b(a, e), a;
+  })(), n.styles = [R, F], b(a, e), a;
 })();
 export {
-  rt as SbbToastElement
+  bt as SbbToastElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,qBAE1C;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAM/B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAI3B;IACD,OAAO,CAAC,cAAc,CAAkB;IAExC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAIhD;;cAQkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAatE;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YAUO,aAAa;IAK3B,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IAqCjD,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB,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.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,qBAE1C;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAM/B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAI3B;IACD,OAAO,CAAC,cAAc,CAAkB;IAExC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAIhD;;cAQkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAatE;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YAUO,aAAa;IAK3B,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IAqCjD,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB,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/toggle.component.js

@@ -10,17 +10,18 @@ import { interactivityChecker as W, isArrowKeyPressed as R, getNextElementIndex
 import { forceType as K } from "../../core/decorators.js";
 import { isLean as M } from "../../core/dom.js";
 import { SbbDisabledMixin as $, SbbFormAssociatedMixin as j, SbbElementInternalsMixin as q } from "../../core/mixins.js";
+import { boxSizingStyles as B } from "../../core/styles.js";
 import "../toggle-option.js";
-const B = F`*,:before,:after{box-sizing:border-box}:host{display:block;width:fit-content;border-radius:var(--sbb-toggle-border-radius);--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);--sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);--sbb-toggle-background-inset: .125rem;--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toggle-height: var(--sbb-size-element-m);--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);--sbb-toggle-grid-template-columns: auto auto}@media(forced-colors:active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x)}}:host([even]){width:100%;--sbb-toggle-width: 100%;--sbb-toggle-grid-template-columns: 50% 50%}:host(:disabled){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-selected-option-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-toggle-selected-option-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=s]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-height: var(--sbb-size-element-xxs)}:host(:is(:not([data-initialized]),[data-disable-animation-on-resizing])){--sbb-disable-animation-duration: 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);display:grid;grid-template-columns:var(--sbb-toggle-grid-template-columns);grid-template-areas:"start end";align-items:center;min-width:var(--sbb-toggle-min-width);width:var(--sbb-toggle-width);height:var(--sbb-toggle-height);max-width:100%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:before{content:"";display:block;grid-area:start/start/end/end;margin-inline:var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);max-width:100%;height:100%;border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:margin-inline-start,margin-inline-end}.sbb-toggle:after{content:"";grid-area:start/start/end/end;order:-1;background:var(--sbb-background-color-4);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius)}@media(forced-colors:active){.sbb-toggle:after{border:var(--sbb-border-width-1x) solid CanvasText}}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}`;
-let se = (() => {
+const N = F`:host{display:block;width:fit-content;border-radius:var(--sbb-toggle-border-radius);--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);--sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);--sbb-toggle-background-inset: .125rem;--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toggle-height: var(--sbb-size-element-m);--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);--sbb-toggle-grid-template-columns: auto auto}@media(forced-colors:active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x)}}:host([even]){width:100%;--sbb-toggle-width: 100%;--sbb-toggle-grid-template-columns: 50% 50%}:host(:disabled){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-selected-option-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-toggle-selected-option-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=s]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-height: var(--sbb-size-element-xxs)}:host(:is(:not([data-initialized]),[data-disable-animation-on-resizing])){--sbb-disable-animation-duration: 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);display:grid;grid-template-columns:var(--sbb-toggle-grid-template-columns);grid-template-areas:"start end";align-items:center;min-width:var(--sbb-toggle-min-width);width:var(--sbb-toggle-width);height:var(--sbb-toggle-height);max-width:100%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:before{content:"";display:block;grid-area:start/start/end/end;margin-inline:var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);max-width:100%;height:100%;border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:margin-inline-start,margin-inline-end}.sbb-toggle:after{content:"";grid-area:start/start/end/end;order:-1;background:var(--sbb-background-color-4);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius)}@media(forced-colors:active){.sbb-toggle:after{border:var(--sbb-border-width-1x) solid CanvasText}}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}`;
+let oe = (() => {
   var b, d, r;
-  let i = [L("sbb-toggle")], o, a = [], n, _ = $(j(q(P))), y = [], x, k = [], w = [], z, D = [], E = [], S;
+  let i = [L("sbb-toggle")], o, a = [], n, _ = $(j(q(P))), y = [], x, k = [], w = [], z, S = [], D = [], E;
   return r = class extends _ {
     constructor() {
       super();
       v(this, b);
       v(this, d);
-      c(this, b, (g(this, y), g(this, k, !1))), c(this, d, (g(this, w), g(this, D, M() ? "s" : "m"))), this._fallbackValue = (g(this, E), null), this.addEventListener?.("input", () => this._handleInput(), { passive: !0 }), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+      c(this, b, (g(this, y), g(this, k, !1))), c(this, d, (g(this, w), g(this, S, M() ? "s" : "m"))), this._fallbackValue = (g(this, D), null), this.addEventListener?.("input", () => this._handleInput(), { passive: !0 }), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
     }
     /**
      * If true, set the width of the component fixed; if false,
@@ -128,17 +129,17 @@ let se = (() => {
     }
   }, b = new WeakMap(), d = new WeakMap(), n = r, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    x = [K(), f({ reflect: !0, type: Boolean })], z = [f({ reflect: !0 })], S = [f()], u(r, null, x, { kind: "accessor", name: "even", static: !1, private: !1, access: { has: (t) => "even" in t, get: (t) => t.even, set: (t, s) => {
+    x = [K(), f({ reflect: !0, type: Boolean })], z = [f({ reflect: !0 })], E = [f()], u(r, null, x, { kind: "accessor", name: "even", static: !1, private: !1, access: { has: (t) => "even" in t, get: (t) => t.even, set: (t, s) => {
       t.even = s;
     } }, metadata: e }, k, w), u(r, null, z, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
       t.size = s;
-    } }, metadata: e }, D, E), u(r, null, S, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, s) => {
+    } }, metadata: e }, S, D), u(r, null, E, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, s) => {
       t.value = s;
     } }, metadata: e }, null, y), u(null, o = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = o.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.role = "radiogroup", r.styles = B, r.events = {
+  })(), r.role = "radiogroup", r.styles = [B, N], r.events = {
     change: "change"
   }, g(n, a), n;
 })();
 export {
-  se as SbbToggleElement
+  oe as SbbToggleElement
 };

package/toggle/toggle-option/toggle-option.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAWvC;;;;;;GAMG;AACH,qBAGM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,2BAEhD;IACC,gBAAgC,IAAI,WAAW;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAC5C,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8BAA8B;IAC9B,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,OAAO,CAAC,OAAO,CAAiC;;IAqBhC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"toggle-option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAYvC;;;;;;GAMG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,2BAEhD;IACC,gBAAgC,IAAI,WAAW;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,4CAA4C;IAC5C,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8BAA8B;IAC9B,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,OAAO,CAAC,OAAO,CAAiC;;IAqBhC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/toggle/toggle-option/toggle-option.component.js

@@ -1,26 +1,27 @@
-var y = (t) => {
+var x = (t) => {
   throw TypeError(t);
 };
-var z = (t, i, s) => i.has(t) || y("Cannot " + s);
-var d = (t, i, s) => (z(t, i, "read from private field"), s ? s.call(t) : i.get(t)), g = (t, i, s) => i.has(t) ? y("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), c = (t, i, s, l) => (z(t, i, "write to private field"), l ? l.call(t, s) : i.set(t, s), s);
+var z = (t, i, s) => i.has(t) || x("Cannot " + s);
+var d = (t, i, s) => (z(t, i, "read from private field"), s ? s.call(t) : i.get(t)), g = (t, i, s) => i.has(t) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), c = (t, i, s, l) => (z(t, i, "write to private field"), l ? l.call(t, s) : i.set(t, s), s);
 import { __esDecorate as p, __runInitializers as b } from "tslib";
 import { ResizeController as I } from "@lit-labs/observers/resize-controller.js";
 import { css as S, LitElement as C, html as E } from "lit";
 import { customElement as O, property as w } from "lit/decorators.js";
-import { slotState as T, forceType as D } from "../../core/decorators.js";
-import { setOrRemoveAttribute as P } from "../../core/dom.js";
-import { SbbDisabledMixin as U, SbbElementInternalsMixin as j } from "../../core/mixins.js";
+import { forceType as T } from "../../core/decorators.js";
+import { setOrRemoveAttribute as D } from "../../core/dom.js";
+import { SbbDisabledMixin as P, SbbElementInternalsMixin as U } from "../../core/mixins.js";
+import { boxSizingStyles as j } from "../../core/styles.js";
 import { SbbIconNameMixin as L } from "../../icon.js";
-const M = S`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-option-cursor: pointer;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);display:inline-block;overflow:hidden;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-2)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-toggle-option{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;display:flex;justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-1x);height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color);cursor:var(--sbb-toggle-option-cursor)}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}`;
-let K = (() => {
-  var n, r, a;
-  let t = [O("sbb-toggle-option"), T()], i, s = [], l, u = U(L(j(C))), f, m = [], v = [], _, k = [], x = [];
+const M = S`:host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);display:inline-block;overflow:hidden;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-2)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-toggle-option{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;display:flex;justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-1x);height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color);cursor:var(--sbb-toggle-option-cursor)}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}`;
+let Q = (() => {
+  var r, n, a;
+  let t = [O("sbb-toggle-option")], i, s = [], l, u = P(L(U(C))), m, f = [], v = [], _, k = [], y = [];
   return a = class extends u {
     constructor() {
       super();
-      g(this, n);
       g(this, r);
-      c(this, n, b(this, m, !1)), c(this, r, (b(this, v), b(this, k, null))), this._toggle = (b(this, x), null), this.addEventListener?.("input", () => this._handleInput()), this.addEventListener?.("click", () => {
+      g(this, n);
+      c(this, r, b(this, f, !1)), c(this, n, (b(this, v), b(this, k, null))), this._toggle = (b(this, y), null), this.addEventListener?.("input", () => this._handleInput()), this.addEventListener?.("click", () => {
         !this.disabled && !this.checked && this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }));
       }), this.addController(new I(this, {
         skipInitial: !0,
@@ -29,17 +30,17 @@ let K = (() => {
     }
     /** Whether the toggle-option is checked. */
     get checked() {
-      return d(this, n);
+      return d(this, r);
     }
     set checked(e) {
-      c(this, n, e);
+      c(this, r, e);
     }
     /** Value of toggle-option. */
     get value() {
-      return d(this, r);
+      return d(this, n);
     }
     set value(e) {
-      c(this, r, e);
+      c(this, n, e);
     }
     connectedCallback() {
       super.connectedCallback(), this._toggle = this.closest?.("sbb-toggle") ?? null, this._verifyTabindex(), this._toggle?.updatePillPosition?.(!0);
@@ -57,7 +58,7 @@ let K = (() => {
       this._toggle?.options.filter((e) => e !== this).forEach((e) => e.checked = !1), this._toggle?.statusChanged();
     }
     _handleDisabledChange() {
-      P(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();
+      D(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();
     }
     _handleInput() {
       this.disabled || (this.checked = !0, this._uncheckOtherOptions());
@@ -75,15 +76,15 @@ let K = (() => {
       </div>
     `;
     }
-  }, n = new WeakMap(), r = new WeakMap(), l = a, (() => {
+  }, r = new WeakMap(), n = new WeakMap(), l = a, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    f = [D(), w({ reflect: !0, type: Boolean })], _ = [w()], p(a, null, f, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (o) => "checked" in o, get: (o) => o.checked, set: (o, h) => {
+    m = [T(), w({ reflect: !0, type: Boolean })], _ = [w()], p(a, null, m, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (o) => "checked" in o, get: (o) => o.checked, set: (o, h) => {
       o.checked = h;
-    } }, metadata: e }, m, v), p(a, null, _, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (o) => "value" in o, get: (o) => o.value, set: (o, h) => {
+    } }, metadata: e }, f, v), p(a, null, _, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (o) => "value" in o, get: (o) => o.value, set: (o, h) => {
       o.value = h;
-    } }, metadata: e }, k, x), p(null, i = { value: l }, t, { kind: "class", name: l.name, metadata: e }, null, s), l = i.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.role = "radio", a.styles = M, b(l, s), l;
+    } }, metadata: e }, k, y), p(null, i = { value: l }, t, { kind: "class", name: l.name, metadata: e }, null, s), l = i.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.role = "radio", a.styles = [j, M], b(l, s), l;
 })();
 export {
-  K as SbbToggleOptionElement
+  Q as SbbToggleOptionElement
 };

package/toggle-check/toggle-check.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, PropertyDeclaration, TemplateResult, LitElement } from 'lit';
-declare const SbbToggleCheckElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedCheckboxMixinType> & import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof LitElement;
+declare const SbbToggleCheckElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedCheckboxMixinType> & typeof LitElement;
 /**
  * It displays a toggle checkbox.
  *
@@ -18,11 +18,10 @@ export declare class SbbToggleCheckElement<T = string> extends SbbToggleCheckEle
      * @default 's' / 'xs' (lean)
      */
     accessor size: 'xs' | 's' | 'm';
-    /** The svg name for the true state - default -> 'tick-small' */
-    accessor iconName: string;
     /** The label position relative to the toggle. Defaults to 'after' */
     accessor labelPosition: 'before' | 'after';
     requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
+    protected renderIconName(): string;
     protected render(): TemplateResult;
 }
 declare global {

package/toggle-check/toggle-check.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-check.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC/E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAUvC;;;;;;;;GAQG;AACH,qBAGM,qBAAqB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iCAAiC;IACjC,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IACH,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAyB;IAE5F,gEAAgE;IAChE,SAEyB,QAAQ,EAAE,MAAM,CAAgB;IAEzD,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;IAE5C,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cASY,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"toggle-check.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC/E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAUvC;;;;;;;;GAQG;AACH,qBAEM,qBAAqB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,iCAAiC;IACjC,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IACH,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAyB;IAE5F,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;IAE5C,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cASY,cAAc,IAAI,MAAM;cAIxB,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}