vectis-ui 0.12.0 → 0.14.0

package/dist/components/VVirtualList/VVirtualList.d.ts

@@ -0,0 +1,78 @@
+/** Where `scrollToIndex` brings the row: to the top, the middle, the bottom, or barely in view. */
+export type VirtualListAlign = ScrollLogicalPosition;
+/** What the default slot receives for each rendered row. */
+export interface VirtualListItemSlotProps<T> {
+    item: T;
+    index: number;
+}
+/** The props of VVirtualList, for a row type `T`. */
+export interface VirtualListProps<T> {
+    /** The rows of the list, all of them: only those near the viewport are rendered. */
+    items: T[];
+    /**
+     * The field identifying a row, under which its measured height is remembered. Without it a
+     * row is identified by its position, which suits a list that only grows at the end.
+     */
+    itemKey?: string;
+    /**
+     * The height assumed for a row not rendered yet, in pixels. Each row is measured once it
+     * renders, so this is only an estimate; the closer it is, the steadier the scrollbar.
+     */
+    itemSize?: number;
+    /** How many rows to render beyond each edge of the viewport, so a fast scroll shows no gap. */
+    overscan?: number;
+    /**
+     * How many rows to render before the list can measure its viewport: on the server and until
+     * the page is hydrated.
+     */
+    initialCount?: number;
+    /**
+     * The height of the list: a number of pixels or any CSS length. Without it, give the list a
+     * bounded height in your own CSS; a list that grows with its content renders every row.
+     */
+    height?: number | string;
+    /** The accessible name of the list. */
+    label?: string;
+    /** Says that rows are being loaded: a row with a spinner ends the list. */
+    loading?: boolean;
+    /** What that row says, and what the spinner is announced as. */
+    loadingText?: string;
+    /**
+     * Says that there are more rows to come, which makes the list ask for them as its end comes
+     * into view. The total is then announced as unknown.
+     */
+    hasMore?: boolean;
+}
+declare const __VLS_export: <T>(__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<VirtualListProps<T> & {
+        "onLoad-more"?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        /**
+         * Scrolls the list until a row is in view, rendering it first if needed. `align` places it at
+         * the top, the middle or the bottom; by default it moves as little as possible.
+         */
+        scrollToIndex: (index: number, align?: VirtualListAlign) => Promise<void>;
+        /** The scrolling element, which carries the list role. */
+        el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** One row of the list. */
+        default(props: VirtualListItemSlotProps<T>): unknown;
+        /** Replaces the spinner and the text of the loading row. */
+        loading?(): unknown;
+    };
+    emit: (evt: "load-more") => 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/VVirtualList/VVirtualList.js

@@ -0,0 +1,9 @@
+import './VVirtualList.css';
+import e from "./VVirtualList.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                             */
+//#region src/components/VVirtualList/VVirtualList.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VVirtualList.js.map

package/dist/components/VVirtualList/VVirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VVirtualList.js","names":[],"sources":["../../../src/components/VVirtualList/VVirtualList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\n// @a11y @ssr @core\n/**\n * A list too long to render whole: only the rows near its viewport exist in the page. It is its\n * own scroll container, focusable so the keyboard can scroll it, and each row says where it\n * stands in the whole list. Rows are measured as they render, so they may differ in height.\n */\nimport { computed, ref, toRaw, watch } from 'vue'\n\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { useVirtualList } from '../../composables/useVirtualList'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** Where `scrollToIndex` brings the row: to the top, the middle, the bottom, or barely in view. */\nexport type VirtualListAlign = ScrollLogicalPosition\n\n/** What the default slot receives for each rendered row. */\nexport interface VirtualListItemSlotProps<T> {\n  item: T\n  index: number\n}\n\n/** The props of VVirtualList, for a row type `T`. */\nexport interface VirtualListProps<T> {\n  /** The rows of the list, all of them: only those near the viewport are rendered. */\n  items: T[]\n  /**\n   * The field identifying a row, under which its measured height is remembered. Without it a\n   * row is identified by its position, which suits a list that only grows at the end.\n   */\n  itemKey?: string\n  /**\n   * The height assumed for a row not rendered yet, in pixels. Each row is measured once it\n   * renders, so this is only an estimate; the closer it is, the steadier the scrollbar.\n   */\n  itemSize?: number\n  /** How many rows to render beyond each edge of the viewport, so a fast scroll shows no gap. */\n  overscan?: number\n  /**\n   * How many rows to render before the list can measure its viewport: on the server and until\n   * the page is hydrated.\n   */\n  initialCount?: number\n  /**\n   * The height of the list: a number of pixels or any CSS length. Without it, give the list a\n   * bounded height in your own CSS; a list that grows with its content renders every row.\n   */\n  height?: number | string\n  /** The accessible name of the list. */\n  label?: string\n  /** Says that rows are being loaded: a row with a spinner ends the list. */\n  loading?: boolean\n  /** What that row says, and what the spinner is announced as. */\n  loadingText?: string\n  /**\n   * Says that there are more rows to come, which makes the list ask for them as its end comes\n   * into view. The total is then announced as unknown.\n   */\n  hasMore?: boolean\n}\n\nconst props = withDefaults(defineProps<VirtualListProps<T>>(), {\n  itemKey: undefined,\n  itemSize: 40,\n  overscan: 5,\n  initialCount: 10,\n  height: undefined,\n  label: undefined,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n})\n\nconst emit = defineEmits<{\n  /** The end of the list has come into view: send the next rows. */\n  'load-more': []\n}>()\n\ndefineSlots<{\n  /** One row of the list. */\n  default(props: VirtualListItemSlotProps<T>): unknown\n  /** Replaces the spinner and the text of the loading row. */\n  loading?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst listEl = ref<HTMLElement | null>(null)\nconst sentinelEl = ref<HTMLElement | null>(null)\n\n// Read through the raw array: computing the offsets visits every row's key, and a reactive read\n// for each of a hundred thousand rows is what would make scrolling stutter. The length is still\n// read reactively, so rows pushed in place are seen.\nfunction keyOf(index: number): unknown {\n  if (!props.itemKey) return index\n  const item = toRaw(props.items)[index] as Record<string, unknown> | undefined\n  return item?.[props.itemKey]\n}\n\n// @a11y\n// The row holding the focus stays rendered while the list scrolls away from it: dropping it\n// would send the focus back to the page.\nconst focusedIndex = ref(-1)\n\nconst virtualList = useVirtualList({\n  scrollEl: listEl,\n  count: () => props.items.length,\n  key: keyOf,\n  itemSize: () => props.itemSize,\n  overscan: () => props.overscan,\n  initialCount: () => props.initialCount,\n  pinned: () => (focusedIndex.value >= 0 ? [focusedIndex.value] : []),\n})\nconst { segments, measure } = virtualList\n\nfunction rowOf(target: EventTarget | null) {\n  if (!(target instanceof Element)) return -1\n  const row = target.closest('.v-virtual-list-item')\n  if (!row || row.parentElement !== listEl.value) return -1\n  return Number((row as HTMLElement).dataset.index)\n}\n\nfunction onFocusin(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.target)\n}\n\nfunction onFocusout(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.relatedTarget)\n}\n\nuseInfiniteScroll({\n  sentinelEl,\n  root: () => listEl.value,\n  canLoad: () => props.hasMore && !props.loading,\n  loaded: () => props.items,\n  onLoadMore: () => emit('load-more'),\n})\n\n// @devwarn\n// A list without a bounded height grows with its content, so every row is in view and\n// rendered: the symptom is a long list that never scrolls.\nif (isDev) {\n  watch(\n    segments,\n    (list) => {\n      const el = listEl.value\n      if (!el || props.items.length < 100 || el.scrollHeight > el.clientHeight) return\n      if (list.some((segment) => segment.type === 'spacer')) return\n      console.warn(\n        '[VVirtualList] Every row is rendered because the list does not scroll: give it a `height` or a bounded height in CSS.',\n      )\n    },\n    { flush: 'post', once: true },\n  )\n}\n\ndefineExpose({\n  /**\n   * Scrolls the list until a row is in view, rendering it first if needed. `align` places it at\n   * the top, the middle or the bottom; by default it moves as little as possible.\n   */\n  scrollToIndex: (index: number, align?: VirtualListAlign) =>\n    virtualList.scrollToIndex(index, align),\n  /** The scrolling element, which carries the list role. */\n  el: listEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"listEl\"\n    class=\"v-virtual-list\"\n    role=\"list\"\n    tabindex=\"0\"\n    :aria-label=\"label\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n    :style=\"{ blockSize: cssSize(height) }\"\n    @focusin=\"onFocusin\"\n    @focusout=\"onFocusout\"\n  >\n    <template\n      v-for=\"segment in segments\"\n      :key=\"segment.type === 'row' ? `row:${String(keyOf(segment.index))}` : segment.key\"\n    >\n      <div\n        v-if=\"segment.type === 'spacer'\"\n        class=\"v-virtual-list-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${segment.size}px` }\"\n      />\n      <div\n        v-else\n        :ref=\"(el) => measure(el as Element | null, segment.index)\"\n        role=\"listitem\"\n        class=\"v-virtual-list-item\"\n        :aria-setsize=\"hasMore ? -1 : items.length\"\n        :aria-posinset=\"segment.index + 1\"\n        :data-index=\"segment.index\"\n      >\n        <slot :item=\"items[segment.index]!\" :index=\"segment.index\" />\n      </div>\n    </template>\n\n    <!--\n      A single element for as long as more rows may come: replacing it would cancel the\n      observation, and no further rows would be asked for. Hidden from assistive technology,\n      which hears `aria-busy` on the list instead.\n    -->\n    <div v-if=\"hasMore || loading\" ref=\"sentinelEl\" class=\"v-virtual-list-more\" aria-hidden=\"true\">\n      <slot v-if=\"loading\" name=\"loading\">\n        <VSpinner :label=\"resolvedLoadingText\" />\n        <span>{{ resolvedLoadingText }}</span>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The list corrects its scroll itself when a row above the view changes height; the browser's\n   * own anchoring would apply the same correction a second time. Positioned, so it contains the\n   * absolutely positioned parts of the rows: positioned against an ancestor beyond it, they\n   * escape its clip and stretch the page.\n   */\n  .v-virtual-list {\n    position: relative;\n    display: block;\n    overflow-y: auto;\n    overflow-anchor: none;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-virtual-list:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /*\n   * A row contains the margins of its content: collapsing through it, they would sit between\n   * rows where no measurement sees them.\n   */\n  .v-virtual-list-item {\n    display: flow-root;\n  }\n\n  .v-virtual-list-more {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    min-block-size: var(--vectis-control-height-md);\n    padding: var(--vectis-space-2);\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VVirtualList/VVirtualList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,114 @@
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t } from "../../i18n/state.js";
+import { cssSize as n } from "../../utils/css.js";
+import r from "../VSpinner/VSpinner.js";
+import { useInfiniteScroll as i } from "../../composables/useInfiniteScroll.js";
+import { useVirtualList as a } from "../../composables/useVirtualList.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRaw as y, unref as b, watch as x } from "vue";
+//#region src/components/VVirtualList/VVirtualList.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-label", "aria-busy"], C = [
+	"aria-setsize",
+	"aria-posinset",
+	"data-index"
+], w = /*@__PURE__*/ f({
+	__name: "VVirtualList",
+	props: {
+		items: {},
+		itemKey: { default: void 0 },
+		itemSize: { default: 40 },
+		overscan: { default: 5 },
+		initialCount: { default: 10 },
+		height: { default: void 0 },
+		label: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: void 0 },
+		hasMore: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["load-more"],
+	setup(f, { expose: w, emit: T }) {
+		let E = f, D = T, O = t(), k = s(() => E.loadingText ?? O.value.common.loading), A = h(null), j = h(null);
+		function M(e) {
+			return E.itemKey ? y(E.items)[e]?.[E.itemKey] : e;
+		}
+		let N = h(-1), P = a({
+			scrollEl: A,
+			count: () => E.items.length,
+			key: M,
+			itemSize: () => E.itemSize,
+			overscan: () => E.overscan,
+			initialCount: () => E.initialCount,
+			pinned: () => N.value >= 0 ? [N.value] : []
+		}), { segments: F, measure: I } = P;
+		function L(e) {
+			if (!(e instanceof Element)) return -1;
+			let t = e.closest(".v-virtual-list-item");
+			return !t || t.parentElement !== A.value ? -1 : Number(t.dataset.index);
+		}
+		function R(e) {
+			N.value = L(e.target);
+		}
+		function z(e) {
+			N.value = L(e.relatedTarget);
+		}
+		return i({
+			sentinelEl: j,
+			root: () => A.value,
+			canLoad: () => E.hasMore && !E.loading,
+			loaded: () => E.items,
+			onLoadMore: () => D("load-more")
+		}), e && x(F, (e) => {
+			let t = A.value;
+			!t || E.items.length < 100 || t.scrollHeight > t.clientHeight || e.some((e) => e.type === "spacer") || console.warn("[VVirtualList] Every row is rendered because the list does not scroll: give it a `height` or a bounded height in CSS.");
+		}, {
+			flush: "post",
+			once: !0
+		}), w({
+			scrollToIndex: (e, t) => P.scrollToIndex(e, t),
+			el: A
+		}), (e, t) => (m(), l("div", {
+			ref_key: "listEl",
+			ref: A,
+			class: "v-virtual-list",
+			role: "list",
+			tabindex: "0",
+			"aria-label": f.label,
+			"aria-busy": f.loading ? "true" : void 0,
+			style: p({ blockSize: b(n)(f.height) }),
+			onFocusin: R,
+			onFocusout: z
+		}, [(m(!0), l(o, null, g(b(F), (t) => (m(), l(o, { key: t.type === "row" ? `row:${String(M(t.index))}` : t.key }, [t.type === "spacer" ? (m(), l("div", {
+			key: 0,
+			class: "v-virtual-list-spacer",
+			"aria-hidden": "true",
+			style: p({ blockSize: `${t.size}px` })
+		}, null, 4)) : (m(), l("div", {
+			key: 1,
+			ref_for: !0,
+			ref: (e) => b(I)(e, t.index),
+			role: "listitem",
+			class: "v-virtual-list-item",
+			"aria-setsize": f.hasMore ? -1 : f.items.length,
+			"aria-posinset": t.index + 1,
+			"data-index": t.index
+		}, [_(e.$slots, "default", {
+			item: f.items[t.index],
+			index: t.index
+		})], 8, C))], 64))), 128)), f.hasMore || f.loading ? (m(), l("div", {
+			key: 0,
+			ref_key: "sentinelEl",
+			ref: j,
+			class: "v-virtual-list-more",
+			"aria-hidden": "true"
+		}, [f.loading ? _(e.$slots, "loading", {}, () => [d(r, { label: k.value }, null, 8, ["label"]), u("span", null, v(k.value), 1)], void 0, 0) : c("", !0)], 512)) : c("", !0)], 44, S));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=VVirtualList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VVirtualList/VVirtualList.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VVirtualList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VVirtualList/VVirtualList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\n// @a11y @ssr @core\n/**\n * A list too long to render whole: only the rows near its viewport exist in the page. It is its\n * own scroll container, focusable so the keyboard can scroll it, and each row says where it\n * stands in the whole list. Rows are measured as they render, so they may differ in height.\n */\nimport { computed, ref, toRaw, watch } from 'vue'\n\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { useVirtualList } from '../../composables/useVirtualList'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** Where `scrollToIndex` brings the row: to the top, the middle, the bottom, or barely in view. */\nexport type VirtualListAlign = ScrollLogicalPosition\n\n/** What the default slot receives for each rendered row. */\nexport interface VirtualListItemSlotProps<T> {\n  item: T\n  index: number\n}\n\n/** The props of VVirtualList, for a row type `T`. */\nexport interface VirtualListProps<T> {\n  /** The rows of the list, all of them: only those near the viewport are rendered. */\n  items: T[]\n  /**\n   * The field identifying a row, under which its measured height is remembered. Without it a\n   * row is identified by its position, which suits a list that only grows at the end.\n   */\n  itemKey?: string\n  /**\n   * The height assumed for a row not rendered yet, in pixels. Each row is measured once it\n   * renders, so this is only an estimate; the closer it is, the steadier the scrollbar.\n   */\n  itemSize?: number\n  /** How many rows to render beyond each edge of the viewport, so a fast scroll shows no gap. */\n  overscan?: number\n  /**\n   * How many rows to render before the list can measure its viewport: on the server and until\n   * the page is hydrated.\n   */\n  initialCount?: number\n  /**\n   * The height of the list: a number of pixels or any CSS length. Without it, give the list a\n   * bounded height in your own CSS; a list that grows with its content renders every row.\n   */\n  height?: number | string\n  /** The accessible name of the list. */\n  label?: string\n  /** Says that rows are being loaded: a row with a spinner ends the list. */\n  loading?: boolean\n  /** What that row says, and what the spinner is announced as. */\n  loadingText?: string\n  /**\n   * Says that there are more rows to come, which makes the list ask for them as its end comes\n   * into view. The total is then announced as unknown.\n   */\n  hasMore?: boolean\n}\n\nconst props = withDefaults(defineProps<VirtualListProps<T>>(), {\n  itemKey: undefined,\n  itemSize: 40,\n  overscan: 5,\n  initialCount: 10,\n  height: undefined,\n  label: undefined,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n})\n\nconst emit = defineEmits<{\n  /** The end of the list has come into view: send the next rows. */\n  'load-more': []\n}>()\n\ndefineSlots<{\n  /** One row of the list. */\n  default(props: VirtualListItemSlotProps<T>): unknown\n  /** Replaces the spinner and the text of the loading row. */\n  loading?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst listEl = ref<HTMLElement | null>(null)\nconst sentinelEl = ref<HTMLElement | null>(null)\n\n// Read through the raw array: computing the offsets visits every row's key, and a reactive read\n// for each of a hundred thousand rows is what would make scrolling stutter. The length is still\n// read reactively, so rows pushed in place are seen.\nfunction keyOf(index: number): unknown {\n  if (!props.itemKey) return index\n  const item = toRaw(props.items)[index] as Record<string, unknown> | undefined\n  return item?.[props.itemKey]\n}\n\n// @a11y\n// The row holding the focus stays rendered while the list scrolls away from it: dropping it\n// would send the focus back to the page.\nconst focusedIndex = ref(-1)\n\nconst virtualList = useVirtualList({\n  scrollEl: listEl,\n  count: () => props.items.length,\n  key: keyOf,\n  itemSize: () => props.itemSize,\n  overscan: () => props.overscan,\n  initialCount: () => props.initialCount,\n  pinned: () => (focusedIndex.value >= 0 ? [focusedIndex.value] : []),\n})\nconst { segments, measure } = virtualList\n\nfunction rowOf(target: EventTarget | null) {\n  if (!(target instanceof Element)) return -1\n  const row = target.closest('.v-virtual-list-item')\n  if (!row || row.parentElement !== listEl.value) return -1\n  return Number((row as HTMLElement).dataset.index)\n}\n\nfunction onFocusin(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.target)\n}\n\nfunction onFocusout(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.relatedTarget)\n}\n\nuseInfiniteScroll({\n  sentinelEl,\n  root: () => listEl.value,\n  canLoad: () => props.hasMore && !props.loading,\n  loaded: () => props.items,\n  onLoadMore: () => emit('load-more'),\n})\n\n// @devwarn\n// A list without a bounded height grows with its content, so every row is in view and\n// rendered: the symptom is a long list that never scrolls.\nif (isDev) {\n  watch(\n    segments,\n    (list) => {\n      const el = listEl.value\n      if (!el || props.items.length < 100 || el.scrollHeight > el.clientHeight) return\n      if (list.some((segment) => segment.type === 'spacer')) return\n      console.warn(\n        '[VVirtualList] Every row is rendered because the list does not scroll: give it a `height` or a bounded height in CSS.',\n      )\n    },\n    { flush: 'post', once: true },\n  )\n}\n\ndefineExpose({\n  /**\n   * Scrolls the list until a row is in view, rendering it first if needed. `align` places it at\n   * the top, the middle or the bottom; by default it moves as little as possible.\n   */\n  scrollToIndex: (index: number, align?: VirtualListAlign) =>\n    virtualList.scrollToIndex(index, align),\n  /** The scrolling element, which carries the list role. */\n  el: listEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"listEl\"\n    class=\"v-virtual-list\"\n    role=\"list\"\n    tabindex=\"0\"\n    :aria-label=\"label\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n    :style=\"{ blockSize: cssSize(height) }\"\n    @focusin=\"onFocusin\"\n    @focusout=\"onFocusout\"\n  >\n    <template\n      v-for=\"segment in segments\"\n      :key=\"segment.type === 'row' ? `row:${String(keyOf(segment.index))}` : segment.key\"\n    >\n      <div\n        v-if=\"segment.type === 'spacer'\"\n        class=\"v-virtual-list-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${segment.size}px` }\"\n      />\n      <div\n        v-else\n        :ref=\"(el) => measure(el as Element | null, segment.index)\"\n        role=\"listitem\"\n        class=\"v-virtual-list-item\"\n        :aria-setsize=\"hasMore ? -1 : items.length\"\n        :aria-posinset=\"segment.index + 1\"\n        :data-index=\"segment.index\"\n      >\n        <slot :item=\"items[segment.index]!\" :index=\"segment.index\" />\n      </div>\n    </template>\n\n    <!--\n      A single element for as long as more rows may come: replacing it would cancel the\n      observation, and no further rows would be asked for. Hidden from assistive technology,\n      which hears `aria-busy` on the list instead.\n    -->\n    <div v-if=\"hasMore || loading\" ref=\"sentinelEl\" class=\"v-virtual-list-more\" aria-hidden=\"true\">\n      <slot v-if=\"loading\" name=\"loading\">\n        <VSpinner :label=\"resolvedLoadingText\" />\n        <span>{{ resolvedLoadingText }}</span>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The list corrects its scroll itself when a row above the view changes height; the browser's\n   * own anchoring would apply the same correction a second time. Positioned, so it contains the\n   * absolutely positioned parts of the rows: positioned against an ancestor beyond it, they\n   * escape its clip and stretch the page.\n   */\n  .v-virtual-list {\n    position: relative;\n    display: block;\n    overflow-y: auto;\n    overflow-anchor: none;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-virtual-list:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /*\n   * A row contains the margins of its content: collapsing through it, they would sit between\n   * rows where no measurement sees them.\n   */\n  .v-virtual-list-item {\n    display: flow-root;\n  }\n\n  .v-virtual-list-more {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    min-block-size: var(--vectis-control-height-md);\n    padding: var(--vectis-space-2);\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEA,IAAM,IAAQ,GAYR,IAAO,GAYP,IAAI,EAAY,GAChB,IAAsB,QAAe,EAAM,eAAe,EAAE,MAAM,OAAO,OAAO,GAEhF,IAAS,EAAwB,IAAI,GACrC,IAAa,EAAwB,IAAI;EAK/C,SAAS,EAAM,GAAwB;GAGrC,OAFK,EAAM,UACE,EAAM,EAAM,KAAK,CAAC,CAAC,EACzB,GAAO,EAAM,WAFO;EAG7B;EAKA,IAAM,IAAe,EAAI,EAAE,GAErB,IAAc,EAAe;GACjC,UAAU;GACV,aAAa,EAAM,MAAM;GACzB,KAAK;GACL,gBAAgB,EAAM;GACtB,gBAAgB,EAAM;GACtB,oBAAoB,EAAM;GAC1B,cAAe,EAAa,SAAS,IAAI,CAAC,EAAa,KAAK,IAAI,CAAC;EACnE,CAAC,GACK,EAAE,aAAU,eAAY;EAE9B,SAAS,EAAM,GAA4B;GACzC,IAAI,EAAE,aAAkB,UAAU,OAAO;GACzC,IAAM,IAAM,EAAO,QAAQ,sBAAsB;GAEjD,OADI,CAAC,KAAO,EAAI,kBAAkB,EAAO,QAAc,KAChD,OAAQ,EAAoB,QAAQ,KAAK;EAClD;EAEA,SAAS,EAAU,GAAmB;GACpC,EAAa,QAAQ,EAAM,EAAM,MAAM;EACzC;EAEA,SAAS,EAAW,GAAmB;GACrC,EAAa,QAAQ,EAAM,EAAM,aAAa;EAChD;SAEA,EAAkB;GAChB;GACA,YAAY,EAAO;GACnB,eAAe,EAAM,WAAW,CAAC,EAAM;GACvC,cAAc,EAAM;GACpB,kBAAkB,EAAK,WAAW;EACpC,CAAC,GAKG,KACF,EACE,IACC,MAAS;GACR,IAAM,IAAK,EAAO;GACd,CAAC,KAAM,EAAM,MAAM,SAAS,OAAO,EAAG,eAAe,EAAG,gBACxD,EAAK,MAAM,MAAY,EAAQ,SAAS,QAAQ,KACpD,QAAQ,KACN,uHACF;EACF,GACA;GAAE,OAAO;GAAQ,MAAM;EAAK,CAC9B,GAGF,EAAa;GAKX,gBAAgB,GAAe,MAC7B,EAAY,cAAc,GAAO,CAAK;GAExC,IAAI;EACN,CAAC,mBAIC,EA6CM,OAAA;YA5CA;GAAJ,KAAI;GACJ,OAAM;GACN,MAAK;GACL,UAAS;GACR,cAAY,EAAA;GACZ,aAAW,EAAA,UAAO,SAAY,KAAA;GAC9B,OAAK,EAAA,EAAA,WAAe,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM,EAAA,CAAA;GACzB;GACC;cAEX,EAqBW,GAAA,MAAA,EApBS,EAAA,CAAA,IAAX,wBACD,EAAQ,SAAI,QAAA,OAAoB,OAAO,EAAM,EAAQ,KAAK,CAAA,MAAO,EAAQ,IAAA,GAAA,CAGvE,EAAQ,SAAI,YAAA,EAAA,GADpB,EAKE,OAAA;;GAHA,OAAM;GACN,eAAY;GACX,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAQ,KAAI,IAAA,CAAA;uBAEtC,EAUM,OAAA;;;GARH,MAAM,MAAO,EAAA,CAAA,CAAO,CAAC,GAAsB,EAAQ,KAAK;GACzD,MAAK;GACL,OAAM;GACL,gBAAc,EAAA,UAAO,KAAQ,EAAA,MAAM;GACnC,iBAAe,EAAQ,QAAK;GAC5B,cAAY,EAAQ;MAErB,EAA6D,EAAA,QAAA,WAAA;GAAtD,MAAM,EAAA,MAAM,EAAQ;GAAU,OAAO,EAAQ;8BAS7C,EAAA,WAAW,EAAA,WAAA,EAAA,GAAtB,EAKM,OAAA;;YAL6B;GAAJ,KAAI;GAAa,OAAM;GAAsB,eAAY;MAC1E,EAAA,UAAZ,EAGO,EAAA,QAAA,WAAA,CAAA,SAAA,CAFL,EAAyC,GAAA,EAA9B,OAAO,EAAA,MAAmB,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,EAAsC,QAAA,MAAA,EAA7B,EAAA,KAAmB,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/composables/useChoice.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The wiring VCheckbox, VRadio and VSwitch share. Their root is a layout box, so every attribute
+ * but `class` and `style` goes to the native input, where `name`, `required` and the aria-*
+ * take part in the form and the accessibility tree. The hint and the error are referenced from
+ * the input rather than nested in its label, so they are read after the name. The component
+ * declares `inheritAttrs: false` itself.
+ */
+export declare function useChoice(props: {
+    hint?: string;
+    error?: string;
+    readonly: boolean;
+}): {
+    rootClass: import('vue').ComputedRef<string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | (string | false | Record<string, unknown> | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined>;
+    rootStyle: import('vue').ComputedRef<import('vue').StyleValue>;
+    forwardedAttrs: import('vue').ComputedRef<Record<string, unknown>>;
+    hintId: string;
+    errorId: string;
+    describedBy: import('vue').ComputedRef<string | undefined>;
+    inputEl: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    refuseWhenReadonly: (event: MouseEvent) => void;
+    /** What the component exposes: its root is a layout box, so these reach the real input. */
+    exposed: {
+        /** Moves the focus to the native input. */
+        focus: (options?: FocusOptions) => void | undefined;
+        /** The native input, for what `focus` does not cover. */
+        el: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    };
+};

package/dist/composables/useChoice.js

@@ -0,0 +1,28 @@
+import { useRootAttrs as e } from "./useRootAttrs.js";
+import { useFieldIds as t } from "./useFieldIds.js";
+import { ref as n } from "vue";
+//#region src/composables/useChoice.ts
+function r(r) {
+	let { attrs: i, rootClass: a, rootStyle: o, forwardedAttrs: s } = e(), { hintId: c, errorId: l, describedBy: u } = t(i, () => !!r.hint && !r.error, void 0, () => !!r.error), d = n(null);
+	function f(e) {
+		r.readonly && e.preventDefault();
+	}
+	return {
+		rootClass: a,
+		rootStyle: o,
+		forwardedAttrs: s,
+		hintId: c,
+		errorId: l,
+		describedBy: u,
+		inputEl: d,
+		refuseWhenReadonly: f,
+		exposed: {
+			focus: (e) => d.value?.focus(e),
+			el: d
+		}
+	};
+}
+//#endregion
+export { r as useChoice };
+
+//# sourceMappingURL=useChoice.js.map

package/dist/composables/useChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoice.js","names":[],"sources":["../../src/composables/useChoice.ts"],"sourcesContent":["import { ref } from 'vue'\n\nimport { useFieldIds } from './useFieldIds'\nimport { useRootAttrs } from './useRootAttrs'\n\n// @a11y @core\n/**\n * The wiring VCheckbox, VRadio and VSwitch share. Their root is a layout box, so every attribute\n * but `class` and `style` goes to the native input, where `name`, `required` and the aria-*\n * take part in the form and the accessibility tree. The hint and the error are referenced from\n * the input rather than nested in its label, so they are read after the name. The component\n * declares `inheritAttrs: false` itself.\n */\nexport function useChoice(props: { hint?: string; error?: string; readonly: boolean }) {\n  const { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n  const { hintId, errorId, describedBy } = useFieldIds(\n    attrs,\n    () => !!props.hint && !props.error,\n    undefined,\n    () => !!props.error,\n  )\n\n  const inputEl = ref<HTMLInputElement | null>(null)\n\n  /**\n   * The native `readonly` attribute does nothing on a checkbox or a radio. Cancelling the click\n   * refuses the change: the browser puts the previous state back and fires no `change`, so the\n   * model never hears of it.\n   */\n  function refuseWhenReadonly(event: MouseEvent) {\n    if (props.readonly) event.preventDefault()\n  }\n\n  return {\n    rootClass,\n    rootStyle,\n    forwardedAttrs,\n    hintId,\n    errorId,\n    describedBy,\n    inputEl,\n    refuseWhenReadonly,\n    /** What the component exposes: its root is a layout box, so these reach the real input. */\n    exposed: {\n      /** Moves the focus to the native input. */\n      focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n      /** The native input, for what `focus` does not cover. */\n      el: inputEl,\n    },\n  }\n}\n"],"mappings":";;;;AAaA,SAAgB,EAAU,GAA6D;CACrF,IAAM,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,YAAS,mBAAgB,EACvC,SACM,CAAC,CAAC,EAAM,QAAQ,CAAC,EAAM,OAC7B,KAAA,SACM,CAAC,CAAC,EAAM,KAChB,GAEM,IAAU,EAA6B,IAAI;CAOjD,SAAS,EAAmB,GAAmB;EAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;CAC3C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,SAAS;GAEP,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN;CACF;AACF"}

package/dist/composables/useDebouncedSearch.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Reports a search term to an outside source, as VCombobox and VCommandPalette do: after a delay
+ * that each keystroke re-arms, never twice for the same term, so reopening on an unchanged term
+ * asks nothing again, and not at all once the panel has closed during the wait. The panel's state
+ * is read when the delay runs out rather than when it is armed.
+ */
+export declare function useDebouncedSearch(options: {
+    /** How long to wait after the last keystroke, in milliseconds. */
+    delay: () => number;
+    /** Whether the panel the results go to is still open. */
+    active: () => boolean;
+    /** Reports the term. */
+    report: (term: string) => void;
+}): {
+    request: (term: string, immediate?: boolean) => void;
+    cancel: () => void;
+};

package/dist/composables/useDebouncedSearch.js

@@ -0,0 +1,18 @@
+import { useTimer as e } from "./useTimer.js";
+//#region src/composables/useDebouncedSearch.ts
+function t(t) {
+	let n = e(), r;
+	function i(e, i = !1) {
+		n.cancel(), e !== r && n.start(() => {
+			t.active() && (r = e, t.report(e));
+		}, i ? 0 : t.delay());
+	}
+	return {
+		request: i,
+		cancel: n.cancel
+	};
+}
+//#endregion
+export { t as useDebouncedSearch };
+
+//# sourceMappingURL=useDebouncedSearch.js.map

package/dist/composables/useDebouncedSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedSearch.js","names":[],"sources":["../../src/composables/useDebouncedSearch.ts"],"sourcesContent":["import { useTimer } from './useTimer'\n\n// @core\n/**\n * Reports a search term to an outside source, as VCombobox and VCommandPalette do: after a delay\n * that each keystroke re-arms, never twice for the same term, so reopening on an unchanged term\n * asks nothing again, and not at all once the panel has closed during the wait. The panel's state\n * is read when the delay runs out rather than when it is armed.\n */\nexport function useDebouncedSearch(options: {\n  /** How long to wait after the last keystroke, in milliseconds. */\n  delay: () => number\n  /** Whether the panel the results go to is still open. */\n  active: () => boolean\n  /** Reports the term. */\n  report: (term: string) => void\n}): { request: (term: string, immediate?: boolean) => void; cancel: () => void } {\n  const timer = useTimer()\n  let lastReported: string | undefined\n\n  function request(term: string, immediate = false) {\n    timer.cancel()\n    if (term === lastReported) return\n    timer.start(\n      () => {\n        if (!options.active()) return\n        lastReported = term\n        options.report(term)\n      },\n      immediate ? 0 : options.delay(),\n    )\n  }\n\n  return { request, cancel: timer.cancel }\n}\n"],"mappings":";;AASA,SAAgB,EAAmB,GAO8C;CAC/E,IAAM,IAAQ,EAAS,GACnB;CAEJ,SAAS,EAAQ,GAAc,IAAY,IAAO;EAChD,EAAM,OAAO,GACT,MAAS,KACb,EAAM,YACE;GACC,EAAQ,OAAO,MACpB,IAAe,GACf,EAAQ,OAAO,CAAI;EACrB,GACA,IAAY,IAAI,EAAQ,MAAM,CAChC;CACF;CAEA,OAAO;EAAE;EAAS,QAAQ,EAAM;CAAO;AACzC"}

package/dist/composables/useEscapeDismiss.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Escape dismisses an overlay opened by hover or focus from anywhere on the page (WCAG 1.4.13),
+ * for a magnifier user whose view it may be covering. Such an overlay rarely holds the focus, so
+ * the key is heard on the document while it shows, and it is spent there: inside a VDialog it
+ * would otherwise also be the dialog's close request. Returns the switch to call as the overlay
+ * opens and closes; the listener goes with the component.
+ */
+export declare function useEscapeDismiss(onEscape: () => void): (active: boolean) => void;

package/dist/composables/useEscapeDismiss.js

@@ -0,0 +1,16 @@
+import { onBeforeUnmount as e } from "vue";
+//#region src/composables/useEscapeDismiss.ts
+function t(t) {
+	let n = !1;
+	function r(e) {
+		e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), t());
+	}
+	function i(e) {
+		e !== n && (n = e, e ? document.addEventListener("keydown", r) : document.removeEventListener("keydown", r));
+	}
+	return e(() => i(!1)), i;
+}
+//#endregion
+export { t as useEscapeDismiss };
+
+//# sourceMappingURL=useEscapeDismiss.js.map

package/dist/composables/useEscapeDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscapeDismiss.js","names":[],"sources":["../../src/composables/useEscapeDismiss.ts"],"sourcesContent":["import { onBeforeUnmount } from 'vue'\n\n// @keyboard @a11y\n/**\n * Escape dismisses an overlay opened by hover or focus from anywhere on the page (WCAG 1.4.13),\n * for a magnifier user whose view it may be covering. Such an overlay rarely holds the focus, so\n * the key is heard on the document while it shows, and it is spent there: inside a VDialog it\n * would otherwise also be the dialog's close request. Returns the switch to call as the overlay\n * opens and closes; the listener goes with the component.\n */\nexport function useEscapeDismiss(onEscape: () => void): (active: boolean) => void {\n  let listening = false\n\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key !== 'Escape' || event.defaultPrevented) return\n    event.preventDefault()\n    onEscape()\n  }\n\n  function listen(active: boolean) {\n    if (active === listening) return\n    listening = active\n    if (active) document.addEventListener('keydown', onKeydown)\n    else document.removeEventListener('keydown', onKeydown)\n  }\n\n  onBeforeUnmount(() => listen(false))\n  return listen\n}\n"],"mappings":";;AAUA,SAAgB,EAAiB,GAAiD;CAChF,IAAI,IAAY;CAEhB,SAAS,EAAU,GAAsB;EACnC,EAAM,QAAQ,YAAY,EAAM,qBACpC,EAAM,eAAe,GACrB,EAAS;CACX;CAEA,SAAS,EAAO,GAAiB;EAC3B,MAAW,MACf,IAAY,GACR,IAAQ,SAAS,iBAAiB,WAAW,CAAS,IACrD,SAAS,oBAAoB,WAAW,CAAS;CACxD;CAGA,OADA,QAAsB,EAAO,EAAK,CAAC,GAC5B;AACT"}

package/dist/composables/useFieldIds.d.ts

@@ -1,7 +1,8 @@
 import { ComputedRef } from 'vue';
-export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean, hasCounter?: () => boolean): {
+export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean, hasCounter?: () => boolean, hasError?: () => boolean): {
     fieldId: ComputedRef<string>;
     hintId: string;
     counterId: string;
+    errorId: string;
     describedBy: ComputedRef<string | undefined>;
 };

package/dist/composables/useFieldIds.js

@@ -1,13 +1,14 @@
 import { joinIds as e } from "../utils/ids.js";
 import { computed as t, useId as n } from "vue";
 //#region src/composables/useFieldIds.ts
-function r(r, i, a = () => !1) {
-	let o = n(), s = n(), c = n();
+function r(r, i, a = () => !1, o = () => !1) {
+	let s = n(), c = n(), l = n(), u = n();
 	return {
-		fieldId: t(() => r.id ?? o),
-		hintId: s,
-		counterId: c,
-		describedBy: t(() => e(r["aria-describedby"], i() && s, a() && c))
+		fieldId: t(() => r.id ?? s),
+		hintId: c,
+		counterId: l,
+		errorId: u,
+		describedBy: t(() => e(r["aria-describedby"], o() && u, i() && c, a() && l))
 	};
 }
 //#endregion

package/dist/composables/useFieldIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["// @a11y @ssr\n/**\n * Use hydration-stable IDs and append hint/counter references to consumer aria-describedby\n * rather than replacing it.\n */\n\nimport { computed, useId, type ComputedRef } from 'vue'\n\nimport { joinIds } from '../utils/ids'\n\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n  hasCounter: () => boolean = () => false,\n): {\n  fieldId: ComputedRef<string>\n  hintId: string\n  counterId: string\n  describedBy: ComputedRef<string | undefined>\n} {\n  const uid = useId()\n  const hintId = useId()\n  const counterId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    counterId,\n    describedBy: computed(() =>\n      joinIds(\n        attrs['aria-describedby'] as string | undefined,\n        hasHint() && hintId,\n        hasCounter() && counterId,\n      ),\n    ),\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,EACd,GACA,GACA,UAAkC,IAMlC;CACA,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM,GACf,IAAY,EAAM;CAExB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA;EACA,aAAa,QACX,EACE,EAAM,qBACN,EAAQ,KAAK,GACb,EAAW,KAAK,CAClB,CACF;CACF;AACF"}
+{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["// @a11y @ssr\n/**\n * Use hydration-stable IDs and append error/hint/counter references to consumer\n * aria-describedby rather than replacing it. The error comes first so that it is read first.\n */\n\nimport { computed, useId, type ComputedRef } from 'vue'\n\nimport { joinIds } from '../utils/ids'\n\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n  hasCounter: () => boolean = () => false,\n  hasError: () => boolean = () => false,\n): {\n  fieldId: ComputedRef<string>\n  hintId: string\n  counterId: string\n  errorId: string\n  describedBy: ComputedRef<string | undefined>\n} {\n  const uid = useId()\n  const hintId = useId()\n  const counterId = useId()\n  const errorId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    counterId,\n    errorId,\n    describedBy: computed(() =>\n      joinIds(\n        attrs['aria-describedby'] as string | undefined,\n        hasError() && errorId,\n        hasHint() && hintId,\n        hasCounter() && counterId,\n      ),\n    ),\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,EACd,GACA,GACA,UAAkC,IAClC,UAAgC,IAOhC;CACA,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM,GACf,IAAY,EAAM,GAClB,IAAU,EAAM;CAEtB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA;EACA;EACA,aAAa,QACX,EACE,EAAM,qBACN,EAAS,KAAK,GACd,EAAQ,KAAK,GACb,EAAW,KAAK,CAClB,CACF;CACF;AACF"}

package/dist/composables/useFieldPanel.d.ts

@@ -37,6 +37,7 @@ export interface UseFieldPanelOptions {
 export declare function useFieldPanel(options: UseFieldPanelOptions): {
     open: Ref<boolean, boolean>;
     panelId: string;
+    popupAttrs: (base: () => Record<string, unknown>, hasPanel: () => boolean) => import('vue').ComputedRef<Record<string, unknown>>;
     openPanel: (moveFocus?: boolean) => void;
     closePanel: () => void;
     closeAndFocus: () => void;

package/dist/composables/useFieldPanel.js

@@ -1,69 +1,79 @@
 import { NO_BUTTON_GROUP as e, buttonGroupKey as t } from "../components/VButton/context.js";
 import { useFocusoutDismiss as n } from "./useFocusoutDismiss.js";
-import { onBeforeUnmount as r, provide as i, ref as a, useId as o, watch as s } from "vue";
+import { computed as r, onBeforeUnmount as i, provide as a, ref as o, useId as s, watch as c } from "vue";
 //#region src/composables/useFieldPanel.ts
-function c(c) {
-	let l = a(!1), u = () => c.openOnFocus?.() ?? !1, d = o();
-	i(t, e);
-	let f = 0;
-	function p() {
-		f && cancelAnimationFrame(f), f = 0;
+function l(l) {
+	let u = o(!1), d = () => l.openOnFocus?.() ?? !1, f = s();
+	a(t, e);
+	let p = 0;
+	function m() {
+		p && cancelAnimationFrame(p), p = 0;
 	}
-	function m(e = !u()) {
-		c.disabled() || l.value || (c.onOpen?.(), c.panelRef.value?.show(), e && (p(), f = requestAnimationFrame(() => {
-			f = 0, c.focusInPanel();
+	function h(e = !d()) {
+		l.disabled() || u.value || (l.onOpen?.(), l.panelRef.value?.show(), e && (m(), p = requestAnimationFrame(() => {
+			p = 0, l.focusInPanel();
 		})));
 	}
-	function h() {
-		p(), l.value && (c.panelRef.value?.close(), c.onClose?.());
+	function g() {
+		m(), u.value && (l.panelRef.value?.close(), l.onClose?.());
 	}
-	r(p), s(c.disabled, (e) => {
-		!e || !l.value || (h(), l.value = !1);
+	i(m), c(l.disabled, (e) => {
+		!e || !u.value || (g(), u.value = !1);
 	});
-	let g = !1;
-	function _() {
-		g = !0, c.field.value?.focus(), g = !1;
-	}
+	let _ = !1;
 	function v() {
-		l.value && (h(), _());
+		_ = !0, l.field.value?.focus(), _ = !1;
 	}
 	function y() {
-		g || !u() || m(!1);
+		u.value && (g(), v());
 	}
 	function b() {
-		l.value ? v() : m(!0);
+		_ || !d() || h(!1);
 	}
-	let x = (e) => !!e.target?.closest?.("button, a[href]");
-	function S(e) {
-		x(e) || m();
+	function x() {
+		u.value ? y() : h(!0);
 	}
-	let C = n(c.rootEl, h);
-	function w(e) {
-		e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
+	let S = (e) => !!e.target?.closest?.("button, a[href]");
+	function C(e) {
+		S(e) || h();
 	}
+	let w = n(l.rootEl, g);
 	function T(e) {
+		e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
+	}
+	function E(e) {
 		if (e.key === "Escape") {
-			l.value && (e.preventDefault(), v());
+			u.value && (e.preventDefault(), y());
 			return;
 		}
-		(e.key === "ArrowDown" || e.key === "Enter") && !l.value && !e.defaultPrevented && !x(e) && (e.preventDefault(), m(!0));
+		(e.key === "ArrowDown" || e.key === "Enter") && !u.value && !e.defaultPrevented && !S(e) && (e.preventDefault(), h(!0));
+	}
+	function D(e, t) {
+		return r(() => t() ? {
+			...e(),
+			role: "combobox",
+			"aria-haspopup": "dialog",
+			"aria-expanded": u.value,
+			"aria-controls": f
+		} : e());
 	}
 	return {
-		open: l,
-		panelId: d,
-		openPanel: m,
-		closePanel: h,
-		closeAndFocus: v,
-		focusField: _,
-		onFieldFocus: y,
-		toggleFromIcon: b,
-		onControlClick: S,
-		onFocusout: C,
-		onKeydown: T,
-		onPanelMousedown: w
+		open: u,
+		panelId: f,
+		popupAttrs: D,
+		openPanel: h,
+		closePanel: g,
+		closeAndFocus: y,
+		focusField: v,
+		onFieldFocus: b,
+		toggleFromIcon: x,
+		onControlClick: C,
+		onFocusout: w,
+		onKeydown: E,
+		onPanelMousedown: T
 	};
 }
 //#endregion
-export { c as useFieldPanel };
+export { l as useFieldPanel };
 
 //# sourceMappingURL=useFieldPanel.js.map

package/dist/composables/useFieldPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { onBeforeUnmount, provide, ref, useId, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { NO_BUTTON_GROUP, buttonGroupKey } from '../components/VButton/context'\nimport { useFocusoutDismiss } from './useFocusoutDismiss'\n\n/** The least this needs of the field: something it can put the focus back on. */\ninterface FocusableField {\n  focus: () => void\n}\n\n/** The least this needs of the panel: something it can open and close. */\ninterface PanelControl {\n  show: () => void\n  close: () => void\n}\n\nexport interface UseFieldPanelOptions {\n  /** The component's root, against which \"the focus has left\" is judged. */\n  rootEl: Ref<HTMLElement | null>\n  /** The panel to open and close. */\n  panelRef: Ref<PanelControl | null>\n  /** The field the focus returns to. */\n  field: Ref<FocusableField | null>\n  /**\n   * Whether opening is refused. It is the SINGLE cut-off point: every route in passes\n   * through it, so a component never has to repeat the condition per handler.\n   */\n  disabled: () => boolean\n  /** Moves the focus INTO the open panel: where in it is the component's business. */\n  focusInPanel: () => void\n  /** What the component needs to do as the panel opens: prepare a draft, reset a step. */\n  onOpen?: () => void\n  /** What it needs to do as the panel closes: clear an announcement, for instance. */\n  onClose?: () => void\n  /** Whether focusing the field opens the panel. It does not by default. */\n  openOnFocus?: () => boolean\n}\n\n// @a11y @keyboard @core\n/**\n * The panel is written imperatively and read back by model. Bind `open` as `v-model:open` so\n * the DOM feeds it, but the write must stay synchronous: the `rAF` that moves focus assumes the\n * panel is already open when it is armed, and the model would put a tick in between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n  const openOnFocus = () => options.openOnFocus?.() ?? false\n\n  /** The id the panel carries, for the field's `aria-controls`. */\n  const panelId = useId()\n\n  // @core\n  // Stop row contexts at the field boundary so the picker keeps its own button sizes instead of\n  // inheriting the enclosing input group's shape.\n  provide(buttonGroupKey, NO_BUTTON_GROUP)\n\n  /*\n   * The frame the focus is moved in, kept so it can be called off. A panel closed inside that\n   * frame (Escape at once, the field disabled, a consumer closing it) would otherwise have the\n   * focus pulled into it once shut, taken from the field it had just been handed back to.\n   */\n  let focusFrame = 0\n\n  function cancelFocusFrame() {\n    if (focusFrame) cancelAnimationFrame(focusFrame)\n    focusFrame = 0\n  }\n\n  function openPanel(moveFocus = !openOnFocus()) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // A `manual` popover moves focus nowhere, so it is moved by hand; a frame later, the panel\n    // not being painted yet, and nothing invisible can take focus.\n    if (moveFocus) {\n      cancelFocusFrame()\n      focusFrame = requestAnimationFrame(() => {\n        focusFrame = 0\n        options.focusInPanel()\n      })\n    }\n  }\n\n  /** Closes the panel and leaves the focus where it is: the focus has already gone elsewhere. */\n  function closePanel() {\n    cancelFocusFrame()\n    if (!open.value) return\n    options.panelRef.value?.close()\n    options.onClose?.()\n  }\n\n  onBeforeUnmount(cancelFocusFrame)\n\n  // @core\n  // A panel refused WHILE it is open (the field turned read-only or disabled, the picker\n  // switched off) is unmounted by its `v-if`, and an unmounted popover sends no `toggle` to\n  // bring `open` back down. The model then stays true, and the next time the panel is mounted\n  // VPopover's mount replay shows it again with nobody having asked.\n  watch(options.disabled, (refused) => {\n    if (!refused || !open.value) return\n    closePanel()\n    open.value = false\n  })\n\n  // @a11y\n  /*\n   * Handing the focus back to the field is what makes a field that opens on FOCUS reopen the\n   * panel that was just closed: the two would chase each other and the panel would never close.\n   * The lock covers the focus call, which is synchronous.\n   */\n  let refocusing = false\n\n  /** Puts the focus on the field without opening the panel. */\n  function focusField() {\n    refocusing = true\n    options.field.value?.focus()\n    refocusing = false\n  }\n\n  /** Closes the panel and hands the focus back to the field, under the lock above. */\n  function closeAndFocus() {\n    if (!open.value) return\n    closePanel()\n    focusField()\n  }\n\n  /** The field's focus handler: opens the panel on a field that asks for it. */\n  function onFieldFocus() {\n    if (refocusing || !openOnFocus()) return\n    openPanel(false)\n  }\n\n  /** The icon at the end of the field. */\n  function toggleFromIcon() {\n    if (open.value) closeAndFocus()\n    else openPanel(true)\n  }\n\n  /**\n   * Whether an event started on one of the controls the field holds: the clear cross, the AM/PM\n   * word, a clickable icon, or a button of the consumer's own in a slot.\n   */\n  const fromOwnControl = (event: Event) =>\n    !!(event.target as HTMLElement | null)?.closest?.('button, a[href]')\n\n  function onControlClick(event: MouseEvent) {\n    if (fromOwnControl(event)) return\n    openPanel()\n  }\n\n  // @a11y\n  const onFocusout = useFocusoutDismiss(options.rootEl, closePanel)\n\n  // @a11y\n  /*\n   * Clicking a non-focusable pixel of the panel (padding, the gutter between cells) hands focus\n   * back to `<body>`. `onFocusout` above then fires with a null `relatedTarget`, reads it as an\n   * exit; rightly; and closes a panel the reader has just clicked.\n   */\n  function onPanelMousedown(event: MouseEvent) {\n    const target = event.target as HTMLElement | null\n    if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n  }\n\n  // @keyboard @a11y\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (open.value) {\n        event.preventDefault()\n        closeAndFocus()\n      }\n      return\n    }\n    // A key already consumed INSIDE the panel is ignored. An Enter that selected a day has just\n    // CLOSED the panel, and without the guard would reopen it as it bubbles.\n    if (\n      (event.key === 'ArrowDown' || event.key === 'Enter') &&\n      !open.value &&\n      !event.defaultPrevented &&\n      !fromOwnControl(event)\n    ) {\n      event.preventDefault()\n      // Opened from the KEYBOARD the panel always takes focus, whatever `openOnFocus` says:\n      // otherwise ArrowDown opens a panel the keyboard cannot reach.\n      openPanel(true)\n    }\n  }\n\n  return {\n    open,\n    panelId,\n    openPanel,\n    closePanel,\n    closeAndFocus,\n    focusField,\n    onFieldFocus,\n    toggleFromIcon,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;;AA6CA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK,GAChB,UAAoB,EAAQ,cAAc,KAAK,IAG/C,IAAU,EAAM;CAKtB,EAAQ,GAAgB,CAAe;CAOvC,IAAI,IAAa;CAEjB,SAAS,IAAmB;EAE1B,AADI,KAAY,qBAAqB,CAAU,GAC/C,IAAa;CACf;CAEA,SAAS,EAAU,IAAY,CAAC,EAAY,GAAG;EACzC,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAIzB,MACF,EAAiB,GACjB,IAAa,4BAA4B;GAEvC,AADA,IAAa,GACb,EAAQ,aAAa;EACvB,CAAC;CAEL;CAGA,SAAS,IAAa;EACpB,EAAiB,GACZ,EAAK,UACV,EAAQ,SAAS,OAAO,MAAM,GAC9B,EAAQ,UAAU;CACpB;CASA,AAPA,EAAgB,CAAgB,GAOhC,EAAM,EAAQ,WAAW,MAAY;EAC/B,CAAC,KAAW,CAAC,EAAK,UACtB,EAAW,GACX,EAAK,QAAQ;CACf,CAAC;CAQD,IAAI,IAAa;CAGjB,SAAS,IAAa;EAGpB,AAFA,IAAa,IACb,EAAQ,MAAM,OAAO,MAAM,GAC3B,IAAa;CACf;CAGA,SAAS,IAAgB;EAClB,EAAK,UACV,EAAW,GACX,EAAW;CACb;CAGA,SAAS,IAAe;EAClB,KAAc,CAAC,EAAY,KAC/B,EAAU,EAAK;CACjB;CAGA,SAAS,IAAiB;EACxB,AAAI,EAAK,QAAO,EAAc,IACzB,EAAU,EAAI;CACrB;CAMA,IAAM,KAAkB,MACtB,CAAC,CAAE,EAAM,QAA+B,UAAU,iBAAiB;CAErE,SAAS,EAAe,GAAmB;EACrC,EAAe,CAAK,KACxB,EAAU;CACZ;CAGA,IAAM,IAAa,EAAmB,EAAQ,QAAQ,CAAU;CAQhE,SAAS,EAAiB,GAAmB;EAE3C,AADe,EAAM,QACR,QAAQ,gDAAgD,KAAG,EAAM,eAAe;CAC/F;CAGA,SAAS,EAAU,GAAsB;EACvC,IAAI,EAAM,QAAQ,UAAU;GAC1B,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAc;GAEhB;EACF;EAGA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,oBACP,CAAC,EAAe,CAAK,MAErB,EAAM,eAAe,GAGrB,EAAU,EAAI;CAElB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { computed, onBeforeUnmount, provide, ref, useId, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { NO_BUTTON_GROUP, buttonGroupKey } from '../components/VButton/context'\nimport { useFocusoutDismiss } from './useFocusoutDismiss'\n\n/** The least this needs of the field: something it can put the focus back on. */\ninterface FocusableField {\n  focus: () => void\n}\n\n/** The least this needs of the panel: something it can open and close. */\ninterface PanelControl {\n  show: () => void\n  close: () => void\n}\n\nexport interface UseFieldPanelOptions {\n  /** The component's root, against which \"the focus has left\" is judged. */\n  rootEl: Ref<HTMLElement | null>\n  /** The panel to open and close. */\n  panelRef: Ref<PanelControl | null>\n  /** The field the focus returns to. */\n  field: Ref<FocusableField | null>\n  /**\n   * Whether opening is refused. It is the SINGLE cut-off point: every route in passes\n   * through it, so a component never has to repeat the condition per handler.\n   */\n  disabled: () => boolean\n  /** Moves the focus INTO the open panel: where in it is the component's business. */\n  focusInPanel: () => void\n  /** What the component needs to do as the panel opens: prepare a draft, reset a step. */\n  onOpen?: () => void\n  /** What it needs to do as the panel closes: clear an announcement, for instance. */\n  onClose?: () => void\n  /** Whether focusing the field opens the panel. It does not by default. */\n  openOnFocus?: () => boolean\n}\n\n// @keyboard @a11y @core\n/**\n * The panel is written imperatively and read back by model. Bind `open` as `v-model:open` so\n * the DOM feeds it, but the write must stay synchronous: the `rAF` that moves focus assumes the\n * panel is already open when it is armed, and the model would put a tick in between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n  const openOnFocus = () => options.openOnFocus?.() ?? false\n\n  /** The id the panel carries, for the field's `aria-controls`. */\n  const panelId = useId()\n\n  // @core\n  // Stop row contexts at the field boundary so the picker keeps its own button sizes instead of\n  // inheriting the enclosing input group's shape.\n  provide(buttonGroupKey, NO_BUTTON_GROUP)\n\n  /*\n   * The frame the focus is moved in, kept so it can be called off. A panel closed inside that\n   * frame (Escape at once, the field disabled, a consumer closing it) would otherwise have the\n   * focus pulled into it once shut, taken from the field it had just been handed back to.\n   */\n  let focusFrame = 0\n\n  function cancelFocusFrame() {\n    if (focusFrame) cancelAnimationFrame(focusFrame)\n    focusFrame = 0\n  }\n\n  function openPanel(moveFocus = !openOnFocus()) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // A `manual` popover moves focus nowhere, so it is moved by hand; a frame later, the panel\n    // not being painted yet, and nothing invisible can take focus.\n    if (moveFocus) {\n      cancelFocusFrame()\n      focusFrame = requestAnimationFrame(() => {\n        focusFrame = 0\n        options.focusInPanel()\n      })\n    }\n  }\n\n  /** Closes the panel and leaves the focus where it is: the focus has already gone elsewhere. */\n  function closePanel() {\n    cancelFocusFrame()\n    if (!open.value) return\n    options.panelRef.value?.close()\n    options.onClose?.()\n  }\n\n  onBeforeUnmount(cancelFocusFrame)\n\n  // @core\n  // A panel refused WHILE it is open (the field turned read-only or disabled, the picker\n  // switched off) is unmounted by its `v-if`, and an unmounted popover sends no `toggle` to\n  // bring `open` back down. The model then stays true, and the next time the panel is mounted\n  // VPopover's mount replay shows it again with nobody having asked.\n  watch(options.disabled, (refused) => {\n    if (!refused || !open.value) return\n    closePanel()\n    open.value = false\n  })\n\n  // @a11y\n  /*\n   * Handing the focus back to the field is what makes a field that opens on FOCUS reopen the\n   * panel that was just closed: the two would chase each other and the panel would never close.\n   * The lock covers the focus call, which is synchronous.\n   */\n  let refocusing = false\n\n  /** Puts the focus on the field without opening the panel. */\n  function focusField() {\n    refocusing = true\n    options.field.value?.focus()\n    refocusing = false\n  }\n\n  /** Closes the panel and hands the focus back to the field, under the lock above. */\n  function closeAndFocus() {\n    if (!open.value) return\n    closePanel()\n    focusField()\n  }\n\n  /** The field's focus handler: opens the panel on a field that asks for it. */\n  function onFieldFocus() {\n    if (refocusing || !openOnFocus()) return\n    openPanel(false)\n  }\n\n  /** The icon at the end of the field. */\n  function toggleFromIcon() {\n    if (open.value) closeAndFocus()\n    else openPanel(true)\n  }\n\n  /**\n   * Whether an event started on one of the controls the field holds: the clear cross, the AM/PM\n   * word, a clickable icon, or a button of the consumer's own in a slot.\n   */\n  const fromOwnControl = (event: Event) =>\n    !!(event.target as HTMLElement | null)?.closest?.('button, a[href]')\n\n  function onControlClick(event: MouseEvent) {\n    if (fromOwnControl(event)) return\n    openPanel()\n  }\n\n  // @a11y\n  const onFocusout = useFocusoutDismiss(options.rootEl, closePanel)\n\n  // @a11y\n  /*\n   * Clicking a non-focusable pixel of the panel (padding, the gutter between cells) hands focus\n   * back to `<body>`. `onFocusout` above then fires with a null `relatedTarget`, reads it as an\n   * exit; rightly; and closes a panel the reader has just clicked.\n   */\n  function onPanelMousedown(event: MouseEvent) {\n    const target = event.target as HTMLElement | null\n    if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n  }\n\n  // @keyboard @a11y\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (open.value) {\n        event.preventDefault()\n        closeAndFocus()\n      }\n      return\n    }\n    // A key already consumed INSIDE the panel is ignored. An Enter that selected a day has just\n    // CLOSED the panel, and without the guard would reopen it as it bubbles.\n    if (\n      (event.key === 'ArrowDown' || event.key === 'Enter') &&\n      !open.value &&\n      !event.defaultPrevented &&\n      !fromOwnControl(event)\n    ) {\n      event.preventDefault()\n      // Opened from the KEYBOARD the panel always takes focus, whatever `openOnFocus` says:\n      // otherwise ArrowDown opens a panel the keyboard cannot reach.\n      openPanel(true)\n    }\n  }\n\n  // @a11y\n  /**\n   * The field's attributes with the popup wiring spread over them, which makes the field the\n   * combobox the pattern calls for. Spread rather than bound after `v-bind`, where a binding wins\n   * even when `undefined`: without a panel the wiring adds no key and the consumer's own `role`\n   * or `aria-controls` stays.\n   */\n  function popupAttrs(base: () => Record<string, unknown>, hasPanel: () => boolean) {\n    return computed(() =>\n      hasPanel()\n        ? {\n            ...base(),\n            role: 'combobox',\n            'aria-haspopup': 'dialog',\n            'aria-expanded': open.value,\n            'aria-controls': panelId,\n          }\n        : base(),\n    )\n  }\n\n  return {\n    open,\n    panelId,\n    popupAttrs,\n    openPanel,\n    closePanel,\n    closeAndFocus,\n    focusField,\n    onFieldFocus,\n    toggleFromIcon,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;;AA6CA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK,GAChB,UAAoB,EAAQ,cAAc,KAAK,IAG/C,IAAU,EAAM;CAKtB,EAAQ,GAAgB,CAAe;CAOvC,IAAI,IAAa;CAEjB,SAAS,IAAmB;EAE1B,AADI,KAAY,qBAAqB,CAAU,GAC/C,IAAa;CACf;CAEA,SAAS,EAAU,IAAY,CAAC,EAAY,GAAG;EACzC,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAIzB,MACF,EAAiB,GACjB,IAAa,4BAA4B;GAEvC,AADA,IAAa,GACb,EAAQ,aAAa;EACvB,CAAC;CAEL;CAGA,SAAS,IAAa;EACpB,EAAiB,GACZ,EAAK,UACV,EAAQ,SAAS,OAAO,MAAM,GAC9B,EAAQ,UAAU;CACpB;CASA,AAPA,EAAgB,CAAgB,GAOhC,EAAM,EAAQ,WAAW,MAAY;EAC/B,CAAC,KAAW,CAAC,EAAK,UACtB,EAAW,GACX,EAAK,QAAQ;CACf,CAAC;CAQD,IAAI,IAAa;CAGjB,SAAS,IAAa;EAGpB,AAFA,IAAa,IACb,EAAQ,MAAM,OAAO,MAAM,GAC3B,IAAa;CACf;CAGA,SAAS,IAAgB;EAClB,EAAK,UACV,EAAW,GACX,EAAW;CACb;CAGA,SAAS,IAAe;EAClB,KAAc,CAAC,EAAY,KAC/B,EAAU,EAAK;CACjB;CAGA,SAAS,IAAiB;EACxB,AAAI,EAAK,QAAO,EAAc,IACzB,EAAU,EAAI;CACrB;CAMA,IAAM,KAAkB,MACtB,CAAC,CAAE,EAAM,QAA+B,UAAU,iBAAiB;CAErE,SAAS,EAAe,GAAmB;EACrC,EAAe,CAAK,KACxB,EAAU;CACZ;CAGA,IAAM,IAAa,EAAmB,EAAQ,QAAQ,CAAU;CAQhE,SAAS,EAAiB,GAAmB;EAE3C,AADe,EAAM,QACR,QAAQ,gDAAgD,KAAG,EAAM,eAAe;CAC/F;CAGA,SAAS,EAAU,GAAsB;EACvC,IAAI,EAAM,QAAQ,UAAU;GAC1B,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAc;GAEhB;EACF;EAGA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,oBACP,CAAC,EAAe,CAAK,MAErB,EAAM,eAAe,GAGrB,EAAU,EAAI;CAElB;CASA,SAAS,EAAW,GAAqC,GAAyB;EAChF,OAAO,QACL,EAAS,IACL;GACE,GAAG,EAAK;GACR,MAAM;GACN,iBAAiB;GACjB,iBAAiB,EAAK;GACtB,iBAAiB;EACnB,IACA,EAAK,CACX;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}