@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/selection-panel.js

@@ -1,45 +1,45 @@
-import { css as c, LitElement as p, html as h } from "lit";
-import { property as d, state as v, customElement as m } from "lit/decorators.js";
-import { SbbConnectedAbortController as u, SbbSlotStateController as g } from "./core/controllers.js";
-import { EventEmitter as a } from "./core/eventing.js";
+import { css as p, LitElement as c, html as h } from "lit";
+import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { SbbConnectedAbortController as m, SbbSlotStateController as _ } from "./core/controllers.js";
+import { EventEmitter as o } from "./core/eventing.js";
 import "./divider.js";
-const f = c`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-background: var(--sbb-color-white);--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-panel-input-pointer-events: all;--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: hidden;--sbb-selection-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([color=milk]){--sbb-selection-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-panel-input-pointer-events: none;--sbb-selection-panel-border-color: var(--sbb-color-cloud)}:host([data-disabled]){--sbb-selection-panel-cursor: default}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: visible;--sbb-selection-panel-content-grid-template-rows: 1fr;--sbb-selection-panel-content-opacity: 1;--sbb-selection-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs);--sbb-selection-panel-content-transition: grid-template-rows var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-selection-panel-animation-duration) var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}.sbb-selection-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-panel-background);border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}.sbb-selection-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-panel__content--wrapper{display:none}.sbb-selection-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-panel-content-padding-inline);padding-block-end:var(--sbb-selection-panel-content-padding-block-end);transition:padding var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}::slotted(sbb-radio-button),::slotted(sbb-checkbox){cursor:var(--sbb-selection-panel-cursor);pointer-events:var(--sbb-selection-panel-input-pointer-events);display:block;padding:var(--sbb-selection-panel-input-padding);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:padding}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, n, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? y(n, r) : n, l = e.length - 1, b; l >= 0; l--)
-    (b = e[l]) && (i = (o ? b(n, r, i) : b(i)) || i);
-  return o && i && w(n, r, i), i;
+const g = p`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-background: var(--sbb-color-white);--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-panel-input-pointer-events: all;--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: hidden;--sbb-selection-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([color=milk]){--sbb-selection-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-panel-input-pointer-events: none;--sbb-selection-panel-border-color: var(--sbb-color-cloud)}:host([data-disabled]){--sbb-selection-panel-cursor: default}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: visible;--sbb-selection-panel-content-grid-template-rows: 1fr;--sbb-selection-panel-content-opacity: 1;--sbb-selection-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs);--sbb-selection-panel-content-transition: grid-template-rows var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-selection-panel-animation-duration) var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}.sbb-selection-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-panel-background);border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}.sbb-selection-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-panel__content--wrapper{display:none}.sbb-selection-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-panel-content-padding-inline);padding-block-end:var(--sbb-selection-panel-content-padding-block-end);transition:padding var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}::slotted(sbb-radio-button),::slotted(sbb-checkbox){cursor:var(--sbb-selection-panel-cursor);pointer-events:var(--sbb-selection-panel-input-pointer-events);display:block;padding:var(--sbb-selection-panel-input-padding);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:padding}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, n, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? w(n, r) : n, l = e.length - 1, b; l >= 0; l--)
+    (b = e[l]) && (i = (a ? b(n, r, i) : b(i)) || i);
+  return a && i && f(n, r, i), i;
 };
-let t = class extends p {
+let t = class extends c {
   constructor() {
-    super(), this.color = "white", this.forceOpen = !1, this.borderless = !1, this.h = new a(
+    super(), this.color = "white", this.forceOpen = !1, this.borderless = !1, this._willOpen = new o(
       this,
       t.events.willOpen
-    ), this.e = new a(
+    ), this._didOpen = new o(
       this,
       t.events.didOpen
-    ), this.i = new a(
+    ), this._willClose = new o(
       this,
       t.events.willClose
-    ), this.j = new a(
+    ), this._didClose = new o(
       this,
       t.events.didClose
-    ), this.k = new u(this), this.f = !1, new g(this);
+    ), this._abort = new m(this), this._initialized = !1, new _(this);
   }
-  set a(e) {
+  set _state(e) {
     this.setAttribute("data-state", e);
   }
-  get a() {
+  get _state() {
     return this.getAttribute("data-state");
   }
   /** Whether the selection panel is checked. */
-  set b(e) {
+  set _checked(e) {
     this.toggleAttribute("data-checked", e);
   }
-  get b() {
+  get _checked() {
     return this.hasAttribute("data-checked");
   }
   /** Whether the selection panel is disabled. */
-  set d(e) {
+  set _disabled(e) {
     this.toggleAttribute("data-disabled", e);
   }
   /**
@@ -51,41 +51,41 @@ let t = class extends p {
     return ((e = this.querySelectorAll) == null ? void 0 : e.call(this, '[slot="content"]').length) > 0;
   }
   connectedCallback() {
-    super.connectedCallback(), this.a || (this.a = "closed");
-    const e = this.k.signal;
-    this.addEventListener("stateChange", this.l.bind(this), { signal: e }), this.addEventListener("checkboxLoaded", this.g.bind(this), { signal: e }), this.addEventListener("radioButtonLoaded", this.g.bind(this), { signal: e });
+    super.connectedCallback(), this._state || (this._state = "closed");
+    const e = this._abort.signal;
+    this.addEventListener("stateChange", this._onInputStateChange.bind(this), { signal: e }), this.addEventListener("checkboxLoaded", this._initFromInput.bind(this), { signal: e }), this.addEventListener("radioButtonLoaded", this._initFromInput.bind(this), { signal: e });
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("forceOpen") && this.c();
+    super.willUpdate(e), e.has("forceOpen") && this._updateState();
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this.f = !0;
+    super.firstUpdated(e), this._initialized = !0;
   }
-  c() {
-    this.hasContent && (this.forceOpen || this.b ? this.m(!this.f) : this.n());
+  _updateState() {
+    this.hasContent && (this.forceOpen || this._checked ? this._open(!this._initialized) : this._close());
   }
-  m(e = !1) {
-    this.a !== "closed" && this.a !== "closing" || (this.a = "opening", this.h.emit(), e && (this.a = "opened", this.e.emit()));
+  _open(e = !1) {
+    this._state !== "closed" && this._state !== "closing" || (this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit()));
   }
-  n() {
-    this.a !== "opened" && this.a !== "opening" || (this.a = "closing", this.i.emit());
+  _close() {
+    this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit());
   }
-  g(e) {
+  _initFromInput(e) {
     const n = e.target;
-    n.isSelectionPanelInput && (this.b = n.checked, this.d = n.disabled, this.c());
+    n.isSelectionPanelInput && (this._checked = n.checked, this._disabled = n.disabled, this._updateState());
   }
-  l(e) {
+  _onInputStateChange(e) {
     if (e.target.isSelectionPanelInput) {
       if (e.detail.type === "disabled") {
-        this.d = e.detail.disabled;
+        this._disabled = e.detail.disabled;
         return;
       } else if (e.detail.type !== "checked")
         return;
-      this.b = e.detail.checked, this.c();
+      this._checked = e.detail.checked, this._updateState();
     }
   }
-  o(e) {
-    e.animationName === "open-opacity" && this.a === "opening" ? (this.a = "opened", this.e.emit()) : e.animationName === "close" && this.a === "closing" && (this.a = "closed", this.j.emit());
+  _onAnimationEnd(e) {
+    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
   }
   render() {
     return h`
@@ -99,8 +99,8 @@ let t = class extends p {
         </div>
         <div
           class="sbb-selection-panel__content--wrapper"
-          .inert=${this.a !== "opened"}
-          @animationend=${(e) => this.o(e)}
+          .inert=${this._state !== "opened"}
+          @animationend=${(e) => this._onAnimationEnd(e)}
         >
           <div class="sbb-selection-panel__content">
             <sbb-divider></sbb-divider>
@@ -111,7 +111,7 @@ let t = class extends p {
     `;
   }
 };
-t.styles = f;
+t.styles = g;
 t.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
@@ -128,10 +128,10 @@ s([
   d({ reflect: !0, type: Boolean })
 ], t.prototype, "borderless", 2);
 s([
-  v()
-], t.prototype, "a", 1);
+  u()
+], t.prototype, "_state", 1);
 t = s([
-  m("sbb-selection-panel")
+  v("sbb-selection-panel")
 ], t);
 export {
   t as SbbSelectionPanelElement

package/slider.js

@@ -1,35 +1,35 @@
-import { css as v, LitElement as u, html as c, nothing as a } from "lit";
-import { property as o, state as m, customElement as p } from "lit/decorators.js";
+import { css as u, LitElement as v, html as c, nothing as b } from "lit";
+import { property as t, state as m, customElement as p } from "lit/decorators.js";
 import { ref as f } from "lit/directives/ref.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { SbbConnectedAbortController as w } from "./core/controllers.js";
-import { hostAttributes as g } from "./core/decorators.js";
+import { styleMap as _ } from "lit/directives/style-map.js";
+import { SbbConnectedAbortController as g } from "./core/controllers.js";
+import { hostAttributes as y } from "./core/decorators.js";
 import { setOrRemoveAttribute as n } from "./core/dom.js";
-import { EventEmitter as k, forwardEventToHost as _ } from "./core/eventing.js";
+import { EventEmitter as w, forwardEventToHost as k } from "./core/eventing.js";
 import { SbbDisabledTabIndexActionMixin as x } from "./core/mixins.js";
 import "./icon.js";
-const A = v`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite);outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host([disabled]){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host([disabled]),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host([disabled]),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is([disabled],[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
-var z = Object.defineProperty, N = Object.getOwnPropertyDescriptor, r = (e, t, l, b) => {
-  for (var i = b > 1 ? void 0 : b ? N(t, l) : t, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (i = (b ? h(t, l, i) : h(i)) || i);
-  return b && i && z(t, l, i), i;
+const I = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite);outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host([disabled]){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host([disabled]),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host([disabled]),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is([disabled],[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+var C = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (e, o, l, a) => {
+  for (var i = a > 1 ? void 0 : a ? A(o, l) : o, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (i = (a ? h(o, l, i) : h(i)) || i);
+  return a && i && C(o, l, i), i;
 };
-let s = class extends x(u) {
+let s = class extends x(v) {
   constructor() {
-    super(...arguments), this.value = "", this.name = "", this.min = "0", this.max = "100", this.readonly = !1, this.c = 0, this.e = new k(this, s.events.didChange, {
+    super(...arguments), this.value = "", this.name = "", this.min = "0", this.max = "100", this.readonly = !1, this._valueFraction = 0, this._didChange = new w(this, s.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this.f = new w(this);
+    }), this._abort = new g(this);
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this.f.signal;
-    this.addEventListener("keydown", (t) => this.g(t), { signal: e }), this.b();
+    const e = this._abort.signal;
+    this.addEventListener("keydown", (o) => this._handleKeydown(o), { signal: e }), this._handleChange();
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("value") ? this.b(Number(this.value)) : e.has("valueAsNumber") && this.b(Number(this.valueAsNumber)), e.has("min") && n(this, "aria-valuemin", this.min ?? null), e.has("max") && n(this, "aria-valuemax", this.max ?? null), e.has("readonly") && n(this, "aria-readonly", this.readonly ? "true" : null);
+    super.willUpdate(e), e.has("value") ? this._handleChange(Number(this.value)) : e.has("valueAsNumber") && this._handleChange(Number(this.valueAsNumber)), e.has("min") && n(this, "aria-valuemin", this.min ?? null), e.has("max") && n(this, "aria-valuemax", this.max ?? null), e.has("readonly") && n(this, "aria-readonly", this.readonly ? "true" : null);
   }
-  h(e) {
+  _syncValues(e) {
     e != null && (e && typeof e != "number" && (e = +e), this.value = e.toString(), this.valueAsNumber = e, n(this, "aria-valuenow", this.value || null));
   }
   /**
@@ -38,61 +38,61 @@ let s = class extends x(u) {
    * the `min` and `max` values are used; if `value` is not provided, the default value is halfway between min and max
    * (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value).
    */
-  b(e = ((t) => (t = this.a) == null ? void 0 : t.valueAsNumber)()) {
-    let l, b;
-    this.a ? (l = +this.a.min, b = +this.a.max) : (l = +this.min, b = +this.max, e = this.value && this.value !== "" ? +this.value : this.valueAsNumber ? this.valueAsNumber : +this.min + (+this.max - +this.min) / 2);
-    const i = (e - l) / (b - l);
-    this.c = isNaN(i) || i < 0 ? 0 : i > 1 ? 1 : i, this.h(e);
+  _handleChange(e = ((o) => (o = this._rangeInput) == null ? void 0 : o.valueAsNumber)()) {
+    let l, a;
+    this._rangeInput ? (l = +this._rangeInput.min, a = +this._rangeInput.max) : (l = +this.min, a = +this.max, e = this.value && this.value !== "" ? +this.value : this.valueAsNumber ? this.valueAsNumber : +this.min + (+this.max - +this.min) / 2);
+    const i = (e - l) / (a - l);
+    this._valueFraction = isNaN(i) || i < 0 ? 0 : i > 1 ? 1 : i, this._syncValues(e);
   }
-  async g(e) {
+  async _handleKeydown(e) {
     if (e.key !== "Tab" && e.preventDefault(), !(this.disabled || this.readonly)) {
       if (e.key === "Home")
-        this.a.value = this.a.min;
+        this._rangeInput.value = this._rangeInput.min;
       else if (e.key === "End")
-        this.a.value = this.a.max;
+        this._rangeInput.value = this._rangeInput.max;
       else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
-        this.a.stepDown();
+        this._rangeInput.stepDown();
       else if (e.key === "ArrowRight" || e.key === "ArrowUp")
-        this.a.stepUp();
+        this._rangeInput.stepUp();
       else if (e.key === "PageDown")
-        this.a.stepDown((+this.a.max - +this.a.min) / 10);
+        this._rangeInput.stepDown((+this._rangeInput.max - +this._rangeInput.min) / 10);
       else if (e.key === "PageUp")
-        this.a.stepUp((+this.a.max - +this.a.min) / 10);
+        this._rangeInput.stepUp((+this._rangeInput.max - +this._rangeInput.min) / 10);
       else
         return;
-      this.b(), this.dispatchEvent(
+      this._handleChange(), this.dispatchEvent(
         new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })
-      ), this.d(new Event("change", { bubbles: !0, cancelable: !0, composed: !0 }));
+      ), this._emitChange(new Event("change", { bubbles: !0, cancelable: !0, composed: !0 }));
     }
   }
   /** Emits the change event. */
-  d(e) {
-    _(e, this), this.e.emit();
+  _emitChange(e) {
+    k(e, this), this._didChange.emit();
   }
   render() {
     return c`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? c`<sbb-icon name="${this.startIcon}"></sbb-icon>` : a}
+            ${this.startIcon ? c`<sbb-icon name="${this.startIcon}"></sbb-icon>` : b}
           </slot>
           <div
             class="sbb-slider__container"
-            style=${y({ "--sbb-slider-value-fraction": this.c.toString() })}
+            style=${_({ "--sbb-slider-value-fraction": this._valueFraction.toString() })}
           >
             <input
               tabindex="-1"
-              name=${this.name || a}
-              min=${this.min || a}
-              max=${this.max || a}
-              ?disabled=${this.disabled || this.readonly || a}
-              .valueAsNumber=${this.valueAsNumber || a}
-              value=${this.value || a}
+              name=${this.name || b}
+              min=${this.min || b}
+              max=${this.max || b}
+              ?disabled=${this.disabled || this.readonly || b}
+              .valueAsNumber=${this.valueAsNumber || b}
+              value=${this.value || b}
               class="sbb-slider__range-input"
               type="range"
-              @change=${(e) => this.d(e)}
-              @input=${() => this.b()}
-              ${f((e) => this.a = e)}
+              @change=${(e) => this._emitChange(e)}
+              @input=${() => this._handleChange()}
+              ${f((e) => this._rangeInput = e)}
             />
             <div class="sbb-slider__line">
               <div class="sbb-slider__selected-line"></div>
@@ -100,50 +100,50 @@ let s = class extends x(u) {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? c`<sbb-icon name="${this.endIcon}"></sbb-icon>` : a}
+            ${this.endIcon ? c`<sbb-icon name="${this.endIcon}"></sbb-icon>` : b}
           </slot>
         </div>
       </div>
     `;
   }
 };
-s.styles = A;
+s.styles = I;
 s.events = {
   didChange: "didChange"
 };
 r([
-  o()
+  t()
 ], s.prototype, "value", 2);
 r([
-  o({ attribute: "value-as-number", type: Number })
+  t({ attribute: "value-as-number", type: Number })
 ], s.prototype, "valueAsNumber", 2);
 r([
-  o({ reflect: !0 })
+  t({ reflect: !0 })
 ], s.prototype, "name", 2);
 r([
-  o()
+  t()
 ], s.prototype, "form", 2);
 r([
-  o()
+  t()
 ], s.prototype, "min", 2);
 r([
-  o()
+  t()
 ], s.prototype, "max", 2);
 r([
-  o({ type: Boolean })
+  t({ type: Boolean })
 ], s.prototype, "readonly", 2);
 r([
-  o({ attribute: "start-icon" })
+  t({ attribute: "start-icon" })
 ], s.prototype, "startIcon", 2);
 r([
-  o({ attribute: "end-icon" })
+  t({ attribute: "end-icon" })
 ], s.prototype, "endIcon", 2);
 r([
   m()
-], s.prototype, "c", 2);
+], s.prototype, "_valueFraction", 2);
 s = r([
   p("sbb-slider"),
-  g({
+  y({
     role: "slider"
   })
 ], s);

package/status.js

@@ -3,15 +3,15 @@ import { property as i, customElement as v } from "lit/decorators.js";
 import { SbbSlotStateController as m } from "./core/controllers.js";
 import { SbbIconNameMixin as f } from "./icon.js";
 import "./title.js";
-const h = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (n, e, b, o) => {
+const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
+var h = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (n, e, b, o) => {
   for (var t = o > 1 ? void 0 : o ? x(e, b) : e, a = n.length - 1, l; a >= 0; a--)
     (l = n[a]) && (t = (o ? l(e, b, t) : l(t)) || t);
-  return o && t && y(e, b, t), t;
+  return o && t && h(e, b, t), t;
 };
 let s = class extends f(u) {
   constructor() {
-    super(), this.a = /* @__PURE__ */ new Map([
+    super(), this._statusTypes = /* @__PURE__ */ new Map([
       ["info", "circle-information-small"],
       ["success", "circle-tick-small"],
       ["warning", "circle-exclamation-point-small"],
@@ -21,7 +21,7 @@ let s = class extends f(u) {
   renderIconSlot() {
     return c`
       <slot name="icon">
-        <sbb-icon name=${this.iconName ?? this.a.get(this.type)}></sbb-icon>
+        <sbb-icon name=${this.iconName ?? this._statusTypes.get(this.type)}></sbb-icon>
       </slot>
     `;
   }
@@ -41,7 +41,7 @@ let s = class extends f(u) {
     `;
   }
 };
-s.styles = h;
+s.styles = y;
 r([
   i({ reflect: !0 })
 ], s.prototype, "type", 2);

package/stepper/step-label.js

@@ -1,46 +1,46 @@
 import { css as l, html as n } from "lit";
-import { customElement as c } from "lit/decorators.js";
-import { SbbButtonBaseElement as p } from "../core/base-elements.js";
+import { customElement as p } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../core/base-elements.js";
 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, b; a >= 0; a--)
-    (b = t[a]) && (e = (i ? b(s, r, e) : b(e)) || e);
+  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;
 };
-let y = 0, o = class extends v(h(p)) {
+let y = 0, b = class extends v(h(c)) {
   constructor() {
-    super(...arguments), this.a = this.attachInternals(), this.e = new d(this), this.c = null, this.b = null;
+    super(...arguments), this._internals = this.attachInternals(), this._abort = new d(this), this._stepper = null, this._step = null;
   }
   /** The step controlled by the label. */
   get step() {
-    return this.b;
+    return this._step;
   }
   /**
    * Selects and configures the step label.
    * @internal
    */
   select() {
-    this.tabIndex = 0, this.a.ariaSelected = "true", this.toggleAttribute("data-selected", !0);
+    this.tabIndex = 0, this._internals.ariaSelected = "true", this.toggleAttribute("data-selected", !0);
   }
   /**
    * Deselects and configures the step label.
    * @internal
    */
   deselect() {
-    this.tabIndex = -1, this.a.ariaSelected = "false", this.toggleAttribute("data-selected", !1);
+    this.tabIndex = -1, this._internals.ariaSelected = "false", this.toggleAttribute("data-selected", !1);
   }
   /**
    * Configures the step label.
    * @internal
    */
   configure(t, s, r) {
-    r && (this.b = this.d()), this.a.ariaPosInSet = `${t}`, this.a.ariaSetSize = `${s}`;
+    r && (this._step = this._getStep()), this._internals.ariaPosInSet = `${t}`, this._internals.ariaSetSize = `${s}`;
   }
-  d() {
+  _getStep() {
     let t = this.nextElementSibling;
     for (; t && t.localName !== "sbb-step"; )
       t = t.nextElementSibling;
@@ -48,11 +48,11 @@ let y = 0, o = class extends v(h(p)) {
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = this.e.signal;
-    this.id = this.id || `sbb-step-label-${y++}`, this.a.ariaSelected = "false", this.c = this.closest("sbb-stepper"), this.b = this.d(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled")), this.addEventListener(
+    const t = this._abort.signal;
+    this.id = this.id || `sbb-step-label-${y++}`, this._internals.ariaSelected = "false", this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled")), this.addEventListener(
       "click",
       () => {
-        this.c && this.b && (this.c.selected = this.b);
+        this._stepper && this._step && (this._stepper.selected = this._step);
       },
       { signal: t }
     );
@@ -69,15 +69,15 @@ let y = 0, o = class extends v(h(p)) {
     `;
   }
 };
-o.styles = x;
-o = g([
-  c("sbb-step-label"),
+b.styles = x;
+b = g([
+  p("sbb-step-label"),
   f({
     slot: "step-label",
     tabindex: "-1",
     role: "tab"
   })
-], o);
+], b);
 export {
-  o as SbbStepLabelElement
+  b as SbbStepLabelElement
 };