@sbb-esta/lyne-elements 4.11.0 → 5.0.0-next.1

package/status/status.component.js

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

package/status.component-5SKEusnj.js

@@ -0,0 +1,82 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a, boxSizingStyles as o } from "./core.js";
+import { SbbIconNameMixin as s } from "./icon.pure.js";
+//#region src/elements/status/status.scss?inline
+var c = ":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);line-height:var(--sbb-typo-line-height-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}", l = (() => {
+	let l = s(a), u, d = [], f = [];
+	return class extends l {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			u = [i({ reflect: !0 })], e(this, null, u, {
+				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
+			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-status";
+		}
+		static {
+			this.styles = [o, r(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 n`
+      <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, d, "info"), t(this, f);
+		}
+	};
+})();
+//#endregion
+export { l as t };

package/status.js

@@ -1,4 +1,4 @@
-import { t as e } from "./status.component-BFyXTFXH.js";
+import { t as e } from "./status.component-5SKEusnj.js";
 import "./status.pure.js";
 //#region src/elements/status.ts
 e.define();

package/status.pure.js

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

package/step-label.component-DM7lQw8b.js

@@ -0,0 +1,77 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbButtonBaseElement as n, SbbDisabledMixin as r, SbbPropertyWatcherController as i, appendAriaElements as a, boxSizingStyles as o, removeAriaElements as s } from "./core.js";
+import { SbbIconNameMixin as c } from "./icon.pure.js";
+//#region src/elements/stepper/step-label/step-label.scss?inline
+var l = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-m);--_sbb-step-label-inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);--_sbb-step-label-translate-y: calc( -50% + var(--sbb-step-label-translate-y-content-hover, 0rem) );--_sbb-step-label-prefix-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) );position:relative;display:flex;min-width:0;max-width:fit-content;gap:var(--sbb-step-label-gap);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host:before{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:var(--sbb-text-font-size-xxs);font-weight:var(--sbb-step-label-font-weight-selected, normal);inset-block-start:var(--_sbb-step-label-inset-block-start);inset-inline-start:var(--_sbb-step-label-inset-inline-start);line-height:1;z-index:1;translate:-50% var(--_sbb-step-label-translate-y);transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: var(--sbb-color-3);--sbb-step-label-font-weight-selected: bold}@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);--sbb-step-label-font-size: var(--sbb-text-font-size-m);--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-s)}: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__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:var(--_sbb-step-label-prefix-inset-block-start)}.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}.sbb-step-label__text{font-weight:700}: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);translate:0 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,translate}", u = class extends c(r(n)) {
+	static {
+		this.elementName = "sbb-step-label";
+	}
+	static {
+		this.role = "tab";
+	}
+	static {
+		this.styles = [o, t(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 i(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.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 = s(this.internals.ariaControlsElements, this._step), this._step = t instanceof Element ? t : null, this.internals.ariaControlsElements = a(this.internals.ariaControlsElements, this._step);
+	}
+	disable(e) {
+		super.disabled = e;
+	}
+	render() {
+		return e`
+      <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+      <span class="sbb-step-label__text"><slot></slot></span>
+    `;
+	}
+};
+//#endregion
+export { u as t };

package/step.component-DuLOqjZk.js

@@ -0,0 +1,89 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n, SbbPropertyWatcherController as r, appendAriaElements as i, boxSizingStyles as a, removeAriaElements as o } from "./core.js";
+import { ResizeController as s } from "@lit-labs/observers/resize-controller.js";
+//#region src/elements/stepper/step/step.scss?inline
+var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){margin-inline-start:var(--sbb-step-margin-inline-start);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])){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}: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}.sbb-step{position:var(--sbb-step-position, initial);width:100%;inset-block-start:var(--sbb-step-inset-block-start, unset);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display, none);height:var(--sbb-step-height, 0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay, 0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}", l = class extends n {
+	static {
+		this.elementName = "sbb-step";
+	}
+	static {
+		this.role = "tabpanel";
+	}
+	static {
+		this.styles = [a, t(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 r(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.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 = o(this.internals.ariaLabelledByElements, this._label), this._label = t instanceof Element ? t : null, this.internals.ariaLabelledByElements = i(this.internals.ariaLabelledByElements, this._label);
+	}
+	render() {
+		return e`
+      <div class="sbb-step">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { l as t };

package/stepper/step/step.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../step.component-uBZl9yiJ.js";
+import { t as e } from "../../step.component-DuLOqjZk.js";
 export { e as SbbStepElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../step-label.component-DnQBwnL8.js";
+import { t as e } from "../../step-label.component-DM7lQw8b.js";
 export { e as SbbStepLabelElement };

package/stepper/stepper/stepper.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../stepper.component-CYLW1eRI.js";
+import { n as e, t } from "../../stepper.component-8IXNrdx7.js";
 export { t as SbbStepChangeEvent, e as SbbStepperElement };

package/stepper.component-8IXNrdx7.js

@@ -0,0 +1,279 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a, SbbMediaMatcherController as o, SbbMediaQueryBreakpointLargeAndAbove as s, SbbMediaQueryBreakpointSmallAndAbove as c, SbbMediaQueryBreakpointUltraAndAbove as l, SbbMediaQueryBreakpointZeroAndAbove as u, boxSizingStyles as d, forceType as f, getNextElementIndex as p, isArrowKeyPressed as m, isLean as h } from "./core.js";
+import { IntersectionController as g } from "@lit-labs/observers/intersection-controller.js";
+//#region src/elements/stepper/stepper/stepper.scss?inline
+var _ = ":host{--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:\"\";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size, 0);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size, 0);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}", v = 150, y = {
+	zero: u,
+	small: c,
+	large: s,
+	ultra: l
+}, b = class extends Event {
+	constructor(e, t, n, r) {
+		super("stepchange", {
+			bubbles: !0,
+			composed: !0
+		}), this.selectedIndex = e, this.previousIndex = t, this.selectedStep = n, this.previousStep = r;
+	}
+}, x = (() => {
+	let s = a, c = [], l, u = [], x = [], S, C, w = [], T = [], E, D = [], O = [], k, A;
+	return class extends s {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+			l = [f(), i({ type: Boolean })], S = [i({
+				attribute: "horizontal-from",
+				reflect: !0
+			})], C = [i({ reflect: !0 })], E = [i({ reflect: !0 })], k = [i({ attribute: !1 })], A = [i({
+				attribute: "selected-index",
+				type: Number
+			})], e(this, null, l, {
+				kind: "accessor",
+				name: "linear",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "linear" in e,
+					get: (e) => e.linear,
+					set: (e, t) => {
+						e.linear = t;
+					}
+				},
+				metadata: t
+			}, u, x), e(this, null, S, {
+				kind: "setter",
+				name: "horizontalFrom",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "horizontalFrom" in e,
+					set: (e, t) => {
+						e.horizontalFrom = t;
+					}
+				},
+				metadata: t
+			}, null, c), e(this, null, C, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, w, T), e(this, null, E, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, D, O), e(this, null, k, {
+				kind: "setter",
+				name: "selected",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "selected" in e,
+					set: (e, t) => {
+						e.selected = t;
+					}
+				},
+				metadata: t
+			}, null, c), e(this, null, A, {
+				kind: "setter",
+				name: "selectedIndex",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "selectedIndex" in e,
+					set: (e, t) => {
+						e.selectedIndex = t;
+					}
+				},
+				metadata: t
+			}, null, c), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-stepper";
+		}
+		static {
+			this.styles = [d, r(_)];
+		}
+		static {
+			this.events = { stepchange: "stepchange" };
+		}
+		#e;
+		get linear() {
+			return this.#e;
+		}
+		set linear(e) {
+			this.#e = e;
+		}
+		set horizontalFrom(e) {
+			this._horizontalFrom = e && y[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+		}
+		get horizontalFrom() {
+			return this._horizontalFrom;
+		}
+		#t;
+		get orientation() {
+			return this.#t;
+		}
+		set orientation(e) {
+			this.#t = e;
+		}
+		#n;
+		get size() {
+			return this.#n;
+		}
+		set size(e) {
+			this.#n = e;
+		}
+		set selected(e) {
+			this._loaded && this._select(e), this._requestedSelected = e;
+		}
+		get selected() {
+			return this.querySelector?.("sbb-step:is(:state(selected),[state--selected])") ?? null;
+		}
+		set selectedIndex(e) {
+			this._loaded && e !== null && this._select(this.steps[e]), this._requestedSelectedIndex = e;
+		}
+		get selectedIndex() {
+			return this.selected ? this.steps.indexOf(this.selected) : null;
+		}
+		get steps() {
+			let e = [];
+			return this.querySelectorAll?.("sbb-step").forEach((t) => {
+				customElements.upgrade(t), e.push(t);
+			}), e;
+		}
+		get _enabledSteps() {
+			return this.steps.filter((e) => e.label ? (customElements.upgrade(e.label), !e.label.disabled) : !1);
+		}
+		constructor() {
+			super(), this._observer = (t(this, c), new g(this, {
+				target: null,
+				callback: (e) => {
+					e.forEach((e) => {
+						e.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
+					});
+				}
+			})), this.#e = t(this, u, !1), this._horizontalFrom = (t(this, x), null), this.#t = t(this, w, "horizontal"), this.#n = (t(this, T), t(this, D, h() ? "s" : "m")), this._requestedSelected = (t(this, O), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new o(this, {}), this._onStepperResize = () => {
+				this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.internals.states.add("disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("disable-animation"), v);
+			}, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
+		}
+		next() {
+			this.selectedIndex !== null && this._select(this.steps[this.selectedIndex + 1]);
+		}
+		previous() {
+			this.selectedIndex !== null && this._select(this.steps[this.selectedIndex - 1]);
+		}
+		reset() {
+			let e = this.closest("form");
+			e ? e.reset() : this.querySelectorAll("form").forEach((e) => e.reset()), this.selectedIndex = 0, document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
+		}
+		_isSelectable(e) {
+			return e ? (customElements.upgrade(e), !(e.label && (customElements.upgrade(e.label), !this.linear && e.label.disabled))) : !1;
+		}
+		_select(e) {
+			if (!this._isSelectable(e) || e === this.selected) return;
+			let t = this.selectedIndex, n = this.selected, r = {
+				currentIndex: t,
+				currentStep: n,
+				nextIndex: this.selectedIndex === null ? null : this.selectedIndex + 1,
+				nextStep: this.selectedIndex === null ? null : this.steps[this.selectedIndex + 1]
+			};
+			this.selected && !this.selected.validate(r) || (this.selected?.deselect(), e.select(), this.dispatchEvent(new b(this.selectedIndex, t, this.selected, n)), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus());
+		}
+		_setMarkerSize() {
+			if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label) return;
+			let e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
+			this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
+		}
+		_setStepperHeight(e) {
+			if (e && e.shadowRoot) {
+				let t = e.shadowRoot.querySelector(".sbb-step");
+				t && this.style?.setProperty("--sbb-stepper-content-height", `${t.offsetHeight}px`);
+			}
+		}
+		_calculateLabelOffsetTop() {
+			if (this.selectedIndex === null) return;
+			let e = 0;
+			for (let t of this.steps) {
+				if (t === this.selected) break;
+				e = t.label.offsetHeight + e;
+			}
+			return e + this.selected.label.offsetHeight + parseFloat(getComputedStyle(this).getPropertyValue("--sbb-spacing-fixed-6x")) * 16 * this.selectedIndex;
+		}
+		_onSelectedStepResize(e) {
+			this._setStepperHeight(e.target);
+		}
+		_configure() {
+			this.steps.forEach((e, t, n) => {
+				e.configure(this._loaded), e.label?.configure(t + 1, n.length, this._loaded);
+			}), this._select(this.selected || this._enabledSteps[0]);
+		}
+		_updateLabels() {
+			this.steps.forEach((e) => {
+				e.slot = this.orientation === "horizontal" ? "step" : "step-label";
+			});
+		}
+		_checkOrientation() {
+			this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(y[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+		}
+		_configureLinearMode() {
+			this.steps.forEach((e, t) => {
+				e.label && (customElements.upgrade(e.label), e.label.disable(this.linear && t > this.selectedIndex || !this.linear && e.label.matches(":is(:state(user-disabled),[state--user-disabled])")));
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback(), window.addEventListener("resize", this._onStepperResize, { passive: !0 }), this.toggleState("disable-animation", !this._loaded);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), window.removeEventListener("resize", this._onStepperResize);
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this.updateComplete.then(() => {
+				this._loaded = !0, this._configure(), this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1 ? this.selectedIndex = this.steps.indexOf(this._requestedSelected) : this._requestedSelectedIndex ? this.selectedIndex = this._requestedSelectedIndex : this.selectedIndex = 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), v);
+			});
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode(), e.has("size") && this._setMarkerSize();
+		}
+		_handleKeyDown(e) {
+			let t = this._enabledSteps;
+			if (!(!t || e.target !== this && e.target.parentElement !== this) && m(e)) {
+				let n = p(e, t.indexOf(this.selected), t.length);
+				this._select(t[n]), e.preventDefault();
+			}
+		}
+		render() {
+			return n`
+      <div class="sbb-stepper__labels" role="tablist">
+        <slot name="step-label" @slotchange=${this._configure}></slot>
+      </div>
+      <div class="sbb-stepper__steps">
+        <slot name="step" @slotchange=${this._configure}></slot>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { x as n, b as t };

package/stepper.js

@@ -1,6 +1,6 @@
-import { t as e } from "./step-label.component-DnQBwnL8.js";
-import { t } from "./step.component-uBZl9yiJ.js";
-import { n, t as r } from "./stepper.component-CYLW1eRI.js";
+import { t as e } from "./step-label.component-DM7lQw8b.js";
+import { t } from "./step.component-DuLOqjZk.js";
+import { n, t as r } from "./stepper.component-8IXNrdx7.js";
 import "./stepper.pure.js";
 t.define(), e.define(), n.define();
 //#endregion

package/stepper.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./step-label.component-DnQBwnL8.js";
-import { t } from "./step.component-uBZl9yiJ.js";
-import { n, t as r } from "./stepper.component-CYLW1eRI.js";
+import { t as e } from "./step-label.component-DM7lQw8b.js";
+import { t } from "./step.component-DuLOqjZk.js";
+import { n, t as r } from "./stepper.component-8IXNrdx7.js";
 export { r as SbbStepChangeEvent, t as SbbStepElement, e as SbbStepLabelElement, n as SbbStepperElement };