@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/carousel/src/Carousel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,175 @@
+import { cn } from "../../../core/src/cn.js";
+import { smoothScrollBehavior } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import IconButton_default from "../../icon-button/src/IconButton.js";
+import "../../icon-button/src/index.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { ChevronLeft, ChevronRight } from "@lucide/vue";
+//#region packages/primitives/carousel/src/Carousel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	class: "sr-only",
+	"aria-live": "polite"
+};
+/**
+* Loom's English, co-located with the component so it tree-shakes with it,
+* and exported so a host can build a partial vocabulary against the real
+* thing rather than a transcription of it. `slide` receives the raw numbers
+* and returns the finished sentence — pluralisation and digit shaping stay
+* in the consumer's locale code, per the labels package's contract.
+*/
+var CAROUSEL_LABELS = {
+	region: "Carousel",
+	previous: "Previous slide",
+	next: "Next slide",
+	slide: ({ position, total }) => `Slide ${String(position)} of ${String(total)}`
+};
+/**
+* One slide per child of the default slot; a fragment child (a bare `v-for`
+* on the host) contributes its own children as further slides.
+*/
+function flatten(vnodes) {
+	return vnodes.flatMap((vnode) => typeof vnode.type === "symbol" && Array.isArray(vnode.children) ? vnode.children : [vnode]);
+}
+var Carousel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Carousel",
+	props: {
+		labels: {},
+		loop: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("carousel", CAROUSEL_LABELS, () => props.labels);
+		const slots = useSlots();
+		function slideVnodes() {
+			return flatten(slots.default?.() ?? []);
+		}
+		function totalCount() {
+			return slideVnodes().length;
+		}
+		const last = computed(() => totalCount() - 1);
+		const track = ref(null);
+		const index = ref(0);
+		function goTo(next) {
+			const el = track.value;
+			const total = totalCount();
+			if (!el || !total) return;
+			let target = next;
+			if (props.loop) target = (next % total + total) % total;
+			else target = Math.max(0, Math.min(total - 1, target));
+			index.value = target;
+			el.scrollTo({
+				left: target * el.clientWidth,
+				behavior: smoothScrollBehavior()
+			});
+		}
+		const atStart = computed(() => !props.loop && index.value <= 0);
+		const atEnd = computed(() => !props.loop && index.value >= last.value);
+		/** Arrows walk pages while the strip itself holds focus; Home/End jump. */
+		function onKeydown(event) {
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+				event.preventDefault();
+				goTo(index.value + (event.key === "ArrowRight" ? 1 : -1));
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				goTo(0);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				goTo(last.value);
+			}
+		}
+		let frame = 0;
+		function onScroll() {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const el = track.value;
+				if (!el || !el.clientWidth) return;
+				index.value = Math.max(0, Math.min(last.value, Math.round(el.scrollLeft / el.clientWidth)));
+			});
+		}
+		onMounted(() => track.value?.addEventListener("scroll", onScroll, { passive: true }));
+		onBeforeUnmount(() => {
+			track.value?.removeEventListener("scroll", onScroll);
+			cancelAnimationFrame(frame);
+		});
+		const trackClasses = cn("flex snap-x snap-mandatory overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-md", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo");
+		const controlClasses = "absolute top-1/2 z-raised -translate-y-1/2 bg-background/80 shadow-sm hover:bg-background";
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "region",
+				"aria-roledescription": "carousel",
+				"aria-label": unref(text).region,
+				class: "relative"
+			}, [
+				createElementVNode("div", {
+					ref_key: "track",
+					ref: track,
+					class: normalizeClass(unref(trackClasses)),
+					tabindex: "0",
+					onKeydown
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(slideVnodes(), (slide, i) => {
+					return openBlock(), createElementBlock("div", {
+						key: i,
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": unref(text).slide({
+							position: i + 1,
+							total: totalCount()
+						}),
+						class: "w-full shrink-0 snap-start"
+					}, [(openBlock(), createBlock(resolveDynamicComponent(slide)))], 8, _hoisted_2);
+				}), 128))], 34),
+				createVNode(unref(IconButton_default), {
+					variant: "ghost",
+					size: "sm",
+					label: unref(text).previous,
+					disabled: atStart.value,
+					class: normalizeClass(unref(cn)(controlClasses, "left-2")),
+					onClick: _cache[0] || (_cache[0] = ($event) => goTo(index.value - 1))
+				}, {
+					default: withCtx(() => [createVNode(unref(ChevronLeft), {
+						class: "h-4 w-4",
+						"aria-hidden": "true"
+					})]),
+					_: 1
+				}, 8, [
+					"label",
+					"disabled",
+					"class"
+				]),
+				createVNode(unref(IconButton_default), {
+					variant: "ghost",
+					size: "sm",
+					label: unref(text).next,
+					disabled: atEnd.value,
+					class: normalizeClass(unref(cn)(controlClasses, "right-2")),
+					onClick: _cache[1] || (_cache[1] = ($event) => goTo(index.value + 1))
+				}, {
+					default: withCtx(() => [createVNode(unref(ChevronRight), {
+						class: "h-4 w-4",
+						"aria-hidden": "true"
+					})]),
+					_: 1
+				}, 8, [
+					"label",
+					"disabled",
+					"class"
+				]),
+				createElementVNode("p", _hoisted_3, toDisplayString(unref(text).slide({
+					position: index.value + 1,
+					total: totalCount()
+				})), 1)
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { CAROUSEL_LABELS, Carousel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Carousel.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/carousel/src/Carousel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/carousel/src/Carousel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CarouselLabels } from \"@ecoma-io/loom-labels\";\nimport type { VNode } from \"vue\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it. `slide` receives the raw numbers\n * and returns the finished sentence — pluralisation and digit shaping stay\n * in the consumer's locale code, per the labels package's contract.\n */\nexport const CAROUSEL_LABELS: CarouselLabels = {\n  region: \"Carousel\",\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  slide: ({ position, total }) => `Slide ${String(position)} of ${String(total)}`,\n};\n\n/**\n * One slide per child of the default slot; a fragment child (a bare `v-for`\n * on the host) contributes its own children as further slides.\n */\nfunction flatten(vnodes: VNode[]): VNode[] {\n  return vnodes.flatMap((vnode) =>\n    typeof vnode.type === \"symbol\" && Array.isArray(vnode.children)\n      ? (vnode.children as VNode[])\n      : [vnode],\n  );\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useSlots } from \"vue\";\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the whole region for assistive technology. */\n    labels?: LabelOverrides<CarouselLabels>;\n    /**\n     * Wraps at both ends instead of stopping. Off by default: a carousel\n     * that silently jumps from last back to first reads as a glitch unless\n     * the product actually means it.\n     */\n    loop?: boolean;\n  }>(),\n  { loop: false },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"carousel\", CAROUSEL_LABELS, () => props.labels);\n\n// Invoked during render, never cached: a computed holding slot vnodes would\n// freeze the list against a host that adds or removes slides reactively\n// (Vue does not track dependencies used inside a slot from outside it).\nconst slots = useSlots();\n\n// The slot function runs here on every render — fresh vnodes each time; only\n// the slot lookup itself is captured in setup.\nfunction slideVnodes(): VNode[] {\n  return flatten(slots.default?.() ?? []);\n}\n\nfunction totalCount(): number {\n  return slideVnodes().length;\n}\nconst last = computed(() => totalCount() - 1);\n\nconst track = ref<HTMLElement | null>(null);\nconst index = ref(0);\n\nfunction goTo(next: number): void {\n  const el = track.value;\n  const total = totalCount();\n  if (!el || !total) return;\n  let target = next;\n  // Modulo of zero is NaN — an empty strip has nowhere to go.\n  if (props.loop) target = ((next % total) + total) % total;\n  else target = Math.max(0, Math.min(total - 1, target));\n  index.value = target;\n  el.scrollTo({ left: target * el.clientWidth, behavior: smoothScrollBehavior() });\n}\n\nconst atStart = computed(() => !props.loop && index.value <= 0);\nconst atEnd = computed(() => !props.loop && index.value >= last.value);\n\n/** Arrows walk pages while the strip itself holds focus; Home/End jump. */\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n    event.preventDefault();\n    goTo(index.value + (event.key === \"ArrowRight\" ? 1 : -1));\n  } else if (event.key === \"Home\") {\n    event.preventDefault();\n    goTo(0);\n  } else if (event.key === \"End\") {\n    event.preventDefault();\n    goTo(last.value);\n  }\n}\n\n// Touch swipes land here too: native scroll moves the strip and the reader's\n// finger — not the component — decides where it settles. Work happens once\n// per frame rather than on every scroll tick.\nlet frame = 0;\nfunction onScroll(): void {\n  cancelAnimationFrame(frame);\n  frame = requestAnimationFrame(() => {\n    const el = track.value;\n    if (!el || !el.clientWidth) return;\n    index.value = Math.max(0, Math.min(last.value, Math.round(el.scrollLeft / el.clientWidth)));\n  });\n}\n\nonMounted(() => track.value?.addEventListener(\"scroll\", onScroll, { passive: true }));\nonBeforeUnmount(() => {\n  track.value?.removeEventListener(\"scroll\", onScroll);\n  cancelAnimationFrame(frame);\n});\n\nconst trackClasses = cn(\n  \"flex snap-x snap-mandatory overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-md\",\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n);\n\n// The controls float above media, so they carry their own ground instead of\n// inheriting whatever slide sits beneath them.\nconst controlClasses =\n  \"absolute top-1/2 z-raised -translate-y-1/2 bg-background/80 shadow-sm hover:bg-background\";\n</script>\n\n<template>\n  <div role=\"region\" aria-roledescription=\"carousel\" :aria-label=\"text.region\" class=\"relative\">\n    <!-- @slot One element per slide. Each becomes a full-width,\n         snap-aligned page; give every child the same intrinsic height or pad\n         it yourself. The slides are wrapped here rather than rendered bare so\n         each can carry its own slide semantics. -->\n    <!-- A named, focusable scroll container whose arrow keys page the\n         strip: a genuine interaction on a genuinely interactive element.\n         The accessibility rule cannot see that combination from a plain\n         div, so it is answered here rather than by inventing a role the\n         element does not have. -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div ref=\"track\" :class=\"trackClasses\" tabindex=\"0\" @keydown=\"onKeydown\">\n      <div\n        v-for=\"(slide, i) in slideVnodes()\"\n        :key=\"i\"\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        :aria-label=\"text.slide({ position: i + 1, total: totalCount() })\"\n        class=\"w-full shrink-0 snap-start\"\n      >\n        <component :is=\"slide\" />\n      </div>\n    </div>\n\n    <IconButton\n      variant=\"ghost\"\n      size=\"sm\"\n      :label=\"text.previous\"\n      :disabled=\"atStart\"\n      :class=\"cn(controlClasses, 'left-2')\"\n      @click=\"goTo(index - 1)\"\n    >\n      <ChevronLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </IconButton>\n    <IconButton\n      variant=\"ghost\"\n      size=\"sm\"\n      :label=\"text.next\"\n      :disabled=\"atEnd\"\n      :class=\"cn(controlClasses, 'right-2')\"\n      @click=\"goTo(index + 1)\"\n    >\n      <ChevronRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </IconButton>\n\n    <!-- Present from the first render: a live region mounted in the same\n         moment as its text is a region assistive tech was not yet listening\n         to. Position changes announce politely; nothing announces on load. -->\n    <p class=\"sr-only\" aria-live=\"polite\">\n      {{ text.slide({ position: index + 1, total: totalCount() }) }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,kBAAkC;CAC7C,QAAQ;CACR,UAAU;CACV,MAAM;CACN,QAAQ,EAAE,UAAU,YAAY,SAAS,OAAO,QAAQ,EAAE,MAAM,OAAO,KAAK;AAC9E;;;;;AAMA,SAAS,QAAQ,QAA0B;CACzC,OAAO,OAAO,SAAS,UACrB,OAAO,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,QAAQ,IACzD,MAAM,WACP,CAAC,KAAK,CACZ;AACF;;;;;;;;;;;EAWA,MAAM,QAAQ;EAiBd,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;EAKtE,MAAM,QAAQ,SAAS;EAIvB,SAAS,cAAuB;GAC9B,OAAO,QAAQ,MAAM,UAAU,KAAK,CAAC,CAAC;EACxC;EAEA,SAAS,aAAqB;GAC5B,OAAO,YAAY,CAAC,CAAC;EACvB;EACA,MAAM,OAAO,eAAe,WAAW,IAAI,CAAC;EAE5C,MAAM,QAAQ,IAAwB,IAAI;EAC1C,MAAM,QAAQ,IAAI,CAAC;EAEnB,SAAS,KAAK,MAAoB;GAChC,MAAM,KAAK,MAAM;GACjB,MAAM,QAAQ,WAAW;GACzB,IAAI,CAAC,MAAM,CAAC,OAAO;GACnB,IAAI,SAAS;GAEb,IAAI,MAAM,MAAM,UAAW,OAAO,QAAS,SAAS;QAC/C,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,GAAG,MAAM,CAAC;GACrD,MAAM,QAAQ;GACd,GAAG,SAAS;IAAE,MAAM,SAAS,GAAG;IAAa,UAAU,qBAAqB;GAAE,CAAC;EACjF;EAEA,MAAM,UAAU,eAAe,CAAC,MAAM,QAAQ,MAAM,SAAS,CAAC;EAC9D,MAAM,QAAQ,eAAe,CAAC,MAAM,QAAQ,MAAM,SAAS,KAAK,KAAK;;EAGrE,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;IAC3D,MAAM,eAAe;IACrB,KAAK,MAAM,SAAS,MAAM,QAAQ,eAAe,IAAI,GAAG;GAC1D,OAAO,IAAI,MAAM,QAAQ,QAAQ;IAC/B,MAAM,eAAe;IACrB,KAAK,CAAC;GACR,OAAO,IAAI,MAAM,QAAQ,OAAO;IAC9B,MAAM,eAAe;IACrB,KAAK,KAAK,KAAK;GACjB;EACF;EAKA,IAAI,QAAQ;EACZ,SAAS,WAAiB;GACxB,qBAAqB,KAAK;GAC1B,QAAQ,4BAA4B;IAClC,MAAM,KAAK,MAAM;IACjB,IAAI,CAAC,MAAM,CAAC,GAAG,aAAa;IAC5B,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;GAC5F,CAAC;EACH;EAEA,gBAAgB,MAAM,OAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACpF,sBAAsB;GACpB,MAAM,OAAO,oBAAoB,UAAU,QAAQ;GACnD,qBAAqB,KAAK;EAC5B,CAAC;EAED,MAAM,eAAe,GACnB,8GACA,6GACF;EAIA,MAAM,iBACJ;;GAIA,OAAA,UAAA,GAAA,mBAmDM,OAAA;IAnDD,MAAK;IAAS,wBAAqB;IAAY,cAAY,MAAA,IAAA,CAAI,CAAC;IAAQ,OAAM;;IAWjF,mBAWM,OAAA;KAXG,SAAA;KAAJ,KAAI;KAAS,OAAK,eAAE,MAAA,YAAA,CAAY;KAAE,UAAS;KAAc;IAC5D,GAAA,EAAA,UAAA,IAAA,GAAA,mBASM,UAAA,MAAA,WARiB,YAAW,IAAxB,OAAO,MAAC;KADlB,OAAA,UAAA,GAAA,mBASM,OAAA;MAPH,KAAK;MACN,MAAK;MACL,wBAAqB;MACpB,cAAY,MAAA,IAAA,CAAI,CAAC,MAAK;OAAA,UAAa,IAAC;OAAA,OAAa,WAAU;MAAA,CAAA;MAC5D,OAAM;KAEN,GAAA,EAAA,UAAA,GAAA,YAAyB,wBAAT,KAAK,CAAA,EAAA,GAAA,GAAA,UAAA;;IAIzB,YASa,MAAA,kBAAA,GAAA;KARX,SAAQ;KACR,MAAK;KACJ,OAAO,MAAA,IAAA,CAAI,CAAC;KACZ,UAAU,QAAA;KACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,gBAAc,QAAA,CAAA;KACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAK,MAAA,QAAK,CAAA;;KAElB,SAAA,cAAkD,CAAlD,YAAkD,MAAA,WAAA,GAAA;MAArC,OAAM;MAAU,eAAY;;;;;;;;IAE3C,YASa,MAAA,kBAAA,GAAA;KARX,SAAQ;KACR,MAAK;KACJ,OAAO,MAAA,IAAA,CAAI,CAAC;KACZ,UAAU,MAAA;KACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,gBAAc,SAAA,CAAA;KACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAK,MAAA,QAAK,CAAA;;KAElB,SAAA,cAAmD,CAAnD,YAAmD,MAAA,YAAA,GAAA;MAArC,OAAM;MAAU,eAAY;;;;;;;;IAM5C,mBAEI,KAFJ,YAEI,gBADC,MAAA,IAAA,CAAI,CAAC,MAAK;KAAA,UAAa,MAAA,QAAK;KAAA,OAAa,WAAU;IAAA,CAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,3 @@
+export { default, CAROUSEL_LABELS } from "./Carousel.vue";
+export type { CarouselLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { CAROUSEL_LABELS } from "./Carousel.vue_vue_type_script_setup_true_lang.js";
+import Carousel_default from "./Carousel.js";
+export { CAROUSEL_LABELS, Carousel_default as default };

package/dist/packages/primitives/checkbox/src/Checkbox.js

@@ -0,0 +1,7 @@
+import Checkbox_vue_vue_type_script_setup_true_lang_default from "./Checkbox.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/checkbox/src/Checkbox.vue
+var Checkbox_default = Checkbox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Checkbox_default as default };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/packages/primitives/checkbox/src/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../../packages/primitives/checkbox/src/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\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 drains the box to the neutral well. 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  // Drained, not dimmed. `opacity-50` faded box and border together — the\n  // failure Button records for its own dim, and no smaller for holding a\n  // glyph rather than words. An unchecked box falls to `bg-muted` with the\n  // rim every unavailable control slackens to; a checked or indeterminate\n  // one keeps its primary fill untouched, because switched-on is information\n  // — the same verdict Switch's thumb and RadioGroup's dot render, so a\n  // selected control reads as selected whether it is available or not, and\n  // the native `disabled` attribute carries unavailability regardless. The\n  // compound `disabled:data-[state=unchecked]:` form is deliberate: Tailwind\n  // sorts data variants after plain `disabled:`, so a bare `disabled:bg-muted`\n  // would lose to `data-[state=checked]:bg-primary` and never fire.\n  \"disabled:data-[state=unchecked]:border-border disabled:data-[state=unchecked]:bg-muted\",\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 min-h-6 items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box drains.\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)\"\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 drains 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, 'min-h-6 min-w-6', 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/packages/primitives/checkbox/src/Checkbox.vue.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Checkbox — a single boolean choice inside a form (as opposed to Switch,
+ * which flips a setting immediately, no form/"Save" involved). Built on Reka
+ * UI's Checkbox (role="checkbox" + aria-checked, Space toggles); also
+ * supports the third "indeterminate" state for a parent checkbox over a
+ * partially-selected group — shown as a dash instead of a check.
+ *
+ * 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 drains the box to the neutral well. 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. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */
+    ariaLabelledby?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean | "indeterminate") => any;
+}>, {
+    disabled: boolean | undefined;
+    modelValue: boolean | "indeterminate" | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/packages/primitives/checkbox/src/Checkbox.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/checkbox/src/Checkbox.vue"],"names":[],"mappings":"AAwMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,KAAK,WAAW,GAAG;IACf,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;IACnD,sHAAsH;IACtH,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;AAmVJ,QAAA,MAAM,YAAY;;;;;cA1VH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,eAAe,GAAG,SAAS;6EAgWpD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/packages/primitives/checkbox/src/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,135 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import "../../../labels/src/index.js";
+import { createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { Check, Minus } from "@lucide/vue";
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+//#region packages/primitives/checkbox/src/Checkbox.vue?vue&type=script&setup=true&lang.ts
+/**
+* Checkbox — a single boolean choice inside a form (as opposed to Switch,
+* which flips a setting immediately, no form/"Save" involved). Built on Reka
+* UI's Checkbox (role="checkbox" + aria-checked, Space toggles); also
+* supports the third "indeterminate" state for a parent checkbox over a
+* partially-selected group — shown as a dash instead of a check.
+*
+* 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: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		label: {},
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	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", "disabled:data-[state=unchecked]:border-border disabled:data-[state=unchecked]:bg-muted");
+		return (_ctx, _cache) => {
+			return __props.label ? (openBlock(), createElementBlock("label", {
+				key: 0,
+				class: normalizeClass(unref(cn)("inline-flex min-h-6 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)),
+				style: boxStyle,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(({ state }) => [createVNode(unref(CheckboxIndicator), { class: "flex animate-scale-in items-center justify-center text-current" }, {
+					default: withCtx(() => [state === "indeterminate" ? (openBlock(), createBlock(unref(Minus), {
+						key: 0,
+						class: "h-3 w-3",
+						"stroke-width": 2.5
+					})) : (openBlock(), createBlock(unref(Check), {
+						key: 1,
+						class: "h-3 w-3",
+						"stroke-width": 2.5
+					}))]),
+					_: 2
+				}, 1024)]),
+				_: 1
+			}, 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), "min-h-6 min-w-6", unref(attrs).class),
+				style: boxStyle,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(({ state }) => [createVNode(unref(CheckboxIndicator), { class: "flex animate-scale-in items-center justify-center text-current" }, {
+					default: withCtx(() => [state === "indeterminate" ? (openBlock(), createBlock(unref(Minus), {
+						key: 0,
+						class: "h-3 w-3",
+						"stroke-width": 2.5
+					})) : (openBlock(), createBlock(unref(Check), {
+						key: 1,
+						class: "h-3 w-3",
+						"stroke-width": 2.5
+					}))]),
+					_: 2
+				}, 1024)]),
+				_: 1
+			}, 16, [
+				"disabled",
+				"required",
+				"aria-label",
+				"aria-labelledby",
+				"class"
+			]));
+		};
+	}
+});
+//#endregion
+export { Checkbox_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Checkbox.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/checkbox/src/Checkbox.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/checkbox/src/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\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 drains the box to the neutral well. 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  // Drained, not dimmed. `opacity-50` faded box and border together — the\n  // failure Button records for its own dim, and no smaller for holding a\n  // glyph rather than words. An unchecked box falls to `bg-muted` with the\n  // rim every unavailable control slackens to; a checked or indeterminate\n  // one keeps its primary fill untouched, because switched-on is information\n  // — the same verdict Switch's thumb and RadioGroup's dot render, so a\n  // selected control reads as selected whether it is available or not, and\n  // the native `disabled` attribute carries unavailability regardless. The\n  // compound `disabled:data-[state=unchecked]:` form is deliberate: Tailwind\n  // sorts data variants after plain `disabled:`, so a bare `disabled:bg-muted`\n  // would lose to `data-[state=checked]:bg-primary` and never fire.\n  \"disabled:data-[state=unchecked]:border-border disabled:data-[state=unchecked]:bg-muted\",\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 min-h-6 items-center gap-2 text-sm text-foreground',\n        // Disabled text stays readable (AA on the light ground) — only the box drains.\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)\"\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 drains 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, 'min-h-6 min-w-6', 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,IAAM,WACJ;;;;;;;;;;;;;;;;;;;EA9FF,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,+BAYA,wFACF;;GAaU,OAAA,QAAA,SADR,UAAA,GAAA,mBA+BQ,SAAA;;IA7BL,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,kEAA4K,MAAA,KAAA,CAAK,CAAC,WAAQ,6CAAA,kBAA0E,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;GAS3R,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,CAAQ;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,mBAAqB,MAAA,KAAA,CAAK,CAAC,KAAK;IAClD,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/packages/primitives/checkbox/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Checkbox.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/checkbox/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/checkbox/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,2 @@
+import Checkbox_default from "./Checkbox.js";
+export { Checkbox_default as default };

package/dist/packages/primitives/chip/src/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 packages/primitives/chip/src/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

package/dist/packages/primitives/chip/src/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../../../packages/primitives/chip/src/Chip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The same eight names Badge carries, deliberately — a chip and a badge sitting\n * in one row are the same object in two moods, so `success` has to mean the\n * same green in both. A ninth name here would be a second vocabulary for one\n * palette.\n */\nexport type ChipVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/**\n * Two heights off the shared control scale (the text input's `sm` and `md`), so\n * a row of chips above a field lines up with it. There is no `lg`: a chip is a\n * token, and one big enough to need the 44px step is a Button.\n */\nexport type ChipSize = \"sm\" | \"md\";\n\n/**\n * The container. It is the coloured pill, and it is deliberately not the\n * interactive node — see the docblock below for why that separation is the\n * whole component.\n *\n * Selection is a state the *edges* deepen: the hue-carrying variants draw a\n * stronger border around the wash they already sit in, the hueless ones swap\n * their fill for the primary wash. It is never any one signal alone that says\n * so — every selected chip also carries `aria-pressed=\"true\"` and a check\n * glyph, which is what keeps the state legible to a reader who cannot resolve\n * a deepened edge from a resting one.\n */\nexport const chipVariants = cva(\n  [\n    \"group inline-flex max-w-full items-center rounded-full border align-middle font-medium\",\n    \"transition-[background-color,border-color,color] duration-fast ease-out\",\n    // No `opacity` here, and that is the point. `data-[disabled]:opacity-50`\n    // dimmed the pill *and* its label together, taking a 5.01:1 label down to\n    // 2.78:1 against its own fill — halving the alpha more than halves the\n    // contrast. Unavailability is painted in measured colours instead: the\n    // fill and border below, and `disabledText` on the label and the glyph\n    // beside it.\n    \"data-[disabled]:cursor-not-allowed\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      variant: {\n        // The two hueless variants take the primary wash when selected —\n        // `--color-primary-muted` is the repository's selected/active fill, the\n        // one Select's checked row already uses, so a chosen filter reads as a\n        // human decision rather than as a new colour invented here.\n        neutral:\n          \"border-transparent bg-subtle text-subtle-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n        outline:\n          \"border-border bg-transparent text-muted-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n        // The hue-carrying variants deepen their own hue instead of jumping to\n        // the primary: a reader picked this chip *because* it is the destructive\n        // one, and swapping its colour on selection would throw that away.\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // a chip renders at 4.46:1 on `bg-card` and differently on `bg-sunken`\n        // — under the AA floor and inconsistent. `*-muted` is mixed to hold\n        // ≥4.5:1 against its own `*-text` in both themes (see theme.css),\n        // which is what these variants were named for.\n        //\n        // Selection deepens the border, not the fill: a `data-[selected]:bg-*-/20`\n        // over the wash drops the text to ~4.2:1 in light mode (success, warning,\n        // info, destructive), below the same floor the unselected state holds.\n        // `*-muted` is the theme's \"selected/active fill\" anyway, so the state is\n        // carried by the deeper border, the check glyph and `aria-pressed` — the\n        // signals the docblock below already names as what makes selection legible.\n        primary:\n          \"border-transparent bg-primary-muted text-primary-text data-[selected]:border-primary/45\",\n        success:\n          \"border-transparent bg-success-muted text-success-text data-[selected]:border-success/45\",\n        // `-text`, matching Badge and the other functional siblings: the wash\n        // is mixed to hold contrast against the `*-text` rung in both themes,\n        // not against the base hue.\n        warning:\n          \"border-transparent bg-warning-muted text-warning-text data-[selected]:border-warning/45\",\n        info: \"border-transparent bg-info-muted text-info-text data-[selected]:border-info/45\",\n        destructive:\n          \"border-transparent bg-destructive-muted text-destructive-text data-[selected]:border-destructive/45\",\n        accent:\n          \"border-accent/40 bg-accent-muted text-accent-text data-[selected]:border-accent/70\",\n      } satisfies Record<ChipVariant, string>,\n      size: {\n        sm: \"h-8 text-xs\",\n        md: \"h-9 text-sm\",\n      } satisfies Record<ChipSize, string>,\n    },\n    defaultVariants: { variant: \"neutral\", size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * Chip — an interactive token: a filter that switches on, an entity that can be\n * dismissed, a recipient sitting in a picker.\n *\n * The line against Badge is the one worth knowing, because the two look almost\n * identical: **Badge is a status label a reader only looks at; Chip is a\n * control a reader acts on.** A Badge that gained a click handler would be a\n * Chip, and a Chip nobody can toggle or dismiss is a Badge wearing a button's\n * clothes — it takes a Tab stop and announces itself as pressable while doing\n * nothing. Reach for Button when the token *is* the action rather than a\n * standing state, and for SegmentedControl when exactly one of a small set must\n * be chosen; a row of chips is many-of-many, and none-of-them is a valid answer.\n *\n * The structure is the component. A chip that both toggles and dismisses has\n * two controls, and they are **siblings inside a non-interactive container** —\n * never a dismiss `<button>` nested inside a toggle `<button>`. Nested buttons\n * are invalid HTML: the parser reparents them, and screen readers disagree\n * about which one they are on and what a press means. So the pill is a `<span>`\n * that paints, and everything pressable is a child of it.\n *\n * Both controls stay on the natural Tab order rather than roving. They are two\n * different actions on one object, not N instances of one control, and a reader\n * who tabbed to the chip has to be able to reach \"remove\" without guessing an\n * arrow key.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */\n    selected?: boolean | undefined;\n    /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */\n    removable?: boolean;\n    /** The accessible name of the dismiss control. Localise it, or qualify it — \"Remove Ana Duarte\" reads far better in a list of recipients. */\n    removeLabel?: string;\n    /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */\n    disabled?: boolean;\n    /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */\n    variant?: ChipVariant;\n    /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */\n    size?: ChipSize;\n  }>(),\n  {\n    // Not `false`. `undefined` is the signal that this chip is not a toggle at\n    // all, and Vue casts an absent Boolean prop to `false` unless a default\n    // says otherwise — without this line every chip would claim to be a toggle\n    // that is switched off, and a dismiss-only chip would grow a dead Tab stop.\n    selected: undefined,\n    removable: false,\n    removeLabel: \"Remove\",\n    disabled: false,\n    variant: \"neutral\",\n    size: \"md\",\n  },\n);\n\nconst emit = defineEmits<{\n  /** The flipped selection. The chip does not update itself: a filter chip's state is the query it stands for, and a chip that switched on locally would keep claiming a result set the host never fetched. */\n  \"update:selected\": [value: boolean];\n  /** The dismiss control was activated. Removing the chip from the list is the host's to do. */\n  remove: [];\n}>();\n\nconst toggleable = computed(() => props.selected !== undefined);\n\n// The label's horizontal padding, shared by both branches below so the pill is\n// the same width whether or not it is pressable. The dismiss control supplies\n// its own trailing room, so the label gives its right side back when one is\n// present.\nconst labelPad = computed(() =>\n  cn(props.size === \"sm\" ? \"px-2.5\" : \"px-3\", props.removable && \"pr-1\"),\n);\n\n// Springy transform, steady colour — the same split Button and Checkbox use, so\n// a chip press feels like every other press in the library.\nconst pressStyle =\n  \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);\";\n\n// The unavailable label colour, and it belongs on the label rather than on the\n// pill around it. A colour set on the container is only *inherited* here, and\n// the container already carries `data-[selected]:text-primary-text` — an attribute\n// selector no plain class on the same element outranks. On the label itself it\n// is a declaration rather than an inheritance, so it wins whatever the pill\n// resolved to: 4.67:1 over the drained `--color-muted` fill, 4.77:1 over the\n// primary wash a selected chip keeps.\nconst disabledText = \"group-data-[disabled]:text-muted-foreground\";\n\n// Both inner controls are surfaces *inside* a 32px pill, so the standard\n// outward `outline-offset-2` would draw the toggle's ring straight through the\n// dismiss control sitting 4px to its right, and vice versa. Inset instead —\n// the ring lands just inside the pill's own border, which is where the eye\n// already is. WindowControls takes the same offset for the same reason.\nconst focusRing =\n  \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\";\n\n// Everything a host passes lands on the container: it is the node with an\n// identity (a data-testid, a key in a list), while the two controls inside it\n// are named by their own content and by `removeLabel`. `class` is pulled out of\n// that spread and merged through `cn()` instead — Vue's own class merge only\n// concatenates, so a caller's `max-w-32` would win or lose against the pill's\n// own utilities depending on Tailwind's emission order rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: containerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <span\n    v-bind=\"containerAttrs\"\n    :data-selected=\"selected || undefined\"\n    :data-disabled=\"disabled || undefined\"\n    :class=\"\n      cn(\n        chipVariants({ variant, size }),\n        // Drained to the neutral well, with the hairline the coloured variants\n        // hide: an unavailable chip gives up its hue rather than its legibility.\n        // A *selected* one keeps the primary wash — `data-[selected]:bg-primary-muted`\n        // outranks a plain class — which is right: switched-on is information,\n        // and the label is muted over either fill.\n        //\n        // `border-border` and not the strong weight it used to take.\n        // `theme.css` reserves the strong hairline for a block that must\n        // *assert* its edge, which is the opposite of what this state says, and\n        // the lighter rim is the same one every other unavailable control in the\n        // library slackens to — so a disabled chip in a row of disabled\n        // controls is one treatment rather than a second.\n        disabled && 'border-border bg-muted',\n        removable && 'pr-1',\n        attrs.class as string,\n      )\n    \"\n  >\n    <button\n      v-if=\"toggleable\"\n      type=\"button\"\n      :aria-pressed=\"selected\"\n      :disabled=\"disabled\"\n      :style=\"pressStyle\"\n      :class=\"\n        cn(\n          'inline-flex h-full min-w-0 select-none items-center gap-1 rounded-full',\n          labelPad,\n          // A neutral darkening rather than a token fill: the pill underneath\n          // can be any of eight colours, and a hover state is not an action\n          // colour.\n          'hover:bg-foreground/5 active:scale-press',\n          focusRing,\n          'disabled:pointer-events-none',\n        )\n      \"\n      @click=\"emit('update:selected', !selected)\"\n    >\n      <!-- The check is the half of the selected signal that survives a reader\n           who cannot tell a 12% wash from a 20% one; `aria-pressed` is the\n           other half. It collapses its own width rather than unmounting, so\n           the pill grows into the glyph instead of snapping. -->\n      <span\n        aria-hidden=\"true\"\n        class=\"inline-flex w-0 shrink-0 items-center overflow-hidden opacity-0 transition-[width,opacity] duration-fast ease-spring group-data-[selected]:w-4 group-data-[selected]:opacity-100\"\n      >\n        <Check class=\"h-3.5 w-3.5 shrink-0\" />\n      </span>\n      <span :class=\"cn('truncate', disabledText)\">\n        <!-- @slot The chip's label. Keep it to a word or two — a token that needs a sentence is a row, not a chip. -->\n        <slot />\n      </span>\n    </button>\n    <span v-else :class=\"cn('inline-flex min-w-0 items-center', labelPad)\">\n      <span :class=\"cn('truncate', disabledText)\"><slot /></span>\n    </span>\n\n    <!-- A sibling of the toggle, never a child of it. 24px square is the floor\n         WCAG 2.2 SC 2.5.8 sets for a target, which is what decides the size\n         here rather than the glyph's own 14px. -->\n    <button\n      v-if=\"removable\"\n      type=\"button\"\n      :aria-label=\"removeLabel\"\n      :disabled=\"disabled\"\n      :style=\"pressStyle\"\n      :class=\"\n        cn(\n          'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full',\n          // Not `hover:bg-subtle`, the usual neutral well: it is opaque, and\n          // over a coloured pill it punches a grey hole through the fill\n          // instead of darkening it.\n          'hover:bg-foreground/10 active:scale-90',\n          focusRing,\n          disabledText,\n          'disabled:pointer-events-none',\n        )\n      \"\n      @click=\"emit('remove')\"\n    >\n      <X class=\"h-3.5 w-3.5\" />\n    </button>\n  </span>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/chip/src/Chip.vue.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The same eight names Badge carries, deliberately — a chip and a badge sitting
+ * in one row are the same object in two moods, so `success` has to mean the
+ * same green in both. A ninth name here would be a second vocabulary for one
+ * palette.
+ */
+export type ChipVariant = "neutral" | "outline" | "primary" | "success" | "warning" | "info" | "destructive" | "accent";
+/**
+ * Two heights off the shared control scale (the text input's `sm` and `md`), so
+ * a row of chips above a field lines up with it. There is no `lg`: a chip is a
+ * token, and one big enough to need the 44px step is a Button.
+ */
+export type ChipSize = "sm" | "md";
+/**
+ * The container. It is the coloured pill, and it is deliberately not the
+ * interactive node — see the docblock below for why that separation is the
+ * whole component.
+ *
+ * Selection is a state the *edges* deepen: the hue-carrying variants draw a
+ * stronger border around the wash they already sit in, the hueless ones swap
+ * their fill for the primary wash. It is never any one signal alone that says
+ * so — every selected chip also carries `aria-pressed="true"` and a check
+ * glyph, which is what keeps the state legible to a reader who cannot resolve
+ * a deepened edge from a resting one.
+ */
+export declare const chipVariants: (props?: ({
+    variant?: "accent" | "neutral" | "outline" | "primary" | "success" | "warning" | "info" | "destructive" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */
+    selected?: boolean | undefined;
+    /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */
+    removable?: boolean;
+    /** The accessible name of the dismiss control. Localise it, or qualify it — "Remove Ana Duarte" reads far better in a list of recipients. */
+    removeLabel?: string;
+    /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */
+    disabled?: boolean;
+    /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */
+    variant?: ChipVariant;
+    /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */
+    size?: ChipSize;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */
+    selected?: boolean | undefined;
+    /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */
+    removable?: boolean;
+    /** The accessible name of the dismiss control. Localise it, or qualify it — "Remove Ana Duarte" reads far better in a list of recipients. */
+    removeLabel?: string;
+    /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */
+    disabled?: boolean;
+    /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */
+    variant?: ChipVariant;
+    /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */
+    size?: ChipSize;
+}> & Readonly<{
+    "onUpdate:selected"?: (value: boolean) => any;
+    onRemove?: () => any;
+}>, {
+    size: ChipSize;
+    disabled: boolean;
+    variant: ChipVariant;
+    selected: boolean | undefined;
+    removable: boolean;
+    removeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Chip.vue.d.ts.map

package/dist/packages/primitives/chip/src/Chip.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/chip/src/Chip.vue"],"names":[],"mappings":"AAsTA;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEhG;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY;;;8EAgExB,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA2Bd,uMAAuM;eAC5L,OAAO,GAAG,SAAS;IAC9B,oGAAoG;gBACxF,OAAO;IACnB,6IAA6I;kBAC/H,MAAM;IACpB,8HAA8H;eACnH,OAAO;IAClB,uHAAuH;cAC7G,WAAW;IACrB,oGAAoG;WAC7F,QAAQ;;;;;IAXf,uMAAuM;eAC5L,OAAO,GAAG,SAAS;IAC9B,oGAAoG;gBACxF,OAAO;IACnB,6IAA6I;kBAC/H,MAAM;IACpB,8HAA8H;eACnH,OAAO;IAClB,uHAAuH;cAC7G,WAAW;IACrB,oGAAoG;WAC7F,QAAQ;;;;;UAAR,QAAQ;cAJJ,OAAO;aAER,WAAW;cARV,OAAO,GAAG,SAAS;eAElB,OAAO;iBAEL,MAAM;;cA0PV,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}