@sbb-esta/lyne-elements 4.7.0 → 4.8.0

package/status/status.component.js

@@ -1,69 +1,2 @@
-var d = (t) => {
-  throw TypeError(t);
-};
-var g = (t, s, e) => s.has(t) || d("Cannot " + e);
-var y = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, r) => (g(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
-import { __esDecorate as f, __runInitializers as b } from "tslib";
-import { css as v, LitElement as x, html as S } from "lit";
-import { customElement as z, property as k } from "lit/decorators.js";
-import { SbbElementInternalsMixin as I } from "../core/mixins.js";
-import { boxSizingStyles as E } from "../core/styles.js";
-import { SbbIconNameMixin as N } from "../icon.js";
-const T = v`:host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-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 P = (() => {
-  var i, o;
-  let t = [z("sbb-status")], s, e = [], r, p = N(I(x)), u, m = [], h = [];
-  return o = class extends p {
-    constructor() {
-      super(...arguments);
-      _(this, i);
-      this._statusTypes = /* @__PURE__ */ new Map([
-        ["info", "circle-information-small"],
-        ["success", "circle-tick-small"],
-        ["warning", "circle-exclamation-point-small"],
-        ["error", "circle-cross-small"],
-        ["pending", "circle-three-dots-small"],
-        ["incomplete", "circle-dotted-part-x-small"],
-        ["not-started", "circle-dotted-small"],
-        ["in-progress", "circle-dotted-part-small"]
-      ]), c(this, i, b(this, m, "info")), b(this, h);
-    }
-    /** The type of the status. */
-    get type() {
-      return y(this, i);
-    }
-    set type(a) {
-      c(this, i, a);
-    }
-    _handleSlotchange() {
-      const a = Array.from(this.children).find((l) => l.localName === "sbb-title");
-      a && (a.slot = "title");
-    }
-    _configureTitle(a) {
-      const l = a.target.assignedElements().find((n) => n.localName === "sbb-title");
-      l && (customElements.upgrade(l), l.visualLevel = "5");
-    }
-    renderIconName() {
-      return super.renderIconName() || this._statusTypes.get(this.type);
-    }
-    render() {
-      return S`
-      <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
-      <span class="sbb-status__content">
-        <slot name="title" @slotchange=${this._configureTitle}></slot>
-        <p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
-          <slot></slot>
-        </p>
-      </span>
-    `;
-    }
-  }, i = new WeakMap(), r = o, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    u = [k({ reflect: !0 })], f(o, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (l) => "type" in l, get: (l) => l.type, set: (l, n) => {
-      l.type = n;
-    } }, metadata: a }, m, h), f(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: a }, null, e), r = s.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), o.styles = [E, T], b(r, e), r;
-})();
-export {
-  P as SbbStatusElement
-};
+import { t as e } from "../status.component-CmLdUn37.js";
+export { e as SbbStatusElement };

package/status.component-CmLdUn37.js

@@ -0,0 +1,83 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { boxSizingStyles as o } from "./core/styles.js";
+import { SbbIconNameMixin as s } from "./icon.js";
+//#region src/elements/status/status.scss?lit&inline
+var c = n`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-color-2)}:host([type=pending]){--sbb-status-color:var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color:var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color:var(--sbb-color-5);--sbb-status-text-color:var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color:var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}`, l = (() => {
+	let n = s(a), l, u = [], d = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], e(this, null, l, {
+				kind: "accessor",
+				name: "type",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "type" in e,
+					get: (e) => e.type,
+					set: (e, t) => {
+						e.type = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-status";
+		}
+		static {
+			this.styles = [o, c];
+		}
+		#e;
+		get type() {
+			return this.#e;
+		}
+		set type(e) {
+			this.#e = e;
+		}
+		_handleSlotchange() {
+			let e = Array.from(this.children).find((e) => e.localName === "sbb-title");
+			e && (e.slot = "title");
+		}
+		_configureTitle(e) {
+			let t = e.target.assignedElements().find((e) => e.localName === "sbb-title");
+			t && (customElements.upgrade(t), t.visualLevel = "5");
+		}
+		renderIconName() {
+			return super.renderIconName() || this._statusTypes.get(this.type);
+		}
+		render() {
+			return r`
+      <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
+      <span class="sbb-status__content">
+        <slot name="title" @slotchange=${this._configureTitle}></slot>
+        <p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
+          <slot></slot>
+        </p>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), this._statusTypes = new Map([
+				["info", "circle-information-small"],
+				["success", "circle-tick-small"],
+				["warning", "circle-exclamation-point-small"],
+				["error", "circle-cross-small"],
+				["pending", "circle-three-dots-small"],
+				["incomplete", "circle-dotted-part-x-small"],
+				["not-started", "circle-dotted-small"],
+				["in-progress", "circle-dotted-part-small"]
+			]), this.#e = t(this, u, "info"), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { l as t };

package/status.js

@@ -1,4 +1,6 @@
-import { SbbStatusElement as b } from "./status/status.component.js";
-export {
-  b as SbbStatusElement
-};
+import { t as e } from "./status.component-CmLdUn37.js";
+import "./status.pure.js";
+//#region src/elements/status.ts
+e.define();
+//#endregion
+export { e as SbbStatusElement };

package/status.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./status.component-CmLdUn37.js";
+export { e as SbbStatusElement };

package/step-label.component-DTkviH8Q.js

@@ -0,0 +1,82 @@
+import { css as e, html as t } from "lit";
+import { SbbButtonBaseElement as n } from "./core/base-elements.js";
+import { SbbDisabledMixin as r, appendAriaElements as i, removeAriaElements as a } from "./core/mixins.js";
+import { boxSizingStyles as o } from "./core/styles.js";
+import { SbbPropertyWatcherController as s } from "./core/controllers.js";
+import { SbbIconNameMixin as c } from "./icon.js";
+//#region src/elements/stepper/step-label/step-label.scss?lit&inline
+var l = e`:host{--sbb-step-label-color:var(--sbb-color-4);--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-border-color-4-inverted);--sbb-step-label-prefix-background-color:var(--sbb-background-color-1);--sbb-step-label-gap:var(--sbb-spacing-fixed-4x);min-width:0;max-width:fit-content;position:relative}:host:before{--sbb-text-font-size:var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);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);line-height:1;position:absolute;inset-block-start:calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2)}@media (forced-colors:active){:host{--sbb-step-label-color:ButtonText;--sbb-step-label-prefix-border-color:ButtonText}}:host(:is(:state(selected),[state--selected])){--sbb-text-font-size:var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);--sbb-step-label-color:var(--sbb-color-3);font-weight:700}@media (forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:Highlight!important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap:var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size:var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-graphite));--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:var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color:var(--sbb-background-color-3);--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(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size:var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);cursor:var(--sbb-step-label-cursor);gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color);font-weight:700;display:flex;position:relative}:host(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size:var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";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;position:absolute}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::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}`, u = 0, d = class extends c(r(n)) {
+	static {
+		this.elementName = "sbb-step-label";
+	}
+	static {
+		this.role = "tab";
+	}
+	static {
+		this.styles = [o, l];
+	}
+	get step() {
+		return this._step;
+	}
+	get stepper() {
+		return this.closest("sbb-stepper");
+	}
+	set disabled(e) {
+		super.disabled = e, this.toggleState("user-disabled", e);
+	}
+	get disabled() {
+		return super.disabled;
+	}
+	constructor() {
+		super(), this._step = null, this.addEventListener?.("click", () => {
+			let e = this.stepper;
+			e && this.step && this._isNotDeactivatedByLinearMode(this.step) && (e.selected = this.step);
+		}), this.addController(new s(this, () => this.stepper, {
+			orientation: (e) => {
+				this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = e.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+			},
+			size: (e) => {
+				this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+			}
+		}));
+	}
+	_isNotDeactivatedByLinearMode(e) {
+		let t = this.stepper;
+		if (t?.linear && t.selectedIndex !== null) {
+			let n = t.steps.indexOf(e);
+			return n < t.selectedIndex || n === t.selectedIndex + 1;
+		}
+		return !0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id ||= `sbb-step-label-${u++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
+	}
+	select() {
+		this.tabIndex = 0, this.internals.ariaSelected = "true", this.internals.states.add("selected");
+	}
+	deselect() {
+		this.tabIndex = -1, this.internals.ariaSelected = "false", this.internals.states.delete("selected");
+	}
+	configure(e, t, n) {
+		n && this._assignStep(), this.internals.ariaPosInSet = `${e}`, this.internals.ariaSetSize = `${t}`;
+	}
+	_assignStep() {
+		let e = this.nextElementSibling;
+		for (; e && e.localName !== "sbb-step";) e = e.nextElementSibling;
+		let t = e;
+		this.internals.ariaControlsElements = a(this.internals.ariaControlsElements, this._step), this._step = t instanceof Element ? t : null, this.internals.ariaControlsElements = i(this.internals.ariaControlsElements, this._step);
+	}
+	disable(e) {
+		super.disabled = e;
+	}
+	render() {
+		return t`
+      <div class="sbb-step-label">
+        <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+        <span class="sbb-step-label__text"><slot></slot></span>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { d as t };

package/step.component-eKVtXlT4.js

@@ -0,0 +1,94 @@
+import { css as e, html as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+import { appendAriaElements as r, removeAriaElements as i } from "./core/mixins.js";
+import { boxSizingStyles as a } from "./core/styles.js";
+import { SbbPropertyWatcherController as o } from "./core/controllers.js";
+import { ResizeController as s } from "@lit-labs/observers/resize-controller.js";
+//#region src/elements/stepper/step/step.scss?lit&inline
+var c = e`: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;display:contents}:host(:is(:state(selected),[state--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(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position:absolute;--sbb-step-inset-block-start:0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{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;margin-inline-start:var(--sbb-spacing-fixed-4x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--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-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);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;inset-block-start:var(--sbb-step-inset-block-start)}@starting-style{.sbb-step{--sbb-step-opacity:0}}`, l = 0, u = class extends n {
+	static {
+		this.elementName = "sbb-step";
+	}
+	static {
+		this.role = "tabpanel";
+	}
+	static {
+		this.styles = [a, c];
+	}
+	static {
+		this.events = {
+			validate: "validate",
+			resizechange: "resizechange"
+		};
+	}
+	get label() {
+		return this._label;
+	}
+	get stepper() {
+		return this.closest("sbb-stepper");
+	}
+	constructor() {
+		super(), this._stepResizeObserver = new s(this, {
+			target: null,
+			skipInitial: !0,
+			callback: () => setTimeout(() => this._onStepElementResize())
+		}), this._label = null, this.addEventListener?.("click", (e) => this._handleClick(e)), this.addController(new o(this, () => this.stepper, { orientation: (e) => {
+			this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = e.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+		} }));
+	}
+	select() {
+		!this.hasUpdated || !this.label || (this.internals.states.add("selected"), this.label.select());
+	}
+	deselect() {
+		this.label && (this.internals.states.delete("selected"), this.label.deselect());
+	}
+	validate(e) {
+		return this.dispatchEvent(new CustomEvent("validate", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: e
+		}));
+	}
+	configure(e) {
+		e && this._assignLabel();
+	}
+	_handleClick(e) {
+		let t = e.composedPath().filter((e) => e instanceof window.HTMLElement);
+		t.some((e) => this._isGoNextElement(e)) ? this.stepper?.next() : t.some((e) => this._isGoPreviousElement(e)) && this.stepper?.previous();
+	}
+	_isGoNextElement(e) {
+		return e.hasAttribute("sbb-stepper-next") && !e.hasAttribute("disabled");
+	}
+	_isGoPreviousElement(e) {
+		return e.hasAttribute("sbb-stepper-previous") && !e.hasAttribute("disabled");
+	}
+	_onStepElementResize() {
+		this.matches(":is(:state(selected),[state--selected])") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id ||= `sbb-step-${l++}`, this.slot ||= "step", this._assignLabel();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.updateComplete.then(() => {
+			this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+		});
+	}
+	_assignLabel() {
+		let e = this.previousElementSibling;
+		for (; e && e.localName !== "sbb-step-label";) e = e.previousElementSibling;
+		let t = e;
+		this.internals.ariaLabelledByElements = i(this.internals.ariaLabelledByElements, this._label), this._label = t instanceof Element ? t : null, this.internals.ariaLabelledByElements = r(this.internals.ariaLabelledByElements, this._label);
+	}
+	render() {
+		return t`
+      <div class="sbb-step--wrapper">
+        <div class="sbb-step">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { u as t };

package/stepper/step/step.component.js

@@ -1,116 +1,2 @@
-import { __esDecorate as b, __runInitializers as p } from "tslib";
-import { ResizeController as h } from "@lit-labs/observers/resize-controller.js";
-import { css as d, LitElement as c, html as m } from "lit";
-import { customElement as u } from "lit/decorators.js";
-import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
-import { SbbElementInternalsMixin as y, removeAriaElements as g, appendAriaElements as f } from "../../core/mixins.js";
-import { boxSizingStyles as _ } from "../../core/styles.js";
-const E = d`: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;display:contents}:host(:is(:state(selected),[state--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(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host(:is(:state(orientation-vertical),[state--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(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--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-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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);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 l = [u("sbb-step")], n, r = [], s, o = y(c);
-  return e = class extends o {
-    /** The label of the step. */
-    get label() {
-      return this._label;
-    }
-    get stepper() {
-      return this.closest("sbb-stepper");
-    }
-    constructor() {
-      super(), this._stepResizeObserver = new h(this, {
-        target: null,
-        skipInitial: !0,
-        callback: () => setTimeout(() => this._onStepElementResize())
-      }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t)), this.addController(new v(this, () => this.stepper, {
-        orientation: (t) => {
-          this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
-        }
-      }));
-    }
-    /**
-     * Selects and configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    select() {
-      !this.hasUpdated || !this.label || (this.internals.states.add("selected"), this.label.select());
-    }
-    /**
-     * Deselects and configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    deselect() {
-      this.label && (this.internals.states.delete("selected"), this.label.deselect());
-    }
-    /**
-     * Emits a validate event whenever step switch is triggered.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    validate(t) {
-      return this.dispatchEvent(new CustomEvent("validate", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0,
-        detail: t
-      }));
-    }
-    /**
-     * Configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    configure(t) {
-      t && this._assignLabel();
-    }
-    /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
-    _handleClick(t) {
-      const i = t.composedPath().filter((a) => a instanceof window.HTMLElement);
-      i.some((a) => this._isGoNextElement(a)) ? this.stepper?.next() : i.some((a) => this._isGoPreviousElement(a)) && this.stepper?.previous();
-    }
-    _isGoNextElement(t) {
-      return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
-    }
-    _isGoPreviousElement(t) {
-      return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
-    }
-    _onStepElementResize() {
-      this.matches(":is(:state(selected),[state--selected])") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-${x++}`, this.slot ||= "step", this._assignLabel();
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this.updateComplete.then(() => {
-        this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
-      });
-    }
-    _assignLabel() {
-      let t = this.previousElementSibling;
-      for (; t && t.localName !== "sbb-step-label"; )
-        t = t.previousElementSibling;
-      const i = t;
-      this.internals.ariaLabelledByElements = g(this.internals.ariaLabelledByElements, this._label), this._label = i instanceof Element ? i : null, this.internals.ariaLabelledByElements = f(this.internals.ariaLabelledByElements, this._label);
-    }
-    render() {
-      return m`
-      <div class="sbb-step--wrapper">
-        <div class="sbb-step">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-    }
-  }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, n = { value: s }, l, { kind: "class", name: s.name, metadata: t }, null, r), 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"
-  }, p(s, r), s;
-})();
-export {
-  A as SbbStepElement
-};
+import { t as e } from "../../step.component-eKVtXlT4.js";
+export { e as SbbStepElement };

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

@@ -1,102 +1,2 @@
-import { __esDecorate as n, __runInitializers as p } from "tslib";
-import { css as c, html as d } from "lit";
-import { customElement as h } from "lit/decorators.js";
-import { SbbButtonBaseElement as f } from "../../core/base-elements.js";
-import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
-import { SbbDisabledMixin as x, removeAriaElements as u, appendAriaElements as m } from "../../core/mixins.js";
-import { boxSizingStyles as g } from "../../core/styles.js";
-import { SbbIconNameMixin as y } from "../../icon.js";
-const z = c`:host{--sbb-step-label-color: var(--sbb-color-4);--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-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-l) * var(--sbb-typo-line-height-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(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--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: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--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(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-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(:is(:state(orientation-horizontal),[state--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 _ = 0, B = (() => {
-  var s;
-  let l = [h("sbb-step-label")], r, o = [], i, b = y(x(f));
-  return s = class extends b {
-    /** The step controlled by the label. */
-    get step() {
-      return this._step;
-    }
-    get stepper() {
-      return this.closest("sbb-stepper");
-    }
-    set disabled(t) {
-      super.disabled = t, this.toggleState("user-disabled", t);
-    }
-    get disabled() {
-      return super.disabled;
-    }
-    constructor() {
-      super(), this._step = null, this.addEventListener?.("click", () => {
-        const t = this.stepper;
-        t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
-      }), this.addController(new v(this, () => this.stepper, {
-        orientation: (t) => {
-          this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
-        },
-        size: (t) => {
-          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-        }
-      }));
-    }
-    _isNotDeactivatedByLinearMode(t) {
-      const e = this.stepper;
-      if (e?.linear && e.selectedIndex !== null) {
-        const a = e.steps.indexOf(t);
-        return a < e.selectedIndex || a === e.selectedIndex + 1;
-      }
-      return !0;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
-    }
-    /**
-     * Selects and configures the step label.
-     * @internal
-     */
-    select() {
-      this.tabIndex = 0, this.internals.ariaSelected = "true", this.internals.states.add("selected");
-    }
-    /**
-     * Deselects and configures the step label.
-     * @internal
-     */
-    deselect() {
-      this.tabIndex = -1, this.internals.ariaSelected = "false", this.internals.states.delete("selected");
-    }
-    /**
-     * Configures the step label.
-     * @internal
-     */
-    configure(t, e, a) {
-      a && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
-    }
-    _assignStep() {
-      let t = this.nextElementSibling;
-      for (; t && t.localName !== "sbb-step"; )
-        t = t.nextElementSibling;
-      const e = t;
-      this.internals.ariaControlsElements = u(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step);
-    }
-    /**
-     * @internal
-     * Disables the step label and avoids setting the `disabled` state to preserve the initial
-     * disabled state in case of switching between linear and non-linear mode.
-     */
-    disable(t) {
-      super.disabled = t;
-    }
-    render() {
-      return d`
-      <div class="sbb-step-label">
-        <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
-        <span class="sbb-step-label__text"><slot></slot></span>
-      </div>
-    `;
-    }
-  }, i = s, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    n(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: t }, null, o), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), s.role = "tab", s.styles = [g, z], p(i, o), i;
-})();
-export {
-  B as SbbStepLabelElement
-};
+import { t as e } from "../../step-label.component-DTkviH8Q.js";
+export { e as SbbStepLabelElement };

package/stepper/step-label.js

@@ -1,4 +1,4 @@
-import { SbbStepLabelElement as t } from "./step-label/step-label.component.js";
-export {
-  t as SbbStepLabelElement
-};
+import { t as e } from "../step-label.component-DTkviH8Q.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/stepper/step-label.js' has been deprecated.\nUse either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.");
+//#endregion
+export { e as SbbStepLabelElement };

package/stepper/step.js

@@ -1,4 +1,4 @@
-import { SbbStepElement as b } from "./step/step.component.js";
-export {
-  b as SbbStepElement
-};
+import { t as e } from "../step.component-eKVtXlT4.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/stepper/step.js' has been deprecated.\nUse either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.");
+//#endregion
+export { e as SbbStepElement };