ropav 0.1.1 → 0.1.3

package/README.md

@@ -37,6 +37,85 @@ Import the components you need:
 import { Button } from 'ropav';
 ```
 
+## Progress and interactive ranges
+
+Use `Progress` for read-only status and `Slider` when the user can change the value. A media seek
+control can draw buffered ranges below the played range, reveal its thumb during interaction, and
+preview the value under the pointer:
+
+```vue
+<Slider
+  v-model="currentTime"
+  :max="duration"
+  thumb="interaction"
+  :tooltip="{ anchor: 'pointer' }"
+  :format-value="formatTime"
+>
+  <template #track-underlay="{ getPercent }">
+    <span
+      v-for="range in bufferedRanges"
+      :key="range.start"
+      class="buffered-range"
+      :style="{
+        left: `${getPercent(range.start)}%`,
+        width: `${getPercent(range.end) - getPercent(range.start)}%`,
+      }"
+    />
+  </template>
+  <template #tooltip-content="{ formattedValue }">
+    {{ formattedValue }}
+  </template>
+</Slider>
+```
+
+`track-underlay` and `track-overlay` are decorative layers below and above the selected range. Both
+receive the normalized slider state and a clamped `getPercent(value)` helper, so consumers can draw
+segments, markers, waveforms, or other track content without replacing slider behavior. Their
+coordinate space follows the thumb travel, so percentage positions stay aligned with the control.
+Set `:thumb="false"` to hide only the visual thumb while preserving the native input, hit area, and
+keyboard behavior. An object can combine visibility and geometry, for example
+`:thumb="{ visibility: 'interaction', size: 20 }"`.
+
+## Icons
+
+Ropav provides a compiler for
+[`unplugin-icons`](https://github.com/unplugin/unplugin-icons) that emits each
+icon as a zero-VDOM Vue Vapor component.
+
+Install `unplugin-icons`, a matching version of `@vue/compiler-vapor`, and the
+Iconify collection you want to use:
+
+```bash
+pnpm add -D unplugin-icons @vue/compiler-vapor @iconify-json/lucide
+```
+
+Pass `vaporIconCompiler` to `unplugin-icons`:
+
+```ts
+// vite.config.ts
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import Icons from 'unplugin-icons/vite';
+import { vaporIconCompiler } from 'ropav/unplugin-icons';
+
+export default defineConfig({
+  plugins: [vue({ features: { vapor: true } }), Icons({ compiler: vaporIconCompiler() })],
+});
+```
+
+Icons can then be imported on demand. Only imported icons are included in the
+application bundle.
+
+```vue
+<script setup lang="ts" vapor>
+import IconSearch from '~icons/lucide/search';
+</script>
+
+<template>
+  <IconSearch aria-hidden="true" />
+</template>
+```
+
 ## Styling contract
 
 Use typed `classNames` and `styles`, documented state attributes, and variables listed in the packaged styles manifest. DOM nesting, internal selectors and undocumented variables are private implementation details.

package/dist/accordion.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-accordion[data-v-e732f2da] {
+.rp-accordion[data-v-d15589fa] {
     --_rp-accordion-radius: var(--rp-radius-sm);
     --_rp-accordion-duration: var(--rp-transition-fast);
     box-sizing: border-box;
@@ -12,14 +12,10 @@
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-accordion-radius);
 }
-.rp-accordion--disabled[data-v-e732f2da] {
+.rp-accordion--disabled[data-v-d15589fa] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-accordion--horizontal[data-v-e732f2da] {
-    display: flex;
-    align-items: stretch;
-}
 }@layer ropav.components {
 .rp-accordion-item[data-v-5b00ef39] {
     --_rp-accordion-duration: var(--rp-transition-fast);
@@ -30,14 +26,6 @@
 .rp-accordion-item[data-v-5b00ef39]:first-child {
     border-top: 0;
 }
-.rp-accordion-item--horizontal[data-v-5b00ef39] {
-    flex: 1 1 0;
-    border-top: 0;
-    border-left: var(--rp-border-width-thin) solid var(--rp-color-default-border);
-}
-.rp-accordion-item--horizontal[data-v-5b00ef39]:first-child {
-    border-left: 0;
-}
 .rp-accordion-item--disabled[data-v-5b00ef39] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
@@ -95,12 +83,12 @@
     display: grid;
     min-width: 0;
     overflow: hidden;
-    padding: 0 var(--rp-spacing-4) var(--rp-spacing-4);
+    padding: var(--rp-spacing-3) var(--rp-spacing-4) var(--rp-spacing-4);
     color: var(--rp-color-text);
     font-size: var(--rp-font-size-md);
     line-height: var(--rp-line-height-md);
     grid-template-rows: 1fr;
-    transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
+    transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-top var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
 }
 .rp-accordion-item__inner[data-v-5b00ef39] {
     min-height: 0;
@@ -111,6 +99,7 @@
   .rp-accordion-content-leave-to[data-v-5b00ef39] {
     opacity: 0;
     grid-template-rows: 0fr;
+    padding-top: 0;
     padding-bottom: 0;
 }
 }

package/dist/accordion.js

@@ -33,15 +33,9 @@ function hasValue(values, value) {
 function withoutValue(values, value) {
 	return values.filter((itemValue) => itemValue !== value);
 }
-var ORIENTATION_NAVIGATION_KEYS = {
-	vertical: {
-		ArrowDown: 1,
-		ArrowUp: -1
-	},
-	horizontal: {
-		ArrowRight: 1,
-		ArrowLeft: -1
-	}
+var NAVIGATION_KEYS = {
+	ArrowDown: 1,
+	ArrowUp: -1
 };
 function getAccordionTrigger(event, root) {
 	const target = event.target;
@@ -53,13 +47,13 @@ function getAccordionTrigger(event, root) {
 function getAccordionTriggers(root) {
 	return Array.from(root.querySelectorAll(TRIGGER_SELECTOR)).filter((trigger) => trigger.closest(ACCORDION_SELECTOR) === root && !trigger.disabled);
 }
-function getNextTrigger(root, currentTrigger, key, orientation) {
+function getNextTrigger(root, currentTrigger, key) {
 	const triggers = getAccordionTriggers(root);
 	const currentIndex = triggers.indexOf(currentTrigger);
 	if (currentIndex === -1 || triggers.length === 0) return void 0;
 	if (key === "Home") return triggers[0];
 	if (key === "End") return triggers[triggers.length - 1];
-	const direction = ORIENTATION_NAVIGATION_KEYS[orientation][key];
+	const direction = NAVIGATION_KEYS[key];
 	if (!direction) return void 0;
 	return triggers[(currentIndex + direction + triggers.length) % triggers.length];
 }
@@ -67,20 +61,17 @@ function useAccordion(props, emitUpdate) {
 	const isMultiple = computed(() => Boolean(props.multiple));
 	const isCollapsible = computed(() => props.collapsible !== false);
 	const isDisabled = computed(() => Boolean(props.disabled));
-	const orientation = computed(() => props.orientation ?? "vertical");
 	const isControlled = computed(() => props.modelValue !== void 0);
 	const uncontrolledValue = ref(props.defaultValue ?? null);
 	const openValues = computed(() => normalizeValue(isControlled.value ? props.modelValue : uncontrolledValue.value, isMultiple.value));
 	const rootClass = computed(() => bem("rp-accordion", {
 		disabled: isDisabled.value,
-		multiple: isMultiple.value,
-		[`${orientation.value}`]: true
+		multiple: isMultiple.value
 	}));
 	const rootProps = computed(() => ({
 		id: props.id,
 		class: rootClass.value,
 		"data-disabled": isDisabled.value || void 0,
-		"data-orientation": orientation.value,
 		"aria-label": props.ariaLabel || void 0,
 		"aria-labelledby": props.labelledby || void 0,
 		"aria-describedby": props.describedby || void 0,
@@ -107,7 +98,7 @@ function useAccordion(props, emitUpdate) {
 		if (!root) return;
 		const trigger = getAccordionTrigger(event, root);
 		if (!trigger) return;
-		const nextTrigger = getNextTrigger(root, trigger, event.key, orientation.value);
+		const nextTrigger = getNextTrigger(root, trigger, event.key);
 		if (!nextTrigger) return;
 		event.preventDefault();
 		nextTrigger.focus();
@@ -125,9 +116,6 @@ function useAccordion(props, emitUpdate) {
 		get unmountOnExit() {
 			return Boolean(props.unmountOnExit);
 		},
-		get orientation() {
-			return orientation.value;
-		},
 		isItemOpen(value) {
 			return hasValue(openValues.value, value);
 		},
@@ -166,8 +154,7 @@ function useAccordionItem(props) {
 	const rootClass = computed(() => bem("rp-accordion-item", {
 		open: isOpen.value,
 		closed: !isOpen.value,
-		disabled: isDisabled.value,
-		[`${group.orientation}`]: true
+		disabled: isDisabled.value
 	}));
 	const rootProps = computed(() => ({
 		id: id.value,
@@ -241,7 +228,7 @@ function useAccordionItem(props) {
 }
 //#endregion
 //#region src/components/accordion/accordion.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-e732f2da>", 1);
+var t0$2 = template("<div data-v-d15589fa>", 1);
 //#endregion
 //#region src/components/accordion/accordion.vue
 var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -268,7 +255,6 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: Boolean,
 			default: false
 		},
-		orientation: { default: "vertical" },
 		ariaLabel: {},
 		describedby: {},
 		labelledby: {},
@@ -293,7 +279,7 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-e732f2da"]]);
+}), [["__scopeId", "data-v-d15589fa"]]);
 //#endregion
 //#region ~icons/lucide/chevron-down
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m6 9l6 6l6-6\">", 3, 1);
@@ -381,10 +367,7 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return n8;
 		}, 1);
 		setInsertionState(n16, null, 1);
-		createComponent(VaporTransition, {
-			name: "rp-accordion-content",
-			persisted: ""
-		}, extend(() => {
+		createComponent(VaporTransition, { name: "rp-accordion-content" }, extend(() => {
 			return createIf(() => unref(shouldRenderContent), () => {
 				const n14 = t2();
 				const n13 = child(n14);

package/dist/button-link.js

@@ -82,7 +82,7 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const n16 = child(n17, 1);
 		const n11 = child(n16, 1);
 		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
-		setInsertionState(n17, 0, 0);
+		setInsertionState(n17, 0);
 		createIf(() => __props.loading, () => {
 			const n5 = t0();
 			renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("loader", { class: "rp-button__loading" }), { "aria-hidden": "true" }]));
@@ -92,7 +92,7 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}, 1);
 			return n5;
 		});
-		setInsertionState(n16, 0, 0);
+		setInsertionState(n16, 0);
 		createIf(() => $slots.left, () => {
 			const n9 = t0();
 			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));

package/dist/button.js

@@ -54,7 +54,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const n16 = child(n17, 1);
 		const n11 = child(n16, 1);
 		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
-		setInsertionState(n17, 0, 0);
+		setInsertionState(n17, 0);
 		createIf(() => __props.loading, () => {
 			const n5 = t0();
 			renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("loader", { class: "rp-button__loading" }), { "aria-hidden": "true" }]));
@@ -64,7 +64,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, 1);
 			return n5;
 		});
-		setInsertionState(n16, 0, 0);
+		setInsertionState(n16, 0);
 		createIf(() => $slots.left, () => {
 			const n9 = t0();
 			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));

package/dist/collapse.js

@@ -68,10 +68,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		setInsertionState(n7, null, 0);
 		createSlot("trigger", { $: [() => publicTriggerSlotProps.value] }, null, 1);
 		setInsertionState(n7, null, 1);
-		createComponent(VaporTransition, {
-			name: "rp-collapse-content",
-			persisted: ""
-		}, extend(() => {
+		createComponent(VaporTransition, { name: "rp-collapse-content" }, extend(() => {
 			return createIf(() => unref(shouldRenderContent), () => {
 				const n5 = t0();
 				const n4 = child(n5);

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

@@ -2,4 +2,4 @@ export { default as Accordion } from './accordion.js';
 export { default as AccordionItem } from './accordion-item.js';
 export { useAccordion, useAccordionItem } from './useAccordion.js';
 export { accordionItemParts, accordionParts } from './types.js';
-export type { AccordionItemPart, AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionPart, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';
+export type { AccordionItemPart, AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionPart, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';

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

@@ -3,7 +3,6 @@ import { StylesApiProps } from '../../styles-api.js';
 import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types.js';
 export type AccordionItemValue = string | number;
 export type AccordionModelValue = AccordionItemValue | AccordionItemValue[] | null;
-export type AccordionOrientation = 'vertical' | 'horizontal';
 export type AccordionState = 'open' | 'closed';
 export declare const accordionParts: readonly ["root"];
 export declare const accordionItemParts: readonly ["root", "trigger", "title", "icon", "content"];
@@ -17,7 +16,6 @@ export interface AccordionProps extends StylesApiProps<AccordionPart> {
     collapsible?: boolean;
     disabled?: boolean;
     unmountOnExit?: boolean;
-    orientation?: AccordionOrientation;
     ariaLabel?: string;
     describedby?: string;
     labelledby?: string;
@@ -37,7 +35,6 @@ export interface AccordionRootProps {
     id?: string;
     class: string[];
     'data-disabled'?: boolean;
-    'data-orientation': AccordionOrientation;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
@@ -73,7 +70,6 @@ export interface AccordionContext {
     collapsible: boolean;
     disabled: boolean;
     unmountOnExit: boolean;
-    orientation: AccordionOrientation;
     isItemOpen: (value: AccordionItemValue) => boolean;
     setItemOpen: (value: AccordionItemValue, open: boolean) => void;
 }

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

@@ -1,4 +1,4 @@
-import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref } from 'vue';
+import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref, VaporComponentInstance } from 'vue';
 import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
 import { DialogCloseReason } from './types.js';
 export interface DialogRootContext {
@@ -22,6 +22,8 @@ export interface DialogRootContext {
     registerDescription: (id: string) => () => void;
 }
 export declare const dialogRootKey: InjectionKey<DialogRootContext>;
+export type DialogElementRefValue = Element | ComponentPublicInstance | VaporComponentInstance | null;
 export declare function resolveDialogCloseReason(reason: unknown): DialogCloseReason;
-export declare function toDialogHTMLElement(value: Element | ComponentPublicInstance | null): HTMLElement | null;
+export declare function toDialogHTMLElement(value: DialogElementRefValue): HTMLElement | null;
+export declare function resolveDialogHTMLElementRef(value: DialogElementRefValue, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
 export declare function createDialogEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;

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

@@ -0,0 +1,3 @@
+export { default as ScrollArea } from './scroll-area.js';
+export { scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes } from './types.js';
+export type { ScrollAreaOrientation, ScrollAreaPart, ScrollAreaPosition, ScrollAreaProps, ScrollAreaScrollbars, ScrollAreaSlotProps, ScrollAreaType, } from './types.js';

package/dist/components/scroll-area/index.js

@@ -0,0 +1,3 @@
+import { t as scroll_area_default } from "../../scroll-area.js";
+import { n as scrollAreaScrollbars, r as scrollAreaTypes, t as scrollAreaParts } from "../../scroll-area2.js";
+export { scroll_area_default as ScrollArea, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes };

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

@@ -0,0 +1,42 @@
+import { ScrollAreaProps } 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<ScrollAreaProps & {
+        onScroll?: ((event: Event) => any) | undefined;
+        onScrollPositionChange?: ((position: {
+            x: number;
+            y: number;
+        }) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        viewport: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        scrollTo: (scrollOptions: ScrollToOptions) => void;
+        scrollBy: (scrollOptions: ScrollToOptions) => void;
+        update: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            position: import('./types.js').ScrollAreaPosition;
+            overflowX: boolean;
+            overflowY: boolean;
+            scrollTo: (options: ScrollToOptions) => void;
+            scrollBy: (options: ScrollToOptions) => void;
+            update: () => void;
+        }) => any;
+    };
+    emit: ((evt: "scroll", event: Event) => void) & ((evt: "scrollPositionChange", position: {
+        x: number;
+        y: number;
+    }) => 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/scroll-area/scrollAreaCore.d.ts

@@ -0,0 +1,25 @@
+import { ScrollAreaScrollbars, ScrollAreaType } from './types.js';
+export type ScrollAxis = 'x' | 'y';
+export interface ScrollAreaMetrics {
+    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 declare function clamp(value: number, min: number, max: number): 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): {
+    size: number;
+    offsetRatio: number;
+};
+export declare function getThumbOffset(position: number, maxPosition: number, sizeRatio: number): number;
+export declare function getLengthValue(value: number | string | undefined): string;

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'vue';
+import { StylesApiProps } from '../../styles-api.js';
+export declare const scrollAreaParts: readonly ["root", "viewport", "content", "scrollbar", "thumb", "corner"];
+export type ScrollAreaPart = (typeof scrollAreaParts)[number];
+export declare const scrollAreaTypes: readonly ["auto", "always", "hover", "scroll", "never"];
+export type ScrollAreaType = (typeof scrollAreaTypes)[number];
+export declare const scrollAreaScrollbars: readonly ["x", "y", "both"];
+export type ScrollAreaScrollbars = (typeof scrollAreaScrollbars)[number];
+export type ScrollAreaOrientation = 'horizontal' | 'vertical';
+export interface ScrollAreaPosition {
+    x: number;
+    y: number;
+}
+export interface ScrollAreaSlotProps {
+    position: ScrollAreaPosition;
+    overflowX: boolean;
+    overflowY: boolean;
+    scrollTo: (options: ScrollToOptions) => void;
+    scrollBy: (options: ScrollToOptions) => void;
+    update: () => void;
+}
+export interface ScrollAreaProps extends StylesApiProps<ScrollAreaPart> {
+    id?: string;
+    embedded?: boolean;
+    type?: ScrollAreaType;
+    scrollbars?: ScrollAreaScrollbars | false;
+    scrollbarSize?: number | string;
+    scrollHideDelay?: number;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    viewportAttrs?: HTMLAttributes;
+}

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

@@ -0,0 +1,54 @@
+import { ScrollAreaPosition, ScrollAreaProps } from './types.js';
+interface UseScrollAreaOptions {
+    props: Readonly<ScrollAreaProps>;
+    emitScroll: (event: Event) => void;
+    emitPositionChange: (position: ScrollAreaPosition) => 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;
+    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: {
+        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>;
+    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/useScrollAreaControls.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+import { ScrollAxis } from './scrollAreaCore.js';
+import { ScrollAreaMetricsController } from './useScrollAreaMetrics.js';
+import { ScrollAreaPosition } from './types.js';
+interface UseScrollAreaControlsOptions {
+    viewportRef: Ref<HTMLElement | null>;
+    metrics: ScrollAreaMetricsController;
+    showDuringScroll: () => void;
+    emitScroll: (event: Event) => void;
+    emitPositionChange: (position: ScrollAreaPosition) => void;
+}
+export declare function useScrollAreaControls(options: UseScrollAreaControlsOptions): {
+    onViewportScroll: (event: Event) => void;
+    onScrollbarKeydown: (axis: ScrollAxis, event: KeyboardEvent) => void;
+    onScrollbarWheel: (axis: ScrollAxis, event: WheelEvent) => void;
+    writeAxisPosition: (axis: ScrollAxis, value: number) => void;
+    scrollTo: (scrollOptions: ScrollToOptions) => void;
+    scrollBy: (scrollOptions: ScrollToOptions) => void;
+};
+export type ScrollAreaControlsController = ReturnType<typeof useScrollAreaControls>;
+export {};

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

@@ -0,0 +1,35 @@
+import { Ref } from 'vue';
+import { ScrollAxis } from './scrollAreaCore.js';
+import { ScrollAreaPosition } from './types.js';
+interface UseScrollAreaMetricsOptions {
+    viewportRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+    horizontalScrollbarRef: Ref<HTMLElement | null>;
+    verticalScrollbarRef: Ref<HTMLElement | null>;
+    horizontalEnabled: Readonly<Ref<boolean>>;
+    verticalEnabled: Readonly<Ref<boolean>>;
+}
+export declare function useScrollAreaMetrics(options: UseScrollAreaMetricsOptions): {
+    metrics: {
+        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>;
+    update: () => void;
+    scheduleUpdate: () => void;
+    getPosition: (axis: ScrollAxis) => number;
+    getMaxPosition: (axis: ScrollAxis) => number;
+    getOverflow: (axis: ScrollAxis) => boolean;
+};
+export type ScrollAreaMetricsController = ReturnType<typeof useScrollAreaMetrics>;
+export {};

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

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { ScrollAxis } from './scrollAreaCore.js';
+import { ScrollAreaControlsController } from './useScrollAreaControls.js';
+import { ScrollAreaMetricsController } from './useScrollAreaMetrics.js';
+interface UseScrollAreaPointerOptions {
+    horizontalScrollbarRef: Ref<HTMLElement | null>;
+    verticalScrollbarRef: Ref<HTMLElement | null>;
+    metrics: ScrollAreaMetricsController;
+    controls: ScrollAreaControlsController;
+    setDraggingAxis: (axis: ScrollAxis | null) => void;
+    shouldFocusScrollbar: () => boolean;
+}
+export declare function useScrollAreaPointer(options: UseScrollAreaPointerOptions): {
+    onScrollbarPointerdown: (axis: ScrollAxis, event: PointerEvent) => void;
+    onThumbPointerdown: (axis: ScrollAxis, event: PointerEvent) => void;
+};
+export {};