@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue.d.ts

@@ -1,3 +1,5 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { BreadcrumbLabels } from "../../../labels/src/index";
 /** The visible label text and optional link target for one step in the trail. */
 export interface BreadcrumbItem {
     /** The visible label text. */
@@ -7,6 +9,12 @@ export interface BreadcrumbItem {
 }
 /** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */
 export type BreadcrumbSeparator = "/" | "\\" | ">" | "→" | "chevron";
+/**
+ * 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 rather than a transcription of it.
+ */
+export declare const BREADCRUMB_LABELS: BreadcrumbLabels;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
@@ -14,11 +22,31 @@ declare const __VLS_export: import("vue").DefineComponent<{
     items: BreadcrumbItem[];
     /** Visual separator between items. `chevron` renders an inline SVG arrow. */
     separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The breadcrumb trail, last item is the current page. */
     items: BreadcrumbItem[];
     /** Visual separator between items. `chevron` renders an inline SVG arrow. */
     separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
 }> & Readonly<{}>, {
     separator: BreadcrumbSeparator;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,10 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
 import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
 //#region packages/primitives/breadcrumb/src/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { "aria-label": "Breadcrumb" };
+var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = { class: "flex items-center gap-1.5 text-sm" };
 var _hoisted_3 = {
 	key: 0,
@@ -19,15 +21,24 @@ var _hoisted_3 = {
 var _hoisted_4 = { key: 1 };
 var _hoisted_5 = { key: 2 };
 var _hoisted_6 = ["href"];
+/**
+* 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 rather than a transcription of it.
+*/
+var BREADCRUMB_LABELS = { label: "Breadcrumb" };
 var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Breadcrumb",
 	props: {
 		items: {},
-		separator: { default: "/" }
+		separator: { default: "/" },
+		labels: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const text = useLabels("breadcrumb", BREADCRUMB_LABELS, () => props.labels);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": unref(text).label }, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("li", {
 					key: 0,
 					"aria-hidden": "true",
@@ -39,11 +50,11 @@ var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					href: item.href,
 					class: normalizeClass(unref(cn)("inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast"))
 				}, toDisplayString(item.label), 11, _hoisted_6)]))], 64);
-			}), 128))])]);
+			}), 128))])], 8, _hoisted_1);
 		};
 	}
 });
 //#endregion
-export { Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
+export { BREADCRUMB_LABELS, Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
 
 //# sourceMappingURL=Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nwithDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n  }>(),\n  { separator: \"/\" },\n);\n</script>\n\n<template>\n  <nav aria-label=\"Breadcrumb\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCE,OAAA,UAAA,GAAA,mBAyCM,OAzCN,YAyCM,CAxCJ,mBAuCK,MAvCL,YAuCK,EAtCH,UAAA,IAAA,GAAA,mBAqCW,UAAA,MAAA,WArCuB,QAAA,QAAhB,MAAM,UAAK;IAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CACxC,QAAK,KAAf,UAAA,GAAA,mBAgBK,MAAA;;KAhBgB,eAAY;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0BAAA,CAAA;IAExC,GAAA,CAAA,QAAA,cAAS,aADjB,UAAA,GAAA,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA0B,QAAA,EAApB,GAAE,gBAAe,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAEzB,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIrB,UAAU,QAAA,MAAM,SAAM,KAAhC,UAAA,GAAA,mBAIK,MAAA,YAAA,CAHH,mBAEO,QAAA;KAFD,gBAAa;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6BAAA,CAAA;IAC/B,GAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,MAGjB,UAAA,GAAA,mBAWK,MAAA,YAAA,CAVH,mBASI,KAAA;KARD,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,8GAAA,CAAA;IAMtB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BreadcrumbLabels } from \"@ecoma-io/loom-labels\";\n\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const BREADCRUMB_LABELS: BreadcrumbLabels = {\n  label: \"Breadcrumb\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n    /**\n     * Names for what this component says out loud, as any subset of\n     * `BreadcrumbLabels` — 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: a page that carries two trails —\n     * above and below an article, say — names each one for where it stands,\n     * which an application-wide vocabulary alone cannot do.\n     */\n    labels?: LabelOverrides<BreadcrumbLabels>;\n  }>(),\n  { separator: \"/\" },\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(\"breadcrumb\", BREADCRUMB_LABELS, () => props.labels);\n</script>\n\n<template>\n  <nav :aria-label=\"text.label\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,oBAAsC,EACjD,OAAO,aACT;;;;;;;;;EAaA,MAAM,QAAQ;EAuBd,MAAM,OAAO,UAAU,cAAc,yBAAyB,MAAM,MAAM;;GAIxE,OAAA,UAAA,GAAA,mBAyCM,OAAA,EAzCA,cAAY,MAAA,IAAA,CAAI,CAAC,MAAA,GAAA,CACrB,mBAuCK,MAvCL,YAuCK,EAtCH,UAAA,IAAA,GAAA,mBAqCW,UAAA,MAAA,WArCuB,QAAA,QAAhB,MAAM,UAAK;IAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CACxC,QAAK,KAAf,UAAA,GAAA,mBAgBK,MAAA;;KAhBgB,eAAY;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0BAAA,CAAA;IAExC,GAAA,CAAA,QAAA,cAAS,aADjB,UAAA,GAAA,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA0B,QAAA,EAApB,GAAE,gBAAe,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAEzB,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIrB,UAAU,QAAA,MAAM,SAAM,KAAhC,UAAA,GAAA,mBAIK,MAAA,YAAA,CAHH,mBAEO,QAAA;KAFD,gBAAa;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6BAAA,CAAA;IAC/B,GAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,MAGjB,UAAA,GAAA,mBAWK,MAAA,YAAA,CAVH,mBASI,KAAA;KARD,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,8GAAA,CAAA;IAMtB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/packages/primitives/breadcrumb/src/index.d.ts

@@ -1,3 +1,4 @@
-export { default } from "./Breadcrumb.vue";
+export { default, BREADCRUMB_LABELS } from "./Breadcrumb.vue";
 export type { BreadcrumbItem, BreadcrumbSeparator } from "./Breadcrumb.vue";
+export type { BreadcrumbLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/breadcrumb/src/index.js

@@ -1,2 +1,3 @@
+import { BREADCRUMB_LABELS } from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
 import Breadcrumb_default from "./Breadcrumb.js";
-export { Breadcrumb_default as default };
+export { BREADCRUMB_LABELS, Breadcrumb_default as default };

package/dist/packages/primitives/button/src/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../../../packages/primitives/button/src/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n  \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n  secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n  subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n  outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n  ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n  destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n *   • hover lifts by fill, not by shadow\n *   • active presses down (scale 0.97) — physical, causal feedback\n *   • focus blooms the primary ring\n *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n *     and out, a progress arc springs in, the loading text rises last — and\n *     both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n    \"rounded-md text-sm font-medium\",\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: buttonVariantClasses,\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 px-4\",\n        lg: \"h-11 px-6 text-base\",\n        icon: \"h-9 w-9 p-0\",\n        // A square icon button for dense rows, matching `sm`'s height so a row\n        // action lines up with that row's text controls. Still 32px — well\n        // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n        // here costs no reachability. It exists because consumers were\n        // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n        // which silently re-litigates the target-size question at every call\n        // site.\n        \"icon-sm\": \"h-8 w-8 p-0\",\n      } satisfies Record<ButtonSize, string>,\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How much emphasis the action carries. */\n    variant?: ButtonVariant;\n    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n    size?: ButtonSize;\n    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n    loading?: boolean;\n    /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n    loadingText?: string;\n    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :disabled=\"disabled || loading\"\n    :data-loading=\"loading || undefined\"\n    :aria-busy=\"loading || undefined\"\n    :class=\"\n      cn(\n        buttonVariants({ variant, size }),\n        'group',\n        // Drained, not dimmed. `opacity-50` here was the library's most visible\n        // instance of the mistake, because a button is nothing but a label on a\n        // fill and the dim took both together: measured on the built site, a\n        // disabled `primary` label came out at 1.62:1 against its own faded fill\n        // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n        // reachable by recolouring the label, since the fade multiplied whatever\n        // colour it was given.\n        //\n        // One neutral treatment for all six variants rather than six drained\n        // pairs: the fill is what carries a variant's emphasis, and an\n        // unavailable button has no emphasis to carry. It is the same well Chip\n        // and Stepper drain to, so an unavailable control looks the same\n        // wherever it appears. Every variant still changes visibly on the way\n        // in — the two filled ones give up their hue, the three transparent ones\n        // gain a fill — and the native `disabled` attribute carries the fact to\n        // assistive tech, so none of it rests on colour alone.\n        //\n        // `border-border` and not the strong weight, which is what `outline`\n        // used to take here. `theme.css` reserves the strong hairline for a\n        // block that must *assert* its edge, and an unavailable control is the\n        // one thing that must not; slackening from `input` to the lighter\n        // `border` is also the same step every other unavailable control in the\n        // library now makes, so a disabled Button beside a disabled TextField\n        // wears the same rim rather than a heavier one.\n        disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n  >\n    <!-- The shimmer sweep, while loading. -->\n    <span\n      v-if=\"loading\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n    />\n    <!-- The kinetic swap. Both layers live in the same grid cell, so the\n         button keeps the width of the wider one and nothing jumps mid-swap.\n         Only the layer for the current state is exposed to assistive\n         technology; the other is aria-hidden, because opacity alone does not\n         hide anything from a screen reader. -->\n    <span class=\"inline-grid place-items-center\">\n      <!-- Beat 1 — the label rolls up and out. -->\n      <span\n        :aria-hidden=\"loading || undefined\"\n        class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n      >\n        <slot />\n      </span>\n      <span\n        :aria-hidden=\"!loading || undefined\"\n        class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n      >\n        <!-- Beat 2 — the progress arc springs in from below. The spinning svg\n             sits inside a wrapper because `animate-spin` owns `transform`: the\n             entry scale and translate have to live on a separate element, or\n             the spin keyframe would overwrite them. It is the same arc the\n             standalone Spinner draws, inlined and aria-hidden — Spinner's\n             role=\"status\" contract is wrong inside an aria-busy button, where\n             it would announce the state twice. -->\n        <span\n          class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n        >\n          <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n            <path\n              class=\"fill-current opacity-75\"\n              d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n            />\n          </svg>\n        </span>\n        <!-- Beat 3 — the loading text rises last. The stagger delay applies on\n             entry only (exit keeps delay 0, so the film cuts out clean), and\n             it is cancelled under reduced motion so the instant swap is not\n             lagged by a delay nobody asked for. -->\n        <span\n          v-if=\"loadingText\"\n          class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n        >\n          {{ loadingText }}\n        </span>\n      </span>\n    </span>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../../../packages/primitives/button/src/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n  \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n  secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n  subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n  outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n  ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n  destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n *   • hover lifts by fill, not by shadow\n *   • active presses down (scale 0.97) — physical, causal feedback\n *   • focus blooms the primary ring\n *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n *     and out, a progress arc springs in, the loading text rises last — and\n *     both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n    \"rounded-md text-sm font-medium\",\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: buttonVariantClasses,\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 px-4\",\n        lg: \"h-11 px-6 text-base\",\n        icon: \"h-9 w-9 p-0\",\n        // A square icon button for dense rows, matching `sm`'s height so a row\n        // action lines up with that row's text controls. Still 32px — well\n        // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n        // here costs no reachability. It exists because consumers were\n        // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n        // which silently re-litigates the target-size question at every call\n        // site.\n        \"icon-sm\": \"h-8 w-8 p-0\",\n      } satisfies Record<ButtonSize, string>,\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How much emphasis the action carries. */\n    variant?: ButtonVariant;\n    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n    size?: ButtonSize;\n    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n    loading?: boolean;\n    /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n    loadingText?: string;\n    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :disabled=\"disabled || loading\"\n    :data-loading=\"loading || undefined\"\n    :aria-busy=\"loading || undefined\"\n    :class=\"\n      cn(\n        buttonVariants({ variant, size }),\n        'group',\n        // Drained, not dimmed. `opacity-50` here was the library's most visible\n        // instance of the mistake, because a button is nothing but a label on a\n        // fill and the dim took both together: measured on the built site, a\n        // disabled `primary` label came out at 1.62:1 against its own faded fill\n        // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n        // reachable by recolouring the label, since the fade multiplied whatever\n        // colour it was given.\n        //\n        // One neutral treatment for all six variants rather than six drained\n        // pairs: the fill is what carries a variant's emphasis, and an\n        // unavailable button has no emphasis to carry. It is the same well Chip\n        // and Stepper drain to, so an unavailable control looks the same\n        // wherever it appears. Every variant still changes visibly on the way\n        // in — the two filled ones give up their hue, the three transparent ones\n        // gain a fill — and the native `disabled` attribute carries the fact to\n        // assistive tech, so none of it rests on colour alone.\n        //\n        // `border-border` and not the strong weight, which is what `outline`\n        // used to take here. `theme.css` reserves the strong hairline for a\n        // block that must *assert* its edge, and an unavailable control is the\n        // one thing that must not; slackening from `input` to the lighter\n        // `border` is also the same step every other unavailable control in the\n        // library now makes, so a disabled Button beside a disabled TextField\n        // wears the same rim rather than a heavier one.\n        disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n  >\n    <!-- The shimmer sweep, while loading. -->\n    <span\n      v-if=\"loading\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n    />\n    <!-- The kinetic swap. Both layers live in the same grid cell, so the\n         button keeps the width of the wider one and nothing jumps mid-swap.\n         Only the layer for the current state is exposed to assistive\n         technology; the other is aria-hidden, because opacity alone does not\n         hide anything from a screen reader. -->\n    <span class=\"inline-grid place-items-center\">\n      <!-- Beat 1 — the label rolls up and out. -->\n      <span\n        :aria-hidden=\"loading || undefined\"\n        class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n      >\n        <slot />\n      </span>\n      <span\n        :aria-hidden=\"!loading || undefined\"\n        class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n      >\n        <!-- Beat 2 — the progress arc springs in from below. The spinning svg\n             sits inside a wrapper because `animate-spin` owns `transform`: the\n             entry scale and translate have to live on a separate element, or\n             the spin keyframe would overwrite them. It is the same arc the\n             standalone Spinner draws, inlined and aria-hidden — Spinner's\n             role=\"status\" contract is wrong inside an aria-busy button, where\n             it would announce the state twice. -->\n        <span\n          class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n        >\n          <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n            <path\n              class=\"fill-current opacity-75\"\n              d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n            />\n          </svg>\n        </span>\n        <!-- Beat 3 — the loading text rises last. The stagger delay applies on\n             entry only (exit keeps delay 0, so the film cuts out clean), and\n             it is cancelled under reduced motion so the instant swap is not\n             lagged by a delay nobody asked for.\n\n             The raw 100ms/75ms pair is deliberate: the motion tokens bracket\n             this beat without landing on it — `fast` (140ms) is beat 1's own\n             exit duration, so sharing it would flatten the stagger into one\n             simultaneous move, and `instant` (80ms) reads as a flicker. The\n             choreography only makes sense between the two rungs, which no\n             token expresses; if a delay token ever lands in theme.css, this\n             is the first candidate to move onto it. -->\n        <span\n          v-if=\"loadingText\"\n          class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n        >\n          {{ loadingText }}\n        </span>\n      </span>\n    </span>\n  </button>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/button/src/Button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/button/src/Button.vue"],"names":[],"mappings":"AA+MA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOQ,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;8EA4B1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;IAXpC,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;UAR7B,UAAU;UAQV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAFzB,OAAO;aARR,aAAa;aAIb,OAAO;;cAqKP,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/button/src/Button.vue"],"names":[],"mappings":"AAuNA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACvB,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOQ,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;8EA4B1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;IAXpC,4CAA4C;cAClC,aAAa;IACvB,0EAA0E;WACnE,UAAU;IACjB,+EAA+E;cACrE,OAAO;IACjB,wEAAwE;kBAC1D,MAAM;IACpB,sGAAsG;eAC3F,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;UAR7B,UAAU;UAQV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAFzB,OAAO;aARR,aAAa;aAIb,OAAO;;cAqKP,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/button/src/Button.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/button/src/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n  \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n  secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n  subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n  outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n  ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n  destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n *   • hover lifts by fill, not by shadow\n *   • active presses down (scale 0.97) — physical, causal feedback\n *   • focus blooms the primary ring\n *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n *     and out, a progress arc springs in, the loading text rises last — and\n *     both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n    \"rounded-md text-sm font-medium\",\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: buttonVariantClasses,\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 px-4\",\n        lg: \"h-11 px-6 text-base\",\n        icon: \"h-9 w-9 p-0\",\n        // A square icon button for dense rows, matching `sm`'s height so a row\n        // action lines up with that row's text controls. Still 32px — well\n        // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n        // here costs no reachability. It exists because consumers were\n        // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n        // which silently re-litigates the target-size question at every call\n        // site.\n        \"icon-sm\": \"h-8 w-8 p-0\",\n      } satisfies Record<ButtonSize, string>,\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How much emphasis the action carries. */\n    variant?: ButtonVariant;\n    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n    size?: ButtonSize;\n    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n    loading?: boolean;\n    /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n    loadingText?: string;\n    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :disabled=\"disabled || loading\"\n    :data-loading=\"loading || undefined\"\n    :aria-busy=\"loading || undefined\"\n    :class=\"\n      cn(\n        buttonVariants({ variant, size }),\n        'group',\n        // Drained, not dimmed. `opacity-50` here was the library's most visible\n        // instance of the mistake, because a button is nothing but a label on a\n        // fill and the dim took both together: measured on the built site, a\n        // disabled `primary` label came out at 1.62:1 against its own faded fill\n        // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n        // reachable by recolouring the label, since the fade multiplied whatever\n        // colour it was given.\n        //\n        // One neutral treatment for all six variants rather than six drained\n        // pairs: the fill is what carries a variant's emphasis, and an\n        // unavailable button has no emphasis to carry. It is the same well Chip\n        // and Stepper drain to, so an unavailable control looks the same\n        // wherever it appears. Every variant still changes visibly on the way\n        // in — the two filled ones give up their hue, the three transparent ones\n        // gain a fill — and the native `disabled` attribute carries the fact to\n        // assistive tech, so none of it rests on colour alone.\n        //\n        // `border-border` and not the strong weight, which is what `outline`\n        // used to take here. `theme.css` reserves the strong hairline for a\n        // block that must *assert* its edge, and an unavailable control is the\n        // one thing that must not; slackening from `input` to the lighter\n        // `border` is also the same step every other unavailable control in the\n        // library now makes, so a disabled Button beside a disabled TextField\n        // wears the same rim rather than a heavier one.\n        disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n  >\n    <!-- The shimmer sweep, while loading. -->\n    <span\n      v-if=\"loading\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n    />\n    <!-- The kinetic swap. Both layers live in the same grid cell, so the\n         button keeps the width of the wider one and nothing jumps mid-swap.\n         Only the layer for the current state is exposed to assistive\n         technology; the other is aria-hidden, because opacity alone does not\n         hide anything from a screen reader. -->\n    <span class=\"inline-grid place-items-center\">\n      <!-- Beat 1 — the label rolls up and out. -->\n      <span\n        :aria-hidden=\"loading || undefined\"\n        class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n      >\n        <slot />\n      </span>\n      <span\n        :aria-hidden=\"!loading || undefined\"\n        class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n      >\n        <!-- Beat 2 — the progress arc springs in from below. The spinning svg\n             sits inside a wrapper because `animate-spin` owns `transform`: the\n             entry scale and translate have to live on a separate element, or\n             the spin keyframe would overwrite them. It is the same arc the\n             standalone Spinner draws, inlined and aria-hidden — Spinner's\n             role=\"status\" contract is wrong inside an aria-busy button, where\n             it would announce the state twice. -->\n        <span\n          class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n        >\n          <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n            <path\n              class=\"fill-current opacity-75\"\n              d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n            />\n          </svg>\n        </span>\n        <!-- Beat 3 — the loading text rises last. The stagger delay applies on\n             entry only (exit keeps delay 0, so the film cuts out clean), and\n             it is cancelled under reduced motion so the instant swap is not\n             lagged by a delay nobody asked for. -->\n        <span\n          v-if=\"loadingText\"\n          class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n        >\n          {{ loadingText }}\n        </span>\n      </span>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAa,uBAAuB;CAClC,SAAS;CACT,WAAW;CACX,QAAQ;CACR,SAAS;CACT,OAAO;CACP,aAAa;AACf;;;;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GAQN,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CACF;;;;;;;;;;;;;;;;;;;GA0BE,OAAA,UAAA,GAAA,mBA0FS,UAAA;IAzFN,MAAM,QAAA;IACN,UAAU,QAAA,YAAY,QAAA;IACtB,gBAAc,QAAA,WAAW,KAAA;IACzB,aAAW,QAAA,WAAW,KAAA;IACtB,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,cAAA,CAAc,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAA,SAAuqD,QAAA,YAAQ,0DAAA,CAAA;GAkChuD,GAAA,CAAA,QAAA,WADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,GAMF,mBAyCO,QAzCP,YAyCO,CAvCL,mBAKO,QAAA;IAJJ,eAAa,QAAA,WAAW,KAAA;IACzB,OAAM;GAEN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAEV,mBAgCO,QAAA;IA/BJ,eAAW,CAAG,QAAA,WAAW,KAAA;IAC1B,OAAM;GASN,GAAA,CAAA,OAAA,OAAA,OAAA,KAAA,mBAUO,QAAA,EATL,OAAM,+LAA8L,GAAA,CAEpM,mBAMM,OAAA;IAND,OAAM;IAAuB,SAAQ;IAAY,MAAK;IAAO,eAAY;GAC5E,GAAA,CAAA,mBAAoF,UAAA;IAA5E,OAAM;IAA4B,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,gBAAa;GAC9E,CAAA,GAAA,mBAGE,QAAA;IAFA,OAAM;IACN,GAAE;GASA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,IAAA,QAAA,eADR,UAAA,GAAA,mBAKO,QALP,YAKO,gBADF,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/button/src/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The six weights, and the choice between them is about emphasis rather than\n * colour: `primary` is the one action a screen is asking for, `destructive` is\n * the one it is warning about, and the four between them step down.\n */\nexport type ButtonVariant =\n  \"primary\" | \"secondary\" | \"subtle\" | \"outline\" | \"ghost\" | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\n/**\n * One row per rest-state variant, naming the fill and the label token the\n * variant paints. Kept separate from the `cva` call because it is also the\n * contract `Button.contrast.test.ts` reads: that file derives every variant's\n * pairing from here, so a variant added to the map is measured on arrival\n * rather than when someone remembers to add a row to a test. The two halves\n * — this map and the `cva` call consuming it — cannot drift apart, because\n * `cva` is handed this very object.\n *\n * `satisfies` is what keeps this map and the union honest. The union above is\n * the name a consumer imports and the documentation prints; the map below is\n * the classes. Adding a member to one and not the other stops compiling, so\n * neither can be the stale copy of the other.\n */\nexport const buttonVariantClasses = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\",\n  secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/70\",\n  subtle: \"bg-transparent text-foreground hover:bg-subtle\",\n  outline: \"border border-input bg-transparent text-foreground hover:bg-subtle\",\n  ghost: \"bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground\",\n  destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n} satisfies Record<ButtonVariant, string>;\n\n/**\n * Button — the workhorse, and the primitive that encodes Loom's press\n * language:\n *\n *   • hover lifts by fill, not by shadow\n *   • active presses down (scale 0.97) — physical, causal feedback\n *   • focus blooms the primary ring\n *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up\n *     and out, a progress arc springs in, the loading text rises last — and\n *     both layers share one grid cell, so the width never jumps mid-film\n *\n * Unavailable is painted in colours rather than dimmed, and it is keyed off the\n * `disabled` prop rather than off the DOM disabled state — a loading button is\n * also DOM-disabled yet has to read as \"working\", not \"unavailable\". See the\n * drained treatment on the root element for the measurements that removed the\n * dim.\n */\nexport const buttonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none\",\n    \"rounded-md text-sm font-medium\",\n    \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n    \"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: buttonVariantClasses,\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 px-4\",\n        lg: \"h-11 px-6 text-base\",\n        icon: \"h-9 w-9 p-0\",\n        // A square icon button for dense rows, matching `sm`'s height so a row\n        // action lines up with that row's text controls. Still 32px — well\n        // over the 24px minimum target size (WCAG 2.2 SC 2.5.8) — so density\n        // here costs no reachability. It exists because consumers were\n        // reaching for `size=\"icon\"` and then hand-overriding `class=\"h-8 w-8\"`,\n        // which silently re-litigates the target-size question at every call\n        // site.\n        \"icon-sm\": \"h-8 w-8 p-0\",\n      } satisfies Record<ButtonSize, string>,\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How much emphasis the action carries. */\n    variant?: ButtonVariant;\n    /** Control height. `icon` and `icon-sm` are square, for a glyph alone. */\n    size?: ButtonSize;\n    /** Locks the button and plays the kinetic swap (label → arc + loadingText). */\n    loading?: boolean;\n    /** Text shown beside the progress arc while loading, e.g. \"Saving…\". */\n    loadingText?: string;\n    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"primary\", size: \"md\", loading: false, disabled: false, type: \"button\" },\n);\n</script>\n\n<template>\n  <button\n    :type=\"type\"\n    :disabled=\"disabled || loading\"\n    :data-loading=\"loading || undefined\"\n    :aria-busy=\"loading || undefined\"\n    :class=\"\n      cn(\n        buttonVariants({ variant, size }),\n        'group',\n        // Drained, not dimmed. `opacity-50` here was the library's most visible\n        // instance of the mistake, because a button is nothing but a label on a\n        // fill and the dim took both together: measured on the built site, a\n        // disabled `primary` label came out at 1.62:1 against its own faded fill\n        // and a disabled `outline` at 3.14:1 on the page ground. Neither is\n        // reachable by recolouring the label, since the fade multiplied whatever\n        // colour it was given.\n        //\n        // One neutral treatment for all six variants rather than six drained\n        // pairs: the fill is what carries a variant's emphasis, and an\n        // unavailable button has no emphasis to carry. It is the same well Chip\n        // and Stepper drain to, so an unavailable control looks the same\n        // wherever it appears. Every variant still changes visibly on the way\n        // in — the two filled ones give up their hue, the three transparent ones\n        // gain a fill — and the native `disabled` attribute carries the fact to\n        // assistive tech, so none of it rests on colour alone.\n        //\n        // `border-border` and not the strong weight, which is what `outline`\n        // used to take here. `theme.css` reserves the strong hairline for a\n        // block that must *assert* its edge, and an unavailable control is the\n        // one thing that must not; slackening from `input` to the lighter\n        // `border` is also the same step every other unavailable control in the\n        // library now makes, so a disabled Button beside a disabled TextField\n        // wears the same rim rather than a heavier one.\n        disabled && 'border-border bg-muted text-muted-foreground shadow-none',\n      )\n    \"\n  >\n    <!-- The shimmer sweep, while loading. -->\n    <span\n      v-if=\"loading\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-md bg-[linear-gradient(110deg,transparent_35%,--alpha(var(--color-primary)/25%)_50%,transparent_65%)] bg-[length:220%_100%] animate-shimmer\"\n    />\n    <!-- The kinetic swap. Both layers live in the same grid cell, so the\n         button keeps the width of the wider one and nothing jumps mid-swap.\n         Only the layer for the current state is exposed to assistive\n         technology; the other is aria-hidden, because opacity alone does not\n         hide anything from a screen reader. -->\n    <span class=\"inline-grid place-items-center\">\n      <!-- Beat 1 — the label rolls up and out. -->\n      <span\n        :aria-hidden=\"loading || undefined\"\n        class=\"[grid-area:1/1] inline-flex items-center gap-2 transition-[opacity,transform] duration-fast ease-out group-data-[loading]:-translate-y-1 group-data-[loading]:opacity-0\"\n      >\n        <slot />\n      </span>\n      <span\n        :aria-hidden=\"!loading || undefined\"\n        class=\"pointer-events-none [grid-area:1/1] inline-flex items-center gap-2\"\n      >\n        <!-- Beat 2 — the progress arc springs in from below. The spinning svg\n             sits inside a wrapper because `animate-spin` owns `transform`: the\n             entry scale and translate have to live on a separate element, or\n             the spin keyframe would overwrite them. It is the same arc the\n             standalone Spinner draws, inlined and aria-hidden — Spinner's\n             role=\"status\" contract is wrong inside an aria-busy button, where\n             it would announce the state twice. -->\n        <span\n          class=\"transition-[opacity,transform] duration-fast ease-spring opacity-0 scale-50 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:scale-100 group-data-[loading]:opacity-100\"\n        >\n          <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"stroke-current opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n            <path\n              class=\"fill-current opacity-75\"\n              d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z\"\n            />\n          </svg>\n        </span>\n        <!-- Beat 3 — the loading text rises last. The stagger delay applies on\n             entry only (exit keeps delay 0, so the film cuts out clean), and\n             it is cancelled under reduced motion so the instant swap is not\n             lagged by a delay nobody asked for.\n\n             The raw 100ms/75ms pair is deliberate: the motion tokens bracket\n             this beat without landing on it — `fast` (140ms) is beat 1's own\n             exit duration, so sharing it would flatten the stagger into one\n             simultaneous move, and `instant` (80ms) reads as a flicker. The\n             choreography only makes sense between the two rungs, which no\n             token expresses; if a delay token ever lands in theme.css, this\n             is the first candidate to move onto it. -->\n        <span\n          v-if=\"loadingText\"\n          class=\"transition-[opacity,transform] duration-100 ease-out opacity-0 translate-y-1 group-data-[loading]:translate-y-0 group-data-[loading]:opacity-100 group-data-[loading]:delay-75 motion-reduce:group-data-[loading]:delay-0\"\n        >\n          {{ loadingText }}\n        </span>\n      </span>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAa,uBAAuB;CAClC,SAAS;CACT,WAAW;CACX,QAAQ;CACR,SAAS;CACT,OAAO;CACP,aAAa;AACf;;;;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GAQN,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CACF;;;;;;;;;;;;;;;;;;;GA0BE,OAAA,UAAA,GAAA,mBAkGS,UAAA;IAjGN,MAAM,QAAA;IACN,UAAU,QAAA,YAAY,QAAA;IACtB,gBAAc,QAAA,WAAW,KAAA;IACzB,aAAW,QAAA,WAAW,KAAA;IACtB,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,cAAA,CAAc,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAA,SAAuqD,QAAA,YAAQ,0DAAA,CAAA;GAkChuD,GAAA,CAAA,QAAA,WADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,GAMF,mBAiDO,QAjDP,YAiDO,CA/CL,mBAKO,QAAA;IAJJ,eAAa,QAAA,WAAW,KAAA;IACzB,OAAM;GAEN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAEV,mBAwCO,QAAA;IAvCJ,eAAW,CAAG,QAAA,WAAW,KAAA;IAC1B,OAAM;GASN,GAAA,CAAA,OAAA,OAAA,OAAA,KAAA,mBAUO,QAAA,EATL,OAAM,+LAA8L,GAAA,CAEpM,mBAMM,OAAA;IAND,OAAM;IAAuB,SAAQ;IAAY,MAAK;IAAO,eAAY;GAC5E,GAAA,CAAA,mBAAoF,UAAA;IAA5E,OAAM;IAA4B,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,gBAAa;GAC9E,CAAA,GAAA,mBAGE,QAAA;IAFA,OAAM;IACN,GAAE;GAiBA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,IAAA,QAAA,eADR,UAAA,GAAA,mBAKO,QALP,YAKO,gBADF,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/button/src/index.js

@@ -1,3 +1,3 @@
-import { buttonVariantClasses, buttonVariants } from "./Button.vue_vue_type_script_setup_true_lang.js";
+import { buttonVariants } from "./Button.vue_vue_type_script_setup_true_lang.js";
 import Button_default from "./Button.js";
-export { buttonVariantClasses, buttonVariants, Button_default as default };
+export { buttonVariants, Button_default as default };

package/dist/packages/primitives/calendar/src/Calendar.js

@@ -0,0 +1,7 @@
+import Calendar_vue_vue_type_script_setup_true_lang_default, { CALENDAR_LABELS } from "./Calendar.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/calendar/src/Calendar.vue
+var Calendar_default = Calendar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CALENDAR_LABELS, Calendar_default as default };
+
+//# sourceMappingURL=Calendar.js.map

package/dist/packages/primitives/calendar/src/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../../../packages/primitives/calendar/src/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CalendarLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English for what this surface speaks of its own account — the two\n * pager names and the selection line — co-located so it tree-shakes with the\n * component that renders it, and exported so a host can build a partial\n * vocabulary against the real thing.\n */\nexport const CALENDAR_LABELS: CalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  chosen: ({ date }) => `${date} chosen.`,\n  cleared: \"No date chosen.\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport {\n  CalendarRoot,\n  CalendarHeader,\n  CalendarHeading,\n  CalendarPrev,\n  CalendarNext,\n  CalendarGrid,\n  CalendarGridHead,\n  CalendarGridRow,\n  CalendarHeadCell,\n  CalendarGridBody,\n  CalendarCell,\n  CalendarCellTrigger,\n} from \"reka-ui\";\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isToday,\n  parseDate,\n  toCalendarDate,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { CALENDAR_PANEL_LABELS } from \"@ecoma-io/loom-labels\";\nimport { formatFullDay } from \"@ecoma-io/loom-labels\";\n\n/**\n * Calendar — a month on a page: a heading naming it, a row of weekday names,\n * and a grid of days a reader browses and picks from directly.\n *\n * **This is not a date picker, and the difference is the whole point.**\n * DatePicker is a field first — a segmented input a reader types into, with a\n * popover calendar as its second path. This is the calendar alone: no field,\n * no trigger, no open state, nothing to close, and no value echoed anywhere.\n * Reach for it wherever the temporal surface *is* the interface — a booking\n * board's availability grid, a dashboard filter showing the month at all\n * times, a scheduling view a host embeds beside other content.\n *\n * The engine underneath is the same one the four pickers wrap — Reka UI's\n * standalone `CalendarRoot` family — so the month arithmetic, the locale\n * handling and the roving-focus keyboard model are Reka's, not hand-written\n * here. What Loom adds is the value boundary, the label seam and the\n * accessibility decisions documented below.\n *\n * **The model value is a plain ISO date string, `\"YYYY-MM-DD\"`** — parsed on\n * the way in, re-serialised on the way out, exactly as DatePicker draws the\n * same boundary. A value that does not parse is read as *no date chosen*\n * rather than thrown on; a component library cannot decide that a host's bad\n * data is fatal.\n *\n * Three states live on this surface and each has exactly one owner:\n *\n * - **Selected** — the host's, through `modelValue`. Clicking (or pressing\n *   Enter on) an already-chosen day clears it; there is no field here whose\n *   clearing could be a surprise, and a browsing surface that cannot be\n *   un-picked is worse than one that can.\n * - **Focused** — Reka's, through a roving tabindex across the cell triggers.\n *   It is not a prop: the whole grid is exactly one Tab stop, and the arrow\n *   keys walk it.\n * - **Visible month** — internal, deliberately uncontrolled in this release.\n *   Paging buttons move it; selecting a day does not navigate anything, close\n *   anything or move focus. A host that needs to drive the view gets a\n *   placeholder prop when a use case asks for one, not before.\n *\n * **Timezone assumptions:** everything here operates on bare calendar dates.\n * There are no instants and no conversions — \"today\" resolves against the\n * host's local timezone via `getLocalTimeZone()`, which is the only timezone\n * reading this component ever makes.\n *\n * **Range selection is out of scope here by design.** A future\n * `RangeCalendar` lands as its own sibling primitive — the house precedent is\n * DatePicker and DateRangePicker, separate components sharing an engine,\n * because a span has a different model from a point and pretending otherwise\n * produces a control wrong at both ends.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means\n     * no date is chosen. The explicit `| undefined` is what lets `v-model`\n     * bind a ref that clears — clicking the chosen day again emits\n     * `undefined`, and a plain optional prop refuses to take it back.\n     */\n    modelValue?: string | undefined;\n    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */\n    min?: string;\n    /** The latest choosable date, same ISO format. Days after it are announced disabled and skipped by the keyboard. */\n    max?: string;\n    /** BCP 47 tag driving the month and weekday names, each cell's full-date name, and which day a week starts on. */\n    locale?: string;\n    /**\n     * Writing direction of the whole surface: mirrors the pager chevrons and\n     * flips which arrow key moves backwards.\n     *\n     * Absent, it is seeded from the document's own direction — because Reka\n     * never reads the document itself. Left to its own devices it resolves\n     * `dir` through its ConfigProvider context, defaulting `\"ltr\"`, so under\n     * `<html dir=\"rtl\">` with nothing forwarded the `rtl:` chevron classes\n     * still fire off the CSS cascade while the arrow-key sign stays LTR:\n     * visuals and semantics disagreeing on one surface. An explicit prop\n     * wins over the seed, and a host driving direction through Reka's own\n     * ConfigProvider keeps that where the document declares nothing.\n     */\n    dir?: \"ltr\" | \"rtl\";\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `CalendarLabels` — 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: both keys name controls every calendar in the library\n     * pages with, and a language is set once with `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<CalendarLabels>;\n  }>(),\n  { locale: \"en\" },\n);\n\nconst emit = defineEmits<{\n  /** The chosen date as ISO `YYYY-MM-DD`, or `undefined` once the choice has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// Two slots resolved, one of them behind the prop. `text` is this control's\n// own pager vocabulary; the panel slice answers only for the surface's own\n// name (`calendar`), which Reka publishes twice — as the container's\n// `aria-label` and inside a visually-hidden live region a fallthrough\n// attribute could not reach — and which defaults to `\"Event Date\"`, a name\n// for somebody else's application. The per-instance `labels` prop stays\n// exactly `CalendarLabels`: a standalone surface renders no open button, so\n// the rest of that shared slice would be keys nothing on it could say.\nconst text = useLabels(\"calendar\", CALENDAR_LABELS, () => props.labels);\nconst chromeText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS);\n\n// The root is the whole surface, so every fallthrough attribute belongs on it\n// — there is no second node they could sensibly describe. `class` is pulled\n// out of that spread and merged through `cn()` instead: spreading it alongside\n// the root's own `:class` only concatenates the two lists, so a caller's\n// `w-full` would win or lose depending on which utility Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\nfunction fromIso(value: string | undefined): DateValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseDate(value);\n  } catch {\n    return undefined;\n  }\n}\n\n// `toString()` already normalises to the Gregorian ISO form whatever calendar\n// the value carries — a locale such as `th-TH` gives Reka a Buddhist\n// placeholder whose year reads 2569, and it still prints `2026-08-11`. What\n// `toCalendarDate` adds is dropping a time component if one ever arrives.\nfunction toIso(date: DateValue): string {\n  return toCalendarDate(date).toString();\n}\n\n// Reka resolves direction through its ConfigProvider context and defaults\n// `\"ltr\"` — it never reads the document (its `useDirection` is literally\n// `dir || context.dir || \"ltr\"`). Seeding the forwarded direction from the\n// document closes the half-behaviour that leaves behind: chevrons mirrored by\n// CSS, arrows still LTR. Only `\"rtl\"` is ever injected rather than a resolved\n// `\"ltr\"` too — forwarding `\"ltr\"` unconditionally would clobber a\n// ConfigProvider context the host set on purpose, and absence lets Reka's own\n// chain answer. `typeof document` guards the server-side pass that builds the\n// documentation site, where there is no document to read.\nconst resolvedDir = computed(() => {\n  if (props.dir) return props.dir;\n  if (typeof document === \"undefined\") return undefined;\n  return document.documentElement.dir === \"rtl\" ? \"rtl\" : undefined;\n});\n\n// `optional()` rather than four separate bindings: an absent bound forwarded\n// as an explicit `undefined` is still a key Reka sees, and an absent\n// `modelValue` forwarded that way is what turns an uncontrolled surface into\n// a permanently empty one. Dropping the key says what is true — including\n// for `dir`, whose absence defers to Reka's own resolution wherever neither\n// the prop nor the document speaks.\nconst rootValue = computed(() =>\n  optional({\n    modelValue: fromIso(props.modelValue),\n    minValue: fromIso(props.min),\n    maxValue: fromIso(props.max),\n    dir: resolvedDir.value,\n  }),\n);\n\n// The status line below announces by changing, but a live region also\n// announces its content the moment it enters the document — so a calendar\n// mounted with a preselected value would read the chosen date out as if the\n// user had just picked it. `announced` stays false until the first real\n// selection event, and the line is aria-hidden meanwhile: hidden, it says\n// nothing at mount; revealed on the first change, it announces exactly that\n// change. Programmatic `modelValue` sets never fire this handler (a host\n// prop write is not an interaction), so before the first user action they\n// stay silent too — after it, the region is an ordinary live region and\n// speaks real changes from either side, which is correct.\nconst announced = ref(false);\n\nfunction onDateChange(date: DateValue | undefined) {\n  announced.value = true;\n  emit(\"update:modelValue\", date ? toIso(date) : undefined);\n}\n\n// Today is a state, and it may not be carried by the marker dot alone — a\n// reader who cannot see the dot gets `aria-current=\"date\"`, which is the one\n// attribute screen readers already announce for \"this is the current one\".\n// Reka publishes today only as a `data-` attribute and a slot prop, neither of\n// which can reach an attribute binding on the cell itself.\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// The month-and-year heading names the grid, so the two are wired together\n// rather than the grid being an unnamed table of numbers.\nconst headingId = useId();\n\n// Each cell's accessible name is formatted here rather than read off Reka,\n// replacing Reka's own — the same mechanism DateRangePicker's cells rely on:\n// the binding reaches the node as a fallthrough attribute, which Vue merges\n// last, so it replaces rather than competes. A standalone calendar has no\n// input echoing the chosen value back, so the full date is the only thing a\n// screen reader ever says for a day, and it comes from the shared cached\n// formatter rather than a second `Intl` path built for this one component.\nfunction dayLabel(day: DateValue): string {\n  return formatFullDay(props.locale, day);\n}\n\n// A choice announces itself through no attribute of this engine: Reka\n// publishes a selection only as `aria-selected` flipping on a cell under an\n// unmoved focus point, and a flipped attribute announces nothing — there is\n// no field here whose value change would speak instead. DateRangePicker met\n// the identical fieldless-announcement problem with a `role=\"status\"` line,\n// and this mirrors that precedent. It changes exactly when the selection\n// changes, which is what makes it announceable rather than noise.\n//\n// It reads the selection off Reka's own slot rather than off `modelValue`:\n// the two agree once a host binds one, but this surface is usable unbound,\n// and a line wired to the prop would stay silent about exactly the clicks it\n// exists to announce.\nfunction selectionStatus(selected: DateValue | DateValue[] | undefined): string {\n  const value = Array.isArray(selected) ? undefined : selected;\n  return value ? text.value.chosen({ date: dayLabel(value) }) : text.value.cleared;\n}\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays, modelValue: selected }\"\n    v-bind=\"{ ...rootAttrs, ...rootValue }\"\n    :locale=\"locale\"\n    :calendar-label=\"chromeText.calendar\"\n    :class=\"\n      cn(\n        'flex w-fit flex-col gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onDateChange\"\n  >\n    <CalendarHeader class=\"flex items-center justify-between gap-2\">\n      <!-- The two pagers keep `data-[disabled]:opacity-50` where the cells\n           gave it up, and the difference is what is inside them: a chevron and\n           nothing else. Fading a glyph costs a reader nothing, and the buttons\n           carry their name in `aria-label` rather than in dimmed text. -->\n      <CalendarPrev\n        :aria-label=\"text.previousMonth\"\n        class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronLeft class=\"h-4 w-4 rtl:-scale-x-100\" aria-hidden=\"true\" />\n      </CalendarPrev>\n\n      <!-- Paging the calendar changes nothing a reader is looking at except\n           this line, and nothing moves focus — so without the live region the\n           month silently becomes a different month. -->\n      <CalendarHeading\n        :id=\"headingId\"\n        aria-live=\"polite\"\n        class=\"text-sm font-medium text-foreground\"\n      />\n\n      <CalendarNext\n        :aria-label=\"text.nextMonth\"\n        class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronRight class=\"h-4 w-4 rtl:-scale-x-100\" aria-hidden=\"true\" />\n      </CalendarNext>\n    </CalendarHeader>\n\n    <!-- Visually subordinate on purpose — the grid is the interface, and this\n         is its spoken half: what a picker's field would have echoed. -->\n    <p\n      role=\"status\"\n      :aria-hidden=\"announced ? undefined : 'true'\"\n      class=\"text-xs text-muted-foreground\"\n    >\n      {{ selectionStatus(selected) }}\n    </p>\n\n    <CalendarGrid\n      v-for=\"month in grid\"\n      :key=\"month.value.toString()\"\n      role=\"grid\"\n      :aria-labelledby=\"headingId\"\n      class=\"border-collapse select-none\"\n    >\n      <!-- Reka renders `role=\"application\"` here, which hands every key\n            straight to the page and takes the table's own semantics away\n            with it. A calendar is a grid: `role=\"grid\"` is what makes the\n            cells rows and columns to a screen reader rather than 42\n            unrelated buttons, and the arrow-key handling Reka installs on\n            the cells is what a grid promises anyway.\n\n            The rows and cells below are laid out by the table itself\n            rather than by flex, and that is load-bearing: `display: flex`\n            on a `tr` drops its implicit `row` mapping in Chromium and\n            WebKit, which leaves `role=\"gridcell\"` inside a grid with no\n            row between them — a broken grid that looks identical. -->\n      <CalendarGridHead>\n        <CalendarGridRow>\n          <CalendarHeadCell\n            v-for=\"(day, index) in weekDays\"\n            :key=\"index\"\n            class=\"w-9 text-xs font-normal text-muted-foreground\"\n          >\n            {{ day }}\n          </CalendarHeadCell>\n        </CalendarGridRow>\n      </CalendarGridHead>\n\n      <CalendarGridBody>\n        <CalendarGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n          <CalendarCell\n            v-for=\"day in week\"\n            :key=\"day.toString()\"\n            :date=\"day\"\n            class=\"p-0 text-center\"\n          >\n            <!-- The `:aria-label` below replaces one Reka writes inside its\n                  own render function, reaching the DOM node as a fallthrough\n                  attribute that Vue merges last. Removing it falls back not\n                  to English but to the engine's own locale-formatted cell\n                  names. -->\n            <CalendarCellTrigger\n              v-slot=\"{ dayValue, today }\"\n              :day=\"day\"\n              :month=\"month.value\"\n              :aria-label=\"dayLabel(day)\"\n              :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n              class=\"group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[outside-view]:text-muted-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground\"\n            >\n              {{ dayValue }}\n              <!-- Today's second cue. The dot is decoration to a screen\n                   reader — `aria-current` on the cell is what it reads — but\n                   it is the whole cue for a reader who is looking at the\n                   grid, and it is a shape rather than a hue so it survives a\n                   colour deficiency and forced-colors both. -->\n              <span\n                v-if=\"today\"\n                aria-hidden=\"true\"\n                class=\"absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selected]:bg-primary-foreground\"\n              />\n            </CalendarCellTrigger>\n          </CalendarCell>\n        </CalendarGridRow>\n      </CalendarGridBody>\n    </CalendarGrid>\n  </CalendarRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/calendar/src/Calendar.vue.d.ts

@@ -0,0 +1,95 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { CalendarLabels } from "../../../labels/src/index";
+/**
+ * Loom's English for what this surface speaks of its own account — the two
+ * pager names and the selection line — co-located so it tree-shakes with the
+ * component that renders it, and exported so a host can build a partial
+ * vocabulary against the real thing.
+ */
+export declare const CALENDAR_LABELS: CalendarLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means
+     * no date is chosen. The explicit `| undefined` is what lets `v-model`
+     * bind a ref that clears — clicking the chosen day again emits
+     * `undefined`, and a plain optional prop refuses to take it back.
+     */
+    modelValue?: string | undefined;
+    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable date, same ISO format. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the month and weekday names, each cell's full-date name, and which day a week starts on. */
+    locale?: string;
+    /**
+     * Writing direction of the whole surface: mirrors the pager chevrons and
+     * flips which arrow key moves backwards.
+     *
+     * Absent, it is seeded from the document's own direction — because Reka
+     * never reads the document itself. Left to its own devices it resolves
+     * `dir` through its ConfigProvider context, defaulting `"ltr"`, so under
+     * `<html dir="rtl">` with nothing forwarded the `rtl:` chevron classes
+     * still fire off the CSS cascade while the arrow-key sign stays LTR:
+     * visuals and semantics disagreeing on one surface. An explicit prop
+     * wins over the seed, and a host driving direction through Reka's own
+     * ConfigProvider keeps that where the document declares nothing.
+     */
+    dir?: "ltr" | "rtl";
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `CalendarLabels` — 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: both keys name controls every calendar in the library
+     * pages with, and a language is set once with `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<CalendarLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means
+     * no date is chosen. The explicit `| undefined` is what lets `v-model`
+     * bind a ref that clears — clicking the chosen day again emits
+     * `undefined`, and a plain optional prop refuses to take it back.
+     */
+    modelValue?: string | undefined;
+    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable date, same ISO format. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the month and weekday names, each cell's full-date name, and which day a week starts on. */
+    locale?: string;
+    /**
+     * Writing direction of the whole surface: mirrors the pager chevrons and
+     * flips which arrow key moves backwards.
+     *
+     * Absent, it is seeded from the document's own direction — because Reka
+     * never reads the document itself. Left to its own devices it resolves
+     * `dir` through its ConfigProvider context, defaulting `"ltr"`, so under
+     * `<html dir="rtl">` with nothing forwarded the `rtl:` chevron classes
+     * still fire off the CSS cascade while the arrow-key sign stays LTR:
+     * visuals and semantics disagreeing on one surface. An explicit prop
+     * wins over the seed, and a host driving direction through Reka's own
+     * ConfigProvider keeps that where the document declares nothing.
+     */
+    dir?: "ltr" | "rtl";
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `CalendarLabels` — 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: both keys name controls every calendar in the library
+     * pages with, and a language is set once with `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<CalendarLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | undefined) => any;
+}>, {
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Calendar.vue.d.ts.map