@sbb-esta/lyne-elements 1.7.0 → 1.9.0

package/stepper/step-label.js

@@ -5,13 +5,13 @@ import { SbbConnectedAbortController as d } from "../core/controllers.js";
 import { hostAttributes as f } from "../core/decorators.js";
 import { SbbDisabledMixin as h } from "../core/mixins.js";
 import { SbbIconNameMixin as v } from "../icon.js";
-const x = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);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;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([disabled]){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);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-step-label-cursor);position:relative;display:flex;gap:var(--sbb-spacing-fixed-4x);color:var(--sbb-step-label-color)}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
-var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, g = (t, s, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? m(s, r) : s, a = t.length - 1, o; a >= 0; a--)
-    (o = t[a]) && (e = (i ? o(s, r, e) : o(e)) || e);
-  return i && e && u(s, r, e), e;
+const x = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);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;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([data-size=s]){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host([data-size=s]):before{inset-block-start:calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2)}:host([disabled]){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);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-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host([data-size=s]) .sbb-step-label{--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);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, u = (t, s, r, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(s, r) : s, b = t.length - 1, a; b >= 0; b--)
+    (a = t[b]) && (e = (i ? a(s, r, e) : a(e)) || e);
+  return i && e && g(s, r, e), e;
 };
-let y = 0, b = class extends v(h(c)) {
+let y = 0, o = class extends v(h(c)) {
   constructor() {
     super(...arguments), this._internals = this.attachInternals(), this._abort = new d(this), this._stepper = null, this._step = null;
   }
@@ -69,15 +69,15 @@ let y = 0, b = class extends v(h(c)) {
     `;
   }
 };
-b.styles = x;
-b = g([
+o.styles = x;
+o = u([
   p("sbb-step-label"),
   f({
     slot: "step-label",
     tabindex: "-1",
     role: "tab"
   })
-], b);
+], o);
 export {
-  b as SbbStepLabelElement
+  o as SbbStepLabelElement
 };

package/stepper/stepper/stepper.d.ts

@@ -18,6 +18,8 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     private _horizontalFrom?;
     /** Steps orientation, either horizontal or vertical. */
     orientation: SbbOrientation;
+    /** Size variant, either s or m. */
+    size: 's' | 'm';
     /** The currently selected step. */
     set selected(step: SbbStepElement);
     get selected(): SbbStepElement | undefined;
@@ -48,6 +50,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _proxySize;
     private _handleKeyDown;
     protected render(): TemplateResult;
 }

package/stepper/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;;AAM9E;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACpD,MAAM,UAAS;IAEnD,yDAAyD;IACzD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IAEjD,WAAW,EAAE,cAAc,CAAgB;IAElD,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5E,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;;AAM9E;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACpD,MAAM,UAAS;IAEnD,yDAAyD;IACzD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IAEjD,WAAW,EAAE,cAAc,CAAgB;IAElD,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB5E,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/stepper/stepper.js

@@ -1,19 +1,19 @@
 import { css as h, LitElement as p, html as c } from "lit";
-import { property as l, customElement as f } from "lit/decorators.js";
+import { property as n, customElement as f } from "lit/decorators.js";
 import { isArrowKeyPressed as u, getNextElementIndex as m } from "../core/a11y.js";
 import { SbbConnectedAbortController as _ } from "../core/controllers.js";
-import { breakpoints as v, isBreakpoint as g } from "../core/dom.js";
-import { SbbHydrationMixin as x } from "../core/mixins.js";
+import { breakpoints as v, isBreakpoint as x } from "../core/dom.js";
+import { SbbHydrationMixin as g } from "../core/mixins.js";
 const z = h`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? y(t, s) : t, a = e.length - 1, d; a >= 0; a--)
-    (d = e[a]) && (r = (i ? d(t, s, r) : d(r)) || r);
-  return i && r && w(t, s, r), r;
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, s) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (r = (i ? d(t, s, r) : d(r)) || r);
+  return i && r && y(t, s, r), r;
 };
 const b = 150;
-let o = class extends x(p) {
+let o = class extends g(p) {
   constructor() {
-    super(...arguments), this.linear = !1, this.orientation = "horizontal", this._loaded = !1, this._abort = new _(this), this._resizeObserverTimeout = null;
+    super(...arguments), this.linear = !1, this.orientation = "horizontal", this.size = "m", this._loaded = !1, this._abort = new _(this), this._resizeObserverTimeout = null;
   }
   set horizontalFrom(e) {
     this._horizontalFrom = v.includes(e) ? e : void 0, this._horizontalFrom && this._loaded && this._checkOrientation();
@@ -72,7 +72,7 @@ let o = class extends x(p) {
     return !0;
   }
   _select(e) {
-    var i, r, a;
+    var i, r, l;
     if (!this._isValidStep(e))
       return;
     const t = {
@@ -84,7 +84,7 @@ let o = class extends x(p) {
     if (this.selected && !this.selected.validate(t))
       return;
     const s = this.selected;
-    s == null || s.deselect(), e.select(), this._setMarkerSize(), this._configureLinearMode(), ((i = document.activeElement) == null ? void 0 : i.closest("sbb-stepper")) === this && ((a = (r = this.selected) == null ? void 0 : r.label) == null || a.focus());
+    s == null || s.deselect(), e.select(), this._setMarkerSize(), this._configureLinearMode(), ((i = document.activeElement) == null ? void 0 : i.closest("sbb-stepper")) === this && ((l = (r = this.selected) == null ? void 0 : r.label) == null || l.focus());
   }
   _setMarkerSize() {
     if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
@@ -107,7 +107,7 @@ let o = class extends x(p) {
     const e = this.steps;
     e.forEach((t) => t.configure(this._loaded)), e.filter((t) => t.label).map((t) => t.label).forEach((t, s, i) => {
       t.configure(s + 1, i.length, this._loaded);
-    }), this._select(this.selected || this._enabledSteps[0]);
+    }), this._select(this.selected || this._enabledSteps[0]), this._proxySize();
   }
   _updateLabels() {
     this.steps.forEach((e) => {
@@ -116,7 +116,7 @@ let o = class extends x(p) {
     });
   }
   _checkOrientation() {
-    this.horizontalFrom && (this.orientation = g(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+    this.horizontalFrom && (this.orientation = x(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
   }
   _onStepperResize() {
     this._checkOrientation(), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
@@ -145,7 +145,13 @@ let o = class extends x(p) {
     super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), b);
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode();
+    super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode(), e.has("size") && (this._proxySize(), this._setMarkerSize());
+  }
+  _proxySize() {
+    this.steps.forEach((e) => {
+      var t;
+      (t = e.label) == null || t.setAttribute("data-size", this.size);
+    });
   }
   _handleKeyDown(e) {
     const t = this._enabledSteps;
@@ -169,22 +175,25 @@ let o = class extends x(p) {
   }
 };
 o.styles = z;
-n([
-  l({ type: Boolean })
+a([
+  n({ type: Boolean })
 ], o.prototype, "linear", 2);
-n([
-  l({ attribute: "horizontal-from", reflect: !0 })
+a([
+  n({ attribute: "horizontal-from", reflect: !0 })
 ], o.prototype, "horizontalFrom", 1);
-n([
-  l({ reflect: !0 })
+a([
+  n({ reflect: !0 })
 ], o.prototype, "orientation", 2);
-n([
-  l({ attribute: !1 })
+a([
+  n({ reflect: !0 })
+], o.prototype, "size", 2);
+a([
+  n({ attribute: !1 })
 ], o.prototype, "selected", 1);
-n([
-  l({ attribute: "selected-index", type: Number })
+a([
+  n({ attribute: "selected-index", type: Number })
 ], o.prototype, "selectedIndex", 1);
-o = n([
+o = a([
   f("sbb-stepper")
 ], o);
 export {

package/toggle/toggle/toggle.d.ts

@@ -45,7 +45,8 @@ export declare class SbbToggleElement extends LitElement {
     /** Emits whenever the toggle value changes. */
     private _change;
     private _abort;
-    private _setCheckedPillPosition;
+    /** @internal */
+    updatePillPosition(resizing: boolean): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     disconnectedCallback(): void;

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":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,uBAAuB;IA6Bf,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAO7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,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;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,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-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,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAoB5C;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":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/toggle/toggle-option.js

@@ -5,10 +5,10 @@ import { hostAttributes as f, slotState as v } from "../core/decorators.js";
 import { setOrRemoveAttribute as m } from "../core/dom.js";
 import { SbbIconNameMixin as _ } from "../icon.js";
 const y = h`*,: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}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){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:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-toggle-option__label:before{content:"";position:absolute;pointer-events:none;inset:calc(var(--sbb-focus-outline-offset) * -2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-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)}`;
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? w(t, i) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (o = (l ? a(t, i, o) : a(o)) || o);
-  return l && o && x(t, i, o), o;
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, o, l) => {
+  for (var i = l > 1 ? void 0 : l ? w(t, o) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (l ? a(t, o, i) : a(i)) || i);
+  return l && i && x(t, o, i), i;
 };
 let s = class extends _(c) {
   constructor() {
@@ -25,8 +25,8 @@ let s = class extends _(c) {
     super.connectedCallback();
     const e = this._abort.signal;
     this.addEventListener("input", () => this._handleInput(), { signal: e }), this.addEventListener("click", () => {
-      var i;
-      return (i = this.shadowRoot.querySelector("label")) == null ? void 0 : i.click();
+      var o;
+      return (o = this.shadowRoot.querySelector("label")) == null ? void 0 : o.click();
     }, {
       signal: e
     }), this._toggle = ((t = this.closest) == null ? void 0 : t.call(this, "sbb-toggle")) ?? void 0, this._verifyTabindex();
@@ -35,8 +35,8 @@ let s = class extends _(c) {
     super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this._verifyTabindex(), this.checked && this._uncheckOtherOptions()), e.has("disabled") && this._handleDisabledChange();
   }
   _uncheckOtherOptions() {
-    var e;
-    (e = this._toggle) == null || e.options.filter((t) => t !== this).forEach((t) => t.checked = !1);
+    var e, t;
+    (e = this._toggle) == null || e.options.filter((o) => o !== this).forEach((o) => o.checked = !1), (t = this._toggle) == null || t.updatePillPosition(!1);
   }
   _handleDisabledChange() {
     this._toggle && (this._toggle.disabled && !this.disabled ? this.disabled = !0 : !this._toggle.disabled && this.disabled && (this.disabled = !1)), m(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();
@@ -54,6 +54,7 @@ let s = class extends _(c) {
         id="sbb-toggle-option-id"
         aria-hidden="true"
         tabindex="-1"
+        .inert=${this.checked}
         ?disabled=${this.disabled}
         .checked=${this.checked || d}
         .value=${this.value || d}

package/toggle/toggle.js

@@ -1,21 +1,19 @@
 import { css as u, LitElement as v, isServer as c, html as m } from "lit";
-import { property as a, customElement as f } from "lit/decorators.js";
-import { interactivityChecker as y, isArrowKeyPressed as _, getNextElementIndex as w } from "../core/a11y.js";
+import { property as b, customElement as f } from "lit/decorators.js";
+import { interactivityChecker as y, isArrowKeyPressed as w, getNextElementIndex as _ } from "../core/a11y.js";
 import { SbbConnectedAbortController as x } from "../core/controllers.js";
 import { hostAttributes as k } from "../core/decorators.js";
 import { EventEmitter as p } from "../core/eventing.js";
 import { AgnosticResizeObserver as C } from "../core/observers.js";
 const z = 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-zero-time, 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-time: .1ms;--sbb-disable-animation-zero-time: 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}}`;
-var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
+var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);
   return i && o && P(t, s, o), o;
 };
 let r = class extends v {
   constructor() {
-    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(
-      () => this._setCheckedPillPosition(!0)
-    ), this._didChange = new p(this, r.events.didChange, {
+    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(() => this.updatePillPosition(!0)), this._didChange = new p(this, r.events.didChange, {
       bubbles: !0,
       composed: !0
     }), this._change = new p(this, r.events.change, {
@@ -45,13 +43,14 @@ let r = class extends v {
     const t = this.options, s = t.find(
       (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
     ) ?? t.find((i) => i.checked) ?? t[0];
-    s && (s.checked || (s.checked = !0), this._setCheckedPillPosition(!1));
+    s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
   }
   _updateDisabled() {
     for (const e of this.options)
       e.disabled = this.disabled;
   }
-  _setCheckedPillPosition(e) {
+  /** @internal */
+  updatePillPosition(e) {
     var g, h;
     if (!this._loaded)
       return;
@@ -68,7 +67,7 @@ let r = class extends v {
     this.addEventListener("input", () => this._handleInput(), { signal: e, passive: !0 }), this.addEventListener("keydown", (t) => this._handleKeyDown(t), { signal: e }), this.options.forEach((t) => this._toggleResizeObserver.observe(t)), this._updateToggle();
   }
   async firstUpdated(e) {
-    super.firstUpdated(e), await this.updateComplete, this._loaded = !0;
+    super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.updatePillPosition(!1);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._toggleResizeObserver.disconnect();
@@ -77,17 +76,17 @@ let r = class extends v {
     this._valueChanged(this.value), this._updateDisabled();
   }
   _handleInput() {
-    this._setCheckedPillPosition(!1), this._change.emit(), this._didChange.emit();
+    this.updatePillPosition(!1), this._change.emit(), this._didChange.emit();
   }
   _handleKeyDown(e) {
     const t = this.options.filter(
       (s) => !s.disabled && y.isVisible(s)
     );
     if (!(!t || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && _(e)) {
+    e.target !== this && e.target.parentElement !== this) && w(e)) {
       const s = t.findIndex(
         (o) => o.checked
-      ), i = w(e, s, t.length);
+      ), i = _(e, s, t.length);
       t[i].checked || (t[i].checked = !0, t[i].focus(), t[i].dispatchEvent(
         new InputEvent("input", { bubbles: !0, composed: !0 })
       )), e.preventDefault();
@@ -106,19 +105,19 @@ r.events = {
   didChange: "didChange",
   change: "change"
 };
-b([
-  a({ reflect: !0, type: Boolean })
+a([
+  b({ reflect: !0, type: Boolean })
 ], r.prototype, "disabled", 1);
-b([
-  a({ reflect: !0, type: Boolean })
+a([
+  b({ reflect: !0, type: Boolean })
 ], r.prototype, "even", 2);
-b([
-  a({ reflect: !0 })
+a([
+  b({ reflect: !0 })
 ], r.prototype, "size", 2);
-b([
-  a()
+a([
+  b()
 ], r.prototype, "value", 1);
-r = b([
+r = a([
   f("sbb-toggle"),
   k({
     role: "radiogroup"