@quidgest/ui 0.26.0 → 0.27.0

package/esm/components/QSteps/QStepHeader2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QStepHeader.vue.js";
+//#region src/components/QSteps/QStepHeader.vue
+var t = e;
+//#endregion
+export { t as default };

package/esm/components/QSteps/QSteps.d.ts

@@ -0,0 +1,269 @@
+import { QStep, QStepsProps } from '.';
+import { DEFAULT_ICONS, DEFAULT_TEXTS } from './constants';
+type __VLS_Props = QStepsProps;
+/**
+ * Navigates to the previous enabled step.
+ */
+declare function previous(): void;
+/**
+ * Navigates to the next enabled step, or emits `finish` on the last step
+ * (or when there is no enabled step to advance to).
+ */
+declare function next(): void;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {
+            step: QStep;
+            index: number;
+        }): any;
+        icon?(_: {
+            step: QStep;
+            index: number;
+        }): any;
+        icon?(_: {
+            step: QStep;
+            index: number;
+        }): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+        prev?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+        prev?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+        next?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+        next?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+    };
+    refs: {
+        overflowRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly id?: string | undefined;
+                readonly class?: string | unknown[] | undefined;
+                readonly direction?: import('..').QOverflowDirection | undefined;
+                readonly arrowPlacement?: import('..').QOverflowArrowPlacement | undefined;
+                readonly arrowVisibility?: import('..').QOverflowArrowVisibility | undefined;
+                readonly scrollMode?: import('..').QOverflowScrollMode | undefined;
+                readonly scrollStep?: number | undefined;
+                readonly remapWheel?: boolean | undefined;
+                readonly contentClass?: string | unknown[] | undefined;
+                readonly icons?: typeof import('../QOverflow/constants').DEFAULT_ICONS | undefined;
+                readonly texts?: import('..').QOverflowTexts | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                viewportRef: HTMLDivElement;
+                contentRef: HTMLDivElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('..').QOverflowProps> & Readonly<{}>, {
+                contentEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+                scrollElementIntoView: (element: HTMLElement) => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                icons: typeof import('../QOverflow/constants').DEFAULT_ICONS;
+                texts: import('..').QOverflowTexts;
+                direction: import('..').QOverflowDirection;
+                arrowPlacement: import('..').QOverflowArrowPlacement;
+                arrowVisibility: import('..').QOverflowArrowVisibility;
+                scrollMode: import('..').QOverflowScrollMode;
+                scrollStep: number;
+                remapWheel: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            icons: typeof import('../QOverflow/constants').DEFAULT_ICONS;
+            texts: import('..').QOverflowTexts;
+            direction: import('..').QOverflowDirection;
+            arrowPlacement: import('..').QOverflowArrowPlacement;
+            arrowVisibility: import('..').QOverflowArrowVisibility;
+            scrollMode: import('..').QOverflowScrollMode;
+            scrollStep: number;
+            remapWheel: boolean;
+        }> & Omit<Readonly<import('..').QOverflowProps> & Readonly<{}>, "contentEl" | "scrollElementIntoView" | ("icons" | "texts" | "direction" | "arrowPlacement" | "arrowVisibility" | "scrollMode" | "scrollStep" | "remapWheel")> & {
+            contentEl: HTMLElement | null;
+            scrollElementIntoView: (element: HTMLElement) => void;
+        } & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                prev?(_: {
+                    disabled: boolean;
+                    onClick: () => void;
+                }): any;
+                default?(_: {}): any;
+                next?(_: {
+                    disabled: boolean;
+                    onClick: () => void;
+                }): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    previous: typeof previous;
+    next: typeof next;
+    isFirst: import('vue').ComputedRef<boolean>;
+    isLast: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    finish: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+}>, {
+    variant: import('./types').QStepsVariant;
+    icons: typeof DEFAULT_ICONS;
+    texts: typeof DEFAULT_TEXTS;
+    linear: boolean;
+    direction: import('./types').QStepsDirection;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    overflowRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly id?: string | undefined;
+            readonly class?: string | unknown[] | undefined;
+            readonly direction?: import('..').QOverflowDirection | undefined;
+            readonly arrowPlacement?: import('..').QOverflowArrowPlacement | undefined;
+            readonly arrowVisibility?: import('..').QOverflowArrowVisibility | undefined;
+            readonly scrollMode?: import('..').QOverflowScrollMode | undefined;
+            readonly scrollStep?: number | undefined;
+            readonly remapWheel?: boolean | undefined;
+            readonly contentClass?: string | unknown[] | undefined;
+            readonly icons?: typeof import('../QOverflow/constants').DEFAULT_ICONS | undefined;
+            readonly texts?: import('..').QOverflowTexts | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            viewportRef: HTMLDivElement;
+            contentRef: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('..').QOverflowProps> & Readonly<{}>, {
+            contentEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+            scrollElementIntoView: (element: HTMLElement) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            icons: typeof import('../QOverflow/constants').DEFAULT_ICONS;
+            texts: import('..').QOverflowTexts;
+            direction: import('..').QOverflowDirection;
+            arrowPlacement: import('..').QOverflowArrowPlacement;
+            arrowVisibility: import('..').QOverflowArrowVisibility;
+            scrollMode: import('..').QOverflowScrollMode;
+            scrollStep: number;
+            remapWheel: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        icons: typeof import('../QOverflow/constants').DEFAULT_ICONS;
+        texts: import('..').QOverflowTexts;
+        direction: import('..').QOverflowDirection;
+        arrowPlacement: import('..').QOverflowArrowPlacement;
+        arrowVisibility: import('..').QOverflowArrowVisibility;
+        scrollMode: import('..').QOverflowScrollMode;
+        scrollStep: number;
+        remapWheel: boolean;
+    }> & Omit<Readonly<import('..').QOverflowProps> & Readonly<{}>, "contentEl" | "scrollElementIntoView" | ("icons" | "texts" | "direction" | "arrowPlacement" | "arrowVisibility" | "scrollMode" | "scrollStep" | "remapWheel")> & {
+        contentEl: HTMLElement | null;
+        scrollElementIntoView: (element: HTMLElement) => void;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            prev?(_: {
+                disabled: boolean;
+                onClick: () => void;
+            }): any;
+            default?(_: {}): any;
+            next?(_: {
+                disabled: boolean;
+                onClick: () => void;
+            }): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QSteps.vue.d.ts.map

package/esm/components/QSteps/QSteps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QSteps.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSteps/QSteps.vue"],"names":[],"mappings":"AA8IA;AAofC,OAAO,KAAK,EAAE,KAAK,EAAuC,WAAW,EAAE,MAAM,GAAG,CAAA;AAIhF,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE1D,KAAK,WAAW,GAAG,WAAW,CAAC;AAqP/B;;GAEG;AACH,iBAAS,QAAQ,SAMhB;AAED;;;GAGG;AACH,iBAAS,IAAI,SAgBZ;AAoEF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAgST,OAAO,IAA6B;;;;;YAnBvB,GAAG;;;;YACH,GAAG;;;;YAIH,GAAG;yBAHA,GAAG;yBAIH,GAAG;;;;;;;YAHN,GAAG;;;;;;;YAIH,GAAG;;;;;;;YAHH,GAAG;;;;;;;YAIH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAvLM,GAAG,8CAEC,GAAG,yBAAyB,GAAG,6DACnD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoMtB;AAgCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAxOe,GAAG,8CAEC,GAAG,yBAAyB,GAAG,6DACnD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgPrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QSteps/QSteps.vue.js

@@ -0,0 +1,260 @@
+import { useId as e } from "../../composables/useId/index.js";
+import { QIcon as t } from "../QIcon/index.js";
+import { QOverflow as n } from "../QOverflow/index.js";
+import r from "./QStepHeader2.vue.js";
+import i from "./QStepsNav2.vue.js";
+import { useEnabledSelection as ee } from "../../composables/useEnabledSelection/index.js";
+import { DEFAULT_ICONS as a, DEFAULT_TEXTS as o } from "./constants.js";
+import { Fragment as s, computed as c, createBlock as te, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as ne, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeProps as v, openBlock as y, renderList as b, renderSlot as x, shallowRef as re, toDisplayString as S, toRef as ie, unref as C, useModel as ae, useTemplateRef as oe, watch as w, withCtx as T } from "vue";
+//#region src/components/QSteps/QSteps.vue?vue&type=script&setup=true&lang.ts
+var se = ["id"], ce = { class: "q-steps__list" }, le = {
+	key: 0,
+	class: "q-steps__panel"
+}, ue = { class: "q-steps__panel-header" }, de = { class: "q-steps__panel-header-icon" }, fe = { class: "q-steps__panel-header-title" }, pe = { class: "q-steps__content" }, me = { class: "q-steps__list" }, he = ["id", "aria-labelledby"], ge = { class: "q-steps__content" }, E = /*@__PURE__*/ p({
+	__name: "QSteps",
+	props: /*@__PURE__*/ h({
+		id: {},
+		class: {},
+		steps: {},
+		direction: { default: "horizontal" },
+		variant: { default: "circle" },
+		disabled: { type: Boolean },
+		linear: {
+			type: Boolean,
+			default: !1
+		},
+		icons: { default: () => a },
+		texts: { default: () => o }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ h(["finish"], ["update:modelValue"]),
+	setup(a, { expose: p, emit: h }) {
+		let E = a, D = h, O = e(ie(E, "id")), k = c(() => `${O.value}-panel`);
+		function A(e) {
+			return `${O.value}-step-${e}`;
+		}
+		let j = ae(a, "modelValue"), M = re(/* @__PURE__ */ new Set()), N = c(() => ({
+			...o,
+			...E.texts
+		})), P = c(() => E.direction === "horizontal"), _e = c(() => [
+			"q-steps",
+			`q-steps--${E.direction}`,
+			`q-steps--${E.variant}`,
+			E.class
+		]), { enabledItems: F, ensureSelection: I } = ee(() => E.steps, j), ve = c(() => F.value.findIndex((e) => e.value === j.value)), L = c(() => E.steps.findIndex((e) => e.value === j.value)), R = c(() => E.steps[L.value]), z = oe("overflowRef");
+		w(() => P.value ? z.value?.contentEl : null, (e) => {
+			e?.setAttribute("role", "list");
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), w(L, () => {
+			let e = (z.value?.contentEl)?.children[L.value];
+			e instanceof HTMLElement && z.value?.scrollElementIntoView(e);
+		}, {
+			immediate: !0,
+			flush: "post"
+		});
+		let B = c(() => F.value.length ? ve.value <= 0 : !0), V = c(() => F.value.length ? ve.value === F.value.length - 1 : !0);
+		function H(e) {
+			return e.value === j.value;
+		}
+		function U(e) {
+			return (M.value.has(e.value) || !!e.completed) && !H(e);
+		}
+		function W(e) {
+			return E.disabled || !!e.disabled;
+		}
+		function G(e) {
+			let t = E.steps[e + 1];
+			return t ? H(t) || U(t) : !1;
+		}
+		function K(e) {
+			return W(e) ? !1 : !E.linear || H(e) ? !0 : M.value.has(e.value) || !!e.completed;
+		}
+		function q(e) {
+			return !K(e);
+		}
+		function J(e) {
+			if (E.variant !== "dot") {
+				if (e.completed) return "completed";
+				if (H(e)) return "active";
+			}
+		}
+		function Y(e) {
+			return ["q-step__header", {
+				"q-step--active": H(e),
+				"q-step--completed": !!e.completed,
+				"q-step--disabled": W(e),
+				"q-step--visited": U(e),
+				"q-step--selectable": K(e)
+			}];
+		}
+		function X(e, t) {
+			return ["q-step", {
+				"q-step--active": H(e),
+				"q-step--disabled": W(e),
+				"q-step--visited": U(e),
+				"q-step--last": t === E.steps.length - 1,
+				"q-step--next-reached": G(t)
+			}];
+		}
+		function Z(e) {
+			K(e) && (j.value = e.value);
+		}
+		function Q() {
+			if (E.disabled) return;
+			let e = F.value, t = e.findIndex((e) => e.value === j.value);
+			t <= 0 || (j.value = e[t - 1].value);
+		}
+		function ye() {
+			if (E.disabled) return;
+			let e = F.value, t = e.findIndex((e) => e.value === j.value);
+			if (t === -1) {
+				e.length || D("finish");
+				return;
+			}
+			if (t >= e.length - 1) {
+				D("finish");
+				return;
+			}
+			j.value = e[t + 1].value;
+		}
+		let be = c(() => ({
+			disabled: B.value || !!E.disabled,
+			label: N.value.previous,
+			isFirst: B.value,
+			isLast: V.value,
+			onClick: Q
+		})), $ = c(() => ({
+			disabled: V.value || !!E.disabled,
+			label: N.value.next,
+			isFirst: B.value,
+			isLast: V.value,
+			onClick: ye
+		}));
+		return w(() => E.steps.map((e) => [e.value, !!e.disabled]), () => {
+			let e = new Set(E.steps.map((e) => e.value));
+			[...M.value].some((t) => !e.has(t)) && (M.value = new Set([...M.value].filter((t) => e.has(t)))), I();
+		}, { immediate: !0 }), w(j, () => {
+			I();
+			let e = j.value;
+			e !== void 0 && (M.value.has(e) || (M.value = /* @__PURE__ */ new Set([...M.value, e])));
+		}, { immediate: !0 }), p({
+			previous: Q,
+			next: ye,
+			isFirst: B,
+			isLast: V
+		}), (e, ee) => (y(), u("div", {
+			id: C(O),
+			class: _(_e.value)
+		}, [l(" Horizontal: headers strip, then content, then nav "), P.value ? (y(), u(s, { key: 0 }, [
+			d("div", ce, [f(C(n), {
+				ref_key: "overflowRef",
+				ref: z,
+				class: "q-steps__overflow",
+				"content-class": "q-steps__track",
+				direction: "horizontal",
+				"scroll-mode": "page"
+			}, {
+				default: T(() => [(y(!0), u(s, null, b(E.steps, (t, n) => (y(), u("div", {
+					key: t.value,
+					class: _(X(t, n)),
+					role: "listitem"
+				}, [f(r, {
+					step: t,
+					index: n,
+					variant: E.variant,
+					badge: J(t),
+					texts: N.value,
+					icons: E.icons,
+					class: _(Y(t)),
+					disabled: q(t),
+					"aria-current": H(t) ? "step" : void 0,
+					onClick: (e) => Z(t)
+				}, {
+					icon: T((t) => [x(e.$slots, "icon", g({ ref_for: !0 }, t))]),
+					_: 3
+				}, 8, [
+					"step",
+					"index",
+					"variant",
+					"badge",
+					"texts",
+					"icons",
+					"class",
+					"disabled",
+					"aria-current",
+					"onClick"
+				])], 2))), 128))]),
+				_: 3
+			}, 512)]),
+			R.value ? (y(), u("div", le, [d("div", ue, [d("span", de, [x(e.$slots, "icon", {
+				step: R.value,
+				index: L.value
+			}, () => [R.value.icon ? (y(), te(C(t), v(g({ key: 0 }, R.value.icon)), null, 16)) : (y(), u(s, { key: 1 }, [ne(S(L.value + 1), 1)], 64))])]), d("span", fe, S(R.value.title), 1)]), d("div", pe, [x(e.$slots, "default")])])) : l("v-if", !0),
+			f(i, {
+				"prev-slot-props": be.value,
+				"next-slot-props": $.value,
+				icons: E.icons
+			}, {
+				prev: T((t) => [x(e.$slots, "prev", v(m(t)))]),
+				next: T((t) => [x(e.$slots, "next", v(m(t)))]),
+				_: 3
+			}, 8, [
+				"prev-slot-props",
+				"next-slot-props",
+				"icons"
+			])
+		], 64)) : (y(), u(s, { key: 1 }, [l("\n			Vertical: content + nav as a sibling right after the active header,\n		    outside the step row so the panel isn't part of the step's accessible content.\n		    The strip is not a list, because that panel cannot be a listitem.\n		"), d("div", me, [(y(!0), u(s, null, b(E.steps, (t, n) => (y(), u(s, { key: t.value }, [d("div", { class: _(X(t, n)) }, [f(r, {
+			id: A(n),
+			step: t,
+			index: n,
+			variant: E.variant,
+			badge: J(t),
+			texts: N.value,
+			icons: E.icons,
+			class: _(Y(t)),
+			disabled: q(t),
+			"aria-current": H(t) ? "step" : void 0,
+			"aria-controls": H(t) ? k.value : void 0,
+			onClick: (e) => Z(t)
+		}, {
+			icon: T((t) => [x(e.$slots, "icon", g({ ref_for: !0 }, t))]),
+			_: 3
+		}, 8, [
+			"id",
+			"step",
+			"index",
+			"variant",
+			"badge",
+			"texts",
+			"icons",
+			"class",
+			"disabled",
+			"aria-current",
+			"aria-controls",
+			"onClick"
+		])], 2), H(t) ? (y(), u("div", {
+			key: 0,
+			id: k.value,
+			class: _(["q-steps__body", { "q-step--next-reached": G(n) }]),
+			"aria-labelledby": A(n)
+		}, [d("div", ge, [x(e.$slots, "default")]), f(i, {
+			"prev-slot-props": be.value,
+			"next-slot-props": $.value,
+			icons: E.icons
+		}, {
+			prev: T((t) => [x(e.$slots, "prev", g({ ref_for: !0 }, t))]),
+			next: T((t) => [x(e.$slots, "next", g({ ref_for: !0 }, t))]),
+			_: 3
+		}, 8, [
+			"prev-slot-props",
+			"next-slot-props",
+			"icons"
+		])], 10, he)) : l("v-if", !0)], 64))), 128))])], 64))], 10, se));
+	}
+});
+//#endregion
+export { E as default };

package/esm/components/QSteps/QSteps2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QSteps.vue.js";
+//#region src/components/QSteps/QSteps.vue
+var t = e;
+//#endregion
+export { t as default };

package/esm/components/QSteps/QStepsNav.d.ts

@@ -0,0 +1,59 @@
+import { QStepsNavSlotProps } from '.';
+import { DEFAULT_ICONS } from './constants';
+/**
+ * Props for the internal `QStepsNav` sub-component shared by the
+ * horizontal and vertical layouts of `QSteps`. Not exported: this
+ * component is internal, so its props stay off the package's public API
+ * surface.
+ */
+type QStepsNavProps = {
+    /**
+     * Slot props for the `prev` navigation control.
+     *
+     * @category Behavior
+     */
+    prevSlotProps: QStepsNavSlotProps;
+    /**
+     * Slot props for the `next` navigation control.
+     *
+     * @category Behavior
+     */
+    nextSlotProps: QStepsNavSlotProps;
+    /**
+     * Icons for the default previous/next buttons.
+     *
+     * @category Configuration
+     */
+    icons: typeof DEFAULT_ICONS;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        prev?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+        next?(_: {
+            disabled: boolean;
+            label: string;
+            isFirst: boolean;
+            isLast: boolean;
+            onClick: () => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<QStepsNavProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QStepsNavProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QStepsNav.vue.d.ts.map

package/esm/components/QSteps/QStepsNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QStepsNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSteps/QStepsNav.vue"],"names":[],"mappings":"AA4BA;AA4EC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACrB;;;;OAIG;IACH,aAAa,EAAE,kBAAkB,CAAA;IAEjC;;;;OAIG;IACH,aAAa,EAAE,kBAAkB,CAAA;IAEjC;;;;OAIG;IACH,KAAK,EAAE,OAAO,aAAa,CAAA;CAC3B,CAAA;AAOF,iBAAS,cAAc;WA+FT,OAAO,IAA6B;;;;;;;;YAXxB,GAAG;;;;;;;YACF,GAAG;;;;EAe7B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,mTAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QSteps/QStepsNav.vue.js

@@ -0,0 +1,42 @@
+import { QButton as e } from "../QButton/index.js";
+import { QIcon as t } from "../QIcon/index.js";
+import { createElementBlock as n, createVNode as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+//#region src/components/QSteps/QStepsNav.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "q-steps__nav" }, f = /*@__PURE__*/ i({
+	__name: "QStepsNav",
+	props: {
+		prevSlotProps: {},
+		nextSlotProps: {},
+		icons: {}
+	},
+	setup(i) {
+		let f = i;
+		return (i, p) => (s(), n("div", d, [c(i.$slots, "prev", o(a(f.prevSlotProps)), () => [r(l(e), {
+			"data-testid": "steps-prev",
+			label: f.prevSlotProps.label,
+			disabled: f.prevSlotProps.disabled,
+			onClick: f.prevSlotProps.onClick
+		}, {
+			default: u(() => [r(l(t), o(a(f.icons.previous)), null, 16)]),
+			_: 1
+		}, 8, [
+			"label",
+			"disabled",
+			"onClick"
+		])]), c(i.$slots, "next", o(a(f.nextSlotProps)), () => [r(l(e), {
+			"data-testid": "steps-next",
+			label: f.nextSlotProps.label,
+			disabled: f.nextSlotProps.disabled,
+			onClick: f.nextSlotProps.onClick
+		}, {
+			append: u(() => [r(l(t), o(a(f.icons.next)), null, 16)]),
+			_: 1
+		}, 8, [
+			"label",
+			"disabled",
+			"onClick"
+		])])]));
+	}
+});
+//#endregion
+export { f as default };

package/esm/components/QSteps/QStepsNav2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QStepsNav.vue.js";
+//#region src/components/QSteps/QStepsNav.vue
+var t = e;
+//#endregion
+export { t as default };