ropav 0.1.1 → 0.1.3

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from 'vue';
+import { ScrollAreaController } from './useScrollArea.js';
+import { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaSlotProps } from './types.js';
+export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProps>, scrollArea: ScrollAreaController): {
+    rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
+    viewportAttrs: import('vue').ComputedRef<HTMLAttributes>;
+    contentAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    horizontalScrollbarAttrs: import('vue').ComputedRef<{
+        role: string;
+        tabindex: number;
+        'aria-controls': string | undefined;
+        'aria-orientation': ScrollAreaOrientation;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-disabled': true | undefined;
+        'aria-hidden': true | undefined;
+        'data-orientation': string;
+        'data-active': "" | undefined;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    verticalScrollbarAttrs: import('vue').ComputedRef<{
+        role: string;
+        tabindex: number;
+        'aria-controls': string | undefined;
+        'aria-orientation': ScrollAreaOrientation;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-disabled': true | undefined;
+        'aria-hidden': true | undefined;
+        'data-orientation': string;
+        'data-active': "" | undefined;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    horizontalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    verticalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    cornerAttrs: import('vue').ComputedRef<{
+        'aria-hidden': boolean;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    slotProps: import('vue').ComputedRef<ScrollAreaSlotProps>;
+};

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

@@ -0,0 +1,27 @@
+import { Ref } from 'vue';
+import { ScrollAxis } from './scrollAreaCore.js';
+import { ScrollAreaProps } from './types.js';
+interface UseScrollAreaVisibilityOptions {
+    props: Readonly<ScrollAreaProps>;
+    rootRef: Ref<HTMLElement | null>;
+    horizontalEnabled: Readonly<Ref<boolean>>;
+    verticalEnabled: Readonly<Ref<boolean>>;
+    overflowX: () => boolean;
+    overflowY: () => boolean;
+}
+export declare function useScrollAreaVisibility(options: UseScrollAreaVisibilityOptions): {
+    renderHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+    renderVerticalScrollbar: import('vue').ComputedRef<boolean>;
+    horizontalScrollbarActive: import('vue').ComputedRef<boolean>;
+    verticalScrollbarActive: import('vue').ComputedRef<boolean>;
+    horizontalScrollbarVisible: import('vue').ComputedRef<boolean>;
+    verticalScrollbarVisible: import('vue').ComputedRef<boolean>;
+    showDuringScroll: () => void;
+    setDraggingAxis: (axis: ScrollAxis | null) => void;
+    onPointerenter: () => void;
+    onPointerleave: () => void;
+    onFocusin: () => void;
+    onFocusout: (event: FocusEvent) => void;
+};
+export type ScrollAreaVisibilityController = ReturnType<typeof useScrollAreaVisibility>;
+export {};

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

@@ -1,15 +1,16 @@
+import { Ref } from 'vue';
 import { SelectOption, SelectProps } from './types.js';
 type SelectValue = string | number | null;
 type SelectBehaviorProps = Omit<SelectProps, 'classNames' | 'styles' | 'inputAttrs'>;
-export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpdate: (value: SelectValue) => void, getValue?: () => SelectValue): {
-    selectRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    isOpen: import('vue').Ref<boolean, boolean>;
+export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpdate: (value: SelectValue) => void, getValue?: () => SelectValue, triggerRef?: Ref<HTMLElement | null>): {
+    selectRef: Ref<HTMLElement | null, HTMLElement | null>;
+    triggerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    isOpen: Ref<boolean, boolean>;
     selectId: string;
     listboxId: string;
     control: import('../../composables/useControlState.js').ControlState;
     visibleOptions: import('vue').ComputedRef<SelectOption[]>;
-    focusedIndex: import('vue').Ref<number, number>;
+    focusedIndex: Ref<number, number>;
     activeDescendantId: import('vue').ComputedRef<string | undefined>;
     rootClass: import('vue').ComputedRef<string[]>;
     hasValue: import('vue').ComputedRef<boolean>;
@@ -20,6 +21,7 @@ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpda
     selectOption: (option: SelectOption) => void;
     clearSelection: () => void;
     onOptionMouseenter: (option: SelectOption, index: number) => void;
+    onFocusout: (event: FocusEvent) => void;
     onTriggerKeydown: (e: KeyboardEvent) => void;
 };
 export {};

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

@@ -0,0 +1,9 @@
+import { Ref, SelectHTMLAttributes } from 'vue';
+import { SelectProps } from './types.js';
+import { SelectValue } from './useSelectNativeValue.js';
+export declare function useSelectNativeControl(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void, triggerRef: Readonly<Ref<HTMLElement | null>>): {
+    nativeSelectRef: Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
+    selectedValue: import('vue').ComputedRef<SelectValue>;
+    nativeInputAttrs: import('vue').ComputedRef<SelectHTMLAttributes>;
+    requestValueUpdate: (value: SelectValue) => void;
+};

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

@@ -0,0 +1,15 @@
+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;
+    };
+    getNativeValue: (select: HTMLSelectElement) => string | number | null;
+    syncNativeSelection: (value: SelectValue) => void;
+    requestValueUpdate: (value: SelectValue) => void;
+};

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

@@ -1,4 +1,4 @@
 export { default as Slider } from './slider.js';
 export { default as RangeSlider } from './range-slider.js';
 export { rangeSliderParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, } from './types.js';
-export type { RangeSliderAriaValueText, RangeSliderEndpointValueText, RangeSliderInputAttrs, RangeSliderPart, RangeSliderProps, RangeSliderThumb, RangeSliderValue, RangeSliderValidationMessage, SliderColor, SliderInputAttrs, SliderMark, SliderMarkColor, SliderMarkInput, SliderOrientation, SliderPart, SliderProps, SliderPresetColor, SliderSize, SliderThumbStyle, SliderTooltip, SliderTooltipMode, SliderTooltipOptions, SliderValueFormatter, } from './types.js';
+export type { RangeSliderAriaValueText, RangeSliderEndpointValueText, RangeSliderInputAttrs, RangeSliderPart, RangeSliderProps, RangeSliderThumb, RangeSliderThumbOptions, RangeSliderTrackSlotProps, RangeSliderTooltip, RangeSliderTooltipOptions, RangeSliderValue, RangeSliderValidationMessage, SliderColor, SliderInputAttrs, SliderMark, SliderMarkColor, SliderMarkInput, SliderOrientation, SliderPart, SliderProps, SliderPresetColor, SliderSize, SliderThumb, SliderThumbMode, SliderThumbOptions, SliderTrackSlotProps, SliderTooltip, SliderTooltipAnchor, SliderTooltipMode, SliderTooltipOptions, SliderTooltipSlotProps, SliderValueFormatter, } from './types.js';

package/dist/components/slider/range-slider.d.ts

@@ -1,4 +1,4 @@
-import { RangeSliderProps, RangeSliderValue } from './types.js';
+import { RangeSliderProps, RangeSliderTrackSlotProps } 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<RangeSliderProps & {
         "onUpdate:modelValue"?: ((value: [number, number]) => any) | undefined;
@@ -11,21 +11,17 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     }>) => void;
     attrs: any;
     slots: {
-        default?: (props: {}) => any;
-    } & {
-        value?: (props: {
-            value: RangeSliderValue;
-            formattedValue: [string | number, string | number];
-            percent: RangeSliderValue;
-        }) => any;
-    } & {
-        thumb?: (props: {
+        default?(): unknown;
+        value?(props: Pick<RangeSliderTrackSlotProps, "value" | "formattedValue" | "percent">): unknown;
+        'track-underlay'?(props: RangeSliderTrackSlotProps): unknown;
+        'track-overlay'?(props: RangeSliderTrackSlotProps): unknown;
+        thumb?(props: {
             thumb: "lower" | "upper";
             index: number;
             value: number;
             formattedValue: string | number;
             percent: number;
-        }) => any;
+        }): unknown;
     };
     emit: (evt: "update:modelValue", value: [number, number]) => void;
 }>) => import('vue').VNode & {

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

@@ -1,4 +1,4 @@
-import { SliderProps } from './types.js';
+import { SliderProps, SliderTooltipSlotProps, SliderTrackSlotProps } 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<SliderProps & {
         "onUpdate:modelValue"?: ((value: number) => any) | undefined;
@@ -11,19 +11,12 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     }>) => void;
     attrs: any;
     slots: {
-        default?: (props: {}) => any;
-    } & {
-        value?: (props: {
-            value: number;
-            formattedValue: string | number;
-            percent: number;
-        }) => any;
-    } & {
-        thumb?: (props: {
-            value: number;
-            formattedValue: string | number;
-            percent: number;
-        }) => any;
+        default?(): unknown;
+        value?(props: Pick<SliderTrackSlotProps, "value" | "formattedValue" | "percent">): unknown;
+        'track-underlay'?(props: SliderTrackSlotProps): unknown;
+        'track-overlay'?(props: SliderTrackSlotProps): unknown;
+        thumb?(props: Pick<SliderTrackSlotProps, "value" | "formattedValue" | "percent">): unknown;
+        'tooltip-content'?(props: SliderTooltipSlotProps): unknown;
     };
     emit: (evt: "update:modelValue", value: number) => void;
 }>) => import('vue').VNode & {

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'vue';
-import { SliderMarkInput, SliderProps, SliderThumbStyle, SliderTooltipMode, SliderTooltipOptions } from './types.js';
+import { RangeSliderTooltip, RangeSliderThumbOptions, SliderMarkInput, SliderProps, SliderThumb, SliderThumbMode, SliderThumbOptions, SliderTooltip, SliderTooltipAnchor, SliderTooltipMode, SliderTooltipOptions } from './types.js';
 export interface SliderBounds {
     min: number;
     max: number;
@@ -19,7 +19,9 @@ export declare function normalizeSliderStep(step: number | 'any'): number | "any
 export declare function normalizeSliderValue(value: number, min: number, max: number, step: number | 'any'): number;
 export declare function getSliderValuePercent(value: number, min: number, max: number): number;
 export declare function setSliderStyleValue(style: CSSProperties, property: `--${string}`, value: string | undefined): void;
-export declare function applySliderThumbStyle(style: CSSProperties, thumbStyle: SliderThumbStyle | undefined, properties: SliderThumbStyleProperties): void;
+export declare function applySliderThumbStyle(style: CSSProperties, thumb: RangeSliderThumbOptions | undefined, properties: SliderThumbStyleProperties): void;
+export declare function getSliderThumbOptions(thumb: SliderThumb): SliderThumbOptions;
+export declare function getSliderThumbMode(thumb: SliderThumb): SliderThumbMode | false;
 export declare function createSliderMarkItems(marks: SliderMarkInput[] | undefined, min: number, max: number, isFilled: (value: number, percent: number) => boolean, properties: SliderMarkStyleProperties): {
     key: string;
     value: number;
@@ -30,6 +32,7 @@ export declare function createSliderMarkItems(marks: SliderMarkInput[] | undefin
 }[];
 export declare function getFormattedSliderValue(value: number, formatter: SliderProps['formatValue']): string | number;
 export declare function getSliderAriaValueText(value: number, ariaValueText: string | SliderProps['formatValue'] | undefined, formatter: SliderProps['formatValue']): string | undefined;
-export declare function getSliderTooltipOptions(tooltip: NonNullable<SliderProps['tooltip']>): SliderTooltipOptions;
-export declare function getSliderTooltipMode(tooltip: NonNullable<SliderProps['tooltip']>): SliderTooltipMode | false;
+export declare function getSliderTooltipOptions(tooltip: SliderTooltip | RangeSliderTooltip): SliderTooltipOptions | Exclude<RangeSliderTooltip, false | SliderTooltipMode>;
+export declare function getSliderTooltipMode(tooltip: SliderTooltip | RangeSliderTooltip): SliderTooltipMode | false;
+export declare function getSliderTooltipAnchor(tooltip: SliderTooltip): SliderTooltipAnchor;
 export {};

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

@@ -14,6 +14,7 @@ export type SliderColor = ComponentColorValue;
 export type SliderSize = (typeof sliderSizes)[number];
 export type SliderOrientation = (typeof sliderOrientations)[number];
 export type SliderValueFormatter = (value: number) => string | number;
+export type SliderThumbMode = 'always' | 'interaction';
 export type RangeSliderValue = [number, number];
 export type RangeSliderThumb = 'lower' | 'upper';
 export type SliderInputAttrs = InputHTMLAttributes;
@@ -22,10 +23,44 @@ export type RangeSliderEndpointValueText = string | SliderValueFormatter;
 export type RangeSliderAriaValueText = RangeSliderEndpointValueText | [RangeSliderEndpointValueText, RangeSliderEndpointValueText];
 export type RangeSliderValidationMessage = string | [string | undefined, string | undefined];
 export type SliderTooltipMode = 'hover' | 'always';
-export type SliderTooltipOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'> & {
+type SliderTooltipBaseOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'>;
+export type SliderTooltipAnchor = 'thumb' | 'pointer';
+export type SliderTooltipOptions = (SliderTooltipBaseOptions & {
+    anchor?: 'thumb';
+    mode?: SliderTooltipMode;
+}) | (SliderTooltipBaseOptions & {
+    anchor: 'pointer';
+    mode?: 'hover';
+});
+export type RangeSliderTooltipOptions = SliderTooltipBaseOptions & {
     mode?: SliderTooltipMode;
 };
 export type SliderTooltip = false | SliderTooltipMode | SliderTooltipOptions;
+export type RangeSliderTooltip = false | SliderTooltipMode | RangeSliderTooltipOptions;
+export interface SliderTooltipSlotProps {
+    value: number;
+    formattedValue: string | number;
+    percent: number;
+    anchor: SliderTooltipAnchor;
+}
+export interface SliderTrackSlotProps {
+    value: number;
+    formattedValue: string | number;
+    percent: number;
+    min: number;
+    max: number;
+    orientation: SliderOrientation;
+    getPercent: (value: number) => number;
+}
+export interface RangeSliderTrackSlotProps {
+    value: RangeSliderValue;
+    formattedValue: [string | number, string | number];
+    percent: RangeSliderValue;
+    min: number;
+    max: number;
+    orientation: SliderOrientation;
+    getPercent: (value: number) => number;
+}
 export type SliderMarkColor = SliderColor;
 export interface SliderMark {
     value: number;
@@ -34,11 +69,15 @@ export interface SliderMark {
     hidden?: boolean;
 }
 export type SliderMarkInput = number | SliderMark;
-export interface SliderThumbStyle {
+export interface RangeSliderThumbOptions {
     size?: number | string;
     border?: number | string;
     padding?: number | string;
 }
+export interface SliderThumbOptions extends RangeSliderThumbOptions {
+    visibility?: SliderThumbMode;
+}
+export type SliderThumb = false | SliderThumbMode | SliderThumbOptions;
 export interface SliderProps extends StylesApiProps<SliderPart> {
     id?: string;
     name?: string;
@@ -49,7 +88,7 @@ export interface SliderProps extends StylesApiProps<SliderPart> {
     max?: number;
     step?: number | 'any';
     marks?: SliderMarkInput[];
-    thumbStyle?: SliderThumbStyle;
+    thumb?: SliderThumb;
     tooltip?: SliderTooltip;
     formatValue?: SliderValueFormatter;
     color?: SliderColor;
@@ -65,13 +104,16 @@ export interface SliderProps extends StylesApiProps<SliderPart> {
     inputAttrs?: SliderInputAttrs;
     validationMessage?: string;
 }
-export interface RangeSliderProps extends Omit<SliderProps, 'modelValue' | 'defaultValue' | 'name' | 'ariaLabel' | 'ariaValueText' | 'inputAttrs' | 'validationMessage' | 'classNames' | 'styles'>, StylesApiProps<RangeSliderPart> {
+export interface RangeSliderProps extends Omit<SliderProps, 'modelValue' | 'defaultValue' | 'name' | 'ariaLabel' | 'ariaValueText' | 'inputAttrs' | 'validationMessage' | 'thumb' | 'tooltip' | 'classNames' | 'styles'>, StylesApiProps<RangeSliderPart> {
     modelValue?: RangeSliderValue;
     defaultValue?: RangeSliderValue;
     minRange?: number;
+    thumb?: RangeSliderThumbOptions;
+    tooltip?: RangeSliderTooltip;
     name?: string | [string, string];
     ariaLabel?: [string, string];
     ariaValueText?: RangeSliderAriaValueText;
     inputAttrs?: RangeSliderInputAttrs;
     validationMessage?: RangeSliderValidationMessage;
 }
+export {};

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'vue';
-import { RangeSliderProps, RangeSliderThumb, RangeSliderValue } from './types.js';
+import { RangeSliderProps, RangeSliderTrackSlotProps, RangeSliderThumb, RangeSliderValue } from './types.js';
 type RangeSliderStateProps = Readonly<RangeSliderProps & {
     min: number;
     max: number;
@@ -33,6 +33,7 @@ export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate:
         filled: boolean;
         style: CSSProperties;
     }[]>;
+    trackSlotProps: import('vue').ComputedRef<RangeSliderTrackSlotProps>;
     trackStyle: import('vue').ComputedRef<CSSProperties>;
     activeThumb: import('vue').Ref<RangeSliderThumb | undefined, RangeSliderThumb | undefined>;
     tooltipVisible: import('vue').ComputedRef<boolean>;

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

@@ -1,11 +1,12 @@
 import { CSSProperties } from 'vue';
-import { SliderProps } from './types.js';
+import { SliderProps, SliderTrackSlotProps } from './types.js';
 export { getSliderValuePercent, normalizeSliderBounds, normalizeSliderStep, normalizeSliderValue, } from './sliderCore.js';
 type SliderStateProps = Readonly<SliderProps & {
     min: number;
     max: number;
     step: number | 'any';
     tooltip: NonNullable<SliderProps['tooltip']>;
+    thumb: NonNullable<SliderProps['thumb']>;
     orientation: NonNullable<SliderProps['orientation']>;
 }>;
 export declare function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void, getValue?: () => number): {
@@ -26,20 +27,29 @@ export declare function useSlider(props: SliderStateProps, emitUpdate: (value: n
         filled: boolean;
         style: CSSProperties;
     }[]>;
+    thumbMode: import('vue').ComputedRef<false | import('./types.js').SliderThumbMode>;
+    trackSlotProps: import('vue').ComputedRef<SliderTrackSlotProps>;
     trackStyle: import('vue').ComputedRef<CSSProperties>;
+    trackHovered: import('vue').Ref<boolean, boolean>;
+    dragging: import('vue').Ref<boolean, boolean>;
     tooltipVisible: import('vue').ComputedRef<boolean>;
     tooltipOpen: import('vue').ComputedRef<boolean>;
+    tooltipAnchor: import('vue').ComputedRef<import('./types.js').SliderTooltipAnchor>;
     tooltipPlacement: import('vue').ComputedRef<import('../tooltip/index.js').TooltipPlacement>;
     tooltipId: import('vue').ComputedRef<string | undefined>;
     tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors.js').ComponentColorValue | undefined>;
     tooltipOffset: import('vue').ComputedRef<import('../floating/index.js').FloatingOffset | undefined>;
     tooltipOpenDelay: import('vue').ComputedRef<number>;
     tooltipArrow: import('vue').ComputedRef<boolean>;
+    tooltipValue: import('vue').ComputedRef<number>;
+    tooltipPercent: import('vue').ComputedRef<number>;
+    tooltipFormattedValue: import('vue').ComputedRef<string | number>;
     tooltipContent: import('vue').ComputedRef<string>;
     onInput: (e: Event) => void;
     onTooltipPointerDown: (event: PointerEvent) => void;
-    onTooltipMouseEnter: () => void;
-    onTooltipMouseLeave: () => void;
+    onTooltipPointerMove: (event: PointerEvent) => void;
+    onTooltipTrackEnter: (event: PointerEvent) => void;
+    onTooltipTrackLeave: () => void;
     onTooltipFocusIn: () => void;
     onTooltipFocusOut: () => void;
     onTooltipKeydown: (event: KeyboardEvent) => void;

package/dist/dialog.js

@@ -11,8 +11,18 @@ function resolveDialogCloseReason(reason) {
 function toDialogHTMLElement(value) {
 	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
 	if (value == null || typeof Element !== "undefined" && value instanceof Element) return null;
-	const element = value.$el;
-	return element instanceof HTMLElement ? element : null;
+	const vdomElement = value.$el;
+	if (vdomElement instanceof HTMLElement) return vdomElement;
+	const vaporBlock = value.block;
+	return vaporBlock instanceof HTMLElement ? vaporBlock : null;
+}
+function resolveDialogHTMLElementRef(value, fallbackId, resolve) {
+	const element = toDialogHTMLElement(value) ?? (typeof document !== "undefined" ? document.getElementById(fallbackId) : null);
+	resolve(element);
+	if (element || !value) return;
+	nextTick(() => {
+		resolve(toDialogHTMLElement(value) ?? (typeof document !== "undefined" ? document.getElementById(fallbackId) : null));
+	});
 }
 function createDialogEvent(type, detail, originalEvent) {
 	const target = originalEvent.target;
@@ -118,7 +128,7 @@ var dialog_content_default = /* @__PURE__ */ defineVaporComponent({
 			delayInitialFocus: props.focusTrapOptions.delayInitialFocus ?? false
 		});
 		function setElement(value) {
-			root.setContent(toDialogHTMLElement(value), id.value);
+			resolveDialogHTMLElementRef(value, id.value, (element) => root.setContent(element, id.value));
 		}
 		function onDocumentKeydown(event) {
 			if (event.key !== "Escape" || event.defaultPrevented || !root.closeOnEscape.value || !root.layer.isTopLayer()) return;
@@ -238,14 +248,19 @@ var dialog_overlay_default = /* @__PURE__ */ defineVaporComponent({
 		const attrs = useAttrs();
 		const root = useRequiredInject(dialogRootKey, "RpDialogOverlay");
 		const element = ref(null);
+		const generatedId = `${useId()}-overlay`;
+		const id = computed(() => typeof attrs.id === "string" ? attrs.id : generatedId);
 		const shouldRender = computed(() => props.forceMount || root.isOpen.value);
 		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: id.value,
 			"aria-hidden": "true",
 			"data-state": root.isOpen.value ? "open" : "closed",
 			style: { zIndex: root.layer.zIndex.value - 1 }
 		}));
 		function setElement(value) {
-			element.value = toDialogHTMLElement(value);
+			resolveDialogHTMLElementRef(value, id.value, (resolved) => {
+				element.value = resolved;
+			});
 		}
 		useOverlayLayerBranch(element, {
 			focus: false,
@@ -484,15 +499,17 @@ var dialog_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const root = useRequiredInject(dialogRootKey, "RpDialogTrigger");
+		const generatedId = `${useId()}-trigger`;
+		const id = computed(() => props.id ?? generatedId);
 		function setElement(value) {
-			root.setTrigger(toDialogHTMLElement(value));
+			resolveDialogHTMLElementRef(value, id.value, root.setTrigger);
 		}
 		function onClick(event) {
 			if (event.defaultPrevented || props.disabled) return;
 			root.toggle();
 		}
 		const rootAttrs = computed(() => mergeProps(attrs, {
-			id: props.id,
+			id: id.value,
 			type: props.as === "button" ? "button" : void 0,
 			disabled: props.as === "button" ? props.disabled || void 0 : void 0,
 			"aria-controls": root.contentId.value,

package/dist/field.js

@@ -109,7 +109,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const n20 = t4();
 		const n10 = child(n20, 1);
 		renderEffect(() => setDynamicProps(n20, [rootAttrs.value]));
-		setInsertionState(n20, 0, 0);
+		setInsertionState(n20, 0);
 		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
 			renderEffect(() => setDynamicProps(n8, [

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export * from './components/overlay/index.js';
 export * from './components/popover/index.js';
 export * from './components/progress/index.js';
 export * from './components/radio/index.js';
+export * from './components/scroll-area/index.js';
 export * from './components/select/index.js';
 export * from './components/slider/index.js';
 export * from './components/switch/index.js';

package/dist/index.js

@@ -30,12 +30,14 @@ import { t as icon_button_default } from "./icon-button.js";
 import { t as iconButtonParts } from "./icon-button2.js";
 import { t as inputParts } from "./input2.js";
 import { t as overlay_default } from "./overlay.js";
+import { t as scroll_area_default } from "./scroll-area.js";
 import { n as modal_default, t as modalParts } from "./modal.js";
 import { n as number_input_default, t as numberInputParts } from "./number-input.js";
 import { n as overlay_layer_provider_default, t as overlayParts } from "./overlay2.js";
 import { n as popoverPlacements, t as popoverParts } from "./popover2.js";
 import { a as progress_default, i as progressSizes, n as progressParts, r as progressRadiuses, t as progressColors } from "./progress.js";
 import { i as radioParts, n as radio_default, r as radioGroupParts, t as radio_group_default } from "./radio.js";
+import { n as scrollAreaScrollbars, r as scrollAreaTypes, t as scrollAreaParts } from "./scroll-area2.js";
 import { n as select_default, t as selectParts } from "./select.js";
 import { t as tooltip_default } from "./tooltip.js";
 import { a as sliderSizes, i as sliderParts, n as sliderColors, o as range_slider_default, r as sliderOrientations, s as slider_default, t as rangeSliderParts } from "./slider.js";
@@ -45,4 +47,4 @@ import { t as teleport_provider_default } from "./teleport-provider.js";
 import { n as textarea_default, t as textareaParts } from "./textarea.js";
 import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
 import { t as tooltipParts } from "./tooltip2.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };

package/dist/input.js

@@ -155,7 +155,7 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const n9 = t1();
 		const n4 = child(n9, 1);
 		renderEffect(() => setDynamicProps(n9, [rootAttrs.value]));
-		setInsertionState(n9, 0, 0);
+		setInsertionState(n9, 0);
 		createIf(() => $slots.left, () => {
 			const n3 = t0();
 			renderEffect(() => setDynamicProps(n3, [unref(getPartAttrs)("left", { class: "rp-input__left" })]));