ropav 0.1.5 → 0.1.6

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

@@ -1,8 +1,8 @@
 import { ColorInputProps } from './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<ColorInputProps & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -16,7 +16,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } & {
         'eye-dropper-icon'?: (props: {}) => any;
     };
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: string) => void);
+    emit: ((evt: "update:modelValue", value: string) => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/color-input/useColorInput.d.ts

@@ -20,7 +20,7 @@ export declare function useColorInput(props: Readonly<ColorInputProps>, emit: Us
     hasInvalidColor: import('vue').ComputedRef<boolean | undefined>;
     isInvalid: import('vue').ComputedRef<boolean | undefined>;
     colorValidationMessage: import('vue').ComputedRef<string | undefined>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     popoverDisabled: import('vue').ComputedRef<boolean>;
 };

package/dist/components/dialog/dialog-core.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref, VaporComponentInstance } from 'vue';
-import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
+import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
 import { DialogCloseReason } from './types.js';
 export interface DialogRootContext {
     isOpen: ComputedRef<boolean>;

package/dist/components/dropdown-menu/dropdown-menu-content.d.ts

@@ -5,8 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
             originalEvent: KeyboardEvent;
         }>) => any) | undefined;
         onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
-        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -21,7 +21,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     };
     emit: ((evt: "escapeKeyDown", event: CustomEvent<{
         originalEvent: KeyboardEvent;
-    }>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
+    }>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/dropdown-menu/dropdown-menu-primitive-core.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref, VaporComponentInstance } from 'vue';
-import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
+import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
 import { FloatingReference } from '../floating/types.js';
 import { DropdownMenuCloseOptions, DropdownMenuFocusTarget, DropdownMenuInteractOutsideEvent, DropdownMenuItemPrimitiveProps, DropdownMenuItemValue, DropdownMenuOpenOptions, DropdownMenuPlacement, DropdownMenuPoint, DropdownMenuSelectEvent, DropdownMenuVirtualAnchor } from './types.js';
 export type ElementReference = FloatingReference;

package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts

@@ -5,8 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
             originalEvent: KeyboardEvent;
         }>) => any) | undefined;
         onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
-        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -21,7 +21,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     };
     emit: ((evt: "escapeKeyDown", event: CustomEvent<{
         originalEvent: KeyboardEvent;
-    }>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
+    }>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,11 +1,11 @@
 import { DropdownMenuItem, DropdownMenuItemSlotProps, DropdownMenuInteractOutsideEvent, DropdownMenuProps, DropdownMenuSelectEvent, DropdownMenuSlotProps } from './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<DropdownMenuProps & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onSelect?: ((item: DropdownMenuItem, event: DropdownMenuSelectEvent) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
-        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -16,7 +16,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
         item?(props: DropdownMenuItemSlotProps): unknown;
         empty?(): unknown;
     };
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "select", item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
+    emit: ((evt: "select", item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts

@@ -1,12 +1,11 @@
 import { Ref } from 'vue';
-import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
+import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
 import { DropdownMenuCloseOptions, DropdownMenuFocusTarget, DropdownMenuInteractOutsideEvent, DropdownMenuItem, DropdownMenuOpenOptions, DropdownMenuProps, DropdownMenuSelectEvent } from './types.js';
 import { ItemPath } from './dropdown-menu-utils.js';
 type BooleanSource = Readonly<Ref<boolean>>;
 type UseDropdownMenuDisclosureOptions = {
     props: Readonly<DropdownMenuProps>;
     emit: {
-        openChange?: (open: boolean) => void;
         select?: (item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void;
         pointerDownOutside?: (event: DropdownMenuInteractOutsideEvent) => void;
         focusOutside?: (event: DropdownMenuInteractOutsideEvent) => void;
@@ -15,7 +14,7 @@ type UseDropdownMenuDisclosureOptions = {
     rootRef: Ref<HTMLElement | null>;
     menuRef: Ref<HTMLElement | null>;
     targetRef: Readonly<Ref<Element | null>>;
-    uncontrolledOpen: Ref<boolean>;
+    setControllableOpen: (open: boolean) => void;
     isDisabled: BooleanSource;
     isOpen: BooleanSource;
     isVisible: BooleanSource;
@@ -28,7 +27,7 @@ type UseDropdownMenuDisclosureOptions = {
     focusTrigger: () => void;
     layer: OverlayLayerContext;
 };
-export declare function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer, }: UseDropdownMenuDisclosureOptions): {
+export declare function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, setControllableOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer, }: UseDropdownMenuDisclosureOptions): {
     open: (options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) => void;
     close: (options?: DropdownMenuCloseOptions) => void;
     toggle: () => void;

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

@@ -1,7 +1,7 @@
 import { InputProps } from './types.js';
 export declare function useInput(props: Readonly<InputProps>, emitUpdate: (value: string) => void): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     onInput: (e: Event) => void;
     focusInput: (e: MouseEvent) => void;

package/dist/components/number-input/useNumberInput.d.ts

@@ -15,7 +15,7 @@ export declare function normalizeNumberInputControlsPosition(position: NumberInp
 export declare function normalizeNumberInputTextAlign(textAlign: NumberInputTextAlign | undefined): NumberInputTextAlign;
 export declare function getModelInputValue(value: NumberInputValue): string;
 export declare function useNumberInput(props: Readonly<NumberInputProps>, emitUpdate: (value: NumberInputValue) => void, getValue?: () => NumberInputValue): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     bounds: import('vue').ComputedRef<NumberInputBounds>;
     nativeStep: import('vue').ComputedRef<number>;

package/dist/components/progress/useProgress.d.ts

@@ -13,7 +13,7 @@ export declare function normalizeProgressBounds(min: number, max: number): {
 export declare function normalizeProgressValue(value: number | null | undefined, min: number, max: number): number;
 export declare function getProgressValuePercent(value: number, min: number, max: number): number;
 export declare function useProgress(props: ProgressStateProps): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     rootStyle: import('vue').ComputedRef<CSSProperties>;
     isIndeterminate: import('vue').ComputedRef<boolean>;

package/dist/components/radio/useRadio.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { RadioGroupProps, RadioProps } from './types.js';
 export declare function useRadio(props: Readonly<RadioProps>, emitChange: (event: Event) => void): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     name: import('vue').ComputedRef<string | undefined>;
     form: import('vue').ComputedRef<string | undefined>;
     groupInputAttrs: import('vue').ComputedRef<import('vue').InputHTMLAttributes | undefined>;
@@ -16,7 +16,7 @@ export declare function useRadio(props: Readonly<RadioProps>, emitChange: (event
     focus: (options?: FocusOptions) => void;
 };
 export declare function useRadioGroup(props: Readonly<RadioGroupProps>, emitUpdate: (value: string | number | null) => void): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     value: import('vue').ComputedRef<string | number | null>;
 };

package/dist/components/scroll-area/scrollAreaCore.d.ts

@@ -1,6 +1,8 @@
 import { ScrollAreaScrollbars, ScrollAreaType } from './types.js';
 export type ScrollAxis = 'x' | 'y';
+export type ScrollDirection = 'ltr' | 'rtl';
 export interface ScrollAreaMetrics {
+    direction: ScrollDirection;
     clientWidth: number;
     clientHeight: number;
     scrollWidth: number;
@@ -15,6 +17,9 @@ export interface ScrollAreaMetrics {
     verticalThumbOffset: number;
 }
 export declare function clamp(value: number, min: number, max: number): number;
+export declare function getScrollDirection(viewport: HTMLElement): ScrollDirection;
+export declare function getLogicalHorizontalPosition(scrollLeft: number, maxPosition: number, direction: ScrollDirection): number;
+export declare function getRawHorizontalPosition(position: number, maxPosition: number, direction: ScrollDirection): number;
 export declare function isAxisEnabled(scrollbars: ScrollAreaScrollbars | false | undefined, axis: ScrollAxis): boolean;
 export declare function isScrollbarActive(type: ScrollAreaType, enabled: boolean, overflowing: boolean): boolean;
 export declare function getThumbGeometry(trackSize: number, viewportSize: number, scrollSize: number): {

package/dist/components/scroll-area/types.d.ts

@@ -8,14 +8,18 @@ export declare const scrollAreaScrollbars: readonly ["x", "y", "both"];
 export type ScrollAreaScrollbars = (typeof scrollAreaScrollbars)[number];
 export type ScrollAreaOrientation = 'horizontal' | 'vertical';
 export interface ScrollAreaPosition {
+    /** Logical horizontal offset: zero at inline-start and increasing toward inline-end. */
     x: number;
+    /** Vertical offset from the top edge. */
     y: number;
 }
 export interface ScrollAreaSlotProps {
     position: ScrollAreaPosition;
     overflowX: boolean;
     overflowY: boolean;
+    /** Uses the native `Element.scrollTo()` coordinate semantics. */
     scrollTo: (options: ScrollToOptions) => void;
+    /** Uses the native `Element.scrollBy()` coordinate semantics. */
     scrollBy: (options: ScrollToOptions) => void;
     update: () => void;
 }

package/dist/components/scroll-area/useScrollArea.d.ts

@@ -35,6 +35,7 @@ export declare function useScrollArea(options: UseScrollAreaOptions): {
     horizontalScrollbarRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     verticalScrollbarRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     metrics: {
+        direction: import('./scrollAreaCore.js').ScrollDirection;
         clientWidth: number;
         clientHeight: number;
         scrollWidth: number;

package/dist/components/scroll-area/useScrollAreaMetrics.d.ts

@@ -11,6 +11,7 @@ interface UseScrollAreaMetricsOptions {
 }
 export declare function useScrollAreaMetrics(options: UseScrollAreaMetricsOptions): {
     metrics: {
+        direction: import('./scrollAreaCore.js').ScrollDirection;
         clientWidth: number;
         clientHeight: number;
         scrollWidth: number;
@@ -26,7 +27,9 @@ export declare function useScrollAreaMetrics(options: UseScrollAreaMetricsOption
     };
     position: import('vue').ComputedRef<ScrollAreaPosition>;
     update: () => void;
+    updatePosition: (viewport?: HTMLElement | null) => void;
     scheduleUpdate: () => void;
+    schedulePositionUpdate: () => void;
     getPosition: (axis: ScrollAxis) => number;
     getMaxPosition: (axis: ScrollAxis) => number;
     getOverflow: (axis: ScrollAxis) => boolean;

package/dist/components/scroll-area/useScrollAreaPresentation.d.ts

@@ -16,6 +16,7 @@ export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProp
         'aria-disabled': true | undefined;
         'aria-hidden': true | undefined;
         'data-orientation': string;
+        'data-direction': import('./scrollAreaCore.js').ScrollDirection;
         'data-active': "" | undefined;
         'data-visible': "" | undefined;
         class?: import('vue').ClassValue;
@@ -32,6 +33,7 @@ export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProp
         'aria-disabled': true | undefined;
         'aria-hidden': true | undefined;
         'data-orientation': string;
+        'data-direction': import('./scrollAreaCore.js').ScrollDirection;
         'data-active': "" | undefined;
         'data-visible': "" | undefined;
         class?: import('vue').ClassValue;
@@ -41,6 +43,7 @@ export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProp
     verticalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
     cornerAttrs: import('vue').ComputedRef<{
         'aria-hidden': boolean;
+        'data-direction': import('./scrollAreaCore.js').ScrollDirection;
         'data-visible': "" | undefined;
         class?: import('vue').ClassValue;
         style?: import('vue').StyleValue;

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

@@ -7,8 +7,9 @@ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpda
     triggerRef: Ref<HTMLElement | null, HTMLElement | null>;
     isOpen: Ref<boolean, boolean>;
     selectId: string;
+    popupId: string;
     listboxId: string;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     visibleOptions: import('vue').ComputedRef<SelectOption[]>;
     focusedIndex: import('vue').ComputedRef<number>;
     activeDescendantId: import('vue').ComputedRef<string | undefined>;

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

@@ -2,13 +2,7 @@ import { SelectProps } from './types.js';
 export type SelectValue = string | number | null;
 export declare function useSelectNativeValue(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void): {
     nativeSelectRef: import('vue').Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
-    controllable: {
-        initialValue: SelectValue;
-        isControlled: import('vue').ComputedRef<boolean>;
-        value: import('vue').ComputedRef<SelectValue>;
-        setValue: (nextValue: SelectValue) => void;
-        resetValue: (nextValue?: SelectValue) => void;
-    };
+    controllable: import('../../composables/useControllableValue.js').UseControllableValueReturn<SelectValue>;
     getNativeValue: (select: HTMLSelectElement) => string | number | null;
     syncNativeSelection: (value: SelectValue) => void;
     requestValueUpdate: (value: SelectValue) => void;

package/dist/components/slider/sliderCore.d.ts

@@ -6,7 +6,8 @@ export interface SliderBounds {
 }
 interface SliderMarkStyleProperties {
     position: `--_rp-${string}`;
-    colors: readonly `--_rp-${string}`[];
+    decorativeColors: readonly `--_rp-${string}`[];
+    foregroundColors: readonly `--_rp-${string}`[];
 }
 interface SliderThumbStyleProperties {
     size: `--${string}`;

package/dist/components/slider/useRangeSlider.d.ts

@@ -13,7 +13,7 @@ export declare function normalizeRangeSliderMinRange(minRange: number, min: numb
 export declare function normalizeRangeSliderValue(value: RangeSliderValue, min: number, max: number, step: number | 'any', minRange?: number): RangeSliderValue;
 export declare function getClosestRangeSliderThumb(value: number, range: RangeSliderValue, activeThumb?: RangeSliderThumb): RangeSliderThumb;
 export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate: (value: RangeSliderValue) => void, getValue?: () => RangeSliderValue): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     nativeMin: import('vue').ComputedRef<RangeSliderValue>;
     nativeMax: import('vue').ComputedRef<RangeSliderValue>;
     nativeStep: import('vue').ComputedRef<number | "any">;

package/dist/components/slider/useSlider.d.ts

@@ -10,7 +10,7 @@ type SliderStateProps = Readonly<SliderProps & {
     orientation: NonNullable<SliderProps['orientation']>;
 }>;
 export declare function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void, getValue?: () => number): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     nativeMin: import('vue').ComputedRef<number>;
     nativeMax: import('vue').ComputedRef<number>;
     nativeStep: import('vue').ComputedRef<number | "any">;

package/dist/components/switch/useSwitch.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { SwitchProps } from './types.js';
 export declare function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void, getValue?: () => boolean): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
     onChange: (e: Event) => void;

package/dist/components/textarea/useTextarea.d.ts

@@ -1,7 +1,7 @@
 import { TextareaProps } from './types.js';
 export declare function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void, getValue?: () => string): {
     textareaRef: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     nativeRows: import('vue').ComputedRef<number | undefined>;
     onInput: (e: Event) => void;

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useControllableValue } from './useControllableValue.js';
+export type { UseControllableValueOptions, UseControllableValueReturn, } from './useControllableValue.js';

package/dist/composables/index.js

@@ -0,0 +1,2 @@
+import { t as useControllableValue } from "../useControllableValue.js";
+export { useControllableValue };

package/dist/composables/useControllableValue.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef } from 'vue';
+export interface UseControllableValueOptions<T> {
+    modelValue: () => T | undefined;
+    defaultValue: () => T;
+    onChange: (value: T) => void;
+}
+export interface UseControllableValueReturn<T> {
+    initialValue: T;
+    isControlled: ComputedRef<boolean>;
+    value: ComputedRef<T>;
+    setValue: (value: T) => void;
+    resetValue: (value?: T) => void;
+}
+export declare function useControllableValue<T>(options: Readonly<UseControllableValueOptions<T>>): UseControllableValueReturn<T>;

package/dist/dialog.js

@@ -1,3 +1,4 @@
+import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
 import { i as useOverlayLayerBranch, n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
@@ -340,8 +341,12 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const generatedId = useId();
-		const uncontrolledOpen = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (value) => emit("update:open", value)
+		});
+		const isOpen = controllableOpen.value;
 		const modal = computed(() => props.modal);
 		const closeOnEscape = computed(() => props.closeOnEscape);
 		const closeOnOutsideClick = computed(() => props.closeOnOutsideClick);
@@ -366,9 +371,7 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 			})
 		});
 		function setOpen(value) {
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolledOpen.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		function rememberFocus() {
 			if (typeof document === "undefined" || restoreFocusTo) return;

package/dist/dropdown-menu.js

@@ -1,7 +1,8 @@
 import './dropdown-menu.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as bem } from "./bem.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
@@ -339,14 +340,17 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
-		const uncontrolled = ref(props.defaultValue);
-		const value = computed(() => props.modelValue ?? uncontrolled.value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = controllable.value;
 		const checked = computed(() => value.value === "indeterminate" ? "mixed" : value.value);
 		const state = computed(() => value.value === "indeterminate" ? "indeterminate" : value.value ? "checked" : "unchecked");
 		function toggleChecked() {
 			const nextValue = value.value === "indeterminate" ? true : !value.value;
-			if (props.modelValue === void 0) uncontrolled.value = nextValue;
-			emit("update:modelValue", nextValue);
+			controllable.setValue(nextValue);
 		}
 		provide(checkedKey, {
 			state,
@@ -765,7 +769,6 @@ var dropdown_menu_context_trigger_default = /* @__PURE__ */ defineVaporComponent
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
 			"aria-controls": root.contentId.value,
-			"aria-expanded": root.isOpen.value,
 			"aria-haspopup": "menu",
 			"aria-disabled": optionalAttr(isDisabled.value),
 			"data-state": root.isOpen.value ? "open" : "closed",
@@ -957,12 +960,17 @@ var dropdown_menu_radio_group_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		useRequiredInject(menuKey, "RpDropdownMenuRadioGroup");
-		const uncontrolled = ref(props.defaultValue);
-		const value = computed(() => props.modelValue === void 0 ? uncontrolled.value : props.modelValue);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => {
+				if (value !== null) emit("update:modelValue", value);
+			}
+		});
+		const value = controllable.value;
 		function select(nextValue) {
 			if (value.value === nextValue) return;
-			if (props.modelValue === void 0) uncontrolled.value = nextValue;
-			emit("update:modelValue", nextValue);
+			controllable.setValue(nextValue);
 		}
 		provide(radioGroupKey, {
 			value,
@@ -976,7 +984,7 @@ var dropdown_menu_radio_group_default = /* @__PURE__ */ defineVaporComponent({
 			"aria-labelledby": props.ariaLabelledby
 		}));
 		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot("default", { value: () => value.value });
+			return createSlot("default", { value: () => unref(value) });
 		}, { _: 8 }), 1);
 	}
 });
@@ -1089,8 +1097,12 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const generatedId = useId();
 		const id = computed(() => props.id ?? `${generatedId}-dropdown-menu`);
-		const uncontrolledOpen = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (nextOpen) => emit("update:open", nextOpen)
+		});
+		const isOpen = controllableOpen.value;
 		const disabled = computed(() => props.disabled);
 		const modal = computed(() => props.modal);
 		const trigger = ref(null);
@@ -1115,9 +1127,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		});
 		function setOpen(value) {
 			if (value && disabled.value) return;
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolledOpen.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		function rememberFocus() {
 			if (typeof document === "undefined" || returnFocusElement) return;
@@ -1253,16 +1263,18 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const parentMenu = useRequiredInject(menuKey, "RpDropdownMenuSub");
-		const uncontrolled = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolled.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (open) => emit("update:open", open)
+		});
+		const isOpen = controllableOpen.value;
 		const trigger = ref(null);
 		const contentId = ref();
 		const actualPlacement = ref("right-start");
 		const pendingFocus = ref(false);
 		function setOpen(value) {
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolled.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		const context = {
 			isOpen,
@@ -1294,7 +1306,7 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		});
 		onBeforeUnmount(() => parentMenu.unregisterSub(context));
 		return createSlot("default", {
-			isOpen: () => isOpen.value,
+			isOpen: () => unref(isOpen),
 			open: () => context.open,
 			close: () => context.close
 		});
@@ -1682,12 +1694,10 @@ var dropdown_menu_items_default = /* @__PURE__ */ defineVaporComponent({
 });
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
-function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
+function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, setControllableOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
 	function setOpen(nextOpen) {
 		if (nextOpen && isDisabled.value) return;
-		const previousOpen = isOpen.value;
-		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
-		if (previousOpen !== nextOpen) emit.openChange?.(nextOpen);
+		if (isOpen.value !== nextOpen) setControllableOpen(nextOpen);
 	}
 	function resetMenuFocus() {
 		resetFocus();
@@ -2368,7 +2378,11 @@ function useDropdownMenu(props, emit = {}) {
 	const rootRef = ref(null);
 	const menuRef = ref(null);
 	const arrowRef = ref(null);
-	const uncontrolledOpen = ref(false);
+	const controllableOpen = useControllableValue({
+		modelValue: () => props.open,
+		defaultValue: () => false,
+		onChange: (open) => emit.openChange?.(open)
+	});
 	const generatedId = useId();
 	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
 	const placement = computed(() => props.placement ?? "bottom-start");
@@ -2379,7 +2393,7 @@ function useDropdownMenu(props, emit = {}) {
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const visibleItems = computed(() => props.items ?? []);
 	const isDisabled = computed(() => Boolean(props.disabled));
-	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const isOpen = controllableOpen.value;
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const layer = useOverlayLayer({
 		active: isVisible,
@@ -2445,7 +2459,7 @@ function useDropdownMenu(props, emit = {}) {
 		rootRef,
 		menuRef,
 		targetRef: targetElement,
-		uncontrolledOpen,
+		setControllableOpen: controllableOpen.setValue,
 		isDisabled,
 		isOpen,
 		isVisible,

package/dist/field.js

@@ -1,6 +1,6 @@
 import './field.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/field/useField.ts