@ecoma-io/loom 0.3.0 → 0.5.0

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"}

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

@@ -0,0 +1,61 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/table/src/TableRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-selected", "tabindex"];
+var tableRowVariants = cva("transition-colors duration-fast ease-out", { variants: { state: {
+	interactive: "cursor-pointer hover:bg-subtle/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:bg-subtle/60",
+	selected: "bg-primary-muted/60",
+	disabled: "text-muted-foreground",
+	none: ""
+} } });
+var TableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TableRow",
+	props: {
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["activate"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		function onActivateClick(event) {
+			if (!props.interactive || props.disabled) return;
+			const target = event.target;
+			if (target instanceof Element && target.closest("a, button, input, select, textarea, label, [role='button']")) return;
+			emit("activate");
+		}
+		function onKeydown(event) {
+			if (!props.interactive || props.disabled) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				emit("activate");
+			}
+		}
+		const state = computed(() => props.disabled ? "disabled" : props.interactive ? "interactive" : props.selected ? "selected" : "none");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", {
+				class: normalizeClass(unref(cn)(unref(tableRowVariants)({ state: state.value }), __props.selected && !__props.disabled && "bg-primary-muted/60")),
+				"aria-selected": __props.interactive || __props.selected ? __props.selected : void 0,
+				tabindex: __props.interactive && !__props.disabled ? 0 : void 0,
+				onClick: onActivateClick,
+				onKeydown
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TableRow_vue_vue_type_script_setup_true_lang_default as default, tableRowVariants };
+
+//# sourceMappingURL=TableRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.vue_vue_type_script_setup_true_lang.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":";;;;;;AAOA,IAAa,mBAAmB,IAAI,4CAA4C,EAC9E,UAAU,EACR,OAAO;CAEL,aACE;CACF,UAAU;CACV,UAAU;CACV,MAAM;AACR,EACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;EAOD,MAAM,QAAQ;EAYd,MAAM,OAAO;EAMb,SAAS,gBAAgB,OAAyB;GAChD,IAAI,CAAC,MAAM,eAAe,MAAM,UAAU;GAC1C,MAAM,SAAS,MAAM;GACrB,IACE,kBAAkB,WAClB,OAAO,QAAQ,4DAA4D,GAE3E;GACF,KAAK,UAAU;EACjB;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,CAAC,MAAM,eAAe,MAAM,UAAU;GAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,KAAK,UAAU;GACjB;EACF;EAEA,MAAM,QAAQ,eACZ,MAAM,WACF,aACA,MAAM,cACJ,gBACA,MAAM,WACJ,aACA,MACV;;GAIE,OAAA,UAAA,GAAA,mBAeK,MAAA;IAdF,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,gBAAA,CAAgB,CAAA,EAAA,OAAG,MAAA,MAAK,CAAA,GAAqF,QAAA,YAAQ,CAAK,QAAA,YAAQ,qBAAA,CAAA;IAO5J,iBAAe,QAAA,eAAe,QAAA,WAAW,QAAA,WAAW,KAAA;IACpD,UAAU,QAAA,eAAW,CAAK,QAAA,WAAQ,IAAO,KAAA;IACzC,SAAO;IACE;GAGV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

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

@@ -0,0 +1,10 @@
+export { default } from "./Table.vue";
+export { TABLE_LABELS } from "./Table.vue";
+export { default as TableRow, tableRowVariants } from "./TableRow.vue";
+export { default as TableHead, headAlignClass, nextSort } from "./TableHead.vue";
+export { default as TableCell } from "./TableCell.vue";
+export type { TableLabels } from "../../../labels/src/index";
+export type { TableDensity, TableAlign } from "./Table.vue";
+export type { TableRowState } from "./TableRow.vue";
+export type { TableSort } from "./TableHead.vue";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,8 @@
+import { TABLE_LABELS } from "./Table.vue_vue_type_script_setup_true_lang.js";
+import Table_default from "./Table.js";
+import { tableRowVariants } from "./TableRow.vue_vue_type_script_setup_true_lang.js";
+import TableRow_default from "./TableRow.js";
+import { headAlignClass, nextSort } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+import TableHead_default from "./TableHead.js";
+import TableCell_default from "./TableCell.js";
+export { TABLE_LABELS, TableCell_default as TableCell, TableHead_default as TableHead, TableRow_default as TableRow, Table_default as default, headAlignClass, nextSort, tableRowVariants };

package/dist/packages/primitives/tabs/src/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-none\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n *\n * The panels are real focus stops: Reka gives each `TabsContent`\n * `tabindex=\"0\"`, which is the ARIA tabs pattern's answer to \"how does a\n * keyboard reader get from the tab list to the content\" — Tab lands on the\n * active panel. An earlier `focus-visible:outline-none` here therefore\n * silenced a legitimate focus indicator (WCAG 2.4.7) rather than a cosmetic\n * one, so the panel wears the canonical ring like every other focusable\n * surface in the library.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/tabs/src/Tabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"names":[],"mappings":"AAwFA,MAAM,WAAW,OAAO;IACtB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAUhB,yEAAyE;iBAC5D,MAAM;IACnB,iFAAiF;UAC3E,OAAO,EAAE;;;;IAHf,yEAAyE;iBAC5D,MAAM;IACnB,iFAAiF;UAC3E,OAAO,EAAE;;;;iCAyKqD,GAAG;EAUrE,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"names":[],"mappings":"AAgGA,MAAM,WAAW,OAAO;IACtB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkBhB,yEAAyE;iBAC5D,MAAM;IACnB,iFAAiF;UAC3E,OAAO,EAAE;;;;IAHf,yEAAyE;iBAC5D,MAAM;IACnB,iFAAiF;UAC3E,OAAO,EAAE;;;;iCA4KqD,GAAG;EAUrE,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/tabs/src/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -38,7 +38,7 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					return openBlock(), createBlock(unref(TabsContent), {
 						key: tab.value,
 						value: tab.value,
-						class: "animate-fade-rise pt-4 focus-visible:outline-none"
+						class: "animate-fade-rise pt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, tab.value)]),
 						_: 2

package/dist/packages/primitives/tabs/src/Tabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-none\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;GAkCE,OAAA,UAAA,GAAA,YA6CW,MAAA,QAAA,GA7CX,WACU,MA4CC,QAAA,CA5CO,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC7B,aAAY;IACX,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cA+BW,CA/BX,YA+BW,MAAA,QAAA,GAAA,EA/BD,OAAM,iEAAgE,GAAA;KAa5E,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBAQc,UAAA,MAAA,WAPE,QAAA,OAAP,QAAG;MADZ,OAAA,UAAA,GAAA,YAQc,MAAA,WAAA,GARd,WAQc;OANX,KAAK,IAAI;OACT,OAAO,IAAI;MACJ,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAa,IAAI,SAAQ,CAAA,GAAA,EACzC,OAAM,6SAA4S,CAAA,GAAA;OAElT,SAAA,cAAe,CAAZ,gBAAA,gBAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;KAEd,CAAA,GAAA,GAAA,IAAA,YASE,MAAA,aAAA,GAAA;MARA,OAAM;MACN,OAAA;OAAA,SAAA;OAAA,aAAA;OAAA,cAAA;MAAA;;;IASJ,CAAA,IAAA,UAAA,IAAA,GAAA,mBAOc,UAAA,MAAA,WANE,QAAA,OAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAOc,MAAA,WAAA,GAAA;MALX,KAAK,IAAI;MACT,OAAO,IAAI;MACZ,OAAM;;MAEN,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAb,IAAI,KAAK,CAAA,CAAA"}
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n *\n * The panels are real focus stops: Reka gives each `TabsContent`\n * `tabindex=\"0\"`, which is the ARIA tabs pattern's answer to \"how does a\n * keyboard reader get from the tab list to the content\" — Tab lands on the\n * active panel. An earlier `focus-visible:outline-none` here therefore\n * silenced a legitimate focus indicator (WCAG 2.4.7) rather than a cosmetic\n * one, so the panel wears the canonical ring like every other focusable\n * surface in the library.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;GA0CE,OAAA,UAAA,GAAA,YA6CW,MAAA,QAAA,GA7CX,WACU,MA4CC,QAAA,CA5CO,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC7B,aAAY;IACX,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cA+BW,CA/BX,YA+BW,MAAA,QAAA,GAAA,EA/BD,OAAM,iEAAgE,GAAA;KAa5E,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBAQc,UAAA,MAAA,WAPE,QAAA,OAAP,QAAG;MADZ,OAAA,UAAA,GAAA,YAQc,MAAA,WAAA,GARd,WAQc;OANX,KAAK,IAAI;OACT,OAAO,IAAI;MACJ,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAa,IAAI,SAAQ,CAAA,GAAA,EACzC,OAAM,6SAA4S,CAAA,GAAA;OAElT,SAAA,cAAe,CAAZ,gBAAA,gBAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;KAEd,CAAA,GAAA,GAAA,IAAA,YASE,MAAA,aAAA,GAAA;MARA,OAAM;MACN,OAAA;OAAA,SAAA;OAAA,aAAA;OAAA,cAAA;MAAA;;;IASJ,CAAA,IAAA,UAAA,IAAA,GAAA,mBAOc,UAAA,MAAA,WANE,QAAA,OAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAOc,MAAA,WAAA,GAAA;MALX,KAAK,IAAI;MACT,OAAO,IAAI;MACZ,OAAM;;MAEN,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAb,IAAI,KAAK,CAAA,CAAA"}