ropav 0.4.0 → 0.5.0

package/dist/{composables → components/table}/use-grid-keyboard.js

@@ -1,7 +1,7 @@
-import { focusableIn, getScrollParent, isScrollable } from "../utils/focus.js";
+import { focusableIn, getScrollParent, isScrollable } from "../../utils/focus.js";
 import { isTableCellControl } from "./use-table-collection.js";
 import { computed, nextTick, shallowRef, toValue, watch } from "vue";
-//#region src/composables/use-grid-keyboard.ts
+//#region src/components/table/use-grid-keyboard.ts
 var NO_FOCUS = {
 	columnKey: null,
 	rowKey: null
@@ -317,60 +317,62 @@ var useGridKeyboard = (options) => {
 			event.stopPropagation();
 			if (event.shiftKey && next.rowKey != null && selection.selectionMode.value === "multiple") selection.extendSelection(next.rowKey);
 		};
-		switch (event.key) {
-			case "ArrowDown":
-				move(from.rowKey == null && from.columnKey == null ? firstKey(from, true) : keyBelow(from));
-				return;
-			case "ArrowUp":
-				move(from.rowKey == null && from.columnKey == null ? lastKey(from, true) : keyAbove(from));
-				return;
-			case "ArrowRight":
-				if (handleExpansion(event, from, isReversed() ? "collapse" : "expand")) return;
-				move(keyRightOf(from));
-				return;
-			case "ArrowLeft":
-				if (handleExpansion(event, from, isReversed() ? "expand" : "collapse")) return;
-				move(keyLeftOf(from));
-				return;
-			case "Home":
-				if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
-				move(firstKey(from, isModified));
-				return;
-			case "End":
-				if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
-				move(lastKey(from, isModified));
-				return;
-			case "PageUp":
-				move(pageStep(from, -1));
-				return;
-			case "PageDown":
-				move(pageStep(from, 1));
-				return;
-			case "a":
-				if (!isModified || toValue(options.disallowSelectAll)) return;
-				if (selection.selectionMode.value !== "multiple") return;
-				selection.selectAll();
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			case "Escape":
-				if (escapeKeyBehavior.value !== "clearSelection" || selection.isEmpty.value) return;
-				selection.clearSelection();
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			case " ":
-				if (from.rowKey == null || selection.selectionMode.value === "none") return;
-				selection.select(from.rowKey, { isShiftPressed: event.shiftKey });
-				event.preventDefault();
-				return;
-			case "Tab": {
-				const focusable = focusableIn(element);
-				(event.shiftKey ? element : focusable.at(-1))?.focus();
-				return;
+		collection.rows.withOrder(() => {
+			switch (event.key) {
+				case "ArrowDown":
+					move(from.rowKey == null && from.columnKey == null ? firstKey(from, true) : keyBelow(from));
+					return;
+				case "ArrowUp":
+					move(from.rowKey == null && from.columnKey == null ? lastKey(from, true) : keyAbove(from));
+					return;
+				case "ArrowRight":
+					if (handleExpansion(event, from, isReversed() ? "collapse" : "expand")) return;
+					move(keyRightOf(from));
+					return;
+				case "ArrowLeft":
+					if (handleExpansion(event, from, isReversed() ? "expand" : "collapse")) return;
+					move(keyLeftOf(from));
+					return;
+				case "Home":
+					if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
+					move(firstKey(from, isModified));
+					return;
+				case "End":
+					if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
+					move(lastKey(from, isModified));
+					return;
+				case "PageUp":
+					move(pageStep(from, -1));
+					return;
+				case "PageDown":
+					move(pageStep(from, 1));
+					return;
+				case "a":
+					if (!isModified || toValue(options.disallowSelectAll)) return;
+					if (selection.selectionMode.value !== "multiple") return;
+					selection.selectAll();
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				case "Escape":
+					if (escapeKeyBehavior.value !== "clearSelection" || selection.isEmpty.value) return;
+					selection.clearSelection();
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				case " ":
+					if (from.rowKey == null || selection.selectionMode.value === "none") return;
+					selection.select(from.rowKey, { isShiftPressed: event.shiftKey });
+					event.preventDefault();
+					return;
+				case "Tab": {
+					const focusable = focusableIn(element);
+					(event.shiftKey ? element : focusable.at(-1))?.focus();
+					return;
+				}
+				default: return;
 			}
-			default: return;
-		}
+		});
 	};
 	/** Where focus should land when it first enters the grid. */
 	const entryTarget = (fromLater) => {

package/dist/{composables → components/table}/use-grid-selection-announcement.d.ts

@@ -1,5 +1,5 @@
-import type { UseCollectionReturn } from "./use-collection.js";
-import type { UseSelectionManagerReturn } from "./use-selection-manager.js";
+import type { UseCollectionReturn } from "../../composables/use-collection.js";
+import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
 export interface UseGridSelectionAnnouncementOptions {
     collection: UseCollectionReturn;
     selection: UseSelectionManagerReturn;

package/dist/{composables → components/table}/use-grid-selection-announcement.js

@@ -1,6 +1,6 @@
-import { announce } from "../utils/live-announcer.js";
+import { announce } from "../../utils/live-announcer.js";
 import { watch } from "vue";
-//#region src/composables/use-grid-selection-announcement.ts
+//#region src/components/table/use-grid-selection-announcement.ts
 /** The keys in `a` that `b` does not have. A select-all is not a diff anyone can name. */
 var diffSelection = (a, b) => {
 	if (a === "all" || b === "all") return /* @__PURE__ */ new Set();

package/dist/{composables → components/table}/use-table-collection.d.ts

@@ -1,5 +1,5 @@
-import type { VirtualizerTableCollection } from "../utils/virtualizer-collection.js";
-import type { CollectionKey, UseCollectionReturn } from "./use-collection.js";
+import type { CollectionKey, UseCollectionReturn } from "../../composables/use-collection.js";
+import type { VirtualizerTableCollection } from "../../utils/virtualizer-collection.js";
 import type { TableColumnSize } from "./use-table-column-layout.js";
 import type { ComputedRef } from "vue";
 /** The least a registry needs from an entry: where it sits in the document. */

package/dist/{composables → components/table}/use-table-collection.js

@@ -1,8 +1,8 @@
-import { FOCUSABLE_SELECTOR } from "../utils/focus.js";
-import { useCollection } from "./use-collection.js";
-import { createTableCollection } from "../utils/virtualizer-collection.js";
+import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
+import { useCollection } from "../../composables/use-collection.js";
+import { createTableCollection } from "../../utils/virtualizer-collection.js";
 import { computed, shallowRef } from "vue";
-//#region src/composables/use-table-collection.ts
+//#region src/components/table/use-table-collection.ts
 /**
 * A registry of table parts that need to know **where they sit**, not just that they exist.
 *

package/dist/{composables → components/table}/use-table-column-layout.d.ts

@@ -1,7 +1,13 @@
-import type { CollectionKey } from "./use-collection.js";
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { FlexSize } from "../../utils/flex-sizing.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
-/** A column width: pixels as a number, a percentage of the table, or a fraction of what is left. */
-export type TableColumnSize = number | string;
+/**
+ * A column width: pixels as a number, a percentage of the table, or a fraction of what is left.
+ *
+ * The one name from the sizing vocabulary this package still publishes, because
+ * `TableColumnProps.width` names it.
+ */
+export type TableColumnSize = FlexSize;
 export interface TableColumnDefinition {
     key: CollectionKey;
     /** A width the caller controls. Set, it is never changed by a resize. */
@@ -11,25 +17,12 @@ export interface TableColumnDefinition {
     minWidth?: TableColumnSize | null;
     maxWidth?: TableColumnSize | null;
 }
-/** Pixels and percentages are fixed; `fr` units and anything unrecognised flex. */
-export declare const isStaticWidth: (width?: TableColumnSize | null) => boolean;
-/** The number in front of `fr`. Anything else counts as `1fr`, as React Aria has it. */
-export declare const parseFractionalUnit: (width?: TableColumnSize | null) => number;
-export declare const parseStaticWidth: (width: TableColumnSize, tableWidth: number) => number;
-export declare const getMaxWidth: (maxWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
-/**
- * A minimum cannot be given in `fr`: knowing what a fraction comes to would need every other
- * column's width, which is the very thing being solved for.
- */
-export declare const getMinWidth: (minWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
 /**
- * Column widths for one table width, ported from react-stately's `calculateColumnSizes`.
+ * Column widths for one table width.
  *
- * This is the CSS flexbox layout algorithm, cut down to the shape a table needs: one row, a flex
- * basis of zero unless the column asked for a static width, and grow and shrink both equal to the
- * column's `fr`. It is deliberately **not** plain pixel sizing — `1fr` columns have to share what
- * the static and percentage columns leave over, and a minimum or maximum on any one of them
- * redistributes the rest.
+ * The sizing itself is `calculateFlexSizes`; what this adds is the table's own precedence — a
+ * width changed by a resize in flight outranks the declared one — and the mapping from the
+ * table's `width` vocabulary onto the solver's `size` one.
  */
 export declare const calculateColumnSizes: (availableWidth: number, columns: TableColumnDefinition[], changedColumns: Map<CollectionKey, TableColumnSize>, getDefaultWidth?: (index: number) => TableColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => TableColumnSize | null | undefined) => number[];
 export interface BuildColumnWidthsOptions {

package/dist/components/table/use-table-column-layout.js

@@ -0,0 +1,115 @@
+import { calculateFlexSizes, getMaxSize, getMinSize } from "../../utils/flex-sizing.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/components/table/use-table-column-layout.ts
+/**
+* Column widths for one table width.
+*
+* The sizing itself is `calculateFlexSizes`; what this adds is the table's own precedence — a
+* width changed by a resize in flight outranks the declared one — and the mapping from the
+* table's `width` vocabulary onto the solver's `size` one.
+*/
+var calculateColumnSizes = (availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) => {
+	const definitions = columns.map((column) => ({
+		defaultSize: column.defaultWidth,
+		maxSize: column.maxWidth,
+		minSize: column.minWidth,
+		size: changedColumns.get(column.key) ?? column.width
+	}));
+	return calculateFlexSizes(availableWidth, definitions, getDefaultWidth, getDefaultMinWidth);
+};
+/**
+* Every column's width in pixels, keyed by column, ported from react-stately's
+* `TableColumnLayout.buildColumnWidths`.
+*
+* The sizing itself is `calculateColumnSizes` above; what this adds is the pair of defaults a
+* table falls back to — `1fr` for a width nobody declared, and a 75px floor — and the mapping back
+* onto keys. Both the resizable container and the virtualizer's table layout need exactly that,
+* and the two must agree: a column laid out at one width by the browser and at another by the
+* layout would put every cell in the wrong place.
+*
+* @param changedWidths Widths that override what the columns declare, as a resize in flight does.
+*/
+var buildColumnWidths = (availableWidth, columns, changedWidths = /* @__PURE__ */ new Map(), options = {}) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const sizes = calculateColumnSizes(availableWidth, columns, changedWidths, (index) => getDefaultWidth(columns[index]), (index) => getDefaultMinWidth(columns[index]));
+	return new Map(columns.map((column, index) => [column.key, sizes[index] ?? 0]));
+};
+/**
+* Column widths for a resizable table, ported from react-stately's `TableColumnLayout` and
+* `useTableColumnResizeState`.
+*
+* Two things are worth knowing before changing any of it. A column whose `width` the caller set is
+* **controlled**: a resize never writes to it. And dragging one column's edge freezes every column
+* to its **left** at the pixel width it currently has, which is what stops the whole table from
+* reflowing while the pointer moves — the columns to the right keep their declared sizes and
+* absorb the difference.
+*/
+var useTableColumnLayout = (options) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const resizingColumn = shallowRef(null);
+	const uncontrolledColumns = () => options.columns().filter((column) => column.width == null);
+	const initialUncontrolledWidths = () => new Map(uncontrolledColumns().map((column) => [column.key, column.defaultWidth ?? getDefaultWidth(column) ?? "1fr"]));
+	const uncontrolledWidths = shallowRef(initialUncontrolledWidths());
+	watch(() => options.columns().map((column) => column.key).join(" "), () => {
+		uncontrolledWidths.value = initialUncontrolledWidths();
+	});
+	/** The declared width of every column, with the uncontrolled ones taken from state. */
+	const combinedWidths = () => new Map(options.columns().map((column) => [column.key, uncontrolledWidths.value.get(column.key) ?? column.width ?? "1fr"]));
+	const layout = computed(() => {
+		const columns = options.columns();
+		const tableWidth = toValue(options.tableWidth);
+		const widths = buildColumnWidths(tableWidth, columns, combinedWidths(), {
+			getDefaultMinWidth,
+			getDefaultWidth
+		});
+		const minWidths = /* @__PURE__ */ new Map();
+		const maxWidths = /* @__PURE__ */ new Map();
+		for (const column of columns) {
+			minWidths.set(column.key, getMinSize(column.minWidth ?? getDefaultMinWidth(column), tableWidth));
+			maxWidths.set(column.key, getMaxSize(column.maxWidth, tableWidth));
+		}
+		return {
+			maxWidths,
+			minWidths,
+			widths
+		};
+	});
+	const getColumnWidth = (key) => layout.value.widths.get(key) ?? 0;
+	const getColumnMinWidth = (key) => layout.value.minWidths.get(key) ?? 0;
+	const getColumnMaxWidth = (key) => layout.value.maxWidths.get(key) ?? 0;
+	const updateResizedColumns = (key, width) => {
+		const previous = layout.value.widths;
+		const declared = combinedWidths();
+		const clamped = Math.max(getColumnMinWidth(key), Math.min(getColumnMaxWidth(key), Math.floor(width)));
+		const next = /* @__PURE__ */ new Map();
+		let freeze = true;
+		for (const column of options.columns()) if (column.key === key) {
+			next.set(column.key, clamped);
+			freeze = false;
+		} else if (freeze) next.set(column.key, previous.get(column.key) ?? 0);
+		else next.set(column.key, column.width ?? declared.get(column.key) ?? "1fr");
+		const committed = /* @__PURE__ */ new Map();
+		for (const column of uncontrolledColumns()) committed.set(column.key, next.get(column.key) ?? "1fr");
+		committed.set(key, clamped);
+		uncontrolledWidths.value = committed;
+		return next;
+	};
+	return {
+		columnWidths: computed(() => layout.value.widths),
+		endResize: () => {
+			resizingColumn.value = null;
+		},
+		getColumnMaxWidth,
+		getColumnMinWidth,
+		getColumnWidth,
+		resizingColumn: computed(() => resizingColumn.value),
+		startResize: (key) => {
+			resizingColumn.value = key;
+		},
+		updateResizedColumns
+	};
+};
+//#endregion
+export { buildColumnWidths, calculateColumnSizes, useTableColumnLayout };

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

@@ -8,6 +8,7 @@ export declare const TextArea: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
         class?: string;
         value?: string;
         variant?: import("@ropav/styles").TextAreaVariants["variant"];
+        size?: import("@ropav/styles").TextAreaVariants["size"];
         fullWidth?: boolean;
         placeholder?: string;
         onChange?: ((value: string) => any) | undefined;
@@ -31,6 +32,7 @@ export declare const TextArea: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
             class?: string;
             value?: string;
             variant?: import("@ropav/styles").TextAreaVariants["variant"];
+            size?: import("@ropav/styles").TextAreaVariants["size"];
             fullWidth?: boolean;
             placeholder?: string;
             onChange?: ((value: string) => any) | undefined;

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

@@ -13,6 +13,7 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		class: {},
 		value: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -31,9 +32,11 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			control?.registerElement(element.value);
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
+		const resolvedSize = computed(() => props.size ?? textField?.size.value);
 		const styles = computed(() => textAreaVariants({
 			class: props.class,
 			fullWidth: props.fullWidth,
+			size: resolvedSize.value,
 			variant: resolvedVariant.value
 		}));
 		const attrs = computed(() => {

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

@@ -9,6 +9,11 @@ export interface TextAreaRootProps {
     value?: string;
     /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
     variant?: TextAreaVariants["variant"];
+    /**
+     * How much room the text is given, matching a field of the same size. Taken from the
+     * surrounding field when unset. @default "md"
+     */
+    size?: TextAreaVariants["size"];
     /** Whether the control stretches to fill its container. */
     fullWidth?: boolean;
     /**

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

@@ -9,6 +9,7 @@ export declare const TextField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
     props: import('vue').PublicProps & {
         class?: string;
         variant?: "primary" | "secondary";
+        size?: "sm" | "md" | "lg";
         fullWidth?: boolean;
         value?: string;
         defaultValue?: string;
@@ -61,6 +62,7 @@ export declare const TextField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         props: import('vue').PublicProps & {
             class?: string;
             variant?: "primary" | "secondary";
+            size?: "sm" | "md" | "lg";
             fullWidth?: boolean;
             value?: string;
             defaultValue?: string;

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

@@ -12,6 +12,7 @@ var textfield_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 	props: {
 		class: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -101,7 +102,10 @@ var textfield_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		});
 		provideFieldIdsContext(field.fieldIds);
 		provideTextFieldControlContext(field);
-		provideTextFieldContext({ variant: computed(() => props.variant) });
+		provideTextFieldContext({
+			size: computed(() => props.size),
+			variant: computed(() => props.variant)
+		});
 		provideFieldErrorContext({ validation: field.validation.displayValidation });
 		const styles = computed(() => textFieldVariants({
 			class: props.class,

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

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

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

@@ -3,6 +3,11 @@ export interface TextFieldRootProps {
     class?: string;
     /** Visual variant handed down to the control inside. @default "primary" */
     variant?: "primary" | "secondary";
+    /**
+     * How tall the control inside stands, matching a button of the same size. Handed to the control
+     * unless it declares one of its own. @default "md"
+     */
+    size?: "sm" | "md" | "lg";
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** Text in the field. Makes it controlled. */

package/dist/components/time-field/index.d.ts

@@ -58,6 +58,7 @@ export declare const TimeField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         props: import('vue').PublicProps & {
             class?: string;
             variant?: import("@ropav/styles").DateInputGroupVariants["variant"];
+            size?: import("@ropav/styles").DateInputGroupVariants["size"];
             fullWidth?: boolean;
             isDisabled?: boolean;
             isInvalid?: boolean;

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

@@ -223,6 +223,7 @@ export declare const Toast: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
 export { ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastRoot, ToastTitle, };
 export type { ToastActionButtonProps, ToastActionValue, ToastAddOptions, ToastCloseButtonProps, ToastContentProps, ToastContentValue, ToastDescriptionProps, ToastIndicatorProps, ToastOptions, ToastPromiseOptions, ToastProviderProps, ToastProviderSlotProps, ToastQueueOptions, ToastRenderable, ToastRootProps, ToastRootProps as ToastProps, ToastTitleProps, QueuedToast, } from "./toast.types.js";
 export { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
+export type { Timer } from "./toast-queue.js";
 export type { ToastFunction, UseToastQueueReturn } from "./toast-queue.js";
 export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, } from "./toast.constants.js";
 export { useToastItemContext, useToastRegionContext } from "./toast.context.js";

package/dist/components/toast/toast-default-content.js

@@ -1,10 +1,10 @@
+import { useMediaQuery } from "../../composables/use-media-query.js";
 import spinner_root_default from "../spinner/spinner-root.js";
 import toast_action_button_default from "./toast-action-button.js";
 import toast_close_button_default from "./toast-close-button.js";
 import toast_content_default from "./toast-content.js";
 import toast_description_default from "./toast-description.js";
 import toast_indicator_default from "./toast-indicator.js";
-import { useMediaQuery } from "../../composables/use-media-query.js";
 import toast_renderable_default from "./toast-renderable.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";

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

@@ -9,7 +9,7 @@ export declare const Toolbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
     props: import('vue').PublicProps & {
         class?: string;
         isAttached?: boolean;
-        orientation?: import("../../index.js").ToolbarOrientation;
+        orientation?: import("./index.js").ToolbarOrientation;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -32,7 +32,7 @@ export declare const Toolbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
         props: import('vue').PublicProps & {
             class?: string;
             isAttached?: boolean;
-            orientation?: import("../../index.js").ToolbarOrientation;
+            orientation?: import("./index.js").ToolbarOrientation;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
@@ -50,5 +50,6 @@ export { ToolbarRoot };
 export type { ToolbarRootProps, ToolbarRootProps as ToolbarProps } from "./toolbar.types.js";
 export { useToolbarContext } from "./toolbar.context.js";
 export type { ToolbarContext } from "./toolbar.context.js";
+export type { ToolbarOrientation } from "../../composables/use-toolbar.js";
 export { toolbarVariants } from "@ropav/styles";
 export type { ToolbarVariants } from "@ropav/styles";

package/dist/components/tooltip/index.js

@@ -1,8 +1,8 @@
-import tooltip_arrow_default from "./tooltip-arrow.js";
 import { useTooltipContext } from "./tooltip.context.js";
 import tooltip_content_default from "./tooltip-content.js";
 import tooltip_root_default from "./tooltip-root.js";
 import tooltip_trigger_default from "./tooltip-trigger.js";
+import tooltip_arrow_default from "./tooltip-arrow.js";
 import { tooltipVariants } from "@ropav/styles";
 //#region src/components/tooltip/index.ts
 var Tooltip = Object.assign(tooltip_root_default, {

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

@@ -1,6 +1,6 @@
 import { provideFocusResponder } from "../../composables/focus-responder.js";
-import { useCssVariable } from "../../composables/use-css-variable.js";
 import { provideTooltipContext } from "./tooltip.context.js";
+import { useCssVariable } from "../../composables/use-css-variable.js";
 import { useTooltipTrigger } from "../../composables/use-tooltip-trigger.js";
 import { useTooltipTriggerState } from "../../composables/use-tooltip-trigger-state.js";
 import { parseCssTime } from "../../utils/css.js";

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

@@ -1,5 +1,7 @@
+export type { ScrollBoxInfo, ScrollToOffset } from "../../composables/use-virtualizer-scroll.js";
 export { provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext, } from "./virtualizer.context.js";
-export type { VirtualizerConfigContext, VirtualizerStateContext } from "./virtualizer.context.js";
+export type { VirtualizerConfigContext, VirtualizerScrollState, VirtualizerStateContext, } from "./virtualizer.context.js";
 export { default as VirtualizerItem } from "./virtualizer-item.js";
 export { default as VirtualizerRoot } from "./virtualizer-root.js";
+export { default as VirtualizerScrollbar } from "./virtualizer-scrollbar.js";
 export type { VirtualizerItemProps, VirtualizerLayoutProp, VirtualizerRootProps, } from "./virtualizer.types.js";

package/dist/components/virtualizer/index.js

@@ -1,4 +1,5 @@
 import { provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext } from "./virtualizer.context.js";
 import virtualizer_item_default from "./virtualizer-item.js";
 import virtualizer_root_default from "./virtualizer-root.js";
-export { virtualizer_item_default as VirtualizerItem, virtualizer_root_default as VirtualizerRoot, provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext };
+import virtualizer_scrollbar_default from "./virtualizer-scrollbar.js";
+export { virtualizer_item_default as VirtualizerItem, virtualizer_root_default as VirtualizerRoot, virtualizer_scrollbar_default as VirtualizerScrollbar, provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext };

package/dist/components/virtualizer/use-virtualizer-item.d.ts

@@ -0,0 +1,23 @@
+import type { LayoutInfo } from "../../utils/virtualizer-layout-info.js";
+import type { ComputedRef, ShallowRef } from "vue";
+import { layoutInfoToStyle } from "../../utils/virtualizer-layout-info.js";
+export interface UseVirtualizerItemOptions {
+    /** The wrapper element, once it is in the DOM. */
+    element: ShallowRef<HTMLElement | null>;
+    layoutInfo: () => LayoutInfo | null | undefined;
+    parentLayoutInfo?: () => LayoutInfo | null | undefined;
+}
+export interface UseVirtualizerItemReturn {
+    /** Where the wrapper sits and how big it is, as the layout worked it out. */
+    style: ComputedRef<ReturnType<typeof layoutInfoToStyle> | undefined>;
+}
+/**
+ * What a wrapper around one windowed element does: carry the geometry the layout gave it, and
+ * measure what the layout could only estimate.
+ *
+ * A wrapper still carrying an estimate has no height of its own, so what it reports is what its
+ * content came to. React Aria writes the estimate on, clears it to read `scrollHeight`, and writes
+ * it back — a forced reflow per element, and one that fights the size containment the wrapper
+ * also carries.
+ */
+export declare const useVirtualizerItem: (options: UseVirtualizerItemOptions) => UseVirtualizerItemReturn;

package/dist/components/virtualizer/use-virtualizer-item.js

@@ -0,0 +1,45 @@
+import { useVirtualizerStateContext } from "./virtualizer.context.js";
+import { Size } from "../../utils/virtualizer-geometry.js";
+import { layoutInfoToStyle } from "../../utils/virtualizer-layout-info.js";
+import { computed, watch } from "vue";
+//#region src/components/virtualizer/use-virtualizer-item.ts
+/**
+* What a wrapper around one windowed element does: carry the geometry the layout gave it, and
+* measure what the layout could only estimate.
+*
+* A wrapper still carrying an estimate has no height of its own, so what it reports is what its
+* content came to. React Aria writes the estimate on, clears it to read `scrollHeight`, and writes
+* it back — a forced reflow per element, and one that fights the size containment the wrapper
+* also carries.
+*/
+var useVirtualizerItem = (options) => {
+	const virtualizer = useVirtualizerStateContext();
+	const measure = () => {
+		const current = options.element.value;
+		const layoutInfo = options.layoutInfo();
+		if (!current || !layoutInfo) return;
+		const bounds = current.getBoundingClientRect();
+		virtualizer?.updateItemSize(layoutInfo.key, new Size(bounds.width, bounds.height));
+	};
+	watch(() => [options.element.value, options.layoutInfo()], ([current, layoutInfo]) => {
+		if (current && layoutInfo?.estimatedSize) measure();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => [options.element.value, virtualizer?.shouldObserveItemSize.value], ([current, shouldObserve], _previous, onCleanup) => {
+		if (!current || !shouldObserve || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measure());
+		for (const child of current.children) observer.observe(child);
+		onCleanup(() => observer.disconnect());
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return { style: computed(() => {
+		const layoutInfo = options.layoutInfo();
+		return layoutInfo ? layoutInfoToStyle(layoutInfo, options.parentLayoutInfo?.()) : void 0;
+	}) };
+};
+//#endregion
+export { useVirtualizerItem };