@sbb-esta/lyne-elements 3.2.0 → 3.3.2

package/time-input/time-input.component.js

@@ -1,21 +1,22 @@
-import { __esDecorate as c, __runInitializers as h } from "tslib";
+import { __esDecorate as h, __runInitializers as c } from "tslib";
 import { css as f, LitElement as p, isServer as v } from "lit";
 import { customElement as g, property as b } from "lit/decorators.js";
 import { sbbLiveAnnouncer as m } from "../core/a11y.js";
 import { SbbLanguageController as A } from "../core/controllers.js";
-import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as D, i18nTimeMaxLength as E } from "../core/i18n.js";
-import { SbbFormAssociatedInputMixin as V } from "../core/mixins.js";
-const w = f`*,:before,:after{box-sizing:border-box}:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media (forced-colors: active){:host{color:FieldText}}:host(:disabled){cursor:default}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}@media (forced-colors: active){:host(:empty):after{color:GrayText}}`, x = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, S = /^([0-9]{1,2})([0-9]{2})$/, C = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let M = (() => {
+import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as E, i18nTimeMaxLength as D } from "../core/i18n.js";
+import { SbbFormAssociatedInputMixin as w } from "../core/mixins.js";
+import { SbbFormFieldControlEvent as V } from "../form-field.js";
+const S = f`*,:before,:after{box-sizing:border-box}:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media (forced-colors: active){:host{color:FieldText}}:host(:disabled){cursor:default}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}@media (forced-colors: active){:host(:empty):after{color:GrayText}}`, x = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, C = /^([0-9]{1,2})([0-9]{2})$/, F = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let G = (() => {
   var a;
-  let _ = [g("sbb-time-input")], r, l = [], s, n = V(p), u = [], o;
+  let _ = [g("sbb-time-input")], r, l = [], s, n = w(p), o = [], u;
   return a = class extends n {
     /**
      * The value of the time input. Reflects the current text value
      * of this input.
      */
     set value(e) {
-      e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !v && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+      e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !v && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e, this._dispatchFormFieldChange();
     }
     get value() {
       return super.value ?? "";
@@ -39,11 +40,15 @@ let M = (() => {
       } else
         return null;
     }
+    /** Whether the input is empty. */
+    get empty() {
+      return !this.value || this.value.trim() === "";
+    }
     constructor() {
-      super(), this._valueAsTime = h(this, u), this._language = new A(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => m.announce(T(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
+      super(), this._valueAsTime = c(this, o), this._language = new A(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => m.announce(T(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
     }
     connectedCallback() {
-      super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
+      super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM", this._dispatchFormFieldChange();
     }
     disconnectedCallback() {
       super.disconnectedCallback();
@@ -61,7 +66,7 @@ let M = (() => {
       const t = e?.trim();
       if (!t)
         return null;
-      const i = t.match(S) ?? t.match(C);
+      const i = t.match(C) ?? t.match(F);
       return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
     }
     _updateValueDateFormat() {
@@ -84,7 +89,7 @@ let M = (() => {
       return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
     }
     validate() {
-      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", D[this.language.current]) : this.setValidityFlag("badInput", y[this.language.current]) : this._removeValidityErrors();
+      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", E[this.language.current]) : this.setValidityFlag("badInput", y[this.language.current]) : this._removeValidityErrors();
     }
     _removeValidityErrors() {
       ["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
@@ -109,19 +114,22 @@ let M = (() => {
         "PageDown",
         "Delete"
       ];
-      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || x.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(E[this._language.current]));
+      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || x.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(D[this._language.current]));
     }
     _hasSelection() {
       const e = window.getSelection()?.getRangeAt(0);
       return !!e && e.startOffset !== e.endOffset;
     }
+    _dispatchFormFieldChange() {
+      this.closest?.("sbb-form-field")?.dispatchEvent(new V(this));
+    }
   }, s = a, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    o = [b({ attribute: !1 })], c(a, null, o, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, i) => {
+    u = [b({ attribute: !1 })], h(a, null, u, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, i) => {
       t.valueAsDate = i;
-    } }, metadata: e }, null, u), c(null, r = { value: s }, _, { kind: "class", name: s.name, metadata: e }, null, l), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = w, h(s, l), s;
+    } }, metadata: e }, null, o), h(null, r = { value: s }, _, { kind: "class", name: s.name, metadata: e }, null, l), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = S, c(s, l), s;
 })();
 export {
-  M as SbbTimeInputElement
+  G as SbbTimeInputElement
 };

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+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;
 /**
  * It displays a toggle checkbox.
@@ -22,7 +22,7 @@ export declare class SbbToggleCheckElement<T = string> extends SbbToggleCheckEle
     accessor iconName: string;
     /** The label position relative to the toggle. Defaults to 'after' */
     accessor labelPosition: 'before' | 'after';
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     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,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,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;cAEzC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,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,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"}

package/toggle-check/toggle-check.component.js

@@ -3,25 +3,25 @@ var E = (o) => {
 };
 var D = (o, s, c) => s.has(o) || E("Cannot " + c);
 var d = (o, s, c) => (D(o, s, "read from private field"), c ? c.call(o) : s.get(o)), k = (o, s, c) => s.has(o) ? E("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(o) : s.set(o, c), v = (o, s, c, l) => (D(o, s, "write to private field"), l ? l.call(o, c) : s.set(o, c), c);
-import { __esDecorate as u, __runInitializers as r } from "tslib";
-import { css as U, LitElement as j, html as A } from "lit";
-import { customElement as F, property as m } from "lit/decorators.js";
-import { slotState as G, forceType as H } from "../core/decorators.js";
-import { isLean as L } from "../core/dom.js";
-import { SbbFormAssociatedCheckboxMixin as M } from "../core/mixins.js";
-import { SbbIconNameMixin as O } from "../icon.js";
-const $ = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-toggle-check-checked-color: var(--sbb-color-red);--sbb-toggle-check-background-color: var(--sbb-color-cloud);--sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-icon-opacity: 0;--sbb-toggle-check-circle-background-color: var(--sbb-color-white);--sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);--sbb-toggle-check-circle-border-style: solid;--sbb-toggle-check-circle-diameter: 1.75rem;--sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);--sbb-toggle-check-circle-transform: translate(0, -50%);--sbb-toggle-check-height: 1.5rem;--sbb-toggle-check-width: calc(2 * var(--sbb-toggle-check-height));--sbb-toggle-check-cursor: pointer;--sbb-toggle-check-flex-direction: row-reverse;--sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);--sbb-toggle-check-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media (forced-colors: active){:host{--sbb-toggle-check-background-color: CanvasText;--sbb-toggle-check-circle-background-color: Canvas}}:host([size=m]){--sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-body-text))}:host([data-checked]){--sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);--sbb-toggle-check-icon-opacity: 1;--sbb-toggle-check-circle-transform: translate( calc(100% - 2 * (100% - .5 * var(--sbb-toggle-check-width))), -50% )}@media (forced-colors: active){:host([data-checked]){--sbb-toggle-check-icon-color: Highlight;--sbb-toggle-check-background-color: Highlight}}:host(:disabled){--sbb-toggle-check-background-color: var(--sbb-color-cloud);--sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);--sbb-toggle-check-circle-border-style: dashed;--sbb-toggle-check-circle-background-color: var(--sbb-color-milk);--sbb-toggle-check-icon-color: var(--sbb-color-granite);--sbb-toggle-check-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-toggle-check-icon-color: GrayText;--sbb-toggle-check-background-color: GrayText;--sbb-toggle-check-circle-border-style: solid}}:host([data-checked]:disabled){--sbb-toggle-check-circle-background-color: var(--sbb-color-white)}:host([label-position=before]){--sbb-toggle-check-flex-direction: row}.sbb-toggle-check{position:relative;display:flex;color:var(--sbb-color-charcoal);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--sbb-toggle-check-cursor)}.sbb-toggle-check:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:focus-visible) .sbb-toggle-check{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-toggle-check__container{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;flex-direction:var(--sbb-toggle-check-flex-direction);gap:var(--sbb-toggle-check-gap);align-items:start;width:100%}:host([size=m]) .sbb-toggle-check__container{--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)}:host([size=xs]) .sbb-toggle-check__container{--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)}.sbb-toggle-check__label{flex-grow:1;padding-block-start:calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-body-text) * 1em) / 2)}:host(:not([data-slot-names~=unnamed])) .sbb-toggle-check__label{display:none}.sbb-toggle-check__track{display:inline-block;position:relative;min-width:var(--sbb-toggle-check-width);height:var(--sbb-toggle-check-height);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-toggle-check-background-color);margin-block:calc((var(--sbb-toggle-check-overall-height) - var(--sbb-toggle-check-height)) / 2)}.sbb-toggle-check__circle{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);position:absolute;top:50%;transform:translateY(-50%);width:var(--sbb-toggle-check-circle-diameter);height:var(--sbb-toggle-check-circle-diameter);border:var(--sbb-border-width-1x) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color);border-radius:50%;background-color:var(--sbb-toggle-check-circle-background-color);color:var(--sbb-toggle-check-icon-color);will-change:transform;transform:var(--sbb-toggle-check-circle-transform);transition:transform ease var(--sbb-toggle-check-animation-duration)}.sbb-toggle-check__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);opacity:var(--sbb-toggle-check-icon-opacity);transition:opacity ease var(--sbb-toggle-check-animation-duration)}`;
+import { __esDecorate as u, __runInitializers as i } from "tslib";
+import { css as U, LitElement as j, html as q } from "lit";
+import { customElement as A, property as f } from "lit/decorators.js";
+import { slotState as F, forceType as G } from "../core/decorators.js";
+import { isLean as H } from "../core/dom.js";
+import { SbbFormAssociatedCheckboxMixin as L } from "../core/mixins.js";
+import { SbbIconNameMixin as M } from "../icon.js";
+const O = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-toggle-check-checked-color: var(--sbb-color-red);--sbb-toggle-check-background-color: var(--sbb-color-cloud);--sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-icon-opacity: 0;--sbb-toggle-check-circle-background-color: var(--sbb-color-white);--sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);--sbb-toggle-check-circle-border-style: solid;--sbb-toggle-check-circle-diameter: 1.75rem;--sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);--sbb-toggle-check-circle-transform: translate(0, -50%);--sbb-toggle-check-height: 1.5rem;--sbb-toggle-check-width: calc(2 * var(--sbb-toggle-check-height));--sbb-toggle-check-cursor: pointer;--sbb-toggle-check-flex-direction: row-reverse;--sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);--sbb-toggle-check-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media (forced-colors: active){:host{--sbb-toggle-check-background-color: CanvasText;--sbb-toggle-check-circle-background-color: Canvas}}:host([size=m]){--sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-body-text))}:host([data-checked]){--sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);--sbb-toggle-check-icon-opacity: 1;--sbb-toggle-check-circle-transform: translate( calc(100% - 2 * (100% - .5 * var(--sbb-toggle-check-width))), -50% )}@media (forced-colors: active){:host([data-checked]){--sbb-toggle-check-icon-color: Highlight;--sbb-toggle-check-background-color: Highlight}}:host(:disabled){--sbb-toggle-check-background-color: var(--sbb-color-cloud);--sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);--sbb-toggle-check-circle-border-style: dashed;--sbb-toggle-check-circle-background-color: var(--sbb-color-milk);--sbb-toggle-check-icon-color: var(--sbb-color-granite);--sbb-toggle-check-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-toggle-check-icon-color: GrayText;--sbb-toggle-check-background-color: GrayText;--sbb-toggle-check-circle-border-style: solid}}:host([data-checked]:disabled){--sbb-toggle-check-circle-background-color: var(--sbb-color-white)}:host([label-position=before]){--sbb-toggle-check-flex-direction: row}.sbb-toggle-check{position:relative;display:flex;color:var(--sbb-color-charcoal);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--sbb-toggle-check-cursor)}.sbb-toggle-check:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:focus-visible) .sbb-toggle-check{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-toggle-check__container{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;flex-direction:var(--sbb-toggle-check-flex-direction);gap:var(--sbb-toggle-check-gap);align-items:start;width:100%}:host([size=m]) .sbb-toggle-check__container{--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)}:host([size=xs]) .sbb-toggle-check__container{--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)}.sbb-toggle-check__label{flex-grow:1;padding-block-start:calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-body-text) * 1em) / 2)}:host(:not([data-slot-names~=unnamed])) .sbb-toggle-check__label{display:none}.sbb-toggle-check__track{display:inline-block;position:relative;min-width:var(--sbb-toggle-check-width);height:var(--sbb-toggle-check-height);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-toggle-check-background-color);margin-block:calc((var(--sbb-toggle-check-overall-height) - var(--sbb-toggle-check-height)) / 2)}.sbb-toggle-check__circle{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);position:absolute;top:50%;transform:translateY(-50%);width:var(--sbb-toggle-check-circle-diameter);height:var(--sbb-toggle-check-circle-diameter);border:var(--sbb-border-width-1x) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color);border-radius:50%;background-color:var(--sbb-toggle-check-circle-background-color);color:var(--sbb-toggle-check-icon-color);will-change:transform;transform:var(--sbb-toggle-check-circle-transform);transition:transform ease var(--sbb-toggle-check-animation-duration)}.sbb-toggle-check__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);opacity:var(--sbb-toggle-check-icon-opacity);transition:opacity ease var(--sbb-toggle-check-animation-duration)}`;
 let X = (() => {
   var b, n, g, h, a;
-  let o = [F("sbb-toggle-check"), G()], s, c = [], l, f = M(O(j)), p, _ = [], y = [], x, w = [], z = [], N, P = [], S = [], I, T = [], C = [];
-  return a = class extends f {
+  let o = [A("sbb-toggle-check"), F()], s, c = [], l, m = L(M(j)), p, _ = [], y = [], x, w = [], z = [], N, P = [], S = [], I, T = [], C = [];
+  return a = class extends m {
     constructor() {
       super(...arguments);
-      k(this, b, r(this, _, null));
-      k(this, n, (r(this, y), r(this, w, L() ? "xs" : "s")));
-      k(this, g, (r(this, z), r(this, P, "tick-small")));
-      k(this, h, (r(this, S), r(this, T, "after")));
-      r(this, C);
+      k(this, b, i(this, _, null));
+      k(this, n, (i(this, y), i(this, w, H() ? "xs" : "s")));
+      k(this, g, (i(this, z), i(this, P, "tick-small")));
+      k(this, h, (i(this, S), i(this, T, "after")));
+      i(this, C);
     }
     /** Value of the form element. */
     get value() {
@@ -54,11 +54,11 @@ let X = (() => {
     set labelPosition(t) {
       v(this, h, t);
     }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("checked") && (this.internals.ariaChecked = `${this.checked}`, this.toggleAttribute("data-checked", this.checked));
+    requestUpdate(t, e, r) {
+      super.requestUpdate(t, e, r), t === "checked" && (this.internals.ariaChecked = `${this.checked}`, this.toggleAttribute("data-checked", this.checked));
     }
     render() {
-      return A`
+      return q`
       <span class="sbb-toggle-check">
         <span class="sbb-toggle-check__container">
           <span class="sbb-toggle-check__label">
@@ -74,17 +74,17 @@ let X = (() => {
     `;
     }
   }, b = new WeakMap(), n = new WeakMap(), g = new WeakMap(), h = new WeakMap(), l = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    p = [m()], x = [m({ reflect: !0 })], N = [H(), m({ attribute: "icon-name" })], I = [m({ attribute: "label-position", reflect: !0 })], u(a, null, p, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, i) => {
-      e.value = i;
-    } }, metadata: t }, _, y), u(a, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
-      e.size = i;
-    } }, metadata: t }, w, z), u(a, null, N, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (e) => "iconName" in e, get: (e) => e.iconName, set: (e, i) => {
-      e.iconName = i;
-    } }, metadata: t }, P, S), u(a, null, I, { kind: "accessor", name: "labelPosition", static: !1, private: !1, access: { has: (e) => "labelPosition" in e, get: (e) => e.labelPosition, set: (e, i) => {
-      e.labelPosition = i;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    p = [f()], x = [f({ reflect: !0 })], N = [G(), f({ attribute: "icon-name" })], I = [f({ attribute: "label-position", reflect: !0 })], u(a, null, p, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, r) => {
+      e.value = r;
+    } }, metadata: t }, _, y), u(a, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, r) => {
+      e.size = r;
+    } }, metadata: t }, w, z), u(a, null, N, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (e) => "iconName" in e, get: (e) => e.iconName, set: (e, r) => {
+      e.iconName = r;
+    } }, metadata: t }, P, S), u(a, null, I, { kind: "accessor", name: "labelPosition", static: !1, private: !1, access: { has: (e) => "labelPosition" in e, get: (e) => e.labelPosition, set: (e, r) => {
+      e.labelPosition = r;
     } }, metadata: t }, T, C), u(null, s = { value: l }, o, { kind: "class", name: l.name, metadata: t }, null, c), l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = $, r(l, c), l;
+  })(), a.styles = O, i(l, c), l;
 })();
 export {
   X as SbbToggleCheckElement