ropav 0.1.6 → 0.1.8

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

@@ -0,0 +1,30 @@
+import { MultiSelectEmptySlotProps, MultiSelectOptionSlotProps, MultiSelectPillSlotProps, MultiSelectProps, MultiSelectValue } 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<MultiSelectProps & {
+        onSearch?: ((searchValue: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: MultiSelectValue[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        nativeElement: import('vue').Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
+        inputElement: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        option?(props: MultiSelectOptionSlotProps): unknown;
+        pill?(props: MultiSelectPillSlotProps): unknown;
+        empty?(props: MultiSelectEmptySlotProps): unknown;
+    };
+    emit: ((evt: "search", searchValue: string) => void) & ((evt: "update:modelValue", value: MultiSelectValue[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/multi-select/multiSelectModel.d.ts

@@ -0,0 +1,3 @@
+import { MultiSelectOption, MultiSelectValue } from './types.js';
+export declare function getMultiSelectSelectedOptions(options: readonly MultiSelectOption[] | undefined, values: readonly MultiSelectValue[]): MultiSelectOption[];
+export declare function toggleMultiSelectValue(values: readonly MultiSelectValue[], value: MultiSelectValue, maxValues?: number): MultiSelectValue[];

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

@@ -0,0 +1,49 @@
+import { InputHTMLAttributes } from 'vue';
+import { StylesApiProps } from '../../styles-api.js';
+export type MultiSelectValue = string | number;
+export interface MultiSelectOption {
+    label: string;
+    value: MultiSelectValue;
+    disabled?: boolean;
+}
+export type MultiSelectFilter = (option: MultiSelectOption, searchValue: string) => boolean;
+export type MultiSelectRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface MultiSelectOptionSlotProps {
+    option: MultiSelectOption;
+    selected: boolean;
+    highlighted: boolean;
+}
+export interface MultiSelectPillSlotProps {
+    option: MultiSelectOption;
+}
+export interface MultiSelectEmptySlotProps {
+    searchValue: string;
+}
+export interface MultiSelectProps extends StylesApiProps<MultiSelectPart> {
+    id?: string;
+    name?: string;
+    form?: string;
+    modelValue?: MultiSelectValue[];
+    defaultValue?: MultiSelectValue[];
+    options?: MultiSelectOption[];
+    filter?: MultiSelectFilter | false;
+    maxValues?: number;
+    size?: MultiSelectSize;
+    radius?: MultiSelectRadius;
+    placeholder?: string;
+    clearable?: boolean;
+    clearLabel?: string;
+    removeLabel?: string;
+    toggleLabel?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+    describedby?: string;
+    labelledby?: string;
+    inputAttrs?: InputHTMLAttributes;
+    validationMessage?: string;
+}
+export declare const multiSelectParts: readonly ["root", "pills", "pill", "pillLabel", "pillRemove", "input", "indicator", "clear", "toggle", "content", "option", "empty"];
+export type MultiSelectPart = (typeof multiSelectParts)[number];

package/dist/components/multi-select/useMultiSelect.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties, ComputedRef, Ref, SelectHTMLAttributes } from 'vue';
+import { ControlState } from '../../internal/composables/useControlState.js';
+import { FlatOptionState } from '../../internal/composables/useFlatOptionCollection.js';
+import { ComponentElementRef } from '../../utils/dom/componentRef.js';
+import { FloatingPlacement, FloatingSide } from '../floating/types.js';
+import { MultiSelectOption, MultiSelectProps, MultiSelectValue } from './types.js';
+export interface MultiSelectControl {
+    templateRefs: {
+        root: Ref<HTMLElement | null>;
+        input: Ref<HTMLInputElement | null>;
+        native: Ref<HTMLSelectElement | null>;
+    };
+    nativeSelectAttrs: ComputedRef<SelectHTMLAttributes>;
+    isOpen: Ref<boolean>;
+    popupId: string;
+    listboxId: string;
+    control: ControlState;
+    visibleOptions: ComputedRef<MultiSelectOption[]>;
+    renderedOptions: ComputedRef<readonly FlatOptionState<MultiSelectOption>[]>;
+    selectedOptions: ComputedRef<MultiSelectOption[]>;
+    activeDescendantId: ComputedRef<string | undefined>;
+    rootClass: ComputedRef<string[]>;
+    floatingStyle: Readonly<Ref<CSSProperties>>;
+    actualPlacement: Readonly<Ref<FloatingPlacement>>;
+    placementSide: ComputedRef<FloatingSide>;
+    searchValue: Ref<string>;
+    canClear: ComputedRef<boolean>;
+    setDropdownElement: (elementRef: ComponentElementRef) => void;
+    toggle: () => void;
+    selectOption: (option: MultiSelectOption) => void;
+    removeOption: (option: MultiSelectOption) => void;
+    clearSelection: () => void;
+    onOptionMouseenter: (option: MultiSelectOption) => void;
+    onRootMousedown: (event: MouseEvent) => void;
+    onFocusout: (event: FocusEvent) => void;
+    onInput: (event: Event) => void;
+    onInputFocus: () => void;
+    onInputClick: () => void;
+    onInputKeydown: (event: KeyboardEvent) => void;
+}
+interface MultiSelectCallbacks {
+    valueChange: (value: MultiSelectValue[]) => void;
+    search: (searchValue: string) => void;
+}
+export declare function useMultiSelect(props: Readonly<MultiSelectProps>, callbacks: MultiSelectCallbacks): MultiSelectControl;
+export {};

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

@@ -0,0 +1,15 @@
+import { NumberInputControlsPosition, NumberInputTextAlign, NumberInputValue } from './types.js';
+export interface NumberInputBounds {
+    min: number | undefined;
+    max: number | undefined;
+}
+export type NumberInputControl = 'decrement' | 'increment';
+export type NumberInputStepDirection = -1 | 1;
+export declare function normalizeNumberInputBounds(min: number | undefined, max: number | undefined): NumberInputBounds;
+export declare function normalizeNumberInputStep(step: number | undefined): number;
+export declare function clampNumberInputValue(value: number, bounds: NumberInputBounds): number;
+export declare function stepNumberInputValue(value: NumberInputValue, direction: NumberInputStepDirection, step: number, bounds: NumberInputBounds): number;
+export declare function parseNumberInputValue(value: string): NumberInputValue;
+export declare function normalizeNumberInputControlsPosition(position: NumberInputControlsPosition | undefined): NumberInputControlsPosition;
+export declare function normalizeNumberInputTextAlign(textAlign: NumberInputTextAlign | undefined): NumberInputTextAlign;
+export declare function getModelInputValue(value: NumberInputValue): string;

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

@@ -1,24 +1,9 @@
 import { InputHTMLAttributes } from 'vue';
-import { NumberInputControlsPosition, NumberInputProps, NumberInputTextAlign, NumberInputValue } from './types.js';
-export interface NumberInputBounds {
-    min: number | undefined;
-    max: number | undefined;
-}
-type StepDirection = -1 | 1;
-export type NumberInputControl = 'decrement' | 'increment';
-export declare function normalizeNumberInputBounds(min: number | undefined, max: number | undefined): NumberInputBounds;
-export declare function normalizeNumberInputStep(step: number | undefined): number;
-export declare function clampNumberInputValue(value: number, bounds: NumberInputBounds): number;
-export declare function stepNumberInputValue(value: NumberInputValue, direction: StepDirection, step: number, bounds: NumberInputBounds): number;
-export declare function parseNumberInputValue(value: string): NumberInputValue;
-export declare function normalizeNumberInputControlsPosition(position: NumberInputControlsPosition | undefined): NumberInputControlsPosition;
-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): {
+import { NumberInputControl } from './numberInputModel.js';
+import { NumberInputProps, NumberInputValue } from './types.js';
+export declare function useNumberInput(props: Readonly<NumberInputProps>, onUpdate: (value: NumberInputValue) => void): {
     control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
-    bounds: import('vue').ComputedRef<NumberInputBounds>;
-    nativeStep: import('vue').ComputedRef<number>;
     nativeInputAttrs: import('vue').ComputedRef<InputHTMLAttributes>;
     modelInputValue: import('vue').ComputedRef<string>;
     leftControls: import('vue').ComputedRef<NumberInputControl[]>;
@@ -29,4 +14,3 @@ export declare function useNumberInput(props: Readonly<NumberInputProps>, emitUp
     decrement: () => boolean;
     onInputUpdate: (value: string) => void;
 };
-export {};

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

@@ -1,4 +1,4 @@
 export { default as Pagination } from './pagination.js';
 export { paginationColors, paginationParts, paginationRadiuses, paginationSizes } from './types.js';
-export type { PaginationColor, PaginationControl, PaginationControlSlotProps, PaginationEllipsisItem, PaginationGetPageAriaLabel, PaginationItem, PaginationPageItem, PaginationPageSlotProps, PaginationPart, PaginationProps, PaginationRadius, PaginationSize, } from './types.js';
+export type { PaginationColor, PaginationControl, PaginationControlSlotProps, PaginationEllipsisItem, PaginationGetPageAriaLabel, PaginationItem, PaginationPageItem, PaginationPageSlotProps, PaginationPart, PaginationProps, PaginationRadius, PaginationSize, UsePaginationReturn, } from './types.js';
 export { getPaginationItems, normalizePaginationPage, normalizePaginationTotal, usePagination, } from './usePagination.js';

package/dist/components/pagination/index.js

@@ -1,2 +1,2 @@
-import { a as pagination_default, c as normalizePaginationTotal, i as paginationSizes, l as usePagination, n as paginationParts, o as getPaginationItems, r as paginationRadiuses, s as normalizePaginationPage, t as paginationColors } from "../../pagination.js";
+import { a as pagination_default, c as normalizePaginationPage, i as paginationSizes, l as normalizePaginationTotal, n as paginationParts, o as usePagination, r as paginationRadiuses, s as getPaginationItems, t as paginationColors } from "../../pagination.js";
 export { pagination_default as Pagination, getPaginationItems, normalizePaginationPage, normalizePaginationTotal, paginationColors, paginationParts, paginationRadiuses, paginationSizes, usePagination };

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

@@ -0,0 +1,4 @@
+import { PaginationItem } from './types.js';
+export declare function normalizePaginationTotal(total: number): number;
+export declare function normalizePaginationPage(page: number, total: number): number;
+export declare function getPaginationItems(total: number, page: number, siblings?: number, boundaries?: number): PaginationItem[];

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

@@ -1,5 +1,6 @@
 import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
+import { ComputedRef, CSSProperties } from 'vue';
 export declare const paginationParts: readonly ["root", "items", "control", "page", "ellipsis"];
 export type PaginationPart = (typeof paginationParts)[number];
 export declare const paginationColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
@@ -52,3 +53,17 @@ export interface PaginationProps extends StylesApiProps<PaginationPart> {
     lastLabel?: string;
     getPageAriaLabel?: PaginationGetPageAriaLabel;
 }
+export interface UsePaginationReturn {
+    totalPages: ComputedRef<number>;
+    currentPage: ComputedRef<number>;
+    items: ComputedRef<PaginationItem[]>;
+    rootClass: ComputedRef<string[]>;
+    rootStyle: ComputedRef<CSSProperties | undefined>;
+    firstPage: ComputedRef<number>;
+    previousPage: ComputedRef<number>;
+    nextPage: ComputedRef<number>;
+    lastPage: ComputedRef<number>;
+    isFirstDisabled: ComputedRef<boolean>;
+    isLastDisabled: ComputedRef<boolean>;
+    selectPage: (page: number) => boolean;
+}

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

@@ -1,19 +1,3 @@
-import { CSSProperties } from 'vue';
-import { PaginationItem, PaginationProps } from './types.js';
-export declare function normalizePaginationTotal(total: number): number;
-export declare function normalizePaginationPage(page: number, total: number): number;
-export declare function getPaginationItems(total: number, page: number, siblings?: number, boundaries?: number): PaginationItem[];
-export declare function usePagination(props: Readonly<PaginationProps>, getCurrentValue: () => number, onChange: (page: number) => void): {
-    totalPages: import('vue').ComputedRef<number>;
-    currentPage: import('vue').ComputedRef<number>;
-    items: import('vue').ComputedRef<PaginationItem[]>;
-    rootClass: import('vue').ComputedRef<string[]>;
-    rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
-    firstPage: import('vue').ComputedRef<number>;
-    previousPage: import('vue').ComputedRef<number>;
-    nextPage: import('vue').ComputedRef<number>;
-    lastPage: import('vue').ComputedRef<number>;
-    isFirstDisabled: import('vue').ComputedRef<boolean>;
-    isLastDisabled: import('vue').ComputedRef<boolean>;
-    selectPage: (page: number) => boolean;
-};
+import { PaginationProps, UsePaginationReturn } from './types.js';
+export { getPaginationItems, normalizePaginationPage, normalizePaginationTotal, } from './paginationModel.js';
+export declare function usePagination(props: Readonly<PaginationProps>, getCurrentValue: () => number, onChange: (page: number) => void): UsePaginationReturn;

package/dist/components/popover/usePopoverBindings.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { FloatingTargetLifecycle } from '../floating/useFloatingTargetLifecycle.js';
+import { PopoverRole } from './types.js';
+interface UsePopoverBindingsOptions {
+    targetLifecycle: FloatingTargetLifecycle;
+    popoverId: Readonly<Ref<string>>;
+    popoverRole: Readonly<Ref<PopoverRole>>;
+    isVisible: Readonly<Ref<boolean>>;
+    isDisabled: Readonly<Ref<boolean>>;
+    onTriggerClick: () => void;
+}
+export declare function usePopoverBindings({ targetLifecycle, popoverId, popoverRole, isVisible, isDisabled, onTriggerClick, }: UsePopoverBindingsOptions): void;
+export {};

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

@@ -0,0 +1,8 @@
+import { ProgressProps } from './types.js';
+export declare function normalizeProgressBounds(min: number, max: number): {
+    min: number;
+    max: number;
+};
+export declare function normalizeProgressValue(value: number | null | undefined, min: number, max: number): number;
+export declare function formatProgressValue(value: number, percent: number, formatter: ProgressProps['formatValue']): string | number;
+export declare function getProgressAriaValueText(value: number, percent: number, ariaValueText: ProgressProps['ariaValueText'], formatter: ProgressProps['formatValue']): string | undefined;

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

@@ -6,12 +6,6 @@ type ProgressStateProps = Readonly<ProgressProps & {
     indeterminate: boolean;
     showValue: boolean;
 }>;
-export declare function normalizeProgressBounds(min: number, max: number): {
-    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('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;

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

@@ -1,4 +1,3 @@
-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>;
@@ -11,7 +10,7 @@ export declare function useRadio(props: Readonly<RadioProps>, emitChange: (event
     isRequired: import('vue').ComputedRef<boolean>;
     isInvalid: import('vue').ComputedRef<boolean>;
     rootClass: import('vue').ComputedRef<string[]>;
-    rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
+    rootStyle: import('vue').ComputedRef<Record<string, string> | undefined>;
     onSelect: (event: Event) => void;
     focus: (options?: FocusOptions) => void;
 };

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

@@ -16,7 +16,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
             default: string;
         };
         scrollbarSize: {
-            type: (StringConstructor | NumberConstructor)[];
+            type: (NumberConstructor | StringConstructor)[];
             default: number;
         };
         scrollHideDelay: {

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'vue';
+import { ScrollAxis, ScrollDirection } from '../../utils/dom/scroll.js';
+import { ScrollAreaPosition, ScrollAreaScrollbars, ScrollAreaType } from './types.js';
+export type ScrollBoundary = 'top' | 'bottom' | 'left' | 'right';
+export interface ScrollAreaMetrics {
+    direction: ScrollDirection;
+    clientWidth: number;
+    clientHeight: number;
+    scrollWidth: number;
+    scrollHeight: number;
+    x: number;
+    y: number;
+    overflowX: boolean;
+    overflowY: boolean;
+    horizontalThumbSize: number;
+    horizontalThumbOffset: number;
+    verticalThumbSize: number;
+    verticalThumbOffset: number;
+}
+export interface ScrollAreaAxisState {
+    direction: ScrollDirection;
+    maxPosition: number;
+    overflow: boolean;
+    position: number;
+}
+interface ScrollbarVisibilityOptions {
+    active: boolean;
+    axis: ScrollAxis;
+    draggingAxis: ScrollAxis | null;
+    focusWithin: boolean;
+    hovered: boolean;
+    scrolling: boolean;
+    type: ScrollAreaType;
+}
+interface TrackPositionOptions {
+    axis: ScrollAxis;
+    coordinate: number;
+    direction: ScrollDirection;
+    maxPosition: number;
+    thumbSize: number;
+    trackSize: number;
+    trackStart: number;
+}
+interface DragPositionOptions {
+    coordinate: number;
+    coordinateDirection: 1 | -1;
+    maxPosition: number;
+    startCoordinate: number;
+    startPosition: number;
+    travel: number;
+}
+export declare function createScrollAreaMetrics(): ScrollAreaMetrics;
+export declare function isScrollAreaAxisEnabled(scrollbars: ScrollAreaScrollbars | false | undefined, axis: ScrollAxis): boolean;
+export declare function isScrollAreaScrollbarActive(type: ScrollAreaType, enabled: boolean, overflowing: boolean): boolean;
+export declare function isScrollAreaScrollbarVisible({ active, axis, draggingAxis, focusWithin, hovered, scrolling, type, }: ScrollbarVisibilityOptions): boolean;
+export declare function getScrollAreaAxisPosition(metrics: ScrollAreaMetrics, axis: ScrollAxis): number;
+export declare function getScrollAreaMaxPosition(metrics: ScrollAreaMetrics, axis: ScrollAxis): number;
+export declare function getScrollAreaOverflow(metrics: ScrollAreaMetrics, axis: ScrollAxis): boolean;
+export declare function getScrollAreaAxisState(metrics: ScrollAreaMetrics, axis: ScrollAxis): ScrollAreaAxisState;
+export declare function getReachedScrollAreaBoundaries(position: ScrollAreaPosition, previousPosition: ScrollAreaPosition, metrics: ScrollAreaMetrics): ScrollBoundary[];
+export declare function getScrollAreaTrackPosition({ axis, coordinate, direction, maxPosition, thumbSize, trackSize, trackStart, }: TrackPositionOptions): number | undefined;
+export declare function getScrollAreaDragPosition({ coordinate, coordinateDirection, maxPosition, startCoordinate, startPosition, travel, }: DragPositionOptions): number;
+export declare function getScrollAreaRootStyle(scrollbarSize: number | string | undefined): CSSProperties;
+export {};

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

@@ -1,59 +1,76 @@
-import { ScrollAreaPosition, ScrollAreaProps } from './types.js';
-interface UseScrollAreaOptions {
-    props: Readonly<ScrollAreaProps>;
-    emitScroll: (event: Event) => void;
-    emitPositionChange: (position: ScrollAreaPosition) => void;
-    emitReachTop: (event: Event) => void;
-    emitReachBottom: (event: Event) => void;
-    emitReachLeft: (event: Event) => void;
-    emitReachRight: (event: Event) => void;
+import { ScrollAxis } from '../../utils/dom/scroll.js';
+import { ScrollAreaPosition, ScrollAreaProps, ScrollAreaSlotProps } from './types.js';
+interface ScrollAreaEmit {
+    (event: 'scroll', value: Event): void;
+    (event: 'scrollPositionChange', value: ScrollAreaPosition): void;
+    (event: 'reachTop', value: Event): void;
+    (event: 'reachBottom', value: Event): void;
+    (event: 'reachLeft', value: Event): void;
+    (event: 'reachRight', value: Event): void;
 }
-export declare function useScrollArea(options: UseScrollAreaOptions): {
-    onScrollbarPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;
-    onThumbPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;
-    onViewportScroll: (event: Event) => void;
-    onScrollbarKeydown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: KeyboardEvent) => void;
-    onScrollbarWheel: (axis: import('./scrollAreaCore.js').ScrollAxis, event: WheelEvent) => void;
-    writeAxisPosition: (axis: import('./scrollAreaCore.js').ScrollAxis, value: number) => void;
-    scrollTo: (scrollOptions: ScrollToOptions) => void;
-    scrollBy: (scrollOptions: ScrollToOptions) => void;
+export declare function useScrollArea(props: Readonly<ScrollAreaProps>, emit: ScrollAreaEmit): {
+    templateRefs: {
+        root: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        viewport: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        content: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        horizontalScrollbar: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        verticalScrollbar: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    };
     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: import('./scrollAreaCore.js').ScrollAxis | null) => void;
-    onPointerenter: () => void;
-    onPointerleave: () => void;
-    onFocusin: () => void;
-    onFocusout: (event: FocusEvent) => void;
-    rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    viewportRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    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;
-        scrollHeight: number;
-        x: number;
-        y: number;
-        overflowX: boolean;
-        overflowY: boolean;
-        horizontalThumbSize: number;
-        horizontalThumbOffset: number;
-        verticalThumbSize: number;
-        verticalThumbOffset: number;
-    };
-    position: import('vue').ComputedRef<ScrollAreaPosition>;
+    rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
+    viewportAttrs: import('vue').ComputedRef<import('vue').HTMLAttributes>;
+    contentAttrs: import('vue').ComputedRef<import('vue').HTMLAttributes>;
+    horizontalScrollbarAttrs: import('vue').ComputedRef<{
+        role: string;
+        tabindex: number;
+        'aria-controls': string | undefined;
+        'aria-orientation': import('./types.js').ScrollAreaOrientation;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-disabled': true | undefined;
+        'aria-hidden': true | undefined;
+        'data-orientation': string;
+        'data-direction': import('../../utils/dom/direction.js').ElementDirection;
+        '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': import('./types.js').ScrollAreaOrientation;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-disabled': true | undefined;
+        'aria-hidden': true | undefined;
+        'data-orientation': string;
+        'data-direction': import('../../utils/dom/direction.js').ElementDirection;
+        'data-active': "" | undefined;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    horizontalThumbAttrs: import('vue').ComputedRef<Pick<import('vue').HTMLAttributes, "class" | "style">>;
+    verticalThumbAttrs: import('vue').ComputedRef<Pick<import('vue').HTMLAttributes, "class" | "style">>;
+    cornerAttrs: import('vue').ComputedRef<{
+        'aria-hidden': boolean;
+        'data-direction': import('../../utils/dom/direction.js').ElementDirection;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
+    slotProps: import('vue').ComputedRef<ScrollAreaSlotProps>;
+    onScrollbarKeydown: (axis: ScrollAxis, event: KeyboardEvent) => void;
+    onScrollbarWheel: (axis: ScrollAxis, event: WheelEvent) => void;
+    onScrollbarPointerdown: (axis: ScrollAxis, event: PointerEvent) => void;
+    onThumbPointerdown: (axis: ScrollAxis, event: PointerEvent) => boolean;
+    scrollTo: (scrollOptions: ScrollToOptions) => void;
+    scrollBy: (scrollOptions: ScrollToOptions) => void;
     update: () => void;
-    getPosition: (axis: import('./scrollAreaCore.js').ScrollAxis) => number;
-    getMaxPosition: (axis: import('./scrollAreaCore.js').ScrollAxis) => number;
-    getOverflow: (axis: import('./scrollAreaCore.js').ScrollAxis) => boolean;
 };
-export type ScrollAreaController = ReturnType<typeof useScrollArea>;
 export {};

package/dist/components/scroll-area/{useScrollAreaPresentation.d.ts → useScrollAreaAttributes.d.ts}

@@ -1,10 +1,35 @@
-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>;
+import { HTMLAttributes, Ref } from 'vue';
+import { ScrollAreaMetrics } from './scrollAreaModel.js';
+import { ScrollAreaOrientation, ScrollAreaProps } from './types.js';
+interface ScrollAreaRootHandlers {
+    onFocusin: () => void;
+    onFocusout: (event: FocusEvent) => void;
+    onPointerenter: () => void;
+    onPointerleave: () => void;
+}
+interface ScrollAreaAttributeState {
+    horizontalActive: Readonly<Ref<boolean>>;
+    horizontalVisible: Readonly<Ref<boolean>>;
+    verticalActive: Readonly<Ref<boolean>>;
+    verticalVisible: Readonly<Ref<boolean>>;
+}
+interface UseScrollAreaAttributesOptions {
+    metrics: ScrollAreaMetrics;
+    onViewportScroll: (event: Event) => void;
+    props: Readonly<ScrollAreaProps>;
+    rootHandlers: ScrollAreaRootHandlers;
+    state: ScrollAreaAttributeState;
+    viewport: Ref<HTMLElement | null>;
+}
+export declare function useScrollAreaAttributes({ metrics, onViewportScroll, props, rootHandlers, state, viewport, }: UseScrollAreaAttributesOptions): {
     contentAttrs: import('vue').ComputedRef<HTMLAttributes>;
+    cornerAttrs: import('vue').ComputedRef<{
+        'aria-hidden': boolean;
+        'data-direction': import('../../utils/dom/direction.js').ElementDirection;
+        'data-visible': "" | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+    }>;
     horizontalScrollbarAttrs: import('vue').ComputedRef<{
         role: string;
         tabindex: number;
@@ -16,12 +41,14 @@ 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-direction': import('../../utils/dom/direction.js').ElementDirection;
         'data-active': "" | undefined;
         'data-visible': "" | undefined;
         class?: import('vue').ClassValue;
         style?: import('vue').StyleValue;
     }>;
+    horizontalThumbAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
     verticalScrollbarAttrs: import('vue').ComputedRef<{
         role: string;
         tabindex: number;
@@ -33,20 +60,13 @@ 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-direction': import('../../utils/dom/direction.js').ElementDirection;
         '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-direction': import('./scrollAreaCore.js').ScrollDirection;
-        'data-visible': "" | undefined;
-        class?: import('vue').ClassValue;
-        style?: import('vue').StyleValue;
-    }>;
-    slotProps: import('vue').ComputedRef<ScrollAreaSlotProps>;
+    viewportAttrs: import('vue').ComputedRef<HTMLAttributes>;
 };
+export {};

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

@@ -0,0 +1,8 @@
+import { ScrollAreaMetrics } from './scrollAreaModel.js';
+import { ScrollAreaProps } from './types.js';
+export declare function useScrollAreaDerivedState(props: Readonly<ScrollAreaProps>, metrics: ScrollAreaMetrics): {
+    horizontalScrollbarActive: import('vue').ComputedRef<boolean>;
+    renderHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+    renderVerticalScrollbar: import('vue').ComputedRef<boolean>;
+    verticalScrollbarActive: import('vue').ComputedRef<boolean>;
+};