vectis-ui 0.1.0

package/dist/components/VCombobox/VComboboxOption.d.ts

@@ -0,0 +1,48 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * One row of a VCombobox's list. It is internal to that component and never exported.
+ *
+ * The focus never comes here: it stays in the text field throughout, so the highlight is
+ * told to this row rather than deduced from anything it holds. Choosing it does not close
+ * the panel either — the component above decides that.
+ *
+ * TRAP — a disabled option does NOT carry the native attribute. It has to remain in the
+ * accessibility tree the field walks through, and the native attribute would take it out
+ * of it; `aria-disabled` says the same thing while leaving it in place.
+ *
+ * Its surface is deliberately reduced to what VCombobox actually uses. The label comes
+ * through the slot rather than a prop, and there is a single icon, at the start: the end
+ * of the row is taken by the selection tick.
+ */
+interface ComboboxOptionProps {
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /** Marks the option as one of the chosen ones, which also draws the tick. */
+    selected?: boolean;
+    /** Marks the option as the one currently highlighted. The field decides this. */
+    active?: boolean;
+    /** Shows the option without allowing it to be chosen. */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** What the row shows. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ComboboxOptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+}, string, import('vue').PublicProps, Readonly<ComboboxOptionProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: IconSource;
+    selected: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VCombobox/VComboboxOption.js

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

package/dist/components/VCombobox/VComboboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VComboboxOption.js","names":[],"sources":["../../../src/components/VCombobox/VComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\n/**\n * One row of a VCombobox's list. It is internal to that component and never exported.\n *\n * The focus never comes here: it stays in the text field throughout, so the highlight is\n * told to this row rather than deduced from anything it holds. Choosing it does not close\n * the panel either — the component above decides that.\n *\n * TRAP — a disabled option does NOT carry the native attribute. It has to remain in the\n * accessibility tree the field walks through, and the native attribute would take it out\n * of it; `aria-disabled` says the same thing while leaving it in place.\n *\n * Its surface is deliberately reduced to what VCombobox actually uses. The label comes\n * through the slot rather than a prop, and there is a single icon, at the start: the end\n * of the row is taken by the selection tick.\n */\ninterface ComboboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ComboboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-combobox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-combobox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-combobox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox-option {\n    /* Every dimension is inherited from the panel, which carries the shared size class,\n       and the icons follow through the same inheritance.\n\n       The type is composite, exactly as in a menu row: the SIZE comes from the scale, the\n       line height stays that of body text — a unitless ratio, so it follows the size —\n       and the weight stays regular, since a row may wrap. */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: var(--vectis-radius-sm);\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-combobox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-combobox-option:hover:not([aria-disabled='true']),\n  .v-combobox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-combobox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* Matched on the ARIA state and not on the native one, which this component\n     deliberately never sets — see the introduction. */\n  .v-combobox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCombobox/VComboboxOption.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,56 @@
+import e from "../VIcon/VIcon.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import { check as n } from "../VIcon/icons/check.js";
+import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeProps as l, openBlock as u, renderSlot as d, unref as f } from "vue";
+//#region src/components/VCombobox/VComboboxOption.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"aria-selected",
+	"aria-disabled",
+	"data-active"
+], m = { class: "v-combobox-option-label" }, h = /*@__PURE__*/ s({
+	__name: "VComboboxOption",
+	props: {
+		icon: { default: void 0 },
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["select"],
+	setup(s, { emit: h }) {
+		let g = s, _ = h;
+		function v() {
+			g.disabled || _("select");
+		}
+		return (h, g) => (u(), a("button", {
+			type: "button",
+			role: "option",
+			tabindex: "-1",
+			class: "v-combobox-option",
+			"aria-selected": s.selected,
+			"aria-disabled": s.disabled ? "true" : void 0,
+			"data-active": s.active ? "" : void 0,
+			onClick: v
+		}, [
+			s.icon ? (u(), r(e, l(c({ key: 0 }, f(t)(s.icon))), null, 16)) : i("", !0),
+			o("span", m, [d(h.$slots, "default")]),
+			s.selected ? (u(), r(e, {
+				key: 1,
+				name: f(n),
+				class: "v-combobox-option-check"
+			}, null, 8, ["name"])) : i("", !0)
+		], 8, p));
+	}
+});
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=VComboboxOption.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VCombobox/VComboboxOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VComboboxOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCombobox/VComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\n/**\n * One row of a VCombobox's list. It is internal to that component and never exported.\n *\n * The focus never comes here: it stays in the text field throughout, so the highlight is\n * told to this row rather than deduced from anything it holds. Choosing it does not close\n * the panel either — the component above decides that.\n *\n * TRAP — a disabled option does NOT carry the native attribute. It has to remain in the\n * accessibility tree the field walks through, and the native attribute would take it out\n * of it; `aria-disabled` says the same thing while leaving it in place.\n *\n * Its surface is deliberately reduced to what VCombobox actually uses. The label comes\n * through the slot rather than a prop, and there is a single icon, at the start: the end\n * of the row is taken by the selection tick.\n */\ninterface ComboboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ComboboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-combobox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-combobox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-combobox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox-option {\n    /* Every dimension is inherited from the panel, which carries the shared size class,\n       and the icons follow through the same inheritance.\n\n       The type is composite, exactly as in a menu row: the SIZE comes from the scale, the\n       line height stays that of body text — a unitless ratio, so it follows the size —\n       and the weight stays regular, since a row may wrap. */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: var(--vectis-radius-sm);\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-combobox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-combobox-option:hover:not([aria-disabled='true']),\n  .v-combobox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-combobox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* Matched on the ARIA state and not on the native one, which this component\n     deliberately never sets — see the introduction. */\n  .v-combobox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAM,IAAQ,GAOR,IAAO;EAUb,SAAS,IAAU;GACb,EAAM,YACV,EAAK,QAAQ;EACf;yBAIE,EAaS,UAAA;GAZP,MAAK;GACL,MAAK;GACL,UAAS;GACT,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,WAAQ,SAAY,KAAA;GACnC,eAAa,EAAA,SAAM,KAAQ,KAAA;GACpB;;GAEK,EAAA,QAAA,EAAA,GAAb,EAA8C,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACzC,EAAqD,QAArD,GAAqD,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GACjC,EAAA,YAAA,EAAA,GAAb,EAA2E,GAAA;;IAAnD,MAAM,EAAA,CAAA;IAAW,OAAM"}

package/dist/components/VCombobox/VComboboxSeparator.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-separator.v-combobox-separator{margin-inline:calc(-1 * var(--vectis-space-1))}}

package/dist/components/VCombobox/VComboboxSeparator.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VCombobox/VComboboxSeparator.js

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

package/dist/components/VCombobox/VComboboxSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VComboboxSeparator.js","names":[],"sources":["../../../src/components/VCombobox/VComboboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The rule drawn between two blocks of options in a VCombobox's list.\n *\n * TRAP — it is stripped of the meaning an `<hr>` normally carries. A separator is\n * perfectly legitimate inside a menu, as VMenuSeparator relies on, but a LIST may\n * contain nothing but options and blocks of options — so here the rule has to be\n * declared as pure presentation.\n *\n * Nothing is lost by that: what the rule suggests visually is already said properly by\n * the named blocks around it.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-combobox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /* The rule is bled out to the panel's edges by cancelling its padding. The selector\n     compounds both classes because `.v-separator` sets `margin: 0` from a sheet of its\n     own: at equal specificity the winner would be whichever of the two the consumer's\n     bundler happens to put last. The space above and below comes from the panel's own\n     gap, so no margin is added here. */\n  .v-separator.v-combobox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCombobox/VComboboxSeparator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,16 @@
+import e from "../VSeparator/VSeparator.js";
+import { createBlock as t, defineComponent as n, openBlock as r } from "vue";
+//#region src/components/VCombobox/VComboboxSeparator.vue?vue&type=script&setup=true&lang.ts
+var i = /*@__PURE__*/ n({
+	__name: "VComboboxSeparator",
+	setup(n) {
+		return (n, i) => (r(), t(e, {
+			role: "presentation",
+			class: "v-combobox-separator"
+		}));
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=VComboboxSeparator.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VCombobox/VComboboxSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VComboboxSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCombobox/VComboboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The rule drawn between two blocks of options in a VCombobox's list.\n *\n * TRAP — it is stripped of the meaning an `<hr>` normally carries. A separator is\n * perfectly legitimate inside a menu, as VMenuSeparator relies on, but a LIST may\n * contain nothing but options and blocks of options — so here the rule has to be\n * declared as pure presentation.\n *\n * Nothing is lost by that: what the rule suggests visually is already said properly by\n * the named blocks around it.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-combobox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /* The rule is bled out to the panel's edges by cancelling its padding. The selector\n     compounds both classes because `.v-separator` sets `margin: 0` from a sheet of its\n     own: at equal specificity the winner would be whichever of the two the consumer's\n     bundler happens to put last. The space above and below comes from the panel's own\n     gap, so no margin is added here. */\n  .v-separator.v-combobox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAgBE,EAA+D,GAAA;GAAnD,MAAK;GAAe,OAAM"}

package/dist/components/VCombobox/infiniteScroll.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+export interface InfiniteScrollOptions {
+    /** The marker at the foot of the list. It is absent when there is nothing left to load. */
+    sentinelEl: Ref<HTMLElement | null>;
+    /** Whether a page may be asked for right now: the panel open, more to come, none in flight. */
+    canLoad: () => boolean;
+    /** How many options are loaded. Its growth is the signal that a page has arrived. */
+    loadedCount: () => number;
+    /** Asks for the next page. */
+    onLoadMore: () => void;
+}
+export interface InfiniteScroll {
+    /**
+     * Releases the lock that stops two requests overlapping.
+     *
+     * It must be called wherever a page that was asked for can no longer arrive — when the
+     * panel closes, above all. Without that, a request which failed would leave the paging
+     * frozen for the rest of the session.
+     */
+    reset: () => void;
+}
+export declare function useInfiniteScroll(options: InfiniteScrollOptions): InfiniteScroll;

package/dist/components/VCombobox/infiniteScroll.js

@@ -0,0 +1,28 @@
+import { watch as e } from "vue";
+//#region src/components/VCombobox/infiniteScroll.ts
+function t(t) {
+	let n = null, r = !1;
+	function i(e) {
+		e.some((e) => e.isIntersecting) && (r || !t.canLoad() || (r = !0, t.onLoadMore()));
+	}
+	return e(t.sentinelEl, (e, t, r) => {
+		if (!e || typeof IntersectionObserver > "u") return;
+		let a = e.closest("[role=\"listbox\"]");
+		a && (n = new IntersectionObserver(i, {
+			root: a,
+			rootMargin: "0px 0px 50% 0px"
+		}), n.observe(e), r(() => {
+			n?.disconnect(), n = null;
+		}));
+	}, { flush: "post" }), e(t.loadedCount, () => {
+		r = !1;
+		let e = t.sentinelEl.value;
+		!n || !e || (n.unobserve(e), n.observe(e));
+	}), { reset: () => {
+		r = !1;
+	} };
+}
+//#endregion
+export { t as useInfiniteScroll };
+
+//# sourceMappingURL=infiniteScroll.js.map

package/dist/components/VCombobox/infiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infiniteScroll.js","names":[],"sources":["../../../src/components/VCombobox/infiniteScroll.ts"],"sourcesContent":["// @core\n/**\n * What asks VCombobox for the next page as the reader reaches the end of the list.\n *\n * Nothing in CSS can report that an element has come into view, so this is code by\n * necessity: a marker is rendered at the foot of the panel and watched, with the panel\n * itself — the box that scrolls — as the frame it is watched within.\n *\n * The module lives in the component's folder rather than among the shared ones, for the\n * usual reason: a single consumer, so it does not qualify as shared code, and VCombobox\n * owns the contract. Promote it the day a second panel paginates.\n *\n * It should not be confused with the shared observer between VTabs and VCombobox that\n * was deliberately refused: VTabs watches two markers at the ends of a row to enable or\n * disable buttons, which has nothing in common with paging a list.\n */\nimport { watch, type Ref } from 'vue'\n\nexport interface InfiniteScrollOptions {\n  /** The marker at the foot of the list. It is absent when there is nothing left to load. */\n  sentinelEl: Ref<HTMLElement | null>\n  /** Whether a page may be asked for right now: the panel open, more to come, none in flight. */\n  canLoad: () => boolean\n  /** How many options are loaded. Its growth is the signal that a page has arrived. */\n  loadedCount: () => number\n  /** Asks for the next page. */\n  onLoadMore: () => void\n}\n\nexport interface InfiniteScroll {\n  /**\n   * Releases the lock that stops two requests overlapping.\n   *\n   * It must be called wherever a page that was asked for can no longer arrive — when the\n   * panel closes, above all. Without that, a request which failed would leave the paging\n   * frozen for the rest of the session.\n   */\n  reset: () => void\n}\n\nexport function useInfiniteScroll(options: InfiniteScrollOptions): InfiniteScroll {\n  let observer: IntersectionObserver | null = null\n  /*\n   * A lock of our own, set the instant a page is asked for. The consumer's loading flag\n   * cannot serve: they raise it when their request starts, which is at best a tick\n   * later, and the gap between the two is wide enough for several requests to go out.\n   */\n  let pending = false\n\n  function onIntersect(entries: IntersectionObserverEntry[]) {\n    if (!entries.some((entry) => entry.isIntersecting)) return\n    if (pending || !options.canLoad()) return\n    pending = true\n    options.onLoadMore()\n  }\n\n  watch(\n    options.sentinelEl,\n    (el, _previous, onCleanup) => {\n      // @fallback\n      // The observer does not exist in the unit-test environment, so its absence has to\n      // be tolerated rather than assumed away; the behaviour is checked in a real\n      // browser.\n      if (!el || typeof IntersectionObserver === 'undefined') return\n      // TRAP — the panel must be named as the frame the marker is watched within, and it\n      // is found by its ARIA role, which is public API, rather than by an internal class.\n      // Left unspecified, the frame would be the VIEWPORT — and since the panel floats\n      // above the page, the marker would count as visible from the very first moment,\n      // firing a burst of requests for every page at once.\n      const root = el.closest('[role=\"listbox\"]')\n      if (!root) return\n      observer = new IntersectionObserver(onIntersect, {\n        root,\n        // The next page is asked for half a panel before the marker is actually reached,\n        // so the list is already growing by the time the reader gets there. It is\n        // expressed as a proportion of the panel rather than as a number of pixels.\n        rootMargin: '0px 0px 50% 0px',\n      })\n      observer.observe(el)\n      onCleanup(() => {\n        observer?.disconnect()\n        observer = null\n      })\n    },\n    { flush: 'post' },\n  )\n\n  // TRAP — an observer only reports a CROSSING. If the page that arrives is too short to\n  // push the marker out of view, the marker stays visible without ever crossing anything\n  // again, and the loading would stop dead at the second page. Watching it afresh after\n  // each page forces a new answer.\n  //\n  // It also gives the stopping condition away for nothing: a source that returns no new\n  // option leaves the count unchanged, this never runs, and the loop simply ends.\n  watch(options.loadedCount, () => {\n    pending = false\n    const el = options.sentinelEl.value\n    if (!observer || !el) return\n    observer.unobserve(el)\n    observer.observe(el)\n  })\n\n  return {\n    reset: () => {\n      pending = false\n    },\n  }\n}\n"],"mappings":";;AAwCA,SAAgB,EAAkB,GAAgD;CAChF,IAAI,IAAwC,MAMxC,IAAU;CAEd,SAAS,EAAY,GAAsC;EACpD,EAAQ,MAAM,MAAU,EAAM,cAAc,MAC7C,KAAW,CAAC,EAAQ,QAAQ,MAChC,IAAU,IACV,EAAQ,WAAW;CACrB;CAgDA,OA9CA,EACE,EAAQ,aACP,GAAI,GAAW,MAAc;EAK5B,IAAI,CAAC,KAAM,OAAO,uBAAyB,KAAa;EAMxD,IAAM,IAAO,EAAG,QAAQ,oBAAkB;EACrC,MACL,IAAW,IAAI,qBAAqB,GAAa;GAC/C;GAIA,YAAY;EACd,CAAC,GACD,EAAS,QAAQ,CAAE,GACnB,QAAgB;GAEd,AADA,GAAU,WAAW,GACrB,IAAW;EACb,CAAC;CACH,GACA,EAAE,OAAO,OAAO,CAClB,GASA,EAAM,EAAQ,mBAAmB;EAC/B,IAAU;EACV,IAAM,IAAK,EAAQ,WAAW;EAC1B,CAAC,KAAY,CAAC,MAClB,EAAS,UAAU,CAAE,GACrB,EAAS,QAAQ,CAAE;CACrB,CAAC,GAEM,EACL,aAAa;EACX,IAAU;CACZ,EACF;AACF"}

package/dist/components/VDataTable/VDataTable.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-table-wrapper{--table-pad-block:var(--vectis-space-3);--table-pad-inline:var(--vectis-space-3);--table-head-pad-block:var(--vectis-space-2);--table-frame-pad:0px;--table-surface:var(--vectis-color-surface);font-family:var(--vectis-text-family);flex-direction:column;block-size:100%;display:flex;container-type:inline-size}.v-table-wrapper[data-compact]{--table-pad-block:var(--vectis-space-2);--table-pad-inline:var(--vectis-space-2);--table-head-pad-block:var(--vectis-space-1)}.v-table-wrapper[data-variant=outlined]{--table-frame-pad:var(--table-pad-inline);--table-surface:var(--vectis-color-surface-raised);background:var(--table-surface);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface);overflow:clip}.v-table-scroller{flex:auto;min-block-size:0;overflow:auto}.v-table-toolbar{justify-content:space-between;align-items:center;gap:var(--vectis-space-3);padding-block-start:var(--table-frame-pad);padding-block-end:var(--vectis-space-3);padding-inline:var(--table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-table-title{--typography-color:var(--vectis-color-text)}.v-table-toolbar .v-input{inline-size:var(--vectis-control-size-table-search);max-inline-size:100%}.v-table{border-collapse:collapse;width:100%;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text)}.v-table-caption{padding-block-end:var(--vectis-space-3);padding-inline:var(--table-frame-pad);text-align:start;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-table th{padding:var(--table-head-pad-block) var(--table-pad-inline);text-align:start;font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-font-weight-semibold);color:var(--vectis-color-text-muted);border-block-end:1px solid var(--vectis-color-border)}.v-table td{padding:var(--table-pad-block) var(--table-pad-inline);border-block-end:1px solid var(--vectis-color-border)}.v-table tbody tr:last-child td{border-block-end:none}.v-table [data-align=end]{text-align:end}.v-table [data-align=center]{text-align:center}.v-table .v-table-select{inline-size:0}.v-table-wrapper[data-striped] tbody tr:nth-child(2n){background-color:var(--vectis-color-surface-sunken)}.v-table-wrapper[data-selectable] tbody tr[data-selected]{background-color:var(--vectis-color-accent-surface)}.v-table-wrapper[data-sticky-header] th{z-index:1;background-color:var(--table-surface);position:sticky;inset-block-start:0}.v-table-sort{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-1);color:inherit;font:inherit;cursor:pointer;border-radius:var(--vectis-radius-xs);background:0 0;border:none;padding:0;display:inline-flex}.v-table-sort:hover{color:var(--vectis-color-text)}.v-table-sort:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-table-sort-icon{opacity:.35}.v-table-sort[data-direction] .v-table-sort-icon{opacity:1}.v-table-state{padding:var(--vectis-space-6);text-align:center;color:var(--vectis-color-text-muted)}.v-table-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);padding-block-start:var(--vectis-space-3);padding-block-end:var(--table-frame-pad);padding-inline:var(--table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-table-footer-end{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);flex-wrap:wrap;margin-inline-start:auto;display:flex}.v-table-selection,.v-table-range,.v-table-per-page-label{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-table-per-page{align-items:center;gap:var(--vectis-space-2);display:flex}@container (width<=640px){.v-table-wrapper[data-responsive=stack] .v-table-head{clip-path:inset(50%);width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.v-table-wrapper[data-responsive=stack] tbody tr{padding-block:var(--vectis-space-2);border-block-end:1px solid var(--vectis-color-border);display:block}.v-table-wrapper[data-responsive=stack] tbody tr:last-child{border-block-end:none}.v-table-wrapper[data-responsive=stack] td{justify-content:space-between;align-items:baseline;gap:var(--vectis-space-4);padding:var(--vectis-space-1) var(--vectis-space-2);text-align:end;border:none;display:flex}.v-table-wrapper[data-responsive=stack] td:before{content:attr(data-label);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted)}.v-table-wrapper[data-responsive=stack] td.v-table-select{justify-content:flex-start}.v-table-wrapper[data-responsive=stack] td.v-table-select:before{content:none}.v-table-search{flex:100%}}}

package/dist/components/VDataTable/VDataTable.d.ts

@@ -0,0 +1,214 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * A table of data, with everything usually built around one: a title, a search field,
+ * sortable columns, a selection, and pagination.
+ *
+ * It is a real `<table>` underneath, with a caption, proper column headers and the
+ * attribute announcing how each is sorted — which is what lets a screen reader say "row
+ * 3 of 40, column Name" rather than reading a grid of unrelated text. Everything around
+ * it is assembled from the design system's own components rather than reinvented here.
+ *
+ * The JavaScript is almost all derivation — filter, then sort, then cut into pages —
+ * plus two effects explained where they sit.
+ *
+ * How the table reacts to a narrow space, and how it fills a height, are both entirely
+ * CSS: in the stacked mode each row becomes a card once the COMPONENT is narrow, with
+ * nothing measured from code, and the whole thing is a column in which only the scrolling
+ * area stretches.
+ */
+/** One column of the table. */
+export interface DataTableColumn {
+    /** Which field of a row it shows, and the name its slots are addressed by. */
+    key: string;
+    /** Its heading. */
+    label: string;
+    /** Lets the reader sort by this column. */
+    sortable?: boolean;
+    /** How its content is aligned — numbers usually belong at the end. */
+    align?: 'start' | 'center' | 'end';
+}
+/** Which column the table is sorted by, and in which direction. */
+export interface DataTableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+/** How a row is identified: by the field named in `rowKey`, or failing that by its position. */
+export type DataTableRowId = string | number;
+/**
+ * Everything the table is currently being asked for, reported whenever it changes so a
+ * server can answer it.
+ */
+export interface DataTableParams {
+    page: number;
+    perPage: number | null;
+    sortKey: string | null;
+    sortDirection: 'asc' | 'desc' | null;
+    search: string;
+}
+export interface DataTableProps<Row extends Record<string, unknown>> {
+    /** The columns to show, in order. */
+    columns: DataTableColumn[];
+    /** The rows to show. */
+    rows: Row[];
+    /**
+     * Which field identifies a row. Without it a row is identified by its position, which
+     * is enough for display but not for a selection: it must be given as soon as rows can
+     * be selected, or the selection follows the positions rather than the rows.
+     */
+    rowKey?: string;
+    /**
+     * A sentence describing what the table holds. It is announced before the table itself,
+     * and is what tells a screen reader user whether it is worth exploring.
+     */
+    caption?: string;
+    /**
+     * How the table is framed: nothing at all, or a card with a raised background, a border
+     * and rounded corners.
+     */
+    variant?: 'flat' | 'outlined';
+    /**
+     * What happens when the component is too narrow: the table scrolls sideways, or each
+     * row becomes a card with its column headings repeated inside it.
+     */
+    responsive?: 'scroll' | 'stack';
+    /** Shows that the rows are being loaded. */
+    loading?: boolean;
+    /** What is said when there is no row to show. It falls back to the design system dictionary. */
+    emptyText?: string;
+    /**
+     * A title above the table, on the left of its toolbar.
+     *
+     * Note that this prop shadows the HTML attribute of the same name on the component
+     * itself, an accepted trade-off — a tooltip over a whole table would be of little
+     * use.
+     */
+    title?: string;
+    /** Adds a search field to the toolbar. */
+    searchable?: boolean;
+    /** What that field says while empty. It falls back to the design system dictionary. */
+    searchPlaceholder?: string;
+    /**
+     * What screen readers announce for the search field. It falls back to the design
+     * system dictionary.
+     */
+    searchLabel?: string;
+    /**
+     * When a server does the searching, how long to wait after a keystroke before asking
+     * it, in milliseconds. Zero asks at once.
+     */
+    searchDebounce?: number;
+    /** Tints every other row, which helps the eye follow a long line across the table. */
+    striped?: boolean;
+    /**
+     * Keeps the column headings in place while the rows scroll under them. It needs a
+     * bounded scrolling area to work: either the `height` prop, or a parent with a height
+     * of its own.
+     */
+    stickyHeader?: boolean;
+    /** Tightens the cells by one step, and everything the table renders with them. */
+    compact?: boolean;
+    /**
+     * The height of the WHOLE component, toolbar and pagination included: a number is read
+     * as pixels, anything else as a CSS length. Left out, the table takes its parent's
+     * height whenever the parent has one.
+     */
+    height?: number | string;
+    /** The heading icon of a column that can be sorted but currently is not. */
+    sortIcon?: IconSource;
+    /**
+     * The icon of an ascending sort. It points DOWN by default, the spreadsheet
+     * convention: sorting A to Z reads downwards.
+     */
+    sortAscIcon?: IconSource;
+    /** The icon of a descending sort. */
+    sortDescIcon?: IconSource;
+    /** The choices offered for how many rows a page holds. */
+    perPageOptions?: number[];
+    /** What that choice is called. It falls back to the design system dictionary. */
+    perPageLabel?: string;
+    /**
+     * How many rows there are in all on the server. It is what lets the pagination and the
+     * range be right when the table only ever holds one page.
+     */
+    total?: number;
+    /** Shows which rows are being looked at — "1–10 of 42" — in the footer. */
+    showRange?: boolean;
+    /** Rephrases that range. It falls back to the design system dictionary. */
+    rangeLabel?: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
+    /** Adds a checkbox to every row, and one in the heading to take the whole page. */
+    selectable?: boolean;
+    /**
+     * What the heading checkbox is announced as. It falls back to the design system
+     * dictionary.
+     */
+    selectAllLabel?: string;
+    /**
+     * How the selection is summed up in the footer. It says nothing at all when nothing is
+     * selected, and falls back to the design system dictionary.
+     */
+    selectionLabel?: (count: number) => string;
+    /**
+     * What a row's checkbox is announced as. "Select row" tells a screen reader user
+     * nothing about WHICH row, so this is worth supplying with something from the row
+     * itself. It falls back to the design system dictionary.
+     */
+    selectRowLabel?: (row: Row, index: number) => string;
+    /**
+     * Hands the searching, the sorting and the paging over to a server: the rows are shown
+     * exactly as they arrive, and every change of what is being asked for is reported so
+     * the server can answer it.
+     */
+    serverSide?: boolean;
+}
+declare const __VLS_export: <Row extends Record<string, unknown>>(__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<(DataTableProps<Row> & {
+        /** The current sort. It may be driven from outside, or simply left to the table. */
+        sort?: DataTableSort | null;
+        /** The page being shown. */
+        page?: number;
+        /**
+         * How many rows a page holds. Any value above zero turns the pagination on, so passing
+         * one down without binding it is enough to enable it.
+         */
+        perPage?: number | undefined;
+        selected?: DataTableRowId[];
+        search?: string;
+    }) & {
+        "onUpdate:selected"?: ((value: DataTableRowId[]) => any) | undefined;
+        "onUpdate:params"?: ((params: DataTableParams) => any) | undefined;
+        "onUpdate:sort"?: ((value: DataTableSort | null) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:perPage"?: ((value: number | undefined) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [name: `cell-${string}`]: (scope: {
+            row: Row;
+            value: unknown;
+            column: DataTableColumn;
+        }) => unknown;
+        [name: `head-${string}`]: (scope: {
+            column: DataTableColumn;
+        }) => unknown;
+        /** The left side of the toolbar, replacing the `title` prop. */
+        header?: () => unknown;
+    };
+    emit: ((evt: "update:params", params: DataTableParams) => void) & (((event: "update:selected", value: DataTableRowId[]) => void) & ((event: "update:sort", value: DataTableSort | null) => void) & ((event: "update:page", value: number) => void) & ((event: "update:perPage", value: number | undefined) => void) & ((event: "update:search", value: string) => 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/VDataTable/VDataTable.js

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

package/dist/components/VDataTable/VDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTable.js","names":[],"sources":["../../../src/components/VDataTable/VDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\nimport { computed, ref, watch } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCheckbox from '../VCheckbox/VCheckbox.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { arrow_downward as arrowDownwardIcon } from '../VIcon/icons/arrow_downward'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_upward as arrowUpwardIcon } from '../VIcon/icons/arrow_upward'\nimport { search as searchIcon } from '../VIcon/icons/search'\nimport { swap_vert as swapVertIcon } from '../VIcon/icons/swap_vert'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VPagination from '../VPagination/VPagination.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { normalizeText } from '../../utils/text'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useTimer } from '../../composables/useTimer'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @core\n/**\n * A table of data, with everything usually built around one: a title, a search field,\n * sortable columns, a selection, and pagination.\n *\n * It is a real `<table>` underneath, with a caption, proper column headers and the\n * attribute announcing how each is sorted — which is what lets a screen reader say \"row\n * 3 of 40, column Name\" rather than reading a grid of unrelated text. Everything around\n * it is assembled from the design system's own components rather than reinvented here.\n *\n * The JavaScript is almost all derivation — filter, then sort, then cut into pages —\n * plus two effects explained where they sit.\n *\n * How the table reacts to a narrow space, and how it fills a height, are both entirely\n * CSS: in the stacked mode each row becomes a card once the COMPONENT is narrow, with\n * nothing measured from code, and the whole thing is a column in which only the scrolling\n * area stretches.\n */\n/** One column of the table. */\nexport interface DataTableColumn {\n  /** Which field of a row it shows, and the name its slots are addressed by. */\n  key: string\n  /** Its heading. */\n  label: string\n  /** Lets the reader sort by this column. */\n  sortable?: boolean\n  /** How its content is aligned — numbers usually belong at the end. */\n  align?: 'start' | 'center' | 'end'\n}\n\n/** Which column the table is sorted by, and in which direction. */\nexport interface DataTableSort {\n  key: string\n  direction: 'asc' | 'desc'\n}\n\n/** How a row is identified: by the field named in `rowKey`, or failing that by its position. */\nexport type DataTableRowId = string | number\n\n/**\n * Everything the table is currently being asked for, reported whenever it changes so a\n * server can answer it.\n */\nexport interface DataTableParams {\n  page: number\n  perPage: number | null\n  sortKey: string | null\n  sortDirection: 'asc' | 'desc' | null\n  search: string\n}\n\n// TRAP — this interface is exported rather than kept local, and it is generic rather than\n// referring to the component's own type parameter.\n//\n// A component typed over its rows inlines the whole signature of its props into the\n// declarations it emits, so a name that is not exported cannot be written there and the\n// build of the type declarations fails. And being lifted out of the component's scope, it\n// has no access to that parameter and must take one of its own.\nexport interface DataTableProps<Row extends Record<string, unknown>> {\n  /** The columns to show, in order. */\n  columns: DataTableColumn[]\n  /** The rows to show. */\n  rows: Row[]\n  /**\n   * Which field identifies a row. Without it a row is identified by its position, which\n   * is enough for display but not for a selection: it must be given as soon as rows can\n   * be selected, or the selection follows the positions rather than the rows.\n   */\n  rowKey?: string\n  /**\n   * A sentence describing what the table holds. It is announced before the table itself,\n   * and is what tells a screen reader user whether it is worth exploring.\n   */\n  caption?: string\n  /**\n   * How the table is framed: nothing at all, or a card with a raised background, a border\n   * and rounded corners.\n   */\n  variant?: 'flat' | 'outlined'\n  /**\n   * What happens when the component is too narrow: the table scrolls sideways, or each\n   * row becomes a card with its column headings repeated inside it.\n   */\n  responsive?: 'scroll' | 'stack'\n  /** Shows that the rows are being loaded. */\n  loading?: boolean\n  /** What is said when there is no row to show. It falls back to the design system dictionary. */\n  emptyText?: string\n  /**\n   * A title above the table, on the left of its toolbar.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component\n   * itself, an accepted trade-off — a tooltip over a whole table would be of little\n   * use.\n   */\n  title?: string\n  /** Adds a search field to the toolbar. */\n  searchable?: boolean\n  /** What that field says while empty. It falls back to the design system dictionary. */\n  searchPlaceholder?: string\n  /**\n   * What screen readers announce for the search field. It falls back to the design\n   * system dictionary.\n   */\n  searchLabel?: string\n  /**\n   * When a server does the searching, how long to wait after a keystroke before asking\n   * it, in milliseconds. Zero asks at once.\n   */\n  searchDebounce?: number\n  /** Tints every other row, which helps the eye follow a long line across the table. */\n  striped?: boolean\n  /**\n   * Keeps the column headings in place while the rows scroll under them. It needs a\n   * bounded scrolling area to work: either the `height` prop, or a parent with a height\n   * of its own.\n   */\n  stickyHeader?: boolean\n  /** Tightens the cells by one step, and everything the table renders with them. */\n  compact?: boolean\n  /**\n   * The height of the WHOLE component, toolbar and pagination included: a number is read\n   * as pixels, anything else as a CSS length. Left out, the table takes its parent's\n   * height whenever the parent has one.\n   */\n  height?: number | string\n  /** The heading icon of a column that can be sorted but currently is not. */\n  sortIcon?: IconSource\n  /**\n   * The icon of an ascending sort. It points DOWN by default, the spreadsheet\n   * convention: sorting A to Z reads downwards.\n   */\n  sortAscIcon?: IconSource\n  /** The icon of a descending sort. */\n  sortDescIcon?: IconSource\n  /** The choices offered for how many rows a page holds. */\n  perPageOptions?: number[]\n  /** What that choice is called. It falls back to the design system dictionary. */\n  perPageLabel?: string\n  /**\n   * How many rows there are in all on the server. It is what lets the pagination and the\n   * range be right when the table only ever holds one page.\n   */\n  total?: number\n  /** Shows which rows are being looked at — \"1–10 of 42\" — in the footer. */\n  showRange?: boolean\n  /** Rephrases that range. It falls back to the design system dictionary. */\n  rangeLabel?: (range: { start: number; end: number; total: number }) => string\n  /** Adds a checkbox to every row, and one in the heading to take the whole page. */\n  selectable?: boolean\n  /**\n   * What the heading checkbox is announced as. It falls back to the design system\n   * dictionary.\n   */\n  selectAllLabel?: string\n  /**\n   * How the selection is summed up in the footer. It says nothing at all when nothing is\n   * selected, and falls back to the design system dictionary.\n   */\n  selectionLabel?: (count: number) => string\n  /**\n   * What a row's checkbox is announced as. \"Select row\" tells a screen reader user\n   * nothing about WHICH row, so this is worth supplying with something from the row\n   * itself. It falls back to the design system dictionary.\n   */\n  selectRowLabel?: (row: Row, index: number) => string\n  /**\n   * Hands the searching, the sorting and the paging over to a server: the rows are shown\n   * exactly as they arrive, and every change of what is being asked for is reported so\n   * the server can answer it.\n   */\n  serverSide?: boolean\n}\n\nconst props = withDefaults(defineProps<DataTableProps<Row>>(), {\n  rowKey: undefined,\n  caption: undefined,\n  variant: 'flat',\n  responsive: 'scroll',\n  loading: false,\n  emptyText: undefined,\n  title: undefined,\n  searchable: false,\n  searchPlaceholder: undefined,\n  searchLabel: undefined,\n  searchDebounce: 250,\n  striped: false,\n  stickyHeader: false,\n  compact: false,\n  height: undefined,\n  sortIcon: () => swapVertIcon,\n  sortAscIcon: () => arrowDownwardIcon,\n  sortDescIcon: () => arrowUpwardIcon,\n  perPageOptions: undefined,\n  perPageLabel: undefined,\n  total: undefined,\n  showRange: false,\n  rangeLabel: undefined,\n  selectable: false,\n  selectAllLabel: undefined,\n  selectionLabel: undefined,\n  selectRowLabel: undefined,\n  serverSide: false,\n})\n\nconst m = useMessages()\nconst vectisLocale = useLocale()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.dataTable.empty)\nconst resolvedSearchPlaceholder = computed(\n  () => props.searchPlaceholder ?? m.value.dataTable.searchPlaceholder,\n)\nconst resolvedSearchLabel = computed(() => props.searchLabel ?? m.value.dataTable.searchLabel)\nconst resolvedPerPageLabel = computed(() => props.perPageLabel ?? m.value.dataTable.perPage)\nconst resolvedSelectAllLabel = computed(() => props.selectAllLabel ?? m.value.dataTable.selectAll)\n\n/** The current sort. It may be driven from outside, or simply left to the table. */\nconst sort = defineModel<DataTableSort | null>('sort', { default: null })\n/** The page being shown. */\nconst page = defineModel<number>('page', { default: 1 })\n/**\n * How many rows a page holds. Any value above zero turns the pagination on, so passing\n * one down without binding it is enough to enable it.\n */\nconst perPage = defineModel<number | undefined>('perPage', { default: undefined })\nconst selected = defineModel<DataTableRowId[]>('selected', { default: () => [] })\nconst search = defineModel<string>('search', { default: '' })\n\nconst emit = defineEmits<{\n  /**\n   * What the table is now being asked for, when a server is answering: the page, the\n   * page size, the sort or the search has changed — the last one after its delay.\n   *\n   * Nothing is emitted when the component appears: fetching the first page is the\n   * consumer's own business, and emitting would make every table fetch twice.\n   */\n  'update:params': [params: DataTableParams]\n}>()\n\ndefineSlots<{\n  /** What a cell of a given column shows: a slot named after that column's key. */\n  [name: `cell-${string}`]: (scope: {\n    row: Row\n    value: unknown\n    column: DataTableColumn\n  }) => unknown\n  /** What a column's heading shows: a slot named after that column's key. */\n  [name: `head-${string}`]: (scope: { column: DataTableColumn }) => unknown\n  /** The left side of the toolbar, replacing the `title` prop. */\n  header?: () => unknown\n}>()\n\n// `class` and `style` stay on the wrapper, where a consumer expects to place the\n// component; everything else — an id, the aria-* — goes to the `<table>` itself, the only\n// element they validly describe.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @devwarn\nif (isDev) {\n  if (props.selectable && !props.rowKey)\n    console.warn(\n      '[VDataTable] `selectable` without `rowKey` — index-based identities are corrupted by sorting, filtering and pagination.',\n    )\n}\n\nfunction rowIdentity(row: Row, index: number): DataTableRowId {\n  return props.rowKey ? String(row[props.rowKey]) : index\n}\n\n// From here on: filter, then sort, then cut into pages — three derivations, each reading\n// the one before it.\n//\n// The search only ever looks at the columns that are DISPLAYED. Searching fields the\n// reader cannot see would return rows for reasons nothing on screen explains.\n/*\n * The cells in their accent-insensitive form, remembered per row and column, and\n * re-checked against the raw value.\n *\n * Normalizing a string means decomposing it, stripping what it decomposed into, and\n * lowercasing it — and the filter below re-reads the entire table on every keystroke.\n * Ten thousand rows across five columns is fifty thousand of those per character typed.\n *\n * Reading the cell on every call, rather than deriving the whole table once, is what\n * keeps the filter reactive against a value edited in place. The memory is keyed by ROW,\n * so replacing the rows lets the old entries be collected with no invalidation to write\n * anywhere.\n */\nconst normalizedCells = new WeakMap<Row, Map<string, { raw: string; normalized: string }>>()\nfunction normalizedCell(row: Row, key: string): string {\n  const raw = String(row[key] ?? '')\n  let cells = normalizedCells.get(row)\n  if (!cells) {\n    cells = new Map()\n    normalizedCells.set(row, cells)\n  }\n  const hit = cells.get(key)\n  if (hit && hit.raw === raw) return hit.normalized\n  const normalized = normalizeText(raw)\n  cells.set(key, { raw, normalized })\n  return normalized\n}\n\nconst filteredRows = computed(() => {\n  if (props.serverSide || !props.searchable) return props.rows\n  const needle = normalizeText(search.value.trim())\n  if (!needle) return props.rows\n  return props.rows.filter((row) =>\n    props.columns.some((column) => normalizedCell(row, column.key).includes(needle)),\n  )\n})\n\n/*\n * The collator is built ONCE per locale rather than per comparison.\n *\n * `String.localeCompare` reuses an engine-cached collator only when both the locale and the\n * options are `undefined`; passing either — and this passes both, deliberately, since the\n * locale must stay explicit — takes the slow path and constructs an `Intl.Collator` on every\n * call. That is the cost class `utils/date.ts` already fights: construction runs one to two\n * orders of magnitude longer than use. It is not paid once, either: `search` feeds\n * `filteredRows`, which feeds this, so a sorted table re-sorts on every keystroke.\n *\n * The locale stays explicit for the reason it always was — an `undefined` locale resolves\n * differently in Node and in the browser, so the row order would diverge across hydration.\n */\nconst collator = computed(() => new Intl.Collator(vectisLocale.value, { numeric: true }))\n\nconst sortedRows = computed(() => {\n  const current = sort.value\n  if (!current || props.serverSide) return filteredRows.value\n  const factor = current.direction === 'asc' ? 1 : -1\n  const compare = collator.value.compare\n  return [...filteredRows.value].sort((a, b) => {\n    const av = a[current.key]\n    const bv = b[current.key]\n    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor\n    return compare(String(av ?? ''), String(bv ?? '')) * factor\n  })\n})\n\nconst paginated = computed(() => (perPage.value ?? 0) > 0)\nconst totalCount = computed(() =>\n  props.serverSide ? (props.total ?? props.rows.length) : filteredRows.value.length,\n)\nconst pageCount = computed(() =>\n  paginated.value ? Math.max(1, Math.ceil(totalCount.value / (perPage.value ?? 1))) : 1,\n)\n// The page actually shown is CLAMPED by derivation and the model is never rewritten: a\n// search that leaves fewer pages simply falls back to the last one, and typing a\n// character that would have emptied the table does not silently move the consumer's own\n// page number.\nconst currentPage = computed(() => clamp(page.value, 1, pageCount.value))\n\nconst displayedRows = computed(() => {\n  // With a server answering, the rows received ARE the current page: cutting them again\n  // would show a tenth of a page.\n  if (props.serverSide || !paginated.value) return sortedRows.value\n  const start = (currentPage.value - 1) * (perPage.value ?? 0)\n  return sortedRows.value.slice(start, start + (perPage.value ?? 0))\n})\n\nfunction toggleSort(key: string) {\n  const current = sort.value\n  if (!current || current.key !== key) sort.value = { key, direction: 'asc' }\n  else if (current.direction === 'asc') sort.value = { key, direction: 'desc' }\n  else sort.value = null\n}\n\n// @a11y — only the column actually sorted carries the attribute. Setting it on every\n// heading would have a screen reader announce \"not sorted\" on each one in turn, drowning\n// the single piece of information that matters: which column the order comes from.\nfunction ariaSort(column: DataTableColumn): 'ascending' | 'descending' | undefined {\n  if (sort.value?.key !== column.key) return undefined\n  return sort.value.direction === 'asc' ? 'ascending' : 'descending'\n}\n\n/**\n * Which icon a column's heading shows: a neutral one on any sortable column, and the\n * arrow of the current direction on the one being sorted by.\n *\n * It is deliberately named differently from the prop it falls back to: written the same,\n * the function would shadow the prop inside the template and the icons would never be\n * overridable.\n */\nfunction sortIconFor(column: DataTableColumn): IconSource {\n  if (sort.value?.key !== column.key) return props.sortIcon\n  return sort.value.direction === 'asc' ? props.sortAscIcon : props.sortDescIcon\n}\n\n// The two effects the search needs.\n//\n// A changed search invalidates where one was: page 4 of the old results has nothing to\n// do with page 4 of the new ones, so the reader goes back to the first. And when a server\n// answers, nothing native waits before asking it, so that has to be written.\n//\n// The waiting is delegated to `useTimer` — a delay of zero running at once, cancellation\n// when the component goes away — and the term that was actually committed is what the\n// parameters below report.\nconst committedSearch = ref('')\nconst searchTimer = useTimer()\n\nfunction commitSearch() {\n  committedSearch.value = search.value\n  page.value = 1\n}\n\nwatch(search, () => {\n  if (!props.serverSide) {\n    page.value = 1\n    return\n  }\n  searchTimer.start(commitSearch, props.searchDebounce)\n})\n\n// What the table is asking for, as one value.\nconst params = computed<DataTableParams>(() => ({\n  page: currentPage.value,\n  perPage: perPage.value ?? null,\n  sortKey: sort.value?.key ?? null,\n  sortDirection: sort.value?.direction ?? null,\n  search: committedSearch.value,\n}))\n\n// Committing a search and going back to the first page happen one after the other, but\n// both land in the same flush, so this runs ONCE on the final values — never two requests\n// for what the reader experienced as a single action.\nwatch(params, (value) => {\n  if (props.serverSide) emit('update:params', value)\n})\n\n// The selection. The heading checkbox covers the rows currently VISIBLE and not the whole\n// table: a box that silently selected forty thousand rows would be a trap.\nconst selectedSet = computed(() => new Set<DataTableRowId>(selected.value))\nconst visibleIds = computed(() => displayedRows.value.map((row, index) => rowIdentity(row, index)))\nconst allVisibleSelected = computed(\n  () => visibleIds.value.length > 0 && visibleIds.value.every((id) => selectedSet.value.has(id)),\n)\nconst masterIndeterminate = computed(\n  () => !allVisibleSelected.value && visibleIds.value.some((id) => selectedSet.value.has(id)),\n)\n\nfunction isSelected(row: Row, index: number): boolean {\n  return selectedSet.value.has(rowIdentity(row, index))\n}\n\nfunction toggleRow(row: Row, index: number) {\n  selected.value = toggleValue(selected.value, rowIdentity(row, index))\n}\n\n// It only ever touches the rows on screen, so what was selected on the other pages\n// survives moving between them.\nfunction toggleMaster() {\n  const ids = visibleIds.value\n  if (allVisibleSelected.value) {\n    const visible = new Set(ids)\n    selected.value = selected.value.filter((id) => !visible.has(id))\n  } else {\n    const current = selectedSet.value\n    selected.value = [...selected.value, ...ids.filter((id) => !current.has(id))]\n  }\n}\n\n// @a11y — without this every checkbox in the column would be announced identically, and\n// a screen reader user would have no way of knowing which row they were about to select.\nfunction rowSelectLabel(row: Row, index: number): string {\n  // The dictionary is given the position as a HUMAN would count it, from one, while the\n  // prop keeps the position as code counts it — changing that would break every consumer\n  // already using it.\n  return props.selectRowLabel?.(row, index) ?? m.value.dataTable.selectRow(index + 1)\n}\n\nfunction setPerPage(option: number) {\n  perPage.value = option\n  page.value = 1\n}\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\n\n// @a11y\n/**\n * What the footer says about the selection.\n *\n * TRAP — it is rendered, EMPTY, as soon as rows can be selected at all. A region meant to\n * announce its own changes must already exist before the first change: inserted into the\n * page at the same moment as its text, it announces nothing, and the first row selected\n * would pass in silence.\n */\nconst selectionText = computed(() => {\n  const count = selected.value.length\n  if (props.selectionLabel) return props.selectionLabel(count)\n  if (count === 0) return ''\n  return m.value.dataTable.selection(count)\n})\n\nconst rangeText = computed(() => {\n  const per = perPage.value ?? 0\n  const total = totalCount.value\n  const start = total === 0 ? 0 : (currentPage.value - 1) * per + 1\n  const end = Math.min(currentPage.value * per, total)\n  return props.rangeLabel?.({ start, end, total }) ?? m.value.dataTable.range({ start, end, total })\n})\n\n// The height is applied to the WHOLE component and not as a ceiling on the scrolling\n// area. The component then takes exactly the height asked for and the scrolling area\n// absorbs whatever is left, so a page with three rows on it no longer makes the table\n// shrink around them.\n//\n// A soft ceiling remains available to the consumer through a maximum height of their own:\n// the component is a column whose scrolling area can be compressed.\nconst heightStyle = computed<StyleValue | undefined>(() =>\n  props.height !== undefined ? { blockSize: cssSize(props.height) } : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-table-wrapper\"\n    :class=\"rootClass\"\n    :style=\"[heightStyle, rootStyle]\"\n    :data-variant=\"variant\"\n    :data-responsive=\"responsive\"\n    :data-striped=\"striped ? '' : undefined\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-sticky-header=\"stickyHeader ? '' : undefined\"\n    :data-selectable=\"selectable ? '' : undefined\"\n  >\n    <div v-if=\"title || $slots.header || searchable\" class=\"v-table-toolbar\">\n      <VTypography as=\"div\" variant=\"heading-4\" class=\"v-table-title\">\n        <slot name=\"header\">{{ title }}</slot>\n      </VTypography>\n      <VInput\n        v-if=\"searchable\"\n        v-model=\"search\"\n        class=\"v-table-search\"\n        type=\"search\"\n        size=\"sm\"\n        :compact=\"compact\"\n        :icon-start=\"searchIcon\"\n        clearable\n        :placeholder=\"resolvedSearchPlaceholder\"\n        :aria-label=\"resolvedSearchLabel\"\n      />\n    </div>\n\n    <!-- Only the table itself scrolls; the toolbar above and the footer below stay\n         where they are. -->\n    <div class=\"v-table-scroller\">\n      <table class=\"v-table\" v-bind=\"forwardedAttrs\">\n        <caption v-if=\"caption\" class=\"v-table-caption\">\n          {{\n            caption\n          }}\n        </caption>\n        <thead class=\"v-table-head\">\n          <tr>\n            <th v-if=\"selectable\" scope=\"col\" class=\"v-table-select\">\n              <VCheckbox\n                :model-value=\"allVisibleSelected\"\n                :indeterminate=\"masterIndeterminate\"\n                :aria-label=\"resolvedSelectAllLabel\"\n                @update:model-value=\"toggleMaster\"\n              />\n            </th>\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              scope=\"col\"\n              :data-align=\"column.align\"\n              :aria-sort=\"ariaSort(column)\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                type=\"button\"\n                class=\"v-table-sort\"\n                :data-direction=\"sort?.key === column.key ? sort.direction : undefined\"\n                @click=\"toggleSort(column.key)\"\n              >\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n                <!-- Decorative, and deliberately so: given no label, an icon hides itself\n                     from screen readers. What the sort state is, is already carried by\n                     the heading itself. -->\n                <VIcon class=\"v-table-sort-icon\" v-bind=\"iconProps(sortIconFor(column))\" />\n              </button>\n              <template v-else>\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n              </template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <!-- The order matters: loading is checked BEFORE emptiness, so a table waiting\n               for its rows never claims there are none. -->\n          <tr v-if=\"loading\">\n            <td :colspan=\"colCount\" class=\"v-table-state\">\n              <VSpinner :label=\"m.dataTable.loading\" />\n            </td>\n          </tr>\n          <tr v-else-if=\"displayedRows.length === 0\">\n            <td :colspan=\"colCount\" class=\"v-table-state\">{{ resolvedEmptyText }}</td>\n          </tr>\n          <template v-else>\n            <tr\n              v-for=\"(row, index) in displayedRows\"\n              :key=\"rowIdentity(row, index)\"\n              :data-selected=\"selectable && isSelected(row, index) ? '' : undefined\"\n            >\n              <!-- TRAP — the selection is marked with a plain attribute and NOT with the\n                   ARIA selected state, which is invalid on the row of a table: it belongs\n                   to a grid. What tells assistive technology that a row is selected is\n                   its checkbox being checked. -->\n              <td v-if=\"selectable\" class=\"v-table-select\">\n                <VCheckbox\n                  :model-value=\"isSelected(row, index)\"\n                  :aria-label=\"rowSelectLabel(row, index)\"\n                  @update:model-value=\"toggleRow(row, index)\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :data-label=\"column.label\"\n                :data-align=\"column.align\"\n              >\n                <slot\n                  :name=\"`cell-${column.key}`\"\n                  :row=\"row\"\n                  :value=\"row[column.key]\"\n                  :column=\"column\"\n                >\n                  {{ row[column.key] }}\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- The footer has two zones: what is selected on the left, and on the right the page\n         size, the range and the pagination, in that order. -->\n    <div v-if=\"paginated || selectable\" class=\"v-table-footer\">\n      <span v-if=\"selectable\" class=\"v-table-selection\" aria-live=\"polite\">{{\n        selectionText\n      }}</span>\n      <div v-if=\"paginated\" class=\"v-table-footer-end\">\n        <div v-if=\"perPageOptions?.length\" class=\"v-table-per-page\">\n          <span class=\"v-table-per-page-label\" aria-hidden=\"true\">{{ resolvedPerPageLabel }}</span>\n          <!-- The panel is told to match its trigger, which here replaces the default\n               minimum width with something sensible: a menu of \"10\", \"25\", \"50\" has no\n               use for the width a menu of commands assumes, and it still cannot end up\n               narrower than the button opening it. -->\n          <VMenu size=\"sm\" :compact=\"compact\" placement=\"top-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                :compact=\"compact\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"m.dataTable.perPageValue(resolvedPerPageLabel, perPage ?? 0)\"\n              >\n                {{ perPage }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"option in perPageOptions\"\n              :key=\"option\"\n              :label=\"String(option)\"\n              :selected=\"option === perPage\"\n              @select=\"setPerPage(option)\"\n            />\n          </VMenu>\n        </div>\n        <span v-if=\"showRange\" class=\"v-table-range\" aria-live=\"polite\">{{ rangeText }}</span>\n        <!-- Named after the table rather than with the generic pagination wording: a page\n             holding this table AND a pagination of its own would otherwise expose two\n             navigation landmarks with the same name, and a screen reader user could not\n             tell them apart. -->\n        <VPagination\n          v-model=\"page\"\n          :label=\"m.dataTable.pagination\"\n          :length=\"pageCount\"\n          size=\"sm\"\n          :compact=\"compact\"\n          align=\"end\"\n          variant=\"ghost\"\n          :total-visible=\"7\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-table-wrapper {\n    /* The density, expressed as the cells' padding and tightened by one step in the\n       compact form. It does not go through the shared control scale — there is no single\n       control height in a table — which is the same case VAccordion is in. */\n    --table-pad-block: var(--vectis-space-3);\n    --table-pad-inline: var(--vectis-space-3);\n    --table-head-pad-block: var(--vectis-space-2);\n\n    /* The gutter between the frame and what it holds: nothing when the table is\n       unframed, so the caption, the toolbar and the footer sit flush with the edge, and\n       the cells' own inline padding as soon as a frame appears. */\n    --table-frame-pad: 0px;\n    /* The colour a frozen heading is painted with. It follows the frame's own background:\n       any other value would show as a visible seam in the dark theme, where the two\n       surfaces differ. */\n    --table-surface: var(--vectis-color-surface);\n\n    container-type: inline-size;\n    font-family: var(--vectis-text-family);\n\n    /*\n     * A column of three: toolbar, scrolling area, footer. The component takes its\n     * parent's height and the scrolling area absorbs whatever is left, which is what\n     * stops a last page holding two rows from shrinking the whole table, and what keeps\n     * the footer at the bottom.\n     *\n     * When the parent imposes no height at all, a percentage of an undefined height\n     * simply resolves to automatic — so this costs nothing and needs no measurement.\n     *\n     * TRAP — there is deliberately no zero minimum here. Inside a flex column parent too\n     * short for it, that minimum is what keeps the table at its natural height instead of\n     * letting it be crushed to nothing.\n     */\n    display: flex;\n    flex-direction: column;\n    block-size: 100%;\n  }\n\n  .v-table-wrapper[data-compact] {\n    --table-pad-block: var(--vectis-space-2);\n    --table-pad-inline: var(--vectis-space-2);\n    --table-head-pad-block: var(--vectis-space-1);\n  }\n\n  /* The card. The unframed default has nothing to undo, since it declares no decoration\n     at all — whatever surrounds the table is what provides the surface then. */\n  .v-table-wrapper[data-variant='outlined'] {\n    --table-frame-pad: var(--table-pad-inline);\n    --table-surface: var(--vectis-color-surface-raised);\n\n    background: var(--table-surface);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n    /*\n     * The price of the rounded corners: the striped and selected row backgrounds, the\n     * opaque background of a frozen heading and the square corners of the scrolling area\n     * would all spill past them.\n     *\n     * TRAP — clipped and not hidden. Hiding the overflow would make this element a\n     * scrolling box of its own, and the frozen heading would then stick to IT rather than\n     * to the area that actually scrolls, which is to say it would not stick at all.\n     *\n     * It is confined to the framed form on purpose: unframed, the toolbar and the footer\n     * sit flush with the edge and the clip would crop their focus rings. The page-size\n     * menu is drawn above the page and is never affected either way.\n     */\n    overflow: clip;\n  }\n\n  /*\n   * The ONE part that scrolls, taking whatever room the toolbar and the footer leave.\n   *\n   * It grows from its CONTENT's height rather than from zero, which makes the whole thing\n   * inert as long as there is no free space to hand out — a table shorter than its\n   * container is left exactly as tall as it is.\n   *\n   * The zero minimum is load-bearing: a flex item refuses by default to shrink below its\n   * content, and without it the area would never compress, so the table would overflow\n   * instead of scrolling.\n   *\n   * It is deliberately not confined to one responsive mode: a table taller than its host\n   * must scroll in the stacked form too, or the clip of the framed variant would crop it\n   * and make the rows below unreachable.\n   */\n  .v-table-scroller {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow: auto;\n  }\n\n  .v-table-toolbar {\n    flex: none; /* stays at the top, outside whatever scrolls */\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-3);\n    padding-block-start: var(--table-frame-pad);\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--table-frame-pad);\n  }\n\n  /* The title is rendered by VTypography, and its colour is stated explicitly because the\n     toolbar may well sit inside a context whose text is dimmed.\n\n     TRAP — it is set through the colour VARIABLE that component reads, and not with a\n     plain colour declaration. That declaration would collide with VTypography's own at\n     equal specificity, and the winner would be decided by whichever sheet the consumer's\n     bundler put last. */\n  .v-table-title {\n    --typography-color: var(--vectis-color-text);\n  }\n\n  /* The search field is given a width of its own, overriding the full width VInput takes\n     by default. The selector is qualified by its context, which makes it one step more\n     specific than VInput's own rule and therefore independent of the order the two sheets\n     end up in. */\n  .v-table-toolbar .v-input {\n    inline-size: var(--vectis-control-size-table-search);\n    max-inline-size: 100%;\n  }\n\n  .v-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text);\n  }\n\n  .v-table-caption {\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--table-frame-pad);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-table th {\n    padding: var(--table-head-pad-block) var(--table-pad-inline);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    /* The heavier weight distinguishes a heading from the data under it, which is\n       emphasis rather than a typographic role — hence a font token read directly. */\n    font-weight: var(--vectis-font-weight-semibold);\n    color: var(--vectis-color-text-muted);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-table td {\n    padding: var(--table-pad-block) var(--table-pad-inline);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-table tbody tr:last-child td {\n    border-block-end: none;\n  }\n\n  .v-table [data-align='end'] {\n    text-align: end;\n  }\n\n  .v-table [data-align='center'] {\n    text-align: center;\n  }\n\n  /* The checkbox column is reduced to the width of its content. A table lays its columns\n     out automatically, so asking for no width at all is what makes it take the least\n     possible. */\n  .v-table .v-table-select {\n    inline-size: 0;\n  }\n\n  .v-table-wrapper[data-striped] tbody tr:nth-child(even) {\n    background-color: var(--vectis-color-surface-sunken);\n  }\n\n  /* Placed after the striping on purpose: the specificity is the same, so it is the order\n     that makes a selected row keep its tint on both odd and even rows. */\n  .v-table-wrapper[data-selectable] tbody tr[data-selected] {\n    background-color: var(--vectis-color-accent-surface);\n  }\n\n  /* A frozen heading MUST be opaque: the rows scroll underneath it, and without a\n     background they would show through. Its colour is read from the variable holding the\n     table's real surface — a fixed value would leave a visible seam along the frame's\n     edge in the dark theme, where the two surfaces differ. */\n  .v-table-wrapper[data-sticky-header] th {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n    background-color: var(--table-surface);\n  }\n\n  .v-table-sort {\n    /* The icon context for the sort glyph. Without it the icon would fall back to one em\n       — the heading's own text size — and come out visibly smaller than every other icon\n       in the component. */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    cursor: pointer;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-table-sort:hover {\n    color: var(--vectis-color-text);\n  }\n\n  .v-table-sort: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  /* The glyph stays faint on every column that merely COULD be sorted: it announces that\n     the heading can be clicked without competing for attention with the one column\n     actually carrying the order. */\n  .v-table-sort-icon {\n    opacity: 0.35;\n  }\n\n  .v-table-sort[data-direction] .v-table-sort-icon {\n    opacity: 1;\n  }\n\n  .v-table-state {\n    padding: var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-table-footer {\n    flex: none; /* stays at the bottom, outside whatever scrolls */\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    padding-block-start: var(--vectis-space-3);\n    padding-block-end: var(--table-frame-pad);\n    padding-inline: var(--table-frame-pad);\n  }\n\n  /*\n   * The right-hand zone is pushed to the edge by an automatic margin rather than by an\n   * alignment on the footer. The two zones are siblings in the same row, and the count on\n   * the left has to stay at the OPPOSITE edge: any alignment set on the footer would move\n   * both of them together.\n   *\n   * The margin also does the right thing when there is no count at all, the zone simply\n   * being pushed against the far edge on its own.\n   */\n  .v-table-footer-end {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    margin-inline-start: auto;\n  }\n\n  .v-table-selection,\n  .v-table-range,\n  .v-table-per-page-label {\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-table-per-page {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The stacked form: once the COMPONENT is narrow, each row becomes a card carrying its\n     own headings. It is entirely CSS, and the threshold is written as a literal length —\n     these queries accept no variables.\n\n     The column headings are not removed but hidden the way visually hidden text is: they\n     still name each column for a screen reader, which reads the cells in the same order\n     either way. */\n  @container (max-width: 640px) {\n    .v-table-wrapper[data-responsive='stack'] .v-table-head {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n    }\n\n    .v-table-wrapper[data-responsive='stack'] tbody tr {\n      display: block;\n      padding-block: var(--vectis-space-2);\n      border-block-end: 1px solid var(--vectis-color-border);\n    }\n\n    .v-table-wrapper[data-responsive='stack'] tbody tr:last-child {\n      border-block-end: none;\n    }\n\n    .v-table-wrapper[data-responsive='stack'] td {\n      display: flex;\n      justify-content: space-between;\n      align-items: baseline;\n      gap: var(--vectis-space-4);\n      padding: var(--vectis-space-1) var(--vectis-space-2);\n      border: none;\n      text-align: end;\n    }\n\n    /* Each cell writes its own column's name before itself, taken from the attribute the\n       template put there. It takes the overline type role, without forcing capitals. */\n    .v-table-wrapper[data-responsive='stack'] td::before {\n      content: attr(data-label);\n      font-size: var(--vectis-text-overline-size);\n      font-weight: var(--vectis-text-overline-weight);\n      letter-spacing: var(--vectis-text-overline-tracking);\n      color: var(--vectis-color-text-muted);\n    }\n\n    /* The checkbox cell carries no column name — there is none — so it gets no heading\n       and opens the card on its own line. */\n    .v-table-wrapper[data-responsive='stack'] td.v-table-select {\n      justify-content: flex-start;\n    }\n\n    .v-table-wrapper[data-responsive='stack'] td.v-table-select::before {\n      content: none;\n    }\n\n    /* In a narrow component the search field drops under the title and takes the whole\n       width. This applies to both responsive forms, the toolbar never being part of what\n       scrolls. */\n    .v-table-search {\n      flex: 1 1 100%;\n    }\n  }\n}\n</style>\n"],"mappings":""}