@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/Step/composables/useStep.js

@@ -0,0 +1,162 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { STEPPER_INJECTION_KEY as r } from "../../Stepper/stepperInjectionKey.js";
+import { computed as i, inject as a, onBeforeUnmount as o, useAttrs as s, useId as c, useSlots as l, watchEffect as u } from "vue";
+import { get as d } from "es-toolkit/compat";
+import { formatStepperStepNumber as f, getStepperStepContentId as p, getStepperStepId as m, isStepperStepClickable as h, resolveStepperStepStatus as g } from "@bridge-ui/core/Domain";
+import { stepperChromeProps as _ } from "@bridge-ui/core/Tokens";
+import { cn as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
+//#region src/Components/Step/composables/useStep.ts
+var b = [
+	"icon",
+	"error",
+	"label",
+	"classes",
+	"disabled",
+	"completed",
+	"customProps",
+	"description"
+];
+function x(x) {
+	let S = s(), C = l(), w = c(), T = a(r, null);
+	if (!T) throw Error("Step must be used within a Stepper provider");
+	let E = T, D = null;
+	D = E.value.registerStep(w), o(() => {
+		D?.(), D = null;
+	});
+	let O = i(() => y({
+		bridgeKeys: b,
+		props: {
+			...S,
+			...x
+		}
+	})), { merged: k, entry: A } = t({
+		componentName: "Step",
+		props: () => O.value.componentProps
+	}), j = i(() => E.value.getIndex(w)), M = i(() => k.value.disabled === !0), N = i(() => g({
+		index: j.value,
+		error: k.value.error,
+		completed: k.value.completed,
+		activeStep: E.value.activeStep
+	})), P = i(() => h({
+		index: j.value,
+		disabled: M.value,
+		completed: k.value.completed,
+		linear: E.value.linear,
+		activeStep: E.value.activeStep
+	}));
+	u(() => {
+		j.value < 0 || E.value.registerStepMeta(j.value, {
+			disabled: M.value,
+			clickable: P.value
+		});
+	});
+	let F = i(() => N.value === "error" ? E.value.errorColorItem : E.value.colorItem), I = i(() => N.value === "active"), L = i(() => N.value === "completed"), R = i(() => N.value === "upcoming"), z = i(() => N.value === "error"), B = i(() => I.value || z.value), V = i(() => E.value.orientation === "vertical"), H = i(() => V.value && I.value), U = i(() => m(E.value.id, j.value)), W = i(() => p(E.value.id, j.value)), G = i(() => f(Math.max(j.value, 0))), K = i(() => d(E.value.sizeItem, "icon") ?? "md"), q = i(() => {
+		if (k.value.icon) return k.value.icon;
+		if (L.value) return "check";
+		if (z.value) return "clear";
+	}), J = n({
+		entry: A,
+		props: () => O.value.componentProps
+	});
+	function Y(e) {
+		P.value && (E.value.selectStep(j.value), (k.value.customProps?.trigger)?.onClick?.(e));
+	}
+	function X(e) {
+		let t = E.value;
+		(e.key === "ArrowDown" || e.key === "ArrowRight") && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(j.value, 1))), (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(j.value, -1))), e.key === "Home" && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(-1, 1))), e.key === "End" && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(0, -1))), (k.value.customProps?.trigger)?.onKeydown?.(e);
+	}
+	let Z = i(() => e(k.value.customProps?.root, O.value.inheritedAttrs, { class: v({
+		[_.item]: !0,
+		[d(E.value.orientationItem, "item") ?? ""]: !0,
+		[d(J.value, "root") ?? ""]: !0
+	}) })), Q = i(() => e(k.value.customProps?.connector, {}, {
+		"aria-hidden": !0,
+		"data-part": "connector",
+		class: v({
+			[_.connector]: !0,
+			[d(E.value.orientationItem, "connector") ?? ""]: !0,
+			[d(E.value.sizeItem, "connector") ?? ""]: E.value.orientation !== "vertical",
+			[d(F.value, "connector") ?? ""]: L.value,
+			[d(J.value, "connector") ?? ""]: !0
+		})
+	})), $ = i(() => e(k.value.customProps?.trigger, {}, {
+		id: U.value,
+		type: "button",
+		disabled: M.value || void 0,
+		tabindex: P.value ? void 0 : -1,
+		"aria-invalid": z.value ? !0 : void 0,
+		onClick: P.value ? Y : void 0,
+		onKeydown: P.value ? X : void 0,
+		"aria-current": I.value ? "step" : void 0,
+		"aria-controls": H.value ? W.value : void 0,
+		class: v({
+			[_.trigger]: !0,
+			[d(E.value.orientationItem, "trigger") ?? ""]: !0,
+			"cursor-pointer": P.value && !M.value,
+			"cursor-default": !P.value,
+			"pointer-events-none opacity-50": M.value,
+			[d(J.value, "trigger") ?? ""]: !0
+		})
+	})), ee = i(() => e(k.value.customProps?.indicator, {}, { class: v({
+		[d(E.value.sizeItem, "indicator") ?? ""]: !0,
+		[_.indicator]: !0,
+		[_.upcoming]: R.value,
+		[d(F.value, "indicator") ?? ""]: B.value,
+		[d(F.value, "completed") ?? ""]: L.value,
+		[d(F.value, "completedHover") ?? ""]: L.value && P.value,
+		[d(J.value, "indicator") ?? ""]: !0
+	}) })), te = i(() => e(k.value.customProps?.icon, {}, {
+		size: K.value,
+		class: v({
+			"size-5 shrink-0": !0,
+			[d(J.value, "icon") ?? ""]: !0
+		})
+	})), ne = i(() => ({ class: v({
+		"flex min-w-0 flex-col": !0,
+		"ml-4": V.value
+	}) })), re = i(() => e(k.value.customProps?.label, {}, v({
+		[d(E.value.sizeItem, "label") ?? ""]: !0,
+		[_.label]: !0,
+		[_.labelCompleted]: L.value,
+		[d(F.value, "label") ?? ""]: B.value,
+		[d(J.value, "label") ?? ""]: !0
+	}))), ie = i(() => e(k.value.customProps?.description, {}, v({
+		[d(E.value.sizeItem, "description") ?? ""]: !0,
+		[_.description]: !0,
+		[d(J.value, "description") ?? ""]: !0
+	})));
+	return {
+		slots: C,
+		index: j,
+		status: N,
+		merged: k,
+		isError: z,
+		iconSize: K,
+		rootBind: Z,
+		textBind: ne,
+		iconBind: te,
+		clickable: P,
+		labelBind: re,
+		stepNumber: G,
+		isVertical: V,
+		showContent: H,
+		isCompleted: L,
+		contentBind: i(() => e(k.value.customProps?.content, {}, {
+			role: "region",
+			id: W.value,
+			"aria-labelledby": U.value,
+			class: v({
+				[d(E.value.sizeItem, "content") ?? ""]: !0,
+				[d(E.value.orientationItem, "content") ?? ""]: !0,
+				[d(J.value, "content") ?? ""]: !0
+			})
+		})),
+		triggerBind: $,
+		resolvedIcon: q,
+		indicatorBind: ee,
+		connectorBind: Q,
+		descriptionBind: ie
+	};
+}
+//#endregion
+export { x as useStep };

package/dist/Components/Step/index.d.ts

@@ -0,0 +1,3 @@
+export { useStep } from './composables/useStep';
+export type { StepClasses, StepCustomProps, StepOwnProps, StepProps, StepSlots, } from './step.types';
+export { default as Step } from './Step.vue';

package/dist/Components/Step/index.js

@@ -0,0 +1,3 @@
+import { useStep as e } from "./composables/useStep.js";
+import t from "./Step.js";
+export { t as Step, e as useStep };

package/dist/Components/Step/step.types.d.ts

@@ -0,0 +1,160 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { IconSource } from '../../Adapters/Icon';
+import { IconProps } from '../Icon';
+export interface StepClasses {
+    /**
+     * Classes merged onto the connector line.
+     */
+    connector?: string;
+    /**
+     * Classes merged onto optional vertical body content.
+     */
+    content?: string;
+    /**
+     * Classes merged onto the description.
+     */
+    description?: string;
+    /**
+     * Classes merged onto the indicator icon.
+     */
+    icon?: string;
+    /**
+     * Classes merged onto the circle / number indicator.
+     */
+    indicator?: string;
+    /**
+     * Classes merged onto the step title.
+     */
+    label?: string;
+    /**
+     * Classes merged onto the list item.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the step trigger.
+     */
+    trigger?: string;
+}
+export interface StepCustomProps {
+    /**
+     * Props forwarded to the connector line.
+     *
+     * @default undefined
+     */
+    connector?: HTMLAttributes;
+    /**
+     * Props forwarded to optional vertical body content.
+     *
+     * @default undefined
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the description.
+     *
+     * @default undefined
+     */
+    description?: HTMLAttributes;
+    /**
+     * Props forwarded to the indicator `Icon`.
+     *
+     * @default undefined
+     */
+    icon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the circle / number indicator.
+     *
+     * @default undefined
+     */
+    indicator?: HTMLAttributes;
+    /**
+     * Props forwarded to the step title.
+     *
+     * @default undefined
+     */
+    label?: HTMLAttributes;
+    /**
+     * Props forwarded to the list item.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the step trigger.
+     *
+     * @default undefined
+     */
+    trigger?: ButtonHTMLAttributes;
+}
+/**
+ * One step in a `Stepper`. Must be used inside `Stepper`.
+ */
+export interface StepOwnProps {
+    /**
+     * Classes for step parts.
+     *
+     * @default undefined
+     */
+    classes?: StepClasses;
+    /**
+     * Force completed state (else derived from index vs `activeStep`).
+     *
+     * @default undefined
+     */
+    completed?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: StepCustomProps;
+    /**
+     * Secondary text under the label.
+     *
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Non-interactive step.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Error styling on the indicator.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Override the default numeric / check indicator.
+     *
+     * @default undefined
+     */
+    icon?: IconSource;
+    /**
+     * Step title (prefer `#label` slot when set).
+     *
+     * @default undefined
+     */
+    label?: string;
+}
+export interface StepSlots {
+    /**
+     * Optional body shown under the step when `orientation="vertical"` and active.
+     */
+    default?: Slot<undefined>;
+    /**
+     * Custom description (overrides `description` when set).
+     */
+    description?: Slot<undefined>;
+    /**
+     * Custom indicator content (overrides number / check / `icon`).
+     */
+    icon?: Slot<undefined>;
+    /**
+     * Custom title (overrides `label` when set).
+     */
+    label?: Slot<undefined>;
+}
+export type StepProps = MergeHtmlProps<StepOwnProps, HTMLAttributes>;

package/dist/Components/Stepper/Stepper.js

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

package/dist/Components/Stepper/Stepper.vue.d.ts

@@ -0,0 +1,24 @@
+import { StepperOwnProps, StepperSlots } from './stepper.types';
+type __VLS_Slots = StepperSlots;
+type __VLS_Props = StepperOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (step: number) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((step: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    linear: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Stepper/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { useStepper as e } from "./composables/useStepper.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, guardReactiveProps as i, mergeModels as a, normalizeProps as o, openBlock as s, renderSlot as c, unref as l, useModel as u } from "vue";
+//#region src/Components/Stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "Stepper",
+	props: /*@__PURE__*/ a({
+		classes: {},
+		color: {},
+		customProps: {},
+		linear: {
+			type: Boolean,
+			default: !0
+		},
+		orientation: {},
+		size: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(r, { emit: a }) {
+		let d = a, f = r, p = u(r, "modelValue"), { listBind: m, rootBind: h } = e(f, {
+			size: "md",
+			linear: !0,
+			color: "primary",
+			orientation: "horizontal"
+		}, p, d);
+		return (e, r) => (s(), t("nav", o(i(l(h))), [n("ol", o(i(l(m))), [c(e.$slots, "default")], 16)], 16));
+	}
+});
+//#endregion
+export { d as default };

package/dist/Components/Stepper/composables/useStepper.d.ts

@@ -0,0 +1,18 @@
+import { Ref, SetupContext } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { StepperEmits, StepperOwnProps, StepperProps } from '../stepper.types';
+import { StepperContextValue } from '../stepperInjectionKey';
+type StepperLibDefaults = LibDefaultsShape<StepperOwnProps, "size" | "color" | "linear" | "orientation">;
+type StepperMerged = MergeLibDefaults<StepperOwnProps, StepperLibDefaults>;
+export declare function useStepper(props: StepperOwnProps, libDefaults: StepperLibDefaults, model: Ref<number | undefined>, emit: SetupContext<StepperEmits>["emit"]): {
+    merged: import('vue').ComputedRef<StepperMerged>;
+    listBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').OlHTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-label": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<StepperProps, "color" | "orientation" | "size" | "classes" | "customProps" | "linear">>>;
+    contextValue: import('vue').ComputedRef<StepperContextValue>;
+};
+export {};

package/dist/Components/Stepper/composables/useStepper.js

@@ -0,0 +1,91 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { STEPPER_INJECTION_KEY as r } from "../stepperInjectionKey.js";
+import { computed as i, provide as a, ref as o, useAttrs as s, useId as c } from "vue";
+import { get as l } from "es-toolkit/compat";
+import { getAdjacentStepperIndex as u, getStepperStepId as d } from "@bridge-ui/core/Domain";
+import { stepperChromeProps as f, stepperColorProps as p, stepperOrientationProps as m, stepperSizeProps as h } from "@bridge-ui/core/Tokens";
+import { cn as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
+//#region src/Components/Stepper/composables/useStepper.ts
+var y = [
+	"size",
+	"color",
+	"linear",
+	"classes",
+	"customProps",
+	"orientation"
+];
+function b(b, x, S, C) {
+	let w = c(), T = s(), E = `bridge-stepper${w}`, D = o([]), O = /* @__PURE__ */ new Map(), k = i(() => v({
+		props: {
+			...T,
+			...b
+		},
+		bridgeKeys: y
+	})), { merged: A, entry: j } = t({
+		libDefaults: x,
+		componentName: "Stepper",
+		props: () => k.value.componentProps
+	}), M = i(() => S.value ?? 0);
+	function N(e) {
+		return D.value.includes(e) || (D.value = [...D.value, e]), () => {
+			D.value = D.value.filter((t) => t !== e);
+		};
+	}
+	function P(e, t) {
+		O.set(e, t);
+	}
+	function F(e) {
+		let t = O.get(e);
+		t?.disabled || t?.clickable === !1 || (S.value = e, C("update:modelValue", e), C("change", e));
+	}
+	function I(e) {
+		document.getElementById(d(E, e))?.focus();
+	}
+	function L(e, t) {
+		let n = /* @__PURE__ */ new Set();
+		return O.forEach((e, t) => {
+			(e.disabled || !e.clickable) && n.add(t);
+		}), u(D.value.length, e, t, n);
+	}
+	function R(e) {
+		return D.value.indexOf(e);
+	}
+	let z = n({
+		entry: j,
+		props: () => k.value.componentProps
+	}), B = i(() => _(h, j.value?.tokens?.size)), V = i(() => _(p, j.value?.tokens?.color)), H = i(() => _(m, j.value?.tokens?.orientation)), U = i(() => l(B.value, A.value.size)), W = i(() => l(V.value, A.value.color)), G = i(() => l(V.value, "error")), K = i(() => l(H.value, A.value.orientation)), q = i(() => ({
+		getIndex: R,
+		focusStep: I,
+		selectStep: F,
+		registerStep: N,
+		id: E,
+		getAdjacentIndex: L,
+		registerStepMeta: P,
+		sizeItem: U.value,
+		colorItem: W.value,
+		activeStep: M.value,
+		errorColorItem: G.value,
+		linear: A.value.linear === !0,
+		orientationItem: K.value,
+		orientation: String(A.value.orientation)
+	}));
+	a(r, q);
+	let J = i(() => e(A.value.customProps?.root, k.value.inheritedAttrs, {
+		"aria-label": "Progress",
+		class: g({ [l(z.value, "root") ?? ""]: !0 })
+	}));
+	return {
+		merged: A,
+		listBind: i(() => e(A.value.customProps?.list, {}, { class: g({
+			[f.list]: !0,
+			[l(U.value, "track") ?? ""]: !0,
+			[l(K.value, "list") ?? ""]: !0,
+			[l(z.value, "list") ?? ""]: !0,
+			"[&>li:last-child_[data-part=connector]]:hidden": !0
+		}) })),
+		rootBind: J,
+		contextValue: q
+	};
+}
+//#endregion
+export { b as useStepper };

package/dist/Components/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+export { useStepper } from './composables/useStepper';
+export type { StepperClasses, StepperColorOverrides, StepperCustomProps, StepperEmits, StepperOrientationOverrides, StepperOwnProps, StepperProps, StepperSizeOverrides, StepperSlots, } from './stepper.types';
+export { default as Stepper } from './Stepper.vue';
+export { STEPPER_INJECTION_KEY, type StepperContextValue, type StepperStepMeta, } from './stepperInjectionKey';

package/dist/Components/Stepper/index.js

@@ -0,0 +1,4 @@
+import { STEPPER_INJECTION_KEY as e } from "./stepperInjectionKey.js";
+import { useStepper as t } from "./composables/useStepper.js";
+import n from "./Stepper.js";
+export { e as STEPPER_INJECTION_KEY, n as Stepper, t as useStepper };

package/dist/Components/Stepper/stepper.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, OlHTMLAttributes, Slot } from 'vue';
+import { StepperColor, StepperOrientation, StepperSize } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+export interface StepperSizeOverrides {}
+export interface StepperColorOverrides {}
+export interface StepperOrientationOverrides {}
+export interface StepperClasses {
+    /**
+     * Classes merged onto the ordered list.
+     */
+    list?: string;
+    /**
+     * Classes merged onto the nav root.
+     */
+    root?: string;
+}
+export interface StepperCustomProps {
+    /**
+     * Props forwarded to the ordered list.
+     *
+     * @default undefined
+     */
+    list?: OlHTMLAttributes;
+    /**
+     * Props forwarded to the nav root.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface StepperEmits {
+    /**
+     * Emitted when the active index changes.
+     */
+    change: [step: number];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [step: number];
+}
+/**
+ * Multi-step flow indicator. Compose with `Step`.
+ */
+export interface StepperOwnProps {
+    /**
+     * Classes for stepper parts.
+     *
+     * @default undefined
+     */
+    classes?: StepperClasses;
+    /**
+     * Accent color for active / completed steps.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<StepperColor, StepperColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: StepperCustomProps;
+    /**
+     * Block jumping ahead of incomplete steps.
+     *
+     * @default true
+     */
+    linear?: boolean;
+    /**
+     * Layout direction.
+     *
+     * @default "horizontal"
+     */
+    orientation?: MergeProps<StepperOrientation, StepperOrientationOverrides>;
+    /**
+     * Indicator and label scale.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<StepperSize, StepperSizeOverrides>;
+}
+export interface StepperSlots {
+    /**
+     * The children to render (`Step`, etc.).
+     */
+    default?: Slot<undefined>;
+}
+export type StepperProps = MergeHtmlProps<StepperOwnProps, HTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     */
+    modelValue?: number;
+};

package/dist/Components/Stepper/stepperInjectionKey.d.ts

@@ -0,0 +1,77 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { StepperColorItem, StepperOrientationItem, StepperSizeItem } from '@bridge-ui/core/Tokens';
+/**
+ * Per-step flags registered for click / keyboard gating.
+ */
+export type StepperStepMeta = {
+    /**
+     * Whether the step may be selected.
+     */
+    clickable: boolean;
+    /**
+     * Whether the step is disabled.
+     */
+    disabled: boolean;
+};
+/**
+ * Shared stepper state for `Step` descendants.
+ */
+export type StepperContextValue = {
+    /**
+     * Bound 0-based active index.
+     */
+    activeStep: number;
+    /**
+     * Accent color item for the stepper `color` token.
+     */
+    colorItem: undefined | StepperColorItem;
+    /**
+     * Error palette (used when a step has `error`).
+     */
+    errorColorItem: undefined | StepperColorItem;
+    /**
+     * Focus a step trigger by index.
+     */
+    focusStep: (index: number) => void;
+    /**
+     * Next enabled, clickable index from `from`, wrapping around.
+     */
+    getAdjacentIndex: (from: number, direction: 1 | -1) => number;
+    /**
+     * Resolves a registered step's 0-based index.
+     */
+    getIndex: (id: string) => number;
+    /**
+     * Stable id prefix for step / content pairing.
+     */
+    id: string;
+    /**
+     * When true, block jumping ahead of incomplete steps.
+     */
+    linear: boolean;
+    /**
+     * Layout direction token key.
+     */
+    orientation: string;
+    /**
+     * Orientation class map.
+     */
+    orientationItem: undefined | StepperOrientationItem;
+    /**
+     * Registers a step id and returns unregister.
+     */
+    registerStep: (id: string) => () => void;
+    /**
+     * Records clickable / disabled for an index.
+     */
+    registerStepMeta: (index: number, meta: StepperStepMeta) => void;
+    /**
+     * Selects a step when clickable.
+     */
+    selectStep: (index: number) => void;
+    /**
+     * Size class map.
+     */
+    sizeItem: undefined | StepperSizeItem;
+};
+export declare const STEPPER_INJECTION_KEY: InjectionKey<ComputedRef<StepperContextValue>>;