ropav 0.2.0 → 0.3.0

package/dist/composables/use-press.d.ts

@@ -0,0 +1,108 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/**
+ * How the press reached the element.
+ *
+ * `"virtual"` is a click with no pointer behind it — a screen reader activating the element,
+ * or `element.click()` from script. It is worth distinguishing because a virtual click has no
+ * pointerdown to open on, so a trigger has to react to the click itself.
+ */
+export type PointerType = "mouse" | "touch" | "pen" | "keyboard" | "virtual";
+export interface PressEvent {
+    type: "pressstart" | "pressend" | "pressup" | "press";
+    pointerType: PointerType;
+    target: Element;
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    /** The key that produced a keyboard press, absent otherwise. */
+    key?: string;
+    /**
+     * Keeps the event bubbling. A press handler stops propagation by default so a press does
+     * not also register on an enclosing pressable, which is wrong for a wrapper that only
+     * observes the press — a long-press detector, for one.
+     */
+    continuePropagation: () => void;
+    /** @private Read after the handler has run. */
+    shouldStopPropagation: boolean;
+}
+export interface UsePressOptions {
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Forces the pressed state on. A trigger uses this to stay pressed for as long as the
+     * overlay it owns is open.
+     */
+    isPressed?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Keeps the browser from moving focus to the element on pointerdown, for a control that
+     * hands focus somewhere else — a menu trigger gives it to the menu.
+     */
+    preventFocusOnPress?: MaybeRefOrGetter<boolean | undefined>;
+    onPress?: (event: PressEvent) => void;
+    onPressStart?: (event: PressEvent) => void;
+    onPressEnd?: (event: PressEvent) => void;
+    onPressUp?: (event: PressEvent) => void;
+    onPressChange?: (isPressed: boolean) => void;
+}
+export interface UsePressHandlers {
+    onClick: (event: MouseEvent) => void;
+    onDragstart: (event: DragEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onMousedown: (event: MouseEvent) => void;
+    onPointerdown: (event: PointerEvent) => void;
+    onPointerenter: (event: PointerEvent) => void;
+    onPointerleave: (event: PointerEvent) => void;
+    onPointerup: (event: PointerEvent) => void;
+}
+export interface UsePressReturn {
+    isPressed: ComputedRef<boolean>;
+    /**
+     * Every listener the press machine needs. Attach each one statically with `@event`, never
+     * through `v-bind`: a vapor render re-attaches every `on*` key that arrived that way, which
+     * both reorders the listeners and drops one mid-dispatch. `composePressResponder` wraps these
+     * for that, and is where the reason is written out.
+     */
+    handlers: UsePressHandlers;
+}
+/**
+ * Whether a click came from something other than a pointer.
+ *
+ * Ported from React Aria's `isVirtualClick`. A screen reader and `element.click()` both
+ * produce a click with no pointer data behind it, which is the only way to tell them apart
+ * from a real one.
+ */
+export declare const isVirtualClick: (event: MouseEvent) => boolean;
+/**
+ * Whether a pointer event was synthesised by assistive technology.
+ *
+ * A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
+ * such events the wrong coordinates and target, so they have to be left to the click handler.
+ */
+export declare const isVirtualPointerEvent: (event: PointerEvent) => boolean;
+/**
+ * Press interactions across mouse, touch, keyboard and assistive technology, ported from
+ * React Aria's `usePress`.
+ *
+ * The reason a component cannot just use `click` is that a press is several distinct moments
+ * and different controls act on different ones. A menu trigger opens on *pressstart* for a
+ * mouse — matching the platform, where a menu appears on the way down — but on *press* for
+ * touch, because opening under a finger that is still on the glass would put the menu where
+ * the finger is about to lift. A long-press trigger needs the start and the end without the
+ * press in between. And a press that begins on an element, drags away and releases elsewhere
+ * must not activate, which `:active` and `click` both get wrong.
+ *
+ * Only the pointer-event path is ported. React Aria keeps a mouse/touch fallback for
+ * environments without `PointerEvent`; every browser this package targets has it, and so does
+ * jsdom, so the fallback would be untested code.
+ *
+ * @example
+ * ```ts
+ * const press = usePress({
+ *   onPressStart: (event) => { if (event.pointerType !== "touch") state.open(); },
+ *   onPress: (event) => { if (event.pointerType === "touch") state.toggle(); },
+ * });
+ * // <button :data-pressed="dataAttr(press.isPressed.value)"
+ * //   @click="press.handlers.onClick" @pointerdown="press.handlers.onPointerdown">
+ * ```
+ */
+export declare const usePress: (options?: UsePressOptions) => UsePressReturn;

package/dist/composables/use-press.js

@@ -0,0 +1,363 @@
+import { isMac } from "../utils/platform.js";
+import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-press.ts
+/**
+* Whether a click came from something other than a pointer.
+*
+* Ported from React Aria's `isVirtualClick`. A screen reader and `element.click()` both
+* produce a click with no pointer data behind it, which is the only way to tell them apart
+* from a real one.
+*/
+var isVirtualClick = (event) => {
+	if (event.pointerType === "" && event.isTrusted) return true;
+	return event.detail === 0 && !event.pointerType;
+};
+/**
+* Whether a pointer event was synthesised by assistive technology.
+*
+* A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
+* such events the wrong coordinates and target, so they have to be left to the click handler.
+*/
+var isVirtualPointerEvent = (event) => event.width === 0 && event.height === 0;
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+var isHtmlAnchorLink = (target) => target.tagName === "A" && target.hasAttribute("href");
+var isValidInputKey = (target, key) => target.type === "checkbox" || target.type === "radio" ? key === " " : NON_TEXT_INPUT_TYPES.has(target.type);
+/**
+* Whether Enter or Space on this element means "press it".
+*
+* A text field needs both keys for itself, and a link is activated by Enter only — Space
+* scrolls the page there.
+*/
+var isValidKeyboardEvent = (event, target) => {
+	if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar" && event.code !== "Space") return false;
+	const element = target;
+	if (element instanceof HTMLTextAreaElement || element.isContentEditable) return false;
+	if (element instanceof HTMLInputElement && !isValidInputKey(element, event.key)) return false;
+	const role = element.getAttribute("role");
+	return !((role === "link" || !role && isHtmlAnchorLink(element)) && event.key !== "Enter");
+};
+/** Whether the release default belongs to the browser rather than the press abstraction. */
+var shouldPreventDefaultUp = (target) => {
+	if (target instanceof HTMLInputElement) return false;
+	if (target instanceof HTMLButtonElement) return target.type !== "submit" && target.type !== "reset";
+	if (isHtmlAnchorLink(target)) return false;
+	return true;
+};
+/**
+* Match React Aria's keyboard-default carve-outs. Native links must retain their own activation
+* so modifier keys survive, while macOS Enter must remain available to the context-menu shortcut.
+*/
+var shouldPreventDefaultKeyboard = (target, key) => {
+	if (isMac() && key === "Enter") return false;
+	if (target instanceof HTMLInputElement) {
+		if (key === "Enter" && (target.type === "checkbox" || target.type === "radio")) return false;
+		return !isValidInputKey(target, key);
+	}
+	return shouldPreventDefaultUp(target);
+};
+/** Whether an element in the tree from `root` down received the event. */
+var contains = (root, target) => root instanceof Node && target instanceof Node && root.contains(target);
+/**
+* Press interactions across mouse, touch, keyboard and assistive technology, ported from
+* React Aria's `usePress`.
+*
+* The reason a component cannot just use `click` is that a press is several distinct moments
+* and different controls act on different ones. A menu trigger opens on *pressstart* for a
+* mouse — matching the platform, where a menu appears on the way down — but on *press* for
+* touch, because opening under a finger that is still on the glass would put the menu where
+* the finger is about to lift. A long-press trigger needs the start and the end without the
+* press in between. And a press that begins on an element, drags away and releases elsewhere
+* must not activate, which `:active` and `click` both get wrong.
+*
+* Only the pointer-event path is ported. React Aria keeps a mouse/touch fallback for
+* environments without `PointerEvent`; every browser this package targets has it, and so does
+* jsdom, so the fallback would be untested code.
+*
+* @example
+* ```ts
+* const press = usePress({
+*   onPressStart: (event) => { if (event.pointerType !== "touch") state.open(); },
+*   onPress: (event) => { if (event.pointerType === "touch") state.toggle(); },
+* });
+* // <button :data-pressed="dataAttr(press.isPressed.value)"
+* //   @click="press.handlers.onClick" @pointerdown="press.handlers.onPointerdown">
+* ```
+*/
+var usePress = (options = {}) => {
+	const pressed = shallowRef(false);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const state = {
+		activePointerId: null,
+		didFirePressStart: false,
+		disposables: [],
+		isOverTarget: false,
+		isPressed: false,
+		isTriggeringEvent: false,
+		pointerType: null,
+		target: null
+	};
+	const globalListeners = [];
+	const addGlobalListener = (target, type, listener, capture = false) => {
+		target.addEventListener(type, listener, capture);
+		globalListeners.push(() => target.removeEventListener(type, listener, capture));
+	};
+	const removeAllGlobalListeners = () => {
+		for (const remove of globalListeners.splice(0)) remove();
+	};
+	const runDisposables = () => {
+		for (const dispose of state.disposables.splice(0)) dispose();
+	};
+	const createPressEvent = (type, pointerType, source) => {
+		const event = {
+			altKey: Boolean(source.altKey),
+			continuePropagation: () => {
+				event.shouldStopPropagation = false;
+			},
+			ctrlKey: Boolean(source.ctrlKey),
+			key: source.key,
+			metaKey: Boolean(source.metaKey),
+			pointerType,
+			shiftKey: Boolean(source.shiftKey),
+			shouldStopPropagation: true,
+			target: source.target ?? state.target,
+			type
+		};
+		return event;
+	};
+	const triggerPressStart = (source, pointerType) => {
+		if (isDisabled.value || state.didFirePressStart) return false;
+		let shouldStopPropagation = true;
+		state.isTriggeringEvent = true;
+		if (options.onPressStart) {
+			const event = createPressEvent("pressstart", pointerType, source);
+			options.onPressStart(event);
+			shouldStopPropagation = event.shouldStopPropagation;
+		}
+		options.onPressChange?.(true);
+		state.isTriggeringEvent = false;
+		state.didFirePressStart = true;
+		pressed.value = true;
+		return shouldStopPropagation;
+	};
+	const triggerPressEnd = (source, pointerType, wasPressed = true) => {
+		if (!state.didFirePressStart) return false;
+		state.didFirePressStart = false;
+		state.isTriggeringEvent = true;
+		let shouldStopPropagation = true;
+		if (options.onPressEnd) {
+			const event = createPressEvent("pressend", pointerType, source);
+			options.onPressEnd(event);
+			shouldStopPropagation = event.shouldStopPropagation;
+		}
+		options.onPressChange?.(false);
+		pressed.value = false;
+		if (options.onPress && wasPressed && !isDisabled.value) {
+			const event = createPressEvent("press", pointerType, source);
+			options.onPress(event);
+			shouldStopPropagation = shouldStopPropagation && event.shouldStopPropagation;
+		}
+		state.isTriggeringEvent = false;
+		return shouldStopPropagation;
+	};
+	const triggerPressUp = (source, pointerType) => {
+		if (isDisabled.value) return false;
+		if (options.onPressUp) {
+			state.isTriggeringEvent = true;
+			const event = createPressEvent("pressup", pointerType, source);
+			options.onPressUp(event);
+			state.isTriggeringEvent = false;
+			return event.shouldStopPropagation;
+		}
+		return true;
+	};
+	const cancel = (source) => {
+		if (!state.isPressed || !state.target) return;
+		if (state.didFirePressStart && state.pointerType !== null) triggerPressEnd({
+			...source,
+			target: state.target
+		}, state.pointerType, false);
+		state.isPressed = false;
+		state.isOverTarget = false;
+		state.activePointerId = null;
+		state.pointerType = null;
+		removeAllGlobalListeners();
+		runDisposables();
+	};
+	watch(isDisabled, (disabled) => {
+		if (disabled && state.isPressed) cancel({ target: state.target });
+	});
+	onScopeDispose(() => {
+		removeAllGlobalListeners();
+		runDisposables();
+	}, true);
+	const onKeyup = (event) => {
+		if (!state.isPressed || !state.target || !isValidKeyboardEvent(event, state.target)) return;
+		if (shouldPreventDefaultKeyboard(event.target instanceof Element ? event.target : state.target, event.key)) event.preventDefault();
+		const wasPressed = contains(state.target, event.target);
+		triggerPressEnd({
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			key: event.key,
+			metaKey: event.metaKey,
+			shiftKey: event.shiftKey,
+			target: state.target
+		}, "keyboard", wasPressed);
+		removeAllGlobalListeners();
+		state.isPressed = false;
+	};
+	const onKeydown = (event) => {
+		const currentTarget = event.currentTarget;
+		if (!currentTarget) return;
+		if (!isValidKeyboardEvent(event, currentTarget)) return;
+		if (!contains(currentTarget, event.target)) return;
+		if (shouldPreventDefaultKeyboard(event.target instanceof Element ? event.target : currentTarget, event.key)) event.preventDefault();
+		let shouldStopPropagation = true;
+		if (!state.isPressed && !event.repeat) {
+			state.target = currentTarget;
+			state.isPressed = true;
+			state.pointerType = "keyboard";
+			shouldStopPropagation = triggerPressStart({
+				altKey: event.altKey,
+				ctrlKey: event.ctrlKey,
+				key: event.key,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey,
+				target: currentTarget
+			}, "keyboard");
+		}
+		addGlobalListener(currentTarget.ownerDocument, "keyup", (keyup) => {
+			if (isValidKeyboardEvent(keyup, state.target ?? currentTarget) && !keyup.repeat && contains(currentTarget, keyup.target) && state.target) triggerPressUp({
+				altKey: keyup.altKey,
+				ctrlKey: keyup.ctrlKey,
+				key: keyup.key,
+				metaKey: keyup.metaKey,
+				shiftKey: keyup.shiftKey,
+				target: state.target
+			}, "keyboard");
+			onKeyup(keyup);
+		}, true);
+		if (shouldStopPropagation) event.stopPropagation();
+	};
+	const onClick = (event) => {
+		const currentTarget = event.currentTarget;
+		if (!currentTarget || !contains(currentTarget, event.target)) return;
+		if (event.button !== 0 || state.isTriggeringEvent) return;
+		let shouldStopPropagation = true;
+		if (isDisabled.value) event.preventDefault();
+		const source = {
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey,
+			shiftKey: event.shiftKey,
+			target: currentTarget
+		};
+		if (!state.isPressed && (state.pointerType === "virtual" || isVirtualClick(event))) {
+			const stopStart = triggerPressStart(source, "virtual");
+			const stopUp = triggerPressUp(source, "virtual");
+			const stopEnd = triggerPressEnd(source, "virtual");
+			shouldStopPropagation = stopStart && stopUp && stopEnd;
+		} else if (state.isPressed && state.pointerType !== "keyboard") {
+			const pointerType = state.pointerType ?? "virtual";
+			const stopUp = triggerPressUp(source, pointerType);
+			const stopEnd = triggerPressEnd(source, pointerType, true);
+			shouldStopPropagation = stopUp && stopEnd;
+			state.isOverTarget = false;
+			cancel(source);
+		}
+		if (shouldStopPropagation) event.stopPropagation();
+	};
+	const onPointerup = (event) => {
+		if (event.pointerId !== state.activePointerId || !state.isPressed || event.button !== 0) return;
+		if (!state.target) return;
+		if (contains(state.target, event.target) && state.pointerType !== null) {
+			let clicked = false;
+			const timeout = setTimeout(() => {
+				if (!state.isPressed || !(state.target instanceof HTMLElement)) return;
+				if (clicked) cancel({ target: state.target });
+				else state.target.click();
+			}, 80);
+			addGlobalListener(event.currentTarget ?? document, "click", () => {
+				clicked = true;
+			}, true);
+			state.disposables.push(() => clearTimeout(timeout));
+			return;
+		}
+		cancel({ target: state.target });
+		state.isOverTarget = false;
+	};
+	const onPointercancel = () => {
+		cancel({ target: state.target });
+	};
+	return {
+		handlers: {
+			onClick,
+			onDragstart: (event) => {
+				if (contains(event.currentTarget, event.target)) cancel({ target: state.target });
+			},
+			onKeydown,
+			onMousedown: (event) => {
+				if (event.button !== 0 || !contains(event.currentTarget, event.target)) return;
+				if (toValue(options.preventFocusOnPress)) event.preventDefault();
+			},
+			onPointerdown: (event) => {
+				if (event.button !== 0 || !contains(event.currentTarget, event.target)) return;
+				if (isVirtualPointerEvent(event)) {
+					state.pointerType = "virtual";
+					return;
+				}
+				state.pointerType = event.pointerType;
+				let shouldStopPropagation = true;
+				if (!state.isPressed) {
+					state.isPressed = true;
+					state.isOverTarget = true;
+					state.activePointerId = event.pointerId;
+					state.target = event.currentTarget;
+					shouldStopPropagation = triggerPressStart({
+						altKey: event.altKey,
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						shiftKey: event.shiftKey,
+						target: state.target
+					}, state.pointerType);
+					const target = event.target;
+					if ("releasePointerCapture" in target && typeof target.hasPointerCapture === "function") {
+						if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+					}
+					const ownerDocument = event.currentTarget.ownerDocument;
+					addGlobalListener(ownerDocument, "pointerup", onPointerup);
+					addGlobalListener(ownerDocument, "pointercancel", onPointercancel);
+				}
+				if (shouldStopPropagation) event.stopPropagation();
+			},
+			onPointerenter: (event) => {
+				if (event.pointerId === state.activePointerId && state.target && !state.isOverTarget && state.pointerType !== null) {
+					state.isOverTarget = true;
+					triggerPressStart({ target: state.target }, state.pointerType);
+				}
+			},
+			onPointerleave: (event) => {
+				if (event.pointerId === state.activePointerId && state.target && state.isOverTarget && state.pointerType !== null) {
+					state.isOverTarget = false;
+					triggerPressEnd({ target: state.target }, state.pointerType, false);
+				}
+			},
+			onPointerup: (event) => {
+				if (!contains(event.currentTarget, event.target) || state.pointerType === "virtual") return;
+				if (event.button === 0 && !state.isPressed) triggerPressUp({ target: event.currentTarget }, state.pointerType ?? event.pointerType);
+			}
+		},
+		isPressed: computed(() => Boolean(toValue(options.isPressed)) || pressed.value)
+	};
+};
+//#endregion
+export { isVirtualClick, isVirtualPointerEvent, usePress };

package/dist/composables/use-prevent-scroll.d.ts

@@ -0,0 +1,24 @@
+import type { MaybeRefOrGetter } from "vue";
+export interface UsePreventScrollOptions {
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+}
+/**
+ * Block page scrolling while a modal overlay is open, ported from React Aria's
+ * `usePreventScroll`.
+ *
+ * An overlay is positioned once, against where its trigger was. Scrolling the page behind it
+ * moves the trigger and leaves the overlay pointing at nothing, so a modal overlay stops the page
+ * moving rather than trying to follow it.
+ *
+ * The count is module-level because the page has one scroll position: two overlays open at once
+ * both want it held, and the second closing must not release it while the first is still open.
+ *
+ * React Aria carries a second implementation for Safari on iOS, which scrolls the page even with
+ * `overflow: hidden`. That is not ported.
+ *
+ * @example
+ * ```ts
+ * usePreventScroll({isDisabled: () => !state.isOpen.value});
+ * ```
+ */
+export declare const usePreventScroll: (options?: UsePreventScrollOptions) => void;

package/dist/composables/use-prevent-scroll.js

@@ -0,0 +1,55 @@
+import { toValue, watch } from "vue";
+//#region src/composables/use-prevent-scroll.ts
+/** How many live callers want scrolling blocked; the page is restored when it reaches zero. */
+var count = 0;
+var restore = () => {};
+/** Set a style property, returning the undo. */
+var setStyle$1 = (element, property, value) => {
+	const previous = element.style[property];
+	element.style[property] = value;
+	return () => {
+		element.style[property] = previous;
+	};
+};
+var preventScroll = () => {
+	const documentElement = document.documentElement;
+	const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+	const undo = [];
+	if (scrollbarWidth > 0) undo.push("scrollbarGutter" in documentElement.style ? setStyle$1(documentElement, "scrollbarGutter", "stable") : setStyle$1(documentElement, "paddingRight", `${scrollbarWidth}px`));
+	undo.push(setStyle$1(documentElement, "overflow", "hidden"));
+	return () => {
+		for (const step of undo.reverse()) step();
+	};
+};
+/**
+* Block page scrolling while a modal overlay is open, ported from React Aria's
+* `usePreventScroll`.
+*
+* An overlay is positioned once, against where its trigger was. Scrolling the page behind it
+* moves the trigger and leaves the overlay pointing at nothing, so a modal overlay stops the page
+* moving rather than trying to follow it.
+*
+* The count is module-level because the page has one scroll position: two overlays open at once
+* both want it held, and the second closing must not release it while the first is still open.
+*
+* React Aria carries a second implementation for Safari on iOS, which scrolls the page even with
+* `overflow: hidden`. That is not ported.
+*
+* @example
+* ```ts
+* usePreventScroll({isDisabled: () => !state.isOpen.value});
+* ```
+*/
+var usePreventScroll = (options = {}) => {
+	watch(() => Boolean(toValue(options.isDisabled)), (isDisabled, _previous, onCleanup) => {
+		if (isDisabled || typeof document === "undefined") return;
+		count++;
+		if (count === 1) restore = preventScroll();
+		onCleanup(() => {
+			count--;
+			if (count === 0) restore();
+		});
+	}, { immediate: true });
+};
+//#endregion
+export { usePreventScroll };

package/dist/composables/use-progress-labeling.d.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseProgressLabelingOptions {
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
+    id?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseProgressLabelingReturn {
+    /** Stable id for the meter or progress root. */
+    id: ComputedRef<string>;
+    /** Visible, external, and explicit labels combined with React Aria parity. */
+    ariaLabelledby: ComputedRef<string | undefined>;
+}
+/**
+ * Wire the visible Label and explicit ARIA naming props shared by Meter and both Progress roots.
+ *
+ * React Aria's `useSlot` boolean only seeds whether a slot is expected on the first render. Once a
+ * visible Label mounts, its ref marks the slot present even when `aria-label` or
+ * `aria-labelledby` was supplied. The Label is therefore always allowed to claim an id here.
+ * `useLabels` then makes `aria-label` participate alongside those ids by prepending the root's own
+ * id, matching React Aria's accessible-name composition.
+ */
+export declare const useProgressLabeling: (options: UseProgressLabelingOptions) => UseProgressLabelingReturn;

package/dist/composables/use-progress-labeling.js

@@ -0,0 +1,38 @@
+import { useId as useId$1 } from "./use-id.js";
+import { provideFieldIdsContext, useFieldIds } from "./use-field-ids.js";
+import { useLabels } from "./use-labels.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-progress-labeling.ts
+/**
+* Wire the visible Label and explicit ARIA naming props shared by Meter and both Progress roots.
+*
+* React Aria's `useSlot` boolean only seeds whether a slot is expected on the first render. Once a
+* visible Label mounts, its ref marks the slot present even when `aria-label` or
+* `aria-labelledby` was supplied. The Label is therefore always allowed to claim an id here.
+* `useLabels` then makes `aria-label` participate alongside those ids by prepending the root's own
+* id, matching React Aria's accessible-name composition.
+*/
+var useProgressLabeling = (options) => {
+	const id = useId$1(options.id);
+	const { context, labelId } = useFieldIds({
+		labelElementType: "span",
+		slots: ["label"]
+	});
+	provideFieldIdsContext(context);
+	const visibleAndExternalIds = computed(() => {
+		const external = toValue(options.ariaLabelledby)?.trim().split(/\s+/).filter(Boolean) ?? [];
+		const ids = [labelId.value, ...external].filter((value) => Boolean(value));
+		return ids.length > 0 ? [...new Set(ids)].join(" ") : void 0;
+	});
+	const labels = useLabels(() => ({
+		"aria-label": toValue(options.ariaLabel),
+		"aria-labelledby": visibleAndExternalIds.value,
+		id: id.value
+	}));
+	return {
+		ariaLabelledby: computed(() => labels.value["aria-labelledby"]),
+		id
+	};
+};
+//#endregion
+export { useProgressLabeling };

package/dist/composables/use-progress-value.d.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseProgressValueOptions {
+    formatOptions?: MaybeRefOrGetter<Intl.NumberFormatOptions | undefined>;
+    isIndeterminate?: MaybeRefOrGetter<boolean | undefined>;
+    maxValue?: MaybeRefOrGetter<number | undefined>;
+    minValue?: MaybeRefOrGetter<number | undefined>;
+    value?: MaybeRefOrGetter<number | undefined>;
+    valueLabel?: MaybeRefOrGetter<string | undefined>;
+}
+export interface ProgressValueState {
+    /** Clamped current value. */
+    value: ComputedRef<number>;
+    minValue: ComputedRef<number>;
+    maxValue: ComputedRef<number>;
+    /** Percentage in the 0–100 range, absent for indeterminate progress. */
+    percentage: ComputedRef<number | undefined>;
+    /** Localized value exposed to assistive technology and output parts. */
+    valueText: ComputedRef<string | undefined>;
+    isIndeterminate: ComputedRef<boolean>;
+}
+/** Shared value, percentage and formatting semantics for Meter and both Progress components. */
+export declare const useProgressValue: (options: UseProgressValueOptions) => ProgressValueState;

package/dist/composables/use-progress-value.js

@@ -0,0 +1,35 @@
+import { useNumberFormatter } from "./use-number-formatter.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-progress-value.ts
+/** Shared value, percentage and formatting semantics for Meter and both Progress components. */
+var useProgressValue = (options) => {
+	const formatOptions = computed(() => toValue(options.formatOptions) ?? { style: "percent" });
+	const formatter = useNumberFormatter(formatOptions);
+	const minValue = computed(() => toValue(options.minValue) ?? 0);
+	const maxValue = computed(() => toValue(options.maxValue) ?? 100);
+	const value = computed(() => {
+		const current = toValue(options.value) ?? 0;
+		return Math.min(Math.max(current, minValue.value), maxValue.value);
+	});
+	const determinatePercentage = computed(() => {
+		const range = maxValue.value - minValue.value;
+		return range === 0 ? 0 : (value.value - minValue.value) / range * 100;
+	});
+	const isIndeterminate = computed(() => Boolean(toValue(options.isIndeterminate)));
+	return {
+		isIndeterminate,
+		maxValue,
+		minValue,
+		percentage: computed(() => isIndeterminate.value ? void 0 : determinatePercentage.value),
+		value,
+		valueText: computed(() => {
+			if (isIndeterminate.value) return void 0;
+			const explicit = toValue(options.valueLabel);
+			if (explicit) return explicit;
+			const valueToFormat = formatOptions.value.style === "percent" ? determinatePercentage.value / 100 : value.value;
+			return formatter.value.format(valueToFormat);
+		})
+	};
+};
+//#endregion
+export { useProgressValue };