@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/switch/src/Switch.vue.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Switch — toggles a boolean setting that takes effect immediately, with no
+ * "Save" step. Built on Reka UI's Switch for role="switch" + aria-checked +
+ * Space/Enter. Label and description live on the surrounding setting row —
+ * wire them in with `aria-labelledby`, since Switch renders a button, not a
+ * labelable input.
+ *
+ * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the
+ * wiring stops being the caller's job: `useFieldControl()` puts the row's id on
+ * the button — labelable, so the row's `<label for>` names the control that has
+ * no name of its own — and brings the row's description, `name`, `required` and
+ * `invalid` with it.
+ *
+ * There is no `readonly` here, and a row's is ignored rather than approximated.
+ * A switch that cannot be flipped is disabled; one that looks live and refuses
+ * the flip is the only state worse than either.
+ */
+type __VLS_Props = {
+    /** Whether the setting is currently on. Omit to let the switch own its own state. */
+    modelValue?: boolean | undefined;
+    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {
+    disabled: boolean | undefined;
+    modelValue: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Switch.vue.d.ts.map

package/dist/packages/primitives/switch/src/Switch.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"names":[],"mappings":"AAkIA;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,WAAW,GAAG;IACf,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAwMJ,QAAA,MAAM,YAAY;;;;;cAzMH,OAAO,GAAG,SAAS;gBAFjB,OAAO,GAAG,SAAS;6EA+MlC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/packages/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { cn } from "../../../core/src/cn.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, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+//#region packages/primitives/switch/src/Switch.vue?vue&type=script&setup=true&lang.ts
+/**
+* Switch — toggles a boolean setting that takes effect immediately, with no
+* "Save" step. Built on Reka UI's Switch for role="switch" + aria-checked +
+* Space/Enter. Label and description live on the surrounding setting row —
+* wire them in with `aria-labelledby`, since Switch renders a button, not a
+* labelable input.
+*
+* Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the
+* wiring stops being the caller's job: `useFieldControl()` puts the row's id on
+* the button — labelable, so the row's `<label for>` names the control that has
+* no name of its own — and brings the row's description, `name`, `required` and
+* `invalid` with it.
+*
+* There is no `readonly` here, and a row's is ignored rather than approximated.
+* A switch that cannot be flipped is disabled; one that looks live and refuses
+* the flip is the only state worse than either.
+*/
+var Switch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Switch",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const { attrs, rest: switchAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: props.disabled
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SwitchRoot), mergeProps({
+				modelValue: __props.modelValue,
+				...unref(switchAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
+				class: unref(cn)("relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent", "transition-[background-color,filter,box-shadow] duration-instant ease-out", "hover:brightness-95", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30", "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]:bg-muted disabled:data-[state=unchecked]:border-border", unref(attrs).class),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(() => [createVNode(unref(SwitchThumb), {
+					style: { "transition": "transform var(--duration-fast) var(--ease-spring)" },
+					class: normalizeClass(unref(cn)("absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm", "active:scale-x-[1.15] active:scale-y-[0.85]", "data-[state=checked]:translate-x-[1rem]"))
+				}, null, 8, ["class"])]),
+				_: 1
+			}, 16, [
+				"disabled",
+				"required",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Switch_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Switch.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\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        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 left-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The travel is a translate, not a `left` change: animating an inset\n          // property relayouts the track on every frame of the slide, while a\n          // transform stays on the compositor. The distance is the checked\n          // inset (1.125rem) minus the resting one (left-0.5), and the\n          // -translate-y-1/2 above composes with it — Tailwind's translate\n          // utilities stack rather than overwrite.\n          'data-[state=checked]:translate-x-[1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAsBd,MAAM,EAAE,OAAO,MAAM,gBAAgB,cAAc;EAoBnD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;;GAIA,OAAA,UAAA,GAAA,YA+Ca,MAAA,UAAA,GA/Cb,WA+Ca;IAAA,YA9CD,QAAA;IAAU,GAAK,MAAA,WAAA;IAAW,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACnD,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAc,MAAA,EAAA,CAAE,CAAA,6GAAA,6EAAA,uBAAA,iFAAA,+GAAA,sHAAqiD,MAAA,KAAA,CAAK,CAAC,KAAA;IAyB3jD,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAEtD,SAAA,cAeE,CAfF,YAeE,MAAA,WAAA,GAAA;KAdA,OAAA,EAAA,cAAA,oDAAA;KACC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,iGAAA,+CAAA,yCAAA,CAAA"}

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

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

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

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

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

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

package/dist/packages/primitives/table/src/Table.js

@@ -0,0 +1,7 @@
+import Table_vue_vue_type_script_setup_true_lang_default, { TABLE_LABELS } from "./Table.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/Table.vue
+var Table_default = Table_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TABLE_LABELS, Table_default as default };
+
+//# sourceMappingURL=Table.js.map

package/dist/packages/primitives/table/src/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\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(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/Table.vue.d.ts

@@ -0,0 +1,45 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { TableLabels } from "../../../labels/src/index";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it,
+ * and exported so a host can build a partial vocabulary against the real
+ * thing rather than a transcription of it.
+ */
+export declare const TABLE_LABELS: TableLabels;
+/** The wrapper owns row padding so every cell under it tightens together. */
+export type TableDensity = "comfortable" | "compact";
+/** Alignment vocabulary shared by headers and cells. */
+export type TableAlign = "left" | "center" | "right";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The table's caption, rendered as a real `<caption>` — the accessible
+     * name for the whole table and the first thing a screen reader says.
+     */
+    caption?: string;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */
+    labels?: LabelOverrides<TableLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The table's caption, rendered as a real `<caption>` — the accessible
+     * name for the whole table and the first thing a screen reader says.
+     */
+    caption?: string;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */
+    labels?: LabelOverrides<TableLabels>;
+}> & Readonly<{}>, {
+    density: TableDensity;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Table.vue.d.ts.map

package/dist/packages/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,72 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/primitives/table/src/Table.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "tabindex"];
+var _hoisted_2 = ["data-density"];
+var _hoisted_3 = {
+	key: 0,
+	class: "sr-only"
+};
+/**
+* Loom's English, co-located with the component so it tree-shakes with it,
+* and exported so a host can build a partial vocabulary against the real
+* thing rather than a transcription of it.
+*/
+var TABLE_LABELS = {
+	region: "Data table",
+	sortedAscending: "Sorted ascending",
+	sortedDescending: "Sorted descending",
+	sort: "Sort"
+};
+var Table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Table",
+	props: {
+		caption: {},
+		density: { default: "comfortable" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("table", TABLE_LABELS, () => props.labels);
+		const region = ref(null);
+		const table = ref(null);
+		const scrollable = ref(false);
+		function measure() {
+			const el = region.value;
+			if (el) scrollable.value = el.scrollWidth > el.clientWidth;
+		}
+		let observer;
+		onMounted(() => {
+			measure();
+			observer = new ResizeObserver(measure);
+			if (table.value) observer.observe(table.value);
+			window.addEventListener("resize", measure, { passive: true });
+		});
+		onBeforeUnmount(() => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "region",
+				ref: region,
+				role: "region",
+				"aria-label": __props.caption ?? unref(text).region,
+				tabindex: scrollable.value ? 0 : void 0,
+				class: "w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
+			}, [createElementVNode("table", {
+				ref_key: "table",
+				ref: table,
+				"data-density": __props.density,
+				class: normalizeClass(unref(cn)("w-full border-collapse text-left text-sm", "[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap", "[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground", `[&[data-density='comfortable']_td]:py-3`, `[&[data-density='compact']_td]:py-1.5`, `[&[data-density='compact']_th]:py-1.5`, "[&_tbody_tr:last-child_td]:border-b-0", "[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium"))
+			}, [__props.caption ? (openBlock(), createElementBlock("caption", _hoisted_3, toDisplayString(__props.caption), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 10, _hoisted_2)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TABLE_LABELS, Table_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Table.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\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(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AAQA,IAAa,eAA4B;CACvC,QAAQ;CACR,iBAAiB;CACjB,kBAAkB;CAClB,MAAM;AACR;;;;;;;;;EAcA,MAAM,QAAQ;EAkBd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAMhE,MAAM,SAAS,IAAwB,IAAI;EAC3C,MAAM,QAAQ,IAAwB,IAAI;EAC1C,MAAM,aAAa,IAAI,KAAK;EAE5B,SAAS,UAAgB;GACvB,MAAM,KAAK,OAAO;GAClB,IAAI,IAAI,WAAW,QAAQ,GAAG,cAAc,GAAG;EACjD;EAEA,IAAI;EACJ,gBAAgB;GACd,QAAQ;GACR,WAAW,IAAI,eAAe,OAAO;GACrC,IAAI,MAAM,OAAO,SAAS,QAAQ,MAAM,KAAK;GAC7C,OAAO,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAC9D,CAAC;EACD,sBAAsB;GACpB,UAAU,WAAW;GACrB,OAAO,oBAAoB,UAAU,OAAO;EAC9C,CAAC;;GAUC,OAAA,UAAA,GAAA,mBAkCM,OAAA;IAjCA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAY,QAAA,WAAW,MAAA,IAAA,CAAI,CAAC;IAC5B,UAAU,WAAA,QAAU,IAAO,KAAA;IAC5B,OAAM;GAEN,GAAA,CAAA,mBA0BQ,SAAA;IAzBF,SAAA;IAAJ,KAAI;IACH,gBAAc,QAAA;IACd,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,4CAAA,mKAAA,4FAAA,2CAAA,yCAAA,yCAAA,yCAAA,kFAAA,CAAA;GAeJ,GAAA,CAAA,QAAA,WAAf,UAAA,GAAA,mBAIU,WAJV,YAIU,gBAFN,QAAA,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAKX,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/packages/primitives/table/src/TableCell.js

@@ -0,0 +1,7 @@
+import TableCell_vue_vue_type_script_setup_true_lang_default from "./TableCell.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/TableCell.vue
+var TableCell_default = TableCell_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableCell_default as default };
+
+//# sourceMappingURL=TableCell.js.map

package/dist/packages/primitives/table/src/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/TableCell.vue.d.ts

@@ -0,0 +1,19 @@
+import type { TableAlign } from "./Table.vue";
+type __VLS_Props = {
+    /** Text alignment; numeric figures want `"right"` for the tabular digits. */
+    align?: TableAlign;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TableCell.vue.d.ts.map

package/dist/packages/primitives/table/src/TableCell.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,WAAW,GAAG;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AA8BJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/table/src/TableCell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { headAlignClass } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+import "./TableHead.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/primitives/table/src/TableCell.vue?vue&type=script&setup=true&lang.ts
+var TableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TableCell",
+	props: { align: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("td", { class: normalizeClass(unref(headAlignClass)(__props.align)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { TableCell_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TableCell.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/table/src/TableCell.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":";;;;;;;;;GAcE,OAAA,UAAA,GAAA,mBAGK,MAAA,EAHA,OAAK,eAAE,MAAA,cAAA,CAAc,CAAC,QAAA,KAAK,CAAA,EAAA,GAAA,CAE9B,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/packages/primitives/table/src/TableHead.js

@@ -0,0 +1,7 @@
+import TableHead_vue_vue_type_script_setup_true_lang_default, { headAlignClass, nextSort } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/TableHead.vue
+var TableHead_default = TableHead_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableHead_default as default, headAlignClass, nextSort };
+
+//# sourceMappingURL=TableHead.js.map

package/dist/packages/primitives/table/src/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableHead.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableAlign } from \"./Table.vue\";\n\n/**\n * Sort state for a sortable header. Tri-state by omission: a sortable column\n * that is not the active sort simply has no direction, which is what\n * `aria-sort`'s absent-attribute form expresses.\n */\nexport type TableSort = \"asc\" | \"desc\";\n\n/** Alignment vocabulary shared with `TableCell`. */\nconst ALIGN_CLASS: Record<TableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  // Numeric columns are read down, not across; tabular digits keep the\n  // places lined up while the eye travels.\n  right: \"text-right [font-variant-numeric:tabular-nums]\",\n};\n\nexport const headAlignClass = (align: TableAlign | undefined): string =>\n  align ? ALIGN_CLASS[align] : \"\";\n\n/** Cycle order: nothing → ascending → descending → nothing. */\nexport const nextSort = (current: TableSort | undefined): TableSort | undefined =>\n  current === undefined ? \"asc\" : current === \"asc\" ? \"desc\" : undefined;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TableLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TABLE_LABELS } from \"./Table.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text alignment; numeric columns want `\"right\"`. */\n    align?: TableAlign;\n    /**\n     * Renders the header as a sort control cycling asc → desc → none.\n     * State is the host's through `v-model:sort`; omit the binding and the\n     * header cycles on its own while still reporting each change.\n     */\n    sortable?: boolean;\n    /** The current direction when sortable. Omit it for an uncontrolled cycle. */\n    sort?: TableSort | undefined;\n    /** Names what the control says on its own account, as any subset of `TableLabels`. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { sortable: false },\n);\n\nconst emit = defineEmits<{ \"update:sort\": [value: TableSort | undefined] }>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// Uncontrolled fallback lives here so a host can write plain `sortable`.\nconst inner = ref<TableSort | undefined>(undefined);\nconst current = computed(() => props.sort ?? inner.value);\n\nfunction toggle(): void {\n  const next = nextSort(current.value);\n  inner.value = next;\n  emit(\"update:sort\", next);\n}\n\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst sortIcon = computed(() => (current.value ? SORT_ICON[current.value] : ChevronsUpDown));\n\n// aria-sort takes full ARIA tokens, not our compact union.\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst ariaSort = computed(() => (current.value ? ARIA_SORT[current.value] : undefined));\n</script>\n\n<template>\n  <th scope=\"col\" :aria-sort=\"ariaSort\" :class=\"cn(headAlignClass(align))\">\n    <!-- The sort control carries its state in words as well as glyphs — a\n         chevron alone is colour/shape-only semantics. `min-h-6` is the WCAG\n         2.5.8 floor made explicit: a text-xs label alone sits under the 24px\n         target every interactive control owes. -->\n    <button\n      v-if=\"sortable\"\n      type=\"button\"\n      class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n      @click=\"toggle()\"\n    >\n      <span class=\"group inline-flex items-center gap-1 font-semibold\">\n        <slot />\n      </span>\n      <component\n        :is=\"sortIcon\"\n        class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"sr-only\">{{\n        current === \"asc\"\n          ? text.sortedAscending\n          : current === \"desc\"\n            ? text.sortedDescending\n            : text.sort\n      }}</span>\n    </button>\n    <template v-else><slot /></template>\n  </th>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/TableHead.vue.d.ts

@@ -0,0 +1,56 @@
+import { type LabelOverrides, type TableLabels } from "../../../labels/src/index";
+import type { TableAlign } from "./Table.vue";
+/**
+ * Sort state for a sortable header. Tri-state by omission: a sortable column
+ * that is not the active sort simply has no direction, which is what
+ * `aria-sort`'s absent-attribute form expresses.
+ */
+export type TableSort = "asc" | "desc";
+export declare const headAlignClass: (align: TableAlign | undefined) => string;
+/** Cycle order: nothing → ascending → descending → nothing. */
+export declare const nextSort: (current: TableSort | undefined) => TableSort | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Text alignment; numeric columns want `"right"`. */
+    align?: TableAlign;
+    /**
+     * Renders the header as a sort control cycling asc → desc → none.
+     * State is the host's through `v-model:sort`; omit the binding and the
+     * header cycles on its own while still reporting each change.
+     */
+    sortable?: boolean;
+    /** The current direction when sortable. Omit it for an uncontrolled cycle. */
+    sort?: TableSort | undefined;
+    /** Names what the control says on its own account, as any subset of `TableLabels`. */
+    labels?: LabelOverrides<TableLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (value: TableSort | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Text alignment; numeric columns want `"right"`. */
+    align?: TableAlign;
+    /**
+     * Renders the header as a sort control cycling asc → desc → none.
+     * State is the host's through `v-model:sort`; omit the binding and the
+     * header cycles on its own while still reporting each change.
+     */
+    sortable?: boolean;
+    /** The current direction when sortable. Omit it for an uncontrolled cycle. */
+    sort?: TableSort | undefined;
+    /** Names what the control says on its own account, as any subset of `TableLabels`. */
+    labels?: LabelOverrides<TableLabels>;
+}> & Readonly<{
+    "onUpdate:sort"?: (value: TableSort | undefined) => any;
+}>, {
+    sortable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TableHead.vue.d.ts.map

package/dist/packages/primitives/table/src/TableHead.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { TABLE_LABELS } from "./Table.vue_vue_type_script_setup_true_lang.js";
+import "./Table.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "@lucide/vue";
+//#region packages/primitives/table/src/TableHead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-sort"];
+var _hoisted_2 = { class: "group inline-flex items-center gap-1 font-semibold" };
+var _hoisted_3 = { class: "sr-only" };
+/** Alignment vocabulary shared with `TableCell`. */
+var ALIGN_CLASS = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right [font-variant-numeric:tabular-nums]"
+};
+var headAlignClass = (align) => align ? ALIGN_CLASS[align] : "";
+/** Cycle order: nothing → ascending → descending → nothing. */
+var nextSort = (current) => current === void 0 ? "asc" : current === "asc" ? "desc" : void 0;
+var TableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TableHead",
+	props: {
+		align: {},
+		sortable: {
+			type: Boolean,
+			default: false
+		},
+		sort: {},
+		labels: {}
+	},
+	emits: ["update:sort"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("table", TABLE_LABELS, () => props.labels);
+		const inner = ref(void 0);
+		const current = computed(() => props.sort ?? inner.value);
+		function toggle() {
+			const next = nextSort(current.value);
+			inner.value = next;
+			emit("update:sort", next);
+		}
+		const SORT_ICON = {
+			asc: ChevronUp,
+			desc: ChevronDown
+		};
+		const sortIcon = computed(() => current.value ? SORT_ICON[current.value] : ChevronsUpDown);
+		const ARIA_SORT = {
+			asc: "ascending",
+			desc: "descending"
+		};
+		const ariaSort = computed(() => current.value ? ARIA_SORT[current.value] : void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("th", {
+				scope: "col",
+				"aria-sort": ariaSort.value,
+				class: normalizeClass(unref(cn)(headAlignClass(__props.align)))
+			}, [__props.sortable ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				type: "button",
+				class: "inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo",
+				onClick: _cache[0] || (_cache[0] = ($event) => toggle())
+			}, [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
+				(openBlock(), createBlock(resolveDynamicComponent(sortIcon.value), {
+					class: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+					"aria-hidden": "true"
+				})),
+				createElementVNode("span", _hoisted_3, toDisplayString(current.value === "asc" ? unref(text).sortedAscending : current.value === "desc" ? unref(text).sortedDescending : unref(text).sort), 1)
+			])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TableHead_vue_vue_type_script_setup_true_lang_default as default, headAlignClass, nextSort };
+
+//# sourceMappingURL=TableHead.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/table/src/TableHead.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableHead.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableAlign } from \"./Table.vue\";\n\n/**\n * Sort state for a sortable header. Tri-state by omission: a sortable column\n * that is not the active sort simply has no direction, which is what\n * `aria-sort`'s absent-attribute form expresses.\n */\nexport type TableSort = \"asc\" | \"desc\";\n\n/** Alignment vocabulary shared with `TableCell`. */\nconst ALIGN_CLASS: Record<TableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  // Numeric columns are read down, not across; tabular digits keep the\n  // places lined up while the eye travels.\n  right: \"text-right [font-variant-numeric:tabular-nums]\",\n};\n\nexport const headAlignClass = (align: TableAlign | undefined): string =>\n  align ? ALIGN_CLASS[align] : \"\";\n\n/** Cycle order: nothing → ascending → descending → nothing. */\nexport const nextSort = (current: TableSort | undefined): TableSort | undefined =>\n  current === undefined ? \"asc\" : current === \"asc\" ? \"desc\" : undefined;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TableLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TABLE_LABELS } from \"./Table.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text alignment; numeric columns want `\"right\"`. */\n    align?: TableAlign;\n    /**\n     * Renders the header as a sort control cycling asc → desc → none.\n     * State is the host's through `v-model:sort`; omit the binding and the\n     * header cycles on its own while still reporting each change.\n     */\n    sortable?: boolean;\n    /** The current direction when sortable. Omit it for an uncontrolled cycle. */\n    sort?: TableSort | undefined;\n    /** Names what the control says on its own account, as any subset of `TableLabels`. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { sortable: false },\n);\n\nconst emit = defineEmits<{ \"update:sort\": [value: TableSort | undefined] }>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// Uncontrolled fallback lives here so a host can write plain `sortable`.\nconst inner = ref<TableSort | undefined>(undefined);\nconst current = computed(() => props.sort ?? inner.value);\n\nfunction toggle(): void {\n  const next = nextSort(current.value);\n  inner.value = next;\n  emit(\"update:sort\", next);\n}\n\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst sortIcon = computed(() => (current.value ? SORT_ICON[current.value] : ChevronsUpDown));\n\n// aria-sort takes full ARIA tokens, not our compact union.\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst ariaSort = computed(() => (current.value ? ARIA_SORT[current.value] : undefined));\n</script>\n\n<template>\n  <th scope=\"col\" :aria-sort=\"ariaSort\" :class=\"cn(headAlignClass(align))\">\n    <!-- The sort control carries its state in words as well as glyphs — a\n         chevron alone is colour/shape-only semantics. `min-h-6` is the WCAG\n         2.5.8 floor made explicit: a text-xs label alone sits under the 24px\n         target every interactive control owes. -->\n    <button\n      v-if=\"sortable\"\n      type=\"button\"\n      class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n      @click=\"toggle()\"\n    >\n      <span class=\"group inline-flex items-center gap-1 font-semibold\">\n        <slot />\n      </span>\n      <component\n        :is=\"sortIcon\"\n        class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"sr-only\">{{\n        current === \"asc\"\n          ? text.sortedAscending\n          : current === \"desc\"\n            ? text.sortedDescending\n            : text.sort\n      }}</span>\n    </button>\n    <template v-else><slot /></template>\n  </th>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAWA,IAAM,cAA0C;CAC9C,MAAM;CACN,QAAQ;CAGR,OAAO;AACT;AAEA,IAAa,kBAAkB,UAC7B,QAAQ,YAAY,SAAS;;AAG/B,IAAa,YAAY,YACvB,YAAY,KAAA,IAAY,QAAQ,YAAY,QAAQ,SAAS,KAAA;;;;;;;;;;;;;;EAU/D,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAGb,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAGhE,MAAM,QAAQ,IAA2B,KAAA,CAAS;EAClD,MAAM,UAAU,eAAe,MAAM,QAAQ,MAAM,KAAK;EAExD,SAAS,SAAe;GACtB,MAAM,OAAO,SAAS,QAAQ,KAAK;GACnC,MAAM,QAAQ;GACd,KAAK,eAAe,IAAI;EAC1B;EAEA,MAAM,YAAY;GAAE,KAAK;GAAW,MAAM;EAAY;EACtD,MAAM,WAAW,eAAgB,QAAQ,QAAQ,UAAU,QAAQ,SAAS,cAAe;EAG3F,MAAM,YAAY;GAAE,KAAK;GAAa,MAAM;EAAa;EACzD,MAAM,WAAW,eAAgB,QAAQ,QAAQ,UAAU,QAAQ,SAAS,KAAA,CAAU;;GAIpF,OAAA,UAAA,GAAA,mBA4BK,MAAA;IA5BD,OAAM;IAAO,aAAW,SAAA;IAAW,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,eAAe,QAAA,KAAK,CAAA,CAAA;GAM3D,GAAA,CAAA,QAAA,YADR,UAAA,GAAA,mBAqBS,UAAA;;IAnBP,MAAK;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;;IAEd,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;KAEV,UAAA,GAAA,YAIE,wBAHK,SAAA,KAAQ,GAAA;KACb,OAAM;KACN,eAAY;;IAEd,mBAMS,QANT,YAMS,gBALP,QAAA,UAAO,QAAuB,MAAA,IAAA,CAAI,CAAC,kBAA4B,QAAA,UAAO,SAA0B,MAAA,IAAA,CAAI,CAAC,mBAA+B,MAAA,IAAA,CAAI,CAAC,IAAI,GAAA,CAAA;GAOhI,CAAA,KAAA,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/primitives/table/src/TableRow.js

@@ -0,0 +1,7 @@
+import TableRow_vue_vue_type_script_setup_true_lang_default, { tableRowVariants } from "./TableRow.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/table/src/TableRow.vue
+var TableRow_default = TableRow_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableRow_default as default, tableRowVariants };
+
+//# sourceMappingURL=TableRow.js.map

package/dist/packages/primitives/table/src/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../../../packages/primitives/table/src/TableRow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** Row emphasis. `selected` and `interactive` compose — a picked row that is\n * also clickable reads as both. */\nexport type TableRowState = \"selected\" | \"interactive\" | \"disabled\";\n\nexport const tableRowVariants = cva(\"transition-colors duration-fast ease-out\", {\n  variants: {\n    state: {\n      // Hover is a promise: only an interactive row may answer the pointer.\n      interactive:\n        \"cursor-pointer hover:bg-subtle/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:bg-subtle/60\",\n      selected: \"bg-primary-muted/60\",\n      disabled: \"text-muted-foreground\",\n      none: \"\",\n    },\n  },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Hover/press language plus keyboard activation; the host owns what activation MEANS via `@activate`. */\n    interactive?: boolean;\n    /** Marks the row as the current choice among its peers (`aria-selected`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: muted, inert, still announced. */\n    disabled?: boolean;\n  }>(),\n  { interactive: false, selected: false, disabled: false },\n);\n\nconst emit = defineEmits<{ activate: [] }>();\n\n// A row is not a button, so it cannot lean on native activation. Clicks\n// coming from real controls inside a cell (RowActions, links) belong to\n// those controls — bubbling them up here would fire the row's activation\n// behind the control's back.\nfunction onActivateClick(event: MouseEvent): void {\n  if (!props.interactive || props.disabled) return;\n  const target = event.target;\n  if (\n    target instanceof Element &&\n    target.closest(\"a, button, input, select, textarea, label, [role='button']\")\n  )\n    return;\n  emit(\"activate\");\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (!props.interactive || props.disabled) return;\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    emit(\"activate\");\n  }\n}\n\nconst state = computed(() =>\n  props.disabled\n    ? \"disabled\"\n    : props.interactive\n      ? \"interactive\"\n      : props.selected\n        ? \"selected\"\n        : \"none\",\n);\n</script>\n\n<template>\n  <tr\n    :class=\"\n      cn(\n        tableRowVariants({ state }),\n        // Selected rides above interactive's hover wash, not under it.\n        selected && !disabled && 'bg-primary-muted/60',\n      )\n    \"\n    :aria-selected=\"interactive || selected ? selected : undefined\"\n    :tabindex=\"interactive && !disabled ? 0 : undefined\"\n    @click=\"onActivateClick\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- @slot The row's cells (`TableCell`, or `TableHead` inside `<thead>`). -->\n    <slot />\n  </tr>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/table/src/TableRow.vue.d.ts

@@ -0,0 +1,39 @@
+/** Row emphasis. `selected` and `interactive` compose — a picked row that is
+ * also clickable reads as both. */
+export type TableRowState = "selected" | "interactive" | "disabled";
+export declare const tableRowVariants: (props?: ({
+    state?: "disabled" | "none" | "interactive" | "selected" | 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<{
+    /** Hover/press language plus keyboard activation; the host owns what activation MEANS via `@activate`. */
+    interactive?: boolean;
+    /** Marks the row as the current choice among its peers (`aria-selected`). */
+    selected?: boolean;
+    /** Unavailable rather than hidden: muted, inert, still announced. */
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    activate: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Hover/press language plus keyboard activation; the host owns what activation MEANS via `@activate`. */
+    interactive?: boolean;
+    /** Marks the row as the current choice among its peers (`aria-selected`). */
+    selected?: boolean;
+    /** Unavailable rather than hidden: muted, inert, still announced. */
+    disabled?: boolean;
+}> & Readonly<{
+    onActivate?: () => any;
+}>, {
+    disabled: boolean;
+    interactive: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TableRow.vue.d.ts.map

package/dist/packages/primitives/table/src/TableRow.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/table/src/TableRow.vue"],"names":[],"mappings":"AAoGA;mCACmC;AACnC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,UAAU,CAAC;AAEpE,eAAO,MAAM,gBAAgB;;8EAW3B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,0GAA0G;kBAC5F,OAAO;IACrB,6EAA6E;eAClE,OAAO;IAClB,qEAAqE;eAC1D,OAAO;;;;IALlB,0GAA0G;kBAC5F,OAAO;IACrB,6EAA6E;eAClE,OAAO;IAClB,qEAAqE;eAC1D,OAAO;;;;cAAP,OAAO;iBAJJ,OAAO;cAEV,OAAO;;cAuFR,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"}