@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/OtpInput/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.js","names":[],"sources":["../../../src/primitives/OtpInput/OtpInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * What a cell accepts, and what keyboard a phone raises for it. `numeric` is\n * digits only; `text` takes any character, for an alphanumeric backup code.\n */\nexport type OtpInputType = \"numeric\" | \"text\";\n\n/**\n * The one name this control publishes, and it replaces one Reka writes in\n * English of its own accord: `PinInputInput` labels every cell\n * `` `pin input ${index + 1} of ${length}` `` and exposes no prop for it.\n *\n * **One key, not \"Digit\" plus \"Character\" plus a joiner plus a position.** The\n * noun and the two numbers arrive together in one argument object, and the\n * variant — whether this row takes digits or any character — arrives with\n * them, because which word a language uses for a cell and where the position\n * sits relative to it are one decision rather than two. Four fragment keys\n * Loom then joined would be a sentence no translator could reorder.\n *\n * `index` is 1-based: it is a position a person is being read, not an offset\n * into an array, and handing over the 0-based one would make every override\n * write `index + 1` before it could say anything.\n */\nexport interface OtpInputLabels {\n  /** One cell, named for what it takes and where it sits in the row. */\n  readonly cell: LabelOf<{ index: number; length: number; type: OtpInputType }>;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const OTP_INPUT_LABELS: OtpInputLabels = {\n  cell: ({ index, length, type }) =>\n    `${type === \"numeric\" ? \"Digit\" : \"Character\"} ${String(index)} of ${String(length)}`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { PinInputInput, PinInputRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * OtpInput — the row of single-character cells a one-time code or a short PIN\n * is typed into. Reach for it when the value really is a fixed-length code\n * that arrives out of band: the cells are what let `autocomplete=\"one-time-code\"`\n * offer the code the phone has just received, and `inputmode=\"numeric\"` is what\n * raises the digit keypad rather than the alphabet. Both are the reason this\n * exists at all rather than a TextField with a `maxlength` — and both are also\n * why anything a reader would want to read back, correct in the middle, or\n * paste in parts belongs in a TextField instead.\n *\n * Built on Reka UI's PinInput, which supplies the per-cell behaviour: typing\n * advances to the next cell, arrow keys move between them, Backspace on an\n * empty cell steps back and clears the one before it, and a pasted code is\n * distributed across the whole row rather than crammed into one cell.\n *\n * Two things are decided here that Reka leaves open.\n *\n * **The value is a scalar `string`.** Reka models it as an array of cells;\n * this exposes `\"1234\"`, exactly as Slider exposes a scalar where Reka models\n * an array — a code is what a host posts to an API and compares against, and\n * neither of those wants a six-element array. In numeric mode Reka's array is\n * even an array of *numbers*, which loses a leading zero the moment anyone\n * treats it as one value. The consequence is in `onUpdate`.\n *\n * **The row is one control, not `length` of them.** Reka names each cell and\n * leaves each one tabbable, which is how this control usually fails: six\n * inputs each announcing themselves in full, and six Tab presses to step over\n * a field a sighted user reads as one. The name of the thing being typed is\n * moved onto a labelled `role=\"group\"` so it is announced once on entering the\n * row, each cell is left with its position alone, and a roving tabindex makes\n * the row a single Tab stop.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`, and this control is the one where the resolved values\n * do not all land on the same node. The id of the row's hint or error line\n * describes the whole code and goes on the group; `required` and `invalid` are\n * states of the boxes being typed into and go on the cells, where the roles\n * that support them are — `role=\"group\"` supports neither. The row's id and\n * the name the code is submitted under both go to Reka's hidden input: `id` is\n * a declared prop of its root rather than a fallthrough attr, and that input is\n * the better target anyway, since `<label for>` associates only with a\n * labelable element and hands focus to the first cell from there.\n *\n * What a Field still cannot do here is *name* the row: its `<label>` reaches\n * the hidden input, which is `aria-hidden`, so no accessible name is computed\n * from it. Give the name with `ariaLabel` or `ariaLabelledby` as you would\n * outside a row.\n *\n * A row's `readonly` is deliberately ignored. There is nothing to read in an\n * uneditable code box that a line of text would not show better, and the cells\n * exist to be typed into. So the library's three resting appearances collapse\n * to two here: a cell goes straight from `background` to the disabled row's\n * drained fill, muted character and slackened rim, and the lifted `subtle` fill\n * that marks a value on show never appears on this control.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The code entered so far. Shorter than `length` while it is incomplete. */\n    modelValue?: string;\n    /** How many cells the code is typed into. */\n    length?: number;\n    /** What a cell accepts: digits only, or any character. */\n    type?: OtpInputType;\n    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */\n    mask?: boolean;\n    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** The accessible name of the whole row, when no visible element already labels it. */\n    ariaLabel?: string;\n    /** The id of the visible element that labels the row — a heading, or a field's own label. */\n    ariaLabelledby?: string;\n    /**\n     * The name each cell gives itself, as any subset of `OtpInputLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and\n     * then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is a row whose cells are neither\n     * digits nor characters in the reader's terms — the groups of a licence\n     * key, say — where the noun has to say so however well the application is\n     * translated.\n     */\n    labels?: LabelOverrides<OtpInputLabels>;\n  }>(),\n  {\n    length: 6,\n    type: \"numeric\",\n    mask: false,\n    // Not `false`, for either. `false` is a caller saying \"this row is fine /\n    // enabled even though the field around it is not\"; absent is a caller\n    // saying nothing, and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries\n    // the full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The code so far, as one string. Fires on every cell that fills or clears. */\n  \"update:modelValue\": [value: string];\n  /** The finished code. Fires once, as the last empty cell takes its character. */\n  complete: [value: string];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"otpInput\", OTP_INPUT_LABELS, () => props.labels);\n\n// Every fallthrough attribute lands on the group: an `aria-describedby`\n// pointing at an error line, a `data-testid`, an `id` — each describes the\n// control as a whole, and copying one onto `length` inputs would have a screen\n// reader repeat it on every cell. `class` is pulled out of that spread only so\n// it can go through `cn()`, which is what lets a caller's utility beat the\n// row's own instead of losing to whichever Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name`,\n// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: props.ariaLabelledby,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Three of the resolved keys do not travel with the bag, because the bag lands\n// on the group and the group is the wrong node for all three.\n//\n// `name` would be a `name` on a `<div>`, which no form reads; Reka's own\n// hidden input carries the joined code, so the row's name is given to the root\n// as a prop instead.\n//\n// `aria-required` and `aria-invalid` are states of the boxes a reader types\n// into, and `role=\"group\"` supports neither — `aria-invalid` is a global so it\n// would at least be legal there, `aria-required` is not and would fail\n// `aria-allowed-attr`. Both are bound per cell below, off the same resolved\n// values, so the row's error reaches the element a screen reader is actually\n// sitting on.\n//\n// `id` stays in the bag and still does not land here: it is a declared prop of\n// Reka's root, so it is taken as a prop rather than falling through, and Reka\n// puts it on that same hidden input — which is the labelable node a\n// `<label for>` needs, and the one that hands focus to the first cell.\nconst groupFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this group without anyone remembering to come\n  // back here.\n  const group: Record<string, unknown> = { ...field.attrs };\n  delete group.name;\n  delete group[\"aria-required\"];\n  delete group[\"aria-invalid\"];\n  return group;\n});\n\n// The single source of truth for the code we know about: seeded from the prop,\n// then advanced on every update Reka reports. Feeding this back into Reka\n// rather than `props.modelValue` is what keeps the row usable for a host that\n// binds no `modelValue` at all — the same buffer Slider keeps, for the same\n// reason. An absent prop leaves it empty rather than sticking the row on one\n// value, so nothing here needs `optional()`.\nconst code = ref(props.modelValue ?? \"\");\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value !== undefined) code.value = value;\n  },\n);\n\n// Longer than the row is the host's mistake to make, not ours to render: the\n// extra characters have no cell to live in.\nconst cells = computed(() => code.value.slice(0, props.length).split(\"\"));\n\n// Reka calls the digits-only mode \"number\". The prop says \"numeric\" because\n// nothing about the value is a number — a code with a leading zero is a\n// string, and this control never parses one.\nconst pinType = computed(() => (props.type === \"numeric\" ? \"number\" : \"text\"));\n\n// The row is one Tab stop. The stop is the first empty cell, which is also\n// where Reka's own `otp` handling redirects focus, or the last cell once the\n// code is full — so Tab lands where the next character goes.\nconst tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));\n\n// Typed wider than the declared emit on purpose: in numeric mode the array\n// really does come back holding numbers, and a cleared middle cell comes back\n// as a hole. Both are why a scalar is the exposed shape.\nfunction onUpdate(next: (string | number)[]) {\n  // `join` is where the scalar is decided, and it closes gaps: Reka can hold a\n  // cleared middle cell as a hole, a string cannot, so the cells after it\n  // shift left. That is the only reading that keeps the model and the row\n  // agreeing on one value — and it is what a single text input does when a\n  // character in the middle is deleted.\n  const value = next.join(\"\");\n  // Reka reports the whole row on every write, including a write that changed\n  // nothing a string can see — pasting the same code over itself is the\n  // reachable one. Stopping here keeps one changed code to one emitted value,\n  // and one filled code to one `complete`.\n  if (value === code.value) return;\n  code.value = value;\n  emit(\"update:modelValue\", value);\n  // Derived here rather than forwarded from Reka's own `complete`, which fires\n  // from a deep watcher on its model — and that model is set twice for one\n  // keystroke once the row is controlled, once by Reka and once by the value\n  // coming back around. Forwarding it would announce one filled code twice.\n  if (value.length === props.length) emit(\"complete\", value);\n}\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"{ ...groupAttrs, ...groupFieldAttrs, ...optional({ name: field.name }) }\"\n    :model-value=\"cells\"\n    :type=\"pinType\"\n    :mask=\"mask\"\n    :disabled=\"field.disabled\"\n    otp\n    role=\"group\"\n    :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby || (!ariaLabel ? field.labelledBy : undefined)\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"cn('inline-flex items-center gap-2', attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <!-- The `:aria-label` replaces the one Reka writes inside its own render\n         function — \"pin input 3 of 6\", the field's whole purpose restated once\n         per cell. It reaches the DOM node as a fallthrough attribute, which Vue\n         merges last, so it is a replacement rather than a second name. Removing\n         it does not fall back to nothing; it falls back to Reka's English. The\n         group carries the purpose, and a cell carries only where it sits. -->\n    <PinInputInput\n      v-for=\"cell in length\"\n      :key=\"cell\"\n      :index=\"cell - 1\"\n      :tabindex=\"cell - 1 === tabStopIndex ? 0 : -1\"\n      :aria-label=\"text.cell({ index: cell, length, type })\"\n      :aria-required=\"field.required || undefined\"\n      :aria-invalid=\"field.invalid || undefined\"\n      :data-filled=\"cell <= code.length || undefined\"\n      :class=\"\n        cn(\n          // Square, on the control scale's tallest step: a code cell is a\n          // touch target before it is a form row, and 44px is the size a thumb\n          // is aimed at. `tabular` keeps the six glyphs on one width so the\n          // row does not breathe as it fills.\n          'tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground',\n          'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n          // Rim-lit at rest; the ring blooms on the cell being typed into.\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          !field.invalid && 'focus-visible:shadow-halo',\n          // A filled cell is legible as filled from its character — or its\n          // mask dot — alone. The heavier border is a second, redundant cue,\n          // and a weight rather than a hue, so it survives both a colour\n          // deficiency and forced-colors.\n          //\n          // Withheld from an unavailable row, and only because the border is\n          // also the third channel of the disabled state below: two rules\n          // moving the same rim in opposite directions would leave a\n          // half-filled disabled row with a heavier edge than an empty one,\n          // which reads as the more available of the two. The cue is redundant\n          // by construction, so the state wins it.\n          !field.disabled && 'data-[filled]:border-border-strong',\n          // Unavailable is a *colour* and a *weight*, never an opacity. A cell\n          // holds one character — or one mask dot — and that is the entire\n          // content of the control, so `opacity-50` here did not dim a code so\n          // much as erase it: `--color-foreground` measures 14.09:1 on the\n          // resting fill and 2.99:1 once composited at half alpha. The drained\n          // fill carries the state instead, the character stays at a measured\n          // 4.68:1, and the rim slackens from `input` to `border` so the state\n          // is not told in hue alone.\n          //\n          // The fill and the text colour are `disabled:` variants rather than\n          // plain classes, so each outranks the resting `bg-background\n          // text-foreground` above on specificity rather than on where Tailwind\n          // happened to emit it. The border cannot join them: a `disabled:`\n          // variant would outrank the plain `border-destructive` below, and a\n          // row that is both in error and unavailable has to keep saying so.\n          'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n        )\n      \"\n    />\n  </PinInputRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/OtpInput/OtpInput.vue.d.ts

@@ -0,0 +1,110 @@
+import { type LabelOverrides } from "../../lib/labels";
+import type { LabelOf } from "../../lib/labels";
+/**
+ * What a cell accepts, and what keyboard a phone raises for it. `numeric` is
+ * digits only; `text` takes any character, for an alphanumeric backup code.
+ */
+export type OtpInputType = "numeric" | "text";
+/**
+ * The one name this control publishes, and it replaces one Reka writes in
+ * English of its own accord: `PinInputInput` labels every cell
+ * `` `pin input ${index + 1} of ${length}` `` and exposes no prop for it.
+ *
+ * **One key, not "Digit" plus "Character" plus a joiner plus a position.** The
+ * noun and the two numbers arrive together in one argument object, and the
+ * variant — whether this row takes digits or any character — arrives with
+ * them, because which word a language uses for a cell and where the position
+ * sits relative to it are one decision rather than two. Four fragment keys
+ * Loom then joined would be a sentence no translator could reorder.
+ *
+ * `index` is 1-based: it is a position a person is being read, not an offset
+ * into an array, and handing over the 0-based one would make every override
+ * write `index + 1` before it could say anything.
+ */
+export interface OtpInputLabels {
+    /** One cell, named for what it takes and where it sits in the row. */
+    readonly cell: LabelOf<{
+        index: number;
+        length: number;
+        type: OtpInputType;
+    }>;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const OTP_INPUT_LABELS: OtpInputLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The code entered so far. Shorter than `length` while it is incomplete. */
+    modelValue?: string;
+    /** How many cells the code is typed into. */
+    length?: number;
+    /** What a cell accepts: digits only, or any character. */
+    type?: OtpInputType;
+    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */
+    mask?: boolean;
+    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** The accessible name of the whole row, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the row — a heading, or a field's own label. */
+    ariaLabelledby?: string;
+    /**
+     * The name each cell gives itself, as any subset of `OtpInputLabels` — the
+     * rest stay as the host's `provideLoomLabels` vocabulary left them, and
+     * then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is a row whose cells are neither
+     * digits nor characters in the reader's terms — the groups of a licence
+     * key, say — where the noun has to say so however well the application is
+     * translated.
+     */
+    labels?: LabelOverrides<OtpInputLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The code entered so far. Shorter than `length` while it is incomplete. */
+    modelValue?: string;
+    /** How many cells the code is typed into. */
+    length?: number;
+    /** What a cell accepts: digits only, or any character. */
+    type?: OtpInputType;
+    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */
+    mask?: boolean;
+    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** The accessible name of the whole row, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the row — a heading, or a field's own label. */
+    ariaLabelledby?: string;
+    /**
+     * The name each cell gives itself, as any subset of `OtpInputLabels` — the
+     * rest stay as the host's `provideLoomLabels` vocabulary left them, and
+     * then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is a row whose cells are neither
+     * digits nor characters in the reader's terms — the groups of a licence
+     * key, say — where the noun has to say so however well the application is
+     * translated.
+     */
+    labels?: LabelOverrides<OtpInputLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+    onComplete?: (value: string) => any;
+}>, {
+    length: number;
+    disabled: boolean | undefined;
+    mask: boolean;
+    invalid: boolean | undefined;
+    type: OtpInputType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=OtpInput.vue.d.ts.map

package/dist/primitives/OtpInput/OtpInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/OtpInput/OtpInput.vue"],"names":[],"mappings":"AA+VA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;CAC/E;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAG9B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAyDd,6EAA6E;iBAChE,MAAM;IACnB,6CAA6C;aACpC,MAAM;IACf,0DAA0D;WACnD,YAAY;IACnB,8FAA8F;WACvF,OAAO;IACd,0FAA0F;eAC/E,OAAO,GAAG,SAAS;IAC9B,8IAA8I;cACpI,OAAO,GAAG,SAAS;IAC7B,uFAAuF;gBAC3E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;;;OAUG;aACM,cAAc,CAAC,cAAc,CAAC;;;;;IA3BvC,6EAA6E;iBAChE,MAAM;IACnB,6CAA6C;aACpC,MAAM;IACf,0DAA0D;WACnD,YAAY;IACnB,8FAA8F;WACvF,OAAO;IACd,0FAA0F;eAC/E,OAAO,GAAG,SAAS;IAC9B,8IAA8I;cACpI,OAAO,GAAG,SAAS;IAC7B,uFAAuF;gBAC3E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;;;OAUG;aACM,cAAc,CAAC,cAAc,CAAC;;;;;YAxB9B,MAAM;cAMJ,OAAO,GAAG,SAAS;UAFvB,OAAO;aAIJ,OAAO,GAAG,SAAS;UANtB,YAAY;6EA8WnB,CAAC"}

package/dist/primitives/OtpInput/OtpInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,130 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { useLabels } from "../../lib/labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { useFieldControl } from "../../lib/field-context.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, unref, watch, withCtx } from "vue";
+import { PinInputInput, PinInputRoot } from "reka-ui";
+//#region src/primitives/OtpInput/OtpInput.vue?vue&type=script&setup=true&lang.ts
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var OTP_INPUT_LABELS = { cell: ({ index, length, type }) => `${type === "numeric" ? "Digit" : "Character"} ${String(index)} of ${String(length)}` };
+var OtpInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "OtpInput",
+	props: {
+		modelValue: {},
+		length: { default: 6 },
+		type: { default: "numeric" },
+		mask: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		labels: {}
+	},
+	emits: ["update:modelValue", "complete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("otpInput", OTP_INPUT_LABELS, () => props.labels);
+		const { attrs, rest: groupAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			ariaLabelledby: props.ariaLabelledby,
+			disabled: props.disabled,
+			invalid: props.invalid
+		}));
+		const groupFieldAttrs = computed(() => {
+			const group = { ...field.attrs };
+			delete group.name;
+			delete group["aria-required"];
+			delete group["aria-invalid"];
+			return group;
+		});
+		const code = ref(props.modelValue ?? "");
+		watch(() => props.modelValue, (value) => {
+			if (value !== void 0) code.value = value;
+		});
+		const cells = computed(() => code.value.slice(0, props.length).split(""));
+		const pinType = computed(() => props.type === "numeric" ? "number" : "text");
+		const tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));
+		function onUpdate(next) {
+			const value = next.join("");
+			if (value === code.value) return;
+			code.value = value;
+			emit("update:modelValue", value);
+			if (value.length === props.length) emit("complete", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PinInputRoot), mergeProps({
+				...unref(groupAttrs),
+				...groupFieldAttrs.value,
+				...unref(optional)({ name: unref(field).name })
+			}, {
+				"model-value": cells.value,
+				type: pinType.value,
+				mask: __props.mask,
+				disabled: unref(field).disabled,
+				otp: "",
+				role: "group",
+				"aria-label": __props.ariaLabelledby ? void 0 : __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby || (!__props.ariaLabel ? unref(field).labelledBy : void 0),
+				"data-invalid": unref(field).invalid || void 0,
+				class: unref(cn)("inline-flex items-center gap-2", unref(attrs).class),
+				"onUpdate:modelValue": onUpdate
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (cell) => {
+					return openBlock(), createBlock(unref(PinInputInput), {
+						key: cell,
+						index: cell - 1,
+						tabindex: cell - 1 === tabStopIndex.value ? 0 : -1,
+						"aria-label": unref(text).cell({
+							index: cell,
+							length: __props.length,
+							type: __props.type
+						}),
+						"aria-required": unref(field).required || void 0,
+						"aria-invalid": unref(field).invalid || void 0,
+						"data-filled": cell <= code.value.length || void 0,
+						class: normalizeClass(unref(cn)("tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-fast ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", !unref(field).invalid && "focus-visible:shadow-halo", !unref(field).disabled && "data-[filled]:border-border-strong", "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", unref(field).disabled && "border-border", unref(field).invalid && "border-destructive focus-visible:outline-destructive"))
+					}, null, 8, [
+						"index",
+						"tabindex",
+						"aria-label",
+						"aria-required",
+						"aria-invalid",
+						"data-filled",
+						"class"
+					]);
+				}), 128))]),
+				_: 1
+			}, 16, [
+				"model-value",
+				"type",
+				"mask",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"data-invalid",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { OTP_INPUT_LABELS, OtpInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=OtpInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/OtpInput/OtpInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/OtpInput/OtpInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * What a cell accepts, and what keyboard a phone raises for it. `numeric` is\n * digits only; `text` takes any character, for an alphanumeric backup code.\n */\nexport type OtpInputType = \"numeric\" | \"text\";\n\n/**\n * The one name this control publishes, and it replaces one Reka writes in\n * English of its own accord: `PinInputInput` labels every cell\n * `` `pin input ${index + 1} of ${length}` `` and exposes no prop for it.\n *\n * **One key, not \"Digit\" plus \"Character\" plus a joiner plus a position.** The\n * noun and the two numbers arrive together in one argument object, and the\n * variant — whether this row takes digits or any character — arrives with\n * them, because which word a language uses for a cell and where the position\n * sits relative to it are one decision rather than two. Four fragment keys\n * Loom then joined would be a sentence no translator could reorder.\n *\n * `index` is 1-based: it is a position a person is being read, not an offset\n * into an array, and handing over the 0-based one would make every override\n * write `index + 1` before it could say anything.\n */\nexport interface OtpInputLabels {\n  /** One cell, named for what it takes and where it sits in the row. */\n  readonly cell: LabelOf<{ index: number; length: number; type: OtpInputType }>;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const OTP_INPUT_LABELS: OtpInputLabels = {\n  cell: ({ index, length, type }) =>\n    `${type === \"numeric\" ? \"Digit\" : \"Character\"} ${String(index)} of ${String(length)}`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { PinInputInput, PinInputRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * OtpInput — the row of single-character cells a one-time code or a short PIN\n * is typed into. Reach for it when the value really is a fixed-length code\n * that arrives out of band: the cells are what let `autocomplete=\"one-time-code\"`\n * offer the code the phone has just received, and `inputmode=\"numeric\"` is what\n * raises the digit keypad rather than the alphabet. Both are the reason this\n * exists at all rather than a TextField with a `maxlength` — and both are also\n * why anything a reader would want to read back, correct in the middle, or\n * paste in parts belongs in a TextField instead.\n *\n * Built on Reka UI's PinInput, which supplies the per-cell behaviour: typing\n * advances to the next cell, arrow keys move between them, Backspace on an\n * empty cell steps back and clears the one before it, and a pasted code is\n * distributed across the whole row rather than crammed into one cell.\n *\n * Two things are decided here that Reka leaves open.\n *\n * **The value is a scalar `string`.** Reka models it as an array of cells;\n * this exposes `\"1234\"`, exactly as Slider exposes a scalar where Reka models\n * an array — a code is what a host posts to an API and compares against, and\n * neither of those wants a six-element array. In numeric mode Reka's array is\n * even an array of *numbers*, which loses a leading zero the moment anyone\n * treats it as one value. The consequence is in `onUpdate`.\n *\n * **The row is one control, not `length` of them.** Reka names each cell and\n * leaves each one tabbable, which is how this control usually fails: six\n * inputs each announcing themselves in full, and six Tab presses to step over\n * a field a sighted user reads as one. The name of the thing being typed is\n * moved onto a labelled `role=\"group\"` so it is announced once on entering the\n * row, each cell is left with its position alone, and a roving tabindex makes\n * the row a single Tab stop.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`, and this control is the one where the resolved values\n * do not all land on the same node. The id of the row's hint or error line\n * describes the whole code and goes on the group; `required` and `invalid` are\n * states of the boxes being typed into and go on the cells, where the roles\n * that support them are — `role=\"group\"` supports neither. The row's id and\n * the name the code is submitted under both go to Reka's hidden input: `id` is\n * a declared prop of its root rather than a fallthrough attr, and that input is\n * the better target anyway, since `<label for>` associates only with a\n * labelable element and hands focus to the first cell from there.\n *\n * What a Field still cannot do here is *name* the row: its `<label>` reaches\n * the hidden input, which is `aria-hidden`, so no accessible name is computed\n * from it. Give the name with `ariaLabel` or `ariaLabelledby` as you would\n * outside a row.\n *\n * A row's `readonly` is deliberately ignored. There is nothing to read in an\n * uneditable code box that a line of text would not show better, and the cells\n * exist to be typed into. So the library's three resting appearances collapse\n * to two here: a cell goes straight from `background` to the disabled row's\n * drained fill, muted character and slackened rim, and the lifted `subtle` fill\n * that marks a value on show never appears on this control.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The code entered so far. Shorter than `length` while it is incomplete. */\n    modelValue?: string;\n    /** How many cells the code is typed into. */\n    length?: number;\n    /** What a cell accepts: digits only, or any character. */\n    type?: OtpInputType;\n    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */\n    mask?: boolean;\n    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** The accessible name of the whole row, when no visible element already labels it. */\n    ariaLabel?: string;\n    /** The id of the visible element that labels the row — a heading, or a field's own label. */\n    ariaLabelledby?: string;\n    /**\n     * The name each cell gives itself, as any subset of `OtpInputLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and\n     * then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is a row whose cells are neither\n     * digits nor characters in the reader's terms — the groups of a licence\n     * key, say — where the noun has to say so however well the application is\n     * translated.\n     */\n    labels?: LabelOverrides<OtpInputLabels>;\n  }>(),\n  {\n    length: 6,\n    type: \"numeric\",\n    mask: false,\n    // Not `false`, for either. `false` is a caller saying \"this row is fine /\n    // enabled even though the field around it is not\"; absent is a caller\n    // saying nothing, and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries\n    // the full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The code so far, as one string. Fires on every cell that fills or clears. */\n  \"update:modelValue\": [value: string];\n  /** The finished code. Fires once, as the last empty cell takes its character. */\n  complete: [value: string];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"otpInput\", OTP_INPUT_LABELS, () => props.labels);\n\n// Every fallthrough attribute lands on the group: an `aria-describedby`\n// pointing at an error line, a `data-testid`, an `id` — each describes the\n// control as a whole, and copying one onto `length` inputs would have a screen\n// reader repeat it on every cell. `class` is pulled out of that spread only so\n// it can go through `cn()`, which is what lets a caller's utility beat the\n// row's own instead of losing to whichever Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name`,\n// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: props.ariaLabelledby,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Three of the resolved keys do not travel with the bag, because the bag lands\n// on the group and the group is the wrong node for all three.\n//\n// `name` would be a `name` on a `<div>`, which no form reads; Reka's own\n// hidden input carries the joined code, so the row's name is given to the root\n// as a prop instead.\n//\n// `aria-required` and `aria-invalid` are states of the boxes a reader types\n// into, and `role=\"group\"` supports neither — `aria-invalid` is a global so it\n// would at least be legal there, `aria-required` is not and would fail\n// `aria-allowed-attr`. Both are bound per cell below, off the same resolved\n// values, so the row's error reaches the element a screen reader is actually\n// sitting on.\n//\n// `id` stays in the bag and still does not land here: it is a declared prop of\n// Reka's root, so it is taken as a prop rather than falling through, and Reka\n// puts it on that same hidden input — which is the labelable node a\n// `<label for>` needs, and the one that hands focus to the first cell.\nconst groupFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this group without anyone remembering to come\n  // back here.\n  const group: Record<string, unknown> = { ...field.attrs };\n  delete group.name;\n  delete group[\"aria-required\"];\n  delete group[\"aria-invalid\"];\n  return group;\n});\n\n// The single source of truth for the code we know about: seeded from the prop,\n// then advanced on every update Reka reports. Feeding this back into Reka\n// rather than `props.modelValue` is what keeps the row usable for a host that\n// binds no `modelValue` at all — the same buffer Slider keeps, for the same\n// reason. An absent prop leaves it empty rather than sticking the row on one\n// value, so nothing here needs `optional()`.\nconst code = ref(props.modelValue ?? \"\");\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value !== undefined) code.value = value;\n  },\n);\n\n// Longer than the row is the host's mistake to make, not ours to render: the\n// extra characters have no cell to live in.\nconst cells = computed(() => code.value.slice(0, props.length).split(\"\"));\n\n// Reka calls the digits-only mode \"number\". The prop says \"numeric\" because\n// nothing about the value is a number — a code with a leading zero is a\n// string, and this control never parses one.\nconst pinType = computed(() => (props.type === \"numeric\" ? \"number\" : \"text\"));\n\n// The row is one Tab stop. The stop is the first empty cell, which is also\n// where Reka's own `otp` handling redirects focus, or the last cell once the\n// code is full — so Tab lands where the next character goes.\nconst tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));\n\n// Typed wider than the declared emit on purpose: in numeric mode the array\n// really does come back holding numbers, and a cleared middle cell comes back\n// as a hole. Both are why a scalar is the exposed shape.\nfunction onUpdate(next: (string | number)[]) {\n  // `join` is where the scalar is decided, and it closes gaps: Reka can hold a\n  // cleared middle cell as a hole, a string cannot, so the cells after it\n  // shift left. That is the only reading that keeps the model and the row\n  // agreeing on one value — and it is what a single text input does when a\n  // character in the middle is deleted.\n  const value = next.join(\"\");\n  // Reka reports the whole row on every write, including a write that changed\n  // nothing a string can see — pasting the same code over itself is the\n  // reachable one. Stopping here keeps one changed code to one emitted value,\n  // and one filled code to one `complete`.\n  if (value === code.value) return;\n  code.value = value;\n  emit(\"update:modelValue\", value);\n  // Derived here rather than forwarded from Reka's own `complete`, which fires\n  // from a deep watcher on its model — and that model is set twice for one\n  // keystroke once the row is controlled, once by Reka and once by the value\n  // coming back around. Forwarding it would announce one filled code twice.\n  if (value.length === props.length) emit(\"complete\", value);\n}\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"{ ...groupAttrs, ...groupFieldAttrs, ...optional({ name: field.name }) }\"\n    :model-value=\"cells\"\n    :type=\"pinType\"\n    :mask=\"mask\"\n    :disabled=\"field.disabled\"\n    otp\n    role=\"group\"\n    :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby || (!ariaLabel ? field.labelledBy : undefined)\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"cn('inline-flex items-center gap-2', attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <!-- The `:aria-label` replaces the one Reka writes inside its own render\n         function — \"pin input 3 of 6\", the field's whole purpose restated once\n         per cell. It reaches the DOM node as a fallthrough attribute, which Vue\n         merges last, so it is a replacement rather than a second name. Removing\n         it does not fall back to nothing; it falls back to Reka's English. The\n         group carries the purpose, and a cell carries only where it sits. -->\n    <PinInputInput\n      v-for=\"cell in length\"\n      :key=\"cell\"\n      :index=\"cell - 1\"\n      :tabindex=\"cell - 1 === tabStopIndex ? 0 : -1\"\n      :aria-label=\"text.cell({ index: cell, length, type })\"\n      :aria-required=\"field.required || undefined\"\n      :aria-invalid=\"field.invalid || undefined\"\n      :data-filled=\"cell <= code.length || undefined\"\n      :class=\"\n        cn(\n          // Square, on the control scale's tallest step: a code cell is a\n          // touch target before it is a form row, and 44px is the size a thumb\n          // is aimed at. `tabular` keeps the six glyphs on one width so the\n          // row does not breathe as it fills.\n          'tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground',\n          'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n          // Rim-lit at rest; the ring blooms on the cell being typed into.\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          !field.invalid && 'focus-visible:shadow-halo',\n          // A filled cell is legible as filled from its character — or its\n          // mask dot — alone. The heavier border is a second, redundant cue,\n          // and a weight rather than a hue, so it survives both a colour\n          // deficiency and forced-colors.\n          //\n          // Withheld from an unavailable row, and only because the border is\n          // also the third channel of the disabled state below: two rules\n          // moving the same rim in opposite directions would leave a\n          // half-filled disabled row with a heavier edge than an empty one,\n          // which reads as the more available of the two. The cue is redundant\n          // by construction, so the state wins it.\n          !field.disabled && 'data-[filled]:border-border-strong',\n          // Unavailable is a *colour* and a *weight*, never an opacity. A cell\n          // holds one character — or one mask dot — and that is the entire\n          // content of the control, so `opacity-50` here did not dim a code so\n          // much as erase it: `--color-foreground` measures 14.09:1 on the\n          // resting fill and 2.99:1 once composited at half alpha. The drained\n          // fill carries the state instead, the character stays at a measured\n          // 4.68:1, and the rim slackens from `input` to `border` so the state\n          // is not told in hue alone.\n          //\n          // The fill and the text colour are `disabled:` variants rather than\n          // plain classes, so each outranks the resting `bg-background\n          // text-foreground` above on specificity rather than on where Tailwind\n          // happened to emit it. The border cannot join them: a `disabled:`\n          // variant would outrank the plain `border-destructive` below, and a\n          // row that is both in error and unavailable has to keep saying so.\n          'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n        )\n      \"\n    />\n  </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;AAkCA,IAAa,mBAAmC,EAC9C,OAAO,EAAE,OAAO,QAAQ,WACtB,GAAG,SAAS,YAAY,UAAU,YAAY,GAAG,OAAO,KAAK,EAAE,MAAM,OAAO,MAAM,IACtF;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,MAAM,QAAQ;EA6Cd,MAAM,OAAO;EAUb,MAAM,OAAO,UAAU,YAAY,wBAAwB,MAAM,MAAM;EASvE,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EASlD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,gBAAgB,MAAM;GACtB,UAAU,MAAM;GAChB,SAAS,MAAM;EACjB,EAAE;EAoBF,MAAM,kBAAkB,eAAe;GAIrC,MAAM,QAAiC,EAAE,GAAG,MAAM,MAAM;GACxD,OAAO,MAAM;GACb,OAAO,MAAM;GACb,OAAO,MAAM;GACb,OAAO;EACT,CAAC;EAQD,MAAM,OAAO,IAAI,MAAM,cAAc,EAAE;EACvC,YACQ,MAAM,aACX,UAAU;GACT,IAAI,UAAU,KAAA,GAAW,KAAK,QAAQ;EACxC,CACF;EAIA,MAAM,QAAQ,eAAe,KAAK,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;EAKxE,MAAM,UAAU,eAAgB,MAAM,SAAS,YAAY,WAAW,MAAO;EAK7E,MAAM,eAAe,eAAe,KAAK,IAAI,KAAK,MAAM,QAAQ,MAAM,SAAS,CAAC,CAAC;EAKjF,SAAS,SAAS,MAA2B;GAM3C,MAAM,QAAQ,KAAK,KAAK,EAAE;GAK1B,IAAI,UAAU,KAAK,OAAO;GAC1B,KAAK,QAAQ;GACb,KAAK,qBAAqB,KAAK;GAK/B,IAAI,MAAM,WAAW,MAAM,QAAQ,KAAK,YAAY,KAAK;EAC3D;;GAIE,OAAA,UAAA,GAAA,YAyEe,MAAA,YAAA,GAzEf,WAyEe;IAAA,GAxEA,MAAA,UAAA;IAAU,GAAK,gBAAA;IAAe,GAAK,MAAA,QAAA,CAAQ,CAAA,EAAA,MAAS,MAAA,KAAA,CAAK,CAAC,KAAI,CAAA;GAAA,GAAA;IAC1E,eAAa,MAAA;IACb,MAAM,QAAA;IACN,MAAM,QAAA;IACN,UAAU,MAAA,KAAA,CAAK,CAAC;IACjB,KAAA;IACA,MAAK;IACJ,cAAY,QAAA,iBAAiB,KAAA,IAAY,QAAA;IACzC,mBAAiB,QAAA,mBAAc,CAAM,QAAA,YAAY,MAAA,KAAA,CAAK,CAAC,aAAa,KAAA;IACpE,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;IAC/B,OAAO,MAAA,EAAA,CAAE,CAAA,kCAAmC,MAAA,KAAA,CAAK,CAAC,KAAK;IACvD,uBAAoB;;IASnB,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBAoDE,UAAA,MAAA,WAnDe,QAAA,SAAR,SAAI;KADb,OAAA,UAAA,GAAA,YAoDE,MAAA,aAAA,GAAA;MAlDC,KAAK;MACL,OAAO,OAAI;MACX,UAAU,OAAI,MAAS,aAAA,QAAY,IAAA;MACnC,cAAY,MAAA,IAAA,CAAI,CAAC,KAAI;OAAA,OAAU;OAAI,QAAE,QAAA;OAAM,MAAE,QAAA;MAAI,CAAA;MACjD,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;MACjC,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;MAC/B,eAAa,QAAQ,KAAA,MAAK,UAAU,KAAA;MACpC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,wGAAA,sFAAA,qFAAiqB,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,6BAAwvB,CAAA,MAAA,KAAA,CAAK,CAAC,YAAQ,sCAAA,gFAA2rC,MAAA,KAAA,CAAK,CAAC,YAAQ,iBAA+B,MAAA,KAAA,CAAK,CAAC,WAAO,sDAAA,CAAA"}

package/dist/primitives/Pagination/Pagination.js

@@ -0,0 +1,7 @@
+import Pagination_vue_vue_type_script_setup_true_lang_default, { PAGINATION_LABELS, paginationVariants } from "./Pagination.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/Pagination/Pagination.vue
+var Pagination_default = Pagination_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PAGINATION_LABELS, Pagination_default as default, paginationVariants };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/primitives/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * Everything this control publishes to assistive technology — including the six\n * names Reka would otherwise supply in English of its own accord.\n *\n * `first`, `previous`, `next`, `last` and `page` are not decoration. Reka's\n * `PaginationFirst` and its siblings write `aria-label=\"First Page\"` into their\n * own vnode props and expose no prop for it; `PaginationListItem` writes\n * `` `Page ${value}` ``. A binding on the Loom side arrives as a fallthrough\n * attribute, which Vue merges onto the root vnode *after* the render function\n * produced it, and `mergeProps` is last-write-wins for everything that is not\n * `class`, `style` or `on*`. So these replace Reka's rather than competing with\n * it — the same mechanism `DateRangePicker`'s cell triggers have relied on\n * since they landed, and `Pagination.test.ts` pins it by asserting the\n * *capitalisation* Loom uses and Reka does not.\n *\n * `page` and `position` take the numbers rather than a formatted string, so an\n * `ar-EG` host reaches `Intl.NumberFormat` for Eastern Arabic digits and a\n * language that orders \"of\" differently can order it differently. See\n * `LabelOf` in `src/lib/labels.ts`.\n */\nexport interface PaginationLabels {\n  /**\n   * The `<nav>` landmark's own name. A page commonly carries two of these —\n   * above and below a table — and two `<nav>`s named the same thing are as\n   * confusing to a screen reader as two named nothing, so give each one a name\n   * that says which it is.\n   */\n  readonly nav: string;\n  /** The button that jumps to page one. */\n  readonly first: string;\n  /** The button that steps back one page. */\n  readonly previous: string;\n  /** The button that steps on one page. */\n  readonly next: string;\n  /** The button that jumps to the last page. */\n  readonly last: string;\n  /** One numbered button in the `full` variant, named for the page it reaches. */\n  readonly page: LabelOf<{ page: number }>;\n  /** The position readout the `compact` and `simple` variants publish. */\n  readonly position: LabelOf<{ page: number; pageCount: number }>;\n  /** The ellipsis standing in for the pages the window had no room for. */\n  readonly ellipsis: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it: a\n * consumer who never imports Pagination ships none of these bytes.\n *\n * Exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const PAGINATION_LABELS: PaginationLabels = {\n  nav: \"Pagination\",\n  first: \"First page\",\n  previous: \"Previous page\",\n  next: \"Next page\",\n  last: \"Last page\",\n  page: ({ page }) => `Page ${String(page)}`,\n  position: ({ page, pageCount }) => `Page ${String(page)} of ${String(pageCount)}`,\n  ellipsis: \"More pages\",\n};\n\n/**\n * How much of the paging apparatus is rendered. All three drive the same\n * model and carry the same semantics — they differ only in how much room the\n * navigation is worth on the surface it sits on.\n *\n *   • `full` — the numbered row with ellipses, plus first/prev/next/last.\n *     For a table where jumping to a known page is a real task.\n *   • `compact` — prev, \"Page 3 of 12\", next. The position stays legible\n *     without spending a whole row on it.\n *   • `simple` — prev and next alone, for a feed nobody navigates by index.\n */\nexport type PaginationVariant = \"full\" | \"compact\" | \"simple\";\n\nexport const paginationVariants = cva(\"inline-flex items-center\", {\n  // `satisfies` keeps the two halves honest: the union above is the name a\n  // consumer imports and the documentation prints, the map below is the\n  // classes. Adding a member to one and not the other stops compiling.\n  variants: {\n    variant: {\n      // The numbered row is a run of same-size squares and reads as one strip\n      // at gap-1; the compact form is a sentence between two controls and\n      // needs the wider gap to stop reading as a third button.\n      full: \"gap-1\",\n      compact: \"gap-2\",\n      simple: \"gap-1\",\n    } satisfies Record<PaginationVariant, string>,\n  },\n  defaultVariants: { variant: \"full\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick } from \"vue\";\nimport {\n  PaginationRoot,\n  PaginationList,\n  PaginationListItem,\n  PaginationFirst,\n  PaginationPrev,\n  PaginationNext,\n  PaginationLast,\n  PaginationEllipsis,\n} from \"reka-ui\";\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"@lucide/vue\";\nimport { buttonVariants } from \"../Button/Button.vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * Pagination — moving through a paged result set, one page at a time or by\n * jumping to a numbered one.\n *\n * It renders **buttons, never links**. Loom cannot know whether a consumer's\n * pages are addressable URLs, and an `<a>` with no `href` is not a link at\n * all — it is a div that lies to a screen reader and drops out of the tab\n * order. A product whose pages are real, crawlable URLs wants its own\n * `<a href>` row instead of this component; nothing here can be made to\n * produce one.\n *\n * Reach for a different control when the list is not paged: an infinite feed\n * wants a \"load more\" button, and a long list a reader scans rather than\n * indexes wants a virtualised scroller.\n *\n * Built on Reka UI's Pagination, which owns the arithmetic — the page count,\n * the sliding window of numbers around the current page, and where the\n * ellipses fall. That window is fiddly enough at the boundaries that\n * recomputing it here would only be a second, subtly different answer.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current page, 1-based. Leave it unset to let the component keep its\n     * own page and simply report changes.\n     */\n    page?: number;\n    /** How many items exist in total, across every page. */\n    total: number;\n    /** How many items one page holds. With `total`, this is what fixes the page count. */\n    itemsPerPage?: number;\n    /** How much of the control renders: the numbered row, a position readout, or arrows alone. */\n    variant?: PaginationVariant;\n    /** How many numbers sit either side of the current page, in the `full` variant. */\n    siblingCount?: number;\n    /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */\n    showEdges?: boolean;\n    /** Unavailable: every control dims and refuses to move the page. */\n    disabled?: boolean;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is the two paginations above and\n     * below one table, which must not share `labels.nav`.\n     */\n    labels?: LabelOverrides<PaginationLabels>;\n  }>(),\n  {\n    itemsPerPage: 10,\n    variant: \"full\",\n    siblingCount: 1,\n    // Reka defaults this off, which drops the ellipses entirely and lets the\n    // numbered row float free of both ends. The anchored form is what people\n    // mean by a full pagination, so Loom turns it on.\n    showEdges: true,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The 1-based page the reader asked for. A controlled host decides whether to honour it. */\n  \"update:page\": [page: number];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"pagination\", PAGINATION_LABELS, () => props.labels);\n\n// The root renders the `<nav>`, so every fallthrough attribute belongs on it —\n// there is no second node they could sensibly describe. `class` is pulled out\n// of that spread and merged through `cn()` instead: spreading it alongside the\n// nav's own `:class` only concatenates the two lists, so a caller's `gap-2`\n// would win or lose depending on which utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: navAttrs } = useSplitAttrs();\n\n// The edge controls keep the dim, and they are the one place in this component\n// where it is still the right answer: their whole content is a chevron marked\n// `aria-hidden`, so there is no text for the alpha to take down with it and the\n// name a screen reader announces is an `aria-label` no paint can reach. WCAG\n// exempts an inactive control from 1.4.11 besides. Prev and First sit disabled\n// on page 1 for as long as a reader is on it, which is the other half of the\n// argument: a faded chevron is the conventional reading of \"no further this\n// way\", where a drained plate would draw the eye to the control that cannot be\n// used.\nconst edgeClass = cn(\n  buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n  \"disabled:cursor-not-allowed disabled:opacity-50\",\n);\n\n// The page buttons borrow Button's own variants rather than restating its\n// press language, so the row cannot drift from every other pressable thing in\n// the library. `min-w-8` with tabular figures is what keeps the row from\n// reflowing as the numbers under it grow a digit.\nfunction pageClass(selected: boolean): string {\n  return cn(\n    buttonVariants({ variant: selected ? \"primary\" : \"ghost\", size: \"sm\" }),\n    \"min-w-8 px-2 tabular\",\n    // No `opacity` here, unlike the edges above, because this button's content\n    // *is* text — the page number, the one thing a reader needs from a pager\n    // that is briefly out of service. `disabled:opacity-50` composited the\n    // ghost variant's `--color-muted-foreground` down to 2.05:1 and the current\n    // page's white-on-primary label down to 2.48:1; halving the alpha more than\n    // halves the contrast. Unavailability is painted in measured colours\n    // instead.\n    //\n    // The two branches drain to different wells on purpose, which is Chip's\n    // rule applied to a row of numbers: an unselected page falls to the neutral\n    // well at 4.67:1, and the current page keeps the primary wash it already wears\n    // at 6.84:1. Which page a reader is on is information, and a disabled pager\n    // that forgets it has answered the question by refusing to answer it.\n    selected\n      ? \"disabled:cursor-not-allowed disabled:bg-primary-muted disabled:text-primary disabled:shadow-none\"\n      : \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n  );\n}\n\n/** Which edge control stands in for which, when the one that was pressed goes away. */\nconst MIRROR: Record<string, string | undefined> = {\n  first: \"last\",\n  prev: \"next\",\n  next: \"prev\",\n  last: \"first\",\n};\n\n// Reka disables Prev/First at page 1 and Next/Last at the last page, and that\n// is the honest state: a control that looks unavailable and still fires is\n// worse than one that is not there at all. The cost is real, though — a\n// browser blurs a button the instant it becomes disabled, so a reader holding\n// Enter on Next arrives at the last page with focus dumped on `<body>` and\n// their place in the document gone.\n//\n// So the control that fired the change hands focus on: to the current page\n// button where the variant has one — which announces \"Page 12, current page\",\n// the very thing the reader was trying to find out — and to its mirror control\n// otherwise, which is the nearest thing still able to move the page.\n//\n// Only for a keyboard activation. `detail === 0` is what separates a click\n// synthesised by Enter or Space from a pointer click, and a pointer user has\n// no focus position to lose; moving focus for them would raise a ring nobody\n// asked for.\nlet pressed: HTMLButtonElement | null = null;\n\nfunction rememberKeyboardPress(event: MouseEvent): void {\n  const target = event.target as HTMLElement | null;\n  pressed = event.detail === 0 ? (target?.closest<HTMLButtonElement>(\"button\") ?? null) : null;\n}\n\nfunction handOffFocus(): void {\n  const origin = pressed;\n  pressed = null;\n  if (!origin?.disabled) return;\n\n  // Only rescue focus that was actually lost. A browser leaves `<body>`\n  // focused after disabling the button; jsdom leaves the button itself. Any\n  // other active element means the reader has already moved on, and stealing\n  // focus back from them would be the worse bug.\n  const active = document.activeElement;\n  if (active !== origin && active !== document.body) return;\n\n  const nav = origin.closest(\"nav\");\n  if (!nav) return;\n\n  const mirror = MIRROR[origin.getAttribute(\"data-edge\") ?? \"\"];\n  const target =\n    nav.querySelector<HTMLButtonElement>('[aria-current=\"page\"]:not([disabled])') ??\n    (mirror\n      ? nav.querySelector<HTMLButtonElement>(`[data-edge=\"${mirror}\"]:not([disabled])`)\n      : null);\n  target?.focus();\n}\n\nfunction onPageChange(value: number): void {\n  emit(\"update:page\", value);\n  // After the re-render rather than before it: the button that was pressed\n  // only becomes disabled once the new page has been applied.\n  void nextTick(handOffFocus);\n}\n</script>\n\n<template>\n  <PaginationRoot\n    v-slot=\"{ page: current, pageCount }\"\n    v-bind=\"{ ...navAttrs, ...optional({ page }) }\"\n    :total=\"total\"\n    :items-per-page=\"itemsPerPage\"\n    :sibling-count=\"siblingCount\"\n    :show-edges=\"showEdges\"\n    :disabled=\"disabled\"\n    :aria-label=\"text.nav\"\n    :class=\"cn(paginationVariants({ variant }), attrs.class as string)\"\n    @click=\"rememberKeyboardPress\"\n    @update:page=\"onPageChange\"\n  >\n    <!-- Every `:aria-label` from here down replaces one Reka writes in English\n         inside its own render function. It reaches the DOM node as a\n         fallthrough attribute, which Vue merges last, so it is a replacement\n         rather than a second name. Removing one does not fall back to nothing;\n         it falls back to Reka's English, which is the failure this whole seam\n         exists to close and which no test of Loom's own strings would catch. -->\n    <PaginationFirst\n      v-if=\"variant === 'full'\"\n      data-edge=\"first\"\n      :aria-label=\"text.first\"\n      :class=\"edgeClass\"\n    >\n      <ChevronsLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </PaginationFirst>\n\n    <PaginationPrev data-edge=\"prev\" :aria-label=\"text.previous\" :class=\"edgeClass\">\n      <ChevronLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </PaginationPrev>\n\n    <PaginationList v-if=\"variant === 'full'\" v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <!-- Keyed by page number, never by index. The row is furniture: a page\n           that stays inside the window across a change keeps its own DOM node,\n           so nothing remounts, nothing re-animates, and the numbers do not\n           shuffle under a reader who has just pressed Next. -->\n      <template\n        v-for=\"(item, index) in items\"\n        :key=\"item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`\"\n      >\n        <PaginationListItem\n          v-if=\"item.type === 'page'\"\n          :value=\"item.value\"\n          :aria-label=\"text.page({ page: item.value })\"\n          :class=\"pageClass(item.value === current)\"\n        />\n        <!-- The ellipsis is not a control, so it renders as a span rather than\n             Reka's default div-with-a-glyph inside a row of buttons: nothing to\n             focus, nothing that looks pressable, and the glyph itself hidden\n             from assistive technology because \"horizontal ellipsis\" is not what\n             it means. The words are what it means. -->\n        <PaginationEllipsis\n          v-else\n          as=\"span\"\n          class=\"inline-flex h-8 min-w-8 select-none items-center justify-center text-sm text-muted-foreground\"\n        >\n          <span aria-hidden=\"true\">…</span>\n          <span class=\"sr-only\">{{ text.ellipsis }}</span>\n        </PaginationEllipsis>\n      </template>\n    </PaginationList>\n\n    <!-- The position, for the two variants that have no numbered row to read it\n         off. `role=\"status\"` because pressing Next in those variants otherwise\n         changes nothing a screen reader would notice — focus stays put and no\n         `aria-current` moves. The `full` variant deliberately has no live\n         region: its number row already carries the state, and announcing it\n         again on top of the focus hand-off below would say everything twice. -->\n    <!-- One string rather than three nodes with the numbers between them: a\n         language that puts the count before the word, or drops the preposition\n         entirely, cannot reorder markup this component emits. `tabular` moves\n         from the two number spans to the whole readout, which is the only real\n         cost — the \"of\" between them is now tabular too, and the row of digits\n         it was steadying is not rendered in either of these variants. -->\n    <span\n      v-if=\"variant !== 'full'\"\n      role=\"status\"\n      :class=\"variant === 'compact' ? 'px-1 text-sm tabular text-muted-foreground' : 'sr-only'\"\n    >\n      {{ text.position({ page: current, pageCount }) }}\n    </span>\n\n    <PaginationNext data-edge=\"next\" :aria-label=\"text.next\" :class=\"edgeClass\">\n      <ChevronRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </PaginationNext>\n\n    <PaginationLast\n      v-if=\"variant === 'full'\"\n      data-edge=\"last\"\n      :aria-label=\"text.last\"\n      :class=\"edgeClass\"\n    >\n      <ChevronsRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </PaginationLast>\n  </PaginationRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Pagination/Pagination.vue.d.ts

@@ -0,0 +1,143 @@
+import { type LabelOverrides } from "../../lib/labels";
+import type { LabelOf } from "../../lib/labels";
+/**
+ * Everything this control publishes to assistive technology — including the six
+ * names Reka would otherwise supply in English of its own accord.
+ *
+ * `first`, `previous`, `next`, `last` and `page` are not decoration. Reka's
+ * `PaginationFirst` and its siblings write `aria-label="First Page"` into their
+ * own vnode props and expose no prop for it; `PaginationListItem` writes
+ * `` `Page ${value}` ``. A binding on the Loom side arrives as a fallthrough
+ * attribute, which Vue merges onto the root vnode *after* the render function
+ * produced it, and `mergeProps` is last-write-wins for everything that is not
+ * `class`, `style` or `on*`. So these replace Reka's rather than competing with
+ * it — the same mechanism `DateRangePicker`'s cell triggers have relied on
+ * since they landed, and `Pagination.test.ts` pins it by asserting the
+ * *capitalisation* Loom uses and Reka does not.
+ *
+ * `page` and `position` take the numbers rather than a formatted string, so an
+ * `ar-EG` host reaches `Intl.NumberFormat` for Eastern Arabic digits and a
+ * language that orders "of" differently can order it differently. See
+ * `LabelOf` in `src/lib/labels.ts`.
+ */
+export interface PaginationLabels {
+    /**
+     * The `<nav>` landmark's own name. A page commonly carries two of these —
+     * above and below a table — and two `<nav>`s named the same thing are as
+     * confusing to a screen reader as two named nothing, so give each one a name
+     * that says which it is.
+     */
+    readonly nav: string;
+    /** The button that jumps to page one. */
+    readonly first: string;
+    /** The button that steps back one page. */
+    readonly previous: string;
+    /** The button that steps on one page. */
+    readonly next: string;
+    /** The button that jumps to the last page. */
+    readonly last: string;
+    /** One numbered button in the `full` variant, named for the page it reaches. */
+    readonly page: LabelOf<{
+        page: number;
+    }>;
+    /** The position readout the `compact` and `simple` variants publish. */
+    readonly position: LabelOf<{
+        page: number;
+        pageCount: number;
+    }>;
+    /** The ellipsis standing in for the pages the window had no room for. */
+    readonly ellipsis: string;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it: a
+ * consumer who never imports Pagination ships none of these bytes.
+ *
+ * Exported so a host can build a partial vocabulary against the real thing
+ * rather than a transcription of it.
+ */
+export declare const PAGINATION_LABELS: PaginationLabels;
+/**
+ * How much of the paging apparatus is rendered. All three drive the same
+ * model and carry the same semantics — they differ only in how much room the
+ * navigation is worth on the surface it sits on.
+ *
+ *   • `full` — the numbered row with ellipses, plus first/prev/next/last.
+ *     For a table where jumping to a known page is a real task.
+ *   • `compact` — prev, "Page 3 of 12", next. The position stays legible
+ *     without spending a whole row on it.
+ *   • `simple` — prev and next alone, for a feed nobody navigates by index.
+ */
+export type PaginationVariant = "full" | "compact" | "simple";
+export declare const paginationVariants: (props?: ({
+    variant?: "full" | "compact" | "simple" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The current page, 1-based. Leave it unset to let the component keep its
+     * own page and simply report changes.
+     */
+    page?: number;
+    /** How many items exist in total, across every page. */
+    total: number;
+    /** How many items one page holds. With `total`, this is what fixes the page count. */
+    itemsPerPage?: number;
+    /** How much of the control renders: the numbered row, a position readout, or arrows alone. */
+    variant?: PaginationVariant;
+    /** How many numbers sit either side of the current page, in the `full` variant. */
+    siblingCount?: number;
+    /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */
+    showEdges?: boolean;
+    /** Unavailable: every control dims and refuses to move the page. */
+    disabled?: boolean;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is the two paginations above and
+     * below one table, which must not share `labels.nav`.
+     */
+    labels?: LabelOverrides<PaginationLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The current page, 1-based. Leave it unset to let the component keep its
+     * own page and simply report changes.
+     */
+    page?: number;
+    /** How many items exist in total, across every page. */
+    total: number;
+    /** How many items one page holds. With `total`, this is what fixes the page count. */
+    itemsPerPage?: number;
+    /** How much of the control renders: the numbered row, a position readout, or arrows alone. */
+    variant?: PaginationVariant;
+    /** How many numbers sit either side of the current page, in the `full` variant. */
+    siblingCount?: number;
+    /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */
+    showEdges?: boolean;
+    /** Unavailable: every control dims and refuses to move the page. */
+    disabled?: boolean;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is the two paginations above and
+     * below one table, which must not share `labels.nav`.
+     */
+    labels?: LabelOverrides<PaginationLabels>;
+}> & Readonly<{
+    "onUpdate:page"?: (page: number) => any;
+}>, {
+    disabled: boolean;
+    variant: PaginationVariant;
+    itemsPerPage: number;
+    siblingCount: number;
+    showEdges: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Pagination.vue.d.ts.map

package/dist/primitives/Pagination/Pagination.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Pagination/Pagination.vue"],"names":[],"mappings":"AAiaA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,gBAS/B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,eAAO,MAAM,kBAAkB;;8EAe7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAsBd;;;OAGG;WACI,MAAM;IACb,wDAAwD;WACjD,MAAM;IACb,sFAAsF;mBACvE,MAAM;IACrB,8FAA8F;cACpF,iBAAiB;IAC3B,mFAAmF;mBACpE,MAAM;IACrB,kGAAkG;gBACtF,OAAO;IACnB,oEAAoE;eACzD,OAAO;IAClB;;;;;;;;OAQG;aACM,cAAc,CAAC,gBAAgB,CAAC;;;;IA1BzC;;;OAGG;WACI,MAAM;IACb,wDAAwD;WACjD,MAAM;IACb,sFAAsF;mBACvE,MAAM;IACrB,8FAA8F;cACpF,iBAAiB;IAC3B,mFAAmF;mBACpE,MAAM;IACrB,kGAAkG;gBACtF,OAAO;IACnB,oEAAoE;eACzD,OAAO;IAClB;;;;;;;;OAQG;aACM,cAAc,CAAC,gBAAgB,CAAC;;;;cAV9B,OAAO;aANR,iBAAiB;kBAFZ,MAAM;kBAIN,MAAM;eAET,OAAO;6EA2dnB,CAAC"}