@ecoma-io/loom 0.1.1 → 0.2.0

package/dist/primitives/Breadcrumb/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/cn.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+//#region src/primitives/Breadcrumb/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "aria-label": "Breadcrumb" };
+var _hoisted_2 = { class: "flex items-center gap-1.5 text-sm" };
+var _hoisted_3 = {
+	key: 0,
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+var _hoisted_4 = { key: 1 };
+var _hoisted_5 = { key: 2 };
+var _hoisted_6 = ["href"];
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Breadcrumb",
+	props: {
+		items: {},
+		separator: { default: "/" }
+	},
+	setup(__props) {
+		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(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("li", {
+					key: 0,
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("text-muted-foreground/50"))
+				}, [__props.separator === "chevron" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "m9 18 6-6-6-6" }, null, -1)])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.separator), 1)], 64))], 2)) : createCommentVNode("", true), index === __props.items.length - 1 ? (openBlock(), createElementBlock("li", _hoisted_4, [createElementVNode("span", {
+					"aria-current": "page",
+					class: normalizeClass(unref(cn)("text-foreground font-medium"))
+				}, toDisplayString(item.label), 3)])) : (openBlock(), createElementBlock("li", _hoisted_5, [createElementVNode("a", {
+					href: item.href,
+					class: normalizeClass(unref(cn)("text-muted-foreground hover:text-foreground transition-colors duration-fast"))
+				}, toDisplayString(item.label), 11, _hoisted_6)]))], 64);
+			}), 128))])]);
+		};
+	}
+});
+//#endregion
+export { Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Breadcrumb/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 \"../../lib/cn\";\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('text-muted-foreground hover:text-foreground transition-colors duration-fast')\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCE,OAAA,UAAA,GAAA,mBAuCM,OAvCN,YAuCM,CAtCJ,mBAqCK,MArCL,YAqCK,EApCH,UAAA,IAAA,GAAA,mBAmCW,UAAA,MAAA,WAnCuB,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,mBASK,MAAA,YAAA,CARH,mBAOI,KAAA;KAND,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,6EAAA,CAAA;IAItB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/primitives/Button/Button.js

@@ -1,7 +1,7 @@
-import Button_vue_vue_type_script_setup_true_lang_default, { buttonVariants } from "./Button.vue_vue_type_script_setup_true_lang.js";
+import Button_vue_vue_type_script_setup_true_lang_default, { buttonVariantClasses, buttonVariants } from "./Button.vue_vue_type_script_setup_true_lang.js";
 //#region src/primitives/Button/Button.vue
 var Button_default = Button_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { buttonVariants, Button_default as default };
+export { buttonVariantClasses, buttonVariants, Button_default as default };
 
 //# sourceMappingURL=Button.js.map

package/dist/primitives/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/primitives/Button/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 * 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 warp 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 * The 50% dim belongs to a *disabled* button only. It is applied off the\n * `disabled` prop rather than off the DOM disabled state, because a loading\n * button is also DOM-disabled yet has to read as \"working\", not\n * \"unavailable\".\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-[0.97] 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    // `satisfies` is what keeps the two halves honest. The union above is the\n    // 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,\n    // so neither can be the stale copy of the other.\n    variants: {\n      variant: {\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      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 \"../../lib/cn\";\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 — dims to 50% 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=\"cn(buttonVariants({ variant, size }), 'group', disabled && 'opacity-50')\"\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":["../../../src/primitives/Button/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 \"../../lib/cn\";\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":""}

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

@@ -5,21 +5,44 @@
  */
 export type ButtonVariant = "primary" | "secondary" | "subtle" | "outline" | "ghost" | "destructive";
 export type ButtonSize = "sm" | "md" | "lg" | "icon" | "icon-sm";
+/**
+ * One row per rest-state variant, naming the fill and the label token the
+ * variant paints. Kept separate from the `cva` call because it is also the
+ * contract `Button.contrast.test.ts` reads: that file derives every variant's
+ * pairing from here, so a variant added to the map is measured on arrival
+ * rather than when someone remembers to add a row to a test. The two halves
+ * — this map and the `cva` call consuming it — cannot drift apart, because
+ * `cva` is handed this very object.
+ *
+ * `satisfies` is what keeps this map and the union honest. The union above is
+ * the name a consumer imports and the documentation prints; the map below is
+ * the classes. Adding a member to one and not the other stops compiling, so
+ * neither can be the stale copy of the other.
+ */
+export declare const buttonVariantClasses: {
+    primary: string;
+    secondary: string;
+    subtle: string;
+    outline: string;
+    ghost: string;
+    destructive: string;
+};
 /**
  * Button — the workhorse, and the primitive that encodes Loom's press
  * language:
  *
  *   • hover lifts by fill, not by shadow
  *   • active presses down (scale 0.97) — physical, causal feedback
- *   • focus blooms the warp ring
+ *   • focus blooms the primary ring
  *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up
  *     and out, a progress arc springs in, the loading text rises last — and
  *     both layers share one grid cell, so the width never jumps mid-film
  *
- * The 50% dim belongs to a *disabled* button only. It is applied off the
- * `disabled` prop rather than off the DOM disabled state, because a loading
- * button is also DOM-disabled yet has to read as "working", not
- * "unavailable".
+ * Unavailable is painted in colours rather than dimmed, and it is keyed off the
+ * `disabled` prop rather than off the DOM disabled state — a loading button is
+ * also DOM-disabled yet has to read as "working", not "unavailable". See the
+ * drained treatment on the root element for the measurements that removed the
+ * dim.
  */
 export declare const buttonVariants: (props?: ({
     variant?: "outline" | "primary" | "destructive" | "secondary" | "subtle" | "ghost" | null | undefined;
@@ -36,7 +59,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     loading?: boolean;
     /** Text shown beside the progress arc while loading, e.g. "Saving…". */
     loadingText?: string;
-    /** Unavailable rather than busy — dims to 50% and blocks pointer events. */
+    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */
     disabled?: boolean;
     /** The native button type. Defaults to `button`, never an accidental submit. */
     type?: "button" | "submit" | "reset";
@@ -49,16 +72,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     loading?: boolean;
     /** Text shown beside the progress arc while loading, e.g. "Saving…". */
     loadingText?: string;
-    /** Unavailable rather than busy — dims to 50% and blocks pointer events. */
+    /** Unavailable rather than busy — drains the button to the neutral well and blocks pointer events. */
     disabled?: boolean;
     /** The native button type. Defaults to `button`, never an accidental submit. */
     type?: "button" | "submit" | "reset";
 }> & Readonly<{}>, {
     size: ButtonSize;
+    disabled: boolean;
     type: "button" | "submit" | "reset";
     variant: ButtonVariant;
     loading: boolean;
-    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.vue"],"names":[],"mappings":"AAoKA;;;;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;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;8EAuC1B,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,4EAA4E;eACjE,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,4EAA4E;eACjE,OAAO;IAClB,gFAAgF;WACzE,QAAQ,GAAG,QAAQ,GAAG,OAAO;;UAR7B,UAAU;UAQV,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAV1B,aAAa;aAIb,OAAO;cAIN,OAAO;;cAmIR,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":["../../../src/primitives/Button/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;cAMN,OAAO;UAEX,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAV1B,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/primitives/Button/Button.vue_vue_type_script_setup_true_lang.js

@@ -21,37 +21,53 @@ var _hoisted_6 = {
 	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"
 };
 /**
+* One row per rest-state variant, naming the fill and the label token the
+* variant paints. Kept separate from the `cva` call because it is also the
+* contract `Button.contrast.test.ts` reads: that file derives every variant's
+* pairing from here, so a variant added to the map is measured on arrival
+* rather than when someone remembers to add a row to a test. The two halves
+* — this map and the `cva` call consuming it — cannot drift apart, because
+* `cva` is handed this very object.
+*
+* `satisfies` is what keeps this map and the union honest. The union above is
+* the name a consumer imports and the documentation prints; the map below is
+* the classes. Adding a member to one and not the other stops compiling, so
+* neither can be the stale copy of the other.
+*/
+var buttonVariantClasses = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
+	subtle: "bg-transparent text-foreground hover:bg-subtle",
+	outline: "border border-input bg-transparent text-foreground hover:bg-subtle",
+	ghost: "bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground",
+	destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm"
+};
+/**
 * Button — the workhorse, and the primitive that encodes Loom's press
 * language:
 *
 *   • hover lifts by fill, not by shadow
 *   • active presses down (scale 0.97) — physical, causal feedback
-*   • focus blooms the warp ring
+*   • focus blooms the primary ring
 *   • loading plays a kinetic swap under a shimmer sweep: the label rolls up
 *     and out, a progress arc springs in, the loading text rises last — and
 *     both layers share one grid cell, so the width never jumps mid-film
 *
-* The 50% dim belongs to a *disabled* button only. It is applied off the
-* `disabled` prop rather than off the DOM disabled state, because a loading
-* button is also DOM-disabled yet has to read as "working", not
-* "unavailable".
+* Unavailable is painted in colours rather than dimmed, and it is keyed off the
+* `disabled` prop rather than off the DOM disabled state — a loading button is
+* also DOM-disabled yet has to read as "working", not "unavailable". See the
+* drained treatment on the root element for the measurements that removed the
+* dim.
 */
 var buttonVariants = cva([
 	"relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
 	"rounded-md text-sm font-medium",
 	"[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)]",
-	"active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo",
+	"active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo",
 	"disabled:pointer-events-none"
 ], {
 	variants: {
-		variant: {
-			primary: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
-			subtle: "bg-transparent text-foreground hover:bg-subtle",
-			outline: "border border-input bg-transparent text-foreground hover:bg-subtle",
-			ghost: "bg-transparent text-muted-foreground hover:bg-subtle hover:text-foreground",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm"
-		},
+		variant: buttonVariantClasses,
 		size: {
 			sm: "h-8 px-3 text-xs",
 			md: "h-9 px-4",
@@ -91,7 +107,7 @@ var Button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				class: normalizeClass(unref(cn)(unref(buttonVariants)({
 					variant: __props.variant,
 					size: __props.size
-				}), "group", __props.disabled && "opacity-50"))
+				}), "group", __props.disabled && "border-border bg-muted text-muted-foreground shadow-none"))
 			}, [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true), createElementVNode("span", _hoisted_3, [createElementVNode("span", {
 				"aria-hidden": __props.loading || void 0,
 				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"
@@ -117,6 +133,6 @@ var Button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 	}
 });
 //#endregion
-export { buttonVariants, Button_vue_vue_type_script_setup_true_lang_default as default };
+export { buttonVariantClasses, buttonVariants, Button_vue_vue_type_script_setup_true_lang_default as default };
 
 //# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Button/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":["../../../src/primitives/Button/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 * 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 warp 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 * The 50% dim belongs to a *disabled* button only. It is applied off the\n * `disabled` prop rather than off the DOM disabled state, because a loading\n * button is also DOM-disabled yet has to read as \"working\", not\n * \"unavailable\".\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-[0.97] 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    // `satisfies` is what keeps the two halves honest. The union above is the\n    // 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,\n    // so neither can be the stale copy of the other.\n    variants: {\n      variant: {\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      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 \"../../lib/cn\";\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 — dims to 50% 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=\"cn(buttonVariants({ variant, size }), 'group', disabled && 'opacity-50')\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CAKE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,QAAQ;GACR,SAAS;GACT,OAAO;GACP,aAAa;EACf;EACA,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,mBA4DS,UAAA;IA3DN,MAAM,QAAA;IACN,UAAU,QAAA,YAAY,QAAA;IACtB,gBAAc,QAAA,WAAW,KAAA;IACzB,aAAW,QAAA,WAAW,KAAA;IACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,cAAA,CAAc,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAAA,SAAc,QAAA,YAAQ,YAAA,CAAA;GAIvD,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":["../../../src/primitives/Button/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 \"../../lib/cn\";\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"}

package/dist/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n */\nconst props = withDefaults(\n  defineProps<{\n    /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n    modelValue?: boolean | \"indeterminate\" | undefined;\n    /** Blocks both click and keyboard input, and dims the box. */\n    disabled?: boolean;\n    /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n    label?: string;\n    /** Accessible name when no visible `label` is rendered by this component. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    // Not `false`. A concrete value here would mean \"the host owns this\", and\n    // a host that passes nothing would get a box that emits its update event\n    // and never moves — a control that looks broken rather than one that\n    // reports an error. `undefined` is what leaves it self-managing, and the\n    // explicit default is what survives Vue's absent-Boolean-casts-to-false\n    // rule.\n    modelValue: undefined,\n    disabled: false,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\nconst boxClass = cn(\n  \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n  // Transform (the press squish) rides --ease-spring for a restrained release,\n  // while fill/border stay on the instant --ease-out — the \"springy transform,\n  // steady color\" split (boxStyle below), same language as Button/Switch.\n  \"active:scale-90\",\n  // Checked = a human decision (Loom law): the box fills flat warp.\n  \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n  \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n  // Focus draws the weave tight: the brand ring blooms.\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  \"disabled:cursor-not-allowed\",\n);\n\nconst boxStyle =\n  \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n  <!-- CheckboxRoot is a labelable <button role=\"checkbox\">, so wrapping it in\n       <label> names it exactly like a native control; the rule's nesting/id\n       heuristic just doesn't recognize reka-ui's custom element as a\n       \"control\". -->\n  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n  <label\n    v-if=\"label\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box dims.\n        props.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n      )\n    \"\n  >\n    <CheckboxRoot\n      v-bind=\"optional({ modelValue })\"\n      :disabled=\"disabled\"\n      :class=\"cn(boxClass, 'disabled:opacity-50')\"\n      :style=\"boxStyle\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <template #default=\"{ state }\">\n        <!-- The tick pops in with scale-in — a small causal \"it's checked now\".\n             stroke-width 2.5 is the ≤12px iconography rule, not a local taste:\n             the inherited 1.5 renders 0.75 device px at 12px and reads washed\n             out inside the filled box. Both branches carry it identically. -->\n        <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n          <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n          <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        </CheckboxIndicator>\n      </template>\n    </CheckboxRoot>\n    {{ label }}\n  </label>\n  <!-- The control always dims itself when disabled; label text stays\n       readable muted — same stance in both branches. -->\n  <CheckboxRoot\n    v-else\n    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :class=\"cn(boxClass, 'disabled:opacity-50')\"\n    :style=\"boxStyle\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template #default=\"{ state }\">\n      <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n        <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </CheckboxIndicator>\n    </template>\n  </CheckboxRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n    modelValue?: boolean | \"indeterminate\" | undefined;\n    /** Blocks both click and keyboard input, and dims the box. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n    label?: string;\n    /** Accessible name when no visible `label` is rendered by this component. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    // Not `false`. A concrete value here would mean \"the host owns this\", and\n    // a host that passes nothing would get a box that emits its update event\n    // and never moves — a control that looks broken rather than one that\n    // reports an error. `undefined` is what leaves it self-managing, and the\n    // explicit default is what survives Vue's absent-Boolean-casts-to-false\n    // rule.\n    modelValue: undefined,\n    // Not `false` either, and for the second half of the same reason: absent\n    // has to stay tellable from `false` all the way into `useFieldControl()`,\n    // or a Field above could never disable the row while `:disabled=\"false\"`\n    // could never overrule one that did.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n  \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n  // Transform (the press squish) rides --ease-spring for a restrained release,\n  // while fill/border stay on the instant --ease-out — the \"springy transform,\n  // steady color\" split (boxStyle below), same language as Button/Switch.\n  \"active:scale-90\",\n  // Checked = a decision (Loom law): the box fills with primary.\n  \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n  \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n  // Focus draws the weave tight: the brand ring blooms.\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  \"disabled:cursor-not-allowed\",\n);\n\nconst boxStyle =\n  \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n  <!-- CheckboxRoot is a labelable <button role=\"checkbox\">, so wrapping it in\n       <label> names it exactly like a native control; the rule's nesting/id\n       heuristic just doesn't recognize reka-ui's custom element as a\n       \"control\". -->\n  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n  <label\n    v-if=\"label\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box dims.\n        field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        attrs.class as string,\n      )\n    \"\n  >\n    <CheckboxRoot\n      v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n      :disabled=\"field.disabled\"\n      :required=\"field.required\"\n      :class=\"cn(boxClass, 'disabled:opacity-50')\"\n      :style=\"boxStyle\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <template #default=\"{ state }\">\n        <!-- The tick pops in with scale-in — a small causal \"it's checked now\".\n             stroke-width 2.5 is the ≤12px iconography rule, not a local taste:\n             the inherited 1.5 renders 0.75 device px at 12px and reads washed\n             out inside the filled box. Both branches carry it identically. -->\n        <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n          <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n          <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        </CheckboxIndicator>\n      </template>\n    </CheckboxRoot>\n    {{ label }}\n  </label>\n  <!-- The control always dims itself when disabled; label text stays\n       readable muted — same stance in both branches. -->\n  <CheckboxRoot\n    v-else\n    v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :class=\"cn(boxClass, 'disabled:opacity-50', attrs.class as string)\"\n    :style=\"boxStyle\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template #default=\"{ state }\">\n      <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n        <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </CheckboxIndicator>\n    </template>\n  </CheckboxRoot>\n</template>\n"],"mappings":""}

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

@@ -8,12 +8,27 @@
  * An inline `label` wraps the control in a real `<label>` (a11y name comes
  * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the
  * visible label lives elsewhere (e.g. a table header cell).
+ *
+ * Inside a [Field](../Field/Field.vue) it wires itself through
+ * `useFieldControl()`. CheckboxRoot renders a labelable `<button
+ * role="checkbox">`, so the row's id lands on the box and the row's
+ * `<label for>` names it, with the row's description, `name`, `required` and
+ * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*
+ * a label on the row gives one control two accessible names, read one after
+ * the other, and nothing reports it — not axe, which has no rule for a name
+ * that is merely doubled.
+ *
+ * There is no `readonly`, and a row's is ignored rather than approximated. A
+ * checkbox that may be read but not toggled is a disabled checkbox: the native
+ * `readonly` attribute is a no-op on `<input type="checkbox">` for exactly that
+ * reason, and painting one as editable-but-filled would promise an edit that
+ * never lands.
  */
 type __VLS_Props = {
     /** `true`/`false` for a plain toggle, `"indeterminate"` for a parent over a partially-selected group. Omit to let the box own its own state. */
     modelValue?: boolean | "indeterminate" | undefined;
-    /** Blocks both click and keyboard input, and dims the box. */
-    disabled?: boolean;
+    /** Blocks both click and keyboard input, and dims the box. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
     /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */
     label?: string;
     /** Accessible name when no visible `label` is rendered by this component. */
@@ -26,7 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: (value: boolean | "indeterminate") => any;
 }>, {
-    disabled: boolean;
+    disabled: boolean | undefined;
     modelValue: boolean | "indeterminate" | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"names":[],"mappings":"AA8HA;;;;;;;;;;GAUG;AACH,KAAK,WAAW,GAAG;IACf,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;IACnD,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sIAAsI;IACtI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAmRJ,QAAA,MAAM,YAAY;;;;;cA1RH,OAAO;gBAFL,OAAO,GAAG,eAAe,GAAG,SAAS;6EAgSpD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"names":[],"mappings":"AA4LA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,KAAK,WAAW,GAAG;IACf,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;IACnD,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,sIAAsI;IACtI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAuUJ,QAAA,MAAM,YAAY;;;;;cA9UH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,eAAe,GAAG,SAAS;6EAoVpD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/primitives/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { optional } from "../../lib/props.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { useFieldControl } from "../../lib/field-context.js";
 import { Check, Minus } from "@lucide/vue";
 import { createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
@@ -14,9 +16,25 @@ import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
 * An inline `label` wraps the control in a real `<label>` (a11y name comes
 * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the
 * visible label lives elsewhere (e.g. a table header cell).
+*
+* Inside a [Field](../Field/Field.vue) it wires itself through
+* `useFieldControl()`. CheckboxRoot renders a labelable `<button
+* role="checkbox">`, so the row's id lands on the box and the row's
+* `<label for>` names it, with the row's description, `name`, `required` and
+* `invalid` arriving alongside. **Name it in one place.** A `label` here *and*
+* a label on the row gives one control two accessible names, read one after
+* the other, and nothing reports it — not axe, which has no rule for a name
+* that is merely doubled.
+*
+* There is no `readonly`, and a row's is ignored rather than approximated. A
+* checkbox that may be read but not toggled is a disabled checkbox: the native
+* `readonly` attribute is a no-op on `<input type="checkbox">` for exactly that
+* reason, and painting one as editable-but-filled would promise an edit that
+* never lands.
 */
 var boxStyle = "transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);";
 var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "Checkbox",
 	props: {
 		modelValue: {
@@ -25,7 +43,7 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		label: {},
 		ariaLabel: {},
@@ -34,13 +52,24 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const props = __props;
+		const { attrs, rest: boxAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: props.disabled
+		}));
 		const boxClass = cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background", "active:scale-90", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed");
 		return (_ctx, _cache) => {
 			return __props.label ? (openBlock(), createElementBlock("label", {
 				key: 0,
-				class: normalizeClass(unref(cn)("inline-flex items-center gap-2 text-sm text-foreground", props.disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"))
-			}, [createVNode(unref(CheckboxRoot), mergeProps(unref(optional)({ modelValue: __props.modelValue }), {
-				disabled: __props.disabled,
+				class: normalizeClass(unref(cn)("inline-flex items-center gap-2 text-sm text-foreground", unref(field).disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer", unref(attrs).class))
+			}, [createVNode(unref(CheckboxRoot), mergeProps({
+				...unref(optional)({ modelValue: __props.modelValue }),
+				...unref(boxAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
 				class: unref(cn)(unref(boxClass), "disabled:opacity-50"),
 				style: boxStyle,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
@@ -58,11 +87,20 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					_: 2
 				}, 1024)]),
 				_: 1
-			}, 16, ["disabled", "class"]), createTextVNode(" " + toDisplayString(__props.label), 1)], 2)) : (openBlock(), createBlock(unref(CheckboxRoot), mergeProps({ key: 1 }, unref(optional)({ modelValue: __props.modelValue }), {
-				disabled: __props.disabled,
+			}, 16, [
+				"disabled",
+				"required",
+				"class"
+			]), createTextVNode(" " + toDisplayString(__props.label), 1)], 2)) : (openBlock(), createBlock(unref(CheckboxRoot), mergeProps({ key: 1 }, {
+				...unref(optional)({ modelValue: __props.modelValue }),
+				...unref(boxAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
 				"aria-label": __props.ariaLabel,
 				"aria-labelledby": __props.ariaLabelledby,
-				class: unref(cn)(unref(boxClass), "disabled:opacity-50"),
+				class: unref(cn)(unref(boxClass), "disabled:opacity-50", unref(attrs).class),
 				style: boxStyle,
 				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
 			}), {
@@ -81,6 +119,7 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				_: 1
 			}, 16, [
 				"disabled",
+				"required",
 				"aria-label",
 				"aria-labelledby",
 				"class"

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n */\nconst props = withDefaults(\n  defineProps<{\n    /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n    modelValue?: boolean | \"indeterminate\" | undefined;\n    /** Blocks both click and keyboard input, and dims the box. */\n    disabled?: boolean;\n    /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n    label?: string;\n    /** Accessible name when no visible `label` is rendered by this component. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    // Not `false`. A concrete value here would mean \"the host owns this\", and\n    // a host that passes nothing would get a box that emits its update event\n    // and never moves — a control that looks broken rather than one that\n    // reports an error. `undefined` is what leaves it self-managing, and the\n    // explicit default is what survives Vue's absent-Boolean-casts-to-false\n    // rule.\n    modelValue: undefined,\n    disabled: false,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\nconst boxClass = cn(\n  \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n  // Transform (the press squish) rides --ease-spring for a restrained release,\n  // while fill/border stay on the instant --ease-out — the \"springy transform,\n  // steady color\" split (boxStyle below), same language as Button/Switch.\n  \"active:scale-90\",\n  // Checked = a human decision (Loom law): the box fills flat warp.\n  \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n  \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n  // Focus draws the weave tight: the brand ring blooms.\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  \"disabled:cursor-not-allowed\",\n);\n\nconst boxStyle =\n  \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n  <!-- CheckboxRoot is a labelable <button role=\"checkbox\">, so wrapping it in\n       <label> names it exactly like a native control; the rule's nesting/id\n       heuristic just doesn't recognize reka-ui's custom element as a\n       \"control\". -->\n  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n  <label\n    v-if=\"label\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box dims.\n        props.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n      )\n    \"\n  >\n    <CheckboxRoot\n      v-bind=\"optional({ modelValue })\"\n      :disabled=\"disabled\"\n      :class=\"cn(boxClass, 'disabled:opacity-50')\"\n      :style=\"boxStyle\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <template #default=\"{ state }\">\n        <!-- The tick pops in with scale-in — a small causal \"it's checked now\".\n             stroke-width 2.5 is the ≤12px iconography rule, not a local taste:\n             the inherited 1.5 renders 0.75 device px at 12px and reads washed\n             out inside the filled box. Both branches carry it identically. -->\n        <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n          <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n          <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        </CheckboxIndicator>\n      </template>\n    </CheckboxRoot>\n    {{ label }}\n  </label>\n  <!-- The control always dims itself when disabled; label text stays\n       readable muted — same stance in both branches. -->\n  <CheckboxRoot\n    v-else\n    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :class=\"cn(boxClass, 'disabled:opacity-50')\"\n    :style=\"boxStyle\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template #default=\"{ state }\">\n      <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n        <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </CheckboxIndicator>\n    </template>\n  </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,IAAM,WACJ;;;;;;;;;;;;;;;;;;EA1CF,MAAM,QAAQ;EA2Bd,MAAM,WAAW,GACf,kGAIA,mBAEA,oHACA,sIAEA,+GACA,6BACF;;GAaU,OAAA,QAAA,SADR,UAAA,GAAA,mBA6BQ,SAAA;;IA3BL,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,0DAAkK,MAAM,WAAQ,6CAAA,gBAAA,CAAA;GAQjM,GAAA,CAAA,YAiBe,MAAA,YAAA,GAjBf,WACU,MAgBK,QAAA,CAhBG,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC5B,UAAU,QAAA;IACV,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,qBAAA;IAClB,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAQI,EARA,YAAK,CAKzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;;;;;GAGpC,GAAA,IAAA,CAAA,YAAA,OAAA,CAAA,GAAA,gBAAA,MACf,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,MAIV,UAAA,GAAA,YAgBe,MAAA,YAAA,GAhBf,WAgBe,EAAA,KAAA,EAAA,GAdL,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC5B,UAAU,QAAA;IACV,cAAY,QAAA;IACZ,mBAAiB,QAAA;IACjB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,qBAAA;IAClB,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAII,EAJA,YAAK,CACzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc"}
+{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n    modelValue?: boolean | \"indeterminate\" | undefined;\n    /** Blocks both click and keyboard input, and dims the box. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n    label?: string;\n    /** Accessible name when no visible `label` is rendered by this component. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    // Not `false`. A concrete value here would mean \"the host owns this\", and\n    // a host that passes nothing would get a box that emits its update event\n    // and never moves — a control that looks broken rather than one that\n    // reports an error. `undefined` is what leaves it self-managing, and the\n    // explicit default is what survives Vue's absent-Boolean-casts-to-false\n    // rule.\n    modelValue: undefined,\n    // Not `false` either, and for the second half of the same reason: absent\n    // has to stay tellable from `false` all the way into `useFieldControl()`,\n    // or a Field above could never disable the row while `:disabled=\"false\"`\n    // could never overrule one that did.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n  \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n  // Transform (the press squish) rides --ease-spring for a restrained release,\n  // while fill/border stay on the instant --ease-out — the \"springy transform,\n  // steady color\" split (boxStyle below), same language as Button/Switch.\n  \"active:scale-90\",\n  // Checked = a decision (Loom law): the box fills with primary.\n  \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n  \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n  // Focus draws the weave tight: the brand ring blooms.\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n  \"disabled:cursor-not-allowed\",\n);\n\nconst boxStyle =\n  \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n  <!-- CheckboxRoot is a labelable <button role=\"checkbox\">, so wrapping it in\n       <label> names it exactly like a native control; the rule's nesting/id\n       heuristic just doesn't recognize reka-ui's custom element as a\n       \"control\". -->\n  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n  <label\n    v-if=\"label\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box dims.\n        field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        attrs.class as string,\n      )\n    \"\n  >\n    <CheckboxRoot\n      v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n      :disabled=\"field.disabled\"\n      :required=\"field.required\"\n      :class=\"cn(boxClass, 'disabled:opacity-50')\"\n      :style=\"boxStyle\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <template #default=\"{ state }\">\n        <!-- The tick pops in with scale-in — a small causal \"it's checked now\".\n             stroke-width 2.5 is the ≤12px iconography rule, not a local taste:\n             the inherited 1.5 renders 0.75 device px at 12px and reads washed\n             out inside the filled box. Both branches carry it identically. -->\n        <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n          <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n          <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        </CheckboxIndicator>\n      </template>\n    </CheckboxRoot>\n    {{ label }}\n  </label>\n  <!-- The control always dims itself when disabled; label text stays\n       readable muted — same stance in both branches. -->\n  <CheckboxRoot\n    v-else\n    v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :class=\"cn(boxClass, 'disabled:opacity-50', attrs.class as string)\"\n    :style=\"boxStyle\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template #default=\"{ state }\">\n      <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n        <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n        <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </CheckboxIndicator>\n    </template>\n  </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,IAAM,WACJ;;;;;;;;;;;;;;;;;;;EAlFF,MAAM,QAAQ;EAgCd,MAAM,EAAE,OAAO,MAAM,aAAa,cAAc;EA6BhD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;EAEF,MAAM,WAAW,GACf,kGAIA,mBAEA,oHACA,sIAEA,+GACA,6BACF;;GAaU,OAAA,QAAA,SADR,UAAA,GAAA,mBA+BQ,SAAA;;IA7BL,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,0DAAkK,MAAA,KAAA,CAAK,CAAC,WAAQ,6CAAA,kBAA0E,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;GASjR,GAAA,CAAA,YAkBe,MAAA,YAAA,GAlBf,WAkBe;IAAA,GAjBA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,qBAAA;IAClB,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAQI,EARA,YAAK,CAKzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;;;;;;;;;GAGpC,CAAA,GAAA,gBAAA,MACf,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,MAIV,UAAA,GAAA,YAiBe,MAAA,YAAA,GAjBf,WAiBe,EAAA,KAAA,EAAA,GAAA;IAAA,GAfA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,cAAY,QAAA;IACZ,mBAAiB,QAAA;IACjB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,uBAAyB,MAAA,KAAA,CAAK,CAAC,KAAK;IACtD,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAII,EAJA,YAAK,CACzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc"}

package/dist/primitives/Chip/Chip.js

@@ -0,0 +1,7 @@
+import Chip_vue_vue_type_script_setup_true_lang_default, { chipVariants } from "./Chip.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/Chip/Chip.vue
+var Chip_default = Chip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { chipVariants, Chip_default as default };
+
+//# sourceMappingURL=Chip.js.map