ropav 0.11.0 → 0.12.0

package/dist/components/toast/toast.constants.d.ts

@@ -12,5 +12,21 @@ export declare const DEFAULT_MAX_VISIBLE_TOAST = 3;
 export declare const DEFAULT_SCALE_FACTOR = 0.05;
 /** Pixels wide, written out as `--toast-width` for the stylesheet to read. */
 export declare const DEFAULT_TOAST_WIDTH = 460;
-/** Milliseconds a toast lives for. Matches sonner's default. */
+/** Milliseconds a toast lives for. */
 export declare const DEFAULT_TOAST_TIMEOUT = 4000;
+/**
+ * Milliseconds after which a closed toast is dropped whether or not it reported its exit.
+ *
+ * Not the length of the exit, which the toast waits out against its own animations. This is the
+ * ceiling for a toast that can never report one — a slot the caller filled with something other
+ * than a `ToastRoot` — so a list of them cannot grow without end.
+ */
+export declare const EXIT_FALLBACK = 2000;
+/**
+ * The key combination that moves focus to the toast region.
+ *
+ * An entry naming one of the `KeyboardEvent` modifier booleans matches that modifier; anything
+ * else matches `event.code`, so what counts is the key in that position rather than the character
+ * the layout produces there. An empty list turns the shortcut off.
+ */
+export declare const DEFAULT_HOTKEY: readonly string[];

package/dist/components/toast/toast.constants.js

@@ -13,7 +13,23 @@ var DEFAULT_MAX_VISIBLE_TOAST = 3;
 var DEFAULT_SCALE_FACTOR = .05;
 /** Pixels wide, written out as `--toast-width` for the stylesheet to read. */
 var DEFAULT_TOAST_WIDTH = 460;
-/** Milliseconds a toast lives for. Matches sonner's default. */
+/** Milliseconds a toast lives for. */
 var DEFAULT_TOAST_TIMEOUT = 4e3;
+/**
+* Milliseconds after which a closed toast is dropped whether or not it reported its exit.
+*
+* Not the length of the exit, which the toast waits out against its own animations. This is the
+* ceiling for a toast that can never report one — a slot the caller filled with something other
+* than a `ToastRoot` — so a list of them cannot grow without end.
+*/
+var EXIT_FALLBACK = 2e3;
+/**
+* The key combination that moves focus to the toast region.
+*
+* An entry naming one of the `KeyboardEvent` modifier booleans matches that modifier; anything
+* else matches `event.code`, so what counts is the key in that position rather than the character
+* the layout produces there. An empty list turns the shortcut off.
+*/
+var DEFAULT_HOTKEY = ["altKey", "KeyT"];
 //#endregion
-export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH };
+export { DEFAULT_GAP, DEFAULT_HOTKEY, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, EXIT_FALLBACK };

package/dist/components/toast/toast.context.d.ts

@@ -12,10 +12,16 @@ import type { ComputedRef } from "vue";
 export interface ToastRegionContext {
     /** Closes one toast by key. */
     close: (key: string) => void;
+    /** Keys still mounted for their exit animation, which have left the queue already. */
+    exitingKeys: ComputedRef<ReadonlySet<string>>;
     gap: ComputedRef<number>;
     /** Every mounted toast's measured height, so a stacked toast can be clipped to the front one. */
     heightsByKey: ComputedRef<Record<string, number>>;
+    /** Whether the stack is opened out, so every toast shows at its own height. */
+    isExpanded: ComputedRef<boolean>;
     maxVisibleToasts: ComputedRef<number>;
+    /** Reported by a toast once its exit animation has finished, so it can be unmounted. */
+    onExitFinished: (key: string) => void;
     onToastHeightChange: (key: string, height: number) => void;
     onToastHeightRemove: (key: string) => void;
     placement: ComputedRef<ToastVariants["placement"]>;

package/dist/components/toast/toast.types.d.ts

@@ -82,6 +82,19 @@ export interface ToastProviderProps {
     class?: string;
     /** Pixels between stacked toasts. @default 12 */
     gap?: number;
+    /**
+     * Key combination that moves focus to the region, as `KeyboardEvent` modifier names plus an
+     * `event.code`. Modifiers left out have to be up, so `Alt`+`T` does not answer `Ctrl`+`Alt`+`T`.
+     * Pass an empty list to turn it off.
+     *
+     * @default ["altKey", "KeyT"]
+     */
+    hotkey?: readonly string[];
+    /**
+     * Holds the stack open regardless of pointer or focus. Deliberately does not pause the clocks:
+     * expansion asked for by the page is not someone reading the toasts.
+     */
+    isExpanded?: boolean;
     /**
      * How many toasts are drawn at once. Visual only — the rest are faded out, not dropped.
      *
@@ -118,6 +131,12 @@ export interface ToastContentProps {
 }
 export interface ToastIndicatorProps {
     class?: string;
+    /**
+     * Whether this indicator is replacing one the toast was already showing, which the stylesheet
+     * animates. The first indicator a toast renders is not a replacement and must not be marked as
+     * one, or every toast would arrive with its icon animating.
+     */
+    isSwapped?: boolean;
     /** Picks the default icon. Falls back to the toast's own variant. */
     variant?: ToastVariants["variant"];
 }

package/dist/composables/use-list-keyboard.d.ts

@@ -50,7 +50,7 @@ export interface UseListKeyboardOptions {
     disallowSelectAll?: MaybeRefOrGetter<boolean | undefined>;
     /** @default "clearSelection" */
     escapeKeyBehavior?: MaybeRefOrGetter<"clearSelection" | "none" | undefined>;
-    /** Called when an item is activated rather than selected. */
+    /** Called when an item is activated: Enter, or a press where there is no selection to make. */
     onAction?: (key: CollectionKey) => void;
     /**
      * Whether focus over the collection is nominal rather than real.

package/dist/composables/use-list-keyboard.js

@@ -278,14 +278,13 @@ var useListKeyboard = (options) => {
 					return;
 				}
 				case "Enter":
-					if (focused == null || toValue(options.disallowActivation)) return;
-					options.onAction?.(focused);
-					event.preventDefault();
-					return;
 				case " ":
 					if (focused == null || toValue(options.disallowActivation)) return;
 					if (selection.selectionMode.value === "none") options.onAction?.(focused);
-					else selection.select(focused, { isShiftPressed: event.shiftKey });
+					else {
+						selection.select(focused, { isShiftPressed: event.shiftKey });
+						if (event.key === "Enter") options.onAction?.(focused);
+					}
 					event.preventDefault();
 					return;
 				default: return;

package/dist/composables/use-measured-height.d.ts

@@ -10,16 +10,24 @@ export interface UseMeasuredHeightReturn {
  * the content *wants*: a toast that is not frontmost is clipped to the front one's height, so its
  * own border box has already been overwritten by the very number this feeds.
  *
- * Two narrowings against the usual shape, both measured rather than assumed:
+ * That overwriting is also why the height is unset before every reading. The value this produces
+ * is what decides the element's own `height`, so reading it back off a sized box would return the
+ * previous answer for ever — a toast whose content is replaced in place would keep the height of
+ * the content it no longer holds.
  *
- * 1. It measures directly on attach and then lets the observer take over, rather than relying on
- *    the observer's first notification alone. jsdom *has* a `ResizeObserver` constructor but it
- *    never notifies anything, so an observer-only reading is permanently absent there — and this
- *    value drives an inline custom property that decides layout, which is exactly the kind of
- *    thing a fast suite should be able to assert. In a real browser the two readings agree, and
- *    the repeat is dropped, so the only difference is that the first one lands a frame earlier.
- * 2. React also watches `aria-hidden` with a `MutationObserver`. That attribute never reaches the
- *    DOM there — `react-aria-components` filters it off the toast — so the observer is dead code,
- *    and this package renders no `aria-hidden` for it to watch either.
+ * Three narrowings against the usual shape, each measured rather than assumed:
+ *
+ * 1. It measures directly on attach and then lets the observers take over, rather than relying on
+ *    a first notification alone. jsdom *has* a `ResizeObserver` constructor but it never notifies
+ *    anything, so an observer-only reading is permanently absent there — and this value drives an
+ *    inline custom property that decides layout, which is exactly the kind of thing a fast suite
+ *    should be able to assert. In a real browser the two readings agree, and the repeat is
+ *    dropped, so the only difference is that the first one lands a frame earlier.
+ * 2. Only the inline axis of a resize counts. The block axis is transitioned by the caller, and a
+ *    reading forces layout twice to unset and restore the height — so reacting to it would
+ *    re-measure on every frame of that animation and retarget the very transition it is watching.
+ * 3. Content is watched separately, because a box whose height is already forced does not resize
+ *    when what is inside it changes. Attributes are left out of that watch: the caller writes its
+ *    state onto this element, and none of it changes what the content wants.
  */
 export declare const useMeasuredHeight: (elementRef: MaybeRefOrGetter<HTMLElement | null | undefined>) => UseMeasuredHeightReturn;

package/dist/composables/use-measured-height.js

@@ -7,36 +7,74 @@ import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 * the content *wants*: a toast that is not frontmost is clipped to the front one's height, so its
 * own border box has already been overwritten by the very number this feeds.
 *
-* Two narrowings against the usual shape, both measured rather than assumed:
+* That overwriting is also why the height is unset before every reading. The value this produces
+* is what decides the element's own `height`, so reading it back off a sized box would return the
+* previous answer for ever — a toast whose content is replaced in place would keep the height of
+* the content it no longer holds.
 *
-* 1. It measures directly on attach and then lets the observer take over, rather than relying on
-*    the observer's first notification alone. jsdom *has* a `ResizeObserver` constructor but it
-*    never notifies anything, so an observer-only reading is permanently absent there — and this
-*    value drives an inline custom property that decides layout, which is exactly the kind of
-*    thing a fast suite should be able to assert. In a real browser the two readings agree, and
-*    the repeat is dropped, so the only difference is that the first one lands a frame earlier.
-* 2. React also watches `aria-hidden` with a `MutationObserver`. That attribute never reaches the
-*    DOM there — `react-aria-components` filters it off the toast — so the observer is dead code,
-*    and this package renders no `aria-hidden` for it to watch either.
+* Three narrowings against the usual shape, each measured rather than assumed:
+*
+* 1. It measures directly on attach and then lets the observers take over, rather than relying on
+*    a first notification alone. jsdom *has* a `ResizeObserver` constructor but it never notifies
+*    anything, so an observer-only reading is permanently absent there — and this value drives an
+*    inline custom property that decides layout, which is exactly the kind of thing a fast suite
+*    should be able to assert. In a real browser the two readings agree, and the repeat is
+*    dropped, so the only difference is that the first one lands a frame earlier.
+* 2. Only the inline axis of a resize counts. The block axis is transitioned by the caller, and a
+*    reading forces layout twice to unset and restore the height — so reacting to it would
+*    re-measure on every frame of that animation and retarget the very transition it is watching.
+* 3. Content is watched separately, because a box whose height is already forced does not resize
+*    when what is inside it changes. Attributes are left out of that watch: the caller writes its
+*    state onto this element, and none of it changes what the content wants.
 */
 var useMeasuredHeight = (elementRef) => {
 	const height = shallowRef(void 0);
-	let observer;
+	let resizeObserver;
+	let contentObserver;
+	let frame;
 	const detach = () => {
-		observer?.disconnect();
-		observer = void 0;
+		resizeObserver?.disconnect();
+		resizeObserver = void 0;
+		contentObserver?.disconnect();
+		contentObserver = void 0;
+		if (frame !== void 0 && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+		frame = void 0;
 	};
 	watch(() => toValue(elementRef) ?? null, (element) => {
 		detach();
 		if (!element) return;
 		const measure = () => {
+			const forced = element.style.height;
+			element.style.height = "auto";
 			const next = element.scrollHeight;
+			element.style.height = forced;
 			if (height.value !== next) height.value = next;
 		};
+		const scheduleMeasure = () => {
+			if (frame !== void 0 || typeof requestAnimationFrame !== "function") return;
+			frame = requestAnimationFrame(() => {
+				frame = void 0;
+				measure();
+			});
+		};
 		measure();
+		if (typeof MutationObserver === "function") {
+			contentObserver = new MutationObserver(scheduleMeasure);
+			contentObserver.observe(element, {
+				characterData: true,
+				childList: true,
+				subtree: true
+			});
+		}
 		if (typeof ResizeObserver === "undefined") return;
-		observer = new ResizeObserver(measure);
-		observer.observe(element);
+		let lastWidth = element.getBoundingClientRect().width;
+		resizeObserver = new ResizeObserver((entries) => {
+			const width = entries[0]?.contentRect.width;
+			if (width === void 0 || Math.abs(width - lastWidth) < .5) return;
+			lastWidth = width;
+			scheduleMeasure();
+		});
+		resizeObserver.observe(element);
 	}, {
 		flush: "post",
 		immediate: true

package/dist/composables/use-overlay-position.js

@@ -1,8 +1,11 @@
 import { calculatePosition, getRect, translateRTL } from "../utils/position.js";
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-overlay-position.ts
-/** Overlays sit above the page; matched to what the React build renders. */
-var OVERLAY_Z_INDEX = 1e5;
+/**
+* Overlays sit above the page. The value lives in the stylesheet so the modal-level surfaces,
+* which can only declare theirs in CSS, resolve to the same level as this inline one.
+*/
+var OVERLAY_Z_INDEX = "var(--rp-z-index-overlay)";
 /** Whether an element or one of its descendants holds focus. */
 var isFocusWithin = (element) => {
 	const active = document.activeElement;
@@ -212,12 +215,12 @@ var useOverlayPosition = (options) => {
 				"max-height": "100vh",
 				position: "fixed",
 				top: "0px",
-				"z-index": String(OVERLAY_Z_INDEX)
+				"z-index": OVERLAY_Z_INDEX
 			};
 			const style = {
 				"max-height": `${resolved.maxHeight}px`,
 				position: "absolute",
-				"z-index": String(OVERLAY_Z_INDEX)
+				"z-index": OVERLAY_Z_INDEX
 			};
 			for (const [key, value] of Object.entries(resolved.position)) style[key] = `${value}px`;
 			style["--trigger-anchor-point"] = `${resolved.triggerAnchorPoint.x}px ${resolved.triggerAnchorPoint.y}px`;

package/dist/composables/use-select-state.d.ts

@@ -61,6 +61,14 @@ export interface UseSelectStateReturn<T> extends MenuTriggerState, FormValidatio
     /** The value a form reset goes back to. */
     defaultValue: ComputedRef<SelectedValue>;
     setValue: (value: SelectedValue) => void;
+    /**
+     * Empties the selection.
+     *
+     * Not `selection.clearSelection()`: a single select sets `disallowEmptySelection`, which is
+     * what stops a press on the chosen option from un-choosing it — and which makes that call a
+     * no-op in the one mode most selects are in.
+     */
+    clearValue: () => void;
     /** The first chosen key, which is the whole value when single. */
     selectedKey: ComputedRef<CollectionKey | null>;
     selectedItems: ComputedRef<SelectedItem<T>[]>;

package/dist/composables/use-select-state.js

@@ -99,6 +99,10 @@ var useSelectState = (options) => {
 			return Array.isArray(current) && current.length === 0 ? null : current;
 		}
 	});
+	const clearValue = () => {
+		setValue(null);
+		validation.commitValidation();
+	};
 	const selection = useSelectionManager({
 		collection,
 		disabledBehavior: options.disabledBehavior,
@@ -132,6 +136,7 @@ var useSelectState = (options) => {
 	const canOpen = () => collection.size.value !== 0 || Boolean(toValue(options.allowsEmptyCollection));
 	return {
 		...validation,
+		clearValue,
 		close: trigger.close,
 		collection,
 		defaultValue,

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

@@ -10,6 +10,13 @@ export interface UseSelectOptions {
     ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
     ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
     onFocusChange?: (isFocused: boolean) => void;
+    /**
+     * Whether a clear button is composed into the select, which is what opens the trigger's
+     * Backspace/Delete shortcut. Read at event time, so registering one never costs a render.
+     */
+    hasClearButton?: () => boolean;
+    /** Empties the selection. Called by the shortcut above. */
+    onClear?: () => void;
 }
 /** Attributes the trigger element renders, beside its own class and `data-slot`. */
 export type SelectTriggerAttributes = Record<string, string | number | boolean | undefined>;

package/dist/composables/use-select.js

@@ -83,6 +83,12 @@ var useSelect = (options, state) => {
 				return;
 			}
 		}
+		if ((event.key === "Backspace" || event.key === "Delete") && !state.isOpen.value && options.hasClearButton?.() && state.selectedItems.value.length > 0) {
+			event.preventDefault();
+			state.clearValue();
+			options.onClear?.();
+			return;
+		}
 		typeahead.onKeydown(event);
 		if (event.defaultPrevented) return;
 		trigger.responder.handlers.value.onKeydown?.(event);

package/dist/composables/use-textarea-autosize.d.ts

@@ -0,0 +1,55 @@
+import type { MaybeRefOrGetter } from "vue";
+export interface UseTextareaAutosizeOptions {
+    element: MaybeRefOrGetter<HTMLTextAreaElement | null | undefined>;
+    /** When false, inline height and overflow are cleared and the native `rows` height is used. */
+    enabled: MaybeRefOrGetter<boolean | undefined>;
+    /** Floor, in rows. Ignored when `enabled` is false. */
+    minRows: MaybeRefOrGetter<number | undefined>;
+    /** Ceiling, in rows. Absent, the control grows without a cap. Ignored when `enabled` is false. */
+    maxRows: MaybeRefOrGetter<number | undefined>;
+    /**
+     * Text held somewhere the element cannot be read from. Reading `element.value` is not
+     * reactive, so a caller that does not already remeasure when its own text moves passes
+     * the value it holds here.
+     */
+    content?: MaybeRefOrGetter<unknown>;
+}
+export interface UseTextareaAutosizeSyncOptions {
+    /**
+     * From `input` only. A caret at the end then keeps the last line's padding in view.
+     * Layout remeasures omit this so a scroll the user made is not stolen.
+     */
+    fromInput?: boolean;
+}
+export interface UseTextareaAutosizeReturn {
+    /** Measure now. Needed from `input`, where the DOM already holds the next text. */
+    sync: (options?: UseTextareaAutosizeSyncOptions) => void;
+}
+/**
+ * Keep a textarea as tall as its content, optionally between `minRows` and `maxRows`.
+ *
+ * The caller has to invoke {@link UseTextareaAutosizeReturn.sync} from `input`: reading
+ * `element.value` inside a getter is not a reactive dependency, and waiting for a post-flush
+ * watch would size against the previous stroke. `minRows`, `maxRows` and {@link
+ * UseTextareaAutosizeOptions.content} go through a post-flush watch instead.
+ *
+ * Observers attach only while autosize is on. Native `resize` writes inline `width` and
+ * `height` as the pointer drags; an observer that stayed attached with autosize off would
+ * `clear` that height on every width change and fight the handle.
+ *
+ * Writing `style.height` is itself a size change, so the observer has to discriminate width
+ * or it would loop. That makes the seed load-bearing: it is read from the same content box
+ * `contentRect` reports, because a seed off by the border makes the first delivery look like
+ * a width change, and skipping that first delivery instead loses a real one — `sync` after
+ * `observe` can make a scrollbar appear, and the callback reporting the narrower width is
+ * the only notice of it.
+ *
+ * An inline height also hides height-only metric changes from the observer — a webfont that
+ * lands after first paint, or `.rp-textarea`'s `@media (width >= 40rem)` type/padding switch
+ * on a fixed-width control. Those go through `document.fonts` and `window` `resize`. Used
+ * metrics that do not move the box (`--rp-leading`, Firefox text-only zoom) never notify at
+ * all, which is why every field settles with `overflow-y: auto` — a stale height then
+ * scrolls rather than clips. A leftover clip on a field no cap clamped is the observer
+ * backstop for same-width box changes such as padding, which do notify.
+ */
+export declare const useTextareaAutosize: (options: UseTextareaAutosizeOptions) => UseTextareaAutosizeReturn;

package/dist/composables/use-textarea-autosize.js

@@ -0,0 +1,189 @@
+import { onScopeDispose, toValue, watch } from "vue";
+//#region src/composables/use-textarea-autosize.ts
+var px = (value) => {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+* A used line-height, not the keyword.
+*
+* `normal` is a computed value the platform leaves unresolved, and a row count in `normal`s is
+* not a length. Font-size times 1.2 is the usual stand-in, and is what a missing font-size falls
+* back through as well.
+*/
+var lineHeightOf = (style) => {
+	const raw = style.lineHeight;
+	const parsed = Number.parseFloat(raw);
+	if (raw !== "normal" && Number.isFinite(parsed)) return parsed;
+	const fontSize = Number.parseFloat(style.fontSize);
+	return Number.isFinite(fontSize) ? fontSize * 1.2 : 16;
+};
+var positive = (value) => value !== void 0 && value > 0 ? value : void 0;
+var clear = (element) => {
+	element.style.height = "";
+	element.style.overflowY = "";
+	element.style.scrollPaddingBottom = "";
+};
+/**
+* Content-box width, the same box ResizeObserver reports as `contentRect`.
+*
+* `clientWidth` is the padding box minus the scrollbar, so subtracting inline
+* padding lands on the content box without mixing in the border the way
+* `getBoundingClientRect` does.
+*/
+var contentWidthOf = (element) => {
+	const style = getComputedStyle(element);
+	return element.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+};
+/**
+* Size a textarea to its content, clamped to a row range.
+*
+* Measured on the live element rather than a hidden clone of it: a clone is a second node in
+* the document to keep in step, and the live element already has the font, the padding and
+* the wrapping width. Height is set to `auto` for the read so a previous inline height cannot
+* pin `scrollHeight` to itself, then written back as a pixel height.
+*
+* `scrollHeight` includes padding and not the border. The reset is `border-box`, so the height
+* that is written has to put the border back or the last line is clipped by that much.
+*
+* The bottom-pin is input-only. Typing at the end has to bring `padding-bottom` into view;
+* a width, font or row-range remeasure must not yank a scroll the user just made.
+*
+* @returns Whether `maxRows` clamped the height, which is the one case where a field left
+* scrolling its own content is doing what it was asked to.
+*/
+var measure = (element, minRows, maxRows, fromInput) => {
+	const style = getComputedStyle(element);
+	const paddingY = px(style.paddingTop) + px(style.paddingBottom);
+	const borderY = px(style.borderTopWidth) + px(style.borderBottomWidth);
+	const lineHeight = lineHeightOf(style);
+	const borderBox = style.boxSizing === "border-box";
+	const extras = borderBox ? paddingY + borderY : 0;
+	const min = positive(minRows);
+	const max = positive(maxRows);
+	const paddingBottom = px(style.paddingBottom);
+	const scrollTop = element.scrollTop;
+	const atEnd = element.selectionStart === element.value.length && element.selectionEnd === element.value.length;
+	if (min !== void 0) element.rows = min;
+	element.style.height = "auto";
+	element.style.overflowY = "hidden";
+	let height = element.scrollHeight;
+	if (borderBox) height += borderY;
+	else height -= paddingY;
+	if (min !== void 0) height = Math.max(height, min * lineHeight + extras);
+	let capped = false;
+	if (max !== void 0) {
+		const cap = max * lineHeight + extras;
+		if (height > cap) {
+			height = cap;
+			capped = true;
+		}
+	}
+	element.style.height = `${height}px`;
+	element.style.overflowY = "auto";
+	element.style.scrollPaddingBottom = `${paddingBottom}px`;
+	if (fromInput && capped && atEnd) element.scrollTop = element.scrollHeight;
+	else element.scrollTop = scrollTop;
+	return capped;
+};
+/**
+* Keep a textarea as tall as its content, optionally between `minRows` and `maxRows`.
+*
+* The caller has to invoke {@link UseTextareaAutosizeReturn.sync} from `input`: reading
+* `element.value` inside a getter is not a reactive dependency, and waiting for a post-flush
+* watch would size against the previous stroke. `minRows`, `maxRows` and {@link
+* UseTextareaAutosizeOptions.content} go through a post-flush watch instead.
+*
+* Observers attach only while autosize is on. Native `resize` writes inline `width` and
+* `height` as the pointer drags; an observer that stayed attached with autosize off would
+* `clear` that height on every width change and fight the handle.
+*
+* Writing `style.height` is itself a size change, so the observer has to discriminate width
+* or it would loop. That makes the seed load-bearing: it is read from the same content box
+* `contentRect` reports, because a seed off by the border makes the first delivery look like
+* a width change, and skipping that first delivery instead loses a real one — `sync` after
+* `observe` can make a scrollbar appear, and the callback reporting the narrower width is
+* the only notice of it.
+*
+* An inline height also hides height-only metric changes from the observer — a webfont that
+* lands after first paint, or `.rp-textarea`'s `@media (width >= 40rem)` type/padding switch
+* on a fixed-width control. Those go through `document.fonts` and `window` `resize`. Used
+* metrics that do not move the box (`--rp-leading`, Firefox text-only zoom) never notify at
+* all, which is why every field settles with `overflow-y: auto` — a stale height then
+* scrolls rather than clips. A leftover clip on a field no cap clamped is the observer
+* backstop for same-width box changes such as padding, which do notify.
+*/
+var useTextareaAutosize = (options) => {
+	let observer;
+	let lastWidth = NaN;
+	/** So turning autosize off does not wipe a height the native resize handle wrote. */
+	let applied = false;
+	/** Whether `maxRows` clamped the last measure, which is when a clip is meant to be there. */
+	let capped = false;
+	const sync = (syncOptions) => {
+		const element = toValue(options.element) ?? null;
+		const enabled = Boolean(toValue(options.enabled));
+		if (!element) return;
+		if (!enabled) {
+			if (applied) {
+				clear(element);
+				applied = false;
+			}
+			return;
+		}
+		capped = measure(element, toValue(options.minRows), toValue(options.maxRows), Boolean(syncOptions?.fromInput));
+		applied = true;
+	};
+	const onMetrics = () => {
+		sync();
+	};
+	const metrics = (bind) => {
+		if (typeof document === "undefined") return;
+		window[bind]("resize", onMetrics);
+		document.fonts?.[bind]("loadingdone", onMetrics);
+	};
+	const detach = () => {
+		observer?.disconnect();
+		observer = void 0;
+		metrics("removeEventListener");
+	};
+	const observe = (element) => {
+		detach();
+		if (typeof ResizeObserver !== "undefined") {
+			lastWidth = contentWidthOf(element);
+			observer = new ResizeObserver((entries) => {
+				const width = entries[0]?.contentRect.width;
+				if (width === void 0) return;
+				const widthChanged = width !== lastWidth;
+				lastWidth = width;
+				if (widthChanged) {
+					sync();
+					return;
+				}
+				if (!capped && element.scrollHeight > element.clientHeight) sync();
+			});
+			observer.observe(element);
+		}
+		metrics("addEventListener");
+	};
+	watch([() => toValue(options.element) ?? null, () => Boolean(toValue(options.enabled))], ([element, enabled]) => {
+		detach();
+		if (!element) return;
+		if (enabled) observe(element);
+		sync();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch([
+		() => toValue(options.minRows),
+		() => toValue(options.maxRows),
+		() => toValue(options.content)
+	], () => {
+		sync();
+	}, { flush: "post" });
+	onScopeDispose(detach, true);
+	return { sync };
+};
+//#endregion
+export { useTextareaAutosize };