ropav 0.11.1 → 0.12.1

package/dist/composables/use-form-validation-state.js

@@ -20,6 +20,12 @@ var CUSTOM_VALIDITY_STATE = Object.freeze({
 	customError: true,
 	valid: false
 });
+/** A required field with nothing in it. What the browser reports under `"native"`. */
+var MISSING_VALIDITY_STATE = Object.freeze({
+	...VALID_VALIDITY_STATE,
+	valid: false,
+	valueMissing: true
+});
 var DEFAULT_VALIDATION_RESULT = Object.freeze({
 	isInvalid: false,
 	validationDetails: VALID_VALIDITY_STATE,
@@ -68,6 +74,41 @@ var getNativeValidation = (element) => {
 		validationErrors: element.validationMessage ? [element.validationMessage] : []
 	};
 };
+var missingValueMessages = /* @__PURE__ */ new Map();
+/**
+* What the browser would say about an empty control of this kind.
+*
+* Read off a detached probe rather than translated here. The platform already holds the sentence,
+* in the *browser's* locale — which is the locale a validation message belongs in, since it sits
+* beside the browser's own — and it is the one the same field would report under `"native"`.
+*
+* Empty on a server, where the field cannot have been revealed yet and so has nothing to say.
+*/
+var missingValueMessage = (kind) => {
+	const cached = missingValueMessages.get(kind);
+	if (cached !== void 0) return cached;
+	if (typeof document === "undefined") return "";
+	let probe;
+	if (kind === "select") probe = document.createElement("select");
+	else {
+		const input = document.createElement("input");
+		if (kind !== "text") {
+			input.type = kind;
+			input.name = "probe";
+		}
+		probe = input;
+	}
+	probe.required = true;
+	const message = probe.validationMessage;
+	missingValueMessages.set(kind, message);
+	return message;
+};
+/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
+var isValueMissing = (value) => {
+	if (value == null || value === "" || value === false) return true;
+	if (Array.isArray(value)) return value.length === 0;
+	return typeof value === "number" && Number.isNaN(value);
+};
 /**
 * React splits this in two — `FormValidationContext` in react-stately for the errors,
 * `FormContext` in react-aria-components for the behaviour — only because the two live in
@@ -109,15 +150,19 @@ var isEqualValidation = (a, b) => {
 * Decide what a field's validation currently says, ported from React Aria's
 * `packages/react-stately/src/form/useFormValidationState.ts` (react-stately 3.49.0).
 *
-* Knows nothing about the DOM — `useFormValidation` is what connects this to a real input.
-* Four sources feed it, in a fixed order of precedence:
+* Holds no element of its own — `useFormValidation` is what connects this to a real input.
+* Five sources feed it, in a fixed order of precedence:
 *
 * ```
-* realtime        = controlled ?? server ?? client ?? builtin ?? valid
+* realtime        = controlled ?? server ?? client ?? required ?? builtin ?? valid
 * display(native) = controlled ?? server ?? committed
-* display(aria)   = controlled ?? server ?? client ?? builtin ?? committed
+* display(aria)   = controlled ?? server ?? client ?? required* ?? builtin ?? committed
 * ```
 *
+* `required` is the missing-value rule, and it is there for `"aria"` alone: under `"native"` the
+* control carries the attribute and the browser reaches the verdict itself. The `*` is the reveal
+* — it waits for a commit or a submit, so a form does not arrive with every required field red.
+*
 * `realtimeValidation` is what the field pushes onto the input through `setCustomValidity`,
 * so the browser blocks submission the moment the value stops being acceptable.
 * `displayValidation` is what the user reads, and under `"native"` it moves only on commit —
@@ -157,6 +202,17 @@ var useFormValidationState = (options) => {
 		const result = toValue(options.builtinValidation);
 		return result && !result.validationDetails.valid ? result : null;
 	});
+	const requiredError = computed(() => {
+		if (validationBehavior.value !== "aria") return null;
+		if (!toValue(options.isRequired)) return null;
+		if (!(options.isEmpty ?? isValueMissing)(toValue(options.value))) return null;
+		const message = missingValueMessage(options.requiredControl ?? "text");
+		return {
+			isInvalid: true,
+			validationDetails: MISSING_VALIDITY_STATE,
+			validationErrors: message ? [message] : []
+		};
+	});
 	const serverErrors = computed(() => form?.validationErrors.value ?? {});
 	const serverErrorMessages = computed(() => {
 		const name = toValue(options.name);
@@ -172,11 +228,22 @@ var useFormValidationState = (options) => {
 	const nextNative = shallowRef(DEFAULT_VALIDATION_RESULT);
 	/** What a commit has already revealed. */
 	const committed = shallowRef(DEFAULT_VALIDATION_RESULT);
+	/**
+	* Whether the field has been asked to prove itself yet.
+	*
+	* A required field is empty from its first render, and `"aria"` shows a client error the moment
+	* it appears — so without this a form would arrive with every required field already red. It
+	* gates the missing-value verdict alone; a `validate` the caller wrote still reports as it types.
+	*/
+	const isRevealed = shallowRef(false);
+	watch(() => form?.submitCount?.value ?? 0, (count) => {
+		if (count > 0) isRevealed.value = true;
+	});
 	let isCommitQueued = false;
-	const realtimeValidation = computed(() => controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? DEFAULT_VALIDATION_RESULT);
+	const realtimeValidation = computed(() => controlledError.value ?? serverError.value ?? clientError.value ?? requiredError.value ?? builtinValidation.value ?? DEFAULT_VALIDATION_RESULT);
 	const displayValidation = computed(() => {
 		if (validationBehavior.value === "native") return controlledError.value ?? serverError.value ?? committed.value;
-		return controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? committed.value;
+		return controlledError.value ?? serverError.value ?? clientError.value ?? (isRevealed.value ? requiredError.value : null) ?? builtinValidation.value ?? committed.value;
 	});
 	const setCommitted = (result) => {
 		if (!isEqualValidation(result, committed.value)) committed.value = result;
@@ -184,6 +251,7 @@ var useFormValidationState = (options) => {
 	return {
 		commitValidation: () => {
 			isServerErrorCleared.value = true;
+			isRevealed.value = true;
 			if (validationBehavior.value !== "native" || isCommitQueued) return;
 			isCommitQueued = true;
 			nextTick(() => {
@@ -196,6 +264,7 @@ var useFormValidationState = (options) => {
 		realtimeValidation,
 		resetValidation: () => {
 			setCommitted(DEFAULT_VALIDATION_RESULT);
+			isRevealed.value = false;
 			isCommitQueued = false;
 			isServerErrorCleared.value = true;
 		},
@@ -210,4 +279,4 @@ var useFormValidationState = (options) => {
 	};
 };
 //#endregion
-export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, mergeValidation, provideFormContext, useFormContext, useFormValidationState };
+export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, MISSING_VALIDITY_STATE, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, isValueMissing, mergeValidation, missingValueMessage, provideFormContext, useFormContext, useFormValidationState };

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-number-field-state.js

@@ -87,6 +87,7 @@ var useNumberFieldState = (options = {}) => {
 	inputValue.value = format(numberValueState.value);
 	const validation = useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => toValue(options.name),
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),

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-radio-group-state.js

@@ -38,7 +38,9 @@ var useRadioGroupState = (options = {}) => {
 	const lastFocused = shallowRef(null);
 	const validation = useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired,
 		name: () => toValue(options.name),
+		requiredControl: "radio",
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),
 		value: () => selectedValue.value

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

@@ -40,6 +40,8 @@ export interface UseSelectStateOptions<T> {
     /** @default "all" */
     disabledBehavior?: MaybeRefOrGetter<DisabledBehavior | undefined>;
     isInvalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the field has to hold a value. Enforced by the validation state under `"aria"`. */
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
     validate?: MaybeRefOrGetter<ValidationFunction<SelectedValue> | undefined>;
     validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
     name?: MaybeRefOrGetter<string | undefined>;
@@ -61,6 +63,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

@@ -91,7 +91,9 @@ var useSelectState = (options) => {
 	};
 	const validation = useFormValidationState({
 		isInvalid: options.isInvalid,
+		isRequired: options.isRequired,
 		name: options.name,
+		requiredControl: "select",
 		validate: options.validate,
 		validationBehavior: options.validationBehavior,
 		value: () => {
@@ -99,6 +101,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 +138,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-text-field.js

@@ -47,6 +47,7 @@ var useTextField = (options = {}) => {
 	const isRequired = computed(() => Boolean(toValue(options.isRequired)));
 	const validation = options.validationState ?? useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => toValue(options.name),
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-toast-region.d.ts

@@ -9,6 +9,10 @@ export interface UseToastRegionOptions {
     ariaLabel?: MaybeRefOrGetter<string | undefined>;
     /** The region element, which is also what the toasts are looked up inside. */
     elementRef: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /** Key combination that moves focus to the region. An empty list turns it off. */
+    hotkey?: MaybeRefOrGetter<readonly string[] | undefined>;
+    /** Forces the stack open regardless of pointer or focus. */
+    isExpanded?: MaybeRefOrGetter<boolean | undefined>;
     /** Stops every visible toast's clock. */
     onPauseAll: () => void;
     /** Restarts every visible toast's clock. */
@@ -22,17 +26,21 @@ export interface ToastRegionAttrs {
     tabindex: -1;
 }
 export interface UseToastRegionReturn {
+    /** Whether the stack should be opened out, so every toast shows at its own height. */
+    isExpanded: ComputedRef<boolean>;
     onFocusin: (event: FocusEvent) => void;
     onFocusout: (event: FocusEvent) => void;
     onPointerenter: (event: PointerEvent) => void;
     onPointerleave: () => void;
+    /** Reasserts hover when the stack moves under a cursor that has not itself moved. */
+    onPointermove: (event: PointerEvent) => void;
     regionAttrs: ComputedRef<ToastRegionAttrs>;
 }
 /**
  * The behaviour and accessibility wiring of the toast region, ported from react-aria's
  * `useToastRegion`.
  *
- * Three jobs, and they are only in one composable because they share the same state:
+ * Four jobs, and they are only in one composable because they share the same state:
  *
  * 1. **Naming.** A landmark region labelled with how many notifications it holds.
  * 2. **Pausing.** Hover *or* focus anywhere inside stops every visible toast's clock, so a toast
@@ -41,13 +49,19 @@ export interface UseToastRegionReturn {
  *    rather than dropping it on `<body>` — except under a pointer, where focus is pushed back out
  *    of the region, because a pointer user who is no longer hovering would otherwise hold every
  *    remaining clock paused by the focus they did not ask for.
+ * 4. **Reaching it.** A key combination that moves focus to the region from anywhere, because a
+ *    toast is announced where the user is not and tabbing to it means tabbing past everything
+ *    between. The listener is on the document rather than the region: the region is only in the
+ *    DOM while it holds a toast, so a listener of its own could never be the thing that reaches
+ *    it first.
  *
- * One narrowing, recorded rather than hidden: upstream also registers the region with a
+ * One narrowing, recorded rather than hidden: react-aria also registers the region with a
  * document-level landmark manager, which is what makes F6 cycle between landmarks. Nothing else
  * in react-aria registers one, so with a single registrant F6 has nowhere to go — the rendered
- * DOM is identical either way, and toasts are still reachable by Tab.
+ * DOM is identical either way, and toasts are still reachable by Tab. That is an argument about
+ * cycling between landmarks and not about reaching this one, which is why job 4 stands beside it.
  *
- * One simplification: upstream runs focus-within and raw focus as two channels, because its
+ * One simplification: react-aria runs focus-within and raw focus as two channels, because its
  * focus-within fires once on entry and it needs every change. `focusin` and `focusout` bubble and
  * fire on every change already, so one pair answers both questions.
  */