@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{Slider-DWobsPgm.js → Slider-pdC0jpHu.js}

@@ -1,8 +1,11 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
 import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
+import { r as trackInteractionModality, t as getInteractionModality } from "./interactionModality-ACpTMhak.js";
+import { t as _sfc_main$4 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import "../styles/button.css";
 import "../styles/slider.css";
 function clamp(value, min, max) {
@@ -35,6 +38,7 @@ const _hoisted_1$1 = [
 	"tabindex",
 	"data-thumb-index",
 	"data-dragging",
+	"data-keyboard-focus",
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
@@ -62,9 +66,15 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		isDisabled: { type: Boolean },
 		isFocusable: { type: Boolean },
 		tooltipText: {},
-		dragging: { type: Boolean }
+		dragging: { type: Boolean },
+		keyboardFocus: { type: Boolean },
+		extraAttrs: {}
 	},
-	emits: ["keydown"],
+	emits: [
+		"keydown",
+		"focus",
+		"blur"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -89,6 +99,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		function focus() {
 			focused.value = true;
 			dismissed.value = false;
+			emit("focus");
+		}
+		function blur() {
+			focused.value = false;
+			emit("blur");
 		}
 		function enter() {
 			hovered.value = true;
@@ -97,16 +112,17 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createCommentVNode(" eslint-disable-next-line vue-a11y/interactive-supports-focus -- The tested dynamic tabindex is always 0 or -1. "),
-				createElementVNode("div", {
+				createElementVNode("div", mergeProps(__props.extraAttrs, {
 					id: __props.id,
 					ref_key: "thumb",
 					ref: thumb,
 					class: "astryx-slider-thumb",
 					role: "slider",
-					style: normalizeStyle(style.value),
+					style: style.value,
 					tabindex: tabIndex.value,
 					"data-thumb-index": __props.index,
 					"data-dragging": __props.dragging || void 0,
+					"data-keyboard-focus": __props.keyboardFocus || void 0,
 					"aria-valuemin": __props.min,
 					"aria-valuemax": __props.max,
 					"aria-valuenow": __props.value,
@@ -118,10 +134,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"aria-invalid": __props.isInvalid || void 0,
 					onKeydown: keydown,
 					onFocus: focus,
-					onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
+					onBlur: blur,
 					onPointerenter: enter,
-					onPointerleave: _cache[1] || (_cache[1] = ($event) => hovered.value = false)
-				}, null, 44, _hoisted_1$1),
+					onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = false)
+				}), null, 16, _hoisted_1$1),
 				__props.tooltipText ? (openBlock(), createBlock(_sfc_main$3, {
 					key: 0,
 					id: `${__props.id}-tooltip`,
@@ -130,8 +146,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					anchor: thumb.value,
 					open: open.value,
 					text: __props.tooltipText,
-					onPointerEnter: _cache[2] || (_cache[2] = ($event) => hovered.value = true),
-					onPointerLeave: _cache[3] || (_cache[3] = ($event) => hovered.value = false)
+					onPointerEnter: _cache[1] || (_cache[1] = ($event) => hovered.value = true),
+					onPointerLeave: _cache[2] || (_cache[2] = ($event) => hovered.value = false)
 				}, null, 8, [
 					"id",
 					"anchor",
@@ -158,6 +174,8 @@ function useSlider(options) {
 		return [Math.min(low, add(upper, -gap.value)), upper];
 	});
 	const dragging = shallowRef(null);
+	const keyboardFocus = shallowRef(null);
+	if (typeof document !== "undefined") trackInteractionModality();
 	let pointerId = null;
 	let latest;
 	watch([
@@ -175,10 +193,10 @@ function useSlider(options) {
 	function bounds(index) {
 		return [index === 1 ? add(values.value[0], gap.value) : min.value, values.value.length === 2 && index === 0 ? add(values.value[1], -gap.value) : max.value];
 	}
-	function update(index, raw) {
+	function update(index, raw, shouldSnap = true) {
 		const next = [...values.value];
 		const [lower, upper] = bounds(index);
-		next[index] = clamp(snap(raw, min.value, step.value), lower, upper);
+		next[index] = clamp(shouldSnap ? snap(raw, min.value, step.value) : raw, lower, upper);
 		const value = next.length === 2 ? [next[0], next[1]] : next[0];
 		latest = value;
 		if (next.some((v, i) => v !== values.value[i])) options.change(value);
@@ -204,6 +222,7 @@ function useSlider(options) {
 		dragging.value = index;
 		pointerId = event.pointerId;
 		options.track.value.querySelectorAll("[role=\"slider\"]")[index]?.focus({ preventScroll: true });
+		keyboardFocus.value = null;
 		update(index, raw);
 		options.track.value.setPointerCapture?.(event.pointerId);
 	}
@@ -219,8 +238,16 @@ function useSlider(options) {
 		if (options.track.value?.hasPointerCapture?.(event.pointerId)) options.track.value.releasePointerCapture(event.pointerId);
 		if (!p.isDisabled) options.end(value);
 	}
+	function thumbFocus(index) {
+		keyboardFocus.value = !p.isDisabled && getInteractionModality() === "keyboard" ? index : null;
+	}
+	function thumbBlur() {
+		keyboardFocus.value = null;
+	}
 	function keydown(index, event) {
-		if (p.isDisabled || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (p.isDisabled || event.defaultPrevented) return;
+		if (event.key !== "Shift" && !event.altKey && !event.ctrlKey && !event.metaKey && getInteractionModality() === "keyboard") keyboardFocus.value = index;
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
 		const current = values.value[index];
 		const rtl = p.orientation !== "vertical" && options.track.value && getComputedStyle(options.track.value).direction === "rtl";
 		const offsets = {
@@ -237,7 +264,8 @@ function useSlider(options) {
 		else if (event.key in offsets) value = current + offsets[event.key] * step.value;
 		else return;
 		event.preventDefault();
-		options.end(update(index, value));
+		const toBound = event.key === "Home" || event.key === "End";
+		options.end(update(index, value, !toBound));
 	}
 	return {
 		min,
@@ -246,10 +274,13 @@ function useSlider(options) {
 		values,
 		bounds,
 		dragging,
+		keyboardFocus,
 		pointerDown,
 		pointerMove,
 		pointerEnd,
-		keydown
+		keydown,
+		thumbFocus,
+		thumbBlur
 	};
 }
 //#endregion
@@ -261,7 +292,12 @@ const _hoisted_2 = [
 	"disabled",
 	"form"
 ];
-const _hoisted_3 = ["role", "aria-labelledby"];
+const _hoisted_3 = [
+	"data-orientation",
+	"data-disabled",
+	"role",
+	"aria-labelledby"
+];
 const _hoisted_4 = ["data-mark-value", "data-filled"];
 const _hoisted_5 = ["data-mark-value"];
 const _hoisted_6 = {
@@ -299,7 +335,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: { default: "Required" }
+		requiredLabel: { default: "Required" },
+		targetClass: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -310,6 +375,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
+		const press = usePressFeedback({ hasOverlay: false });
+		const parts = useFieldPartStyling({
+			component: "Slider",
+			props,
+			attrs,
+			reservedAttrs: [
+				"aria-labelledby",
+				"aria-describedby",
+				"onPointerdown",
+				"onPointermove",
+				"onPointerup",
+				"onPointercancel",
+				"onPointerDown",
+				"onPointerMove",
+				"onPointerUp",
+				"onPointerCancel"
+			]
+		});
 		const track = useTemplateRef("track");
 		const generatedId = `astryx-slider-${useId()}`;
 		const inputId = computed(() => props.id ?? generatedId);
@@ -358,9 +441,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function isFilled(value) {
 			return value <= values.value.at(-1) && (!isRange.value || value >= values.value[0]);
 		}
-		function rootAttrs() {
-			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !["aria-labelledby", "aria-describedby"].includes(key)));
+		function callConsumerPointer(event) {
+			for (const name of {
+				pointerdown: ["onPointerdown", "onPointerDown"],
+				pointermove: ["onPointermove", "onPointerMove"],
+				pointerup: ["onPointerup", "onPointerUp"],
+				pointercancel: ["onPointercancel", "onPointerCancel"]
+			}[event.type] ?? []) {
+				const handler = attrs[name];
+				if (typeof handler === "function") handler(event);
+			}
+		}
+		function onPointerDown(event) {
+			control.pointerDown(event);
+			callConsumerPointer(event);
+		}
+		function onPointerMove(event) {
+			control.pointerMove(event);
+			callConsumerPointer(event);
+		}
+		function onPointerEnd(event) {
+			control.pointerEnd(event);
+			callConsumerPointer(event);
 		}
+		const shellStyle = computed(() => [attrs.style, parts.containerStyle.value]);
+		const thumbAttrs = computed(() => isRange.value ? {} : parts.forwardedAttrs());
+		const trackAttrs = computed(() => ({
+			...isRange.value ? parts.forwardedAttrs() : {},
+			...props.isDisabled ? {} : press.pressableProps
+		}));
 		function focus(index = 0, options) {
 			track.value?.querySelectorAll("[role=\"slider\"]")[index]?.focus(options);
 		}
@@ -369,13 +478,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (active instanceof HTMLElement && track.value?.contains(active)) active.blur();
 		}
 		__expose({
-			element: computed(() => track.value),
+			element: computed(() => {
+				if (isRange.value) return track.value;
+				return track.value?.querySelector("[role=\"slider\"]") ?? null;
+			}),
 			focus,
 			blur
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$4, mergeProps(rootAttrs(), {
-				class: "astryx-slider",
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$4, {
+				class: normalizeClass(["astryx-slider", [unref(attrs).class, unref(parts).containerClass.value]]),
+				style: normalizeStyle(shellStyle.value),
 				"data-orientation": __props.orientation,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-mark-labels": hasMarkLabels.value || void 0,
@@ -394,7 +507,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"required-label": __props.requiredLabel,
 				status: __props.status,
 				"status-variant": "detached"
-			}), createSlots({
+			}, createSlots({
 				default: withCtx((field) => [
 					createElementVNode("div", _hoisted_1, [
 						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(values), (value, index) => {
@@ -407,24 +520,28 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								form: __props.form
 							}, null, 8, _hoisted_2);
 						}), 128)),
-						createElementVNode("div", {
+						createElementVNode("div", mergeProps({
 							ref_key: "track",
-							ref: track,
-							class: "astryx-slider-control",
+							ref: track
+						}, trackAttrs.value, {
+							class: ["astryx-slider-control", __props.controlClass],
+							style: __props.controlStyle,
+							"data-orientation": __props.orientation,
+							"data-disabled": __props.isDisabled || void 0,
 							role: isRange.value ? "group" : void 0,
 							"aria-labelledby": isRange.value ? field.labelId : void 0,
-							onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(control).pointerDown && unref(control).pointerDown(...args)),
-							onPointermove: _cache[1] || (_cache[1] = (...args) => unref(control).pointerMove && unref(control).pointerMove(...args)),
-							onPointerup: _cache[2] || (_cache[2] = (...args) => unref(control).pointerEnd && unref(control).pointerEnd(...args)),
-							onPointercancel: _cache[3] || (_cache[3] = (...args) => unref(control).pointerEnd && unref(control).pointerEnd(...args)),
-							onLostpointercapture: _cache[4] || (_cache[4] = (...args) => unref(control).pointerEnd && unref(control).pointerEnd(...args)),
-							onPointerenter: _cache[5] || (_cache[5] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
-							onPointerleave: _cache[6] || (_cache[6] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args)),
-							onFocusin: _cache[7] || (_cache[7] = (...args) => unref(tooltip).onTooltipPointerEnter && unref(tooltip).onTooltipPointerEnter(...args)),
-							onFocusout: _cache[8] || (_cache[8] = (...args) => unref(tooltip).onBlur && unref(tooltip).onBlur(...args)),
-							onKeydown: _cache[9] || (_cache[9] = withKeys((...args) => unref(tooltip).hideImmediately && unref(tooltip).hideImmediately(...args), ["esc"]))
-						}, [
-							_cache[10] || (_cache[10] = createElementVNode("div", {
+							onPointerdown: onPointerDown,
+							onPointermove: onPointerMove,
+							onPointerup: onPointerEnd,
+							onPointercancel: onPointerEnd,
+							onLostpointercapture: onPointerEnd,
+							onPointerenter: _cache[1] || (_cache[1] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
+							onPointerleave: _cache[2] || (_cache[2] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args)),
+							onFocusin: _cache[3] || (_cache[3] = (...args) => unref(tooltip).onTooltipPointerEnter && unref(tooltip).onTooltipPointerEnter(...args)),
+							onFocusout: _cache[4] || (_cache[4] = (...args) => unref(tooltip).onBlur && unref(tooltip).onBlur(...args)),
+							onKeydown: _cache[5] || (_cache[5] = withKeys((...args) => unref(tooltip).hideImmediately && unref(tooltip).hideImmediately(...args), ["esc"]))
+						}), [
+							_cache[6] || (_cache[6] = createElementVNode("div", {
 								class: "astryx-slider-track",
 								"aria-hidden": "true"
 							}, null, -1)),
@@ -460,7 +577,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"labelled-by": [
 										field.labelId,
 										isRange.value ? `${inputId.value}-label-${index}` : void 0,
-										unref(attrs)["aria-labelledby"]
+										isRange.value ? void 0 : unref(attrs)["aria-labelledby"]
 									].filter(Boolean).join(" "),
 									"described-by": describedBy(field.describedBy),
 									"value-text": __props.formatValue ? format(value) : void 0,
@@ -468,8 +585,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"is-disabled": __props.isDisabled,
 									"is-focusable": !__props.isDisabled || showsDisabledMessage.value,
 									dragging: unref(dragging) === index,
+									"keyboard-focus": unref(control).keyboardFocus.value === index,
+									"extra-attrs": thumbAttrs.value,
 									"tooltip-text": __props.valueDisplay === "tooltip" ? format(value) : void 0,
-									onKeydown: ($event) => unref(control).keydown(index, $event)
+									onKeydown: ($event) => unref(control).keydown(index, $event),
+									onFocus: ($event) => unref(control).thumbFocus(index),
+									onBlur: _cache[0] || (_cache[0] = ($event) => unref(control).thumbBlur())
 								}, null, 8, [
 									"id",
 									"index",
@@ -485,11 +606,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"is-disabled",
 									"is-focusable",
 									"dragging",
+									"keyboard-focus",
+									"extra-attrs",
 									"tooltip-text",
-									"onKeydown"
+									"onKeydown",
+									"onFocus"
 								]);
 							}), 128))
-						], 40, _hoisted_3),
+						], 16, _hoisted_3),
 						__props.valueDisplay === "text" ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(displayText.value), 1)) : createCommentVNode("v-if", true)
 					]),
 					isRange.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$2, { id: `${inputId.value}-label-0` }, {
@@ -519,7 +643,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				name: "labelIcon",
 				fn: withCtx(() => [renderSlot(_ctx.$slots, "labelIcon")]),
 				key: "0"
-			} : void 0]), 1040, [
+			} : void 0]), 1032, [
+				"class",
+				"style",
 				"data-orientation",
 				"data-disabled",
 				"data-mark-labels",

package/dist/Spinner/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Spinner-9cYUCnDy.js";
+import { t as _sfc_main } from "../Spinner-DdVUadii.js";
 export { _sfc_main as Spinner };

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-D_Bhs-3r.js";
-import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-CjQEavuq.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-CjQEavuq.js → Stack-Bb_h60t3.js}

@@ -1,5 +1,6 @@
-import { t as _sfc_main$3 } from "./Stack-D_Bhs-3r.js";
-import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, useAttrs, withCtx } from "vue";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.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
 const _sfc_main$2 = /*@__PURE__*/ defineComponent({
@@ -52,12 +53,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		size: { default: "static" }
 	},
 	setup(__props) {
+		const props = __props;
 		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		useScrollbars(root, { enabled: () => props.isScrollable });
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		const rootClass = computed(() => ["astryx-stack-item", attrs.class]);
 		const rootStyle = computed(() => attrs.style);
 		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-self": __props.crossAlignSelf,
 				"data-scrollable": __props.isScrollable || void 0,