ropav 0.12.3 → 0.13.0

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

@@ -132,7 +132,8 @@ var autocomplete_filter_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			},
 			selection,
 			shouldFocusOnHover: true,
-			shouldUseVirtualFocus: () => !props.disableVirtualFocus
+			shouldUseVirtualFocus: () => !props.disableVirtualFocus,
+			size: () => root.size.value
 		});
 		provideAutocompleteInputContext({
 			inputAttributes: autocomplete.inputAttributes,

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

@@ -166,6 +166,7 @@ var autocomplete_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 			setTriggerElement: (element) => {
 				triggerElement.value = element;
 			},
+			size: computed(() => props.size),
 			slots: styles,
 			state,
 			triggerElement
@@ -201,7 +202,8 @@ var autocomplete_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 			labelledBy: () => select.labelledBy.value,
 			listId: () => select.listId.value,
 			selection: state.selection,
-			shouldFocusOnHover: true
+			shouldFocusOnHover: true,
+			size: () => props.size
 		});
 		/**
 		* The popover is anchored to the trigger group, not to the button inside it.

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

@@ -1,7 +1,7 @@
 import type { CollectionKey } from "../../composables/use-collection.js";
 import type { UseSelectReturn } from "../../composables/use-select.js";
 import type { SelectedItem, UseSelectStateReturn } from "../../composables/use-select-state.js";
-import type { autocompleteVariants } from "@ropav/styles";
+import type { AutocompleteVariants, autocompleteVariants } from "@ropav/styles";
 import type { ComputedRef, ShallowRef } from "vue";
 export interface AutocompleteContext {
     slots: ComputedRef<ReturnType<typeof autocompleteVariants>>;
@@ -14,6 +14,8 @@ export interface AutocompleteContext {
     /** What the trigger shows when nothing is chosen, already resolved to the localized default. */
     placeholder: ComputedRef<string>;
     isDisabled: ComputedRef<boolean>;
+    /** The root's size, which `AutocompleteFilter` hands on to the listbox in the popover. */
+    size: ComputedRef<AutocompleteVariants["size"] | undefined>;
     /**
      * The group the trigger renders, which the popover is measured and positioned against.
      *

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

@@ -189,10 +189,7 @@ var combo_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			if (state.selectionMode.value === "single") return texts[0] ?? "";
 			return new Intl.ListFormat(locale.value.locale).format(texts);
 		});
-		const styles = computed(() => comboBoxVariants({
-			fullWidth: props.fullWidth,
-			size: props.size
-		}));
+		const styles = computed(() => comboBoxVariants({ fullWidth: props.fullWidth }));
 		const isDisabled = computed(() => Boolean(props.isDisabled));
 		/**
 		* The options that matched, handed to whoever writes the listbox.
@@ -245,7 +242,8 @@ var combo_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			},
 			selection: state.selection,
 			shouldFocusOnHover: true,
-			shouldUseVirtualFocus: true
+			shouldUseVirtualFocus: true,
+			size: () => props.size
 		});
 		/**
 		* The popover is anchored to the group around the field, not to the chevron inside it.

package/dist/components/combo-box/combo-box.types.d.ts

@@ -4,7 +4,7 @@ import type { ValidationBehavior, ValidationFunction } from "../../composables/u
 import type { SelectSelectionMode, SelectedItem, SelectedValue } from "../../composables/use-select-state.js";
 import type { DisabledBehavior } from "../../composables/use-selection-manager.js";
 import type { Placement } from "../../utils/position.js";
-import type { ComboBoxVariants } from "@ropav/styles";
+import type { InputVariants } from "@ropav/styles";
 /**
  * A combo box is a text field that filters a list of options, and the text is part of the value.
  *
@@ -95,12 +95,15 @@ export interface ComboBoxRootProps<T = unknown> {
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;
-    /** How tall the field stands, matching a button of the same size. @default "md" */
-    size?: ComboBoxVariants["size"];
+    /**
+     * How tall the field stands, matching a button of the same size. Handed to the `Input` inside and
+     * to the listbox in the popover, unless either declares one of its own. @default "md"
+     */
+    size?: InputVariants["size"];
     /** Whether the combo box stretches to fill its container. */
     fullWidth?: boolean;
     /** Visual variant the `Input` inside picks up. @default "primary" */
-    variant?: "primary" | "secondary";
+    variant?: InputVariants["variant"];
 }
 export interface ComboBoxRootEmits {
     change: [value: SelectedValue];

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

@@ -59,11 +59,6 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		* built the collection out of its own `items`, so naming `T` here restates what went in.
 		*/
 		const itemOf = (node) => node?.content;
-		const styles = computed(() => listboxVariants({
-			class: props.class,
-			size: props.size,
-			variant: props.variant
-		}));
 		/**
 		* The state this listbox runs on, which is not always its own.
 		*
@@ -72,6 +67,12 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		* one is there the listbox borrows it whole rather than keeping a second copy that would drift.
 		*/
 		const owner = useListBoxStateContext();
+		const resolvedSize = computed(() => props.size ?? toValue(owner?.size));
+		const styles = computed(() => listboxVariants({
+			class: props.class,
+			size: resolvedSize.value,
+			variant: props.variant
+		}));
 		const ownListId = useId$1();
 		const collectionId = useId$1();
 		const listId = computed(() => toValue(owner?.listId) ?? ownListId.value);

package/dist/components/list-box/list-box.context.d.ts

@@ -5,6 +5,7 @@ import type { UseDroppableCollectionStateReturn } from "../../composables/use-dr
 import type { UseListKeyboardReturn } from "../../composables/use-list-keyboard.js";
 import type { FocusStrategy } from "../../composables/use-overlay-trigger-state.js";
 import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
+import type { ListBoxVariants } from "@ropav/styles";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface ListBoxContext {
     collection: UseCollectionReturn;
@@ -66,6 +67,13 @@ export interface ListBoxStateContext {
     ariaLabel?: MaybeRefOrGetter<string | undefined>;
     /** Where focus lands when the listbox appears, given how its owner was opened. */
     autoFocus?: MaybeRefOrGetter<boolean | FocusStrategy | undefined>;
+    /**
+     * The owner's size, which the listbox's rows take when it declares none of its own.
+     *
+     * Handed down rather than reached by a selector: a picker's listbox is teleported out of the
+     * picker's DOM along with the popover, so no rule keyed on the root can find its rows.
+     */
+    size?: MaybeRefOrGetter<ListBoxVariants["size"] | undefined>;
     /** Whether hovering an option moves focus to it. @default false */
     shouldFocusOnHover?: MaybeRefOrGetter<boolean | undefined>;
     /**

package/dist/components/segmented-control/segmented-control.types.d.ts

@@ -6,7 +6,7 @@ export interface SegmentedControlRootProps {
     /**
      * The control's scale.
      *
-     * The track lands on 32/36/40px, the three heights a button and a field stand at, so a
+     * The track lands on 28/32/36/40px, the four heights a button and a field stand at, so a
      * segmented control lines up with either.
      *
      * @default "md"

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

@@ -170,7 +170,8 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			labelledBy: () => select.labelledBy.value,
 			listId: () => select.listId.value,
 			selection: state.selection,
-			shouldFocusOnHover: true
+			shouldFocusOnHover: true,
+			size: () => props.size
 		});
 		provideOverlayTargetContext({
 			autoFocus: computed(() => state.focusStrategy.value ?? true),

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

@@ -60,7 +60,10 @@ export interface SelectRootProps<T = unknown> {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
     variant?: SelectVariants["variant"];
-    /** How tall the trigger stands, matching a button of the same size. @default "md" */
+    /**
+     * How tall the trigger stands, matching a button of the same size. Handed to the listbox in the
+     * popover, unless it declares one of its own. @default "md"
+     */
     size?: SelectVariants["size"];
     fullWidth?: boolean;
 }

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

@@ -1,9 +1,10 @@
+import type { InputVariants } from "@ropav/styles";
 import type { ComputedRef } from "vue";
 export interface TextFieldContext {
     /** Visual variant the control inside picks up when it declares none of its own. */
-    variant: ComputedRef<"primary" | "secondary" | undefined>;
+    variant: ComputedRef<InputVariants["variant"] | undefined>;
     /** Size the control inside picks up when it declares none of its own. */
-    size: ComputedRef<"sm" | "md" | "lg" | undefined>;
+    size: ComputedRef<InputVariants["size"] | undefined>;
 }
 /**
  * Carries the variant alone, kept apart from the control context that carries the behaviour.

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

@@ -1,13 +1,14 @@
 import type { ValidationBehavior, ValidationDetails, ValidationFunction } from "../../composables/use-form-validation-state.js";
+import type { InputVariants } from "@ropav/styles";
 export interface TextFieldRootProps {
     class?: string;
     /** Visual variant handed down to the control inside. @default "primary" */
-    variant?: "primary" | "secondary";
+    variant?: InputVariants["variant"];
     /**
      * How tall the control inside stands, matching a button of the same size. Handed to the control
      * unless it declares one of its own. @default "md"
      */
-    size?: "sm" | "md" | "lg";
+    size?: InputVariants["size"];
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** Text in the field. Makes it controlled. */