@astryx-vue/core 0.3.0 → 0.4.0

package/dist/Spinner-DdVUadii.js

@@ -0,0 +1,200 @@
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, toDisplayString, useAttrs, useId, useSlots } from "vue";
+import "../styles/spinner.css";
+//#region src/Spinner/spinnerGeometry.ts
+const RESOLVED_GEOMETRY = ["--_spinner-ring-diameter", "--_spinner-ring-stroke"];
+let registered = false;
+/**
+* 把圆环的直径和描边登记成长度。
+* 这样主题写成 `0` 时，它是 0px，而不是把 `calc()` 里的加法变成非法值。
+* 公开变量不登记，避免整份文档都带着一个初始值。
+*/
+function registerSpinnerGeometry() {
+	if (registered || typeof CSS === "undefined" || typeof CSS.registerProperty !== "function") return;
+	registered = true;
+	for (const name of RESOLVED_GEOMETRY) try {
+		CSS.registerProperty({
+			name,
+			syntax: "<length>",
+			inherits: true,
+			initialValue: "0px"
+		});
+	} catch {}
+}
+//#endregion
+//#region src/Spinner/spinnerPhase.ts
+const pending = /* @__PURE__ */ new Set();
+let scheduled = false;
+function pinPendingRings() {
+	scheduled = false;
+	const animations = [];
+	for (const svg of pending) if (typeof svg.getAnimations === "function") animations.push(...svg.getAnimations({ subtree: true }));
+	pending.clear();
+	for (const animation of animations) animation.startTime = 0;
+}
+/**
+* 把这条弧的动画起点钉在文档时间线的 0。
+* 后出现的加载圈因此和先出现的停在同一相位，而不是各自从挂载的那一帧开始。
+*/
+function bindSpinnerPhase(svg) {
+	if (typeof svg.getAnimations !== "function") return () => {};
+	pending.add(svg);
+	if (!scheduled) {
+		scheduled = true;
+		requestAnimationFrame(pinPendingRings);
+	}
+	return () => {
+		pending.delete(svg);
+	};
+}
+//#endregion
+//#region src/Spinner/Spinner.vue
+const _hoisted_1 = ["data-size", "data-shade"];
+const _hoisted_2 = ["aria-label", "aria-labelledby"];
+const _hoisted_3 = ["width", "height"];
+const _hoisted_4 = ["r", "stroke-width"];
+const _hoisted_5 = [
+	"r",
+	"stroke-width",
+	"stroke-dasharray"
+];
+const _hoisted_6 = [
+	"data-size",
+	"data-shade",
+	"aria-label"
+];
+const _hoisted_7 = ["width", "height"];
+const _hoisted_8 = ["r", "stroke-width"];
+const _hoisted_9 = [
+	"r",
+	"stroke-width",
+	"stroke-dasharray"
+];
+const ARC_FRACTION = .375;
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxSpinner",
+	inheritAttrs: false,
+	__name: "Spinner",
+	props: {
+		size: { default: "md" },
+		shade: { default: "default" },
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const RING = {
+			sm: {
+				diameter: 10,
+				stroke: 2
+			},
+			md: {
+				diameter: 14,
+				stroke: 3
+			},
+			lg: {
+				diameter: 18,
+				stroke: 3
+			},
+			xl: {
+				diameter: 28,
+				stroke: 4
+			}
+		};
+		registerSpinnerGeometry();
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const messages = useAstryxMessages();
+		const labelId = `astryx-spinner-label-${useId()}`;
+		const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.label));
+		const ariaLabel = computed(() => attrs["aria-label"]);
+		const namedByVisibleLabel = computed(() => Boolean(props.label) && !ariaLabel.value);
+		const ringLabelledBy = computed(() => namedByVisibleLabel.value ? labelId : void 0);
+		const ringAriaLabel = computed(() => {
+			if (namedByVisibleLabel.value) return void 0;
+			return ariaLabel.value ?? props.label ?? messages.value.spinner.loading;
+		});
+		const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "aria-label" && key !== "style")));
+		const geometry = computed(() => RING[props.size]);
+		const frameSize = computed(() => geometry.value.diameter + geometry.value.stroke * 2);
+		const arcLength = computed(() => Math.PI * geometry.value.diameter * ARC_FRACTION);
+		const gapLength = computed(() => Math.PI * geometry.value.diameter - arcLength.value);
+		const boxStyle = computed(() => ({
+			width: `var(--_spinner-box-size, ${frameSize.value}px)`,
+			height: `var(--_spinner-box-size, ${frameSize.value}px)`
+		}));
+		const callerStyle = computed(() => attrs.style);
+		const rootStyle = computed(() => [callerStyle.value, hasLabel.value ? void 0 : boxStyle.value]);
+		let releasePhase;
+		function onRing(element) {
+			releasePhase?.();
+			releasePhase = void 0;
+			if (element instanceof SVGSVGElement) releasePhase = bindSpinnerPhase(element);
+		}
+		return (_ctx, _cache) => {
+			return hasLabel.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, rootAttrs.value, {
+				class: "astryx-spinner astryx-spinner-group",
+				"data-size": __props.size,
+				"data-shade": __props.shade,
+				style: callerStyle.value
+			}), [createElementVNode("span", {
+				class: "astryx-spinner-box",
+				role: "status",
+				"aria-label": ringAriaLabel.value,
+				"aria-labelledby": ringLabelledBy.value,
+				style: normalizeStyle(boxStyle.value)
+			}, [(openBlock(), createElementBlock("svg", {
+				ref: onRing,
+				class: "astryx-spinner__ring",
+				width: frameSize.value,
+				height: frameSize.value,
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [createElementVNode("circle", {
+				class: "astryx-spinner__track",
+				cx: "50%",
+				cy: "50%",
+				r: geometry.value.diameter / 2,
+				"stroke-width": geometry.value.stroke
+			}, null, 8, _hoisted_4), createElementVNode("circle", {
+				class: "astryx-spinner__arc",
+				cx: "50%",
+				cy: "50%",
+				r: geometry.value.diameter / 2,
+				"stroke-width": geometry.value.stroke,
+				"stroke-dasharray": `${arcLength.value} ${gapLength.value}`
+			}, null, 8, _hoisted_5)], 8, _hoisted_3))], 12, _hoisted_2), createElementVNode("span", {
+				id: labelId,
+				class: "astryx-spinner-label"
+			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])], 16, _hoisted_1)) : (openBlock(), createElementBlock("span", mergeProps({ key: 1 }, rootAttrs.value, {
+				class: "astryx-spinner astryx-spinner-box",
+				role: "status",
+				"data-size": __props.size,
+				"data-shade": __props.shade,
+				"aria-label": ringAriaLabel.value,
+				style: rootStyle.value
+			}), [(openBlock(), createElementBlock("svg", {
+				ref: onRing,
+				class: "astryx-spinner__ring",
+				width: frameSize.value,
+				height: frameSize.value,
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [createElementVNode("circle", {
+				class: "astryx-spinner__track",
+				cx: "50%",
+				cy: "50%",
+				r: geometry.value.diameter / 2,
+				"stroke-width": geometry.value.stroke
+			}, null, 8, _hoisted_8), createElementVNode("circle", {
+				class: "astryx-spinner__arc",
+				cx: "50%",
+				cy: "50%",
+				r: geometry.value.diameter / 2,
+				"stroke-width": geometry.value.stroke,
+				"stroke-dasharray": `${arcLength.value} ${gapLength.value}`
+			}, null, 8, _hoisted_9)], 8, _hoisted_7))], 16, _hoisted_6));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Stack/index.d.ts

@@ -1,3 +1,3 @@
 import { a as StackDirection, c as StackItemProps, d as StackProps, f as StackSizeValue, i as StackCrossAlignment, l as StackItemSize, m as VStackProps, n as SpacingStep, o as StackElement, p as StackWrap, r as StackAlignment, s as StackItemCrossAlignSelf, t as HStackProps, u as StackMainAlignment } from "../types-BTk0WZ0b.js";
-import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-BgT6mH3U.js";
+import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-D7ShT2c-.js";
 export { _default as HStack, type HStackProps, type SpacingStep, _default$1 as Stack, type StackAlignment, type StackCrossAlignment, type StackDirection, type StackElement, _default$2 as StackItem, type StackItemCrossAlignSelf, type StackItemProps, type StackItemSize, type StackMainAlignment, type StackProps, type StackSizeValue, type StackWrap, _default$3 as VStack, type VStackProps };

package/dist/Stack/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main$1 } from "../Stack-kQlYbbL4.js";
-import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-CTsTFfar.js";
+import { t as _sfc_main$1 } from "../Stack-Bp-XN9J4.js";
+import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-Bb_h60t3.js";
 export { _sfc_main as HStack, _sfc_main$1 as Stack, _sfc_main$2 as StackItem, _sfc_main$3 as VStack };

package/dist/{Stack-CTsTFfar.js → Stack-Bb_h60t3.js}

@@ -1,5 +1,5 @@
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$3 } from "./Stack-kQlYbbL4.js";
+import { t as _sfc_main$3 } from "./Stack-Bp-XN9J4.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, useTemplateRef, withCtx } from "vue";
 import "../styles/stack.css";
 //#region src/Stack/HStack.vue

package/dist/{Stack-kQlYbbL4.js → Stack-Bp-XN9J4.js}

@@ -2,6 +2,7 @@ import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, useTemplateRef, withCtx } from "vue";
 import "../styles/stack.css";
 //#region src/Stack/Stack.vue
+const UNSET_SPACING = "initial";
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "Stack",
 	inheritAttrs: false,
@@ -62,6 +63,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function spacingValue(step) {
 			return step == null ? void 0 : spacingVariables[step];
 		}
+		/**
+		* 没写的间距变量也要占住，值写成 `initial`（等于「未设置」）。
+		* CSS 变量默认继承，空着不写会让里层 Stack 拿到外层 Stack 的内边距和间距。
+		*/
 		const rootStyle = computed(() => {
 			const stackStyle = {
 				height: formatSize(props.height),
@@ -69,13 +74,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				minHeight: formatSize(props.minHeight),
 				width: formatSize(props.width)
 			};
-			stackStyle["--astryx-stack-gap"] = spacingValue(props.gap);
-			stackStyle["--astryx-stack-padding-block"] = spacingValue(props.paddingBlock ?? props.padding);
-			stackStyle["--astryx-stack-padding-block-start"] = spacingValue(props.paddingBlockStart);
-			stackStyle["--astryx-stack-padding-block-end"] = spacingValue(props.paddingBlockEnd);
-			stackStyle["--astryx-stack-padding-inline"] = spacingValue(props.paddingInline ?? props.padding);
-			stackStyle["--astryx-stack-padding-inline-start"] = spacingValue(props.paddingInlineStart);
-			stackStyle["--astryx-stack-padding-inline-end"] = spacingValue(props.paddingInlineEnd);
+			stackStyle["--astryx-stack-gap"] = spacingValue(props.gap) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-block"] = spacingValue(props.paddingBlock ?? props.padding) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-block-start"] = spacingValue(props.paddingBlockStart) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-block-end"] = spacingValue(props.paddingBlockEnd) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-inline"] = spacingValue(props.paddingInline ?? props.padding) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-inline-start"] = spacingValue(props.paddingInlineStart) ?? UNSET_SPACING;
+			stackStyle["--astryx-stack-padding-inline-end"] = spacingValue(props.paddingInlineEnd) ?? UNSET_SPACING;
 			return [attrs.style, stackStyle];
 		});
 		return (_ctx, _cache) => {

package/dist/StatusDot/index.d.ts

@@ -1,2 +1,2 @@
-import { n as StatusDotProps, r as StatusDotVariant, t as _default } from "../index-DG52Bg0W.js";
+import { n as StatusDotProps, r as StatusDotVariant, t as _default } from "../index-CTf3SK0b.js";
 export { _default as StatusDot, type StatusDotProps, type StatusDotVariant };

package/dist/StatusDot/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../StatusDot-BPUhMOff.js";
+import { t as _sfc_main } from "../StatusDot-BS_ohXhd.js";
 export { _sfc_main as StatusDot };

package/dist/{StatusDot-BPUhMOff.js → StatusDot-BS_ohXhd.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main$1 } from "./Tooltip-C4Vaqd3G.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+import { t as _sfc_main$1 } from "./Tooltip-sAM8i1eO.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toRaw, useSlots, withCtx } from "vue";
 import "../styles/status-dot.css";
 //#region src/StatusDot/StatusDot.vue
 const _hoisted_1 = ["data-variant", "aria-label"];
@@ -18,7 +18,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		tooltip: {}
+		tooltip: {},
+		icon: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -26,6 +27,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const Passthrough = defineComponent({ setup(_props, { slots }) {
 			return () => slots.default?.();
 		} });
+		const slots = useSlots();
+		const icon = computed(() => props.icon ? toRaw(props.icon) : void 0);
+		const showsIcon = computed(() => Boolean(slots.icon) || icon.value != null);
 		const wrapper = computed(() => props.tooltip ? _sfc_main$1 : Passthrough);
 		const wrapperProps = computed(() => props.tooltip ? { content: props.tooltip } : {});
 		return (_ctx, _cache) => {
@@ -35,7 +39,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"data-variant": __props.variant,
 					role: "img",
 					"aria-label": __props.label
-				}, [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true)], 10, _hoisted_1)]),
+				}, [showsIcon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)], 10, _hoisted_1)]),
 				_: 3
 			}, 16);
 		};

package/dist/Stepper/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../Stepper-CE8dHysu.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Stepper-CyaSRSdu.js";
 export { _sfc_main as Step, _sfc_main$1 as Stepper };

package/dist/{Stepper-CE8dHysu.js → Stepper-CyaSRSdu.js}

@@ -1,9 +1,20 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/stepper.css";
 //#region src/Stepper/context.ts
-const stepperContextKey = Symbol("stepper");
+const stepperContextKey = defineLayerScopedKey("stepper", null);
+/**
+* 读最近的 `Stepper`。不在 `Stepper` 里（包括被浮层边界截断的情况）就报错，
+* 报错方式和上游 `useStepperContext` 一致。
+*/
+function useStepperContext() {
+	const context = readLayerScoped(stepperContextKey);
+	if (context == null) throw new Error("useStepperContext must be used within Stepper. Wrap your Step in <Stepper>.");
+	return context;
+}
 function shouldCollapseStepper(width, count, minimumStepWidth, orientation) {
 	if (orientation !== "horizontal" || count < 1) return false;
 	return width < count * (minimumStepWidth ?? 112);
@@ -106,6 +117,7 @@ const _hoisted_1$1 = [
 	"data-density",
 	"data-indicator-position",
 	"data-orientation",
+	"data-glyph",
 	"data-progress",
 	"data-status"
 ];
@@ -116,20 +128,22 @@ const _hoisted_3$1 = {
 };
 const _hoisted_4$1 = ["data-filled"];
 const _hoisted_5$1 = ["data-filled"];
-const _hoisted_6$1 = ["data-glyph"];
-const _hoisted_7$1 = { class: "astryx-step-copy" };
-const _hoisted_8$1 = { class: "astryx-step-label-row" };
-const _hoisted_9$1 = { class: "astryx-step-label" };
-const _hoisted_10 = {
+const _hoisted_6$1 = { class: "astryx-step-body" };
+const _hoisted_7$1 = ["data-glyph"];
+const _hoisted_8$1 = { class: "astryx-step-copy" };
+const _hoisted_9$1 = { class: "astryx-step-label-row" };
+const _hoisted_10 = [
+	"data-disabled",
+	"data-progress",
+	"data-status"
+];
+const _hoisted_11 = {
 	key: 1,
 	class: "astryx-step-optional"
 };
-const _hoisted_11 = {
+const _hoisted_12 = ["data-progress", "data-status"];
+const _hoisted_13 = {
 	key: 0,
-	class: "astryx-step-description"
-};
-const _hoisted_12 = {
-	key: 2,
 	class: "astryx-step-content"
 };
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
@@ -153,32 +167,33 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const stepper = inject(stepperContextKey);
+		const stepper = useStepperContext();
 		const messages = useAstryxMessages();
+		const { pressableProps } = usePressFeedback({ hasOverlay: false });
 		const progress = computed(() => {
-			const active = stepper?.activeStep.value ?? 0;
+			const active = stepper.activeStep.value;
 			if (props.step === active) return "in-progress";
 			if (props.step < active) return "completed";
 			return "not-started";
 		});
-		const density = computed(() => props.density ?? stepper?.density.value ?? "balanced");
-		const orientation = computed(() => stepper?.orientation.value ?? "horizontal");
-		const indicatorPosition = computed(() => stepper?.indicatorPosition.value ?? "separated");
-		const isClickable = computed(() => stepper?.isNonLinear.value === true && !props.isDisabled);
+		const density = computed(() => props.density ?? stepper.density.value);
+		const orientation = computed(() => stepper.orientation.value);
+		const indicatorPosition = computed(() => stepper.indicatorPosition.value);
+		const isClickable = computed(() => stepper.isNonLinear.value === true && !props.isDisabled);
 		const numberLabel = computed(() => String(props.step + 1));
 		const glyph = computed(() => resolveStepGlyph({
 			progress: progress.value,
 			indicator: props.indicator,
 			status: props.status
 		}));
-		const collapsed = computed(() => stepper?.collapsed.value === true);
-		const leadFilled = computed(() => props.step <= (stepper?.activeStep.value ?? 0));
-		const trailFilled = computed(() => props.step < (stepper?.activeStep.value ?? 0));
+		const collapsed = computed(() => stepper.collapsed.value === true);
+		const leadFilled = computed(() => props.step <= stepper.activeStep.value);
+		const trailFilled = computed(() => props.step < stepper.activeStep.value);
 		const accessibleName = computed(() => {
 			const stepNumber = props.step + 1;
 			const status = props.status === "error" ? messages.value.stepper.status.error : props.status === "warning" ? messages.value.stepper.status.warning : progress.value === "completed" ? messages.value.stepper.status.completed : null;
-			if (status == null) return messages.value.stepper.goToStep(stepNumber);
-			return messages.value.stepper.goToStepWithStatus(stepNumber, status);
+			if (status == null) return messages.value.stepper.goToStep(stepNumber, props.label);
+			return messages.value.stepper.goToStepWithStatus(stepNumber, props.label, status);
 		});
 		const hiddenStatus = computed(() => {
 			if (progress.value === "in-progress") return null;
@@ -189,20 +204,17 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		});
 		function activate() {
 			if (!isClickable.value) return;
-			stepper?.select.value?.(props.step);
-		}
-		if (stepper) {
-			const context = stepper;
-			watch(() => ({
-				step: props.step,
-				label: props.label,
-				description: props.description,
-				indicator: props.indicator,
-				status: props.status,
-				isDisabled: props.isDisabled
-			}), (record) => context.register(record), { immediate: true });
-			onUnmounted(() => context.unregister(props.step));
+			stepper.select.value?.(props.step);
 		}
+		watch(() => ({
+			step: props.step,
+			label: props.label,
+			description: props.description,
+			indicator: props.indicator,
+			status: props.status,
+			isDisabled: props.isDisabled
+		}), (record) => stepper.register(record), { immediate: true });
+		onUnmounted(() => stepper.unregister(props.step));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("li", {
 				class: "astryx-step",
@@ -210,48 +222,55 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"data-density": density.value,
 				"data-indicator-position": indicatorPosition.value,
 				"data-orientation": orientation.value,
+				"data-glyph": glyph.value,
 				"data-progress": progress.value,
 				"data-status": __props.status
-			}, [
-				indicatorPosition.value === "separated" || collapsed.value ? (openBlock(), createElementBlock("span", {
+			}, [indicatorPosition.value === "separated" || collapsed.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: "astryx-step-bar",
+				"data-filled": leadFilled.value || void 0
+			}, null, 8, _hoisted_2$1)) : (openBlock(), createElementBlock("span", _hoisted_3$1, [createElementVNode("span", {
+				class: "astryx-step-connector astryx-step-connector-lead",
+				"data-filled": leadFilled.value || void 0
+			}, null, 8, _hoisted_4$1), createElementVNode("span", {
+				class: "astryx-step-connector astryx-step-connector-trail",
+				"data-filled": trailFilled.value || void 0
+			}, null, 8, _hoisted_5$1)])), createElementVNode("div", _hoisted_6$1, [(openBlock(), createBlock(resolveDynamicComponent(isClickable.value ? "button" : "div"), mergeProps(isClickable.value ? unref(pressableProps) : void 0, {
+				class: "astryx-step-control",
+				"aria-label": isClickable.value ? accessibleName.value : void 0,
+				type: isClickable.value ? "button" : void 0,
+				onClick: activate
+			}), {
+				default: withCtx(() => [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: "astryx-step-bar",
-					"data-filled": leadFilled.value || void 0
-				}, null, 8, _hoisted_2$1)) : (openBlock(), createElementBlock("span", _hoisted_3$1, [createElementVNode("span", {
-					class: "astryx-step-connector astryx-step-connector-lead",
-					"data-filled": leadFilled.value || void 0
-				}, null, 8, _hoisted_4$1), createElementVNode("span", {
-					class: "astryx-step-connector astryx-step-connector-trail",
-					"data-filled": trailFilled.value || void 0
-				}, null, 8, _hoisted_5$1)])),
-				(openBlock(), createBlock(resolveDynamicComponent(isClickable.value ? "button" : "div"), {
-					class: "astryx-step-control",
-					"aria-label": isClickable.value ? accessibleName.value : void 0,
-					type: isClickable.value ? "button" : void 0,
-					onClick: activate
-				}, {
-					default: withCtx(() => [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: "astryx-step-indicator",
-						"data-glyph": glyph.value,
-						"aria-hidden": "true"
-					}, [renderSlot(_ctx.$slots, "icon")], 8, _hoisted_6$1)) : (openBlock(), createBlock(_sfc_main$2, {
-						key: 1,
-						glyph: glyph.value,
-						"number-label": numberLabel.value
-					}, null, 8, ["glyph", "number-label"])), createElementVNode("span", _hoisted_7$1, [createElementVNode("span", _hoisted_8$1, [
-						createElementVNode("span", _hoisted_9$1, toDisplayString(__props.label), 1),
-						hiddenStatus.value ? (openBlock(), createBlock(_sfc_main$3, { key: 0 }, {
-							default: withCtx(() => [createTextVNode(toDisplayString(hiddenStatus.value), 1)]),
-							_: 1
-						})) : createCommentVNode("v-if", true),
-						__props.isOptional ? (openBlock(), createElementBlock("span", _hoisted_10, "• " + toDisplayString(unref(messages).stepper.optional), 1)) : createCommentVNode("v-if", true),
-						renderSlot(_ctx.$slots, "end")
-					]), __props.description ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true)])]),
-					_: 3
-				}, 8, ["aria-label", "type"])),
-				_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)
-			], 8, _hoisted_1$1);
+					class: "astryx-step-indicator",
+					"data-glyph": glyph.value,
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "icon")], 8, _hoisted_7$1)) : (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					glyph: glyph.value,
+					"number-label": numberLabel.value
+				}, null, 8, ["glyph", "number-label"])), createElementVNode("span", _hoisted_8$1, [createElementVNode("span", _hoisted_9$1, [
+					createElementVNode("span", {
+						class: "astryx-step-label",
+						"data-disabled": __props.isDisabled || void 0,
+						"data-progress": progress.value,
+						"data-status": __props.status
+					}, toDisplayString(__props.label), 9, _hoisted_10),
+					hiddenStatus.value ? (openBlock(), createBlock(_sfc_main$3, { key: 0 }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(hiddenStatus.value), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					__props.isOptional ? (openBlock(), createElementBlock("span", _hoisted_11, "• " + toDisplayString(unref(messages).stepper.optional), 1)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "end")
+				]), __props.description ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "astryx-step-description",
+					"data-progress": progress.value,
+					"data-status": __props.status
+				}, toDisplayString(__props.description), 9, _hoisted_12)) : createCommentVNode("v-if", true)])]),
+				_: 3
+			}, 16, ["aria-label", "type"])), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)])], 8, _hoisted_1$1);
 		};
 	}
 });
@@ -269,7 +288,10 @@ const _hoisted_3 = {
 	class: "astryx-stepper-summary"
 };
 const _hoisted_4 = ["aria-label", "disabled"];
-const _hoisted_5 = { class: "astryx-stepper-summary-body" };
+const _hoisted_5 = {
+	class: "astryx-stepper-summary-body",
+	"aria-hidden": "true"
+};
 const _hoisted_6 = { class: "astryx-stepper-summary-row" };
 const _hoisted_7 = { class: "astryx-step-label" };
 const _hoisted_8 = {
@@ -366,7 +388,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				ref_key: "root",
 				ref: root,
-				class: "astryx-stepper-root",
+				class: normalizeClass(["astryx-stepper-root", { "astryx-stepper-frame": orientation.value === "horizontal" }]),
 				"data-collapsed": collapsed.value || void 0
 			}, [createElementVNode("ol", {
 				class: "astryx-stepper",
@@ -415,7 +437,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"stroke-linejoin": "round",
 					"stroke-width": "1.5"
 				})], -1)])], 8, _hoisted_9)) : createCommentVNode("v-if", true)
-			])) : createCommentVNode("v-if", true)], 8, _hoisted_1);
+			])) : createCommentVNode("v-if", true)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/Switch/index.d.ts

@@ -1,2 +1,2 @@
-import { Gn as SwitchChangeEvent, Jn as SwitchSize, Kn as SwitchEmits, Un as _default, Wn as SwitchChangeAction, Xn as SwitchStatus, Yn as SwitchSlots, Zn as SwitchStatusType, qn as SwitchProps } from "../index-DUaLJO7l.js";
+import { Gn as SwitchChangeEvent, Jn as SwitchSize, Kn as SwitchEmits, Un as _default, Wn as SwitchChangeAction, Xn as SwitchStatus, Yn as SwitchSlots, Zn as SwitchStatusType, qn as SwitchProps } from "../index-CpNlPLBF.js";
 export { _default as Switch, type SwitchChangeAction, type SwitchChangeEvent, type SwitchEmits, type SwitchProps, type SwitchSize, type SwitchSlots, type SwitchStatus, type SwitchStatusType };

package/dist/Switch/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Switch-DaVPRxvN.js";
+import { t as _sfc_main } from "../Switch-Z2Vfiiic.js";
 export { _sfc_main as Switch };