@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/stepper.pure.js

@@ -1,4 +1,739 @@
-import { t as SbbStepLabelElement } from "./step-label.component-i13wQWJJ.js";
-import { n as SbbStepValidateEvent, t as SbbStepElement } from "./step.component-lTLpcOUh.js";
-import { n as SbbStepperElement, t as SbbStepChangeEvent } from "./stepper.component-DBE685VL.js";
-export { SbbStepChangeEvent, SbbStepElement, SbbStepLabelElement, SbbStepValidateEvent, SbbStepperElement };
+import { html, unsafeCSS } from "lit";
+import { SbbButtonBaseElement, SbbDisabledMixin, SbbElement, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbPropertyWatcherController, appendAriaElements, forceType, getNextElementIndex, isArrowKeyPressed, removeAriaElements } from "./core.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import { property } from "lit/decorators.js";
+
+//#region src/elements/stepper/step-label/step-label.scss?inline
+var step_label_default = ":host {\n  --sbb-step-label-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  position: relative;\n  display: flex;\n  min-width: 0;\n  max-width: fit-content;\n  gap: var(--sbb-step-label-gap);\n  cursor: var(--sbb-step-label-cursor);\n  color: var(--sbb-step-label-color);\n  font-size: var(--sbb-step-label-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  translate: -50% -50%;\n  font-size: var(--sbb-step-label-number-font-size);\n  font-weight: var(--sbb-step-label-font-weight-selected, normal);\n  inset-block-start: calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);\n  inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);\n  line-height: 1;\n  z-index: 1;\n  translate: -50% calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0px));\n  transition: translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);\n}\n\n:host(:is(:state(selected),[state--selected])) {\n  --sbb-step-label-color: var(--sbb-color-3);\n  --sbb-step-label-font-weight-selected: bold;\n}\n@media (forced-colors: active) {\n  :host(:is(:state(selected),[state--selected])) {\n    --sbb-step-label-color: Highlight !important;\n  }\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-step-label-gap: var(--sbb-step-label-gap-s);\n  --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-s);\n  --sbb-step-label-font-size: var(--sbb-step-label-font-size-s);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-step-label-gap: var(--sbb-step-label-gap-m);\n  --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-m);\n  --sbb-step-label-font-size: var(--sbb-step-label-font-size-m);\n}\n\n:host(:disabled) {\n  --sbb-step-label-color: var(--sbb-color-granite);\n  --sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));\n  --sbb-step-label-prefix-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:disabled) {\n    --sbb-step-label-color: GrayText !important;\n  }\n}\n\n@media (any-hover: hover) {\n  :host(:hover:not(:disabled)) {\n    --sbb-step-label-cursor: var(--sbb-cursor-pointer);\n    --sbb-step-label-prefix-background-color: var(--sbb-background-color-3);\n    --sbb-step-label-translate-y-content-hover: -0.0625rem;\n    --sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1);\n  }\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-border-radius-1x);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n  transition: margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)) {\n  margin-block-start: var(--sbb-spacing-fixed-6x);\n}\n\n:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) {\n  margin-block-end: var(--sbb-spacing-fixed-8x);\n}\n\n.sbb-step-label__prefix {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: var(--sbb-step-label-prefix-size);\n  height: var(--sbb-step-label-prefix-size);\n  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);\n}\n.sbb-step-label__prefix::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(var(--sbb-step-label-prefix-size-grow-hover, 0px));\n  border-radius: var(--sbb-border-radius-infinity);\n  border: var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);\n  background-color: var(--sbb-step-label-prefix-background-color);\n  transition-duration: var(--sbb-step-label-animation-duration);\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: background-color, inset;\n}\n\n.sbb-step-label__text {\n  font-weight: bold;\n}\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n::slotted(sbb-icon),\nsbb-icon {\n  z-index: 1;\n  background-color: var(--sbb-step-label-prefix-background-color);\n  border-radius: var(--sbb-border-radius-infinity);\n  translate: 0 var(--sbb-step-label-translate-y-content-hover, 0);\n  transition-duration: var(--sbb-step-label-animation-duration);\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: background-color, translate;\n}\n";
+
+//#endregion
+//#region src/elements/stepper/step-label/step-label.component.ts
+/**
+* Combined with a `sbb-stepper`, it displays a step's label.
+*
+* @slot - Use the unnamed slot to provide a label.
+* @slot icon - Use this to display an icon in the label bubble.
+*/
+var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbButtonBaseElement)) {
+	static {
+		this.elementName = "sbb-step-label";
+	}
+	static {
+		this.role = "tab";
+	}
+	static {
+		this.styles = [unsafeCSS(step_label_default)];
+	}
+	/** The step controlled by the label. */
+	get step() {
+		return this._step;
+	}
+	get stepper() {
+		return this.closest("sbb-stepper");
+	}
+	set disabled(value) {
+		super.disabled = value;
+		this.toggleState("user-disabled", value);
+	}
+	get disabled() {
+		return super.disabled;
+	}
+	constructor() {
+		super();
+		this._step = null;
+		this._previousSize = null;
+		this.addEventListener?.("click", () => {
+			const stepper = this.stepper;
+			if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step) && !this.disabled) stepper.selected = this.step;
+		});
+		this.addController(new SbbPropertyWatcherController(this, () => this.stepper, {
+			orientation: (s) => {
+				if (this._previousOrientation) this.internals.states.delete(`orientation-${this._previousOrientation}`);
+				this._previousOrientation = s.orientation;
+				if (this._previousOrientation) this.internals.states.add(`orientation-${this._previousOrientation}`);
+			},
+			size: (s) => {
+				if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+				this._previousSize = s.size;
+				if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+			}
+		}));
+	}
+	_isNotDeactivatedByLinearMode(step) {
+		const stepper = this.stepper;
+		if (stepper?.linear && stepper.selectedIndex !== null) {
+			const index = stepper.steps.indexOf(step);
+			return index < stepper.selectedIndex || index === stepper.selectedIndex + 1;
+		}
+		return true;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		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(posInSet, setSize, stepperLoaded) {
+		if (stepperLoaded) this._assignStep();
+		this.internals.ariaPosInSet = `${posInSet}`;
+		this.internals.ariaSetSize = `${setSize}`;
+	}
+	_assignStep() {
+		let nextSibling = this.nextElementSibling;
+		while (nextSibling && nextSibling.localName !== "sbb-step") nextSibling = nextSibling.nextElementSibling;
+		const value = nextSibling;
+		this.internals.ariaControlsElements = removeAriaElements(this.internals.ariaControlsElements, this._step);
+		this._step = value instanceof Element ? value : null;
+		this.internals.ariaControlsElements = appendAriaElements(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(value) {
+		super.disabled = value;
+	}
+	render() {
+		return html`
+      <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+      <span class="sbb-step-label__text"><slot></slot></span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/stepper/step/step.scss?inline
+var step_default = ":host {\n  --sbb-step-opacity: 0;\n  --sbb-step-margin-inline-start: var(--sbb-spacing-fixed-4x);\n  --sbb-step-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n  margin-inline-start: var(--sbb-step-margin-inline-start);\n  opacity: 0;\n  height: 0;\n  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);\n  transition-behavior: allow-discrete;\n}\n\n:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) {\n  opacity: 1;\n  height: var(--sbb-stepper-content-height);\n  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);\n  transition-behavior: allow-discrete;\n}\n\n:host(:is(:state(selected),[state--selected])) {\n  --sbb-step-opacity: 1;\n  --sbb-step-display: block;\n  --sbb-step-height: fit-content;\n  --sbb-step-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  --sbb-step-animation-delay: var(--sbb-step-animation-duration);\n}\n\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) {\n  --sbb-step-position: absolute;\n  --sbb-step-inset-block-start: 0;\n}\n\n.sbb-step {\n  position: var(--sbb-step-position, initial);\n  width: 100%;\n  inset-block-start: var(--sbb-step-inset-block-start, unset);\n  opacity: var(--sbb-step-opacity);\n  display: var(--sbb-step-display, none);\n  height: var(--sbb-step-height, 0);\n  transition-property: display, opacity;\n  transition-duration: var(--sbb-step-animation-duration);\n  transition-delay: var(--sbb-step-animation-delay, 0);\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-behavior: allow-discrete;\n}\n@starting-style {\n  .sbb-step {\n    --sbb-step-opacity: 0;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/stepper/step/step.component.ts
+var SbbStepValidateEvent = 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, currentStep, nextIndex, nextStep }) {
+		super("validate", {
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		this._currentIndex = currentIndex;
+		this._currentStep = currentStep;
+		this._nextIndex = nextIndex;
+		this._nextStep = nextStep;
+	}
+};
+/**
+* Combined with a `sbb-stepper`, it displays a step's content.
+*
+* @slot - Use the unnamed slot to provide content.
+*/
+var SbbStepElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-step";
+	}
+	static {
+		this.role = "tabpanel";
+	}
+	static {
+		this.styles = [unsafeCSS(step_default)];
+	}
+	static {
+		this.events = {
+			validate: "validate",
+			resizechange: "resizechange",
+			active: "active"
+		};
+	}
+	/** The label of the step. */
+	get label() {
+		return this._label;
+	}
+	get stepper() {
+		return this.closest("sbb-stepper");
+	}
+	constructor() {
+		super();
+		this._stepResizeObserver = new ResizeController(this, {
+			target: null,
+			skipInitial: true,
+			callback: () => setTimeout(() => this._onStepElementResize())
+		});
+		this._label = null;
+		this.addEventListener?.("click", (e) => this._handleClick(e));
+		this.addController(new SbbPropertyWatcherController(this, () => this.stepper, { orientation: (s) => {
+			if (this._previousOrientation) this.internals.states.delete(`orientation-${this._previousOrientation}`);
+			this._previousOrientation = s.orientation;
+			if (this._previousOrientation) this.internals.states.add(`orientation-${this._previousOrientation}`);
+		} }));
+	}
+	/**
+	* Selects and configures the step.
+	*/
+	select() {
+		if (!this.hasUpdated || !this.label) return;
+		this.internals.states.add("selected");
+		this.label.select();
+		/**
+		* @type {Event}
+		* The active event is dispatched when a step is activated.
+		*/
+		this.dispatchEvent(new Event("active", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Deselects and configures the step.
+	*/
+	deselect() {
+		if (!this.label) return;
+		this.internals.states.delete("selected");
+		this.label.deselect();
+	}
+	/**
+	* Emits a validate event whenever step switch is triggered.
+	*/
+	validate(validate) {
+		/**
+		* @type {SbbStepValidateEvent}
+		* The validate event is dispatched when a step change is triggered. Can be canceled to abort the step change.
+		*/
+		return this.dispatchEvent(new SbbStepValidateEvent(validate));
+	}
+	/**
+	* Configures the step.
+	*/
+	configure(stepperLoaded) {
+		if (stepperLoaded) this._assignLabel();
+	}
+	/** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+	_handleClick(event) {
+		const composedPathElements = event.composedPath().filter((el) => el instanceof window.HTMLElement);
+		if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-next"))) this.stepper?.next();
+		else if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-previous"))) this.stepper?.previous();
+	}
+	_onStepElementResize() {
+		if (!this.matches(":is(:state(selected),[state--selected])")) return;
+		/**
+		* @internal
+		* Emits when a resize happens, used to avoid setting the height of the stepper from the step component.
+		*/
+		this.dispatchEvent(new Event("resizechange", { bubbles: true }));
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.slot ||= "step";
+		this._assignLabel();
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.updateComplete.then(() => {
+			this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+		});
+	}
+	_assignLabel() {
+		let previousSibling = this.previousElementSibling;
+		while (previousSibling && previousSibling.localName !== "sbb-step-label") previousSibling = previousSibling.previousElementSibling;
+		const value = previousSibling;
+		this.internals.ariaLabelledByElements = removeAriaElements(this.internals.ariaLabelledByElements, this._label);
+		this._label = value instanceof Element ? value : null;
+		this.internals.ariaLabelledByElements = appendAriaElements(this.internals.ariaLabelledByElements, this._label);
+	}
+	render() {
+		return html`
+      <div class="sbb-step">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/stepper/stepper/stepper.scss?inline
+var stepper_default = ":host {\n  --sbb-stepper-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: block;\n  position: relative;\n  counter-reset: step-label;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-stepper-marker-color: ButtonText;\n  }\n}\n\n:host(:is(:state(disable-animation),[state--disable-animation])) {\n  --sbb-disable-animation-duration: 0s;\n}\n\n:host([orientation=vertical]) {\n  --sbb-stepper-orientation: column;\n}\n\n.sbb-stepper__labels {\n  display: flex;\n  flex-direction: var(--sbb-stepper-orientation);\n  position: relative;\n  justify-content: start;\n  margin-block-end: var(--sbb-spacing-responsive-m);\n}\n.sbb-stepper__labels::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: calc(var(--sbb-stepper-border-width) * -1);\n  background-color: var(--sbb-stepper-marker-color);\n}\n:host([orientation=horizontal]) .sbb-stepper__labels {\n  gap: var(--sbb-spacing-responsive-m);\n  padding-block-end: var(--sbb-spacing-fixed-4x);\n  border-block-end: var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);\n}\n:host([orientation=horizontal]) .sbb-stepper__labels::before {\n  inset-block-end: calc(var(--sbb-stepper-border-width) * -1);\n  height: var(--sbb-stepper-marker-width);\n  width: var(--sbb-stepper-marker-size, 0);\n  transition: width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);\n}\n:host([orientation=vertical]) .sbb-stepper__labels {\n  padding-inline-start: var(--sbb-spacing-fixed-4x);\n  border-inline-start: var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);\n}\n:host([orientation=vertical]) .sbb-stepper__labels::before {\n  inset-block-start: 0;\n  width: var(--sbb-stepper-marker-width);\n  height: var(--sbb-stepper-marker-size, 0);\n  transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);\n}\n\n.sbb-stepper__steps {\n  position: relative;\n}\n:host([orientation=horizontal]) .sbb-stepper__steps {\n  height: var(--sbb-stepper-content-height);\n  transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);\n}\n\n::slotted(sbb-step-label)::before {\n  content: counter(step-label);\n  counter-increment: step-label;\n}\n";
+
+//#endregion
+//#region src/elements/stepper/stepper/stepper.component.ts
+const DEBOUNCE_TIME = 150;
+const breakpointMap = {
+	zero: SbbMediaQueryBreakpointZeroAndAbove,
+	small: SbbMediaQueryBreakpointSmallAndAbove,
+	large: SbbMediaQueryBreakpointLargeAndAbove,
+	ultra: SbbMediaQueryBreakpointUltraAndAbove
+};
+var SbbStepChangeEvent = class extends Event {
+	/** The index of the newly selected step. */
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	/** The index of the previously selected step. */
+	get previousIndex() {
+		return this._previousIndex;
+	}
+	/** The newly selected step element. */
+	get selectedStep() {
+		return this._selectedStep;
+	}
+	/** The previously selected step element. */
+	get previousStep() {
+		return this._previousStep;
+	}
+	constructor({ selectedIndex, previousIndex, selectedStep, previousStep }) {
+		super("stepchange", {
+			bubbles: true,
+			composed: true
+		});
+		this._selectedIndex = selectedIndex;
+		this._previousIndex = previousIndex;
+		this._selectedStep = selectedStep;
+		this._previousStep = previousStep;
+	}
+};
+/**
+* Provides a structured, step-by-step workflow for user interactions.
+* @slot - Provide a `sbb-expansion-panel-header` and a `sbb-expansion-panel-content` to the stepper.
+* @slot step-label - Use this slot to provide an `sbb-step-label`.
+* @slot step - Use this slot to provide an `sbb-step`.
+* @event {SbbStepChangeEvent} stepchange - Emits whenever a step was changed.
+*/
+let SbbStepperElement = (() => {
+	let _classSuper = SbbElement;
+	let _instanceExtraInitializers = [];
+	let _linear_decorators;
+	let _linear_initializers = [];
+	let _linear_extraInitializers = [];
+	let _set_horizontalFrom_decorators;
+	let _orientation_decorators;
+	let _orientation_initializers = [];
+	let _orientation_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _set_selected_decorators;
+	let _set_selectedIndex_decorators;
+	return class SbbStepperElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_linear_decorators = [forceType(), property({ type: Boolean })];
+			_set_horizontalFrom_decorators = [property({
+				attribute: "horizontal-from",
+				reflect: true
+			})];
+			_orientation_decorators = [property({ reflect: true })];
+			_size_decorators = [property({ reflect: true })];
+			_set_selected_decorators = [property({ attribute: false })];
+			_set_selectedIndex_decorators = [property({
+				attribute: "selected-index",
+				type: Number
+			})];
+			__esDecorate(this, null, _linear_decorators, {
+				kind: "accessor",
+				name: "linear",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "linear" in obj,
+					get: (obj) => obj.linear,
+					set: (obj, value) => {
+						obj.linear = value;
+					}
+				},
+				metadata: _metadata
+			}, _linear_initializers, _linear_extraInitializers);
+			__esDecorate(this, null, _set_horizontalFrom_decorators, {
+				kind: "setter",
+				name: "horizontalFrom",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "horizontalFrom" in obj,
+					set: (obj, value) => {
+						obj.horizontalFrom = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _orientation_decorators, {
+				kind: "accessor",
+				name: "orientation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "orientation" in obj,
+					get: (obj) => obj.orientation,
+					set: (obj, value) => {
+						obj.orientation = value;
+					}
+				},
+				metadata: _metadata
+			}, _orientation_initializers, _orientation_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			__esDecorate(this, null, _set_selected_decorators, {
+				kind: "setter",
+				name: "selected",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "selected" in obj,
+					set: (obj, value) => {
+						obj.selected = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _set_selectedIndex_decorators, {
+				kind: "setter",
+				name: "selectedIndex",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "selectedIndex" in obj,
+					set: (obj, value) => {
+						obj.selectedIndex = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-stepper";
+		}
+		static {
+			this.styles = [unsafeCSS(stepper_default)];
+		}
+		static {
+			this.events = { stepchange: "stepchange" };
+		}
+		#linear_accessor_storage;
+		/** If set to true, only the current and previous labels can be clicked and selected. */
+		get linear() {
+			return this.#linear_accessor_storage;
+		}
+		set linear(value) {
+			this.#linear_accessor_storage = value;
+		}
+		/** Overrides the behavior of `orientation` property. */
+		set horizontalFrom(value) {
+			this._horizontalFrom = value && breakpointMap[value] ? value : null;
+			if (this._horizontalFrom && this._loaded) this._checkOrientation();
+		}
+		get horizontalFrom() {
+			return this._horizontalFrom;
+		}
+		#orientation_accessor_storage;
+		/** Steps orientation, either horizontal or vertical. */
+		get orientation() {
+			return this.#orientation_accessor_storage;
+		}
+		set orientation(value) {
+			this.#orientation_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s (lean theme default) or m (standard theme default).
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		/** The currently selected step. */
+		set selected(step) {
+			if (this._loaded) this._select(step);
+			this._requestedSelected = step;
+		}
+		get selected() {
+			return this.querySelector?.("sbb-step:is(:state(selected),[state--selected])") ?? null;
+		}
+		/** The currently selected step index. */
+		set selectedIndex(index) {
+			if (this._loaded && index !== null) this._select(this.steps[index]);
+			this._requestedSelectedIndex = index;
+		}
+		get selectedIndex() {
+			return this.selected ? this.steps.indexOf(this.selected) : null;
+		}
+		/** The steps of the stepper. */
+		get steps() {
+			const steps = [];
+			this.querySelectorAll?.("sbb-step").forEach((step) => {
+				customElements.upgrade(step);
+				steps.push(step);
+			});
+			return steps;
+		}
+		get _enabledSteps() {
+			return this.steps.filter((s) => {
+				if (s.label) {
+					customElements.upgrade(s.label);
+					return !s.label.disabled;
+				}
+				return false;
+			});
+		}
+		constructor() {
+			super();
+			/**
+			* If the sbb-stepper is used in a sbb-dialog, the marker on the selected element will not appear,
+			* because the calculations are done when the dialog is closed, so the marker has a width of 0;
+			* the same happens for the stepper height.
+			* We need to recalculate it when the element becomes visible.
+			*/
+			this._observer = (__runInitializers(this, _instanceExtraInitializers), new IntersectionController(this, {
+				target: null,
+				callback: (entries) => {
+					entries.forEach((e) => {
+						if (e.intersectionRatio > 0) {
+							this._setStepperHeight(this.selected);
+							this._setMarkerSize();
+						}
+					});
+				}
+			}));
+			this.#linear_accessor_storage = __runInitializers(this, _linear_initializers, false);
+			this._horizontalFrom = (__runInitializers(this, _linear_extraInitializers), null);
+			this.#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
+			this.#size_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this._requestedSelected = (__runInitializers(this, _size_extraInitializers), null);
+			this._requestedSelectedIndex = null;
+			this._loaded = false;
+			this._resizeObserverTimeout = null;
+			this._mediaMatcher = new SbbMediaMatcherController(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"), DEBOUNCE_TIME);
+			};
+			this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+			this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
+		}
+		/** Selects the next enabled step. If no available step is found, it simply exits. */
+		next() {
+			if (this.selectedIndex !== null) for (let i = this.selectedIndex + 1; i < this.steps.length; i++) {
+				const step = this.steps[i];
+				if (this._isSelectable(step)) {
+					this._select(step);
+					return;
+				}
+			}
+		}
+		/** Selects the previous enabled step. If no available step is found, it simply exits. */
+		previous() {
+			if (this.selectedIndex !== null) for (let i = this.selectedIndex - 1; i >= 0; i--) {
+				const step = this.steps[i];
+				if (this._isSelectable(step)) {
+					this._select(step);
+					return;
+				}
+			}
+		}
+		/** Resets the form in which the stepper is nested or every form of each step, if any. */
+		reset() {
+			const closestForm = this.closest("form");
+			if (closestForm) closestForm.reset();
+			else this.querySelectorAll("form").forEach((form) => form.reset());
+			this.selectedIndex = 0;
+			if (document.activeElement?.closest("sbb-stepper") === this) this.selected?.label?.focus();
+		}
+		_isSelectable(step) {
+			if (step) {
+				customElements.upgrade(step);
+				if (step.label) {
+					customElements.upgrade(step.label);
+					if (!this.linear && step.label.disabled) return false;
+				}
+				return true;
+			} else return false;
+		}
+		_select(step) {
+			if (!step || step === this.selected) return;
+			const currentIndex = this.selectedIndex;
+			const currentStep = this.selected;
+			const stepIndex = this.steps.indexOf(step);
+			const validatePayload = {
+				currentIndex,
+				currentStep,
+				nextIndex: stepIndex >= 0 ? stepIndex : null,
+				nextStep: step
+			};
+			if (this.selected && !this.selected["validate"](validatePayload)) return;
+			currentStep?.["deselect"]();
+			step["select"]();
+			/** @internal only to provide double entry in docs. It is a public event! */
+			this.dispatchEvent(new SbbStepChangeEvent({
+				selectedIndex: this.selectedIndex,
+				previousIndex: currentIndex,
+				selectedStep: this.selected,
+				previousStep: currentStep
+			}));
+			this._setMarkerSize();
+			this._setStepperHeight(step);
+			this._configureLinearMode();
+			if (document.activeElement?.closest("sbb-stepper") === this) this.selected?.label?.focus();
+		}
+		_setMarkerSize() {
+			if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label) return;
+			const offset = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
+			this.style.setProperty("--sbb-stepper-marker-size", `${offset}px`);
+		}
+		/**
+		* Sets the stepper height based on the height of the provided step.
+		*/
+		_setStepperHeight(step) {
+			if (step && step.shadowRoot) {
+				const innerElement = step.shadowRoot.querySelector(".sbb-step");
+				if (innerElement) this.style?.setProperty("--sbb-stepper-content-height", `${innerElement.offsetHeight}px`);
+			}
+		}
+		_calculateLabelOffsetTop() {
+			if (this.selectedIndex === null) return;
+			let offset = 0;
+			for (const step of this.steps) {
+				if (step === this.selected) break;
+				offset = step.label.offsetHeight + offset;
+			}
+			return offset + 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((step, i, array) => {
+				step["configure"](this._loaded);
+				step.label?.configure(i + 1, array.length, this._loaded);
+			});
+			this._select(this.selected || this._enabledSteps[0]);
+		}
+		_updateLabels() {
+			this.steps.forEach((step) => {
+				step.slot = this.orientation === "horizontal" ? "step" : "step-label";
+			});
+		}
+		_checkOrientation() {
+			if (this.horizontalFrom) {
+				this.orientation = this._mediaMatcher.matches(breakpointMap[this.horizontalFrom]) ? "horizontal" : "vertical";
+				this._updateLabels();
+			}
+			setTimeout(() => this._setMarkerSize(), 0);
+		}
+		_configureLinearMode() {
+			this.steps.forEach((step, index) => {
+				if (!step.label) return;
+				customElements.upgrade(step.label);
+				step.label.disable(this.linear && index > this.selectedIndex || !this.linear && step.label.matches(":is(:state(user-disabled),[state--user-disabled])"));
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			window.addEventListener("resize", this._onStepperResize, { passive: true });
+			this.toggleState("disable-animation", !this._loaded);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			window.removeEventListener("resize", this._onStepperResize);
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this.updateComplete.then(() => {
+				this._loaded = true;
+				this._configure();
+				if (this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1) this.selectedIndex = this.steps.indexOf(this._requestedSelected);
+				else if (this._requestedSelectedIndex) this.selectedIndex = this._requestedSelectedIndex;
+				else this.selectedIndex = 0;
+				this._observer.observe(this);
+				this._checkOrientation();
+				setTimeout(() => this.internals.states.delete("disable-animation"), DEBOUNCE_TIME);
+			});
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("orientation") && !this.horizontalFrom) {
+				this._updateLabels();
+				this._setMarkerSize();
+			}
+			if (changedProperties.has("linear") && this._loaded) this._configureLinearMode();
+			if (changedProperties.has("size")) this._setMarkerSize();
+		}
+		_handleKeyDown(evt) {
+			const enabledSteps = this._enabledSteps;
+			if (!enabledSteps || evt.target !== this && evt.target.parentElement !== this) return;
+			if (isArrowKeyPressed(evt)) {
+				const nextIndex = getNextElementIndex(evt, enabledSteps.indexOf(this.selected), enabledSteps.length);
+				this._select(enabledSteps[nextIndex]);
+				evt.preventDefault();
+			}
+		}
+		render() {
+			return html`
+      <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 { SbbStepChangeEvent, SbbStepElement, SbbStepLabelElement, SbbStepValidateEvent, SbbStepperElement };