vectis-ui 0.1.0

package/dist/components/VMenu/VMenuSeparator.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/VMenu/VMenuSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VMenuSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The rule drawn between two blocks of commands in a menu. It is a VSeparator, whose\n * `<hr>` already means \"separator\" to assistive technology — which is allowed inside\n * a menu — and which nothing can focus, so the arrow keys skip it without a single\n * exclusion having to be written for it.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator class=\"v-menu-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-menu-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAWE,EAAuC,GAAA,EAA3B,OAAM,mBAAkB,CAAA"}

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

@@ -0,0 +1,33 @@
+import { InjectionKey } from 'vue';
+/**
+ * What the menu passes down to everything inside it. Choosing a command closes the
+ * WHOLE menu, however deep in a submenu it was, and closing the outermost panel is
+ * all it takes: the submenus are rendered inside it, and the browser closes a stack
+ * of popovers from the outside in.
+ */
+export interface MenuContext {
+    closeAll: () => void;
+}
+export declare const menuKey: InjectionKey<MenuContext>;
+/**
+ * How long the pointer must rest on an item before its submenu opens, and how long it
+ * must stay away before it closes, in milliseconds. The wait is what stops every
+ * panel crossed on the way elsewhere from flashing open.
+ */
+export declare const SUBMENU_HOVER_DELAY = 150;
+/**
+ * Finds the element that opens a given panel — which is both what the panel positions
+ * itself against and where the focus must return when it closes.
+ *
+ * It is found by searching the document rather than kept as a reference, because the
+ * outermost panel's trigger is rendered by the consumer, in a slot the panel has no
+ * access to.
+ */
+export declare function menuInvoker(id: string): HTMLElement | null;
+/** Where the menu itself may open, relative to its trigger. This is public API. */
+export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';
+/**
+ * The same list plus the sideways placement submenus use. It is internal: a submenu's
+ * position is not the consumer's to choose.
+ */
+export type MenuPanelPlacement = MenuPlacement | 'right-start';

package/dist/components/VMenu/context.js

@@ -0,0 +1,9 @@
+//#region src/components/VMenu/context.ts
+var e = Symbol("v-menu");
+function t(e) {
+	return document.querySelector(`[popovertarget="${e.replace(/["\\]/g, "\\$&")}"]`);
+}
+//#endregion
+export { t as menuInvoker, e as menuKey };
+
+//# sourceMappingURL=context.js.map

package/dist/components/VMenu/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VMenu/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\n/**\n * What the menu passes down to everything inside it. Choosing a command closes the\n * WHOLE menu, however deep in a submenu it was, and closing the outermost panel is\n * all it takes: the submenus are rendered inside it, and the browser closes a stack\n * of popovers from the outside in.\n */\nexport interface MenuContext {\n  closeAll: () => void\n}\n\nexport const menuKey: InjectionKey<MenuContext> = Symbol('v-menu')\n\n/**\n * How long the pointer must rest on an item before its submenu opens, and how long it\n * must stay away before it closes, in milliseconds. The wait is what stops every\n * panel crossed on the way elsewhere from flashing open.\n */\nexport const SUBMENU_HOVER_DELAY = 150\n\n// @a11y\n/**\n * Finds the element that opens a given panel — which is both what the panel positions\n * itself against and where the focus must return when it closes.\n *\n * It is found by searching the document rather than kept as a reference, because the\n * outermost panel's trigger is rendered by the consumer, in a slot the panel has no\n * access to.\n */\nexport function menuInvoker(id: string): HTMLElement | null {\n  // @fallback\n  /*\n   * The id is ESCAPED rather than cleaned up the way VTabs does it. There the id is\n   * one we BUILD, so awkward characters can simply be dropped; here it is the panel's\n   * real `id` attribute — a generated one, whose prefix the consumer can set through\n   * `app.config.idPrefix` — and rewriting it would leave the selector looking for an\n   * element that does not exist.\n   *\n   * Escaping the two characters able to close the quoted string is enough, and it is\n   * deliberately NOT done with `CSS.escape`: jsdom provides no `CSS` object at all, so\n   * that call would throw in every unit test.\n   */\n  return document.querySelector(`[popovertarget=\"${id.replace(/[\"\\\\]/g, '\\\\$&')}\"]`)\n}\n\n/** Where the menu itself may open, relative to its trigger. This is public API. */\nexport type MenuPlacement =\n  'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top'\n\n/**\n * The same list plus the sideways placement submenus use. It is internal: a submenu's\n * position is not the consumer's to choose.\n */\nexport type MenuPanelPlacement = MenuPlacement | 'right-start'\n"],"mappings":";AAYA,IAAa,IAAqC,OAAO,QAAQ;AAkBjE,SAAgB,EAAY,GAAgC;CAa1D,OAAO,SAAS,cAAc,mBAAmB,EAAG,QAAQ,UAAU,MAAM,EAAE,GAAG;AACnF"}

package/dist/components/VPagination/VPagination.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-pagination{display:flex}.v-pagination[data-responsive]{container:v-pagination/inline-size}.v-pagination[data-align=center]{justify-content:center}.v-pagination[data-align=end]{justify-content:flex-end}.v-pagination-items{align-items:center;gap:var(--vectis-space-1);display:inline-flex}.v-button-group.v-pagination-items{gap:0}.v-pagination-page[data-size]{min-inline-size:var(--control-height);padding-inline:var(--vectis-space-2);transition:none}.v-pagination-ellipsis{cursor:default}[dir=rtl] .v-pagination-control .v-icon{scale:-1 1}@container v-pagination (width<=36rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="3"]{display:none}}@container v-pagination (width<=31rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="2"],.v-pagination[data-responsive][data-controls-display=both] .v-pagination-control-label{display:none}}@container v-pagination (width<=25rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="1"]{display:none}}}

package/dist/components/VPagination/VPagination.d.ts

@@ -0,0 +1,103 @@
+import { IconSource } from '../VIcon/types.js';
+interface PaginationProps {
+    /** How many pages there are in all. */
+    length?: number;
+    /**
+     * How many slots to render, ellipses counted among them — so the row keeps exactly
+     * the same width whichever page is current. Below five there would be nothing left
+     * to show around the current page, so five is the effective minimum. Left out, every
+     * page is rendered.
+     */
+    totalVisible?: number;
+    /** Joins every button into one segmented control. */
+    attached?: boolean;
+    /**
+     * How the pages OTHER than the current one, and the controls, are drawn. The current
+     * page is always filled, whatever this says.
+     */
+    variant?: 'ghost' | 'outline';
+    /** The colour the current page takes. The other pages and the controls stay neutral. */
+    tone?: 'accent' | 'neutral' | 'danger';
+    /** The height of the buttons, from the scale shared by every control. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Takes 4px off the height of every button. */
+    compact?: boolean;
+    /**
+     * Where the row sits in the space it is given. It only matters in responsive mode,
+     * where the row takes the whole width available.
+     */
+    align?: 'start' | 'center' | 'end';
+    /** Shows the previous and next buttons on either side of the pages. */
+    showControls?: boolean;
+    /** Whether those controls show an icon, their label, or both. */
+    controlsDisplay?: 'icon' | 'text' | 'both';
+    /** The icon of the previous control: an icon name, or an explicit render. */
+    prevIcon?: IconSource;
+    /** The icon of the next control: an icon name, or an explicit render. */
+    nextIcon?: IconSource;
+    /**
+     * The wording of the previous control, used both as its visible text and as what
+     * screen readers announce. It falls back to the design system dictionary.
+     */
+    prevLabel?: string;
+    /**
+     * The wording of the next control, used both as its visible text and as what screen
+     * readers announce. It falls back to the design system dictionary.
+     */
+    nextLabel?: string;
+    /** Makes the whole component unusable. */
+    disabled?: boolean;
+    /**
+     * Which pages cannot be reached, as a list or as a function. The previous and next
+     * controls step OVER them rather than stopping at one.
+     */
+    disabledPages?: number[] | ((page: number) => boolean);
+    /**
+     * Lets the row shed pages as the space narrows, by asking about its own width. It is
+     * off by default, because it makes the row take the full width available.
+     */
+    responsive?: boolean;
+    /**
+     * What screen readers announce for the navigation itself. It falls back to the
+     * design system dictionary.
+     */
+    label?: string;
+    /**
+     * How a page is announced. A pill shows a bare number, which alone means nothing to
+     * a screen reader — this is what turns it into "Page 3". It falls back to the design
+     * system dictionary.
+     */
+    pageLabel?: (page: number) => string;
+}
+type __VLS_Props = PaginationProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    label: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    length: number;
+    variant: "ghost" | "outline";
+    tone: "accent" | "neutral" | "danger";
+    compact: boolean;
+    disabled: boolean;
+    totalVisible: number;
+    attached: boolean;
+    align: "start" | "center" | "end";
+    showControls: boolean;
+    controlsDisplay: "icon" | "text" | "both";
+    prevIcon: IconSource;
+    nextIcon: IconSource;
+    prevLabel: string;
+    nextLabel: string;
+    disabledPages: number[] | ((page: number) => boolean);
+    responsive: boolean;
+    pageLabel: (page: number) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VPagination/VPagination.js

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

package/dist/components/VPagination/VPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VPagination.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * The row of page numbers under a long list. Every pill is a VButton and the previous\n * and next controls are buttons too, so nothing about hovering, focusing or disabling\n * is written again here.\n *\n * A long list has more pages than fit on a line, and the row deals with that TWICE,\n * for two different reasons. First logically: `totalVisible` fixes how many slots are\n * rendered at all, and the pages that do not fit are replaced by an ellipsis — pure\n * arithmetic, identical on the server and in the browser. Then visually: as the space\n * actually available narrows, the neighbours of the current page are hidden one step\n * at a time, and that half is entirely CSS, the row asking about its own width rather\n * than being measured from code.\n *\n * The only behavioural JavaScript is the keyboard, explained where it is written.\n */\nimport { computed, ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\ninterface PaginationProps {\n  /** How many pages there are in all. */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them — so the row keeps exactly\n   * the same width whichever page is current. Below five there would be nothing left\n   * to show around the current page, so five is the effective minimum. Left out, every\n   * page is rendered.\n   */\n  totalVisible?: number\n\n  /** Joins every button into one segmented control. */\n  attached?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. The current\n   * page is always filled, whatever this says.\n   */\n  variant?: 'ghost' | 'outline'\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /**\n   * Where the row sits in the space it is given. It only matters in responsive mode,\n   * where the row takes the whole width available.\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /** Shows the previous and next buttons on either side of the pages. */\n  showControls?: boolean\n  /** Whether those controls show an icon, their label, or both. */\n  controlsDisplay?: 'icon' | 'text' | 'both'\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevLabel?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextLabel?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: number[] | ((page: number) => boolean)\n\n  /**\n   * Lets the row shed pages as the space narrows, by asking about its own width. It is\n   * off by default, because it makes the row take the full width available.\n   */\n  responsive?: boolean\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader — this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  attached: false,\n  variant: 'ghost',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  align: 'start',\n  showControls: true,\n  controlsDisplay: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevLabel: undefined,\n  nextLabel: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  responsive: false,\n  label: undefined,\n  pageLabel: undefined,\n})\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins — that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? m.value.pagination.previous)\nconst resolvedNextLabel = computed(() => props.nextLabel ?? m.value.pagination.next)\n\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem =\n  | { kind: 'page'; key: string; page: number; edge: boolean; distance: number }\n  | { kind: 'gap'; key: string }\n\nconst total = computed(() => Math.max(Math.trunc(props.length), 1))\nconst currentPage = computed(() => clamp(page.value, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y — a pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/**\n * Works out which slots the row holds.\n *\n * The count is CONSTANT: `totalVisible` counts everything rendered, the ellipses\n * included, so the row never changes width as one moves through the pages. The window\n * of pages around the current one is centred on it, and near either end it SHIFTS\n * rather than shrinking — which is what keeps that count constant there too.\n *\n * Each page also carries how far it is from the current one. That distance is what the\n * responsive hiding sorts by, and it is capped at three: past that, the most distant\n * neighbours all disappear together at the first step.\n */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({\n    kind: 'page',\n    key: `page-${n}`,\n    page: n,\n    edge: n === 1 || n === count,\n    distance: Math.min(Math.abs(n - current), 3),\n  })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. Below five slots there would be no room\n  // for the first page, an ellipsis, the current page, another ellipsis and the last,\n  // so that is the floor.\n  const visible =\n    props.totalVisible === undefined ? count : Math.max(Math.trunc(props.totalVisible), 5)\n  if (visible >= count) return pages(1, count)\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // Close to either end, an ellipsis on that side would stand for no missing page at\n  // all. The window is stretched to the bound instead, which both avoids that and\n  // keeps the number of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be\n * reached, disabled ones being stepped over rather than stopped at.\n *\n * Answering `undefined` means there is none left, which disables the control — and\n * that single answer also covers being on the first or the last page, with no separate\n * test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst prevDisabled = computed(() => props.disabled || prevTarget.value === undefined)\nconst nextDisabled = computed(() => props.disabled || nextTarget.value === undefined)\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * The arrow keys, through the shared implementation in `utils/arrowNav`. Tab is left\n * alone: every visible pill remains a stop in the tab order, as in any list of links.\n *\n * The pills the responsive rules have hidden are left out by the helper, which skips\n * anything not displayed — so they cannot be focused into.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, navigableItems(nav, '.v-pagination-page:not(:disabled)'))\n}\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-controls-display=\"controlsDisplay\"\n    :data-responsive=\"responsive ? '' : undefined\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- Joined, the row is a VButtonGroup, which merges the borders of its DIRECT\n         button children. That is why there is no list markup wrapping the pills, and\n         why the ellipsis is itself an inert button rather than a plain span: anything\n         else between two pills would break the seam. -->\n    <component :is=\"attached ? VButtonGroup : 'div'\" class=\"v-pagination-items\">\n      <template v-if=\"showControls\">\n        <VIconButton\n          v-if=\"controlsDisplay === 'icon'\"\n          class=\"v-pagination-control\"\n          :label=\"resolvedPrevLabel\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"prevDisabled\"\n          @click=\"goTo(prevTarget)\"\n        >\n          <VIcon v-bind=\"iconProps(prevIcon)\" />\n        </VIconButton>\n        <!-- The control is named explicitly even though its label is visible: at\n             narrow widths that label is hidden and only the icon remains, and the name\n             a screen reader announces has to survive that. -->\n        <VButton\n          v-else\n          class=\"v-pagination-control\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"prevDisabled\"\n          :aria-label=\"resolvedPrevLabel\"\n          @click=\"goTo(prevTarget)\"\n        >\n          <template v-if=\"controlsDisplay === 'both'\" #start>\n            <VIcon v-bind=\"iconProps(prevIcon)\" />\n          </template>\n          <span class=\"v-pagination-control-label\">{{ resolvedPrevLabel }}</span>\n        </VButton>\n      </template>\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? 'solid' : variant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :data-edge=\"item.edge ? '' : undefined\"\n          :data-distance=\"!item.edge && item.distance > 0 ? item.distance : undefined\"\n          @click=\"goTo(item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!-- The ellipsis is a disabled button rather than a span: being a button, it\n             keeps the joined row's seam continuous and follows the size and density\n             like everything else. Disabling it takes it out of the tab order, and it\n             is hidden from screen readers, which have the page numbers themselves. -->\n        <VIconButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          :label=\"m.pagination.hiddenPages\"\n          aria-hidden=\"true\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          disabled\n        >\n          <VIcon :name=\"moreHorizIcon\" />\n        </VIconButton>\n      </template>\n\n      <template v-if=\"showControls\">\n        <VIconButton\n          v-if=\"controlsDisplay === 'icon'\"\n          class=\"v-pagination-control\"\n          :label=\"resolvedNextLabel\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"nextDisabled\"\n          @click=\"goTo(nextTarget)\"\n        >\n          <VIcon v-bind=\"iconProps(nextIcon)\" />\n        </VIconButton>\n        <VButton\n          v-else\n          class=\"v-pagination-control\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"nextDisabled\"\n          :aria-label=\"resolvedNextLabel\"\n          @click=\"goTo(nextTarget)\"\n        >\n          <template v-if=\"controlsDisplay === 'both'\" #end>\n            <VIcon v-bind=\"iconProps(nextIcon)\" />\n          </template>\n          <span class=\"v-pagination-control-label\">{{ resolvedNextLabel }}</span>\n        </VButton>\n      </template>\n    </component>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  /*\n   * Making the row a query container is reserved for responsive mode, since every\n   * query below depends on it — and it is not free.\n   *\n   * A container of this kind computes its width WITHOUT looking at its content, so the\n   * row has to be block-level: as an inline box it would measure zero and hide\n   * everything at once. It therefore takes its parent's whole width, which is exactly\n   * what makes the hiding follow the space the component was actually given, and what\n   * obliges a flex parent to grant it one.\n   *\n   * Outside responsive mode the row keeps a width of its own and sits like any other\n   * content. Either way the alignment is asked for explicitly and never inferred.\n   */\n  .v-pagination[data-responsive] {\n    container-type: inline-size;\n    container-name: v-pagination;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  .v-pagination-items {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  /* Joined, the gap goes: VButtonGroup pulls the buttons onto one another itself. */\n  .v-button-group.v-pagination-items {\n    gap: 0;\n  }\n\n  /* Qualified by an attribute VButton always renders, which is what makes both of these\n     beat that button's own padding and its own transition whatever order the two sheets\n     end up in — the VIconButton idiom. */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The current page changes appearance instantly, and that is deliberate: VButton\n     * fades `background-color` and `color` over `--vectis-duration-fast`, which is right\n     * for a button that stays put, and wrong here. Truncation SHIFTS its window, so from\n     * one page to the next the highlight keeps its slot but changes ELEMENT — the pill\n     * that was current fades out while its neighbour fades in, over the very same\n     * 120 ms. Delete this line and two adjacent pills are half-tinted for a few frames,\n     * which reads as a flicker; nothing in the console says a word about it.\n     *\n     * No duration avoids that: a symmetric fade overlaps, and an asymmetric one either\n     * leaves the row with no highlight at all or lets the outgoing pill trail at full\n     * strength behind the new one. Keeping the fade for hover alone is not expressible\n     * either — a transition is resolved from the state being entered, and the pill\n     * losing the highlight enters \"neither current nor hovered\", the exact state of a\n     * pill the pointer has just left. So the hover fade goes with it, on the pills only:\n     * the previous and next controls never change active state and keep theirs.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. */\n  .v-pagination-ellipsis {\n    cursor: default;\n  }\n\n  /* A chevron points at a physical direction, which the logical properties do not\n     mirror: in a right-to-left page it has to be flipped by hand. */\n  [dir='rtl'] .v-pagination-control .v-icon {\n    scale: -1 1;\n  }\n\n  /*\n   * The responsive half of the truncation. The row asks about ITS OWN width, so the\n   * steps follow the space the component was given rather than the size of the window\n   * — a sidebar and a full-width page behave differently, as they should, and nothing\n   * has to be measured from code.\n   *\n   * The thresholds are written as literal lengths because a container query accepts no\n   * variables. They are calibrated on the default size: there, a pill and a control are\n   * each one control height wide, 2.5rem, plus a 0.25rem gutter, so 2.75rem apiece — a\n   * thirteen-slot row needs about 35.5rem, eleven about 30, nine about 24.5, hence the\n   * three thresholds with a little margin. For the extreme cases, the biggest size or\n   * five-digit page numbers, the way out is `totalVisible` or turning this off.\n   *\n   * Each threshold is the width NEEDED to show that level, and not what remains once\n   * something is hidden: written the other way round, the row would overflow for the\n   * whole interval before the next step took effect.\n   *\n   * The most distant neighbours go first. The first and last pages, and the current\n   * one, carry no distance at all, so no rule here can ever reach them. Hiding them\n   * outright also takes them out of the tab order and out of the accessibility tree,\n   * which is intended: a control nobody can see should not be reachable.\n   *\n   * No ellipsis is added in place of a hidden neighbour — it is exactly as wide as the\n   * pill it would replace, so it would free nothing.\n   */\n  @container v-pagination (max-width: 36rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='3'] {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-width: 31rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='2'] {\n      display: none;\n    }\n\n    /* A control showing both its icon and its label is about four times as wide as a\n       pill, so dropping its label frees more room than sacrificing another page —\n       which is why it happens before the last step. It is never done when the control\n       shows text alone: there would be nothing left to click. */\n    .v-pagination[data-responsive][data-controls-display='both'] .v-pagination-control-label {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-width: 25rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='1'] {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VPagination/VPagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,270 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VButton/VButton.js";
+import i from "../VIconButton/VIconButton.js";
+import a from "../VButton/VButtonGroup.js";
+import { chevron_left as o } from "../VIcon/icons/chevron_left.js";
+import { chevron_right as s } from "../VIcon/icons/chevron_right.js";
+import { more_horiz as c } from "../VIcon/icons/more_horiz.js";
+import { arrowNavigate as l, navigableItems as u } from "../../utils/arrowNav.js";
+import { clamp as d } from "../../utils/number.js";
+import { resolveMatcher as f } from "../../utils/matcher.js";
+import { useAriaLabel as p } from "../../composables/useAriaLabel.js";
+import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, guardReactiveProps as w, mergeModels as T, normalizeProps as E, openBlock as D, ref as O, renderList as k, resolveDynamicComponent as A, toDisplayString as j, unref as M, useModel as N, withCtx as P } from "vue";
+//#region src/components/VPagination/VPagination.vue?vue&type=script&setup=true&lang.ts
+var F = [
+	"aria-label",
+	"data-align",
+	"data-controls-display",
+	"data-responsive"
+], I = { class: "v-pagination-control-label" }, L = { class: "v-pagination-control-label" }, R = /*@__PURE__*/ C({
+	__name: "VPagination",
+	props: /*@__PURE__*/ T({
+		length: { default: 1 },
+		totalVisible: { default: void 0 },
+		attached: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: "ghost" },
+		tone: { default: "accent" },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		align: { default: "start" },
+		showControls: {
+			type: Boolean,
+			default: !0
+		},
+		controlsDisplay: { default: "icon" },
+		prevIcon: { default: () => o },
+		nextIcon: { default: () => s },
+		prevLabel: { default: void 0 },
+		nextLabel: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		disabledPages: {
+			type: [Array, Function],
+			default: void 0
+		},
+		responsive: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		pageLabel: {
+			type: Function,
+			default: void 0
+		}
+	}, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o) {
+		let s = o, C = e(), T = p(() => s.label ?? C.value.pagination.label), R = h(() => s.prevLabel ?? C.value.pagination.previous), z = h(() => s.nextLabel ?? C.value.pagination.next), B = N(o, "modelValue"), V = h(() => Math.max(Math.trunc(s.length), 1)), H = h(() => d(B.value, 1, V.value)), U = h(() => f(s.disabledPages));
+		function W(e) {
+			return s.pageLabel ? s.pageLabel(e) : C.value.pagination.page(e);
+		}
+		let G = h(() => {
+			let e = V.value, t = H.value, n = (n) => ({
+				kind: "page",
+				key: `page-${n}`,
+				page: n,
+				edge: n === 1 || n === e,
+				distance: Math.min(Math.abs(n - t), 3)
+			}), r = (e, t) => {
+				let r = [];
+				for (let i = e; i <= t; i++) r.push(n(i));
+				return r;
+			}, i = (e) => ({
+				kind: "gap",
+				key: `gap-${e}`
+			}), a = s.totalVisible === void 0 ? e : Math.max(Math.trunc(s.totalVisible), 5);
+			if (a >= e) return r(1, e);
+			let o = t - Math.floor((a - 5) / 2), c = o + (a - 5);
+			return o <= 3 ? [
+				...r(1, a - 2),
+				i("end"),
+				n(e)
+			] : c >= e - 2 ? [
+				n(1),
+				i("start"),
+				...r(e - a + 3, e)
+			] : [
+				n(1),
+				i("start"),
+				...r(o, c),
+				i("end"),
+				n(e)
+			];
+		});
+		function K(e) {
+			for (let t = H.value + e; t >= 1 && t <= V.value; t += e) if (!U.value(t)) return t;
+		}
+		let q = h(() => K(-1)), J = h(() => K(1)), Y = h(() => s.disabled || q.value === void 0), X = h(() => s.disabled || J.value === void 0);
+		function Z(e) {
+			e !== void 0 && (B.value = d(e, 1, V.value));
+		}
+		let Q = O(null);
+		function $(e) {
+			let t = Q.value;
+			t && l(e, t, u(t, ".v-pagination-page:not(:disabled)"));
+		}
+		return (e, s) => (D(), v("nav", {
+			ref_key: "navEl",
+			ref: Q,
+			class: "v-pagination",
+			"aria-label": M(T),
+			"data-align": o.align,
+			"data-controls-display": o.controlsDisplay,
+			"data-responsive": o.responsive ? "" : void 0,
+			onKeydown: $
+		}, [(D(), g(A(o.attached ? a : "div"), { class: "v-pagination-items" }, {
+			default: P(() => [
+				o.showControls ? (D(), v(m, { key: 0 }, [o.controlsDisplay === "icon" ? (D(), g(i, {
+					key: 0,
+					class: "v-pagination-control",
+					label: R.value,
+					variant: o.variant,
+					tone: "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: Y.value,
+					onClick: s[0] ||= (e) => Z(q.value)
+				}, {
+					default: P(() => [S(t, E(w(M(n)(o.prevIcon))), null, 16)]),
+					_: 1
+				}, 8, [
+					"label",
+					"variant",
+					"size",
+					"compact",
+					"disabled"
+				])) : (D(), g(r, {
+					key: 1,
+					class: "v-pagination-control",
+					variant: o.variant,
+					tone: "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: Y.value,
+					"aria-label": R.value,
+					onClick: s[1] ||= (e) => Z(q.value)
+				}, b({
+					default: P(() => [y("span", I, j(R.value), 1)]),
+					_: 2
+				}, [o.controlsDisplay === "both" ? {
+					name: "start",
+					fn: P(() => [S(t, E(w(M(n)(o.prevIcon))), null, 16)]),
+					key: "0"
+				} : void 0]), 1032, [
+					"variant",
+					"size",
+					"compact",
+					"disabled",
+					"aria-label"
+				]))], 64)) : _("", !0),
+				(D(!0), v(m, null, k(G.value, (e) => (D(), v(m, { key: e.key }, [e.kind === "page" ? (D(), g(r, {
+					key: 0,
+					class: "v-pagination-page",
+					variant: e.page === H.value ? "solid" : o.variant,
+					tone: e.page === H.value ? o.tone : "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: o.disabled || U.value(e.page),
+					"aria-label": W(e.page),
+					"aria-current": e.page === H.value ? "page" : void 0,
+					"data-edge": e.edge ? "" : void 0,
+					"data-distance": !e.edge && e.distance > 0 ? e.distance : void 0,
+					onClick: (t) => Z(e.page)
+				}, {
+					default: P(() => [x(j(e.page), 1)]),
+					_: 2
+				}, 1032, [
+					"variant",
+					"tone",
+					"size",
+					"compact",
+					"disabled",
+					"aria-label",
+					"aria-current",
+					"data-edge",
+					"data-distance",
+					"onClick"
+				])) : (D(), g(i, {
+					key: 1,
+					class: "v-pagination-ellipsis",
+					label: M(C).pagination.hiddenPages,
+					"aria-hidden": "true",
+					variant: o.variant,
+					tone: "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: ""
+				}, {
+					default: P(() => [S(t, { name: M(c) }, null, 8, ["name"])]),
+					_: 1
+				}, 8, [
+					"label",
+					"variant",
+					"size",
+					"compact"
+				]))], 64))), 128)),
+				o.showControls ? (D(), v(m, { key: 1 }, [o.controlsDisplay === "icon" ? (D(), g(i, {
+					key: 0,
+					class: "v-pagination-control",
+					label: z.value,
+					variant: o.variant,
+					tone: "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: X.value,
+					onClick: s[2] ||= (e) => Z(J.value)
+				}, {
+					default: P(() => [S(t, E(w(M(n)(o.nextIcon))), null, 16)]),
+					_: 1
+				}, 8, [
+					"label",
+					"variant",
+					"size",
+					"compact",
+					"disabled"
+				])) : (D(), g(r, {
+					key: 1,
+					class: "v-pagination-control",
+					variant: o.variant,
+					tone: "neutral",
+					size: o.size,
+					compact: o.compact,
+					disabled: X.value,
+					"aria-label": z.value,
+					onClick: s[3] ||= (e) => Z(J.value)
+				}, b({
+					default: P(() => [y("span", L, j(z.value), 1)]),
+					_: 2
+				}, [o.controlsDisplay === "both" ? {
+					name: "end",
+					fn: P(() => [S(t, E(w(M(n)(o.nextIcon))), null, 16)]),
+					key: "0"
+				} : void 0]), 1032, [
+					"variant",
+					"size",
+					"compact",
+					"disabled",
+					"aria-label"
+				]))], 64)) : _("", !0)
+			]),
+			_: 1
+		}))], 40, F));
+	}
+});
+//#endregion
+export { R as default };
+
+//# sourceMappingURL=VPagination.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VPagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * The row of page numbers under a long list. Every pill is a VButton and the previous\n * and next controls are buttons too, so nothing about hovering, focusing or disabling\n * is written again here.\n *\n * A long list has more pages than fit on a line, and the row deals with that TWICE,\n * for two different reasons. First logically: `totalVisible` fixes how many slots are\n * rendered at all, and the pages that do not fit are replaced by an ellipsis — pure\n * arithmetic, identical on the server and in the browser. Then visually: as the space\n * actually available narrows, the neighbours of the current page are hidden one step\n * at a time, and that half is entirely CSS, the row asking about its own width rather\n * than being measured from code.\n *\n * The only behavioural JavaScript is the keyboard, explained where it is written.\n */\nimport { computed, ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\ninterface PaginationProps {\n  /** How many pages there are in all. */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them — so the row keeps exactly\n   * the same width whichever page is current. Below five there would be nothing left\n   * to show around the current page, so five is the effective minimum. Left out, every\n   * page is rendered.\n   */\n  totalVisible?: number\n\n  /** Joins every button into one segmented control. */\n  attached?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. The current\n   * page is always filled, whatever this says.\n   */\n  variant?: 'ghost' | 'outline'\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /**\n   * Where the row sits in the space it is given. It only matters in responsive mode,\n   * where the row takes the whole width available.\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /** Shows the previous and next buttons on either side of the pages. */\n  showControls?: boolean\n  /** Whether those controls show an icon, their label, or both. */\n  controlsDisplay?: 'icon' | 'text' | 'both'\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevLabel?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextLabel?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: number[] | ((page: number) => boolean)\n\n  /**\n   * Lets the row shed pages as the space narrows, by asking about its own width. It is\n   * off by default, because it makes the row take the full width available.\n   */\n  responsive?: boolean\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader — this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  attached: false,\n  variant: 'ghost',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  align: 'start',\n  showControls: true,\n  controlsDisplay: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevLabel: undefined,\n  nextLabel: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  responsive: false,\n  label: undefined,\n  pageLabel: undefined,\n})\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins — that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? m.value.pagination.previous)\nconst resolvedNextLabel = computed(() => props.nextLabel ?? m.value.pagination.next)\n\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem =\n  | { kind: 'page'; key: string; page: number; edge: boolean; distance: number }\n  | { kind: 'gap'; key: string }\n\nconst total = computed(() => Math.max(Math.trunc(props.length), 1))\nconst currentPage = computed(() => clamp(page.value, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y — a pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/**\n * Works out which slots the row holds.\n *\n * The count is CONSTANT: `totalVisible` counts everything rendered, the ellipses\n * included, so the row never changes width as one moves through the pages. The window\n * of pages around the current one is centred on it, and near either end it SHIFTS\n * rather than shrinking — which is what keeps that count constant there too.\n *\n * Each page also carries how far it is from the current one. That distance is what the\n * responsive hiding sorts by, and it is capped at three: past that, the most distant\n * neighbours all disappear together at the first step.\n */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({\n    kind: 'page',\n    key: `page-${n}`,\n    page: n,\n    edge: n === 1 || n === count,\n    distance: Math.min(Math.abs(n - current), 3),\n  })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. Below five slots there would be no room\n  // for the first page, an ellipsis, the current page, another ellipsis and the last,\n  // so that is the floor.\n  const visible =\n    props.totalVisible === undefined ? count : Math.max(Math.trunc(props.totalVisible), 5)\n  if (visible >= count) return pages(1, count)\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // Close to either end, an ellipsis on that side would stand for no missing page at\n  // all. The window is stretched to the bound instead, which both avoids that and\n  // keeps the number of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be\n * reached, disabled ones being stepped over rather than stopped at.\n *\n * Answering `undefined` means there is none left, which disables the control — and\n * that single answer also covers being on the first or the last page, with no separate\n * test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst prevDisabled = computed(() => props.disabled || prevTarget.value === undefined)\nconst nextDisabled = computed(() => props.disabled || nextTarget.value === undefined)\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * The arrow keys, through the shared implementation in `utils/arrowNav`. Tab is left\n * alone: every visible pill remains a stop in the tab order, as in any list of links.\n *\n * The pills the responsive rules have hidden are left out by the helper, which skips\n * anything not displayed — so they cannot be focused into.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, navigableItems(nav, '.v-pagination-page:not(:disabled)'))\n}\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-controls-display=\"controlsDisplay\"\n    :data-responsive=\"responsive ? '' : undefined\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- Joined, the row is a VButtonGroup, which merges the borders of its DIRECT\n         button children. That is why there is no list markup wrapping the pills, and\n         why the ellipsis is itself an inert button rather than a plain span: anything\n         else between two pills would break the seam. -->\n    <component :is=\"attached ? VButtonGroup : 'div'\" class=\"v-pagination-items\">\n      <template v-if=\"showControls\">\n        <VIconButton\n          v-if=\"controlsDisplay === 'icon'\"\n          class=\"v-pagination-control\"\n          :label=\"resolvedPrevLabel\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"prevDisabled\"\n          @click=\"goTo(prevTarget)\"\n        >\n          <VIcon v-bind=\"iconProps(prevIcon)\" />\n        </VIconButton>\n        <!-- The control is named explicitly even though its label is visible: at\n             narrow widths that label is hidden and only the icon remains, and the name\n             a screen reader announces has to survive that. -->\n        <VButton\n          v-else\n          class=\"v-pagination-control\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"prevDisabled\"\n          :aria-label=\"resolvedPrevLabel\"\n          @click=\"goTo(prevTarget)\"\n        >\n          <template v-if=\"controlsDisplay === 'both'\" #start>\n            <VIcon v-bind=\"iconProps(prevIcon)\" />\n          </template>\n          <span class=\"v-pagination-control-label\">{{ resolvedPrevLabel }}</span>\n        </VButton>\n      </template>\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? 'solid' : variant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :data-edge=\"item.edge ? '' : undefined\"\n          :data-distance=\"!item.edge && item.distance > 0 ? item.distance : undefined\"\n          @click=\"goTo(item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!-- The ellipsis is a disabled button rather than a span: being a button, it\n             keeps the joined row's seam continuous and follows the size and density\n             like everything else. Disabling it takes it out of the tab order, and it\n             is hidden from screen readers, which have the page numbers themselves. -->\n        <VIconButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          :label=\"m.pagination.hiddenPages\"\n          aria-hidden=\"true\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          disabled\n        >\n          <VIcon :name=\"moreHorizIcon\" />\n        </VIconButton>\n      </template>\n\n      <template v-if=\"showControls\">\n        <VIconButton\n          v-if=\"controlsDisplay === 'icon'\"\n          class=\"v-pagination-control\"\n          :label=\"resolvedNextLabel\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"nextDisabled\"\n          @click=\"goTo(nextTarget)\"\n        >\n          <VIcon v-bind=\"iconProps(nextIcon)\" />\n        </VIconButton>\n        <VButton\n          v-else\n          class=\"v-pagination-control\"\n          :variant=\"variant\"\n          tone=\"neutral\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"nextDisabled\"\n          :aria-label=\"resolvedNextLabel\"\n          @click=\"goTo(nextTarget)\"\n        >\n          <template v-if=\"controlsDisplay === 'both'\" #end>\n            <VIcon v-bind=\"iconProps(nextIcon)\" />\n          </template>\n          <span class=\"v-pagination-control-label\">{{ resolvedNextLabel }}</span>\n        </VButton>\n      </template>\n    </component>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  /*\n   * Making the row a query container is reserved for responsive mode, since every\n   * query below depends on it — and it is not free.\n   *\n   * A container of this kind computes its width WITHOUT looking at its content, so the\n   * row has to be block-level: as an inline box it would measure zero and hide\n   * everything at once. It therefore takes its parent's whole width, which is exactly\n   * what makes the hiding follow the space the component was actually given, and what\n   * obliges a flex parent to grant it one.\n   *\n   * Outside responsive mode the row keeps a width of its own and sits like any other\n   * content. Either way the alignment is asked for explicitly and never inferred.\n   */\n  .v-pagination[data-responsive] {\n    container-type: inline-size;\n    container-name: v-pagination;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  .v-pagination-items {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  /* Joined, the gap goes: VButtonGroup pulls the buttons onto one another itself. */\n  .v-button-group.v-pagination-items {\n    gap: 0;\n  }\n\n  /* Qualified by an attribute VButton always renders, which is what makes both of these\n     beat that button's own padding and its own transition whatever order the two sheets\n     end up in — the VIconButton idiom. */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The current page changes appearance instantly, and that is deliberate: VButton\n     * fades `background-color` and `color` over `--vectis-duration-fast`, which is right\n     * for a button that stays put, and wrong here. Truncation SHIFTS its window, so from\n     * one page to the next the highlight keeps its slot but changes ELEMENT — the pill\n     * that was current fades out while its neighbour fades in, over the very same\n     * 120 ms. Delete this line and two adjacent pills are half-tinted for a few frames,\n     * which reads as a flicker; nothing in the console says a word about it.\n     *\n     * No duration avoids that: a symmetric fade overlaps, and an asymmetric one either\n     * leaves the row with no highlight at all or lets the outgoing pill trail at full\n     * strength behind the new one. Keeping the fade for hover alone is not expressible\n     * either — a transition is resolved from the state being entered, and the pill\n     * losing the highlight enters \"neither current nor hovered\", the exact state of a\n     * pill the pointer has just left. So the hover fade goes with it, on the pills only:\n     * the previous and next controls never change active state and keep theirs.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. */\n  .v-pagination-ellipsis {\n    cursor: default;\n  }\n\n  /* A chevron points at a physical direction, which the logical properties do not\n     mirror: in a right-to-left page it has to be flipped by hand. */\n  [dir='rtl'] .v-pagination-control .v-icon {\n    scale: -1 1;\n  }\n\n  /*\n   * The responsive half of the truncation. The row asks about ITS OWN width, so the\n   * steps follow the space the component was given rather than the size of the window\n   * — a sidebar and a full-width page behave differently, as they should, and nothing\n   * has to be measured from code.\n   *\n   * The thresholds are written as literal lengths because a container query accepts no\n   * variables. They are calibrated on the default size: there, a pill and a control are\n   * each one control height wide, 2.5rem, plus a 0.25rem gutter, so 2.75rem apiece — a\n   * thirteen-slot row needs about 35.5rem, eleven about 30, nine about 24.5, hence the\n   * three thresholds with a little margin. For the extreme cases, the biggest size or\n   * five-digit page numbers, the way out is `totalVisible` or turning this off.\n   *\n   * Each threshold is the width NEEDED to show that level, and not what remains once\n   * something is hidden: written the other way round, the row would overflow for the\n   * whole interval before the next step took effect.\n   *\n   * The most distant neighbours go first. The first and last pages, and the current\n   * one, carry no distance at all, so no rule here can ever reach them. Hiding them\n   * outright also takes them out of the tab order and out of the accessibility tree,\n   * which is intended: a control nobody can see should not be reachable.\n   *\n   * No ellipsis is added in place of a hidden neighbour — it is exactly as wide as the\n   * pill it would replace, so it would free nothing.\n   */\n  @container v-pagination (max-width: 36rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='3'] {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-width: 31rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='2'] {\n      display: none;\n    }\n\n    /* A control showing both its icon and its label is about four times as wide as a\n       pill, so dropping its label frees more room than sacrificing another page —\n       which is why it happens before the last step. It is never done when the control\n       shows text alone: there would be nothing left to click. */\n    .v-pagination[data-responsive][data-controls-display='both'] .v-pagination-control-label {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-width: 25rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='1'] {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgHA,IAAM,IAAQ,GAwBR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,WAAW,KAAK,GACtE,IAAoB,QAAe,EAAM,aAAa,EAAE,MAAM,WAAW,QAAQ,GACjF,IAAoB,QAAe,EAAM,aAAa,EAAE,MAAM,WAAW,IAAI,GAE7E,IAAO,EAAmB,GAAA,YAAe,GAOzC,IAAQ,QAAe,KAAK,IAAI,KAAK,MAAM,EAAM,MAAM,GAAG,CAAC,CAAC,GAC5D,IAAc,QAAe,EAAM,EAAK,OAAO,GAAG,EAAM,KAAK,CAAC,GAE9D,IAAiB,QAAe,EAAe,EAAM,aAAa,CAAC;EAIzE,SAAS,EAAa,GAAmB;GACvC,OAAO,EAAM,YAAY,EAAM,UAAU,CAAC,IAAI,EAAE,MAAM,WAAW,KAAK,CAAC;EACzE;EAcA,IAAM,IAAQ,QAAiC;GAC7C,IAAM,IAAQ,EAAM,OACd,IAAU,EAAY,OAEtB,KAAY,OAA+B;IAC/C,MAAM;IACN,KAAK,QAAQ;IACb,MAAM;IACN,MAAM,MAAM,KAAK,MAAM;IACvB,UAAU,KAAK,IAAI,KAAK,IAAI,IAAI,CAAO,GAAG,CAAC;GAC7C,IACM,KAAS,GAAc,MAAiC;IAC5D,IAAM,IAAwB,CAAC;IAC/B,KAAK,IAAI,IAAI,GAAM,KAAK,GAAI,KAAK,EAAI,KAAK,EAAS,CAAC,CAAC;IACrD,OAAO;GACT,GAMM,KAAO,OAA2C;IAAE,MAAM;IAAO,KAAK,OAAO;GAAO,IAKpF,IACJ,EAAM,iBAAiB,KAAA,IAAY,IAAQ,KAAK,IAAI,KAAK,MAAM,EAAM,YAAY,GAAG,CAAC;GACvF,IAAI,KAAW,GAAO,OAAO,EAAM,GAAG,CAAK;GAE3C,IAAM,IAAQ,IAAU,KAAK,OAAO,IAAU,KAAK,CAAC,GAC9C,IAAM,KAAS,IAAU;GAO/B,OAFI,KAAS,IAAU;IAAC,GAAG,EAAM,GAAG,IAAU,CAAC;IAAG,EAAI,KAAK;IAAG,EAAS,CAAK;GAAC,IACzE,KAAO,IAAQ,IAAU;IAAC,EAAS,CAAC;IAAG,EAAI,OAAO;IAAG,GAAG,EAAM,IAAQ,IAAU,GAAG,CAAK;GAAC,IACtF;IAAC,EAAS,CAAC;IAAG,EAAI,OAAO;IAAG,GAAG,EAAM,GAAO,CAAG;IAAG,EAAI,KAAK;IAAG,EAAS,CAAK;GAAC;EACtF,CAAC;EAUD,SAAS,EAAK,GAAuC;GACnD,KAAK,IAAI,IAAI,EAAY,QAAQ,GAAW,KAAK,KAAK,KAAK,EAAM,OAAO,KAAK,GAC3E,IAAI,CAAC,EAAe,MAAM,CAAC,GAAG,OAAO;EAGzC;EAEA,IAAM,IAAa,QAAe,EAAK,EAAE,CAAC,GACpC,IAAa,QAAe,EAAK,CAAC,CAAC,GACnC,IAAe,QAAe,EAAM,YAAY,EAAW,UAAU,KAAA,CAAS,GAC9E,IAAe,QAAe,EAAM,YAAY,EAAW,UAAU,KAAA,CAAS;EAEpF,SAAS,EAAK,GAAuB;GAC/B,MAAM,KAAA,MACV,EAAK,QAAQ,EAAM,GAAG,GAAG,EAAM,KAAK;EACtC;EAEA,IAAM,IAAQ,EAAwB,IAAI;EAU1C,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAM,EAAM;GACb,KACL,EAAc,GAAO,GAAK,EAAe,GAAK,mCAAmC,CAAC;EACpF;yBAIE,EAqHM,OAAA;YApHA;GAAJ,KAAI;GACJ,OAAM;GACL,cAAY,EAAA,CAAA;GACZ,cAAY,EAAA;GACZ,yBAAuB,EAAA;GACvB,mBAAiB,EAAA,aAAU,KAAQ,KAAA;GAC1B;YAMV,EAuGY,EAvGI,EAAA,WAAW,IAAY,KAAA,GAAA,EAAU,OAAM,qBAAoB,GAAA;oBAkC9D;IAjCK,EAAA,gBAAA,EAAA,GAAhB,EAiCW,GAAA,EAAA,KAAA,EAAA,GAAA,CA/BD,EAAA,oBAAe,UAAA,EAAA,GADvB,EAYc,GAAA;;KAVZ,OAAM;KACL,OAAO,EAAA;KACP,SAAS,EAAA;KACV,MAAK;KACJ,MAAM,EAAA;KACN,SAAS,EAAA;KACT,UAAU,EAAA;KACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,EAAA,KAAU;;sBAEe,CAAtC,EAAsC,GAAA,EAAA,EAAvB,EAAA,CAAA,CAAS,CAAC,EAAA,QAAQ,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA;;;;;;;;gBAKnC,EAeU,GAAA;;KAbR,OAAM;KACL,SAAS,EAAA;KACV,MAAK;KACJ,MAAM,EAAA;KACN,SAAS,EAAA;KACT,UAAU,EAAA;KACV,cAAY,EAAA;KACZ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,EAAA,KAAU;;sBAKgD,CAAvE,EAAuE,QAAvE,GAAuE,EAA3B,EAAA,KAAiB,GAAA,CAAA,CAAA,CAAA;;QAH7C,EAAA,oBAAe,SAAA;WAAc;iBACL,CAAtC,EAAsC,GAAA,EAAA,EAAvB,EAAA,CAAA,CAAS,CAAC,EAAA,QAAQ,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA;;;;;;;;;YAMvC,EAkCW,GAAA,MAAA,EAlCc,EAAA,QAAR,wBAAqB,EAAK,IAAA,GAAA,CAEjC,EAAK,SAAI,UAAA,EAAA,GADjB,EAeU,GAAA;;KAbR,OAAM;KACL,SAAS,EAAK,SAAS,EAAA,QAAW,UAAa,EAAA;KAC/C,MAAM,EAAK,SAAS,EAAA,QAAc,EAAA,OAAI;KACtC,MAAM,EAAA;KACN,SAAS,EAAA;KACT,UAAU,EAAA,YAAY,EAAA,MAAe,EAAK,IAAI;KAC9C,cAAY,EAAa,EAAK,IAAI;KAClC,gBAAc,EAAK,SAAS,EAAA,QAAW,SAAY,KAAA;KACnD,aAAW,EAAK,OAAI,KAAQ,KAAA;KAC5B,iBAAa,CAAG,EAAK,QAAQ,EAAK,WAAQ,IAAO,EAAK,WAAW,KAAA;KACjE,UAAK,MAAE,EAAK,EAAK,IAAI;;sBAEP,CAAA,EAAA,EAAZ,EAAK,IAAI,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;gBAMd,EAYc,GAAA;;KAVZ,OAAM;KACL,OAAO,EAAA,CAAA,CAAC,CAAC,WAAW;KACrB,eAAY;KACX,SAAS,EAAA;KACV,MAAK;KACJ,MAAM,EAAA;KACN,SAAS,EAAA;KACV,UAAA;;sBAE+B,CAA/B,EAA+B,GAAA,EAAvB,MAAM,EAAA,CAAA,EAAa,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;;;;;;IAIf,EAAA,gBAAA,EAAA,GAAhB,EA8BW,GAAA,EAAA,KAAA,EAAA,GAAA,CA5BD,EAAA,oBAAe,UAAA,EAAA,GADvB,EAYc,GAAA;;KAVZ,OAAM;KACL,OAAO,EAAA;KACP,SAAS,EAAA;KACV,MAAK;KACJ,MAAM,EAAA;KACN,SAAS,EAAA;KACT,UAAU,EAAA;KACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,EAAA,KAAU;;sBAEe,CAAtC,EAAsC,GAAA,EAAA,EAAvB,EAAA,CAAA,CAAS,CAAC,EAAA,QAAQ,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA;;;;;;;;gBAEnC,EAeU,GAAA;;KAbR,OAAM;KACL,SAAS,EAAA;KACV,MAAK;KACJ,MAAM,EAAA;KACN,SAAS,EAAA;KACT,UAAU,EAAA;KACV,cAAY,EAAA;KACZ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,EAAA,KAAU;;sBAKgD,CAAvE,EAAuE,QAAvE,GAAuE,EAA3B,EAAA,KAAiB,GAAA,CAAA,CAAA,CAAA;;QAH7C,EAAA,oBAAe,SAAA;WAAc;iBACL,CAAtC,EAAsC,GAAA,EAAA,EAAvB,EAAA,CAAA,CAAS,CAAC,EAAA,QAAQ,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA"}

package/dist/components/VPopover/VPopover.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-popover{display:contents}.v-popover[data-trigger]{anchor-name:--popover-anchor;anchor-scope:--popover-anchor;align-items:center;display:inline-flex}.v-popover-panel{position-anchor:var(--anchor-name,--popover-anchor)}}