@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/shared/use-positioning.js

@@ -0,0 +1,106 @@
+import { computed, ref, shallowRef, toValue } from "vue";
+import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from "@floating-ui/vue";
+//#region src/shared/use-positioning.ts
+function usePositioning(options = {}) {
+	const anchorRef = ref(null);
+	const virtualAnchor = shallowRef(null);
+	const reference = computed(() => virtualAnchor.value ?? anchorRef.value);
+	const popupRef = ref(null);
+	const arrowRef = ref(null);
+	const side = () => toValue(options.side) ?? "bottom";
+	const align = () => toValue(options.align) ?? "center";
+	const padding = () => toValue(options.collisionPadding) ?? 8;
+	const placement = computed(() => {
+		const a = align();
+		return a === "center" ? side() : `${side()}-${a}`;
+	});
+	const middleware = computed(() => {
+		const list = [offset({
+			mainAxis: toValue(options.sideOffset) ?? 0,
+			crossAxis: toValue(options.alignOffset) ?? 0
+		})];
+		if (!toValue(options.sticky)) {
+			const fallbackSides = toValue(options.fallbackSides);
+			const a = align();
+			list.push(flip({
+				padding: padding(),
+				...fallbackSides ? { fallbackPlacements: fallbackSides.map((side) => a === "center" ? side : `${side}-${a}`) } : { fallbackAxisSideDirection: toValue(options.fallbackAxis) ?? true ? "end" : "none" }
+			}));
+		}
+		list.push(shift({
+			padding: padding(),
+			limiter: limitShift()
+		}));
+		list.push(size({
+			padding: padding(),
+			apply({ availableWidth, availableHeight, elements, rects }) {
+				elements.floating.style.setProperty("--available-width", `${Math.round(availableWidth)}px`);
+				elements.floating.style.setProperty("--available-height", `${Math.round(availableHeight)}px`);
+				elements.floating.style.setProperty("--anchor-width", `${Math.round(rects.reference.width)}px`);
+				elements.floating.style.setProperty("--anchor-height", `${Math.round(rects.reference.height)}px`);
+			}
+		}));
+		if (arrowRef.value) list.push(arrow({
+			element: arrowRef.value,
+			padding: toValue(options.arrowPadding) ?? 4
+		}));
+		list.push(hide());
+		return list;
+	});
+	const { floatingStyles, middlewareData, placement: finalPlacement, isPositioned } = useFloating(reference, popupRef, {
+		placement,
+		middleware,
+		strategy: computed(() => toValue(options.positionMethod) ?? "absolute"),
+		whileElementsMounted: autoUpdate,
+		open: computed(() => toValue(options.enabled) ?? true)
+	});
+	const renderedSide = computed(() => finalPlacement.value.split("-")[0]);
+	const renderedAlign = computed(() => finalPlacement.value.split("-")[1] ?? "center");
+	const hidden = computed(() => middlewareData.value.hide?.referenceHidden ?? false);
+	return {
+		anchorRef,
+		setVirtualAnchor(anchor) {
+			virtualAnchor.value = anchor;
+		},
+		popupRef,
+		arrowRef,
+		positionerProps: computed(() => ({
+			"data-part": "positioner",
+			style: {
+				...floatingStyles.value,
+				zIndex: "var(--positioner-z-index, 50)",
+				visibility: !isPositioned.value || hidden.value ? "hidden" : void 0
+			},
+			"data-side": renderedSide.value,
+			"data-align": renderedAlign.value,
+			ref: (el) => {
+				popupRef.value = el ?? null;
+			}
+		})),
+		arrowProps: computed(() => {
+			const data = middlewareData.value.arrow;
+			const side = renderedSide.value;
+			return {
+				"data-part": "arrow",
+				"data-side": side,
+				style: {
+					position: "absolute",
+					left: data?.x != null ? `${data.x}px` : "",
+					top: data?.y != null ? `${data.y}px` : "",
+					right: "",
+					bottom: "",
+					[side]: "100%"
+				},
+				ref: (el) => {
+					arrowRef.value = el ?? null;
+				}
+			};
+		}),
+		renderedSide,
+		renderedAlign,
+		hidden,
+		isPositioned
+	};
+}
+//#endregion
+export { usePositioning };

package/dist/shared/use-roving-focus.d.ts

@@ -0,0 +1,43 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export type Orientation = 'horizontal' | 'vertical';
+export interface UseRovingFocusOptions {
+    /** The element containing the items. */
+    container: Ref<HTMLElement | null>;
+    /** Selector matching the navigable items. */
+    itemSelector?: MaybeRefOrGetter<string>;
+    /** Which arrow keys move between items. */
+    orientation?: MaybeRefOrGetter<Orientation>;
+    /** Wrap around at the ends. */
+    loop?: MaybeRefOrGetter<boolean>;
+    /** Called when navigation runs past the start or end without looping. */
+    onEscapeBoundary?: (direction: 'start' | 'end') => void;
+    /**
+     * Track the active item without moving DOM focus, for
+     * `aria-activedescendant`.
+     *
+     * A listbox with a search box needs this: focus has to stay in the text input
+     * so typing keeps working, while the highlight travels down the options.
+     */
+    virtual?: MaybeRefOrGetter<boolean>;
+    /** Called with the element that became active, in virtual mode. */
+    onActiveChange?: (item: HTMLElement | null) => void;
+}
+/**
+ * Arrow-key navigation over a set of items.
+ *
+ * Items are discovered by querying the DOM at interaction time rather than by
+ * registering themselves. That keeps them in document order for free, which
+ * registration-based approaches get wrong as soon as items are reordered,
+ * conditionally rendered or wrapped in a `v-for` that changes.
+ *
+ * Disabled items are skipped, matching how a native menu behaves.
+ */
+export declare function useRovingFocus(options: UseRovingFocusOptions): {
+    items: () => HTMLElement[];
+    focusAt: (index: number) => void;
+    move: (delta: number) => void;
+    onKeydown: (event: KeyboardEvent) => boolean;
+    currentIndex: () => number;
+    setActive: (item: HTMLElement | null, scroll?: boolean) => void;
+    activeItem: Ref<HTMLElement | null, HTMLElement | null>;
+};

package/dist/shared/use-roving-focus.js

@@ -0,0 +1,106 @@
+import { scrollIntoViewWithin } from "./focus.js";
+import { ref, toValue } from "vue";
+//#region src/shared/use-roving-focus.ts
+/**
+* Arrow-key navigation over a set of items.
+*
+* Items are discovered by querying the DOM at interaction time rather than by
+* registering themselves. That keeps them in document order for free, which
+* registration-based approaches get wrong as soon as items are reordered,
+* conditionally rendered or wrapped in a `v-for` that changes.
+*
+* Disabled items are skipped, matching how a native menu behaves.
+*/
+function useRovingFocus(options) {
+	const selector = () => toValue(options.itemSelector) ?? "[role=\"menuitem\"]";
+	const orientation = () => toValue(options.orientation) ?? "vertical";
+	const loop = () => toValue(options.loop) ?? true;
+	const virtual = () => toValue(options.virtual) ?? false;
+	/** The active item in virtual mode. Unused when real focus does the job. */
+	const activeItem = ref(null);
+	function items() {
+		const container = options.container.value;
+		if (!container) return [];
+		return Array.from(container.querySelectorAll(selector())).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("disabled"));
+	}
+	function focusAt(index) {
+		const list = items();
+		if (list.length === 0) return;
+		let next = index;
+		if (next < 0) {
+			if (!loop()) {
+				options.onEscapeBoundary?.("start");
+				return;
+			}
+			next = list.length - 1;
+		} else if (next >= list.length) {
+			if (!loop()) {
+				options.onEscapeBoundary?.("end");
+				return;
+			}
+			next = 0;
+		}
+		setActive(list[next] ?? null);
+	}
+	/**
+	* Makes `item` the active one, by focus or by reference depending on the mode.
+	*
+	* The virtual branch scrolls it into view itself: focusing an element does
+	* that for free, so nothing else in the library has had to.
+	*
+	* `scroll` exists for the pointer. Revealing an item the user is already
+	* pointing at is at best redundant and at worst a loop: the scroll moves the
+	* list under a stationary cursor, which puts a different half-clipped item
+	* under it, which scrolls again. Only the keyboard, which can move the
+	* highlight somewhere off screen, actually needs the reveal.
+	*/
+	function setActive(item, scroll = true) {
+		if (virtual()) {
+			activeItem.value = item;
+			options.onActiveChange?.(item);
+		} else item?.focus({ preventScroll: true });
+		if (item && scroll) scrollIntoViewWithin(item, options.container.value);
+	}
+	function currentIndex() {
+		const current = virtual() ? activeItem.value : document.activeElement;
+		return current ? items().indexOf(current) : -1;
+	}
+	function move(delta) {
+		focusAt(currentIndex() + delta);
+	}
+	function onKeydown(event) {
+		const vertical = orientation() === "vertical";
+		const nextKey = vertical ? "ArrowDown" : "ArrowRight";
+		const prevKey = vertical ? "ArrowUp" : "ArrowLeft";
+		switch (event.key) {
+			case nextKey:
+				event.preventDefault();
+				move(1);
+				return true;
+			case prevKey:
+				event.preventDefault();
+				move(-1);
+				return true;
+			case "Home":
+				event.preventDefault();
+				focusAt(0);
+				return true;
+			case "End":
+				event.preventDefault();
+				focusAt(items().length - 1);
+				return true;
+			default: return false;
+		}
+	}
+	return {
+		items,
+		focusAt,
+		move,
+		onKeydown,
+		currentIndex,
+		setActive,
+		activeItem
+	};
+}
+//#endregion
+export { useRovingFocus };

package/dist/shared/use-roving-items.d.ts

@@ -0,0 +1,47 @@
+import { type ComputedRef, type Ref } from 'vue';
+/** One navigable item's entry in the set its container keeps. */
+export interface RovingItem<Value> {
+    value: Value;
+    /** Stable for the item's lifetime; what a re-registration is matched on. */
+    id: string;
+    disabled: boolean;
+    element: HTMLElement | null;
+}
+export interface UseRovingItemsOptions<Value> {
+    /**
+     * Which item should hold the tab stop before focus has moved into the set —
+     * usually the selected one. A set with no selection leaves it undefined and
+     * the first enabled item takes it.
+     */
+    preferred?: () => Value | undefined;
+}
+export interface UseRovingItemsReturn<Value> {
+    /** Registration order. Shallow, so elements come back unproxied. */
+    items: Ref<RovingItem<Value>[]>;
+    /** The same items in document order. */
+    ordered: ComputedRef<RovingItem<Value>[]>;
+    register: (item: RovingItem<Value>) => void;
+    unregister: (id: string) => void;
+    find: (value: Value) => RovingItem<Value> | undefined;
+    /** The item focus last landed on, which is not always the preferred one. */
+    highlighted: Ref<Value | undefined>;
+    highlight: (value: Value | undefined) => void;
+    /** The single item the Tab key reaches. */
+    tabbableValue: ComputedRef<Value | undefined>;
+}
+/**
+ * The set of items behind a roving tab stop: who is in it, in what order, and
+ * which one the Tab key reaches.
+ *
+ * The companion to {@link useRovingFocus}, which moves focus *between* items by
+ * querying the DOM at interaction time. That covers the keys, but not the
+ * `tabindex` each item has to render with — a value known before any key is
+ * pressed, and reactive — so anything with a roving tab stop keeps this
+ * alongside it.
+ *
+ * The tab stop follows focus rather than selection, so leaving a set and
+ * returning to it lands on the item last looked at. It falls back to the first
+ * enabled item when the preferred one is disabled or absent, because otherwise
+ * every item renders `-1` and the whole set drops out of the tab order.
+ */
+export declare function useRovingItems<Value>(options?: UseRovingItemsOptions<Value>): UseRovingItemsReturn<Value>;

package/dist/shared/use-roving-items.js

@@ -0,0 +1,64 @@
+import { computed, ref, shallowRef } from "vue";
+//#region src/shared/use-roving-items.ts
+/**
+* The set of items behind a roving tab stop: who is in it, in what order, and
+* which one the Tab key reaches.
+*
+* The companion to {@link useRovingFocus}, which moves focus *between* items by
+* querying the DOM at interaction time. That covers the keys, but not the
+* `tabindex` each item has to render with — a value known before any key is
+* pressed, and reactive — so anything with a roving tab stop keeps this
+* alongside it.
+*
+* The tab stop follows focus rather than selection, so leaving a set and
+* returning to it lands on the item last looked at. It falls back to the first
+* enabled item when the preferred one is disabled or absent, because otherwise
+* every item renders `-1` and the whole set drops out of the tab order.
+*/
+function useRovingItems(options = {}) {
+	/**
+	* Shallow on purpose: a deep ref would hand back proxied DOM elements, and an
+	* element compared against `document.activeElement` — or measured — has to be
+	* the element itself. Every change replaces the array instead.
+	*/
+	const items = shallowRef([]);
+	/** Registration order is mount order; items are read in document order. */
+	const ordered = computed(() => [...items.value].sort((a, b) => {
+		if (!a.element || !b.element || a.element === b.element) return 0;
+		return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+	}));
+	function register(item) {
+		const index = items.value.findIndex((entry) => entry.id === item.id);
+		const next = [...items.value];
+		if (index === -1) next.push(item);
+		else next[index] = item;
+		items.value = next;
+	}
+	function unregister(id) {
+		items.value = items.value.filter((entry) => entry.id !== id);
+	}
+	function find(value) {
+		return ordered.value.find((entry) => entry.value === value);
+	}
+	const highlighted = ref(void 0);
+	function highlight(value) {
+		highlighted.value = value;
+	}
+	return {
+		items,
+		ordered,
+		register,
+		unregister,
+		find,
+		highlighted,
+		highlight,
+		tabbableValue: computed(() => {
+			const list = ordered.value;
+			const preferred = highlighted.value ?? options.preferred?.();
+			if (preferred !== void 0 && list.some((item) => item.value === preferred && !item.disabled)) return preferred;
+			return list.find((item) => !item.disabled)?.value;
+		})
+	};
+}
+//#endregion
+export { useRovingItems };

package/dist/shared/use-scroll-lock.d.ts

@@ -0,0 +1,3 @@
+import { type MaybeRefOrGetter } from 'vue';
+/** Prevents the page behind a modal surface from scrolling. */
+export declare function useScrollLock(enabled: MaybeRefOrGetter<boolean>): void;

package/dist/shared/use-scroll-lock.js

@@ -0,0 +1,71 @@
+import { onScopeDispose, toValue, watch } from "vue";
+//#region src/shared/use-scroll-lock.ts
+/**
+* Locks are counted rather than boolean. A dialog opening a second dialog must
+* not have the inner one's close restore scrolling while the outer is still up.
+*/
+var lockCount = 0;
+var restore = null;
+function isIos() {
+	if (typeof navigator === "undefined") return false;
+	return /iP(hone|ad|od)/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
+function applyLock() {
+	const { body, documentElement } = document;
+	const previousOverflow = body.style.overflow;
+	const previousRootOverflow = documentElement.style.overflow;
+	const previousPaddingRight = body.style.paddingRight;
+	const previousPosition = body.style.position;
+	const previousTop = body.style.top;
+	const previousWidth = body.style.width;
+	const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+	if (scrollbarWidth > 0) {
+		const currentPadding = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
+		body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+	}
+	body.style.overflow = "clip";
+	documentElement.style.overflow = "clip";
+	const scrollY = window.scrollY;
+	if (isIos()) {
+		body.style.position = "fixed";
+		body.style.top = `${-scrollY}px`;
+		body.style.width = "100%";
+	}
+	return () => {
+		body.style.overflow = previousOverflow;
+		documentElement.style.overflow = previousRootOverflow;
+		body.style.paddingRight = previousPaddingRight;
+		if (isIos()) {
+			body.style.position = previousPosition;
+			body.style.top = previousTop;
+			body.style.width = previousWidth;
+			window.scrollTo(0, scrollY);
+		}
+	};
+}
+/** Prevents the page behind a modal surface from scrolling. */
+function useScrollLock(enabled) {
+	let held = false;
+	function release() {
+		if (!held) return;
+		held = false;
+		lockCount -= 1;
+		if (lockCount === 0) {
+			restore?.();
+			restore = null;
+		}
+	}
+	function acquire() {
+		if (held || typeof document === "undefined") return;
+		held = true;
+		lockCount += 1;
+		if (lockCount === 1) restore = applyLock();
+	}
+	watch(() => toValue(enabled), (on) => on ? acquire() : release(), {
+		immediate: true,
+		flush: "post"
+	});
+	onScopeDispose(release);
+}
+//#endregion
+export { useScrollLock };

package/dist/shared/use-toggle-indicator.d.ts

@@ -0,0 +1,25 @@
+import { type ComputedRef, type Ref } from 'vue';
+import { type TransitionStatus } from './use-transition-status';
+/** What a checkbox or radio root hands its indicator. */
+export interface ToggleIndicatorContext<State extends object = object> {
+    state: ComputedRef<State>;
+    /** The root's own `data-*` hooks, repeated on the indicator. */
+    hooks: ComputedRef<Record<string, string>>;
+    /** Whether the indicator should be showing. */
+    present: () => boolean;
+}
+export declare const provideToggleIndicator: (value: ToggleIndicatorContext<object>) => ToggleIndicatorContext<object>, useToggleIndicatorContext: () => ToggleIndicatorContext<object>;
+export interface UseToggleIndicatorReturn<State extends object> {
+    /** Whether the indicator is in the DOM. Outlives `present` for an exit animation. */
+    mounted: Ref<boolean>;
+    state: ComputedRef<State & {
+        /**
+         * Where the indicator is in its enter or exit animation.
+         * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+         */
+        transitionStatus: TransitionStatus;
+    }>;
+    indicatorProps: ComputedRef<Record<string, unknown>>;
+}
+/** Mounts the indicator while its root is checked, and holds it through the exit animation. */
+export declare function useToggleIndicator<State extends object>(): UseToggleIndicatorReturn<State>;

package/dist/shared/use-toggle-indicator.js

@@ -0,0 +1,37 @@
+import { dataAttrs } from "./data-attrs.js";
+import { createContext } from "./context.js";
+import { popupStateAttrs } from "./popup-state-attrs.js";
+import { useTransitionStatus } from "./use-transition-status.js";
+import { useExitAnimation } from "./use-exit-animation.js";
+import { computed, ref } from "vue";
+//#region src/shared/use-toggle-indicator.ts
+var { provideContext: provideToggleIndicator, useContext: useToggleIndicatorContext } = createContext("ToggleIndicator");
+/** Mounts the indicator while its root is checked, and holds it through the exit animation. */
+function useToggleIndicator() {
+	const context = useToggleIndicatorContext();
+	const element = ref(null);
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(context.present);
+	useExitAnimation({
+		open: context.present,
+		mounted,
+		setMounted,
+		element
+	});
+	return {
+		mounted,
+		state: computed(() => ({
+			...context.state.value,
+			transitionStatus: transitionStatus.value
+		})),
+		indicatorProps: computed(() => ({
+			"data-part": "indicator",
+			...context.hooks.value,
+			...dataAttrs({ transitionStatus: transitionStatus.value }, popupStateAttrs),
+			ref: (el) => {
+				element.value = el ?? null;
+			}
+		}))
+	};
+}
+//#endregion
+export { provideToggleIndicator, useToggleIndicator, useToggleIndicatorContext };

package/dist/shared/use-toggle-input.d.ts

@@ -0,0 +1,68 @@
+import { type ComputedRef, type Ref } from 'vue';
+/** What the visible element announces itself as. */
+export type ToggleRole = 'switch' | 'checkbox' | 'radio';
+export interface UseToggleInputOptions {
+    role: ToggleRole;
+    /**
+     * The hidden input's own type. A `radio` groups natively by `name`, which is
+     * what makes arrow keys and form submission behave without any help.
+     */
+    inputType?: 'checkbox' | 'radio';
+    /** Whether the control is on. Read, never written — the caller owns it. */
+    checked: () => boolean;
+    /**
+     * Neither on nor off. Checkboxes only: it is a presentation state, so a press
+     * resolves it to checked rather than cycling back through it.
+     */
+    indeterminate?: () => boolean;
+    disabled?: () => boolean;
+    readOnly?: () => boolean;
+    required?: () => boolean;
+    id?: () => string | undefined;
+    name?: () => string | undefined;
+    /** Submitted when checked. */
+    value?: () => string | undefined;
+    form?: () => string | undefined;
+    /** The ids of the text describing the control, a field's description and error. */
+    describedBy?: () => string | undefined;
+    /** Whether the visible element is a real `<button>`, which keys itself. */
+    native?: () => boolean;
+    /** Tab position. A roving group hands out `0` to one member and `-1` to the rest. */
+    tabindex?: () => number | undefined;
+    /** The `data-*` hooks to put on every part. */
+    hooks: () => Record<string, string>;
+    /** Called when the control is activated, with the state it is moving to. */
+    onToggle: (next: boolean, event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+}
+export interface UseToggleInputReturn {
+    /** The visible element. */
+    rootEl: Ref<HTMLElement | null>;
+    /** The hidden input behind it. */
+    inputEl: Ref<HTMLInputElement | null>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    inputProps: ComputedRef<Record<string, unknown>>;
+    /** Whether to render the input: only a `name` or a wrapping `<label>` has a use for it. */
+    rendersInput: ComputedRef<boolean>;
+    /** Activates the control as a press would, respecting disabled and readOnly. */
+    activate: (event?: Event) => void;
+}
+/**
+ * The wiring shared by every control that is a hidden native input with
+ * something styled in front of it — switch, checkbox, radio.
+ *
+ * The input is what makes the control submit with a form, respond to a
+ * wrapping `<label>` and — for radios — group by `name` so the browser enforces
+ * exclusivity. Presses on the visible element are forwarded to it, so a change
+ * originates natively. Without a name or a label it has no use, and a root may
+ * leave it out (`rendersInput`): a page of unnamed row checkboxes then carries
+ * no inputs at all, and the press toggles directly.
+ *
+ * Deliberately owns no state of its own: `checked` is read through a getter and
+ * changes are reported through `onToggle`. A switch and a checkbox own their
+ * boolean; a radio owns nothing, because the group it belongs to holds the one
+ * value shared between its members. One engine serves all three only because it
+ * stays out of that question.
+ */
+export declare function useToggleInput(options: UseToggleInputOptions): UseToggleInputReturn;

package/dist/shared/use-toggle-input.js

@@ -0,0 +1,106 @@
+import { visuallyHidden } from "./visually-hidden.js";
+import { computed, onMounted, ref } from "vue";
+//#region src/shared/use-toggle-input.ts
+/**
+* The wiring shared by every control that is a hidden native input with
+* something styled in front of it — switch, checkbox, radio.
+*
+* The input is what makes the control submit with a form, respond to a
+* wrapping `<label>` and — for radios — group by `name` so the browser enforces
+* exclusivity. Presses on the visible element are forwarded to it, so a change
+* originates natively. Without a name or a label it has no use, and a root may
+* leave it out (`rendersInput`): a page of unnamed row checkboxes then carries
+* no inputs at all, and the press toggles directly.
+*
+* Deliberately owns no state of its own: `checked` is read through a getter and
+* changes are reported through `onToggle`. A switch and a checkbox own their
+* boolean; a radio owns nothing, because the group it belongs to holds the one
+* value shared between its members. One engine serves all three only because it
+* stays out of that question.
+*/
+function useToggleInput(options) {
+	const rootEl = ref(null);
+	const inputEl = ref(null);
+	const disabled = () => options.disabled?.() ?? false;
+	const readOnly = () => options.readOnly?.() ?? false;
+	const required = () => options.required?.() ?? false;
+	const native = () => options.native?.() ?? false;
+	const indeterminate = () => options.indeterminate?.() ?? false;
+	const name = () => options.name?.();
+	const inLabel = ref(false);
+	onMounted(() => {
+		inLabel.value = rootEl.value?.closest("label") != null;
+	});
+	const rendersInput = computed(() => Boolean(name()) || inLabel.value);
+	/** Every press ends here: the input, when there is one, toggles itself, so the change is a native one. */
+	function activate(event) {
+		if (disabled() || readOnly()) return;
+		if (inputEl.value) inputEl.value.click();
+		else options.onToggle(!options.checked(), event ?? new Event("change"));
+	}
+	return {
+		rootEl,
+		inputEl,
+		rootProps: computed(() => ({
+			...options.hooks(),
+			id: options.id?.(),
+			role: options.role,
+			"aria-checked": indeterminate() ? "mixed" : options.checked(),
+			"aria-readonly": readOnly() || void 0,
+			"aria-required": required() || void 0,
+			"aria-disabled": disabled() || void 0,
+			"aria-describedby": options.describedBy?.(),
+			type: native() ? "button" : void 0,
+			disabled: native() && disabled() || void 0,
+			tabindex: options.tabindex ? options.tabindex() : native() || disabled() ? void 0 : 0,
+			ref: (el) => {
+				rootEl.value = el ?? null;
+			},
+			onFocus: options.onFocus,
+			onBlur: options.onBlur,
+			onClick(event) {
+				event.preventDefault();
+				activate(event);
+			},
+			onKeydown(event) {
+				if (native() || disabled() || event.target !== event.currentTarget) return;
+				if (event.key === " ") event.preventDefault();
+				else if (event.key === "Enter" && !event.defaultPrevented) {
+					event.preventDefault();
+					event.currentTarget.click();
+				}
+			},
+			onKeyup(event) {
+				if (native() || disabled() || event.defaultPrevented) return;
+				if (event.key === " " && event.target === event.currentTarget) event.currentTarget.click();
+			}
+		})),
+		inputProps: computed(() => ({
+			type: options.inputType ?? "checkbox",
+			name: name(),
+			value: options.value?.(),
+			form: options.form?.(),
+			disabled: disabled(),
+			checked: options.checked(),
+			indeterminate: indeterminate(),
+			style: visuallyHidden,
+			tabindex: -1,
+			"aria-hidden": true,
+			ref: (el) => {
+				inputEl.value = el ?? null;
+			},
+			onClick(event) {
+				event.stopPropagation();
+				if (readOnly()) event.preventDefault();
+			},
+			onChange(event) {
+				options.onToggle(event.target.checked, event);
+			},
+			onFocus: () => rootEl.value?.focus()
+		})),
+		rendersInput,
+		activate
+	};
+}
+//#endregion
+export { useToggleInput };