ropav 0.11.1 → 0.12.1

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/autocomplete/autocomplete-clear-button.js

@@ -23,7 +23,7 @@ var autocomplete_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 		};
 		/** Empties the selection, and only the selection — the text that was typed is left alone. */
 		const onClick = () => {
-			state.selection.clearSelection();
+			state.clearValue();
 			onClear();
 		};
 		const n1 = t0();

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

@@ -178,7 +178,10 @@ var autocomplete_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		* that part is what {@link provideAutocompleteContext} above carries.
 		*/
 		provideSelectContext({
+			isDisabled,
+			onClear: () => emit("clear"),
 			placeholder,
+			registerClearButton: () => () => {},
 			select,
 			selectedItems: state.selectedItems,
 			selectedText,

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

@@ -81,14 +81,19 @@ 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
 		});
 		const validation = group ? group.state.itemValidation : ownValidation;
 		provideFieldErrorContext(group ? null : { validation: validation.displayValidation });
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description", "errorMessage"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description", "errorMessage"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [

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-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/radio-root.js

@@ -23,7 +23,10 @@ var radio_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const styles = computed(() => radioVariants());
 		const isSelected = computed(() => state.selectedValue.value === props.value);
 		const isDisabled = computed(() => Boolean(props.isDisabled) || state.isDisabled.value);
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [

package/dist/components/scroll-shadow/scroll-shadow-root.js

@@ -1,5 +1,5 @@
 import { focusableIn } from "../../utils/focus.js";
-import { useScrollShadow } from "./use-scroll-shadow.js";
+import { clearScrollShadowVisibility, useScrollShadow } from "./use-scroll-shadow.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
 import { scrollShadowVariants } from "@ropav/styles";
 //#region src/components/scroll-shadow/scroll-shadow-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -43,21 +43,13 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			variant: props.variant
 		}).base({ class: props.class }));
 		const style = computed(() => [{ "--scroll-shadow-size": `${props.size}px` }, props.style]);
-		const clearVisibility = (current) => {
-			delete current.dataset["topScroll"];
-			delete current.dataset["bottomScroll"];
-			delete current.dataset["topBottomScroll"];
-			delete current.dataset["leftScroll"];
-			delete current.dataset["rightScroll"];
-			delete current.dataset["leftRightScroll"];
-		};
 		watch([
 			element,
 			() => props.visibility,
 			() => props.orientation
 		], ([current, visibility, orientation]) => {
 			if (!current || visibility === "auto") return;
-			clearVisibility(current);
+			clearScrollShadowVisibility(current);
 			if (visibility === "both") current.dataset[orientation === "vertical" ? "topBottomScroll" : "leftRightScroll"] = "true";
 			else if (visibility !== "none") current.dataset[`${visibility}Scroll`] = "true";
 		}, {

package/dist/components/scroll-shadow/use-scroll-shadow.d.ts

@@ -12,6 +12,16 @@ export interface UseScrollShadowReturn {
     /** Re-measure immediately. The DOM write is batched into the next animation frame. */
     checkOverflow: () => void;
 }
+/**
+ * Take every edge attribute off, so the stylesheet's mask stops applying.
+ *
+ * The attributes are the whole state, and the one place the mask is keyed on, so whoever stops
+ * writing them has to take the last set off too or the fade stays painted at whatever it was.
+ *
+ * Reports whether anything was actually removed, so a caller telling the world the fade is gone
+ * only says it when there was one.
+ */
+export declare const clearScrollShadowVisibility: (element: HTMLElement) => boolean;
 /**
  * Detect the scrollable edges around an element and publish them as `data-*` attributes.
  *

package/dist/components/scroll-shadow/use-scroll-shadow.js

@@ -1,5 +1,32 @@
 import { computed, onScopeDispose, toValue, watch } from "vue";
 //#region src/components/scroll-shadow/use-scroll-shadow.ts
+/** Every attribute an edge is published as, which together are the whole state. */
+var EDGE_ATTRIBUTES = [
+	"topScroll",
+	"bottomScroll",
+	"topBottomScroll",
+	"leftScroll",
+	"rightScroll",
+	"leftRightScroll"
+];
+/**
+* Take every edge attribute off, so the stylesheet's mask stops applying.
+*
+* The attributes are the whole state, and the one place the mask is keyed on, so whoever stops
+* writing them has to take the last set off too or the fade stays painted at whatever it was.
+*
+* Reports whether anything was actually removed, so a caller telling the world the fade is gone
+* only says it when there was one.
+*/
+var clearScrollShadowVisibility = (element) => {
+	let cleared = false;
+	for (const attribute of EDGE_ATTRIBUTES) {
+		if (element.dataset[attribute] === void 0) continue;
+		delete element.dataset[attribute];
+		cleared = true;
+	}
+	return cleared;
+};
 /**
 * Detect the scrollable edges around an element and publish them as `data-*` attributes.
 *
@@ -73,7 +100,12 @@ var useScrollShadow = (options) => {
 	], ([current, enabled, mode], _previous, onCleanup) => {
 		previous = null;
 		cancelPendingFrame();
-		if (!current || !enabled || mode !== "auto") return;
+		if (!current) return;
+		if (mode !== "auto") return;
+		if (!enabled) {
+			if (clearScrollShadowVisibility(current)) options.onVisibilityChange?.("none");
+			return;
+		}
 		checkOverflow();
 		current.addEventListener("scroll", checkOverflow, { passive: true });
 		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(checkOverflow);
@@ -120,4 +152,4 @@ var useScrollShadow = (options) => {
 	return { checkOverflow };
 };
 //#endregion
-export { useScrollShadow };
+export { clearScrollShadowVisibility, useScrollShadow };

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/index.d.ts

@@ -1,10 +1,11 @@
+import SelectClearButton from "./select-clear-button.js";
 import SelectIndicator from "./select-indicator.js";
 import SelectPopover from "./select-popover.js";
 import SelectRoot from "./select-root.js";
 import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
-export { SelectIndicator, SelectPopover, SelectRoot as Select, SelectTrigger, SelectValue };
-export type { SelectIndicatorProps, SelectPopoverProps, SelectRootProps as SelectProps, SelectRootSlotProps as SelectSlotProps, SelectTriggerProps, SelectValueProps, SelectValueSlotProps, } from "./select.types.js";
+export { SelectClearButton, SelectIndicator, SelectPopover, SelectRoot as Select, SelectTrigger, SelectValue, };
+export type { SelectClearButtonProps, SelectIndicatorProps, SelectPopoverProps, SelectRootProps as SelectProps, SelectRootSlotProps as SelectSlotProps, SelectTriggerProps, SelectValueProps, SelectValueSlotProps, } from "./select.types.js";
 export { useSelectContext } from "./select.context.js";
 export type { SelectContext } from "./select.context.js";
 export type { UseSelectReturn } from "../../composables/use-select.js";

package/dist/components/select/index.js

@@ -1,8 +1,9 @@
 import { useSelectContext } from "./select.context.js";
+import select_clear_button_default from "./select-clear-button.js";
 import select_indicator_default from "./select-indicator.js";
 import select_popover_default from "./select-popover.js";
 import select_root_default from "./select-root.js";
 import select_trigger_default from "./select-trigger.js";
 import select_value_default from "./select-value.js";
 import { selectVariants } from "@ropav/styles";
-export { select_root_default as Select, select_indicator_default as SelectIndicator, select_popover_default as SelectPopover, select_trigger_default as SelectTrigger, select_value_default as SelectValue, selectVariants, useSelectContext };
+export { select_root_default as Select, select_clear_button_default as SelectClearButton, select_indicator_default as SelectIndicator, select_popover_default as SelectPopover, select_trigger_default as SelectTrigger, select_value_default as SelectValue, selectVariants, useSelectContext };

package/dist/components/select/select-clear-button.d.ts

@@ -0,0 +1,21 @@
+import type { SelectClearButtonProps } from "./select.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SelectClearButtonProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/select/select-clear-button.js

@@ -0,0 +1,66 @@
+import { dataAttr } from "../../utils/assertion.js";
+import icon_close_default from "../icons/icon-close.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createComponent, createSlot, defineVaporComponent, on, onMounted, onUnmounted, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+//#region src/components/select/select-clear-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=select-clear-button>", 1);
+var select_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-clear-button",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { isDisabled, onClear, registerClearButton, select, selectedItems, slots, state } = useSelectContext();
+		const styles = computed(() => slots.value.clearButton({ class: props.class }));
+		/**
+		* Whether there is nothing to clear, which is what the stylesheet fades this out on.
+		*
+		* It stays in the DOM either way: appearing and disappearing would reflow the trigger every time
+		* a choice was made or undone.
+		*
+		* Read from the chosen items rather than the selected keys, so this agrees with what the trigger
+		* shows: a value naming an option the collection does not hold renders as the placeholder, and a
+		* button offering to clear what the user cannot see is a button offering to clear nothing.
+		*/
+		const isEmpty = computed(() => selectedItems.value.length === 0);
+		let unregister;
+		onMounted(() => {
+			unregister = registerClearButton();
+		});
+		onUnmounted(() => {
+			unregister?.();
+			unregister = void 0;
+		});
+		/**
+		* Keeps the press off the trigger, so clearing does not also open the popover.
+		*
+		* Guarded the same way the click is: with nothing to clear the stylesheet takes this out of the
+		* hit test, and a press swallowed here rather than there would leave a strip of the trigger that
+		* neither clears nor opens.
+		*/
+		const onPointerdown = (event) => {
+			if (isDisabled.value || isEmpty.value) return;
+			event.stopPropagation();
+		};
+		const onClick = (event) => {
+			event.stopPropagation();
+			if (isDisabled.value || isEmpty.value) return;
+			state.clearValue();
+			onClear();
+			select.triggerElement.value?.focus();
+		};
+		const n3 = t0();
+		renderEffect(() => {
+			setClass(n3, styles.value);
+			setAttr(n3, "data-empty", unref(dataAttr)(isEmpty.value));
+		});
+		setInsertionState(n3);
+		createSlot("default", null, () => {
+			return createComponent(unref(icon_close_default), { "data-slot": "select-clear-button-icon" });
+		});
+		on(n3, "click", onClick);
+		on(n3, "pointerdown", onPointerdown);
+		return n3;
+	}
+});
+//#endregion
+export { select_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-root.d.ts

@@ -3,6 +3,7 @@ import type { SelectRootProps, SelectRootSlotProps } from "./select.types.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<SelectRootProps<T> & {
         onChange?: ((value: SelectedValue) => any) | undefined;
+        onClear?: (() => any) | undefined;
         onFocusChange?: ((isFocused: boolean) => any) | undefined;
         onOpenChange?: ((isOpen: boolean) => any) | undefined;
         "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
@@ -15,7 +16,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     slots: {
         default?: (props: SelectRootSlotProps) => unknown;
     };
-    emit: ((evt: "change", value: SelectedValue) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: SelectedValue) => void);
+    emit: ((evt: "change", value: SelectedValue) => void) & ((evt: "clear") => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: SelectedValue) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -74,7 +74,8 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		"update:value",
 		"openChange",
 		"update:isOpen",
-		"focusChange"
+		"focusChange",
+		"clear"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -87,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,
@@ -106,12 +108,22 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			validationBehavior: () => props.validationBehavior,
 			value: () => props.value
 		});
+		let clearButtons = 0;
+		const registerClearButton = () => {
+			clearButtons += 1;
+			return () => {
+				clearButtons -= 1;
+			};
+		};
+		const onClear = () => emit("clear");
 		const select = useSelect({
 			ariaDescribedby: () => props.ariaDescribedby,
 			ariaLabel: () => props.ariaLabel,
 			ariaLabelledby: () => props.ariaLabelledby,
+			hasClearButton: () => clearButtons > 0,
 			isDisabled: () => props.isDisabled,
 			isRequired: () => props.isRequired,
+			onClear,
 			onFocusChange: (isFocused) => emit("focusChange", isFocused)
 		}, state);
 		const strings = useLocalizedStringFormatter(selectStrings);
@@ -136,7 +148,10 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		provideFieldIdsContext(select.fieldIds.context);
 		provideFieldErrorContext({ validation: state.displayValidation });
 		provideSelectContext({
+			isDisabled: computed(() => Boolean(props.isDisabled)),
+			onClear,
 			placeholder,
+			registerClearButton,
 			select,
 			selectedItems: state.selectedItems,
 			selectedText,

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

@@ -12,6 +12,17 @@ export interface SelectContext {
     selectedText: ComputedRef<string>;
     /** What the trigger shows when nothing is chosen, already resolved to the localized default. */
     placeholder: ComputedRef<string>;
+    /** Whether the whole select is disabled, which the clear button has to answer to as well. */
+    isDisabled: ComputedRef<boolean>;
+    /** Called after the selection is emptied, whichever way it was emptied. */
+    onClear: () => void;
+    /**
+     * Registers a mounted clear button and returns the call that unregisters it.
+     *
+     * Counted rather than a flag, so unmounting one cannot switch the trigger's clear shortcut off
+     * while another is still mounted.
+     */
+    registerClearButton: () => () => void;
 }
 /**
  * Strict: every part of a select reads the state the root holds, so one rendered outside a root

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

@@ -90,6 +90,9 @@ export interface SelectValueSlotProps<T = unknown> {
 export interface SelectIndicatorProps {
     class?: string;
 }
+export interface SelectClearButtonProps {
+    class?: string;
+}
 export interface SelectPopoverProps {
     class?: string;
     /** @default "bottom" */