@vizejs/ui 0.387.0 → 0.389.0

package/dist/rating-souDdL9t.d.mts

@@ -0,0 +1,273 @@
+import { StyleValue } from "vue";
+
+//#region src/families/form/rating/rating-types.d.ts
+/** Selected Rating value. `null` represents no rating. */
+type RatingValue = number | null;
+/** Text direction used for keyboard movement and styling hooks. */
+type RatingDirection = "ltr" | "rtl";
+/** Values accepted by the native `aria-invalid` attribute. */
+type RatingAriaInvalid = boolean | "grammar" | "spelling";
+/** State exposed through the Rating root Native CSS data contract. */
+type RatingState = "disabled" | "empty" | "invalid" | "readonly" | "selected";
+/** State exposed by each generated Rating item. */
+type RatingItemState = "checked" | "disabled" | "readonly" | "unchecked";
+/** Headless CSS custom properties authored by the Rating root. */
+type RatingStyle = StyleValue & {
+  readonly "--vize-rating-value": string;
+  readonly "--vize-rating-min": string;
+  readonly "--vize-rating-max": string;
+  readonly "--vize-rating-count": string;
+  readonly "--vize-rating-percent": string;
+};
+/** Public props accepted by the Rating component. */
+interface RatingProps {
+  /**
+   * Consumer-owned group id. `null` and `undefined` select a deterministic fallback.
+   *
+   * @default undefined
+   */
+  readonly id?: string | null;
+  /**
+   * Native radio field name submitted with the selected rating.
+   *
+   * @default undefined
+   */
+  readonly name?: string;
+  /**
+   * Controlled rating value. `undefined` selects uncontrolled behavior; `null` clears selection.
+   *
+   * @default undefined
+   */
+  readonly modelValue?: RatingValue;
+  /**
+   * Initial uncontrolled rating and the value restored by form reset.
+   *
+   * @default null
+   */
+  readonly defaultValue?: RatingValue;
+  /**
+   * Lowest generated rating value.
+   *
+   * @default 1
+   */
+  readonly min?: number;
+  /**
+   * Highest generated rating value. When omitted, `count` derives the upper bound.
+   *
+   * @default undefined
+   */
+  readonly max?: number;
+  /**
+   * Number of generated rating choices when `max` is omitted.
+   *
+   * @default 5
+   */
+  readonly count?: number;
+  /**
+   * Allow user activation of the currently selected item, Escape, Delete, or Backspace to clear.
+   *
+   * @default false
+   */
+  readonly clearable?: boolean;
+  /**
+   * Disable native focus, activation, and form submission.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+  /**
+   * Keep the selected rating focusable and submittable while preventing user changes.
+   *
+   * @default false
+   */
+  readonly readOnly?: boolean;
+  /**
+   * Mark the native radio group as required for constraint validation.
+   *
+   * @default false
+   */
+  readonly required?: boolean;
+  /**
+   * Text direction used by horizontal arrow keys and exposed as `data-dir`.
+   *
+   * @default "ltr"
+   */
+  readonly dir?: RatingDirection;
+  /**
+   * Prefix for each generated radio's accessible name.
+   *
+   * @default "Rating"
+   */
+  readonly itemLabel?: string;
+  /**
+   * Accessible name when no visible label or `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+  /**
+   * Space-separated ids that label the rating group.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+  /**
+   * Space-separated ids that describe the rating group.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+  /**
+   * Id of the validation error message used while invalid.
+   *
+   * @default undefined
+   */
+  readonly ariaErrormessage?: string;
+  /**
+   * Invalid state announced to assistive technology.
+   *
+   * @default false
+   */
+  readonly ariaInvalid?: RatingAriaInvalid;
+}
+/** Emits published by the Rating component. */
+interface RatingEmits {
+  /** Fired when the rating requests a new controlled value. */
+  "update:modelValue": [value: RatingValue];
+  /** Fired after user activation requests a distinct rating value. */
+  change: [value: RatingValue, previous: RatingValue, nativeEvent: Event];
+  /** Fired after user activation clears a previously selected rating. */
+  clear: [previous: number, nativeEvent: Event];
+}
+/** State exposed to the Rating default slot and component instance. */
+interface RatingSlotState {
+  /** Current normalized rating value, or `null` when empty. */
+  readonly value: RatingValue;
+  /** Normalized lower bound. */
+  readonly min: number;
+  /** Normalized upper bound. */
+  readonly max: number;
+  /** Number of generated rating choices. */
+  readonly count: number;
+  /** Generated rating values in DOM order. */
+  readonly items: readonly number[];
+  /** Current selected progress from 0 to 100. */
+  readonly percent: number;
+  /** Text direction used by horizontal arrow keys. */
+  readonly direction: RatingDirection;
+  /** Whether user activation, focus, and form submission are disabled. */
+  readonly disabled: boolean;
+  /** Whether the rating is focusable but user changes are locked. */
+  readonly readOnly: boolean;
+  /** Whether native constraint validation marks the radio group required. */
+  readonly required: boolean;
+  /** Whether assistive technology should announce the rating as invalid. */
+  readonly invalid: boolean;
+  /** Whether user gestures may clear the current value. */
+  readonly clearable: boolean;
+  /** Stable state token for styling and tests. */
+  readonly state: RatingState;
+}
+/** State exposed to the Rating item slot. */
+interface RatingItemSlotState extends Omit<RatingSlotState, "items" | "percent" | "state" | "value"> {
+  /** Item value submitted when this radio is selected. */
+  readonly value: number;
+  /** Zero-based item index in DOM order. */
+  readonly index: number;
+  /** Current group value, or `null` when no rating is selected. */
+  readonly currentValue: RatingValue;
+  /** Whether this item is the checked radio. */
+  readonly checked: boolean;
+  /** Whether this item is visually included in the current rating. */
+  readonly active: boolean;
+  /** Item progress from 0 to 100. */
+  readonly percent: number;
+  /** Stable item state token for styling and tests. */
+  readonly state: RatingItemState;
+}
+/** Slots accepted by the Rating component. */
+interface RatingSlots {
+  /** Renders optional summary or output with the normalized Rating state. */
+  default(props: RatingSlotState): unknown;
+  /** Renders each generated rating indicator with item and group state. */
+  item(props: RatingItemSlotState): unknown;
+}
+/** Public component instance exposed by the Rating primitive. */
+interface RatingExpose extends RatingSlotState {
+  /** Rendered root element that owns the data and CSS custom property contract. */
+  readonly root: HTMLSpanElement | null;
+  /** Rendered native radio inputs in DOM order. */
+  readonly elements: readonly HTMLInputElement[];
+  /** Move focus to the checked item, or to the first enabled item. */
+  readonly focus: (options?: FocusOptions) => void;
+  /** Request a rating update and report whether it differs. */
+  readonly setValue: (value: RatingValue) => boolean;
+  /** Clear the current rating and report whether it changed. */
+  readonly clear: () => boolean;
+  /** Restore the current default rating and report whether it changed. */
+  readonly reset: () => boolean;
+}
+//#endregion
+//#region src/families/form/rating/rating.vue.d.ts
+type __VLS_Props = {
+  /** Consumer-owned group id; nullish values use a deterministic fallback. @default undefined */readonly id?: string | null; /** Native radio field name submitted with the selected rating. @default undefined */
+  readonly name?: string; /** Controlled rating value; undefined selects uncontrolled behavior and null clears. @default undefined */
+  readonly modelValue?: RatingValue; /** Initial uncontrolled rating and native form-reset target. @default null */
+  readonly defaultValue?: RatingValue; /** Lowest generated rating value. @default 1 */
+  readonly min?: number; /** Highest generated rating value; when omitted, count derives it. @default undefined */
+  readonly max?: number; /** Number of generated rating choices when max is omitted. @default 5 */
+  readonly count?: number; /** Allow current-item activation, Escape, Delete, or Backspace to clear. @default false */
+  readonly clearable?: boolean; /** Disable native focus, activation, and form submission. @default false */
+  readonly disabled?: boolean; /** Keep focus and current submission while preventing user changes. @default false */
+  readonly readOnly?: boolean; /** Mark the generated native radio set as required. @default false */
+  readonly required?: boolean; /** Text direction for horizontal arrow keys and data attributes. @default "ltr" */
+  readonly dir?: RatingDirection; /** Prefix for each generated radio accessible name. @default "Rating" */
+  readonly itemLabel?: string; /** Accessible name when no visible label or aria-labelledby supplies one. @default undefined */
+  readonly ariaLabel?: string; /** Space-separated ids that label the rating group. @default undefined */
+  readonly ariaLabelledby?: string; /** Space-separated ids that describe the rating group. @default undefined */
+  readonly ariaDescribedby?: string; /** Id of the validation error message used while invalid. @default undefined */
+  readonly ariaErrormessage?: string; /** Invalid state announced to assistive technology. @default false */
+  readonly ariaInvalid?: RatingAriaInvalid;
+};
+type __VLS_Slots = {
+  /** Renders optional summary or output with the normalized Rating state. */default(props: RatingSlotState): unknown; /** Renders each generated rating indicator with item and group state. */
+  item(props: RatingItemSlotState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  clear: () => boolean;
+  clearable: import("vue").ComputedRef<boolean>;
+  count: import("vue").ComputedRef<number>;
+  direction: import("vue").ComputedRef<RatingDirection>;
+  disabled: import("vue").ComputedRef<boolean>;
+  elements: import("vue").ComputedRef<readonly HTMLInputElement[]>;
+  focus: (options?: FocusOptions) => void;
+  invalid: import("vue").ComputedRef<boolean>;
+  items: import("vue").ComputedRef<readonly number[]>;
+  max: import("vue").ComputedRef<number>;
+  min: import("vue").ComputedRef<number>;
+  percent: import("vue").ComputedRef<number>;
+  readOnly: import("vue").ComputedRef<boolean>;
+  required: import("vue").ComputedRef<boolean>;
+  reset: () => boolean;
+  root: Readonly<import("vue").ShallowRef<HTMLSpanElement | null>>;
+  setValue: (next: RatingValue) => boolean;
+  state: import("vue").ComputedRef<RatingState>;
+  value: import("vue").ComputedRef<RatingValue>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: (previous: number, nativeEvent: Event) => any;
+  "update:modelValue": (value: RatingValue) => any;
+  change: (value: RatingValue, previous: RatingValue, nativeEvent: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+  onClear?: (previous: number, nativeEvent: Event) => any;
+  "onUpdate:modelValue"?: (value: RatingValue) => any;
+  onChange?: (value: RatingValue, previous: RatingValue, nativeEvent: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { RatingExpose as a, RatingProps as c, RatingState as d, RatingStyle as f, RatingEmits as i, RatingSlotState as l, RatingAriaInvalid as n, RatingItemSlotState as o, RatingValue as p, RatingDirection as r, RatingItemState as s, _default as t, RatingSlots as u };

package/dist/rating.d.mts

@@ -0,0 +1,2 @@
+import { a as RatingExpose, c as RatingProps, d as RatingState, f as RatingStyle, i as RatingEmits, l as RatingSlotState, n as RatingAriaInvalid, o as RatingItemSlotState, p as RatingValue, r as RatingDirection, s as RatingItemState, t as _default, u as RatingSlots } from "./rating-souDdL9t.mjs";
+export { _default as Rating, type RatingAriaInvalid, type RatingDirection, type RatingEmits, type RatingExpose, type RatingItemSlotState, type RatingItemState, type RatingProps, type RatingSlotState, type RatingSlots, type RatingState, type RatingStyle, type RatingValue };

package/dist/rating.mjs

@@ -0,0 +1,2 @@
+import { t as rating_default } from "./rating-BjKLGPP6.mjs";
+export { rating_default as Rating };

package/dist/scroll-area-BRSwoi9w.mjs

@@ -0,0 +1,338 @@
+import './style.css';
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+//#region src/families/layout/scroll-area/scroll-area-runtime.ts
+const defaultSize = "auto";
+const defaultMaxSize = "none";
+/** Normalize one optional ARIA token or IDREF list without inventing ids. */
+function normalizeScrollAreaAriaToken(value) {
+	const normalized = value?.trim().replaceAll(/\s+/g, " ");
+	return normalized === "" ? void 0 : normalized;
+}
+/** Resolve ScrollArea accessibility props into native viewport ARIA attributes. */
+function resolveScrollAreaAria(options) {
+	return {
+		ariaDescribedby: normalizeScrollAreaAriaToken(options.ariaDescribedby),
+		ariaLabel: normalizeScrollAreaAriaToken(options.ariaLabel),
+		ariaLabelledby: normalizeScrollAreaAriaToken(options.ariaLabelledby)
+	};
+}
+/** Convert numeric CSS lengths to px while keeping authored strings intact. */
+function normalizeScrollAreaLength(value, fallback) {
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : fallback;
+	return value === void 0 ? fallback : value;
+}
+/** Resolve the native overflow pair for one logical scroll orientation. */
+function resolveScrollAreaOverflow(orientation) {
+	if (orientation === "horizontal") return {
+		overflowX: "auto",
+		overflowY: "hidden"
+	};
+	if (orientation === "both") return {
+		overflowX: "auto",
+		overflowY: "auto"
+	};
+	return {
+		overflowX: "hidden",
+		overflowY: "auto"
+	};
+}
+/** Resolve ScrollArea props into CSS custom properties and slot/expose state. */
+function resolveScrollAreaLayout(options) {
+	const orientation = options.orientation ?? "vertical";
+	const { overflowX, overflowY } = resolveScrollAreaOverflow(orientation);
+	const blockSize = normalizeScrollAreaLength(options.blockSize, defaultSize);
+	const inlineSize = normalizeScrollAreaLength(options.inlineSize, defaultSize);
+	const maxBlockSize = normalizeScrollAreaLength(options.maxBlockSize, defaultMaxSize);
+	const maxInlineSize = normalizeScrollAreaLength(options.maxInlineSize, defaultMaxSize);
+	const overscrollBehavior = options.overscrollBehavior ?? "auto";
+	const scrollBehavior = options.scrollBehavior ?? "auto";
+	const scrollbarGutter = options.scrollbarGutter ?? "auto";
+	const scrollbarWidth = options.scrollbarWidth ?? "auto";
+	const style = {
+		"--vize-ui-scroll-area-block-size": blockSize,
+		"--vize-ui-scroll-area-inline-size": inlineSize,
+		"--vize-ui-scroll-area-max-block-size": maxBlockSize,
+		"--vize-ui-scroll-area-max-inline-size": maxInlineSize,
+		"--vize-ui-scroll-area-overscroll-behavior": overscrollBehavior,
+		"--vize-ui-scroll-area-overflow-x": overflowX,
+		"--vize-ui-scroll-area-overflow-y": overflowY,
+		"--vize-ui-scroll-area-scroll-behavior": scrollBehavior,
+		"--vize-ui-scroll-area-scrollbar-gutter": scrollbarGutter,
+		"--vize-ui-scroll-area-scrollbar-width": scrollbarWidth
+	};
+	return {
+		blockSize,
+		dir: options.dir ?? "ltr",
+		focusable: options.focusable === true,
+		inlineSize,
+		maxBlockSize,
+		maxInlineSize,
+		orientation,
+		overflowX,
+		overflowY,
+		overscrollBehavior,
+		scrollBehavior,
+		scrollbarGutter,
+		scrollbarWidth,
+		state: "scrollable",
+		style
+	};
+}
+//#endregion
+//#region src/families/layout/scroll-area/scroll-area.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"dir",
+	"data-state",
+	"data-orientation",
+	"data-dir",
+	"data-focusable",
+	"data-overflow-x",
+	"data-overflow-y"
+];
+//#endregion
+//#region src/families/layout/scroll-area/scroll-area.vue
+var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "scroll-area",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		focusable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		blockSize: {
+			type: [String, Number],
+			required: false,
+			default: "auto"
+		},
+		inlineSize: {
+			type: [String, Number],
+			required: false,
+			default: "auto"
+		},
+		maxBlockSize: {
+			type: [String, Number],
+			required: false,
+			default: () => void 0
+		},
+		maxInlineSize: {
+			type: [String, Number],
+			required: false,
+			default: () => void 0
+		},
+		overscrollBehavior: {
+			type: String,
+			required: false,
+			default: "auto"
+		},
+		scrollBehavior: {
+			type: String,
+			required: false,
+			default: "auto"
+		},
+		scrollbarGutter: {
+			type: String,
+			required: false,
+			default: "auto"
+		},
+		scrollbarWidth: {
+			type: String,
+			required: false,
+			default: "auto"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["scroll"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const root = useTemplateRef("root");
+		const viewport = useTemplateRef("viewport");
+		const layout = computed(() => resolveScrollAreaLayout({
+			blockSize: __props.blockSize,
+			dir: __props.dir,
+			focusable: __props.focusable,
+			inlineSize: __props.inlineSize,
+			maxBlockSize: __props.maxBlockSize,
+			maxInlineSize: __props.maxInlineSize,
+			orientation: __props.orientation,
+			overscrollBehavior: __props.overscrollBehavior,
+			scrollBehavior: __props.scrollBehavior,
+			scrollbarGutter: __props.scrollbarGutter,
+			scrollbarWidth: __props.scrollbarWidth
+		}));
+		const ariaState = computed(() => resolveScrollAreaAria({
+			ariaDescribedby: __props.ariaDescribedby,
+			ariaLabel: __props.ariaLabel,
+			ariaLabelledby: __props.ariaLabelledby
+		}));
+		const asState = computed(() => __props.as);
+		const orientationState = computed(() => layout.value.orientation);
+		const directionState = computed(() => layout.value.dir);
+		const focusableState = computed(() => layout.value.focusable);
+		const blockSizeState = computed(() => layout.value.blockSize);
+		const inlineSizeState = computed(() => layout.value.inlineSize);
+		const maxBlockSizeState = computed(() => layout.value.maxBlockSize);
+		const maxInlineSizeState = computed(() => layout.value.maxInlineSize);
+		const overflowXState = computed(() => layout.value.overflowX);
+		const overflowYState = computed(() => layout.value.overflowY);
+		const overscrollBehaviorState = computed(() => layout.value.overscrollBehavior);
+		const scrollBehaviorState = computed(() => layout.value.scrollBehavior);
+		const scrollbarGutterState = computed(() => layout.value.scrollbarGutter);
+		const scrollbarWidthState = computed(() => layout.value.scrollbarWidth);
+		const scrollAreaState = computed(() => layout.value.state);
+		const scrollAreaStyle = computed(() => layout.value.style);
+		const ariaLabelState = computed(() => ariaState.value.ariaLabel);
+		const ariaLabelledbyState = computed(() => ariaState.value.ariaLabelledby);
+		const ariaDescribedbyState = computed(() => ariaState.value.ariaDescribedby);
+		const labelled = computed(() => ariaLabelState.value !== void 0 || ariaLabelledbyState.value !== void 0);
+		const described = computed(() => ariaDescribedbyState.value !== void 0);
+		const viewportAriaAttributes = computed(() => {
+			const attributes = {};
+			if (ariaDescribedbyState.value !== void 0) attributes["aria-describedby"] = ariaDescribedbyState.value;
+			if (ariaLabelState.value !== void 0) attributes["aria-label"] = ariaLabelState.value;
+			if (ariaLabelledbyState.value !== void 0) attributes["aria-labelledby"] = ariaLabelledbyState.value;
+			if (labelled.value) attributes.role = "region";
+			if (focusableState.value) attributes.tabindex = 0;
+			return attributes;
+		});
+		const rootIntrinsicProps = computed(() => ({ style: scrollAreaStyle.value }));
+		const slotState = computed(() => ({
+			ariaDescribedby: ariaDescribedbyState.value,
+			ariaLabel: ariaLabelState.value,
+			ariaLabelledby: ariaLabelledbyState.value,
+			as: asState.value,
+			blockSize: blockSizeState.value,
+			described: described.value,
+			dir: directionState.value,
+			focusable: focusableState.value,
+			inlineSize: inlineSizeState.value,
+			labelled: labelled.value,
+			maxBlockSize: maxBlockSizeState.value,
+			maxInlineSize: maxInlineSizeState.value,
+			orientation: orientationState.value,
+			overflowX: overflowXState.value,
+			overflowY: overflowYState.value,
+			overscrollBehavior: overscrollBehaviorState.value,
+			scrollBehavior: scrollBehaviorState.value,
+			scrollbarGutter: scrollbarGutterState.value,
+			scrollbarWidth: scrollbarWidthState.value,
+			state: scrollAreaState.value,
+			style: scrollAreaStyle.value
+		}));
+		function onScroll(event) {
+			emit("scroll", event);
+		}
+		function focus(options) {
+			viewport.value?.focus(options);
+		}
+		function scrollTo(options = {}) {
+			viewport.value?.scrollTo(options);
+		}
+		function scrollBy(options = {}) {
+			viewport.value?.scrollBy(options);
+		}
+		__expose({
+			ariaDescribedby: ariaDescribedbyState,
+			ariaLabel: ariaLabelState,
+			ariaLabelledby: ariaLabelledbyState,
+			as: asState,
+			blockSize: blockSizeState,
+			described,
+			dir: directionState,
+			focus,
+			focusable: focusableState,
+			inlineSize: inlineSizeState,
+			labelled,
+			maxBlockSize: maxBlockSizeState,
+			maxInlineSize: maxInlineSizeState,
+			orientation: orientationState,
+			overflowX: overflowXState,
+			overflowY: overflowYState,
+			overscrollBehavior: overscrollBehaviorState,
+			root,
+			scrollBehavior: scrollBehaviorState,
+			scrollBy,
+			scrollbarGutter: scrollbarGutterState,
+			scrollbarWidth: scrollbarWidthState,
+			scrollTo,
+			state: scrollAreaState,
+			style: scrollAreaStyle,
+			viewport
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(asState.value), mergeProps({
+				ref_key: "root",
+				ref: root,
+				dir: directionState.value,
+				part: "root",
+				"data-vize-ui": "scroll-area",
+				"data-state": scrollAreaState.value,
+				"data-orientation": orientationState.value,
+				"data-dir": directionState.value,
+				"data-focusable": focusableState.value ? "true" : "false",
+				"data-overscroll-behavior": overscrollBehaviorState.value,
+				"data-scroll-behavior": scrollBehaviorState.value,
+				"data-scrollbar-gutter": scrollbarGutterState.value,
+				"data-scrollbar-width": scrollbarWidthState.value
+			}, rootIntrinsicProps.value), {
+				default: withCtx(() => [createElementVNode("div", mergeProps({
+					ref_key: "viewport",
+					ref: viewport
+				}, viewportAriaAttributes.value, {
+					dir: directionState.value,
+					part: "viewport",
+					"data-vize-ui": "scroll-area-viewport",
+					"data-state": scrollAreaState.value,
+					"data-orientation": orientationState.value,
+					"data-dir": directionState.value,
+					"data-focusable": focusableState.value ? "true" : "false",
+					"data-overflow-x": overflowXState.value,
+					"data-overflow-y": overflowYState.value,
+					onScroll
+				}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1)]),
+				_: 3
+			}, 16, [
+				"dir",
+				"data-state",
+				"data-orientation",
+				"data-dir",
+				"data-focusable",
+				"data-overscroll-behavior",
+				"data-scroll-behavior",
+				"data-scrollbar-gutter",
+				"data-scrollbar-width"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-dbb63f3e"]]);
+//#endregion
+export { scroll_area_default as t };

package/dist/scroll-area.d.mts

@@ -0,0 +1,2 @@
+import { Br as ScrollAreaOverscrollBehavior, Fr as ScrollAreaEmits, Gr as ScrollAreaScrollBehavior, Hr as ScrollAreaResolvedLayout, Ir as ScrollAreaExpose, Jr as ScrollAreaSlotState, Kr as ScrollAreaScrollbarGutter, Lr as ScrollAreaLength, Mr as ScrollAreaAriaState, Nr as ScrollAreaAs, Pr as ScrollAreaDirection, Rr as ScrollAreaOrientation, Ur as ScrollAreaResolvedLength, Vr as ScrollAreaProps, Wr as ScrollAreaRootElement, Xr as ScrollAreaStyle, Yr as ScrollAreaState, jr as _default, qr as ScrollAreaScrollbarWidth, zr as ScrollAreaOverflow } from "./announcer-CuBryPW9.mjs";
+export { _default as ScrollArea, type ScrollAreaAriaState, type ScrollAreaAs, type ScrollAreaDirection, type ScrollAreaEmits, type ScrollAreaExpose, type ScrollAreaLength, type ScrollAreaOrientation, type ScrollAreaOverflow, type ScrollAreaOverscrollBehavior, type ScrollAreaProps, type ScrollAreaResolvedLayout, type ScrollAreaResolvedLength, type ScrollAreaRootElement, type ScrollAreaScrollBehavior, type ScrollAreaScrollbarGutter, type ScrollAreaScrollbarWidth, type ScrollAreaSlotState, type ScrollAreaState, type ScrollAreaStyle };

package/dist/scroll-area.mjs

@@ -0,0 +1,2 @@
+import { t as scroll_area_default } from "./scroll-area-BRSwoi9w.mjs";
+export { scroll_area_default as ScrollArea };

package/dist/{scroll-lock-Ckbmm0-J.mjs → scroll-lock-BcmK0baN.mjs}

@@ -1,5 +1,5 @@
 import { getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, shallowReadonly, shallowRef, toValue, watch } from "vue";
-//#region src/scroll-lock-internal.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock-internal.ts
 const optionDiagnostic = "VIZE_UI_SCROLL_LOCK_OPTION";
 function readDocument(source) {
 	const value = toValue(source);
@@ -28,7 +28,7 @@ function validateScrollLockOptions(options) {
 	readStrategy(options.strategy);
 }
 //#endregion
-//#region src/scroll-lock-dom.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock-dom.ts
 const rootProperties = [
 	"--vize-scroll-lock-scrollbar-gap",
 	"overflow",
@@ -125,7 +125,7 @@ function restoreDocumentScroll(snapshot) {
 	} catch {}
 }
 //#endregion
-//#region src/scroll-lock-stack.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock-stack.ts
 const states = /* @__PURE__ */ new WeakMap();
 function stateFor(document) {
 	let state = states.get(document);
@@ -212,7 +212,7 @@ function refreshScrollLock(token) {
 	if (token.document) recomputeScrollLock(stateFor(token.document));
 }
 //#endregion
-//#region src/scroll-lock.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock.ts
 const disposedDiagnostic = "VIZE_UI_SCROLL_LOCK_DISPOSED";
 const setupDiagnostic = "VIZE_UI_SCROLL_LOCK_SETUP";
 /** Lock a reactive document viewport without suppressing browser zoom gestures. */

package/dist/{scroll-lock-BgVtX4wT.d.mts → scroll-lock-OfSQnfi0.d.mts}

@@ -1,6 +1,6 @@
 import { MaybeRefOrGetter, ShallowRef } from "vue";
 
-//#region src/scroll-lock-types.d.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock-types.d.ts
 /** Viewport-locking strategy selected for a document. */
 type ScrollLockStrategy = "auto" | "fixed" | "overflow";
 /** Reactive configuration for one document scroll-lock owner. */
@@ -40,7 +40,7 @@ interface ScrollLockController {
   readonly dispose: () => void;
 }
 //#endregion
-//#region src/scroll-lock.d.ts
+//#region src/families/accessibility/scroll-lock/scroll-lock.d.ts
 /** Lock a reactive document viewport without suppressing browser zoom gestures. */
 declare function createScrollLock(options: ScrollLockOptions): ScrollLockController;
 /** Create, mount-activate, and scope-dispose a document scroll lock. */

package/dist/scroll-lock.d.mts

@@ -1,2 +1,2 @@
-import { a as ScrollLockStrategy, i as ScrollLockOptions, n as useScrollLock, r as ScrollLockController, t as createScrollLock } from "./scroll-lock-BgVtX4wT.mjs";
+import { a as ScrollLockStrategy, i as ScrollLockOptions, n as useScrollLock, r as ScrollLockController, t as createScrollLock } from "./scroll-lock-OfSQnfi0.mjs";
 export { type ScrollLockController, type ScrollLockOptions, type ScrollLockStrategy, createScrollLock, useScrollLock };