@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/status/status.component.js

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

package/status.component-Cg671ic2.js

@@ -1,82 +0,0 @@
-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 } from "./core.js";
-import { SbbIconNameMixin as o } from "./icon.pure.js";
-//#region src/elements/status/status.scss?inline
-var s = ":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}", c = (() => {
-	let c = o(a), l, u = [], d = [];
-	return class extends c {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[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 = [r(s)];
-		}
-		#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, u, "info"), t(this, d);
-		}
-	};
-})();
-//#endregion
-export { c as t };

package/step-label.component-olqRA-s7.js

@@ -1,77 +0,0 @@
-import { html as e, unsafeCSS as t } from "lit";
-import { SbbButtonBaseElement as n, SbbDisabledMixin as r, SbbPropertyWatcherController as i, appendAriaElements as a, removeAriaElements as o } from "./core.js";
-import { SbbIconNameMixin as s } from "./icon.pure.js";
-//#region src/elements/stepper/step-label/step-label.scss?inline
-var c = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );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-step-label-number-font-size);font-weight:var(--sbb-step-label-font-weight-selected, normal);inset-block-start:calc(var(--sbb-step-label-font-size) * 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;translate:-50% calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0px));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-step-label-gap-s);--sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-s);--sbb-step-label-font-size: var(--sbb-step-label-font-size-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-step-label-gap: var(--sbb-step-label-gap-m);--sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-m);--sbb-step-label-font-size: var(--sbb-step-label-font-size-m)}: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: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, 0px));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, 0);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}", l = class extends s(r(n)) {
-	static {
-		this.elementName = "sbb-step-label";
-	}
-	static {
-		this.role = "tab";
-	}
-	static {
-		this.styles = [t(c)];
-	}
-	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._previousSize = 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 = o(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 { l as t };

package/step.component-CcjV_283.js

@@ -1,108 +0,0 @@
-import { html as e, unsafeCSS as t } from "lit";
-import { SbbElement as n, SbbPropertyWatcherController as r, appendAriaElements as i, removeAriaElements as a } from "./core.js";
-import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
-//#region src/elements/stepper/step/step.scss?inline
-var s = ":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}}", c = class extends Event {
-	get currentIndex() {
-		return this._currentIndex;
-	}
-	get currentStep() {
-		return this._currentStep;
-	}
-	get nextIndex() {
-		return this._nextIndex;
-	}
-	get nextStep() {
-		return this._nextStep;
-	}
-	constructor({ currentIndex: e, currentStep: t, nextIndex: n, nextStep: r }) {
-		super("validate", {
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0
-		}), this._currentIndex = e, this._currentStep = t, this._nextIndex = n, this._nextStep = r;
-	}
-}, l = class extends n {
-	static {
-		this.elementName = "sbb-step";
-	}
-	static {
-		this.role = "tabpanel";
-	}
-	static {
-		this.styles = [t(s)];
-	}
-	static {
-		this.events = {
-			validate: "validate",
-			resizechange: "resizechange",
-			active: "active"
-		};
-	}
-	get label() {
-		return this._label;
-	}
-	get stepper() {
-		return this.closest("sbb-stepper");
-	}
-	constructor() {
-		super(), this._stepResizeObserver = new o(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(), this.dispatchEvent(new Event("active", {
-			bubbles: !0,
-			composed: !0
-		})));
-	}
-	deselect() {
-		this.label && (this.internals.states.delete("selected"), this.label.deselect());
-	}
-	validate(e) {
-		return this.dispatchEvent(new c(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 = a(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 { c as n, l as t };

package/stepper/step/step.component.js

@@ -1,2 +0,0 @@
-import { n as e, t } from "../../step.component-CcjV_283.js";
-export { t as SbbStepElement, e as SbbStepValidateEvent };

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

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

package/stepper/stepper/stepper.component.js

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

package/stepper.component-CqClDxL6.js

@@ -1,296 +0,0 @@
-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, forceType as d, getNextElementIndex as f, isArrowKeyPressed as p } from "./core.js";
-import { IntersectionController as m } from "@lit-labs/observers/intersection-controller.js";
-//#region src/elements/stepper/stepper/stepper.scss?inline
-var h = ":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}", g = 150, _ = {
-	zero: u,
-	small: c,
-	large: s,
-	ultra: l
-}, v = class extends Event {
-	get selectedIndex() {
-		return this._selectedIndex;
-	}
-	get previousIndex() {
-		return this._previousIndex;
-	}
-	get selectedStep() {
-		return this._selectedStep;
-	}
-	get previousStep() {
-		return this._previousStep;
-	}
-	constructor({ selectedIndex: e, previousIndex: t, selectedStep: n, previousStep: r }) {
-		super("stepchange", {
-			bubbles: !0,
-			composed: !0
-		}), this._selectedIndex = e, this._previousIndex = t, this._selectedStep = n, this._previousStep = r;
-	}
-}, y = (() => {
-	let s = a, c = [], l, u = [], y = [], b, x, S = [], C = [], w, T = [], E = [], D, O;
-	return class extends s {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-			l = [d(), i({ type: Boolean })], b = [i({
-				attribute: "horizontal-from",
-				reflect: !0
-			})], x = [i({ reflect: !0 })], w = [i({ reflect: !0 })], D = [i({ attribute: !1 })], O = [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, y), e(this, null, b, {
-				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, x, {
-				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
-			}, S, C), e(this, null, w, {
-				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
-			}, T, E), e(this, null, D, {
-				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, O, {
-				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 = [r(h)];
-		}
-		static {
-			this.events = { stepchange: "stepchange" };
-		}
-		#e;
-		get linear() {
-			return this.#e;
-		}
-		set linear(e) {
-			this.#e = e;
-		}
-		set horizontalFrom(e) {
-			this._horizontalFrom = e && _[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 m(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, y), null), this.#t = t(this, S, "horizontal"), this.#n = (t(this, C), t(this, T, null)), this._requestedSelected = (t(this, E), 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"), g);
-			}, 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 v({
-				selectedIndex: this.selectedIndex,
-				previousIndex: t,
-				selectedStep: this.selected,
-				previousStep: 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(_[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"), g);
-			});
-		}
-		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) && p(e)) {
-				let n = f(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 { y as n, v as t };