@sbb-esta/lyne-elements 3.0.0-next.1 → 3.0.0-next.2

package/status/status.component.js

@@ -1,24 +1,20 @@
-var I = (t) => {
+var h = (t) => {
   throw TypeError(t);
 };
-var w = (t, e, a) => e.has(t) || I("Cannot " + a);
-var m = (t, e, a) => (w(t, e, "read from private field"), a ? a.call(t) : e.get(t)), _ = (t, e, a) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), r = (t, e, a, i) => (w(t, e, "write to private field"), i ? i.call(t, a) : e.set(t, a), a);
-import { __esDecorate as v, __runInitializers as n } from "tslib";
-import { css as T, LitElement as $, html as E } from "lit";
-import { customElement as D, property as h } from "lit/decorators.js";
-import { slotState as j, forceType as M, omitEmptyConverter as N } from "../core/decorators.js";
-import { SbbIconNameMixin as O } from "../icon.js";
-import "../title.js";
-const P = T`*,:before,:after{box-sizing:border-box}:host{--sbb-status-color: var(--sbb-color-iron);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-text-color-override: var(--sbb-color-granite);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5);--_sbb-status-icon-line-height: var(--sbb-typo-line-height-titles)}.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-override, 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-status-icon-line-height) - 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}`;
-let Q = (() => {
-  var b, c, p, o;
-  let t = [D("sbb-status"), j()], e, a = [], i, d = O($), y, f = [], g = [], x, z = [], k = [], C, L = [], S = [];
-  return o = class extends d {
+var y = (t, s, e) => s.has(t) || h("Cannot " + e);
+var f = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), b = (t, s, e, l) => (y(t, s, "write to private field"), l ? l.call(t, e) : s.set(t, e), e);
+import { __esDecorate as g, __runInitializers as n } from "tslib";
+import { css as x, LitElement as z, html as v } from "lit";
+import { customElement as S, property as k } from "lit/decorators.js";
+import { SbbIconNameMixin as E } from "../icon.js";
+const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-status-color: var(--sbb-color-iron);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.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-override, 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-title-font-size, var(--sbb-font-size-text-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
+let L = (() => {
+  var i, r;
+  let t = [S("sbb-status")], s, e = [], l, p = E(z), u, m = [], d = [];
+  return r = class extends p {
     constructor() {
       super(...arguments);
-      _(this, b);
-      _(this, c);
-      _(this, p);
+      _(this, i);
       this._statusTypes = /* @__PURE__ */ new Map([
         ["info", "circle-information-small"],
         ["success", "circle-tick-small"],
@@ -28,62 +24,50 @@ let Q = (() => {
         ["incomplete", "circle-dotted-part-x-small"],
         ["not-started", "circle-dotted-small"],
         ["in-progress", "circle-dotted-part-small"]
-      ]), r(this, b, n(this, f, "info")), r(this, c, (n(this, g), n(this, z, ""))), r(this, p, (n(this, k), n(this, L, "3"))), n(this, S);
+      ]), b(this, i, n(this, m, "info")), n(this, d);
     }
     /** The type of the status. */
     get type() {
-      return m(this, b);
+      return f(this, i);
     }
-    set type(l) {
-      r(this, b, l);
+    set type(a) {
+      b(this, i, a);
     }
-    /** Content of title. */
-    get titleContent() {
-      return m(this, c);
+    _handleSlotchange() {
+      const a = Array.from(this.children).find((o) => o.localName === "sbb-title");
+      a && (a.slot = "title");
     }
-    set titleContent(l) {
-      r(this, c, l);
-    }
-    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
-    get titleLevel() {
-      return m(this, p);
-    }
-    set titleLevel(l) {
-      r(this, p, l);
+    _configureTitle(a) {
+      const o = a.target.assignedElements().find((c) => c.localName === "sbb-title");
+      o && (customElements.upgrade(o), o.visualLevel = "5");
     }
     renderIconSlot() {
-      return E`
+      return v`
       <slot name="icon">
         <sbb-icon name=${this.iconName || this._statusTypes.get(this.type)}></sbb-icon>
       </slot>
     `;
     }
     render() {
-      return E`
+      return v`
       <div class="sbb-status">
         <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
         <span class="sbb-status__content">
-          <sbb-title class="sbb-status__title" level=${this.titleLevel} visual-level="5">
-            <slot name="title">${this.titleContent}</slot>
-          </sbb-title>
-          <p class="sbb-status__content-slot">
+          <slot name="title" @slotchange=${this._configureTitle}></slot>
+          <p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
             <slot></slot>
           </p>
         </span>
       </div>
     `;
     }
-  }, b = new WeakMap(), c = new WeakMap(), p = new WeakMap(), i = o, (() => {
-    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    y = [h({ reflect: !0 })], x = [M(), h({ attribute: "title-content", reflect: !0, converter: N })], C = [h({ attribute: "title-level" })], v(o, null, y, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (s) => "type" in s, get: (s) => s.type, set: (s, u) => {
-      s.type = u;
-    } }, metadata: l }, f, g), v(o, null, x, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, u) => {
-      s.titleContent = u;
-    } }, metadata: l }, z, k), v(o, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, u) => {
-      s.titleLevel = u;
-    } }, metadata: l }, L, S), v(null, e = { value: i }, t, { kind: "class", name: i.name, metadata: l }, null, a), i = e.value, l && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
-  })(), o.styles = P, n(i, a), i;
+  }, i = new WeakMap(), l = r, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    u = [k({ reflect: !0 })], g(r, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (o) => "type" in o, get: (o) => o.type, set: (o, c) => {
+      o.type = c;
+    } }, metadata: a }, m, d), g(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: a }, null, e), l = s.value, a && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), r.styles = I, n(l, e), l;
 })();
 export {
-  Q as SbbStatusElement
+  L as SbbStatusElement
 };

package/stepper/step/step.component.d.ts

@@ -28,10 +28,11 @@ export declare class SbbStepElement extends SbbStepElement_base {
      */
     private _resizeChange;
     private _stepper;
-    private _label;
     private _stepResizeObserver;
     /** The label of the step. */
+    private set label(value);
     get label(): SbbStepLabelElement | null;
+    private _label;
     constructor();
     /**
      * Selects and configures the step.

package/stepper/step/step.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,CAAC;;AAEF;;;;;GAKG;AACH,qBAEM,cAAe,SAAQ,mBAAoC;IAC/D,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAMlD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;;IAOD;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAQtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACjC;CACF"}
+{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,CAAC;;AAEF;;;;;GAKG;AACH,qBAEM,cAAe,SAAQ,mBAAoC;IAC/D,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAMlD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAE7B,OAAO,KAAK,KAAK,QAUhB;IACD,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IACD,OAAO,CAAC,MAAM,CAAoC;;IAOlD;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAM9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAQtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACjC;CACF"}

package/stepper/step/step.component.js

@@ -1,25 +1,28 @@
-import { __esDecorate as c, __runInitializers as m } from "tslib";
-import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
-import { css as v, LitElement as g, html as y } from "lit";
-import { customElement as f } from "lit/decorators.js";
-import { EventEmitter as d } from "../../core/eventing.js";
-import { SbbElementInternalsMixin as _ } from "../../core/mixins.js";
-const x = v`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}.sbb-step{--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:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
-let E = 0, L = (() => {
+import { __esDecorate as h, __runInitializers as d } from "tslib";
+import { ResizeController as c } from "@lit-labs/observers/resize-controller.js";
+import { css as m, LitElement as u, html as v } from "lit";
+import { customElement as g } from "lit/decorators.js";
+import { EventEmitter as o } from "../../core/eventing.js";
+import { SbbElementInternalsMixin as y, removeAriaElements as f, appendAriaElements as _ } from "../../core/mixins.js";
+const E = m`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}.sbb-step{--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:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
+let x = 0, A = (() => {
   var e;
-  let h = [f("sbb-step")], r, b = [], s, o = _(g);
-  var a = (e = class extends o {
+  let p = [g("sbb-step")], n, r = [], s, b = y(u);
+  var a = (e = class extends b {
     /** The label of the step. */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    set label(t) {
+      this.internals.ariaLabelledByElements = f(this.internals.ariaLabelledByElements, this._label), this._label = t instanceof Element ? t : null, this.internals.ariaLabelledByElements = _(this.internals.ariaLabelledByElements, this._label);
+    }
     get label() {
       return this._label;
     }
     constructor() {
-      var t;
-      super(), this._validate = new d(this, a.events.validate), this._resizeChange = new d(this, a.events.resizeChange, { bubbles: !0 }), this._stepper = null, this._label = null, this._stepResizeObserver = new u(this, {
+      super(), this._validate = new o(this, a.events.validate), this._resizeChange = new o(this, a.events.resizeChange, { bubbles: !0 }), this._stepper = null, this._stepResizeObserver = new c(this, {
         target: null,
         skipInitial: !0,
         callback: () => setTimeout(() => this._onStepElementResize())
-      }), (t = this.addEventListener) == null || t.call(this, "click", (n) => this._handleClick(n));
+      }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t));
     }
     /**
      * Selects and configures the step.
@@ -47,13 +50,12 @@ let E = 0, L = (() => {
      * @internal
      */
     configure(t) {
-      t && (this._label = this._getStepLabel()), this.label && this.setAttribute("aria-labelledby", this.label.id);
+      t && (this.label = this._getStepLabel());
     }
     /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
     _handleClick(t) {
-      var l, p;
-      const n = t.composedPath().filter((i) => i instanceof window.HTMLElement);
-      n.some((i) => this._isGoNextElement(i)) ? (l = this._stepper) == null || l.next() : n.some((i) => this._isGoPreviousElement(i)) && ((p = this._stepper) == null || p.previous());
+      const l = t.composedPath().filter((i) => i instanceof window.HTMLElement);
+      l.some((i) => this._isGoNextElement(i)) ? this._stepper?.next() : l.some((i) => this._isGoPreviousElement(i)) && this._stepper?.previous();
     }
     _isGoNextElement(t) {
       return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
@@ -71,7 +73,7 @@ let E = 0, L = (() => {
       return t;
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-step-${E++}`), this.slot || (this.slot = "step"), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
+      super.connectedCallback(), this.id ||= `sbb-step-${x++}`, this.slot ||= "step", this._stepper = this.closest("sbb-stepper"), this.label = this._getStepLabel();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this.updateComplete.then(() => {
@@ -79,7 +81,7 @@ let E = 0, L = (() => {
       });
     }
     render() {
-      return y`
+      return v`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
@@ -88,14 +90,14 @@ let E = 0, L = (() => {
     `;
     }
   }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    c(null, r = { value: s }, h, { kind: "class", name: s.name, metadata: t }, null, b), a = s = r.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "tabpanel", e.styles = x, e.events = {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    h(null, n = { value: s }, p, { kind: "class", name: s.name, metadata: t }, null, r), a = s = n.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.role = "tabpanel", e.styles = E, e.events = {
     validate: "validate",
     resizeChange: "resizeChange"
-  }, m(s, b), e);
+  }, d(s, r), e);
   return a = s;
 })();
 export {
-  L as SbbStepElement
+  A as SbbStepElement
 };

package/stepper/step-label/step-label.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { SbbStepElement } from '../step.js';
 declare const SbbStepLabelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
@@ -13,13 +13,13 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
     static readonly role = "tab";
     static styles: CSSResultGroup;
     /** The step controlled by the label. */
+    private set step(value);
     get step(): SbbStepElement | null;
-    private _stepper;
     private _step;
+    private _stepper;
     constructor();
     private _getStep;
     connectedCallback(): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     /**
      * Selects and configures the step label.
      * @internal

package/stepper/step-label/step-label.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;;GAMG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;;IAW5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAatB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;cAQ9D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;;GAMG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IAExC,OAAO,KAAK,IAAI,QAUf;IACD,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IACD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ,CAAkC;;IAWlD,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;IAazC;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;cAQ9D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/stepper/step-label/step-label.component.js

@@ -2,21 +2,24 @@ import { __esDecorate as n, __runInitializers as p } from "tslib";
 import { css as c, html as d } from "lit";
 import { customElement as f } from "lit/decorators.js";
 import { SbbButtonBaseElement as h } from "../../core/base-elements.js";
-import { SbbDisabledMixin as v } from "../../core/mixins.js";
-import { SbbIconNameMixin as x } from "../../icon.js";
-const m = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, 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){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius: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}`;
-let u = 0, k = (() => {
+import { SbbDisabledMixin as v, removeAriaElements as x, appendAriaElements as m } from "../../core/mixins.js";
+import { SbbIconNameMixin as u } from "../../icon.js";
+const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, 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){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius: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}`;
+let y = 0, I = (() => {
   var e;
-  let b = [f("sbb-step-label")], a, i = [], s, r = x(v(h));
+  let b = [f("sbb-step-label")], a, i = [], s, r = u(v(h));
   return e = class extends r {
     /** The step controlled by the label. */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    set step(t) {
+      this.internals.ariaControlsElements = x(this.internals.ariaControlsElements, this._step), this._step = t instanceof Element ? t : null, this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step);
+    }
     get step() {
       return this._step;
     }
     constructor() {
-      var t;
-      super(), this._stepper = null, this._step = null, (t = this.addEventListener) == null || t.call(this, "click", () => {
-        this._stepper && this._step && (this._stepper.selected = this._step);
+      super(), this._step = null, this._stepper = null, this.addEventListener?.("click", () => {
+        this._stepper && this.step && (this._stepper.selected = this.step);
       });
     }
     _getStep() {
@@ -26,10 +29,7 @@ let u = 0, k = (() => {
       return t;
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-step-label-${u++}`), this.slot || (this.slot = "step-label"), this.internals.ariaSelected = "false", this.tabIndex = -1, this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled"));
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this.step && this.setAttribute("aria-controls", this.step.id);
+      super.connectedCallback(), this.id ||= `sbb-step-label-${y++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._stepper = this.closest("sbb-stepper"), this.step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled"));
     }
     /**
      * Selects and configures the step label.
@@ -50,7 +50,7 @@ let u = 0, k = (() => {
      * @internal
      */
     configure(t, o, l) {
-      l && (this._step = this._getStep()), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${o}`;
+      l && (this.step = this._getStep()), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${o}`;
     }
     render() {
       return d`
@@ -63,8 +63,8 @@ let u = 0, k = (() => {
   }, s = e, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
     n(null, a = { value: s }, b, { kind: "class", name: s.name, metadata: t }, null, i), s = a.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "tab", e.styles = m, p(s, i), s;
+  })(), e.role = "tab", e.styles = g, p(s, i), s;
 })();
 export {
-  k as SbbStepLabelElement
+  I as SbbStepLabelElement
 };