ropav 0.12.0 → 0.12.2

package/AGENTS.md

@@ -0,0 +1,150 @@
+# Writing Ropav code
+
+Ropav components are compound: a family root provides context, and named parts arrange inside it.
+The arrangement is the API, and it is not guessable from the names. This file is the short list of
+rules that go wrong most often. For a worked arrangement and the props of every family, fetch
+<https://ropav.netlify.app/llms-full.txt> — one file, the whole package.
+
+## Importing
+
+```ts
+import { Button, Select, SelectPopover } from "ropav";
+```
+
+The published package also carries one subpath per family — `import { Button } from "ropav/button"` —
+so a bundler drops what is never imported. The stylesheet is a separate import:
+
+```ts
+import "ropav/styles/bundled.css";
+```
+
+Every component takes `class`, `aria-label`, `aria-labelledby` and `aria-describedby`. Props are
+camelCase in the types and kebab-case in a template: `itemTextValue` is written `item-text-value`.
+
+## The rules
+
+**1. A part only works inside its root.** Contexts are strict, so a part rendered outside its
+family throws during setup rather than rendering something degraded. There is no standalone
+`SelectTrigger`.
+
+**2. Collections arrive as data, not as children.** `Select` takes a required `items` array — it
+does not read its options by walking children, because a closed select has rendered none.
+`item-text-value` is the string typeahead matches; `item-key` is the identity.
+
+```vue
+<Select :item-text-value="(city) => city.name" :items="cities" placeholder="Pick a city">
+  <Label>Destination</Label>
+  <SelectTrigger>
+    <SelectValue />
+    <SelectIndicator />
+  </SelectTrigger>
+  <SelectPopover>
+    <ListBox>
+      <ListBoxItem v-for="city in cities" :id="city.id" :key="city.id" :text-value="city.name">
+        {{ city.name }}
+        <ListBoxItemIndicator />
+      </ListBoxItem>
+    </ListBox>
+  </SelectPopover>
+</Select>
+```
+
+**3. Overlays take a positional trigger.** `Modal`, `Popover`, `Dropdown`, `Drawer` and
+`AlertDialog` make their *first child* the trigger. There is no trigger slot.
+
+```vue
+<Modal>
+  <Button>Open</Button>
+  <ModalBackdrop>
+    <ModalContainer>
+      <ModalDialog>
+        <ModalHeader>
+          <ModalHeading>Delete workspace</ModalHeading>
+        </ModalHeader>
+        <ModalBody>This cannot be undone.</ModalBody>
+      </ModalDialog>
+    </ModalContainer>
+  </ModalBackdrop>
+</Modal>
+```
+
+**4. The part holding the state is not always the root.** `Table` takes `class` and `variant` and
+nothing else; `TableContent` owns `aria-label`, `selection-mode`, `v-model:selected-keys` and
+`v-model:sort-descriptor`. Putting them on `Table` compiles and does nothing.
+
+```vue
+<Table>
+  <TableScrollContainer>
+    <TableContent aria-label="Members" selection-mode="multiple">
+      <TableHeader>
+        <TableColumn id="name" is-row-header>Member</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow id="1">
+          <TableCell>Ada Lovelace</TableCell>
+        </TableRow>
+      </TableBody>
+    </TableContent>
+  </TableScrollContainer>
+</Table>
+```
+
+**5. An indicator belongs to its item.** `TabsIndicator` goes inside each `TabsTab`, not beside the
+list. Same for `ListBoxItemIndicator` inside `ListBoxItem` and `MenuItemIndicator` inside
+`MenuItem`.
+
+```vue
+<Tabs>
+  <TabsListContainer>
+    <TabsList aria-label="Views">
+      <TabsTab id="all">
+        All
+        <TabsIndicator />
+      </TabsTab>
+    </TabsList>
+  </TabsListContainer>
+  <TabsPanel id="all">Everything.</TabsPanel>
+</Tabs>
+```
+
+**6. Menu parts are shared.** There is no `DropdownItem` export — compose `MenuItem` inside
+`DropdownMenu`. The stories alias the name for brevity, so markup copied from one will not compile.
+
+```vue
+<Dropdown>
+  <Button>Actions</Button>
+  <DropdownPopover>
+    <DropdownMenu>
+      <MenuItem id="rename" text-value="Rename">
+        <Label>Rename</Label>
+      </MenuItem>
+    </DropdownMenu>
+  </DropdownPopover>
+</Dropdown>
+```
+
+**7. `Menu` is the open list; `Dropdown` is that menu in a popover.** A bare `Menu` needs its own
+`Surface` to have a background and a border. A `Dropdown` brings one.
+
+**8. Every collection item needs an `id`**, and a `text-value` whenever its content is not plain
+text. `id` is what a selection or an action event reports; `text-value` is what typeahead matches.
+
+## Restyling
+
+Every component takes a `class`, and every colour, radius and curve is a custom property, so a
+change is a CSS change rather than a fork. State is published on data attributes — `data-hovered`,
+`data-pressed`, `data-selected`, `data-focus-visible` — which is how a single state is retuned
+without a wrapper.
+
+```css
+.thing {
+  background-color: var(--rp-accent);
+  color: var(--rp-accent-foreground);
+}
+```
+
+## Where to look next
+
+- <https://ropav.netlify.app/llms-full.txt> — every family's arrangement and props, in one file.
+- <https://ropav.netlify.app/llms.txt> — the index, when you want a specific page.
+- <https://ropav.netlify.app/patterns/> — whole screen fragments to copy.

package/README.md

@@ -5,7 +5,11 @@ A Vue 3 component library built on [Vue Vapor](https://github.com/vuejs/core-vap
 [`ropav`](https://www.npmjs.com/package/ropav).
 
 **[Documentation](https://ropav.netlify.app)** · [Components](https://ropav.netlify.app/components/)
-· [Theming](https://ropav.netlify.app/theming/) · [Storybook](https://ropav-storybook.netlify.app)
+· [Patterns](https://ropav.netlify.app/patterns/) · [Theming](https://ropav.netlify.app/theming/)
+· [Storybook](https://ropav-storybook.netlify.app)
+
+Writing this with a coding agent: point it at [`AGENTS.md`](./AGENTS.md), which ships in the
+package, or at [llms-full.txt](https://ropav.netlify.app/llms-full.txt) for every component at once.
 
 > Ropav is a port of [HeroUI v3](https://github.com/heroui-inc/heroui) to Vue Vapor: the style layer is
 > vendored from `@heroui/styles@3.2.4`, the behaviour layer is re-implemented from React Aria.

package/dist/components/breadcrumbs/breadcrumbs-item.js

@@ -54,6 +54,8 @@ var breadcrumbs_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			immediate: true
 		});
 		const isCurrent = computed(() => {
+			context.collection.size.value;
+			context.orderVersion.value;
 			return context.collection.getLastKey() === itemKey.value;
 		});
 		const isDisabled = computed(() => Boolean(props.isDisabled || context.isDisabled.value || isCurrent.value));

package/dist/components/calendar-year-picker/calendar-year-picker-grid.js

@@ -55,6 +55,7 @@ var calendar_year_picker_grid_vue_vue_type_script_setup_true_vapor_true_lang_def
 			const grid = element.value;
 			const calendar = calendarElement.value;
 			if (!grid || !calendar) return;
+			state.focusedDate.value;
 			const dayGrid = calendar.querySelector(`[data-slot='${calendarGridSlot}']`);
 			if (!dayGrid) return;
 			grid.style.top = `${dayGrid.offsetTop}px`;

package/dist/components/checkbox/checkbox-root.js

@@ -81,7 +81,9 @@ var checkbox_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const styles = computed(() => checkboxVariants({ variant: resolvedVariant.value }));
 		const ownValidation = useFormValidationState({
 			isInvalid: () => props.isInvalid,
+			isRequired: resolvedIsRequired,
 			name: () => props.name,
+			requiredControl: "checkbox",
 			validate: () => props.validate,
 			validationBehavior: () => props.validationBehavior,
 			value: () => isSelected.value

package/dist/components/combo-box/combo-box-root.js

@@ -115,6 +115,7 @@ var combo_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			inputValue: () => props.inputValue,
 			isInvalid: () => props.isInvalid,
 			isReadOnly: () => props.isReadOnly,
+			isRequired: () => props.isRequired,
 			itemDisabled: props.itemDisabled,
 			itemKey: props.itemKey,
 			items: () => props.items,

package/dist/components/date-input-group/date-input-group-hidden-input.js

@@ -60,7 +60,8 @@ var date_input_group_hidden_input_vue_vue_type_script_setup_true_vapor_true_lang
 			const text = event.target.value;
 			if (!text) return;
 			const granularity = state.granularity.value;
-			const times = TIME_SEGMENTS.slice(0, granularity === "day" ? 0 : GRANULARITY_DEPTH[granularity]);
+			const depth = granularity === "day" ? 0 : GRANULARITY_DEPTH[granularity];
+			const times = TIME_SEGMENTS.slice(0, depth);
 			try {
 				const parsed = granularity === "day" ? parseDate(text) : parseDateTime(text);
 				for (const segment of DATE_SEGMENTS) if (segment in parsed) state.setSegment(segment, parsed[segment]);

package/dist/components/date-picker/date-picker-root.js

@@ -99,6 +99,7 @@ var date_picker_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			isDateUnavailable: props.isDateUnavailable,
 			isInvalid: () => props.isInvalid,
 			isOpen: () => props.isOpen,
+			isRequired: () => props.isRequired,
 			maxValue: () => props.maxValue,
 			minValue: () => props.minValue,
 			name: () => props.name,

package/dist/components/date-range-picker/date-range-picker-root.js

@@ -102,6 +102,7 @@ var date_range_picker_root_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 			isDateUnavailable: props.isDateUnavailable,
 			isInvalid: () => props.isInvalid,
 			isOpen: () => props.isOpen,
+			isRequired: () => props.isRequired,
 			maxValue: () => props.maxValue,
 			minValue: () => props.minValue,
 			onChange: (value) => {

package/dist/components/form/form-root.js

@@ -1,5 +1,5 @@
 import { provideFormContext } from "../../composables/use-form-validation-state.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, template } from "vue";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setClass, setInsertionState, setProp, shallowRef, template } from "vue";
 //#region src/components/form/form-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<form>", 1);
 var form_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -11,7 +11,12 @@ var form_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 	},
 	setup(__props) {
 		const props = __props;
+		const submitCount = shallowRef(0);
+		const onSubmit = () => {
+			submitCount.value += 1;
+		};
 		provideFormContext({
+			submitCount,
 			validationBehavior: computed(() => props.validationBehavior ?? "native"),
 			validationErrors: computed(() => props.validationErrors ?? {})
 		});
@@ -23,6 +28,7 @@ var form_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		});
 		setInsertionState(n1);
 		createSlot();
+		on(n1, "submit", onSubmit);
 		return n1;
 	}
 });

package/dist/components/radio-group/radio-group-root.js

@@ -101,7 +101,8 @@ var radio_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 		const onKeydown = (event) => {
 			const isHorizontalFlip = locale.value.direction === "rtl" && resolvedOrientation.value !== "vertical";
 			const isNext = event.key === "ArrowDown" || event.key === (isHorizontalFlip ? "ArrowLeft" : "ArrowRight");
-			if (!isNext && !(event.key === "ArrowUp" || event.key === (isHorizontalFlip ? "ArrowRight" : "ArrowLeft"))) return;
+			const isPrevious = event.key === "ArrowUp" || event.key === (isHorizontalFlip ? "ArrowRight" : "ArrowLeft");
+			if (!isNext && !isPrevious) return;
 			if (state.isDisabled.value || state.isReadOnly.value) return;
 			const radios = focusableRadios();
 			if (radios.length === 0) return;

package/dist/components/search-field/search-field-group.js

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useFocusWithin, useInteractionStates } from "../../composables/use-interaction-states.js";
+import { isNestedControl } from "../../utils/focus.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useSearchFieldContext } from "./search-field.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setTemplateRefBinding, shallowRef, template, unref } from "vue";
 //#region src/components/search-field/search-field-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=search-field-group role=group>", 1);
 var search_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -12,11 +13,28 @@ var search_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default =
 		const props = __props;
 		const { slots } = useSearchFieldContext();
 		const control = useTextFieldControlContext();
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLDivElement ? next : null;
+		};
 		const styles = computed(() => slots.value.group({ class: props.class }));
 		const isDisabled = computed(() => control?.isDisabled.value ?? false);
 		const isInvalid = computed(() => control?.isInvalid.value ?? false);
 		const interaction = useInteractionStates({ isDisabled });
 		const focusWithin = useFocusWithin();
+		/**
+		* The clear button keeps its place in the layout while the field is empty — the stylesheet only
+		* fades it out and takes it out of hit-testing — so a click aimed at it lands on the group, and
+		* the caret would otherwise stay wherever it was. The search icon is unhittable for the same
+		* reason, and so is the padding either side of the control.
+		*
+		* A click that did reach a control belongs to that control: the browser has already put the caret
+		* in the input, and the clear button takes focus back on the way down by itself.
+		*/
+		const onClick = (event) => {
+			if (isNestedControl(event.target)) return;
+			element.value?.querySelector("input")?.focus();
+		};
 		const n1 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
@@ -36,10 +54,12 @@ var search_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			isHovered: () => unref(interaction).isHovered.value,
 			isInvalid: () => isInvalid.value
 		});
+		on(n1, "click", onClick);
 		on(n1, "focusin", (e) => unref(focusWithin).onFocusin(e));
 		on(n1, "focusout", (e) => unref(focusWithin).onFocusout(e));
 		on(n1, "pointerenter", (e) => unref(interaction).onPointerenter(e));
 		on(n1, "pointerleave", (e) => unref(interaction).onPointerleave(e));
+		setTemplateRefBinding(n1, () => setElement);
 		return n1;
 	}
 });

package/dist/components/select/select-root.js

@@ -88,6 +88,7 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			disabledKeys: () => props.disabledKeys,
 			isInvalid: () => props.isInvalid,
 			isOpen: () => props.isOpen,
+			isRequired: () => props.isRequired,
 			itemDisabled: props.itemDisabled,
 			itemKey: props.itemKey,
 			items: () => props.items,

package/dist/components/splitter/splitter.state.js

@@ -25,9 +25,11 @@ var registry = () => {
 	const version = shallowRef(0);
 	return {
 		get: (key) => {
+			version.value;
 			return items.get(key);
 		},
 		keys: computed(() => {
+			version.value;
 			return sortByDocumentOrder([...items.entries()], ([, meta]) => meta.element()).map(([key]) => key);
 		}),
 		register: (key, meta) => {
@@ -83,7 +85,8 @@ var useSplitterState = (options) => {
 	const indexOf = (key) => panels.keys.value.indexOf(key);
 	const getPanelSize = (key) => layout.value[indexOf(key)] ?? 0;
 	const boundsOf = (index) => {
-		const panel = panels.get(panels.keys.value[index]);
+		const key = panels.keys.value[index];
+		const panel = panels.get(key);
 		const available = availableSize.value;
 		const min = getMinSize(panel.minSize(), available);
 		const shut = panel.isCollapsible() ? getMinSize(panel.collapsedSize() ?? 0, available) : min;
@@ -206,6 +209,8 @@ var useSplitterState = (options) => {
 		};
 	};
 	const neighbourCache = computed(() => {
+		panels.keys.value;
+		handles.keys.value;
 		return /* @__PURE__ */ new Map();
 	});
 	const neighboursOf = (handleKey) => {

package/dist/components/switch/switch-root.js

@@ -50,7 +50,9 @@ var switch_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		const styles = computed(() => switchVariants({ size: props.size }));
 		const validation = useFormValidationState({
 			isInvalid: () => props.isInvalid,
+			isRequired: () => props.isRequired,
 			name: () => props.name,
+			requiredControl: "checkbox",
 			validate: () => props.validate,
 			validationBehavior: () => props.validationBehavior,
 			value: () => state.value

package/dist/components/table/table-body.js

@@ -107,7 +107,7 @@ var table_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 							return createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
 								"aria-colspan": () => unref(virtualizer) ? columnCount.value : void 0,
 								colspan: () => unref(virtualizer) ? void 0 : columnCount.value,
-								role: "rowheader",
+								role: "gridcell",
 								style: () => emptyStateStyle.value
 							}, extend(() => {
 								return createSlot("empty", null, null, 4);

package/dist/components/table/table-cell.js

@@ -58,7 +58,8 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const virtualizer = useTableVirtualizerContext();
 		const layoutInfo = computed(() => {
 			if (!virtualizer || columnKey.value == null) return null;
-			return virtualizer.getLayoutInfo(virtualizer.collection.value.cellKey(rowKey.value, columnKey.value));
+			const collection = virtualizer.collection.value;
+			return virtualizer.getLayoutInfo(collection.cellKey(rowKey.value, columnKey.value));
 		});
 		const parentLayoutInfo = computed(() => virtualizer ? virtualizer.getLayoutInfo(rowKey.value) : null);
 		const placement = virtualizer ? useVirtualizerItem({
@@ -69,6 +70,7 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const n1 = createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
 			id: () => cellId.value,
 			"aria-colindex": () => unref(virtualizer) && index.value >= 0 ? index.value + 1 : void 0,
+			"aria-label": () => isRowHeader.value ? props.textValue : void 0,
 			class: () => ["rp-table__cell", props.class],
 			"data-collection": () => unref(collectionId),
 			"data-column-index": () => index.value < 0 ? void 0 : index.value,

package/dist/components/table/table-column-resizer.js

@@ -103,7 +103,8 @@ var table_column_resizer_vue_vue_type_script_setup_true_vapor_true_lang_default
 		* arrow press does.
 		*/
 		const onChange = (event) => {
-			resize(parseFloat(event.target.value) > columnWidth.value ? columnWidth.value + KEYBOARD_STEP : columnWidth.value - KEYBOARD_STEP);
+			const next = parseFloat(event.target.value);
+			resize(next > columnWidth.value ? columnWidth.value + KEYBOARD_STEP : columnWidth.value - KEYBOARD_STEP);
 		};
 		const n1 = t0();
 		const n0 = child(n1);

package/dist/components/table/table-load-more.js

@@ -100,7 +100,7 @@ var table_load_more_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 					return createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
 						"aria-colspan": () => unref(virtualizer) ? columnCount.value : void 0,
 						colspan: () => unref(virtualizer) ? void 0 : columnCount.value,
-						role: "rowheader",
+						role: "gridcell",
 						style: () => indicatorStyle.value
 					}, extend(() => {
 						return createSlot("default", null, null, 4);

package/dist/components/table/use-grid-selection-announcement.js

@@ -41,7 +41,9 @@ var useGridSelectionAnnouncement = (options) => {
 		else if (added.size === 1 && removed.size === 0) single([...added][0], "selected");
 		else if (removed.size === 1 && added.size === 0) single([...removed][0], "not selected");
 		if (selection.selectionMode.value === "multiple") {
-			if (messages.length === 0 || current === "all" || (current === "all" ? 0 : current.size) > 1 || last === "all" || (last === "all" ? 0 : last.size) > 1) messages.push(current === "all" ? "All items selected." : countMessage(selection.selectedKeys.value.size));
+			const size = current === "all" ? 0 : current.size;
+			const lastSize = last === "all" ? 0 : last.size;
+			if (messages.length === 0 || current === "all" || size > 1 || last === "all" || lastSize > 1) messages.push(current === "all" ? "All items selected." : countMessage(selection.selectedKeys.value.size));
 		}
 		if (messages.length > 0) announce(messages.join(" "));
 	});

package/dist/components/table/use-table-collection.js

@@ -19,10 +19,12 @@ var createTableRegistry = () => {
 	const items = /* @__PURE__ */ new Map();
 	const version = shallowRef(0);
 	const orderedKeys = computed(() => {
+		version.value;
 		return [...items.entries()].filter(([, meta]) => meta.element()?.isConnected).sort(([, a], [, b]) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([key]) => key);
 	});
 	return {
 		getItem: (key) => {
+			version.value;
 			return items.get(key);
 		},
 		indexOf: (key) => orderedKeys.value.indexOf(key),
@@ -39,6 +41,7 @@ var createTableRegistry = () => {
 			};
 		},
 		size: computed(() => {
+			version.value;
 			return orderedKeys.value.length;
 		})
 	};

package/dist/components/tabs/tabs-list-container.js

@@ -26,7 +26,8 @@ var tabs_list_container_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			if (!element) return;
 			const vertical = isVertical.value;
 			const size = vertical ? element.clientHeight : element.clientWidth;
-			const maxScroll = Math.max(0, (vertical ? element.scrollHeight : element.scrollWidth) - size);
+			const scrollSize = vertical ? element.scrollHeight : element.scrollWidth;
+			const maxScroll = Math.max(0, scrollSize - size);
 			const isRtl = !vertical && getComputedStyle(element).direction === "rtl";
 			const delta = direction * size * SCROLL_FRACTION * (isRtl ? -1 : 1);
 			const current = vertical ? element.scrollTop : element.scrollLeft;

package/dist/composables/use-calendar-grid.js

@@ -92,7 +92,8 @@ var useCalendarGrid = (options, state, shared) => {
 		const isDayView = Boolean(duration.days && duration.days < 7);
 		const firstDayOfWeek = toValue(options.firstDayOfWeek);
 		const weekStart = isDayView ? startDate.value : startOfWeek(today(state.timeZone.value), locale.value.locale, firstDayOfWeek);
-		return Array.from({ length: isDayView ? duration.days : 7 }, (_, index) => dayFormatter.value.format(weekStart.add({ days: index }).toDate(state.timeZone.value)));
+		const days = isDayView ? duration.days : 7;
+		return Array.from({ length: days }, (_, index) => dayFormatter.value.format(weekStart.add({ days: index }).toDate(state.timeZone.value)));
 	});
 	return {
 		attrs: computed(() => ({

package/dist/composables/use-checkbox-group-state.js

@@ -39,7 +39,9 @@ var useCheckboxGroupState = (options = {}) => {
 	const isItemRequired = computed(() => isRequired.value && value.value.length === 0);
 	const validation = useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired,
 		name: () => toValue(options.name),
+		requiredControl: "checkbox",
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),
 		value: () => value.value

package/dist/composables/use-collection.js

@@ -123,13 +123,24 @@ var useCollection = (options = {}) => {
 		if (index === -1) return null;
 		return keys[index + step] ?? null;
 	};
+	/**
+	* Read the registration counter, so a lookup made inside a `computed` re-runs once the item
+	* it asked about registers. `getItem` and `getElement` are read during render — an item's
+	* own disabled state and tabindex come from them — unlike `orderedKeys()`, which is only ever
+	* read on an interaction and so deliberately stays outside reactivity.
+	*/
+	const track = () => {
+		version.value;
+	};
 	return {
 		getElement: (key) => {
+			track();
 			return items.get(key)?.element() ?? null;
 		},
 		getFirstKey: () => keyAt(0),
 		getIndex: (key) => order().indexOf(key),
 		getItem: (key) => {
+			track();
 			return items.get(key) ?? metaFromSource(key);
 		},
 		getKeyAfter: (key) => neighbour(key, 1),
@@ -138,6 +149,7 @@ var useCollection = (options = {}) => {
 		orderedKeys,
 		register,
 		size: computed(() => {
+			track();
 			return source()?.itemCount ?? items.size;
 		}),
 		withOrder

package/dist/composables/use-color-field-state.js

@@ -68,6 +68,7 @@ var useColorFieldState = (options = {}) => {
 	const inputValue = shallowRef(hasInitialValue && colorValue.value ? colorValue.value.toString("hex") : "");
 	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-color-field.js

@@ -108,38 +108,40 @@ var useColorField = (options = {}) => {
 			else if (deltaY < 0) state.decrement();
 		}
 	});
+	const attrs = computed(() => {
+		const all = {
+			...field.attrs.value,
+			"aria-disabled": isDisabled.value || void 0,
+			"aria-readonly": isReadOnly.value || void 0
+		};
+		for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+		return all;
+	});
+	const handlers = {
+		onBlur: (event) => {
+			isFocused.value = false;
+			spin.onBlur();
+			state.commit();
+			reassert();
+			field.handlers.onBlur(event);
+		},
+		onFocus: (event) => {
+			isFocused.value = true;
+			spin.onFocus();
+			field.handlers.onFocus(event);
+		},
+		onInput: field.handlers.onInput,
+		onKeydown: (event) => {
+			spin.onKeydown(event);
+			field.handlers.onKeydown(event);
+		},
+		onKeyup: field.handlers.onKeyup
+	};
 	return {
-		attrs: computed(() => {
-			const all = {
-				...field.attrs.value,
-				"aria-disabled": isDisabled.value || void 0,
-				"aria-readonly": isReadOnly.value || void 0
-			};
-			for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
-			return all;
-		}),
+		attrs,
 		element,
 		fieldIds: field.fieldIds,
-		handlers: {
-			onBlur: (event) => {
-				isFocused.value = false;
-				spin.onBlur();
-				state.commit();
-				reassert();
-				field.handlers.onBlur(event);
-			},
-			onFocus: (event) => {
-				isFocused.value = true;
-				spin.onFocus();
-				field.handlers.onFocus(event);
-			},
-			onInput: field.handlers.onInput,
-			onKeydown: (event) => {
-				spin.onKeydown(event);
-				field.handlers.onKeydown(event);
-			},
-			onKeyup: field.handlers.onKeyup
-		},
+		handlers,
 		isDisabled,
 		isInvalid: field.isInvalid,
 		isReadOnly,

package/dist/composables/use-combo-box-state.d.ts

@@ -78,6 +78,8 @@ export interface UseComboBoxStateOptions<T> {
     disabledBehavior?: MaybeRefOrGetter<DisabledBehavior | undefined>;
     isReadOnly?: MaybeRefOrGetter<boolean | 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<ComboBoxValidationValue> | undefined>;
     validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
     name?: MaybeRefOrGetter<string | undefined>;

package/dist/composables/use-combo-box-state.js

@@ -2,7 +2,7 @@ import { useControllableState } from "./use-controllable-state.js";
 import { useMenuTriggerState } from "./use-overlay-trigger-state.js";
 import { useCollection } from "./use-collection.js";
 import { createListCollection } from "../utils/virtualizer-collection.js";
-import { useFormValidationState } from "./use-form-validation-state.js";
+import { isValueMissing, useFormValidationState } from "./use-form-validation-state.js";
 import { useSelectionManager } from "./use-selection-manager.js";
 import { defaultItemTextValue } from "./use-select-state.js";
 import { useFilter } from "./use-filter.js";
@@ -128,7 +128,8 @@ var useComboBoxState = (options) => {
 		const given = toValue(options.defaultInputValue);
 		if (given != null) return given;
 		const value = defaultValue.value;
-		return selectionMode.value === "single" ? textOf(Array.isArray(value) ? value[0] ?? null : value) : "";
+		const key = Array.isArray(value) ? value[0] ?? null : value;
+		return selectionMode.value === "single" ? textOf(key) : "";
 	});
 	const input = useControllableState({
 		defaultValue: defaultInputValue.value,
@@ -137,7 +138,9 @@ var useComboBoxState = (options) => {
 	});
 	const inputValue = computed(() => input.state.value);
 	const validation = useFormValidationState({
+		isEmpty: (current) => !current || isValueMissing(current.value),
 		isInvalid: options.isInvalid,
+		isRequired: options.isRequired,
 		name: options.name,
 		validate: options.validate,
 		validationBehavior: options.validationBehavior,