@sbb-esta/lyne-elements 2.7.0 → 2.8.0

package/teaser-hero/teaser-hero.js

@@ -1,19 +1,19 @@
 var m = (e) => {
   throw TypeError(e);
 };
-var g = (e, t, a) => t.has(e) || m("Cannot " + a);
-var d = (e, t, a) => (g(e, t, "read from private field"), a ? a.call(e) : t.get(e)), v = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), u = (e, t, a, n) => (g(e, t, "write to private field"), n ? n.call(e, a) : t.set(e, a), a);
+var d = (e, t, a) => t.has(e) || m("Cannot " + a);
+var g = (e, t, a) => (d(e, t, "read from private field"), a ? a.call(e) : t.get(e)), v = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), u = (e, t, a, n) => (d(e, t, "write to private field"), n ? n.call(e, a) : t.set(e, a), a);
 import { __esDecorate as f, __runInitializers as r } from "tslib";
-import { css as y, nothing as x } from "lit";
-import { customElement as C, property as w } from "lit/decorators.js";
-import { html as _ } from "lit/static-html.js";
-import { SbbLinkBaseElement as z } from "../core/base-elements.js";
-import { slotState as S, forceType as E, omitEmptyConverter as T } from "../core/decorators.js";
+import { css as k } from "lit";
+import { customElement as y, property as x } from "lit/decorators.js";
+import { html as C } from "lit/static-html.js";
+import { SbbLinkBaseElement as w } from "../core/base-elements.js";
+import { slotState as z, forceType as S, omitEmptyConverter as E } from "../core/decorators.js";
 import "../link/block-link-static.js";
-const j = y`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}::slotted([slot=image]){width:100%}.sbb-teaser-hero{position:relative;display:flex;min-height:var(--sbb-panel-height);text-decoration:none}.sbb-teaser-hero: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)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}`;
-let P = (() => {
+const T = k`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}::slotted([slot=image]){width:100%}.sbb-teaser-hero{position:relative;display:flex;min-height:var(--sbb-panel-height);text-decoration:none}.sbb-teaser-hero: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)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}:host(:not([href])) .sbb-teaser-hero__panel-link{display:none}`;
+let L = (() => {
   var o, s;
-  let e = [C("sbb-teaser-hero"), S()], t, a = [], n, b = z, p, h = [], c = [];
+  let e = [y("sbb-teaser-hero"), z()], t, a = [], n, b = w, p, h = [], c = [];
   return s = class extends b {
     constructor() {
       super(...arguments);
@@ -22,7 +22,7 @@ let P = (() => {
     }
     /** Panel link text. */
     get linkContent() {
-      return d(this, o);
+      return g(this, o);
     }
     set linkContent(i) {
       u(this, o, i);
@@ -31,31 +31,31 @@ let P = (() => {
       Array.from(this.querySelectorAll("sbb-chip-label")).forEach((i) => i.color = "charcoal");
     }
     renderTemplate() {
-      return _`
+      return C`
       <span class="sbb-teaser-hero__panel">
         <p class="sbb-teaser-hero__panel-text">
           <slot></slot>
         </p>
-        ${this.href ? _`<sbb-block-link-static
-              class="sbb-teaser-hero__panel-link"
-              icon-name="chevron-small-right-small"
-              icon-placement="end"
-              size="m"
-              negative
-            >
-              <slot name="link-content">${this.linkContent}</slot>
-            </sbb-block-link-static>` : x}
+        <sbb-block-link-static
+          class="sbb-teaser-hero__panel-link"
+          icon-name="chevron-small-right-small"
+          icon-placement="end"
+          size="m"
+          negative
+        >
+          <slot name="link-content">${this.linkContent}</slot>
+        </sbb-block-link-static>
       </span>
       <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
     `;
     }
   }, o = new WeakMap(), n = s, (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    p = [E(), w({ attribute: "link-content", reflect: !0, converter: T })], f(s, null, p, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (l) => "linkContent" in l, get: (l) => l.linkContent, set: (l, k) => {
-      l.linkContent = k;
+    p = [S(), x({ attribute: "link-content", reflect: !0, converter: E })], f(s, null, p, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (l) => "linkContent" in l, get: (l) => l.linkContent, set: (l, _) => {
+      l.linkContent = _;
     } }, metadata: i }, h, c), f(null, t = { value: n }, e, { kind: "class", name: n.name, metadata: i }, null, a), n = t.value, i && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), s.styles = j, r(n, a), n;
+  })(), s.styles = T, r(n, a), n;
 })();
 export {
-  P as SbbTeaserHeroElement
+  L as SbbTeaserHeroElement
 };

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
 };

package/core/controllers/id-observer-controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"id-observer-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/id-observer-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAOzE;;GAEG;AACH,qBAAa,wBAAwB,CAAC,CAAC,SAAS,UAAU,CAAE,YAAW,kBAAkB;IAIrF,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,UAAU;IALpB,OAAO,CAAC,SAAS,CAAsC;gBAG7C,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,MAAM,CAAC,EACf,UAAU;kBAZR,gBAAgB;qBAAe,GAAG,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC;MAY7C;IAKzB,aAAa,IAAI,IAAI;IAgDrB,gBAAgB,IAAI,IAAI;IAoB/B;;OAEG;IACI,IAAI,IAAI,WAAW,GAAG,IAAI;CAQlC"}

package/development/core/controllers/id-observer-controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"id-observer-controller.d.ts","sourceRoot":"","sources":["../../../../../src/elements/core/controllers/id-observer-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAOzE;;GAEG;AACH,qBAAa,wBAAwB,CAAC,CAAC,SAAS,UAAU,CAAE,YAAW,kBAAkB;IAIrF,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,UAAU;IALpB,OAAO,CAAC,SAAS,CAAsC;gBAG7C,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,MAAM,CAAC,EACf,UAAU;kBAZR,gBAAgB;qBAAe,GAAG,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC;MAY7C;IAKzB,aAAa,IAAI,IAAI;IAgDrB,gBAAgB,IAAI,IAAI;IAoB/B;;OAEG;IACI,IAAI,IAAI,WAAW,GAAG,IAAI;CAQlC"}

package/development/core/controllers/id-observer-controller.js

@@ -1,84 +0,0 @@
-import { isServer } from "lit";
-const observers = /* @__PURE__ */ new WeakMap();
-class SbbIdReferenceController {
-  constructor(_host, _idRef, _observers = observers) {
-    this._host = _host;
-    this._idRef = _idRef;
-    this._observers = _observers;
-    this._rootNode = null;
-    this._host.addController(this);
-  }
-  hostConnected() {
-    if (isServer) {
-      return;
-    }
-    this._rootNode = this._host.getRootNode();
-    const observerContext = this._observers.get(this._rootNode);
-    if (observerContext) {
-      observerContext.controllers.add(this);
-    } else {
-      const controllers = /* @__PURE__ */ new Set([this]);
-      const observer = new MutationObserver((mutations) => {
-        const mutatedIds = /* @__PURE__ */ new Set();
-        for (const mutation of mutations) {
-          if (mutation.type === "attributes") {
-            mutatedIds.add(mutation.oldValue);
-            mutatedIds.add(mutation.target.id);
-          } else if (mutation.type === "childList") {
-            for (const node of [...mutation.addedNodes, ...mutation.removedNodes]) {
-              if (node instanceof HTMLElement) {
-                mutatedIds.add(node.id);
-                node.querySelectorAll("[id]").forEach((e) => mutatedIds.add(e.id));
-              }
-            }
-          }
-        }
-        for (const controller of controllers) {
-          const id = controller._host[controller._idRef];
-          if (id && typeof id === "string" && mutatedIds.has(id)) {
-            controller._host.requestUpdate();
-          }
-        }
-      });
-      observer.observe(this._rootNode, {
-        attributeFilter: ["id"],
-        childList: true,
-        subtree: true,
-        attributeOldValue: true
-      });
-      this._observers.set(this._rootNode, { observer, controllers });
-    }
-  }
-  hostDisconnected() {
-    if (isServer || !this._rootNode) {
-      return;
-    }
-    const observerContext = this._observers.get(this._rootNode);
-    if (!observerContext) {
-      this._rootNode = null;
-      return;
-    }
-    observerContext.controllers.delete(this);
-    if (observerContext.controllers.size === 0) {
-      observerContext.observer.disconnect();
-      this._observers.delete(this._rootNode);
-    }
-    this._rootNode = null;
-  }
-  /**
-   * Find the element by id in the current document fragment
-   */
-  find() {
-    var _a;
-    if (isServer || !this._rootNode) {
-      return null;
-    } else {
-      const id = this._host[this._idRef];
-      return typeof id == "string" ? (_a = this._rootNode) == null ? void 0 : _a.querySelector(`#${id}`) : null;
-    }
-  }
-}
-export {
-  SbbIdReferenceController
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWQtb2JzZXJ2ZXItY29udHJvbGxlci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2NvcmUvY29udHJvbGxlcnMvaWQtb2JzZXJ2ZXItY29udHJvbGxlci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpc1NlcnZlciwgdHlwZSBMaXRFbGVtZW50LCB0eXBlIFJlYWN0aXZlQ29udHJvbGxlciB9IGZyb20gJ2xpdCc7XG5cbmNvbnN0IG9ic2VydmVycyA9IG5ldyBXZWFrTWFwPFxuICBOb2RlLFxuICB7IG9ic2VydmVyOiBNdXRhdGlvbk9ic2VydmVyOyBjb250cm9sbGVyczogU2V0PFNiYklkUmVmZXJlbmNlQ29udHJvbGxlcjxhbnk+PiB9XG4+KCk7XG5cbi8qKlxuICogVHJhY2tzIGlkIGNoYW5nZXMgaW4gdGhlIERPTSBhbmQgY2FsbHMgY29tcG9uZW50IHdoZW4gbWF0Y2hpbmcgd2l0aCByZXF1ZXN0VXBkYXRlKCkuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJJZFJlZmVyZW5jZUNvbnRyb2xsZXI8VCBleHRlbmRzIExpdEVsZW1lbnQ+IGltcGxlbWVudHMgUmVhY3RpdmVDb250cm9sbGVyIHtcbiAgcHJpdmF0ZSBfcm9vdE5vZGU6IERvY3VtZW50IHwgU2hhZG93Um9vdCB8IG51bGwgPSBudWxsO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9ob3N0OiBULFxuICAgIHByaXZhdGUgX2lkUmVmOiBrZXlvZiBULFxuICAgIHByaXZhdGUgX29ic2VydmVycyA9IG9ic2VydmVycyxcbiAgKSB7XG4gICAgdGhpcy5faG9zdC5hZGRDb250cm9sbGVyKHRoaXMpO1xuICB9XG5cbiAgcHVibGljIGhvc3RDb25uZWN0ZWQoKTogdm9pZCB7XG4gICAgaWYgKGlzU2VydmVyKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5fcm9vdE5vZGUgPSB0aGlzLl9ob3N0LmdldFJvb3ROb2RlKCkgYXMgRG9jdW1lbnQgfCBTaGFkb3dSb290O1xuICAgIGNvbnN0IG9ic2VydmVyQ29udGV4dCA9IHRoaXMuX29ic2VydmVycy5nZXQodGhpcy5fcm9vdE5vZGUpO1xuXG4gICAgaWYgKG9ic2VydmVyQ29udGV4dCkge1xuICAgICAgb2JzZXJ2ZXJDb250ZXh0LmNvbnRyb2xsZXJzLmFkZCh0aGlzKTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc3QgY29udHJvbGxlcnMgPSBuZXcgU2V0KFt0aGlzXSk7XG4gICAgICBjb25zdCBvYnNlcnZlciA9IG5ldyBNdXRhdGlvbk9ic2VydmVyKChtdXRhdGlvbnMpID0+IHtcbiAgICAgICAgY29uc3QgbXV0YXRlZElkcyA9IG5ldyBTZXQ8c3RyaW5nPigpO1xuXG4gICAgICAgIGZvciAoY29uc3QgbXV0YXRpb24gb2YgbXV0YXRpb25zKSB7XG4gICAgICAgICAgaWYgKG11dGF0aW9uLnR5cGUgPT09ICdhdHRyaWJ1dGVzJykge1xuICAgICAgICAgICAgbXV0YXRlZElkcy5hZGQobXV0YXRpb24ub2xkVmFsdWUhKTtcbiAgICAgICAgICAgIG11dGF0ZWRJZHMuYWRkKChtdXRhdGlvbi50YXJnZXQgYXMgSFRNTEVsZW1lbnQpLmlkKTtcbiAgICAgICAgICB9IGVsc2UgaWYgKG11dGF0aW9uLnR5cGUgPT09ICdjaGlsZExpc3QnKSB7XG4gICAgICAgICAgICBmb3IgKGNvbnN0IG5vZGUgb2YgWy4uLm11dGF0aW9uLmFkZGVkTm9kZXMsIC4uLm11dGF0aW9uLnJlbW92ZWROb2Rlc10pIHtcbiAgICAgICAgICAgICAgaWYgKG5vZGUgaW5zdGFuY2VvZiBIVE1MRWxlbWVudCkge1xuICAgICAgICAgICAgICAgIG11dGF0ZWRJZHMuYWRkKG5vZGUuaWQpO1xuICAgICAgICAgICAgICAgIG5vZGUucXVlcnlTZWxlY3RvckFsbCgnW2lkXScpLmZvckVhY2goKGUpID0+IG11dGF0ZWRJZHMuYWRkKGUuaWQpKTtcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIGZvciAoY29uc3QgY29udHJvbGxlciBvZiBjb250cm9sbGVycykge1xuICAgICAgICAgIGNvbnN0IGlkID0gY29udHJvbGxlci5faG9zdFtjb250cm9sbGVyLl9pZFJlZl07XG4gICAgICAgICAgaWYgKGlkICYmIHR5cGVvZiBpZCA9PT0gJ3N0cmluZycgJiYgbXV0YXRlZElkcy5oYXMoaWQpKSB7XG4gICAgICAgICAgICBjb250cm9sbGVyLl9ob3N0LnJlcXVlc3RVcGRhdGUoKTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH0pO1xuXG4gICAgICBvYnNlcnZlci5vYnNlcnZlKHRoaXMuX3Jvb3ROb2RlLCB7XG4gICAgICAgIGF0dHJpYnV0ZUZpbHRlcjogWydpZCddLFxuICAgICAgICBjaGlsZExpc3Q6IHRydWUsXG4gICAgICAgIHN1YnRyZWU6IHRydWUsXG4gICAgICAgIGF0dHJpYnV0ZU9sZFZhbHVlOiB0cnVlLFxuICAgICAgfSk7XG5cbiAgICAgIHRoaXMuX29ic2VydmVycy5zZXQodGhpcy5fcm9vdE5vZGUsIHsgb2JzZXJ2ZXIsIGNvbnRyb2xsZXJzIH0pO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBob3N0RGlzY29ubmVjdGVkKCk6IHZvaWQge1xuICAgIGlmIChpc1NlcnZlciB8fCAhdGhpcy5fcm9vdE5vZGUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBvYnNlcnZlckNvbnRleHQgPSB0aGlzLl9vYnNlcnZlcnMuZ2V0KHRoaXMuX3Jvb3ROb2RlKTtcbiAgICBpZiAoIW9ic2VydmVyQ29udGV4dCkge1xuICAgICAgdGhpcy5fcm9vdE5vZGUgPSBudWxsO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIG9ic2VydmVyQ29udGV4dC5jb250cm9sbGVycy5kZWxldGUodGhpcyk7XG4gICAgaWYgKG9ic2VydmVyQ29udGV4dC5jb250cm9sbGVycy5zaXplID09PSAwKSB7XG4gICAgICBvYnNlcnZlckNvbnRleHQub2JzZXJ2ZXIuZGlzY29ubmVjdCgpO1xuICAgICAgdGhpcy5fb2JzZXJ2ZXJzLmRlbGV0ZSh0aGlzLl9yb290Tm9kZSk7XG4gICAgfVxuXG4gICAgdGhpcy5fcm9vdE5vZGUgPSBudWxsO1xuICB9XG5cbiAgLyoqXG4gICAqIEZpbmQgdGhlIGVsZW1lbnQgYnkgaWQgaW4gdGhlIGN1cnJlbnQgZG9jdW1lbnQgZnJhZ21lbnRcbiAgICovXG4gIHB1YmxpYyBmaW5kKCk6IEhUTUxFbGVtZW50IHwgbnVsbCB7XG4gICAgaWYgKGlzU2VydmVyIHx8ICF0aGlzLl9yb290Tm9kZSkge1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IGlkID0gdGhpcy5faG9zdFt0aGlzLl9pZFJlZl07XG4gICAgICByZXR1cm4gdHlwZW9mIGlkID09ICdzdHJpbmcnID8gdGhpcy5fcm9vdE5vZGU/LnF1ZXJ5U2VsZWN0b3IoYCMke2lkfWApIDogbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTSxnQ0FBZ0I7TUFRVCx5QkFBd0I7QUFBQSxFQUduQyxZQUNVLE9BQ0EsUUFDQSxhQUFhLFdBQVM7QUFGdEIsU0FBSyxRQUFMO0FBQ0EsU0FBTSxTQUFOO0FBQ0EsU0FBVSxhQUFWO0FBTEYsU0FBUyxZQUFpQztBQU8zQyxTQUFBLE1BQU0sY0FBYyxJQUFJO0FBQUEsRUFBQTtBQUFBLEVBR3hCLGdCQUFhO0FBQ2xCLFFBQUksVUFBVTtBQUNaO0FBQUEsSUFBQTtBQUdHLFNBQUEsWUFBWSxLQUFLLE1BQU0sWUFBVztBQUN2QyxVQUFNLGtCQUFrQixLQUFLLFdBQVcsSUFBSSxLQUFLLFNBQVM7QUFFMUQsUUFBSSxpQkFBaUI7QUFDSCxzQkFBQSxZQUFZLElBQUksSUFBSTtBQUFBLElBQUEsT0FDL0I7QUFDTCxZQUFNLGNBQWMsb0JBQUksSUFBSSxDQUFDLElBQUksQ0FBQztBQUNsQyxZQUFNLFdBQVcsSUFBSSxpQkFBaUIsQ0FBQyxjQUFhO0FBQzVDLGNBQUEsaUNBQWlCO0FBRXZCLG1CQUFXLFlBQVksV0FBVztBQUM1QixjQUFBLFNBQVMsU0FBUyxjQUFjO0FBQ3ZCLHVCQUFBLElBQUksU0FBUyxRQUFTO0FBQ3RCLHVCQUFBLElBQUssU0FBUyxPQUF1QixFQUFFO0FBQUEsVUFBQSxXQUN6QyxTQUFTLFNBQVMsYUFBYTtBQUM3Qix1QkFBQSxRQUFRLENBQUMsR0FBRyxTQUFTLFlBQVksR0FBRyxTQUFTLFlBQVksR0FBRztBQUNyRSxrQkFBSSxnQkFBZ0IsYUFBYTtBQUNwQiwyQkFBQSxJQUFJLEtBQUssRUFBRTtBQUNqQixxQkFBQSxpQkFBaUIsTUFBTSxFQUFFLFFBQVEsQ0FBQyxNQUFNLFdBQVcsSUFBSSxFQUFFLEVBQUUsQ0FBQztBQUFBLGNBQUE7QUFBQSxZQUNuRTtBQUFBLFVBQ0Y7QUFBQSxRQUNGO0FBR0YsbUJBQVcsY0FBYyxhQUFhO0FBQ3BDLGdCQUFNLEtBQUssV0FBVyxNQUFNLFdBQVcsTUFBTTtBQUM3QyxjQUFJLE1BQU0sT0FBTyxPQUFPLFlBQVksV0FBVyxJQUFJLEVBQUUsR0FBRztBQUN0RCx1QkFBVyxNQUFNOztRQUNuQjtBQUFBLE1BQ0YsQ0FDRDtBQUVRLGVBQUEsUUFBUSxLQUFLLFdBQVc7QUFBQSxRQUMvQixpQkFBaUIsQ0FBQyxJQUFJO0FBQUEsUUFDdEIsV0FBVztBQUFBLFFBQ1gsU0FBUztBQUFBLFFBQ1QsbUJBQW1CO0FBQUEsTUFBQSxDQUNwQjtBQUVELFdBQUssV0FBVyxJQUFJLEtBQUssV0FBVyxFQUFFLFVBQVUsYUFBYTtBQUFBLElBQUE7QUFBQSxFQUMvRDtBQUFBLEVBR0ssbUJBQWdCO0FBQ2pCLFFBQUEsWUFBWSxDQUFDLEtBQUssV0FBVztBQUMvQjtBQUFBLElBQUE7QUFHRixVQUFNLGtCQUFrQixLQUFLLFdBQVcsSUFBSSxLQUFLLFNBQVM7QUFDMUQsUUFBSSxDQUFDLGlCQUFpQjtBQUNwQixXQUFLLFlBQVk7QUFDakI7QUFBQSxJQUFBO0FBR2Msb0JBQUEsWUFBWSxPQUFPLElBQUk7QUFDbkMsUUFBQSxnQkFBZ0IsWUFBWSxTQUFTLEdBQUc7QUFDMUMsc0JBQWdCLFNBQVM7QUFDcEIsV0FBQSxXQUFXLE9BQU8sS0FBSyxTQUFTO0FBQUEsSUFBQTtBQUd2QyxTQUFLLFlBQVk7QUFBQSxFQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFNWixPQUFJOztBQUNMLFFBQUEsWUFBWSxDQUFDLEtBQUssV0FBVztBQUN4QixhQUFBO0FBQUEsSUFBQSxPQUNGO0FBQ0wsWUFBTSxLQUFLLEtBQUssTUFBTSxLQUFLLE1BQU07QUFDMUIsYUFBQSxPQUFPLE1BQU0sWUFBVyxVQUFLLGNBQUwsbUJBQWdCLGNBQWMsSUFBSSxFQUFFLE1BQU07QUFBQSxJQUFBO0FBQUEsRUFDM0U7QUFFSDsifQ==