@vizejs/ui 0.386.0 → 0.388.0

package/dist/stepper-CwX6BZaN.mjs

@@ -0,0 +1,912 @@
+import { a as useDeterministicId, i as toDeterministicId, n as deriveDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { t as createCollectionRegistry } from "./collection-Cncgrq4U.mjs";
+import { n as useCompositeNavigation } from "./composite-navigation-D6WKS_BY.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createElementBlock, defineComponent, guardReactiveProps, nextTick, normalizeProps, onUnmounted, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/families/navigation/stepper/stepper-context.ts
+const stepperContext = createContext("Stepper");
+const stepperItemContext = createContext("StepperItem");
+//#endregion
+//#region src/families/navigation/stepper/stepper-navigation.ts
+/** Return a stable visual state for one Stepper item. */
+function getStepperItemState(options) {
+	if (options.disabled) return "disabled";
+	if (options.current) return "current";
+	if (options.completed) return "completed";
+	return "pending";
+}
+/** Return whether linear Stepper rules allow activating a target value. */
+function stepperLinearAllows(items, selected, value) {
+	const enabledItems = items.filter((item) => !item.disabled);
+	const targetIndex = enabledItems.findIndex((item) => item.key === value);
+	if (targetIndex < 0) return false;
+	const selectedIndex = selected === null ? -1 : enabledItems.findIndex((item) => item.key === selected);
+	if (selectedIndex >= 0 && targetIndex <= selectedIndex) return true;
+	return enabledItems.slice(0, targetIndex).every((item) => item.value.completed.value);
+}
+/** Return whether a Stepper value can be selected under the current root state. */
+function isStepperSelectable(options) {
+	if (options.disabled || options.item === void 0 || options.item.disabled) return false;
+	if (options.selected === options.value) return true;
+	return options.navigationMode === "free" || stepperLinearAllows(options.items, options.selected, options.value);
+}
+/** Return the next or previous enabled Stepper value from a current value. */
+function getRelativeStepperValue(items, selected, direction) {
+	if (items.length === 0) return null;
+	const selectedIndex = selected === null ? -1 : items.findIndex((item) => item.key === selected);
+	return items[direction === "next" ? selectedIndex < 0 ? 0 : selectedIndex + 1 : selectedIndex < 0 ? items.length - 1 : selectedIndex - 1]?.key ?? null;
+}
+//#endregion
+//#region src/families/navigation/stepper/stepper-value.ts
+const safeSegment = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+/** Return whether two public Stepper values represent the same current step. */
+function stepperValueEquals(left, right) {
+	return Object.is(left, right);
+}
+/** Create a deterministic, DOM-id-safe segment for an arbitrary step value. */
+function getStepperValueIdSegment(value) {
+	if (safeSegment.test(value)) return `value-${value}`;
+	return `value-${value.replaceAll(/[^A-Za-z0-9_-]+/g, "-").replaceAll(/^-+|-+$/g, "").slice(0, 32) || "empty"}-${hashStepperValue(value)}`;
+}
+function hashStepperValue(value) {
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index++) {
+		hash ^= value.charCodeAt(index);
+		hash = Math.imul(hash, 16777619) >>> 0;
+	}
+	return hash.toString(36);
+}
+//#endregion
+//#region src/families/navigation/stepper/stepper-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = [
+	"id",
+	"dir",
+	"data-state",
+	"data-disabled",
+	"data-orientation",
+	"data-navigation-mode",
+	"data-linear",
+	"data-dir",
+	"data-value",
+	"data-current-index",
+	"data-completed-count"
+];
+//#endregion
+//#region src/families/navigation/stepper/stepper-root.vue
+var stepper_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stepper-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		navigationMode: {
+			type: String,
+			required: false,
+			default: "linear"
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "stepper"
+		});
+		const listId = computed(() => deriveDeterministicId(baseId.value, "list"));
+		const disabledState = computed(() => __props.disabled);
+		const navigationModeState = computed(() => __props.navigationMode);
+		const orientationState = computed(() => __props.orientation);
+		const dirState = computed(() => __props.dir);
+		const registry = createCollectionRegistry({ disabledBehavior: "skip" });
+		const firstEnabledValue = computed(() => registry.navigableItems.value[0]?.key ?? null);
+		const valueState = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue,
+			equals: Object.is
+		});
+		const currentValue = computed(() => {
+			const configured = valueState.value.value;
+			if (valueState.controlled.value) return configured ?? null;
+			return configured === void 0 ? firstEnabledValue.value : configured;
+		});
+		const completedValues = computed(() => Object.freeze(registry.items.value.filter((item) => item.value.completed.value).map((item) => item.key)));
+		const completedCount = computed(() => completedValues.value.length);
+		const currentIndex = computed(() => {
+			const value = getCurrentValue();
+			return value === null ? -1 : registry.items.value.findIndex((item) => item.key === value);
+		});
+		const state = computed(() => {
+			if (disabledState.value) return "disabled";
+			return currentValue.value === null ? "empty" : "active";
+		});
+		const slotState = computed(() => ({
+			completedValues: completedValues.value,
+			currentIndex: currentIndex.value,
+			dir: dirState.value,
+			disabled: disabledState.value,
+			navigationMode: navigationModeState.value,
+			orientation: orientationState.value,
+			state: state.value,
+			value: currentValue.value
+		}));
+		function getItemId(value) {
+			return deriveDeterministicId(baseId.value, `item-${getStepperValueIdSegment(value)}`);
+		}
+		function getTriggerId(value) {
+			return deriveDeterministicId(baseId.value, `trigger-${getStepperValueIdSegment(value)}`);
+		}
+		function getContentId(value) {
+			return deriveDeterministicId(baseId.value, `content-${getStepperValueIdSegment(value)}`);
+		}
+		function getCurrentValue() {
+			return currentValue.value;
+		}
+		function isCurrent(value) {
+			return getCurrentValue() === value;
+		}
+		function isCompleted(value) {
+			return registry.getItem(value)?.value.completed.value === true;
+		}
+		function isStepDisabled(value) {
+			return disabledState.value || registry.getItem(value)?.disabled === true;
+		}
+		function getItemIndex(value) {
+			return registry.items.value.findIndex((item) => item.key === value);
+		}
+		function getItemState(value) {
+			return getStepperItemState({
+				completed: isCompleted(value),
+				current: isCurrent(value),
+				disabled: isStepDisabled(value)
+			});
+		}
+		function isSelectable(value) {
+			return isStepperSelectable({
+				disabled: disabledState.value,
+				item: registry.getItem(value),
+				items: registry.items.value,
+				navigationMode: navigationModeState.value,
+				selected: getCurrentValue(),
+				value
+			});
+		}
+		function commitValue(value, nativeEvent) {
+			const previous = getCurrentValue();
+			if (stepperValueEquals(previous, value)) return false;
+			valueState.set(value);
+			if (value !== null && registry.getItem(value)?.disabled === false) registry.setActiveKey(value);
+			emit("update:modelValue", value);
+			emit("change", value, previous, nativeEvent);
+			return true;
+		}
+		function setValue(value, nativeEvent = null) {
+			if (value !== null && !isSelectable(value)) return false;
+			return commitValue(value, nativeEvent);
+		}
+		function selectValue(value, nativeEvent = null) {
+			return setValue(value, nativeEvent);
+		}
+		function selectRelative(direction, nativeEvent) {
+			const target = getRelativeStepperValue(registry.navigableItems.value, getCurrentValue(), direction);
+			return target === null ? false : setValue(target, nativeEvent);
+		}
+		function next(nativeEvent = null) {
+			return selectRelative("next", nativeEvent);
+		}
+		function previous(nativeEvent = null) {
+			return selectRelative("previous", nativeEvent);
+		}
+		function reset() {
+			return commitValue(__props.defaultValue === void 0 ? firstEnabledValue.value : __props.defaultValue, null);
+		}
+		function syncActiveValue() {
+			if (disabledState.value) {
+				if (registry.activeKey.value !== null) registry.setActiveKey(null);
+				return;
+			}
+			const selected = getCurrentValue();
+			const selectedItem = selected === null ? void 0 : registry.getItem(selected);
+			const target = selectedItem !== void 0 && !selectedItem.disabled ? selected : firstEnabledValue.value;
+			if (target !== registry.activeKey.value) registry.setActiveKey(target);
+		}
+		function focus(options) {
+			syncActiveValue();
+			const target = registry.activeKey.value ?? firstEnabledValue.value;
+			if (target !== null) focusValue(target, options);
+		}
+		function focusValue(value, options) {
+			if (disabledState.value) return false;
+			const item = registry.getItem(value);
+			if (item === void 0 || item.disabled || !(item.element instanceof HTMLElement)) return false;
+			registry.setActiveKey(value);
+			item.element.focus(options);
+			return true;
+		}
+		function registerItem(input) {
+			const registration = registry.register({
+				key: input.value,
+				value: {
+					completed: input.completed,
+					contentId: input.contentId,
+					id: input.id,
+					triggerId: input.triggerId
+				},
+				element: input.element,
+				disabled: input.disabled,
+				textValue: input.textValue,
+				order: input.order
+			});
+			syncActiveValue();
+			nextTick(syncActiveValue);
+			return registration;
+		}
+		const navigation = useCompositeNavigation({
+			registry,
+			focusStrategy: "roving",
+			getItemId: ({ key }) => getTriggerId(key),
+			orientation: orientationState,
+			direction: dirState,
+			loop: () => __props.loop,
+			isDisabled: disabledState
+		});
+		watch([
+			disabledState,
+			currentValue,
+			registry.navigableItems
+		], () => syncActiveValue(), {
+			flush: "post",
+			immediate: true
+		});
+		watch(registry.items, (items, previousItems) => {
+			const selected = getCurrentValue();
+			if (valueState.controlled.value || selected === null) return;
+			const hadSelected = previousItems.some((item) => item.key === selected);
+			const hasSelected = items.some((item) => item.key === selected);
+			if (hadSelected && !hasSelected) setValue(firstEnabledValue.value, null);
+		}, { flush: "post" });
+		stepperContext.provide({
+			completedValues,
+			currentIndex,
+			dir: dirState,
+			disabled: disabledState,
+			focus,
+			focusValue,
+			getContentId,
+			getItemId,
+			getItemIndex,
+			getItemState,
+			getTriggerId,
+			id: baseId,
+			isCompleted,
+			isCurrent,
+			isSelectable,
+			isStepDisabled,
+			listId,
+			navigation,
+			navigationMode: navigationModeState,
+			orientation: orientationState,
+			registerItem,
+			registry,
+			selectValue,
+			setValue,
+			state,
+			syncActiveValue,
+			value: currentValue
+		});
+		__expose({
+			completedValues,
+			currentIndex,
+			dir: dirState,
+			disabled: disabledState,
+			element,
+			focus,
+			id: baseId,
+			isSelectable,
+			listId,
+			navigationMode: navigationModeState,
+			next,
+			orientation: orientationState,
+			previous,
+			reset,
+			selectValue,
+			setValue,
+			state,
+			value: currentValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				ref_key: "element",
+				ref: element,
+				dir: dirState.value,
+				"data-vize-ui": "stepper-root",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-navigation-mode": navigationModeState.value,
+				"data-linear": navigationModeState.value === "linear" ? "true" : void 0,
+				"data-dir": dirState.value,
+				"data-value": currentValue.value ?? void 0,
+				"data-current-index": currentIndex.value,
+				"data-completed-count": completedCount.value
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-ab7c5bb6"]]);
+//#endregion
+//#region src/families/navigation/stepper/stepper-content.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"role",
+	"hidden",
+	"tabindex",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-value",
+	"data-current",
+	"data-completed",
+	"data-disabled",
+	"data-orientation"
+];
+//#endregion
+//#region src/families/navigation/stepper/stepper-content.vue
+var stepper_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stepper-content",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		role: {
+			type: [String, null],
+			required: false,
+			default: "region"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = stepperContext.use();
+		const element = useTemplateRef("element");
+		const contentId = computed(() => context.getContentId(__props.value));
+		const triggerId = computed(() => context.getTriggerId(__props.value));
+		const current = computed(() => context.isCurrent(__props.value));
+		const completed = computed(() => context.isCompleted(__props.value));
+		const disabled = computed(() => context.isStepDisabled(__props.value));
+		const contentState = computed(() => current.value ? "active" : "inactive");
+		const roleValue = computed(() => __props.role ?? void 0);
+		const labelledBy = computed(() => {
+			if (roleValue.value === void 0 || __props.ariaLabel !== void 0) return void 0;
+			return __props.ariaLabelledby ?? triggerId.value;
+		});
+		const slotState = computed(() => ({
+			active: current.value,
+			completed: completed.value,
+			current: current.value,
+			disabled: disabled.value,
+			orientation: context.orientation.value,
+			state: contentState.value,
+			value: __props.value
+		}));
+		function focusContent(options) {
+			if (current.value) element.value?.focus(options);
+		}
+		__expose({
+			active: current,
+			completed,
+			current,
+			disabled,
+			element,
+			focusContent,
+			id: contentId,
+			orientation: context.orientation,
+			state: contentState,
+			triggerId,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: contentId.value,
+				ref_key: "element",
+				ref: element,
+				role: roleValue.value,
+				hidden: current.value ? void 0 : true,
+				tabindex: current.value ? 0 : void 0,
+				"aria-label": roleValue.value === void 0 ? void 0 : __props.ariaLabel,
+				"aria-labelledby": labelledBy.value,
+				"aria-describedby": roleValue.value === void 0 ? void 0 : __props.ariaDescribedby,
+				"data-vize-ui": "stepper-content",
+				part: "content",
+				"data-state": contentState.value,
+				"data-value": __props.value,
+				"data-current": current.value ? "true" : void 0,
+				"data-completed": completed.value ? "true" : void 0,
+				"data-disabled": disabled.value ? "true" : void 0,
+				"data-orientation": unref(context).orientation.value
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-388c2ad0"]]);
+//#endregion
+//#region src/families/navigation/stepper/stepper-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-value",
+	"data-index",
+	"data-current",
+	"data-completed",
+	"data-disabled",
+	"data-selectable",
+	"data-locked",
+	"data-orientation",
+	"data-navigation-mode"
+];
+//#endregion
+//#region src/families/navigation/stepper/stepper-item.vue
+var stepper_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stepper-item",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		completed: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		textValue: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		order: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = stepperContext.use();
+		const element = useTemplateRef("element");
+		const triggerElement = shallowRef(null);
+		const itemValue = computed(() => __props.value);
+		const generatedItemId = computed(() => context.getItemId(__props.value));
+		const itemId = computed(() => __props.id === null || __props.id === void 0 ? generatedItemId.value : toDeterministicId(__props.id));
+		const triggerId = computed(() => context.getTriggerId(__props.value));
+		const contentId = computed(() => context.getContentId(__props.value));
+		const completedState = computed(() => __props.completed);
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const current = computed(() => context.isCurrent(__props.value));
+		const selectable = computed(() => context.isSelectable(__props.value));
+		const locked = computed(() => !itemDisabled.value && !selectable.value);
+		const itemState = computed(() => context.getItemState(__props.value));
+		const itemIndex = computed(() => context.getItemIndex(__props.value));
+		const slotState = computed(() => ({
+			completed: completedState.value,
+			current: current.value,
+			disabled: itemDisabled.value,
+			index: itemIndex.value,
+			locked: locked.value,
+			navigationMode: context.navigationMode.value,
+			orientation: context.orientation.value,
+			selectable: selectable.value,
+			state: itemState.value,
+			value: __props.value
+		}));
+		let registration = null;
+		function register() {
+			registration?.unregister();
+			registration = context.registerItem({
+				completed: completedState,
+				contentId,
+				disabled: itemDisabled,
+				element: triggerElement,
+				id: itemId,
+				order: () => __props.order,
+				textValue: () => __props.textValue,
+				triggerId,
+				value: __props.value
+			});
+		}
+		watch(() => __props.value, register, {
+			flush: "sync",
+			immediate: true
+		});
+		watch([
+			itemDisabled,
+			completedState,
+			() => __props.order
+		], () => context.syncActiveValue(), { flush: "post" });
+		onUnmounted(() => {
+			registration?.unregister();
+			registration = null;
+			nextTick(context.syncActiveValue);
+		});
+		function setTriggerElement(nextElement) {
+			triggerElement.value = nextElement;
+		}
+		function focus(options) {
+			return context.focusValue(__props.value, options);
+		}
+		function select(nativeEvent = null) {
+			return context.selectValue(__props.value, nativeEvent);
+		}
+		const itemContext = stepperItemContext.provide({
+			completed: completedState,
+			contentId,
+			current,
+			disabled: itemDisabled,
+			focus,
+			id: itemId,
+			index: itemIndex,
+			locked,
+			navigationMode: context.navigationMode,
+			orientation: context.orientation,
+			selectable,
+			select,
+			setTriggerElement,
+			state: itemState,
+			triggerId,
+			value: itemValue
+		});
+		__expose({
+			completed: completedState,
+			contentId,
+			current,
+			disabled: itemDisabled,
+			element,
+			focus,
+			id: itemId,
+			index: itemIndex,
+			locked,
+			navigationMode: context.navigationMode,
+			orientation: context.orientation,
+			selectable,
+			select,
+			state: itemState,
+			triggerId,
+			value: itemValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(itemContext).id.value,
+				ref_key: "element",
+				ref: element,
+				role: "listitem",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "stepper-item",
+				part: "item",
+				"data-state": unref(itemContext).state.value,
+				"data-value": unref(itemContext).value.value,
+				"data-index": unref(itemContext).index.value,
+				"data-current": unref(itemContext).current.value ? "true" : void 0,
+				"data-completed": unref(itemContext).completed.value ? "true" : void 0,
+				"data-disabled": unref(itemContext).disabled.value ? "true" : void 0,
+				"data-selectable": unref(itemContext).selectable.value ? "true" : "false",
+				"data-locked": unref(itemContext).locked.value ? "true" : void 0,
+				"data-orientation": unref(itemContext).orientation.value,
+				"data-navigation-mode": unref(itemContext).navigationMode.value
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-812ee40d"]]);
+//#endregion
+//#region src/families/navigation/stepper/stepper-list.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-orientation",
+	"data-state",
+	"data-disabled",
+	"data-orientation",
+	"data-navigation-mode",
+	"data-value"
+];
+//#endregion
+//#region src/families/navigation/stepper/stepper-list.vue
+var stepper_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stepper-list",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = stepperContext.use();
+		const element = useTemplateRef("element");
+		const slotState = computed(() => ({
+			completedValues: context.completedValues.value,
+			currentIndex: context.currentIndex.value,
+			dir: context.dir.value,
+			disabled: context.disabled.value,
+			listId: context.listId.value,
+			navigationMode: context.navigationMode.value,
+			orientation: context.orientation.value,
+			state: context.state.value,
+			value: context.value.value
+		}));
+		__expose({
+			completedValues: context.completedValues,
+			currentIndex: context.currentIndex,
+			dir: context.dir,
+			disabled: context.disabled,
+			element,
+			focus: context.focus,
+			listId: context.listId,
+			navigationMode: context.navigationMode,
+			orientation: context.orientation,
+			state: context.state,
+			value: context.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(context).listId.value,
+				ref_key: "element",
+				ref: element,
+				role: "list",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": unref(context).orientation.value,
+				"data-vize-ui": "stepper-list",
+				part: "list",
+				"data-state": unref(context).state.value,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0,
+				"data-orientation": unref(context).orientation.value,
+				"data-navigation-mode": unref(context).navigationMode.value,
+				"data-value": unref(context).value.value ?? void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-eafa3455"]]);
+//#endregion
+//#region src/families/navigation/stepper/stepper-trigger.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"disabled",
+	"tabindex",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-current",
+	"aria-controls",
+	"aria-disabled",
+	"data-state",
+	"data-value",
+	"data-index",
+	"data-current",
+	"data-completed",
+	"data-disabled",
+	"data-selectable",
+	"data-locked",
+	"data-orientation",
+	"data-navigation-mode"
+];
+//#endregion
+//#region src/families/navigation/stepper/stepper-trigger.vue
+var stepper_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stepper-trigger",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = stepperContext.use();
+		const item = stepperItemContext.use();
+		const element = useTemplateRef("element");
+		const nativeDisabled = computed(() => item.disabled.value);
+		const ariaDisabled = computed(() => nativeDisabled.value || !item.selectable.value ? "true" : void 0);
+		const navigationProps = computed(() => context.navigation.getItemProps(item.value.value));
+		const tabIndex = computed(() => nativeDisabled.value ? void 0 : navigationProps.value.tabindex);
+		const slotState = computed(() => ({
+			completed: item.completed.value,
+			current: item.current.value,
+			disabled: item.disabled.value,
+			index: item.index.value,
+			locked: item.locked.value,
+			navigationMode: item.navigationMode.value,
+			orientation: item.orientation.value,
+			selectable: item.selectable.value,
+			state: item.state.value,
+			value: item.value.value
+		}));
+		watch(element, (button) => item.setTriggerElement(button), {
+			flush: "post",
+			immediate: true
+		});
+		onUnmounted(() => item.setTriggerElement(null));
+		function onPointerdown(event) {
+			if (!nativeDisabled.value) navigationProps.value.onPointerdown(event);
+		}
+		function onFocus(event) {
+			if (!nativeDisabled.value) navigationProps.value.onFocus(event);
+		}
+		function onKeydown(event) {
+			if (!nativeDisabled.value) context.navigation.getContainerProps().onKeydown(event);
+		}
+		function onClick(event) {
+			if (nativeDisabled.value || !item.selectable.value) {
+				event.preventDefault();
+				if (nativeDisabled.value) event.stopImmediatePropagation();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) item.select(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function select() {
+			return item.select(null);
+		}
+		__expose({
+			completed: item.completed,
+			contentId: item.contentId,
+			current: item.current,
+			disabled: item.disabled,
+			element,
+			focus,
+			id: item.triggerId,
+			index: item.index,
+			locked: item.locked,
+			navigationMode: item.navigationMode,
+			orientation: item.orientation,
+			selectable: item.selectable,
+			select,
+			state: item.state,
+			value: item.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: unref(item).triggerId.value,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: nativeDisabled.value,
+				tabindex: tabIndex.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-current": unref(item).current.value ? "step" : void 0,
+				"aria-controls": unref(item).contentId.value,
+				"aria-disabled": ariaDisabled.value,
+				"data-vize-ui": "stepper-trigger",
+				part: "trigger",
+				"data-state": unref(item).state.value,
+				"data-value": unref(item).value.value,
+				"data-index": unref(item).index.value,
+				"data-current": unref(item).current.value ? "true" : void 0,
+				"data-completed": unref(item).completed.value ? "true" : void 0,
+				"data-disabled": unref(item).disabled.value ? "true" : void 0,
+				"data-selectable": unref(item).selectable.value ? "true" : "false",
+				"data-locked": unref(item).locked.value ? "true" : void 0,
+				"data-orientation": unref(item).orientation.value,
+				"data-navigation-mode": unref(item).navigationMode.value,
+				onPointerdown,
+				onFocus,
+				onKeydown,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true), renderSlot(_ctx.$slots, "indicator", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 40, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-93e0a263"]]);
+//#endregion
+export { stepper_root_default as a, stepper_content_default as i, stepper_list_default as n, getStepperValueIdSegment as o, stepper_item_default as r, stepperValueEquals as s, stepper_trigger_default as t };