@sbb-esta/lyne-elements 2.7.1 → 2.8.0

package/table/table-wrapper/table-wrapper.js

@@ -1,50 +1,72 @@
-import { __esDecorate as i, __runInitializers as p } from "tslib";
-import { ResizeController as n } from "@lit-labs/observers/resize-controller.js";
-import { css as h, LitElement as d, html as u } from "lit";
-import { customElement as f } from "lit/decorators.js";
-import { SbbNegativeMixin as w } from "../../core/mixins.js";
-const v = h`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{height:100%;overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host(:not(.sbb-table-wrapper-offset-none)) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
-let S = (() => {
-  var b;
-  let o = [f("sbb-table-wrapper")], a, e = [], t, l = w(d);
-  return b = class extends l {
+var h = (t) => {
+  throw TypeError(t);
+};
+var d = (t, s, l) => s.has(t) || h("Cannot " + l);
+var p = (t, s, l) => (d(t, s, "read from private field"), l ? l.call(t) : s.get(t)), m = (t, s, l) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, l), v = (t, s, l, i) => (d(t, s, "write to private field"), i ? i.call(t, l) : s.set(t, l), l);
+import { __esDecorate as _, __runInitializers as c } from "tslib";
+import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
+import { css as w, LitElement as y, isServer as g, html as x } from "lit";
+import { customElement as L, property as z } from "lit/decorators.js";
+import { forceType as C } from "../../core/decorators.js";
+import { SbbNegativeMixin as O } from "../../core/mixins.js";
+const E = w`*,:before,:after{box-sizing:border-box}:host{display:block;overflow:auto}:host(:not(.sbb-table-wrapper-offset-none)){padding-bottom:var(--sbb-spacing-fixed-1x)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(.sbb-table){width:100%}`;
+let B = (() => {
+  var o, r;
+  let t = [L("sbb-table-wrapper")], s, l = [], i, b = O(y), n, f = [], u = [];
+  return r = class extends b {
     constructor() {
-      super(...arguments), this._resizeObserver = new n(this, {
-        target: null,
+      var a;
+      super();
+      m(this, o, c(this, f, !1));
+      c(this, u);
+      const e = this.attachInternals();
+      e.role = "section", this.addController(new S(this, {
         skipInitial: !0,
         callback: () => this._checkHorizontalScrollbarOffset()
+      })), (a = this.addEventListener) == null || a.call(this, "scroll", () => this._checkHorizontalScrollbarOffset(), {
+        passive: !0
       });
     }
-    firstUpdated(r) {
-      super.firstUpdated(r), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._tableWrapper.addEventListener("scroll", () => this._checkHorizontalScrollbarOffset(), {
-        passive: !0
-      }), this._resizeObserver.observe(this._tableWrapper);
+    /** Whether the table wrapper is focusable. */
+    get focusable() {
+      return p(this, o);
+    }
+    set focusable(e) {
+      v(this, o, e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._updateScrollbarClass();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), e.has("negative") && this._updateScrollbarClass();
+    }
+    _updateScrollbarClass() {
+      g || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
     }
     /**
      *  Calculates whether the table is horizontally scrolled and adds the
      *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
      */
     _checkHorizontalScrollbarOffset() {
-      const r = this._calculateScrollOffset();
-      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${r}`);
+      const e = this._calculateScrollOffset();
+      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${e}`);
     }
     _calculateScrollOffset() {
-      const r = this._tableWrapper;
-      if (r.scrollWidth === r.offsetWidth)
+      if (this.scrollWidth === this.offsetWidth)
         return "none";
-      const c = r.scrollLeft === 0, s = r.scrollWidth - r.scrollLeft - r.offsetWidth <= 1;
-      return c ? s ? "none" : "right" : s ? "left" : "both";
+      const e = this.scrollLeft === 0, a = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+      return e ? a ? "none" : "right" : a ? "left" : "both";
     }
     render() {
-      return u`<div class="sbb-table-wrapper">
-      <slot></slot>
-    </div>`;
-    }
-  }, t = b, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    i(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: r }, null, e), t = a.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), b.styles = v, p(t, e), t;
+      return x`<slot></slot>`;
+    }
+  }, o = new WeakMap(), i = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    n = [C(), z({ reflect: !0, type: Boolean })], _(r, null, n, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (a) => "focusable" in a, get: (a) => a.focusable, set: (a, k) => {
+      a.focusable = k;
+    } }, metadata: e }, f, u), _(null, s = { value: i }, t, { kind: "class", name: i.name, metadata: e }, null, l), i = s.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = E, c(i, l), i;
 })();
 export {
-  S as SbbTableWrapperElement
+  B as SbbTableWrapperElement
 };

package/toggle/toggle/toggle.d.ts

@@ -33,7 +33,6 @@ export declare class SbbToggleElement extends SbbToggleElement_base {
     /** The child instances of sbb-toggle-option as an array. */
     get options(): SbbToggleOptionElement[];
     private _loaded;
-    private _toggleResizeObserver;
     /** Emits whenever the toggle value changes. */
     private _change;
     constructor();

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAiB,SAAQ,qBAAoD;IACjF,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,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAM7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAIlC;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAI1B;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;;IAWa,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cAO7C,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7F;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;OAEG;IACI,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAIP;;;OAGG;IACI,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IA6BjD,SAAS,CAAC,eAAe,IAAI,IAAI;IAIjC,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAiB,SAAQ,qBAAoD;IACjF,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,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAM7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAIlC;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IAEjC,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;;IAWa,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cAO7C,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7F;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;OAEG;IACI,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAIP;;;OAGG;IACI,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IAmCjD,SAAS,CAAC,eAAe,IAAI,IAAI;IAIjC,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAKpB,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.js

@@ -1,36 +1,31 @@
-var O = (s) => {
-  throw TypeError(s);
+var A = (i) => {
+  throw TypeError(i);
 };
-var P = (s, o, r) => o.has(s) || O("Cannot " + r);
-var v = (s, o, r) => (P(s, o, "read from private field"), r ? r.call(s) : o.get(s)), f = (s, o, r) => o.has(s) ? O("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, r), h = (s, o, r, n) => (P(s, o, "write to private field"), n ? n.call(s, r) : o.set(s, r), r);
-import { __esDecorate as c, __runInitializers as g } from "tslib";
-import { ResizeController as L } from "@lit-labs/observers/resize-controller.js";
-import { css as U, LitElement as V, isServer as A, html as W } from "lit";
-import { customElement as K, property as _ } from "lit/decorators.js";
-import { interactivityChecker as $, isArrowKeyPressed as j, getNextElementIndex as q } from "../../core/a11y.js";
-import { forceType as M } from "../../core/decorators.js";
-import { isLean as B } from "../../core/dom.js";
-import { EventEmitter as G } from "../../core/eventing.js";
-import { SbbDisabledMixin as H, SbbFormAssociatedMixin as N } from "../../core/mixins.js";
+var O = (i, o, r) => o.has(i) || A("Cannot " + r);
+var v = (i, o, r) => (O(i, o, "read from private field"), r ? r.call(i) : o.get(i)), f = (i, o, r) => o.has(i) ? A("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(i) : o.set(i, r), c = (i, o, r, n) => (O(i, o, "write to private field"), n ? n.call(i, r) : o.set(i, r), r);
+import { __esDecorate as u, __runInitializers as g } from "tslib";
+import { css as R, LitElement as U, isServer as P, html as V } from "lit";
+import { customElement as W, property as _ } from "lit/decorators.js";
+import { interactivityChecker as K, isArrowKeyPressed as $, getNextElementIndex as j } from "../../core/a11y.js";
+import { forceType as q } from "../../core/decorators.js";
+import { isLean as M } from "../../core/dom.js";
+import { EventEmitter as B } from "../../core/eventing.js";
+import { SbbDisabledMixin as G, SbbFormAssociatedMixin as H } from "../../core/mixins.js";
 import "../toggle-option.js";
-const J = U`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host(:disabled){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host(:disabled){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
-let ne = (() => {
+const N = R`*,: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-color-smoke);--sbb-toggle-selected-option-background-color: var(--sbb-color-white);--sbb-toggle-selected-option-border-offset: .125rem;--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toggle-height: var(--sbb-size-element-xxs);--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);--sbb-toggle-grid-template-columns: auto auto;--_sbb-toggle-height: calc( var(--sbb-toggle-height) - 2 * var(--sbb-toggle-selected-option-border-offset) )}@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-style: dashed}@media (forced-colors: active){:host(:disabled){--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: var(--sbb-size-element-m)}: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);max-width:100%;height:var(--_sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:before{grid-area:start/start/end/end;padding-inline:var(--sbb-toggle-padding-inline);margin-inline:var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);display:block;background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);max-width:100%;height:100%;box-shadow:0 0 0 var(--sbb-toggle-selected-option-border-offset) var(--sbb-toggle-selected-option-background-color);outline:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);outline-offset:calc(var(--sbb-toggle-selected-option-border-offset) - var(--sbb-toggle-selected-option-border-width));transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:margin-inline-start,margin-inline-end}:host([data-initialized]) .sbb-toggle:before{content:""}@media (forced-colors: active){.sbb-toggle{outline: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 re = (() => {
   var b, d, l;
-  let s = [K("sbb-toggle")], o, r = [], n, y = H(N(V)), w = [], x, k = [], z = [], C, E = [], S = [], D;
-  var u = (l = class extends y {
+  let i = [W("sbb-toggle")], o, r = [], n, y = G(H(U)), x = [], w, z = [], k = [], C, E = [], S = [], D;
+  var p = (l = class extends y {
     constructor() {
       var e, t;
       super();
       f(this, b);
       f(this, d);
-      h(this, b, (g(this, w), g(this, k, !1))), h(this, d, (g(this, z), g(this, E, B() ? "s" : "m"))), this._value = (g(this, S), null), this._loaded = !1, this._toggleResizeObserver = new L(this, {
-        target: null,
-        skipInitial: !0,
-        callback: () => this.updatePillPosition(!0)
-      }), this._change = new G(this, u.events.change, {
+      c(this, b, (g(this, x), g(this, z, !1))), c(this, d, (g(this, k), g(this, E, M() ? "s" : "m"))), this._value = (g(this, S), null), this._loaded = !1, this._change = new B(this, p.events.change, {
         bubbles: !0,
         composed: !0
-      }), this.internals.role = "radiogroup", (e = this.addEventListener) == null || e.call(this, "input", () => this._handleInput(), { passive: !0 }), (t = this.addEventListener) == null || t.call(this, "keydown", (i) => this._handleKeyDown(i));
+      }), this.internals.role = "radiogroup", (e = this.addEventListener) == null || e.call(this, "input", () => this._handleInput(), { passive: !0 }), (t = this.addEventListener) == null || t.call(this, "keydown", (s) => this._handleKeyDown(s));
     }
     /**
      * If true, set the width of the component fixed; if false,
@@ -40,7 +35,7 @@ let ne = (() => {
       return v(this, b);
     }
     set even(e) {
-      h(this, b, e);
+      c(this, b, e);
     }
     /**
      * Size variant, either m or s.
@@ -50,18 +45,18 @@ let ne = (() => {
       return v(this, d);
     }
     set size(e) {
-      h(this, d, e);
+      c(this, d, e);
     }
     /**
      * The value of the toggle. It needs to be mutable since it is updated whenever
      * a new option is selected (see the `onToggleOptionSelect()` method).
      */
     set value(e) {
-      A ? this._value = e : this._valueChanged(e);
+      P ? this._value = e : this._valueChanged(e);
     }
     get value() {
       var e, t;
-      return A ? this._value ?? "" : ((e = this.options.find((i) => i.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
+      return P ? this._value ?? "" : ((e = this.options.find((s) => s.checked)) == null ? void 0 : e.value) ?? ((t = this.options[0]) == null ? void 0 : t.value) ?? "";
     }
     /** The child instances of sbb-toggle-option as an array. */
     get options() {
@@ -69,7 +64,7 @@ let ne = (() => {
       return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-toggle-option")) ?? []);
     }
     connectedCallback() {
-      super.connectedCallback(), this.options.forEach((e) => this._toggleResizeObserver.observe(e)), this._updateToggle();
+      super.connectedCallback(), this._updateToggle();
     }
     willUpdate(e) {
       super.willUpdate(e), (e.has("disabled") || e.has("formDisabled")) && this._updateDisabled();
@@ -101,12 +96,12 @@ let ne = (() => {
       var I, T;
       if (!this._loaded)
         return;
-      const t = this.options, i = this.shadowRoot.querySelector(".sbb-toggle");
-      if (t.every((m) => !m.checked) || t.every((m) => !m.clientWidth) || !i)
+      const t = this.options, s = this.shadowRoot.querySelector(".sbb-toggle");
+      if (t.every((m) => !m.checked) || t.every((m) => !m.clientWidth) || !s)
         return;
       this.toggleAttribute("data-disable-animation-on-resizing", e);
-      const a = t[0], p = a.checked, R = a.checked ? "0px" : `${a.clientWidth}px`, F = p ? `${i.clientWidth - a.clientWidth}px` : "0px";
-      (I = this.style) == null || I.setProperty("--sbb-toggle-option-left", R), (T = this.style) == null || T.setProperty("--sbb-toggle-option-right", F);
+      const a = t[0], h = a.checked, F = h ? "0px" : `${a.clientWidth}px`, L = h ? `${s.clientWidth - a.clientWidth}px` : "0px";
+      (I = this.style) == null || I.setProperty("--sbb-toggle-option-left", F), (T = this.style) == null || T.setProperty("--sbb-toggle-option-right", L), this.hasAttribute("data-initialized") || setTimeout(() => this.toggleAttribute("data-initialized", !0), 0);
     }
     updateFormValue() {
       this.internals.setFormValue(this.value);
@@ -115,8 +110,8 @@ let ne = (() => {
       this._valueChanged(this.value), this._updateDisabled();
     }
     _valueChanged(e) {
-      const t = this.options, i = t.find((a) => e === ("value" in a ? a.value : a.getAttribute("value"))) ?? t.find((a) => a.checked) ?? t[0];
-      i && (i.checked || (i.checked = !0), this.statusChanged());
+      const t = this.options, s = t.find((a) => e === ("value" in a ? a.value : a.getAttribute("value"))) ?? t.find((a) => a.checked) ?? t[0];
+      s && (s.checked || (s.checked = !0), this.statusChanged());
     }
     _updateDisabled() {
       for (const e of this.options)
@@ -129,15 +124,15 @@ let ne = (() => {
       this.statusChanged(), this._change.emit();
     }
     _handleKeyDown(e) {
-      const t = this.options.filter((i) => !i.disabled && $.isVisible(i));
+      const t = this.options.filter((s) => !s.disabled && K.isVisible(s));
       if (!(!t || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this) && j(e)) {
-        const i = t.findIndex((p) => p.checked), a = q(e, i, t.length);
+      e.target !== this && e.target.parentElement !== this) && $(e)) {
+        const s = t.findIndex((h) => h.checked), a = j(e, s, t.length);
         t[a].checked || (t[a].checked = !0, t[a].focus(), t[a].dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))), e.preventDefault();
       }
     }
     render() {
-      return W`
+      return V`
       <div class="sbb-toggle">
         <slot @slotchange=${this._updateToggle}></slot>
       </div>
@@ -145,18 +140,18 @@ let ne = (() => {
     }
   }, b = new WeakMap(), d = new WeakMap(), n = l, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    x = [M(), _({ reflect: !0, type: Boolean })], C = [_({ reflect: !0 })], D = [_()], c(l, null, x, { kind: "accessor", name: "even", static: !1, private: !1, access: { has: (t) => "even" in t, get: (t) => t.even, set: (t, i) => {
-      t.even = i;
-    } }, metadata: e }, k, z), c(l, null, C, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, E, S), c(l, null, D, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
-      t.value = i;
-    } }, metadata: e }, null, w), c(null, o = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, r), u = n = o.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = J, l.events = {
+    w = [q(), _({ reflect: !0, type: Boolean })], C = [_({ reflect: !0 })], D = [_()], u(l, null, w, { 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 }, z, k), u(l, null, C, { 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 }, E, S), u(l, null, D, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, s) => {
+      t.value = s;
+    } }, metadata: e }, null, x), u(null, o = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, r), p = n = o.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = N, l.events = {
     change: "change"
   }, g(n, r), l);
-  return u = n;
+  return p = n;
 })();
 export {
-  ne as SbbToggleElement
+  re as SbbToggleElement
 };

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

@@ -12,9 +12,10 @@ export declare class SbbToggleOptionElement extends SbbToggleOptionElement_base
     accessor checked: boolean;
     /** Value of toggle-option. */
     accessor value: string;
-    private _toggle?;
+    private _toggle;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private _uncheckOtherOptions;
     private _handleDisabledChange;

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-option.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAWvC;;;;;GAKG;AACH,qBAGM,sBAAuB,SAAQ,2BAA8C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAC5C,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8BAA8B;IAC9B,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC,OAAO,CAAC,OAAO,CAAC,CAAmB;;IAkBnB,iBAAiB,IAAI,IAAI;cAQtB,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.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.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;;;;;GAKG;AACH,qBAGM,sBAAuB,SAAQ,2BAA8C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAC5C,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8BAA8B;IAC9B,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC,OAAO,CAAC,OAAO,CAAiC;;IAyBhC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAKzB,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.js

@@ -1,48 +1,58 @@
-var x = (t) => {
+var z = (t) => {
   throw TypeError(t);
 };
-var w = (t, s, o) => s.has(t) || x("Cannot " + o);
-var h = (t, s, o) => (w(t, s, "read from private field"), o ? o.call(t) : s.get(t)), g = (t, s, o) => s.has(t) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, o), c = (t, s, o, a) => (w(t, s, "write to private field"), a ? a.call(t, o) : s.set(t, o), o);
-import { __esDecorate as p, __runInitializers as d } from "tslib";
-import { css as O, LitElement as S, html as E } from "lit";
-import { customElement as T, property as z } from "lit/decorators.js";
-import { slotState as D, forceType as I } from "../../core/decorators.js";
-import { setOrRemoveAttribute as C } from "../../core/dom.js";
-import { SbbDisabledMixin as j } from "../../core/mixins.js";
-import { SbbIconNameMixin as L } from "../../icon.js";
-const A = O`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-option-cursor: pointer;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);--sbb-toggle-option-border-radius: var(--sbb-border-radius-infinity);--sbb-toggle-option-line-height: calc(1em * var(--sbb-typo-line-height-body-text));display:inline-block;min-width:var(--sbb-toggle-min-width);overflow:hidden;z-index:1;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-charcoal)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-granite)}input[type=radio]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.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;cursor:var(--sbb-toggle-option-cursor);display:flex;justify-content:center;align-items:center;height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);border-radius:var(--sbb-toggle-option-border-radius);color:var(--sbb-toggle-option-color)}:host([data-slot-names~=unnamed]:where([data-slot-names~=icon],[icon-name])) .sbb-toggle-option{gap:var(--sbb-spacing-fixed-1x)}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:focus-visible) .sbb-toggle-option__label:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;pointer-events:none;inset:calc(-2 * var(--sbb-toggle-border-width));border-radius:var(--sbb-toggle-option-border-radius)}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}`;
-let H = (() => {
-  var r, b, n;
-  let t = [T("sbb-toggle-option"), D()], s, o = [], a, u = j(L(S)), f, v = [], m = [], _, y = [], k = [];
+var w = (t, s, o) => s.has(t) || z("Cannot " + o);
+var d = (t, s, o) => (w(t, s, "read from private field"), o ? o.call(t) : s.get(t)), g = (t, s, o) => s.has(t) ? z("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, o), b = (t, s, o, a) => (w(t, s, "write to private field"), a ? a.call(t, o) : s.set(t, o), o);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
+import { css as C, LitElement as E, html as T } from "lit";
+import { customElement as D, property as I } from "lit/decorators.js";
+import { slotState as j, forceType as O } from "../../core/decorators.js";
+import { setOrRemoveAttribute as L } from "../../core/dom.js";
+import { SbbDisabledMixin as A } from "../../core/mixins.js";
+import { SbbIconNameMixin as M } from "../../icon.js";
+const R = C`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-option-cursor: pointer;--sbb-toggle-option-color: var(--sbb-color-anthracite);--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-charcoal)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-granite)}.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;cursor:var(--sbb-toggle-option-cursor);display:flex;justify-content:center;align-items:center;height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color)}:host([data-slot-names~=unnamed]:where([data-slot-names~=icon],[icon-name])) .sbb-toggle-option{gap:var(--sbb-spacing-fixed-1x)}.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 r, c, n;
+  let t = [D("sbb-toggle-option"), j()], s, o = [], a, u = A(M(E)), m, f = [], _ = [], v, k = [], y = [];
   return n = class extends u {
     constructor() {
       var i, l;
       super();
       g(this, r);
-      g(this, b);
-      c(this, r, d(this, v, !1)), c(this, b, (d(this, m), d(this, y, ""))), this._toggle = d(this, k);
+      g(this, c);
+      b(this, r, h(this, f, !1)), b(this, c, (h(this, _), h(this, k, ""))), this._toggle = (h(this, y), null);
       const e = this.attachInternals();
       e.role = "radio", (i = this.addEventListener) == null || i.call(this, "input", () => this._handleInput()), (l = this.addEventListener) == null || l.call(this, "click", () => {
         !this.disabled && !this.checked && this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }));
-      });
+      }), this.addController(new S(this, {
+        skipInitial: !0,
+        callback: () => {
+          var x;
+          return (x = this._toggle) == null ? void 0 : x.updatePillPosition(!0);
+        }
+      }));
     }
     /** Whether the toggle-option is checked. */
     get checked() {
-      return h(this, r);
+      return d(this, r);
     }
     set checked(e) {
-      c(this, r, e);
+      b(this, r, e);
     }
     /** Value of toggle-option. */
     get value() {
-      return h(this, b);
+      return d(this, c);
     }
     set value(e) {
-      c(this, b, e);
+      b(this, c, e);
     }
     connectedCallback() {
       var e;
-      super.connectedCallback(), this._toggle = ((e = this.closest) == null ? void 0 : e.call(this, "sbb-toggle")) ?? void 0, this._verifyTabindex();
+      super.connectedCallback(), this._toggle = ((e = this.closest) == null ? void 0 : e.call(this, "sbb-toggle")) ?? null, this._verifyTabindex();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._toggle = null;
     }
     willUpdate(e) {
       super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this._verifyTabindex(), this.checked && this._uncheckOtherOptions()), e.has("disabled") && this._handleDisabledChange();
@@ -52,7 +62,7 @@ let H = (() => {
       (e = this._toggle) == null || e.options.filter((l) => l !== this).forEach((l) => l.checked = !1), (i = this._toggle) == null || i.statusChanged();
     }
     _handleDisabledChange() {
-      C(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();
+      L(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();
     }
     _handleInput() {
       this.disabled || (this.checked = !0, this._uncheckOtherOptions());
@@ -61,7 +71,7 @@ let H = (() => {
       this.tabIndex = this.checked && !this.disabled ? 0 : -1;
     }
     render() {
-      return E`
+      return T`
       <div class="sbb-toggle-option">
         ${this.renderIconSlot()}
         <span class="sbb-toggle-option__label">
@@ -70,15 +80,15 @@ let H = (() => {
       </div>
     `;
     }
-  }, r = new WeakMap(), b = new WeakMap(), a = n, (() => {
+  }, r = new WeakMap(), c = new WeakMap(), a = n, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    f = [I(), z({ reflect: !0, type: Boolean })], _ = [I(), z()], p(n, null, f, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (i) => "checked" in i, get: (i) => i.checked, set: (i, l) => {
+    m = [O(), I({ reflect: !0, type: Boolean })], v = [O(), I()], p(n, null, m, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (i) => "checked" in i, get: (i) => i.checked, set: (i, l) => {
       i.checked = l;
-    } }, metadata: e }, v, m), p(n, null, _, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (i) => "value" in i, get: (i) => i.value, set: (i, l) => {
+    } }, metadata: e }, f, _), p(n, null, v, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (i) => "value" in i, get: (i) => i.value, set: (i, l) => {
       i.value = l;
-    } }, metadata: e }, y, k), p(null, s = { value: a }, t, { kind: "class", name: a.name, metadata: e }, null, o), a = s.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = A, d(a, o), a;
+    } }, metadata: e }, k, y), p(null, s = { value: a }, t, { kind: "class", name: a.name, metadata: e }, null, o), a = s.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = R, h(a, o), a;
 })();
 export {
-  H as SbbToggleOptionElement
+  K as SbbToggleOptionElement
 };