@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{Stack-D_Bhs-3r.js → Stack-Bp-XN9J4.js}

@@ -1,6 +1,8 @@
-import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, withCtx } from "vue";
+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,
@@ -33,6 +35,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		useScrollbars(root, { enabled: () => props.isScrollable });
 		const spacingVariables = {
 			0: "var(--astryx-spacing-0, 0px)",
 			.5: "var(--astryx-spacing-0-5, 2px)",
@@ -59,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),
@@ -66,17 +74,20 @@ 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) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps(forwardedAttrs.value, {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
 				class: rootClass.value,
 				"data-cross-align": crossAlign.value,
 				"data-direction": __props.direction,

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.d.ts

@@ -1,2 +1,2 @@
-import { a as StepProps, c as StepperCollapsedVariant, d as StepperIndicatorPosition, f as StepperOrientation, i as StepProgress, l as StepperDensity, m as StepperSlots, n as _default, o as StepSlots, p as StepperProps, r as StepIndicator, s as StepStatus, t as _default$1, u as StepperHorizontalOptions } from "../index-Ca8VIE4l.js";
+import { a as StepProps, c as StepperCollapsedVariant, d as StepperIndicatorPosition, f as StepperOrientation, i as StepProgress, l as StepperDensity, m as StepperSlots, n as _default, o as StepSlots, p as StepperProps, r as StepIndicator, s as StepStatus, t as _default$1, u as StepperHorizontalOptions } from "../index-CVn0GBdB.js";
 export { _default as Step, type StepIndicator, type StepProgress, type StepProps, type StepSlots, type StepStatus, _default$1 as Stepper, type StepperCollapsedVariant, type StepperDensity, type StepperHorizontalOptions, type StepperIndicatorPosition, type StepperOrientation, type StepperProps, type StepperSlots };

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-CdtZjkmG.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 };

package/dist/{Switch-DaVPRxvN.js → Switch-Z2Vfiiic.js}

@@ -1,8 +1,12 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$3 } from "./FieldLabel-BNeXRuGH.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$3 } from "./FieldLabel-jxIiWgLw.js";
+import { t as _sfc_main$4 } from "./FieldStatus-MjY19ERl.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/switch.css";
 //#region src/Switch/useSwitchAction.ts
@@ -108,7 +112,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		hasAutoFocus: { type: Boolean },
 		htmlName: {},
 		form: {},
-		loadingLabel: { default: "Loading" },
+		loadingLabel: {},
 		label: {},
 		isLabelHidden: { type: Boolean },
 		isDisabled: { type: Boolean },
@@ -117,7 +121,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -130,14 +135,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const ariaRequired = useAriaRequired(props);
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const press = usePressFeedback({ hasOverlay: false });
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
 		const input = useTemplateRef("input");
 		const generatedId = `astryx-switch-${useId()}`;
 		const inputId = computed(() => props.id ?? generatedId);
 		const descriptionId = computed(() => props.description ? `${inputId.value}-description` : void 0);
+		const statusId = computed(() => props.status?.message ? props.status.messageId ?? `${inputId.value}-status` : void 0);
 		const disabledId = `${generatedId}-disabled`;
-		const loadingId = `${generatedId}-loading`;
 		const showsDisabledMessage = computed(() => !!props.isDisabled && !!props.disabledMessage?.trim());
 		const tooltip = useButtonTooltip(showsDisabledMessage);
 		const action = useSwitchAction({
@@ -148,6 +156,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		const busy = computed(() => !!props.isLoading || action.isPending.value);
 		const blocked = computed(() => props.isDisabled || props.isReadOnly || busy.value);
+		const loadingText = computed(() => props.loadingLabel || messages.value.switch.loading);
+		watch(busy, (isBusy) => {
+			if (isBusy) announce(loadingText.value);
+		}, { immediate: true });
 		const widthStyle = computed(() => ({ width: typeof props.width === "number" ? `${props.width}px` : props.width }));
 		const element = computed(() => input.value ?? null);
 		function focus(options) {
@@ -186,8 +198,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return [
 				attrs["aria-describedby"],
 				descriptionId.value,
-				showsDisabledMessage.value ? disabledId : void 0,
-				busy.value ? loadingId : void 0
+				statusId.value,
+				showsDisabledMessage.value ? disabledId : void 0
 			].filter(Boolean).join(" ") || void 0;
 		}
 		function syncNative() {
@@ -226,11 +238,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-status": __props.status?.type,
 				"data-blocked": blocked.value || void 0
 			}, [
-				createElementVNode("div", {
-					class: "astryx-switch-row",
+				createElementVNode("div", mergeProps({ class: "astryx-switch-row" }, blocked.value ? void 0 : unref(press).pressableProps, {
 					onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args))
-				}, [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
+				}), [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
 					id: inputId.value,
 					ref_key: "input",
 					ref: input,
@@ -265,6 +276,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"is-disabled": __props.isDisabled,
 					"is-optional": __props.isOptional,
 					"is-required": __props.isRequired,
+					"target-class": "astryx-switch-label",
 					"label-icon": __props.labelIcon,
 					"label-tooltip": __props.labelTooltip,
 					"optional-label": __props.optionalLabel,
@@ -287,21 +299,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"label-tooltip",
 					"optional-label",
 					"required-label"
-				])])], 32),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+				])])], 16),
+				__props.status?.message ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 0,
+					id: statusId.value,
+					type: __props.status.type,
+					message: __props.status.message,
+					variant: __props.statusVariant === "attached" ? "attached" : "detached"
+				}, null, 8, [
+					"id",
+					"type",
+					"message",
+					"variant"
+				])) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 1,
 					id: disabledId
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(__props.disabledMessage), 1)]),
 					_: 1
-				})) : createCommentVNode("v-if", true),
-				busy.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 1,
-					id: loadingId,
-					role: "status"
-				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(__props.loadingLabel), 1)]),
-					_: 1
 				})) : createCommentVNode("v-if", true)
 			], 14, _hoisted_1), showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
 				key: 0,

package/dist/TabList/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListProps, c as TabMenuOption, d as TabSlots, i as TabListLayout, l as TabMenuProps, n as _default$1, o as TabListSize, r as _default, s as TabListTab, t as _default$2, u as TabProps } from "../index-DamRHh1i.js";
-export { _default as Tab, _default$1 as TabList, type TabListLayout, type TabListProps, type TabListSize, type TabListTab, _default$2 as TabMenu, type TabMenuOption, type TabMenuProps, type TabProps, type TabSlots };
+import { a as TabListLayout, c as TabListSize, d as TabMenuProps, f as TabProps, i as TabListEdgeCompensation, l as TabListTab, n as _default$1, o as TabListOverflow, p as TabSlots, r as _default, s as TabListProps, t as _default$2, u as TabMenuOption } from "../index-DLAG3m9W.js";
+export { _default as Tab, _default$1 as TabList, type TabListEdgeCompensation, type TabListLayout, type TabListOverflow, type TabListProps, type TabListSize, type TabListTab, _default$2 as TabMenu, type TabMenuOption, type TabMenuProps, type TabProps, type TabSlots };

package/dist/TabList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-DIkK9sgK.js";
+import { n as _sfc_main$1, r as _sfc_main, t as _sfc_main$2 } from "../TabList-DRqP0Hrv.js";
 export { _sfc_main as Tab, _sfc_main$1 as TabList, _sfc_main$2 as TabMenu };