ropav 0.3.1 → 0.4.0

package/dist/components/avatar/avatar-image.js

@@ -1,7 +1,7 @@
 import { composeSlotClassName } from "../../utils/compose.js";
 import { useAvatarContext } from "./avatar.context.js";
 import { useImageLoadingStatus } from "../../composables/use-image-loading-status.js";
-import { createIf, defineVaporComponent, on, renderEffect, setClass, setProp, template, unref, watch } from "vue";
+import { createIf, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setClass, setProp, shallowRef, template, unref, watch } from "vue";
 //#region src/components/avatar/avatar-image.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<img>", 1);
 var avatar_image_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -40,13 +40,23 @@ var avatar_image_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 			setImageStatus(value);
 			emit("loadingStatusChange", value);
 		}, { immediate: true });
+		/**
+		* `alt` is set by hand because an empty one cannot be bound.
+		*
+		* Vapor routes it through `setDOMProp`, which returns early when the new value equals what the
+		* element already reports - and an `img` carrying no `alt` attribute already reports `""`. So the
+		* empty default never reaches the DOM, and the attribute stays missing altogether, which is the
+		* one state that is always wrong.
+		*/
+		const image = shallowRef(null);
+		watch([image, () => props.alt], ([element, alt]) => element?.setAttribute("alt", alt ?? ""), { flush: "post" });
+		const _setTemplateRef = createTemplateRefSetter();
 		return createIf(() => unref(status) === "loaded", () => {
 			const n2 = t0();
 			on(n2, "error", ($event) => emit("error", $event));
 			on(n2, "load", ($event) => emit("load", $event));
 			renderEffect(() => {
 				const _props = props;
-				setProp(n2, "alt", _props.alt);
 				setClass(n2, unref(composeSlotClassName)(unref(slots).image, _props.class));
 				setProp(n2, "crossorigin", _props.crossOrigin);
 				setProp(n2, "loading", _props.loading);
@@ -54,6 +64,7 @@ var avatar_image_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 				setProp(n2, "sizes", _props.sizes);
 				setProp(n2, "src", _props.src);
 				setProp(n2, "srcset", _props.srcSet);
+				_setTemplateRef(n2, (element) => image.value = element);
 			});
 			return n2;
 		});

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

@@ -10,7 +10,13 @@ export interface AvatarRootProps {
 }
 export interface AvatarImageProps {
     class?: string;
-    /** Alternative text, forwarded to the rendered `img`. */
+    /**
+     * Alternative text, forwarded to the rendered `img`.
+     *
+     * Defaults to empty, which marks the image decorative: an avatar sits beside the name it
+     * belongs to, and the fallback carries the initials, so a description here usually repeats
+     * what is already on the page. Omitting the attribute altogether is never right.
+     */
     alt?: string;
     /** Forwarded to the probe image so the request matches the rendered one. */
     crossOrigin?: "" | "anonymous" | "use-credentials";

package/dist/components/calendar/calendar-header.js

@@ -1,7 +1,7 @@
 import { useCalendarContext } from "./calendar.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/calendar/calendar-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<header data-slot=calendar-header>", 1);
+var t0 = template("<div data-slot=calendar-header>", 1);
 var calendar_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "calendar-header",
 	props: { class: {} },

package/dist/components/color-field/index.d.ts

@@ -45,7 +45,7 @@ export declare const ColorField: ((__VLS_props: NonNullable<Awaited<typeof __VLS
     Group: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
         attrs: any;
         slots: {
-            default?: (props: import("../color-input-group/index.js").ColorInputGroupRootSlotProps) => unknown;
+            default?: (props: import("../index.js").ColorInputGroupRootSlotProps) => unknown;
         };
         emit: {};
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
@@ -61,7 +61,7 @@ export declare const ColorField: ((__VLS_props: NonNullable<Awaited<typeof __VLS
         expose: (exposed: {}) => void;
         attrs: any;
         slots: {
-            default?: (props: import("../color-input-group/index.js").ColorInputGroupRootSlotProps) => unknown;
+            default?: (props: import("../index.js").ColorInputGroupRootSlotProps) => unknown;
         };
         emit: {};
     }>) => import('vue').VNode & {

package/dist/components/date-picker/index.d.ts

@@ -190,7 +190,8 @@ export declare const DatePicker: ((__VLS_props: NonNullable<Awaited<typeof __VLS
 export { DatePickerPopover, DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator };
 export { DateInputGroupInput as DatePickerInput, DateInputGroupInputContainer as DatePickerInputContainer, DateInputGroupPrefix as DatePickerPrefix, DateInputGroupRoot as DatePickerGroup, DateInputGroupSegment as DatePickerSegment, DateInputGroupSuffix as DatePickerSuffix, };
 export type { DatePickerPopoverProps, DatePickerRootProps, DatePickerRootProps as DatePickerProps, DatePickerRootSlotProps, DatePickerTriggerIndicatorProps, DatePickerTriggerProps, } from "./date-picker.types.js";
+export type { DateInputGroupInputContainerProps as DatePickerInputContainerProps, DateInputGroupInputProps as DatePickerInputProps, DateInputGroupInputSlotProps as DatePickerInputSlotProps, DateInputGroupPrefixProps as DatePickerPrefixProps, DateInputGroupRootProps as DatePickerGroupProps, DateInputGroupRootSlotProps as DatePickerGroupSlotProps, DateInputGroupSegmentProps as DatePickerSegmentProps, DateInputGroupSuffixProps as DatePickerSuffixProps, } from "../date-input-group/index.js";
 export { provideDatePickerContext, useDatePickerContext } from "./date-picker.context.js";
 export type { DatePickerContext } from "./date-picker.context.js";
-export { datePickerVariants } from "@ropav/styles";
-export type { DatePickerVariants } from "@ropav/styles";
+export { dateInputGroupVariants, datePickerVariants } from "@ropav/styles";
+export type { DateInputGroupVariants, DatePickerVariants } from "@ropav/styles";

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

@@ -9,7 +9,7 @@ import date_picker_popover_default from "./date-picker-popover.js";
 import date_picker_root_default from "./date-picker-root.js";
 import date_picker_trigger_indicator_default from "./date-picker-trigger-indicator.js";
 import date_picker_trigger_default from "./date-picker-trigger.js";
-import { datePickerVariants } from "@ropav/styles";
+import { dateInputGroupVariants, datePickerVariants } from "@ropav/styles";
 //#region src/components/date-picker/index.ts
 var DatePicker = Object.assign(date_picker_root_default, {
 	Popover: date_picker_popover_default,
@@ -18,4 +18,4 @@ var DatePicker = Object.assign(date_picker_root_default, {
 	TriggerIndicator: date_picker_trigger_indicator_default
 });
 //#endregion
-export { DatePicker, date_input_group_root_default as DatePickerGroup, date_input_group_input_default as DatePickerInput, date_input_group_input_container_default as DatePickerInputContainer, date_picker_popover_default as DatePickerPopover, date_input_group_prefix_default as DatePickerPrefix, date_picker_root_default as DatePickerRoot, date_input_group_segment_default as DatePickerSegment, date_input_group_suffix_default as DatePickerSuffix, date_picker_trigger_default as DatePickerTrigger, date_picker_trigger_indicator_default as DatePickerTriggerIndicator, datePickerVariants, provideDatePickerContext, useDatePickerContext };
+export { DatePicker, date_input_group_root_default as DatePickerGroup, date_input_group_input_default as DatePickerInput, date_input_group_input_container_default as DatePickerInputContainer, date_picker_popover_default as DatePickerPopover, date_input_group_prefix_default as DatePickerPrefix, date_picker_root_default as DatePickerRoot, date_input_group_segment_default as DatePickerSegment, date_input_group_suffix_default as DatePickerSuffix, date_picker_trigger_default as DatePickerTrigger, date_picker_trigger_indicator_default as DatePickerTriggerIndicator, dateInputGroupVariants, datePickerVariants, provideDatePickerContext, useDatePickerContext };

package/dist/components/date-range-picker/index.d.ts

@@ -214,7 +214,8 @@ export declare const DateRangePicker: ((__VLS_props: NonNullable<Awaited<typeof
 export { DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator, };
 export { DateInputGroupInput as DateRangePickerInput, DateInputGroupInputContainer as DateRangePickerInputContainer, DateInputGroupPrefix as DateRangePickerPrefix, DateInputGroupRoot as DateRangePickerGroup, DateInputGroupSegment as DateRangePickerSegment, DateInputGroupSuffix as DateRangePickerSuffix, };
 export type { DateRangePickerPopoverProps, DateRangePickerRangeSeparatorProps, DateRangePickerRootProps, DateRangePickerRootProps as DateRangePickerProps, DateRangePickerRootSlotProps, DateRangePickerTriggerIndicatorProps, DateRangePickerTriggerProps, } from "./date-range-picker.types.js";
+export type { DateInputGroupInputContainerProps as DateRangePickerInputContainerProps, DateInputGroupInputProps as DateRangePickerInputProps, DateInputGroupInputSlotProps as DateRangePickerInputSlotProps, DateInputGroupPrefixProps as DateRangePickerPrefixProps, DateInputGroupRootProps as DateRangePickerGroupProps, DateInputGroupRootSlotProps as DateRangePickerGroupSlotProps, DateInputGroupSegmentProps as DateRangePickerSegmentProps, DateInputGroupSuffixProps as DateRangePickerSuffixProps, } from "../date-input-group/index.js";
 export { provideDateRangePickerContext, useDateRangePickerContext, } from "./date-range-picker.context.js";
 export type { DateRangePickerContext } from "./date-range-picker.context.js";
-export { dateRangePickerVariants } from "@ropav/styles";
-export type { DateRangePickerVariants } from "@ropav/styles";
+export { dateInputGroupVariants, dateRangePickerVariants } from "@ropav/styles";
+export type { DateInputGroupVariants, DateRangePickerVariants } from "@ropav/styles";

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

@@ -10,7 +10,7 @@ import date_range_picker_range_separator_default from "./date-range-picker-range
 import date_range_picker_root_default from "./date-range-picker-root.js";
 import date_range_picker_trigger_indicator_default from "./date-range-picker-trigger-indicator.js";
 import date_range_picker_trigger_default from "./date-range-picker-trigger.js";
-import { dateRangePickerVariants } from "@ropav/styles";
+import { dateInputGroupVariants, dateRangePickerVariants } from "@ropav/styles";
 //#region src/components/date-range-picker/index.ts
 var DateRangePicker = Object.assign(date_range_picker_root_default, {
 	Popover: date_range_picker_popover_default,
@@ -20,4 +20,4 @@ var DateRangePicker = Object.assign(date_range_picker_root_default, {
 	TriggerIndicator: date_range_picker_trigger_indicator_default
 });
 //#endregion
-export { DateRangePicker, date_input_group_root_default as DateRangePickerGroup, date_input_group_input_default as DateRangePickerInput, date_input_group_input_container_default as DateRangePickerInputContainer, date_range_picker_popover_default as DateRangePickerPopover, date_input_group_prefix_default as DateRangePickerPrefix, date_range_picker_range_separator_default as DateRangePickerRangeSeparator, date_range_picker_root_default as DateRangePickerRoot, date_input_group_segment_default as DateRangePickerSegment, date_input_group_suffix_default as DateRangePickerSuffix, date_range_picker_trigger_default as DateRangePickerTrigger, date_range_picker_trigger_indicator_default as DateRangePickerTriggerIndicator, dateRangePickerVariants, provideDateRangePickerContext, useDateRangePickerContext };
+export { DateRangePicker, date_input_group_root_default as DateRangePickerGroup, date_input_group_input_default as DateRangePickerInput, date_input_group_input_container_default as DateRangePickerInputContainer, date_range_picker_popover_default as DateRangePickerPopover, date_input_group_prefix_default as DateRangePickerPrefix, date_range_picker_range_separator_default as DateRangePickerRangeSeparator, date_range_picker_root_default as DateRangePickerRoot, date_input_group_segment_default as DateRangePickerSegment, date_input_group_suffix_default as DateRangePickerSuffix, date_range_picker_trigger_default as DateRangePickerTrigger, date_range_picker_trigger_indicator_default as DateRangePickerTriggerIndicator, dateInputGroupVariants, dateRangePickerVariants, provideDateRangePickerContext, useDateRangePickerContext };

package/dist/components/dropdown/dropdown-menu.js

@@ -3,7 +3,7 @@ import { useMenu } from "../../composables/use-menu.js";
 import { useDropdownContext, useDropdownPopoverTarget } from "./dropdown.context.js";
 import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 //#region src/components/dropdown/dropdown-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div role=presentation>");
+var t0 = template("<div>");
 var t1 = template("<div>", 1);
 var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "dropdown-menu",
@@ -69,6 +69,7 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		setInsertionState(n5);
 		createIf(() => hasEmptySlot.value && unref(menu).isEmpty.value, () => {
 			const n3 = t0();
+			renderEffect(() => setDynamicProps(n3, [unref(menu).emptyAttributes.value]));
 			setInsertionState(n3);
 			createSlot("empty");
 			return n3;

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

@@ -36,7 +36,7 @@ export interface DropdownPopoverProps {
     isKeyboardDismissDisabled?: boolean;
 }
 /**
- * The menu inside a dropdown. Everything a standalone menu takes, minus the ids and the focus
- * strategy, which the trigger decides.
+ * The menu inside a dropdown. Everything a standalone menu takes, minus the naming, the ids and the
+ * focus strategy, all of which the trigger decides.
  */
-export type DropdownMenuProps = Omit<MenuRootProps, "ariaLabelledby" | "autoFocus" | "id">;
+export type DropdownMenuProps = Omit<MenuRootProps, "ariaLabel" | "ariaLabelledby" | "autoFocus" | "id">;

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export * from "./chip/index.js";
 export * from "./close-button/index.js";
 export * from "./color-area/index.js";
 export * from "./color-field/index.js";
+export * from "./color-input-group/index.js";
 export * from "./color-picker/index.js";
 export * from "./color-slider/index.js";
 export * from "./color-swatch/index.js";

package/dist/components/input/index.d.ts

@@ -2,40 +2,46 @@ import InputRoot from "./input-root.js";
 export declare const Input: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
         class?: string;
+        value?: string;
         variant?: import("@ropav/styles").InputVariants["variant"];
         fullWidth?: boolean;
         placeholder?: string;
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 }) & {
     Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             class?: string;
+            value?: string;
             variant?: import("@ropav/styles").InputVariants["variant"];
             fullWidth?: boolean;
             placeholder?: string;
+            onChange?: ((value: string) => any) | undefined;
+            "onUpdate:value"?: ((value: string) => any) | undefined;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
         expose: (exposed: {}) => void;
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }>) => import('vue').VNode & {
         __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
     };

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

@@ -1,12 +1,15 @@
 import type { InputRootProps } from "./input.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<InputRootProps> & (typeof globalThis extends {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputRootProps & {
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, template, unref } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 import { inputVariants } from "@ropav/styles";
 //#region src/components/input/input-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<input>", 1);
@@ -10,6 +11,7 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 	__name: "input-root",
 	props: {
 		class: {},
+		value: {},
 		variant: { default: void 0 },
 		fullWidth: {
 			type: Boolean,
@@ -17,12 +19,16 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		},
 		placeholder: {}
 	},
-	setup(__props) {
+	emits: ["change", "update:value"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const control = useTextFieldControlContext();
 		const textField = useTextFieldContext();
-		const setElement = (element) => {
-			control?.registerElement(element instanceof HTMLInputElement ? element : null);
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLInputElement ? next : null;
+			control?.registerElement(element.value);
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
 		const styles = computed(() => inputVariants({
@@ -33,9 +39,41 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const attrs = computed(() => {
 			const merged = { ...control?.attrs.value };
 			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
+			if (props.value !== void 0) merged["value"] = props.value;
 			return merged;
 		});
 		const interaction = useInteractionStates({ isDisabled: () => control?.isDisabled.value });
+		const inputCount = shallowRef(0);
+		const onInput = (event) => {
+			control?.handlers.onInput(event);
+			const next = event.currentTarget.value;
+			emit("change", next);
+			emit("update:value", next);
+			if (props.value !== void 0) inputCount.value++;
+		};
+		/**
+		* Put the text back to what the caller holds, reset source included. A `value` set on the control
+		* makes the caller the owner of it, and a caller that keeps it unchanged means the typing is
+		* rejected — but the browser has already moved the text, and Vapor skips writing `value` when the
+		* bound value has not changed, so nothing would put it back.
+		*
+		* Post-flush, because the value only settles once the listener that heard the change has updated
+		* whatever holds it. `immediate`, and with the element in the dependencies, because the reset
+		* source has to be there before a reset rather than after the first keystroke — `inputCount` alone
+		* never fires on a control nobody has typed into. See {@link setFormValue}.
+		*/
+		watch([
+			element,
+			() => props.value,
+			inputCount
+		], ([el, pinned]) => {
+			if (pinned === void 0) return;
+			setFormValue(el, pinned);
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.value !== void 0, (owned) => control?.setValueOwned(owned), { immediate: true });
 		const onFocus = (event) => {
 			interaction.onFocus();
 			control?.handlers.onFocus(event);
@@ -48,7 +86,7 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const n0 = t0();
 		on(n0, "blur", onBlur);
 		on(n0, "focus", onFocus);
-		on(n0, "input", (e) => unref(control)?.handlers.onInput(e));
+		on(n0, "input", onInput);
 		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
 		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
 		on(n0, "pointerdown", (e) => unref(interaction).onPointerdown(e));

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

@@ -1,6 +1,12 @@
 import type { InputVariants } from "@ropav/styles";
 export interface InputRootProps {
     class?: string;
+    /**
+     * Text in the control. Set here it takes the control over from the surrounding field, so the
+     * caller owns the value even inside a `TextField` — exactly as a `value` prop does in React.
+     * Without a listener to go with it the text is pinned.
+     */
+    value?: string;
     /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
     variant?: InputVariants["variant"];
     /** Whether the control stretches to fill its container. */

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

@@ -18,8 +18,9 @@ import { provideSeparatorContext } from "../separator/separator.context.js";
 import { computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, extend, on, onScopeDispose, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, toValue, unref, useSlots } from "vue";
 import { listboxVariants } from "@ropav/styles";
 //#region src/components/list-box/list-box-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div role=presentation>");
-var t1 = template("<div aria-orientation=vertical data-layout=stack data-orientation=vertical data-slot=list-box role=listbox>", 1);
+var t0 = template("<div aria-disabled=true role=option>");
+var t1 = template("<div role=presentation>");
+var t2 = template("<div aria-orientation=vertical data-layout=stack data-orientation=vertical data-slot=list-box role=listbox>", 1);
 /** Stands in while a virtualized listbox has no data yet, so the layout has something to read. */
 var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "list-box-root",
@@ -243,7 +244,10 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const rendersDropIndicators = computed(() => isVirtualized.value && dropState != null);
 		/** The gap after the last item, which no item's own "before" indicator covers. */
 		const lastItemKey = computed(() => collection.getLastKey());
-		provideSeparatorContext({ elementType: "div" });
+		provideSeparatorContext({
+			elementType: "div",
+			role: "presentation"
+		});
 		const typeahead = useTypeahead({
 			focusedKey: () => selection.focusedKey.value,
 			getKeyForSearch: keyboard.getKeyForSearch,
@@ -289,7 +293,7 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		};
 		const isEmpty = computed(() => collection.size.value === 0);
 		const hasEmptySlot = computed(() => Boolean(callerSlots["empty"]));
-		const n19 = t1();
+		const n19 = t2();
 		renderEffect(() => {
 			const _selection = unref(selection);
 			const _dataAttr = unref(dataAttr);
@@ -313,7 +317,7 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		});
 		setInsertionState(n19, 1);
 		createIf(() => isVirtualized.value, () => {
-			const n16 = t0();
+			const n16 = t1();
 			renderEffect(() => setStyle(n16, unref(scroll)?.contentStyle.value));
 			setInsertionState(n16);
 			createFor(() => unref(virtualizer)?.visibleViews.value, (_for_item0) => {

package/dist/components/menu/index.d.ts

@@ -11,6 +11,7 @@ export declare const Menu: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
         class?: string;
         id?: string;
         ariaLabelledby?: string;
+        ariaLabel?: string;
         selectionMode?: import("../../index.js").SelectionMode;
         selectionBehavior?: import("../../index.js").SelectionBehavior;
         selectedKeys?: "all" | Iterable<import("../../index.js").CollectionKey>;
@@ -49,6 +50,7 @@ export declare const Menu: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
             class?: string;
             id?: string;
             ariaLabelledby?: string;
+            ariaLabel?: string;
             selectionMode?: import("../../index.js").SelectionMode;
             selectionBehavior?: import("../../index.js").SelectionBehavior;
             selectedKeys?: "all" | Iterable<import("../../index.js").CollectionKey>;

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

@@ -3,7 +3,7 @@ import { useMenu } from "../../composables/use-menu.js";
 import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 import { menuVariants } from "@ropav/styles";
 //#region src/components/menu/menu-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div role=presentation>");
+var t0 = template("<div>");
 var t1 = template("<div>", 1);
 var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "menu-root",
@@ -11,6 +11,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		class: {},
 		id: {},
 		ariaLabelledby: {},
+		ariaLabel: {},
 		selectionMode: {},
 		selectionBehavior: {},
 		selectedKeys: {},
@@ -46,6 +47,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			disabledKeys: () => props.disabledKeys,
 			disallowEmptySelection: () => props.disallowEmptySelection,
 			id: () => props.id,
+			label: () => props.ariaLabel,
 			labelledBy: () => props.ariaLabelledby,
 			onAction: (key) => emit("action", key),
 			onClose: () => emit("close"),
@@ -70,6 +72,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		setInsertionState(n5);
 		createIf(() => hasEmptySlot.value && unref(menu).isEmpty.value, () => {
 			const n3 = t0();
+			renderEffect(() => setDynamicProps(n3, [unref(menu).emptyAttributes.value]));
 			setInsertionState(n3);
 			createSlot("empty");
 			return n3;

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

@@ -7,6 +7,8 @@ export interface MenuRootProps {
     id?: string;
     /** The id of the element naming the menu, normally its trigger. */
     ariaLabelledby?: string;
+    /** Names the menu when it has no trigger to point `ariaLabelledby` at. */
+    ariaLabel?: string;
     /** @default "none" */
     selectionMode?: SelectionMode;
     /** @default "toggle" */

package/dist/components/pagination/index.d.ts

@@ -16,6 +16,7 @@ export declare const Pagination: ((__VLS_props: NonNullable<Awaited<typeof __VLS
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
+        ariaLabel?: string;
         class?: string;
         size?: import("@ropav/styles").PaginationVariants["size"];
     } & (typeof globalThis extends {
@@ -212,6 +213,7 @@ export declare const Pagination: ((__VLS_props: NonNullable<Awaited<typeof __VLS
         emit: {};
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
+            ariaLabel?: string;
             class?: string;
             size?: import("@ropav/styles").PaginationVariants["size"];
         } & (typeof globalThis extends {

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

@@ -1,11 +1,12 @@
 import { providePaginationContext } from "./pagination.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template } from "vue";
 import { paginationVariants } from "@ropav/styles";
 //#region src/components/pagination/pagination-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<nav aria-label=pagination data-slot=pagination role=navigation>", 1);
+var t0 = template("<nav data-slot=pagination role=navigation>", 1);
 var pagination_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "pagination-root",
 	props: {
+		ariaLabel: {},
 		class: {},
 		size: {}
 	},
@@ -14,7 +15,11 @@ var pagination_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const slots = computed(() => paginationVariants({ size: props.size }));
 		providePaginationContext({ slots });
 		const n1 = t0();
-		renderEffect(() => setClass(n1, slots.value.base({ class: props.class })));
+		renderEffect(() => {
+			const _props = props;
+			setAttr(n1, "aria-label", _props.ariaLabel ?? "pagination");
+			setClass(n1, slots.value.base({ class: _props.class }));
+		});
 		setInsertionState(n1);
 		createSlot();
 		return n1;

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

@@ -1,5 +1,13 @@
 import type { PaginationVariants } from "@ropav/styles";
 export interface PaginationRootProps {
+    /**
+     * Name for the navigation landmark.
+     *
+     * Overridable because the name is what tells two paginations apart: a list with one set of
+     * controls above it and another below reports the same landmark twice otherwise.
+     * @default "pagination"
+     */
+    ariaLabel?: string;
     class?: string;
     /** Pagination size. @default "md" */
     size?: PaginationVariants["size"];

package/dist/components/popover/popover-trigger.js

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
 import { usePopoverContext } from "./popover.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/popover/popover-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
 var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -13,23 +14,29 @@ var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { slots } = usePopoverContext();
 		const responder = usePressResponder();
 		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const host = shallowRef(null);
+		const hasFocusableContent = shallowRef(false);
 		const setElement = (element) => {
-			responder?.registerElement(element ?? null);
+			host.value = element ?? null;
+			responder?.registerElement(host.value);
 		};
+		watch(host, (element) => {
+			hasFocusableContent.value = Boolean(element?.querySelector(FOCUSABLE_SELECTOR));
+		}, { flush: "post" });
 		const { isFocusVisible, onBlur, onFocus } = useInteractionStates();
 		const press = composePressResponder(responder);
+		const wrapperAttrs = computed(() => hasFocusableContent.value ? void 0 : responder?.attrs.value);
 		const n1 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
-			const _responder = unref(responder);
 			setDynamicProps(n1, [{
 				class: styles.value,
 				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-pressed": _dataAttr(_responder?.isPressed.value),
+				"data-pressed": _dataAttr(unref(responder)?.isPressed.value),
 				"data-slot": "popover-trigger",
-				role: "button",
-				tabindex: "0"
-			}, _responder?.attrs.value]);
+				role: hasFocusableContent.value ? void 0 : "button",
+				tabindex: hasFocusableContent.value ? void 0 : 0
+			}, wrapperAttrs.value]);
 		});
 		setInsertionState(n1);
 		createSlot();

package/dist/components/range-calendar/range-calendar-header.js

@@ -1,7 +1,7 @@
 import { useRangeCalendarContext } from "./range-calendar.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/range-calendar/range-calendar-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<header data-slot=range-calendar-header>", 1);
+var t0 = template("<div data-slot=range-calendar-header>", 1);
 var range_calendar_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "range-calendar-header",
 	props: { class: {} },

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

@@ -1,5 +1,6 @@
+import { focusableIn } from "../../utils/focus.js";
 import { useScrollShadow } from "./use-scroll-shadow.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
+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
 var t0 = template("<div data-slot=scroll-shadow>", 1);
@@ -32,6 +33,10 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const element = shallowRef(null);
+		const needsTabStop = shallowRef(false);
+		watch(element, (host) => {
+			needsTabStop.value = Boolean(host) && focusableIn(host).length === 0;
+		}, { flush: "post" });
 		const styles = computed(() => scrollShadowVariants({
 			hideScrollBar: props.hideScrollBar,
 			orientation: props.orientation,
@@ -78,6 +83,7 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			setAttr(n1, "data-orientation", _props.orientation);
 			setAttr(n1, "data-scroll-shadow-size", _props.size);
 			setStyle(n1, style.value);
+			setProp(n1, "tabindex", needsTabStop.value ? 0 : void 0);
 		});
 		setInsertionState(n1);
 		createSlot();