@ecoma-io/loom 0.2.0 → 0.3.0

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:opacity-50", unref(attrs).class),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(() => [createVNode(unref(SwitchThumb), {
+					style: { "transition": "left var(--duration-instant) var(--ease-out),\n          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]:left-[1.125rem]"))
+				}, 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 dims the control. 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        'disabled:cursor-not-allowed disabled:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"\n        transition:\n          left var(--duration-instant) var(--ease-out),\n          transform var(--duration-fast) var(--ease-spring);\n      \"\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          'data-[state=checked]:left-[1.125rem]',\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,YAiCa,MAAA,UAAA,GAjCb,WAiCa;IAAA,YAhCD,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,mDAAuoB,MAAA,KAAA,CAAK,CAAC,KAAA;IAa7pB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAEtD,SAAA,cAaE,CAbF,YAaE,MAAA,WAAA,GAAA;KAZA,OAAA,EAAA,cAAA,6GAAA;KAKC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,iGAAA,+CAAA,sCAAA,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/tabs/src/Tabs.js

@@ -0,0 +1,7 @@
+import Tabs_vue_vue_type_script_setup_true_lang_default from "./Tabs.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/tabs/src/Tabs.vue
+var Tabs_default = Tabs_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Tabs_default as default };
+
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +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"}

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

@@ -0,0 +1,55 @@
+import { optional } from "../../../core/src/props.js";
+import "../../../core/src/index.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
+//#region packages/primitives/tabs/src/Tabs.vue?vue&type=script&setup=true&lang.ts
+var Tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Tabs",
+	props: {
+		modelValue: {},
+		tabs: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TabsRoot), mergeProps(unref(optional)({ modelValue: __props.modelValue }), {
+				orientation: "horizontal",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
+			}), {
+				default: withCtx(() => [createVNode(unref(TabsList), { class: "relative inline-flex items-center gap-1 border-b border-border" }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
+						return openBlock(), createBlock(unref(TabsTrigger), mergeProps({
+							key: tab.value,
+							value: tab.value
+						}, { ref_for: true }, unref(optional)({ disabled: tab.disabled }), { 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" }), {
+							default: withCtx(() => [createTextVNode(toDisplayString(tab.label), 1)]),
+							_: 2
+						}, 1040, ["value"]);
+					}), 128)), createVNode(unref(TabsIndicator), {
+						class: "absolute bottom-0 left-0 h-0.5 bg-primary",
+						style: {
+							"width": "var(--reka-tabs-indicator-size)",
+							"transform": "translateX(var(--reka-tabs-indicator-position))",
+							"transition": "width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring)"
+						}
+					})]),
+					_: 1
+				}), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
+					return openBlock(), createBlock(unref(TabsContent), {
+						key: tab.value,
+						value: tab.value,
+						class: "animate-fade-rise pt-4 focus-visible:outline-none"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, tab.value)]),
+						_: 2
+					}, 1032, ["value"]);
+				}), 128))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { Tabs_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { default } from "./Tabs.vue";
+export type { TabItem } from "./Tabs.vue";
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

package/dist/packages/primitives/tags-input/src/TagsInput.js

@@ -0,0 +1,7 @@
+import TagsInput_vue_vue_type_script_setup_true_lang_default, { TAGS_INPUT_LABELS } from "./TagsInput.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/tags-input/src/TagsInput.vue
+var TagsInput_default = TagsInput_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TAGS_INPUT_LABELS, TagsInput_default as default };
+
+//# sourceMappingURL=TagsInput.js.map

package/dist/packages/primitives/tags-input/src/TagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","names":[],"sources":["../../../../../packages/primitives/tags-input/src/TagsInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  TagsInputLabels,\n  TagsInputRejectReason,\n  TagsInputRejection,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * Every refusal names the value, because a reader looking at eight tokens\n * cannot tell which \"that one\" is.\n *\n * Loom's English does not name the limit, though `rejected` is handed it: a\n * `max` refusal only ever happens when a limit is set, so a sentence that also\n * had to word the limitless case would be a branch nothing can reach. The\n * number is there for a host that wants \"only 3 can be added\" — and the count\n * description already reads \"3 of 3 tags\" on focus either way.\n */\nfunction describeRejection(rejection: TagsInputRejection): string {\n  switch (rejection.reason) {\n    case \"duplicate\":\n      return `${rejection.value} has already been added.`;\n    case \"max\":\n      return `${rejection.value} was not added — the field is full.`;\n  }\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const TAGS_INPUT_LABELS: TagsInputLabels = {\n  remove: ({ value }) => `Remove ${value}`,\n  count: ({ count, max }) =>\n    max === undefined\n      ? `${String(count)} ${count === 1 ? \"tag\" : \"tags\"}`\n      : `${String(count)} of ${String(max)} tags`,\n  rejected: ({ rejections }) => rejections.map(describeRejection).join(\" \"),\n  clear: \"Clear all tags\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useId, useTemplateRef, watch } from \"vue\";\nimport {\n  TagsInputRoot,\n  TagsInputInput,\n  TagsInputItem,\n  TagsInputItemText,\n  TagsInputClear,\n} from \"reka-ui\";\nimport { TriangleAlert, X } from \"@lucide/vue\";\nimport Chip from \"@ecoma-io/loom-chip\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * TagsInput — several values typed into one field, each committed to a\n * removable token: keywords on an article, recipients on a message, labels on\n * an issue.\n *\n * The line against its neighbours is what the values *are*. A\n * [Select](../Select/Select.vue) or a [Combobox](../Combobox/Combobox.vue)\n * picks from a list somebody else wrote, and cannot produce a value that is not\n * already in it; this field's whole point is that the reader invents the\n * values. A [TextField](../TextField/TextField.vue) holds one value, and a\n * comma-separated string in one is a list the application has to parse and the\n * reader has to punctuate correctly. Reach for\n * [Chip](@ecoma-io/loom-chip) alone when the tokens are a display of something\n * already decided — a chip row nobody types into is not a field.\n *\n * Each token *is* a Chip, in the removable shape Chip already ships, so a token\n * here and a chip elsewhere in the same form are the same object. The remove\n * control is Chip's own rather than Reka's `TagsInputItemDelete`, which is\n * `tabindex=\"-1\"` by design: Reka pairs it with an arrow-key selection that\n * moves no focus and sets no `aria-activedescendant`, so the token it\n * highlights is announced to nobody. Loom keeps the buttons on the tab order\n * and replaces the selection outright — see `onKeydownCapture`.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * the hint or error line, and `required` / `invalid` / `disabled` / `readonly` /\n * `name` all arrive through `useFieldControl()`. Every prop below still wins\n * over the row when it is set, in both directions — which is why the four\n * booleans default to `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states here as everywhere else, and\n * the difference is larger than usual because there are two things to freeze. A\n * read-only field shows its tokens, refuses to grow one and drops every remove\n * control, while staying a tab stop and staying in the submitted data. A\n * disabled field is unavailable: not a tab stop, not submitted, and its tokens\n * drain to the neutral fill.\n *\n * That makes **three** resting appearances rather than two, and each is three\n * changes rather than one — fill, text colour and border weight together. See\n * the box's class list for why one channel is not enough.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The committed tokens. Pair with `@update:modelValue` for `v-model`. */\n    modelValue?: string[] | undefined;\n    /** Text shown in the empty text box. It is hidden once a token exists, where it would sit beside the tokens claiming the field is empty. */\n    placeholder?: string;\n    /** The most tokens the field will hold. Anything past it is refused and reported rather than dropped. */\n    max?: number;\n    /** Whether the same value may be committed twice. Off, so a repeated value is refused and says so. */\n    duplicates?: boolean;\n    /** What commits a token besides Enter. Typing it, or pasting text containing it, splits at it. */\n    delimiter?: string;\n    /** Renders a control that empties the field in one press. */\n    clearable?: boolean;\n    /** Disables the field: no tab stop, no editing, no remove controls, nothing submitted. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the tokens without allowing an edit, while staying focusable and still submitted. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border/ring and sets aria-invalid. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required`). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post. Each token is submitted as `name[0]`, `name[1]`, … Unset defers to a wrapping Field. */\n    name?: string;\n    /** The accessible name of the text box, when no visible element already labels it. */\n    ariaLabel?: string;\n    /** The id of the visible element that labels the text box (e.g. a Field wrapper's label). */\n    ariaLabelledby?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `TagsInputLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is a field whose tokens are people,\n     * where \"Remove Ana Duarte\" reads and \"Remove tag\" does not.\n     */\n    labels?: LabelOverrides<TagsInputLabels>;\n  }>(),\n  {\n    // Not `[]`. An empty array is a concrete value, so it would say \"the host\n    // owns this list\", and a host that binds nothing would watch every token it\n    // typed vanish on the next render. `undefined` is what leaves the control\n    // managing its own — the same distinction `src/lib/props.ts` exists to\n    // preserve for the Reka-backed primitives.\n    modelValue: undefined,\n    duplicates: false,\n    delimiter: \",\",\n    clearable: false,\n    // Not `false`, for any of the four. `false` is a caller saying \"this field\n    // is fine / enabled / editable even though its row is not\"; absent is a\n    // caller saying nothing, and only `undefined` survives to mean that past\n    // Vue's absent-Boolean-casts-to-false rule. TextField.vue carries the full\n    // reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The full token list after the change, trimmed and de-duplicated. Never a partial list. */\n  \"update:modelValue\": [values: string[]];\n  /** Every value refused by this one interaction, each with the rule that refused it. Fires once per interaction, not once per value. */\n  reject: [rejections: TagsInputRejection[]];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"tagsInput\", TAGS_INPUT_LABELS, () => props.labels);\n\n// `class` sizes the whole control and lands on the outer element; everything\n// else a caller passes — `id`, `data-testid`, `aria-describedby`,\n// `autocomplete` — describes the real `<input>` and lands there. The outer\n// element is not a form control and the input is not the box a caller lays out,\n// so there is no one node both belong on.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\nconst generatedId = useId();\nconst countId = useId();\nconst messageId = useId();\n\nconst inputRef = useTemplateRef<{ $el: HTMLInputElement }>(\"input\");\n\n/**\n * The committed tokens, and the reason this control keeps its own copy rather\n * than forwarding `modelValue` into Reka and letting it manage the state.\n *\n * Loom applies four rules Reka has no notion of — trim, drop the blanks a paste\n * leaves behind, refuse a duplicate, refuse anything past `max` — so Reka is\n * configured to accept everything (`duplicate`, no `max`) and *propose*, and\n * `onProposed` decides. That needs a value flowing back down, which means a\n * `:model-value` that is always defined and always ours.\n *\n * It is `useVModel(…, { passive: true })` written out, and behaves the same way\n * Reka's own would: the change is taken locally and emitted, and a controlled\n * host that declines it is honoured on the next value it does send. Seeded from\n * the prop rather than sanitised, because a list the host already holds is the\n * host's to hold — the rules above are about what this field *accepts*.\n */\nconst tokens = ref<string[]>([...(props.modelValue ?? [])]);\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (next !== undefined) tokens.value = [...next];\n  },\n  { deep: true },\n);\n\nconst rejections = ref<TagsInputRejection[]>([]);\nconst message = computed(() =>\n  rejections.value.length > 0\n    ? text.value.rejected({ rejections: rejections.value, max: props.max })\n    : \"\",\n);\n\n// The refusal message reads first and the count second: both describe the\n// field, and the one that just changed is the more specific thing to say. A\n// wrapping Field's own hint or error is merged in after both by\n// `useFieldControl`, never in place of them.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: [\n    message.value.length > 0 ? messageId : undefined,\n    countId,\n    attrs[\"aria-describedby\"],\n  ]\n    .filter((id): id is string => typeof id === \"string\" && id.length > 0)\n    .join(\" \"),\n  name: props.name,\n  disabled: props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// The `<label for>` a Field renders has to resolve to the text box, and a\n// caller passing their own id must not end up with a label pointing at nothing.\nconst inputId = computed(() => field.id ?? generatedId);\n\n/**\n * A stable key per token, since the token itself cannot be one: `duplicates`\n * makes two identical strings legal and Vue warns on the collision.\n *\n * The n-th occurrence of a value keys as `n:value`, so removing one of two\n * identical tokens unmounts exactly one node and the survivor keeps the other —\n * indistinguishable, because the two say the same thing. Keying by index\n * instead would re-key every row after the one removed, which patches text into\n * nodes that belong to other tokens.\n */\nconst rows = computed(() => {\n  const seen = new Map<string, number>();\n  return tokens.value.map((value) => {\n    const ordinal = seen.get(value) ?? 0;\n    seen.set(value, ordinal + 1);\n    return { value, key: `${String(ordinal)}:${value}` };\n  });\n});\n\n/**\n * Every rule this field applies to a value, in the order a reader meets them,\n * over the *whole* proposal rather than only its tail — the list on screen can\n * never hold a token the box would have refused, whatever a host seeded it with.\n *\n * `settled` is how many entries were already committed, and only what lies past\n * it is *reported*. Everything before it is normalised in silence: a host that\n * seeded two identical values while asking for none is corrected, but saying\n * \"design has already been added\" about a token that was there when the page\n * loaded, at the moment the reader adds something else entirely, describes\n * nothing they did.\n */\nfunction reduce(\n  proposed: readonly string[],\n  settled: number,\n): { kept: string[]; refused: TagsInputRejection[] } {\n  const kept: string[] = [];\n  const refused: TagsInputRejection[] = [];\n\n  proposed.forEach((raw, index) => {\n    const value = raw.trim();\n    // Skipped rather than refused. A blank is what a trailing delimiter leaves\n    // behind — \"a, b, c,\" pastes as four segments — and a reader who pasted\n    // three values did not ask about a fourth.\n    if (value === \"\") return;\n\n    const reason: TagsInputRejectReason | undefined =\n      props.max !== undefined && kept.length >= props.max\n        ? \"max\"\n        : !props.duplicates && kept.includes(value)\n          ? \"duplicate\"\n          : undefined;\n\n    if (reason === undefined) kept.push(value);\n    else if (index >= settled) refused.push({ value, reason });\n  });\n\n  return { kept, refused };\n}\n\nfunction same(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\nfunction focusInput(): void {\n  void nextTick(() => inputRef.value?.$el.focus());\n}\n\nfunction commit(next: string[]): void {\n  // The message named values the reader has since edited past. An error sitting\n  // under a field somebody is actively fixing reads as an error about the fix.\n  rejections.value = [];\n  tokens.value = next;\n  emit(\"update:modelValue\", next);\n}\n\n/**\n * Reka has already written `proposed` into its own model by the time this runs.\n * `tokens.value` is assigned on every path, including the one where nothing\n * changed, and that is load-bearing: `reduce` returns a fresh array, and only a\n * new reference on the prop Reka watches puts its internal copy back in step\n * with what this field actually accepted. Skip the assignment and a refused\n * value stays in Reka's model — invisible on screen, and submitted by the\n * hidden inputs it renders for `name`.\n */\nfunction onProposed(proposed: string[]): void {\n  const { kept, refused } = reduce(proposed, tokens.value.length);\n  const changed = !same(kept, tokens.value);\n\n  if (changed) commit(kept);\n  else tokens.value = kept;\n\n  if (refused.length === 0) return;\n  rejections.value = refused;\n  emit(\"reject\", refused);\n\n  // One refusal from one typed commit is the reader's own draft, and Reka has\n  // just cleared the box under them. Put it back: a field that eats what it\n  // will not take leaves the reader retyping a value they can no longer see.\n  // Only the single case — restoring one of three pasted values would be\n  // choosing between them.\n  const only = refused.length === 1 ? refused[0] : undefined;\n  if (only === undefined) return;\n  void nextTick(() => {\n    const input = inputRef.value?.$el;\n    if (!input || input.value !== \"\") return;\n    input.value = only.value;\n    input.setSelectionRange(only.value.length, only.value.length);\n  });\n}\n\nfunction removeAt(index: number): void {\n  if (field.disabled || field.readonly) return;\n  commit(tokens.value.filter((_, at) => at !== index));\n  // The button that was pressed has just unmounted, and a browser drops focus\n  // to `<body>` when it does. The text box is where the reader was heading\n  // anyway, and it is the one node in this control that never goes away.\n  focusInput();\n}\n\n/**\n * The keys Reka's `onInputKeydown` claims once the caret sits at the very\n * start of the text box, and the reason this handler runs in the capture phase\n * on the way down rather than as a listener on the input itself: a fallthrough\n * handler is merged *after* Reka's and cannot stop it.\n *\n * What Reka does with them is a virtual selection — Backspace marks the last\n * token, arrows walk it, a second Backspace deletes it — that moves no focus\n * and publishes no `aria-activedescendant`. On screen it is a highlight; to a\n * screen reader it is nothing at all, so the second Backspace destroys a value\n * the reader was never told was chosen. That is the failure this control is\n * most likely to ship, so the whole mechanism is stopped here.\n *\n * In its place, one rule: **Backspace on an empty box lifts the last token back\n * into it**, as editable text with the caret at the end. Nothing is destroyed —\n * the value is on screen, in a box the reader is already focused on, and Enter\n * puts it straight back. The token that left is a `commit`, so a host watching\n * `update:modelValue` sees the edit begin.\n */\nconst CARET_KEYS = new Set([\"Backspace\", \"Delete\", \"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"]);\n\nfunction onKeydownCapture(event: KeyboardEvent): void {\n  // An IME's own Backspace edits the composition, and Reka's handlers bail on\n  // the same flag for the same reason.\n  if (event.isComposing) return;\n  const input = event.target;\n  if (!(input instanceof HTMLInputElement)) return;\n  if (!CARET_KEYS.has(event.key)) return;\n  if (input.selectionStart !== 0 || input.selectionEnd !== 0) return;\n\n  // Stopped only for the keys and only at the caret position where Reka would\n  // have acted. Everything else — Enter, the delimiter, every printable\n  // character — reaches its handlers untouched.\n  event.stopPropagation();\n\n  if (event.key !== \"Backspace\" || input.value !== \"\") return;\n  if (field.disabled || field.readonly) return;\n  const last = tokens.value.at(-1);\n  if (last === undefined) return;\n\n  event.preventDefault();\n  commit(tokens.value.slice(0, -1));\n  input.value = last;\n  input.setSelectionRange(last.length, last.length);\n}\n\n/**\n * A read-only field takes nothing, and the native `readonly` attribute is not\n * enough to say so. Reka's paste handler reads the clipboard and commits from\n * it directly, without ever consulting the input it fired on, so a paste into a\n * read-only field would grow tokens the reader cannot then remove.\n */\nfunction onPasteCapture(event: ClipboardEvent): void {\n  if (!field.readonly && !field.disabled) return;\n  event.preventDefault();\n  event.stopPropagation();\n}\n</script>\n\n<template>\n  <TagsInputRoot\n    as=\"div\"\n    v-bind=\"optional({ name: field.name })\"\n    :model-value=\"tokens\"\n    :delimiter=\"delimiter\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    add-on-paste\n    duplicate\n    :class=\"cn('flex flex-col', attrs.class as string)\"\n    @update:model-value=\"onProposed\"\n    @keydown.capture=\"onKeydownCapture\"\n    @paste.capture=\"onPasteCapture\"\n  >\n    <!-- `duplicate` and the absent `max` above are deliberate: Reka is told to\n         accept every value it is offered, so that one place — `reduce` —\n         decides what a token is. Two refusal ladders would be two answers to\n         `duplicates`, and only one would be the one `reject` reports.\n\n         The state markers live on the box rather than on the root, and not by\n         preference: an attribute bound on `TagsInputRoot` is a fallthrough\n         attr, and the root renders through Reka's `CollectionSlot`, which does\n         not carry one to the element underneath. The box is also the honest\n         node for them — it is what the state is painted on. -->\n    <div\n      :data-disabled=\"field.disabled || undefined\"\n      :data-readonly=\"field.readonly || undefined\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-0.5 text-sm text-foreground',\n          'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n          // Rim-lit at rest, the weave blooms on focus, exactly as TextField's\n          // does — a field holding tokens is still a field, and a form row\n          // should not have two focus languages in it.\n          'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n          !field.invalid && 'focus-within:shadow-halo',\n          // Lifted rather than dimmed, and it keeps its focus ring: a read-only\n          // field is a value **on show**, not an unavailable control. The fill\n          // rises off `background` to `subtle` so the box reads as settled, and\n          // the text stays full strength — 13.45:1 over that fill — because\n          // being read is the entire purpose of the state. The border does not\n          // move, because nothing about the field's reach has: it is still a\n          // tab stop and still submitted.\n          field.readonly && 'bg-subtle',\n          // Unavailable is a step further down all three channels: the fill\n          // drains to `muted`, the text follows to `muted-foreground` (4.67:1\n          // over it) and the rim slackens from `input` to the lighter `border`.\n          //\n          // Read-only and disabled used to share `bg-muted` and part on the\n          // text colour alone, which is a distinction made in hue and nothing\n          // else — the one thing a reader with a colour deficiency does not\n          // receive. Three channels is what makes available → on show →\n          // unavailable legible without it.\n          //\n          // No `opacity-50` anywhere in that, and that is the point. Every\n          // token inside is a Chip that has already drained itself to a\n          // measured unavailable fill; halving the alpha over the top of that\n          // takes its label below the contrast floor. `border-border` and not\n          // the strong weight, for the reason `theme.css` gives the strong one:\n          // it is for a block that must **assert** its edge, and an unavailable\n          // field is the one thing that must not.\n          field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n          // The same appearance, reached from the other direction: a\n          // `<fieldset disabled>` above this field disables the `<input>` and\n          // every token's remove button natively and never touches\n          // `field.disabled`, so the rule above cannot fire and the box\n          // rendered byte-identical to an editable one.\n          //\n          // `in-[fieldset:disabled]:` reads the attribute that did the\n          // disabling, so the fill and the native inertness cannot disagree.\n          // See TextField.vue for why it is preferred to a `has-[:disabled]:`\n          // rule reading this box's own contents.\n          'in-[fieldset:disabled]:cursor-not-allowed in-[fieldset:disabled]:bg-muted in-[fieldset:disabled]:text-muted-foreground',\n          // Gated for the reason the two rules below are ordered: Tailwind\n          // emits the ancestor half of `in-*` inside `:where()`, so this\n          // carries no more specificity than `border-destructive` and would\n          // win on emission order alone.\n          !field.invalid && 'in-[fieldset:disabled]:border-border',\n          // Last of the rules that name a border colour, and the order is\n          // load-bearing: `cn()` resolves a border colour by whichever class it\n          // saw last, so a field that is both in error and unavailable would\n          // lose its destructive rim to the disabled one if this sat above it.\n          field.invalid && 'border-destructive focus-within:outline-destructive',\n        )\n      \"\n    >\n      <!-- A real list, so a reader browsing the field meets the tokens as\n           items rather than as a run of buttons. It is not where the count\n           comes from, though: Tailwind's preflight sets `list-style: none` on\n           every `ul`, and Safari drops the list role from a list styled that\n           way — which is why the count below is published in words instead of\n           left to the browser. -->\n      <ul v-if=\"tokens.length > 0\" class=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n        <TagsInputItem\n          v-for=\"(row, index) in rows\"\n          :key=\"row.key\"\n          as=\"li\"\n          :value=\"row.value\"\n          class=\"flex animate-fade-rise\"\n        >\n          <Chip\n            size=\"sm\"\n            :removable=\"!field.readonly\"\n            :disabled=\"field.disabled\"\n            :remove-label=\"text.remove({ value: row.value })\"\n            @remove=\"removeAt(index)\"\n          >\n            <TagsInputItemText />\n          </Chip>\n        </TagsInputItem>\n      </ul>\n\n      <!-- `field.attrs` spreads **after** the fallthrough attrs, and that\n           position is the contract: the bag has already resolved the caller's\n           own `id` and `aria-describedby`, and it drops every key that resolved\n           to nothing, so it can only add.\n\n           `:id` restates what the bag already holds, or supplies the id a\n           Field's `<label for>` needs when it holds none. `:name` undoes one\n           key of it on purpose — the text box holds a draft, not the value, and\n           a `name` on it would post whatever was half-typed instead of the\n           tokens. The value is posted by the hidden inputs the root renders. -->\n      <TagsInputInput\n        :id=\"inputId\"\n        ref=\"input\"\n        v-bind=\"{\n          ...inputAttrs,\n          ...field.attrs,\n          ...optional({ placeholder: tokens.length === 0 ? placeholder : undefined }),\n        }\"\n        :name=\"undefined\"\n        :aria-label=\"ariaLabel\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :readonly=\"field.readonly\"\n        class=\"h-8 min-w-24 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n\n      <TagsInputClear\n        v-if=\"clearable && tokens.length > 0 && !field.readonly\"\n        :aria-label=\"text.clear\"\n        :disabled=\"field.disabled\"\n        class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:cursor-not-allowed\"\n        @click=\"focusInput\"\n      >\n        <X class=\"h-4 w-4\" />\n      </TagsInputClear>\n\n      <!-- The count, and the only thing that tells a reader how many tokens are\n           in the field without walking them. Reka publishes nothing of the\n           sort: its root is an unlabelled `div`. It is wired through\n           `aria-describedby` rather than announced, so it is heard on focus and\n           on every return to the field, which is when the question is asked. -->\n      <span :id=\"countId\" class=\"sr-only\">\n        {{ text.count({ count: tokens.length, max }) }}\n      </span>\n    </div>\n\n    <!-- The region is in the DOM from the first render, empty. A live region\n         mounted at the same moment as its text is a region assistive tech was\n         not yet watching, so the first refusal — the one that matters most — is\n         the one it announces least reliably. -->\n    <div aria-live=\"polite\" aria-atomic=\"true\">\n      <p\n        v-if=\"message.length > 0\"\n        :id=\"messageId\"\n        class=\"mt-1.5 flex animate-fade-rise items-start gap-2 text-small text-destructive-text\"\n      >\n        <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n        <span>{{ message }}</span>\n      </p>\n    </div>\n  </TagsInputRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/tags-input/src/TagsInput.vue.d.ts

@@ -0,0 +1,101 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { TagsInputLabels, TagsInputRejection } from "@ecoma-io/loom-labels";
+/**
+ * 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 TAGS_INPUT_LABELS: TagsInputLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The committed tokens. Pair with `@update:modelValue` for `v-model`. */
+    modelValue?: string[] | undefined;
+    /** Text shown in the empty text box. It is hidden once a token exists, where it would sit beside the tokens claiming the field is empty. */
+    placeholder?: string;
+    /** The most tokens the field will hold. Anything past it is refused and reported rather than dropped. */
+    max?: number;
+    /** Whether the same value may be committed twice. Off, so a repeated value is refused and says so. */
+    duplicates?: boolean;
+    /** What commits a token besides Enter. Typing it, or pasting text containing it, splits at it. */
+    delimiter?: string;
+    /** Renders a control that empties the field in one press. */
+    clearable?: boolean;
+    /** Disables the field: no tab stop, no editing, no remove controls, nothing submitted. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the tokens without allowing an edit, while staying focusable and still submitted. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border/ring and sets aria-invalid. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required`). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post. Each token is submitted as `name[0]`, `name[1]`, … Unset defers to a wrapping Field. */
+    name?: string;
+    /** The accessible name of the text box, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the text box (e.g. a Field wrapper's label). */
+    ariaLabelledby?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `TagsInputLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is a field whose tokens are people,
+     * where "Remove Ana Duarte" reads and "Remove tag" does not.
+     */
+    labels?: LabelOverrides<TagsInputLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reject: (rejections: TagsInputRejection[]) => any;
+    "update:modelValue": (values: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The committed tokens. Pair with `@update:modelValue` for `v-model`. */
+    modelValue?: string[] | undefined;
+    /** Text shown in the empty text box. It is hidden once a token exists, where it would sit beside the tokens claiming the field is empty. */
+    placeholder?: string;
+    /** The most tokens the field will hold. Anything past it is refused and reported rather than dropped. */
+    max?: number;
+    /** Whether the same value may be committed twice. Off, so a repeated value is refused and says so. */
+    duplicates?: boolean;
+    /** What commits a token besides Enter. Typing it, or pasting text containing it, splits at it. */
+    delimiter?: string;
+    /** Renders a control that empties the field in one press. */
+    clearable?: boolean;
+    /** Disables the field: no tab stop, no editing, no remove controls, nothing submitted. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the tokens without allowing an edit, while staying focusable and still submitted. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border/ring and sets aria-invalid. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required`). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post. Each token is submitted as `name[0]`, `name[1]`, … Unset defers to a wrapping Field. */
+    name?: string;
+    /** The accessible name of the text box, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the text box (e.g. a Field wrapper's label). */
+    ariaLabelledby?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `TagsInputLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: the case it exists for is a field whose tokens are people,
+     * where "Remove Ana Duarte" reads and "Remove tag" does not.
+     */
+    labels?: LabelOverrides<TagsInputLabels>;
+}> & Readonly<{
+    onReject?: (rejections: TagsInputRejection[]) => any;
+    "onUpdate:modelValue"?: (values: string[]) => any;
+}>, {
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
+    modelValue: string[] | undefined;
+    clearable: boolean;
+    duplicates: boolean;
+    delimiter: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=TagsInput.vue.d.ts.map

package/dist/packages/primitives/tags-input/src/TagsInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tags-input/src/TagsInput.vue"],"names":[],"mappings":"AAomBA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,OAAO,KAAK,EACV,eAAe,EAEf,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAqB/B;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAQ/B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA0Cd,0EAA0E;iBAC7D,MAAM,EAAE,GAAG,SAAS;IACjC,4IAA4I;kBAC9H,MAAM;IACpB,yGAAyG;UACnG,MAAM;IACZ,sGAAsG;iBACzF,OAAO;IACpB,kGAAkG;gBACtF,MAAM;IAClB,6DAA6D;gBACjD,OAAO;IACnB,4HAA4H;eACjH,OAAO,GAAG,SAAS;IAC9B,gIAAgI;eACrH,OAAO,GAAG,SAAS;IAC9B,yHAAyH;cAC/G,OAAO,GAAG,SAAS;IAC7B,uGAAuG;eAC5F,OAAO,GAAG,SAAS;IAC9B,kIAAkI;WAC3H,MAAM;IACb,sFAAsF;gBAC1E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;OAQG;aACM,cAAc,CAAC,eAAe,CAAC;;;;;IAnCxC,0EAA0E;iBAC7D,MAAM,EAAE,GAAG,SAAS;IACjC,4IAA4I;kBAC9H,MAAM;IACpB,yGAAyG;UACnG,MAAM;IACZ,sGAAsG;iBACzF,OAAO;IACpB,kGAAkG;gBACtF,MAAM;IAClB,6DAA6D;gBACjD,OAAO;IACnB,4HAA4H;eACjH,OAAO,GAAG,SAAS;IAC9B,gIAAgI;eACrH,OAAO,GAAG,SAAS;IAC9B,yHAAyH;cAC/G,OAAO,GAAG,SAAS;IAC7B,uGAAuG;eAC5F,OAAO,GAAG,SAAS;IAC9B,kIAAkI;WAC3H,MAAM;IACb,sFAAsF;gBAC1E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;OAQG;aACM,cAAc,CAAC,eAAe,CAAC;;;;;cAtB7B,OAAO,GAAG,SAAS;aAIpB,OAAO,GAAG,SAAS;cAFlB,OAAO,GAAG,SAAS;cAInB,OAAO,GAAG,SAAS;gBAlBjB,MAAM,EAAE,GAAG,SAAS;eAUrB,OAAO;gBAJN,OAAO;eAER,MAAM;6EAgtBlB,CAAC"}