@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,231 @@
+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 { buttonVariants } from "../Button/Button.vue_vue_type_script_setup_true_lang.js";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "@lucide/vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from "reka-ui";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
+/**
+* Pagination — moving through a paged result set, one page at a time or by
+* jumping to a numbered one.
+*
+* It renders **buttons, never links**. Loom cannot know whether a consumer's
+* pages are addressable URLs, and an `<a>` with no `href` is not a link at
+* all — it is a div that lies to a screen reader and drops out of the tab
+* order. A product whose pages are real, crawlable URLs wants its own
+* `<a href>` row instead of this component; nothing here can be made to
+* produce one.
+*
+* Reach for a different control when the list is not paged: an infinite feed
+* wants a "load more" button, and a long list a reader scans rather than
+* indexes wants a virtualised scroller.
+*
+* Built on Reka UI's Pagination, which owns the arithmetic — the page count,
+* the sliding window of numbers around the current page, and where the
+* ellipses fall. That window is fiddly enough at the boundaries that
+* recomputing it here would only be a second, subtly different answer.
+*/
+var _hoisted_1 = { class: "sr-only" };
+/**
+* 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.
+*/
+var PAGINATION_LABELS = {
+	nav: "Pagination",
+	first: "First page",
+	previous: "Previous page",
+	next: "Next page",
+	last: "Last page",
+	page: ({ page }) => `Page ${String(page)}`,
+	position: ({ page, pageCount }) => `Page ${String(page)} of ${String(pageCount)}`,
+	ellipsis: "More pages"
+};
+var paginationVariants = cva("inline-flex items-center", {
+	variants: { variant: {
+		full: "gap-1",
+		compact: "gap-2",
+		simple: "gap-1"
+	} },
+	defaultVariants: { variant: "full" }
+});
+var Pagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Pagination",
+	props: {
+		page: {},
+		total: {},
+		itemsPerPage: { default: 10 },
+		variant: { default: "full" },
+		siblingCount: { default: 1 },
+		showEdges: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: ["update:page"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("pagination", PAGINATION_LABELS, () => props.labels);
+		const { attrs, rest: navAttrs } = useSplitAttrs();
+		const edgeClass = cn(buttonVariants({
+			variant: "ghost",
+			size: "icon-sm"
+		}), "disabled:cursor-not-allowed disabled:opacity-50");
+		function pageClass(selected) {
+			return cn(buttonVariants({
+				variant: selected ? "primary" : "ghost",
+				size: "sm"
+			}), "min-w-8 px-2 tabular", selected ? "disabled:cursor-not-allowed disabled:bg-primary-muted disabled:text-primary disabled:shadow-none" : "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground");
+		}
+		/** Which edge control stands in for which, when the one that was pressed goes away. */
+		const MIRROR = {
+			first: "last",
+			prev: "next",
+			next: "prev",
+			last: "first"
+		};
+		let pressed = null;
+		function rememberKeyboardPress(event) {
+			const target = event.target;
+			pressed = event.detail === 0 ? target?.closest("button") ?? null : null;
+		}
+		function handOffFocus() {
+			const origin = pressed;
+			pressed = null;
+			if (!origin?.disabled) return;
+			const active = document.activeElement;
+			if (active !== origin && active !== document.body) return;
+			const nav = origin.closest("nav");
+			if (!nav) return;
+			const mirror = MIRROR[origin.getAttribute("data-edge") ?? ""];
+			(nav.querySelector("[aria-current=\"page\"]:not([disabled])") ?? (mirror ? nav.querySelector(`[data-edge="${mirror}"]:not([disabled])`) : null))?.focus();
+		}
+		function onPageChange(value) {
+			emit("update:page", value);
+			nextTick(handOffFocus);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PaginationRoot), mergeProps({
+				...unref(navAttrs),
+				...unref(optional)({ page: __props.page })
+			}, {
+				total: __props.total,
+				"items-per-page": __props.itemsPerPage,
+				"sibling-count": __props.siblingCount,
+				"show-edges": __props.showEdges,
+				disabled: __props.disabled,
+				"aria-label": unref(text).nav,
+				class: unref(cn)(unref(paginationVariants)({ variant: __props.variant }), unref(attrs).class),
+				onClick: rememberKeyboardPress,
+				"onUpdate:page": onPageChange
+			}), {
+				default: withCtx(({ page: current, pageCount }) => [
+					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationFirst), {
+						key: 0,
+						"data-edge": "first",
+						"aria-label": unref(text).first,
+						class: normalizeClass(unref(edgeClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronsLeft), {
+							class: "h-4 w-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["aria-label", "class"])) : createCommentVNode("", true),
+					createVNode(unref(PaginationPrev), {
+						"data-edge": "prev",
+						"aria-label": unref(text).previous,
+						class: normalizeClass(unref(edgeClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronLeft), {
+							class: "h-4 w-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["aria-label", "class"]),
+					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationList), {
+						key: 1,
+						class: "flex items-center gap-1"
+					}, {
+						default: withCtx(({ items }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, (item, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: item.type === "page" ? `page-${item.value}` : `ellipsis-${index}` }, [item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
+								key: 0,
+								value: item.value,
+								"aria-label": unref(text).page({ page: item.value }),
+								class: normalizeClass(pageClass(item.value === current))
+							}, null, 8, [
+								"value",
+								"aria-label",
+								"class"
+							])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
+								key: 1,
+								as: "span",
+								class: "inline-flex h-8 min-w-8 select-none items-center justify-center text-sm text-muted-foreground"
+							}, {
+								default: withCtx(() => [_cache[0] || (_cache[0] = createElementVNode("span", { "aria-hidden": "true" }, "…", -1)), createElementVNode("span", _hoisted_1, toDisplayString(unref(text).ellipsis), 1)]),
+								_: 1
+							}))], 64);
+						}), 128))]),
+						_: 2
+					}, 1024)) : createCommentVNode("", true),
+					__props.variant !== "full" ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						role: "status",
+						class: normalizeClass(__props.variant === "compact" ? "px-1 text-sm tabular text-muted-foreground" : "sr-only")
+					}, toDisplayString(unref(text).position({
+						page: current,
+						pageCount
+					})), 3)) : createCommentVNode("", true),
+					createVNode(unref(PaginationNext), {
+						"data-edge": "next",
+						"aria-label": unref(text).next,
+						class: normalizeClass(unref(edgeClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronRight), {
+							class: "h-4 w-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["aria-label", "class"]),
+					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationLast), {
+						key: 3,
+						"data-edge": "last",
+						"aria-label": unref(text).last,
+						class: normalizeClass(unref(edgeClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronsRight), {
+							class: "h-4 w-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["aria-label", "class"])) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 16, [
+				"total",
+				"items-per-page",
+				"sibling-count",
+				"show-edges",
+				"disabled",
+				"aria-label",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { PAGINATION_LABELS, Pagination_vue_vue_type_script_setup_true_lang_default as default, paginationVariants };
+
+//# sourceMappingURL=Pagination.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.vue_vue_type_script_setup_true_lang.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":"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"}

package/dist/primitives/Progress/Progress.js

@@ -1,7 +1,7 @@
-import Progress_vue_vue_type_script_setup_true_lang_default from "./Progress.vue_vue_type_script_setup_true_lang.js";
+import Progress_vue_vue_type_script_setup_true_lang_default, { PROGRESS_LABELS, progressVariants } from "./Progress.vue_vue_type_script_setup_true_lang.js";
 //#region src/primitives/Progress/Progress.vue
 var Progress_default = Progress_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { Progress_default as default };
+export { PROGRESS_LABELS, Progress_default as default, progressVariants };
 
 //# sourceMappingURL=Progress.js.map

package/dist/primitives/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    max: 100,\n  },\n);\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    class=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n  >\n    <!-- Determinate: a full-width bar slid left by the remaining percentage\n         (transform eased over --duration-slow). Indeterminate: a short segment\n         sweeping the track on a loop, since there is no percentage to paint.\n         Completion beat: at 100% the fill turns success (Loom dual-force\n         law — a finished piece of work reads as done at a glance), eased in\n         over the same --duration-slow lane via the background transition. -->\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full',\n          pct === 100 ? 'bg-success' : 'bg-primary',\n          pct === null && 'w-1/3 animate-progress-indeterminate rounded-full',\n        )\n      \"\n      :style=\"\n        pct === null\n          ? undefined\n          : {\n              transition:\n                'transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)',\n              transform: `translateX(-${100 - pct}%)`,\n            }\n      \"\n    />\n  </ProgressRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * The one thing this bar prints, and the placeholder it prints instead when\n * there is no percentage yet.\n *\n * **`value` takes both raw numbers and no formatting at all.** A hand-built\n * `${Math.round(pct)}%` has already decided three things a component cannot\n * know: that the sign trails the digits — Turkish writes `%42` — that the\n * digits are Western Arabic, and that a percentage is the right reading of the\n * pair at all. Handed `value` and `max`, a host reaches\n * `Intl.NumberFormat(locale, { style: \"percent\" })` for the first two and can\n * answer \"3 of 4 steps\" instead of \"75%\" for the third.\n *\n * The rounding therefore lives in Loom's default rather than in the component,\n * so it is a wording choice a host replaces along with the words.\n */\nexport interface ProgressLabels {\n  /** The readout beside the track, from the clamped value and the scale it is out of. */\n  readonly value: LabelOf<{ value: number; max: number }>;\n  /** What the readout prints while there is no percentage — never a false zero. */\n  readonly indeterminate: string;\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 PROGRESS_LABELS: ProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The track's thickness. Deliberately *not* the shared control-height scale a\n * Select or a TextField uses: a bar is a stroke laid under a heading or inside\n * a table row, never a control a person clicks into, so lining it up with a\n * 36px input would only make it a slab. `md` is the thickness every caller got\n * before this prop existed and stays the default for exactly that reason.\n */\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport const progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<ProgressSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value. For the same number drawn as\n * a ring — a dashboard tile, a quota, a score where the circle is the visual\n * — use RadialProgress, which mirrors this contract exactly.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */\n    size?: ProgressSize;\n    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the readout is written, as any subset of `ProgressLabels` — the rest\n     * stay as the host's `provideLoomLabels` vocabulary left them, and then as\n     * Loom's English.\n     *\n     * The per-instance case is a bar counting something a percentage is the\n     * wrong reading of: `value: ({ value, max }) => \\`Step ${value} of ${max}\\``.\n     */\n    labels?: LabelOverrides<ProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    showValue: false,\n  },\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(\"progress\", PROGRESS_LABELS, () => props.labels);\n\n/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<ProgressSize, string>;\n\n// `showValue` changes which node is outermost, so fallthrough can no longer be\n// left to Vue: `class` goes to whatever the caller sees as the component's box\n// — the flex row when there is a readout, the track itself when the track is\n// all there is — and everything else (aria-describedby, data-testid) goes to\n// ProgressRoot, which is the element carrying role=\"progressbar\" and therefore\n// the one those attributes are describing.\n//\n// The two branches are written out rather than always wrapping the track in a\n// row, because a bare Progress has to keep the exact box it had before\n// `showValue` existed — a wrapper, even an empty one, changes how it sits in\n// a flex or grid parent.\n//\n// Nothing may sit beside those two branches at the top level of the template,\n// comments included: a second root node turns the component into a fragment,\n// and the attributes routed by hand above then have nowhere single to land.\n//\n// Routing `class` through `cn()` also settles a fight that used to be decided\n// by stylesheet order: Vue's own fallthrough merge concatenates, so a caller's\n// `bg-primary` sat alongside the track's `bg-muted` rather than replacing it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\n/**\n * Everything ProgressRoot is given in both branches of the template. `rest`\n * lands last so a caller passing a bare `aria-label` attribute still wins over\n * the prop, which is the precedence Vue's own fallthrough gave before this\n * component took the attributes over by hand.\n */\nconst rootAttrs = computed(() => ({\n  modelValue: value.value,\n  max: props.max,\n  \"aria-label\": props.ariaLabel,\n  \"aria-labelledby\": props.ariaLabelledby,\n  ...rest.value,\n}));\n\n// Determinate: a full-width bar slid left by the remaining percentage\n// (transform eased over --duration-slow). Indeterminate: a short segment\n// sweeping the track on a loop, since there is no percentage to paint.\n// Completion beat: at 100% the fill turns success (Loom law — a\n// finished piece of work reads as done at a glance), eased in over the same\n// --duration-slow lane via the background transition.\nconst indicatorClass = computed(() =>\n  cn(\n    \"h-full\",\n    pct.value === 100 ? \"bg-success\" : \"bg-primary\",\n    pct.value === null && \"w-1/3 animate-progress-indeterminate rounded-full\",\n  ),\n);\n\nconst indicatorStyle = computed(() =>\n  pct.value === null\n    ? undefined\n    : {\n        transition:\n          \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n        transform: `translateX(-${100 - pct.value}%)`,\n      },\n);\n\n/**\n * An indeterminate bar has no percentage, so the readout prints the placeholder\n * rather than the `0%` a naive `pct ?? 0` would produce — \"we do not know yet\"\n * and \"none of it is done\" are different facts, and only one of them is true.\n *\n * The determinate branch hands over `value` and `max` rather than the\n * percentage it already computed for the transform: rounding, the position of\n * the per-cent sign and the shape of the digits are all the host's, and `pct`\n * is a division this component happens to need for the paint.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    v-if=\"!showValue\"\n    v-bind=\"rootAttrs\"\n    :class=\"cn(progressVariants({ size }), attrs.class as string)\"\n  >\n    <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n  </ProgressRoot>\n\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <ProgressRoot\n      v-bind=\"rootAttrs\"\n      :class=\"cn(progressVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n    </ProgressRoot>\n    <!-- Hidden from assistive tech: the progressbar already announces this\n         number through `aria-valuenow`, and a visible copy beside it is read\n         out a second time as loose text. Fixed width so the track does not\n         resize itself every time the digit count changes. -->\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn('tabular w-10 shrink-0 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,30 +1,96 @@
+import { type LabelOverrides } from "../../lib/labels";
+import type { LabelOf } from "../../lib/labels";
 /**
- * Progress — determinate progress bar for a task whose extent as a percentage
- * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the
- * *indeterminate* state — an empty track, since there is no percentage yet to
- * paint. For a wait of unknown duration with no percentage at all, use
- * Spinner instead of guessing a Progress value.
+ * The one thing this bar prints, and the placeholder it prints instead when
+ * there is no percentage yet.
  *
- * Built on Reka UI's Progress: role="progressbar" + aria-valuenow/min/max set
- * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto
- * ProgressRoot (fallthrough overrides Reka's own generated "`NN%`" label) so
- * the accessible name describes *what* is loading, not just how much.
+ * **`value` takes both raw numbers and no formatting at all.** A hand-built
+ * `${Math.round(pct)}%` has already decided three things a component cannot
+ * know: that the sign trails the digits — Turkish writes `%42` — that the
+ * digits are Western Arabic, and that a percentage is the right reading of the
+ * pair at all. Handed `value` and `max`, a host reaches
+ * `Intl.NumberFormat(locale, { style: "percent" })` for the first two and can
+ * answer "3 of 4 steps" instead of "75%" for the third.
+ *
+ * The rounding therefore lives in Loom's default rather than in the component,
+ * so it is a wording choice a host replaces along with the words.
+ */
+export interface ProgressLabels {
+    /** The readout beside the track, from the clamped value and the scale it is out of. */
+    readonly value: LabelOf<{
+        value: number;
+        max: number;
+    }>;
+    /** What the readout prints while there is no percentage — never a false zero. */
+    readonly indeterminate: string;
+}
+/**
+ * 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 PROGRESS_LABELS: ProgressLabels;
+/**
+ * The track's thickness. Deliberately *not* the shared control-height scale a
+ * Select or a TextField uses: a bar is a stroke laid under a heading or inside
+ * a table row, never a control a person clicks into, so lining it up with a
+ * 36px input would only make it a slab. `md` is the thickness every caller got
+ * before this prop existed and stays the default for exactly that reason.
  */
-type __VLS_Props = {
+export type ProgressSize = "sm" | "md" | "lg";
+export declare const progressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | 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 completed amount, 0–`max`; `null`/omitted renders indeterminate. */
     modelValue?: number | null;
     /** The value that reads as 100% complete. */
     max?: number;
+    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */
+    size?: ProgressSize;
+    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
     /** Accessible name describing the task, overriding Reka's default `NN%` label. */
     ariaLabel?: string;
     /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
     ariaLabelledby?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * How the readout is written, as any subset of `ProgressLabels` — the rest
+     * stay as the host's `provideLoomLabels` vocabulary left them, and then as
+     * Loom's English.
+     *
+     * The per-instance case is a bar counting something a percentage is the
+     * wrong reading of: `value: ({ value, max }) => \`Step ${value} of ${max}\``.
+     */
+    labels?: LabelOverrides<ProgressLabels>;
+}, {
     pct: import("vue").ComputedRef<number | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */
+    size?: ProgressSize;
+    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the readout is written, as any subset of `ProgressLabels` — the rest
+     * stay as the host's `provideLoomLabels` vocabulary left them, and then as
+     * Loom's English.
+     *
+     * The per-instance case is a bar counting something a percentage is the
+     * wrong reading of: `value: ({ value, max }) => \`Step ${value} of ${max}\``.
+     */
+    labels?: LabelOverrides<ProgressLabels>;
+}> & Readonly<{}>, {
+    size: ProgressSize;
     max: number;
+    showValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
 //# sourceMappingURL=Progress.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Progress/Progress.vue"],"names":[],"mappings":"AAgGA;;;;;;;;;;;GAWG;AACH,KAAK,WAAW,GAAG;IACf,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA+HJ,QAAA,MAAM,YAAY;;;SApIR,MAAM;6EAwId,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Progress.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Progress/Progress.vue"],"names":[],"mappings":"AA4PA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cAAc;IAC7B,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,iFAAiF;IACjF,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,cAG7B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,eAAO,MAAM,gBAAgB;;8EAS3B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAgBd,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,4GAA4G;WACrG,YAAY;IACnB,uHAAuH;gBAC3G,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;;;;OAOG;aACM,cAAc,CAAC,cAAc,CAAC;;;;IApBvC,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,4GAA4G;WACrG,YAAY;IACnB,uHAAuH;gBAC3G,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;;;;OAOG;aACM,cAAc,CAAC,cAAc,CAAC;;UAfhC,YAAY;SAFb,MAAM;eAIA,OAAO;6EAoPnB,CAAC"}

package/dist/primitives/Progress/Progress.vue_vue_type_script_setup_true_lang.js

@@ -1,29 +1,65 @@
 import { cn } from "../../lib/cn.js";
-import { computed, createBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { useLabels } from "../../lib/labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ProgressIndicator, ProgressRoot } from "reka-ui";
+import { cva } from "class-variance-authority";
 //#region src/primitives/Progress/Progress.vue?vue&type=script&setup=true&lang.ts
 /**
 * Progress — determinate progress bar for a task whose extent as a percentage
 * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the
 * *indeterminate* state — an empty track, since there is no percentage yet to
 * paint. For a wait of unknown duration with no percentage at all, use
-* Spinner instead of guessing a Progress value.
+* Spinner instead of guessing a Progress value. For the same number drawn as
+* a ring — a dashboard tile, a quota, a score where the circle is the visual
+* — use RadialProgress, which mirrors this contract exactly.
 *
 * Built on Reka UI's Progress: role="progressbar" + aria-valuenow/min/max set
 * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto
 * ProgressRoot (fallthrough overrides Reka's own generated "`NN%`" label) so
 * the accessible name describes *what* is loading, not just how much.
 */
+/**
+* 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 PROGRESS_LABELS = {
+	value: ({ value, max }) => `${String(Math.round(value / max * 100))}%`,
+	indeterminate: "—"
+};
+var progressVariants = cva("relative w-full overflow-hidden rounded-full bg-muted", {
+	variants: { size: {
+		sm: "h-1",
+		md: "h-2",
+		lg: "h-3"
+	} },
+	defaultVariants: { size: "md" }
+});
 var Progress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "Progress",
 	props: {
 		modelValue: {},
 		max: { default: 100 },
+		size: { default: "md" },
+		showValue: {
+			type: Boolean,
+			default: false
+		},
 		ariaLabel: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		labels: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
+		const text = useLabels("progress", PROGRESS_LABELS, () => props.labels);
+		/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */
+		const VALUE_TEXT = {
+			sm: "text-micro",
+			md: "text-xs",
+			lg: "text-sm"
+		};
+		const { attrs, rest } = useSplitAttrs();
 		/**
 		* The value the bar itself is given, clamped into [0, max]; null while
 		* indeterminate. The clamp has to happen here rather than only on the way to
@@ -35,33 +71,63 @@ var Progress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const value = computed(() => props.modelValue === null || props.modelValue === void 0 ? null : Math.min(Math.max(props.modelValue, 0), props.max));
 		/** Percentage 0–100, derived from the clamped value; null while indeterminate. */
 		const pct = computed(() => value.value === null ? null : value.value / props.max * 100);
+		/**
+		* Everything ProgressRoot is given in both branches of the template. `rest`
+		* lands last so a caller passing a bare `aria-label` attribute still wins over
+		* the prop, which is the precedence Vue's own fallthrough gave before this
+		* component took the attributes over by hand.
+		*/
+		const rootAttrs = computed(() => ({
+			modelValue: value.value,
+			max: props.max,
+			"aria-label": props.ariaLabel,
+			"aria-labelledby": props.ariaLabelledby,
+			...rest.value
+		}));
+		const indicatorClass = computed(() => cn("h-full", pct.value === 100 ? "bg-success" : "bg-primary", pct.value === null && "w-1/3 animate-progress-indeterminate rounded-full"));
+		const indicatorStyle = computed(() => pct.value === null ? void 0 : {
+			transition: "transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)",
+			transform: `translateX(-${100 - pct.value}%)`
+		});
+		/**
+		* An indeterminate bar has no percentage, so the readout prints the placeholder
+		* rather than the `0%` a naive `pct ?? 0` would produce — "we do not know yet"
+		* and "none of it is done" are different facts, and only one of them is true.
+		*
+		* The determinate branch hands over `value` and `max` rather than the
+		* percentage it already computed for the transform: rounding, the position of
+		* the per-cent sign and the shape of the digits are all the host's, and `pct`
+		* is a division this component happens to need for the paint.
+		*/
+		const readout = computed(() => value.value === null ? text.value.indeterminate : text.value.value({
+			value: value.value,
+			max: props.max
+		}));
 		__expose({ pct });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ProgressRoot), {
-				"model-value": value.value,
-				max: __props.max,
-				"aria-label": __props.ariaLabel,
-				"aria-labelledby": __props.ariaLabelledby,
-				class: "relative h-2 w-full overflow-hidden rounded-full bg-muted"
-			}, {
+			return !__props.showValue ? (openBlock(), createBlock(unref(ProgressRoot), mergeProps({ key: 0 }, rootAttrs.value, { class: unref(cn)(unref(progressVariants)({ size: __props.size }), unref(attrs).class) }), {
+				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
+					class: normalizeClass(indicatorClass.value),
+					style: normalizeStyle(indicatorStyle.value)
+				}, null, 8, ["class", "style"])]),
+				_: 1
+			}, 16, ["class"])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(cn)("flex w-full items-center gap-3", unref(attrs).class))
+			}, [createVNode(unref(ProgressRoot), mergeProps(rootAttrs.value, { class: unref(cn)(unref(progressVariants)({ size: __props.size }), "w-auto min-w-0 flex-1") }), {
 				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
-					class: normalizeClass(unref(cn)("h-full", pct.value === 100 ? "bg-success" : "bg-primary", pct.value === null && "w-1/3 animate-progress-indeterminate rounded-full")),
-					style: normalizeStyle(pct.value === null ? void 0 : {
-						transition: "transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)",
-						transform: `translateX(-${100 - pct.value}%)`
-					})
+					class: normalizeClass(indicatorClass.value),
+					style: normalizeStyle(indicatorStyle.value)
 				}, null, 8, ["class", "style"])]),
 				_: 1
-			}, 8, [
-				"model-value",
-				"max",
-				"aria-label",
-				"aria-labelledby"
-			]);
+			}, 16, ["class"]), createElementVNode("span", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(cn)("tabular w-10 shrink-0 text-right text-muted-foreground", VALUE_TEXT[__props.size]))
+			}, toDisplayString(readout.value), 3)], 2));
 		};
 	}
 });
 //#endregion
-export { Progress_vue_vue_type_script_setup_true_lang_default as default };
+export { PROGRESS_LABELS, Progress_vue_vue_type_script_setup_true_lang_default as default, progressVariants };
 
 //# sourceMappingURL=Progress.vue_vue_type_script_setup_true_lang.js.map