@ecoma-io/loom 0.2.0 → 0.3.0

package/dist/packages/primitives/number-field/src/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,252 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, onUnmounted, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { ChevronDown, ChevronUp } from "@lucide/vue";
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from "reka-ui";
+//#region packages/primitives/number-field/src/NumberField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100"
+};
+/**
+
+/**
+* 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.
+*/
+var NUMBER_FIELD_LABELS = {
+	increment: "Increase value",
+	decrement: "Decrease value",
+	roleDescription: "Number field"
+};
+var NumberField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "NumberField",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		unit: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: {}
+	},
+	emits: ["update:modelValue", "commit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("numberField", NUMBER_FIELD_LABELS, () => props.labels);
+		const { attrs, rest: inputAttrs } = useSplitAttrs();
+		/**
+		* The scrub is the reason this control cannot be left to the platform.
+		*
+		* `<fieldset disabled>` makes the inner `<input>` and the two stepper buttons
+		* inert on its own, which covers the keyboard and the two clicks — but the
+		* drag-to-change gesture is a `pointerdown` on the **root**, and a `<div>` is
+		* not a form control, so nothing native stops it. `onPointerDown` bails on
+		* `field.disabled`, and that is exactly the value a disabled fieldset does not
+		* reach. Without this, a field inside a disabled group looked unavailable,
+		* refused the keyboard, and still changed its number under a drag.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const root = useTemplateRef("root");
+		const groupDisabled = useAncestorDisabled(() => root.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: groupDisabled.value ? true : props.disabled,
+			readonly: props.readonly,
+			invalid: props.invalid
+		}));
+		const inputFieldAttrs = computed(() => {
+			const aria = { ...field.attrs };
+			delete aria.name;
+			return aria;
+		});
+		const rootProps = computed(() => optional({
+			modelValue: lastValue.value,
+			min: props.min,
+			max: props.max,
+			name: field.name
+		}));
+		function clampValue(value) {
+			const step = props.step || 1;
+			const stepped = Math.round(value / step) * step;
+			const withMin = props.min !== void 0 ? Math.max(props.min, stepped) : stepped;
+			return props.max !== void 0 ? Math.min(props.max, withMin) : withMin;
+		}
+		const lastValue = ref(props.modelValue);
+		const lastCommittedValue = ref(props.modelValue);
+		let editPending = false;
+		watch(() => props.modelValue, (value) => {
+			lastValue.value = value;
+			if (!editPending) lastCommittedValue.value = value;
+		});
+		function onUpdate(value) {
+			const next = value ?? props.min ?? 0;
+			editPending = true;
+			lastValue.value = next;
+			emit("update:modelValue", next);
+		}
+		function commitLastValue() {
+			editPending = false;
+			if (lastValue.value === lastCommittedValue.value) return;
+			lastCommittedValue.value = lastValue.value;
+			emit("commit", lastValue.value ?? props.min ?? 0);
+		}
+		function onKeydownCapture(event) {
+			if (field.disabled || field.readonly) return;
+			if (!event.shiftKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			event.stopPropagation();
+			const tick = (props.step || 1) * 10;
+			const current = lastValue.value ?? props.min ?? 0;
+			onUpdate(clampValue(event.key === "ArrowUp" ? current + tick : current - tick));
+		}
+		function onKeydownCommit(event) {
+			if (event.key !== "Enter") return;
+			commitLastValue();
+		}
+		function onKeyupCommit(event) {
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			commitLastValue();
+		}
+		function onFocusOut(event) {
+			const root = event.currentTarget;
+			if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+			commitLastValue();
+		}
+		const DRAG_THRESHOLD_PX = 3;
+		const PIXELS_PER_STEP = 4;
+		let removeDragListeners;
+		onUnmounted(() => removeDragListeners?.());
+		function onPointerDown(event) {
+			if (field.disabled || field.readonly || event.button !== 0) return;
+			const startX = event.clientX;
+			const startValue = lastValue.value ?? props.min ?? 0;
+			const step = props.step || 1;
+			let dragging = false;
+			function onPointerMove(moveEvent) {
+				const deltaX = moveEvent.clientX - startX;
+				if (!dragging) {
+					if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;
+					dragging = true;
+					window.getSelection()?.removeAllRanges();
+				}
+				moveEvent.preventDefault();
+				const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);
+				const next = clampValue(startValue + deltaSteps * step);
+				if (next !== lastValue.value) onUpdate(next);
+			}
+			function onPointerUp() {
+				removeDragListeners?.();
+				if (dragging) commitLastValue();
+			}
+			function abortDrag() {
+				removeDragListeners?.();
+				if (!dragging) return;
+				if (lastValue.value !== startValue) onUpdate(startValue);
+				editPending = false;
+			}
+			function onDragKeydown(keyEvent) {
+				if (keyEvent.key !== "Escape" || !dragging) return;
+				keyEvent.preventDefault();
+				keyEvent.stopPropagation();
+				abortDrag();
+			}
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", abortDrag);
+			window.addEventListener("keydown", onDragKeydown, true);
+			removeDragListeners = () => {
+				window.removeEventListener("pointermove", onPointerMove);
+				window.removeEventListener("pointerup", onPointerUp);
+				window.removeEventListener("pointercancel", abortDrag);
+				window.removeEventListener("keydown", onDragKeydown, true);
+				removeDragListeners = void 0;
+			};
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldRoot), mergeProps({
+				ref_key: "root",
+				ref: root
+			}, rootProps.value, {
+				step: __props.step,
+				disabled: unref(field).disabled,
+				readonly: unref(field).readonly,
+				"aria-disabled": unref(field).disabled || void 0,
+				"data-invalid": unref(field).invalid || void 0,
+				class: unref(cn)("group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background", "transition-[color,background-color,box-shadow] duration-fast ease-out", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring", !unref(field).invalid && "focus-within:shadow-halo", unref(field).readonly && "bg-subtle", unref(field).disabled && "border-border bg-muted", unref(field).invalid && "border-destructive focus-within:outline-destructive", "data-[disabled]:cursor-not-allowed", unref(attrs).class),
+				"onUpdate:modelValue": onUpdate,
+				onKeydownCapture,
+				onKeydown: onKeydownCommit,
+				onKeyup: onKeyupCommit,
+				onFocusout: onFocusOut,
+				onPointerdown: onPointerDown
+			}), {
+				default: withCtx(() => [
+					createVNode(unref(NumberFieldInput), mergeProps({ "aria-roledescription": unref(text).roleDescription }, {
+						...unref(inputAttrs),
+						...inputFieldAttrs.value
+					}, { class: unref(cn)("tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none", __props.unit ? "pr-9" : "pr-3", unref(field).disabled && "cursor-not-allowed text-muted-foreground", !unref(field).disabled && !unref(field).readonly && "cursor-ew-resize") }), null, 16, ["aria-roledescription", "class"]),
+					__props.unit ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.unit), 1)) : createCommentVNode("", true),
+					!unref(field).readonly ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(NumberFieldIncrement), {
+						"aria-label": unref(text).increment,
+						class: "flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronUp), {
+							class: "h-3 w-3",
+							"stroke-width": 2.5
+						})]),
+						_: 1
+					}, 8, ["aria-label"]), createVNode(unref(NumberFieldDecrement), {
+						"aria-label": unref(text).decrement,
+						class: "flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+					}, {
+						default: withCtx(() => [createVNode(unref(ChevronDown), {
+							class: "h-3 w-3",
+							"stroke-width": 2.5
+						})]),
+						_: 1
+					}, 8, ["aria-label"])])) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 16, [
+				"step",
+				"disabled",
+				"readonly",
+				"aria-disabled",
+				"data-invalid",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { NUMBER_FIELD_LABELS, NumberField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=NumberField.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/number-field/src/NumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/number-field/src/NumberField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NumberFieldLabels } from \"@ecoma-io/loom-labels\";\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 */\nexport const NUMBER_FIELD_LABELS: NumberFieldLabels = {\n  increment: \"Increase value\",\n  decrement: \"Decrease value\",\n  roleDescription: \"Number field\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useTemplateRef, watch } from \"vue\";\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from \"reka-ui\";\nimport { ChevronUp, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NumberField — a constrained number input you can also *scrub*: drag\n * horizontally anywhere on the field and the value runs with the pointer, the\n * gesture professional editors trained everyone to expect on a numeric row.\n *\n * Built on Reka UI's NumberField, which supplies the spinbutton semantics and\n * the typed-value parsing. Two things are added here because Reka has no\n * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow\n * keys.\n *\n * The event contract is what makes it usable behind an undo stack.\n * `update:modelValue` is transient — it fires on every drag tick, every arrow\n * tick and every applied edit, so a host can paint a live preview. `commit`\n * fires once per gesture boundary — drag release, Enter, or focus leaving the\n * field. One long drag is therefore one undo checkpoint rather than one per\n * pixel, and a gesture that ends where it started produces none at all.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled`, `readonly` and the\n * name the value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Rotation\" error=\"…\"><NumberField … /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions — which is why the three booleans default to\n * `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states here for the same reason they\n * are on a text input, and a number is the case that makes it obvious: a rate,\n * a computed total or a locked coordinate is a value on show. It stays a Tab\n * stop, stays in the form's submitted data, and takes a lifted fill with the\n * number at full strength, one step short of the disabled state's drained fill,\n * muted number and slackened rim — and every path that would change it is\n * closed, the stepper included, because a control offering a gesture that does\n * nothing is worse than one that offers none.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient edits are reported before it changes. */\n    modelValue?: number;\n    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */\n    min?: number;\n    /** Upper bound, clamped the same way. It wins over step alignment. */\n    max?: number;\n    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */\n    step?: number;\n    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */\n    unit?: string;\n    /** Unavailable: dims the field and refuses every edit path. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value without allowing an edit — typing, arrows, stepper and scrub all closed — while staying focusable and still submitted. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `NumberFieldLabels` — 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 `roleDescription`, where a field\n     * holding a rotation or a price is more useful named as that than as a\n     * number field.\n     */\n    labels?: LabelOverrides<NumberFieldLabels>;\n  }>(),\n  {\n    step: 1,\n    // Not `false`, for any of the three. `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 — see TextField.vue, which\n    // carries the full reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every drag tick, arrow tick, or applied edit. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once per gesture boundary — drag release, Enter, or focus leaving. */\n  commit: [value: number];\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(\"numberField\", NUMBER_FIELD_LABELS, () => props.labels);\n\n// The rendered root is a non-focusable `role=\"group\"` wrapper, so fallthrough\n// attributes that describe the *control* — `aria-labelledby`, `data-testid` —\n// belong on the spinbutton inside it, not on the group. `class` is the one\n// exception and goes the other way: a caller's sizing or layout class has to\n// land on the element that participates in the parent's layout, merged through\n// `cn()` so a caller's `w-24` actually beats the root's own `w-full` instead of\n// losing to whichever utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n/**\n * The scrub is the reason this control cannot be left to the platform.\n *\n * `<fieldset disabled>` makes the inner `<input>` and the two stepper buttons\n * inert on its own, which covers the keyboard and the two clicks — but the\n * drag-to-change gesture is a `pointerdown` on the **root**, and a `<div>` is\n * not a form control, so nothing native stops it. `onPointerDown` bails on\n * `field.disabled`, and that is exactly the value a disabled fieldset does not\n * reach. Without this, a field inside a disabled group looked unavailable,\n * refused the keyboard, and still changed its number under a drag.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name` and\n// `required` are absent from this object because there is no prop to oppose\n// the row with; the row's answer stands unopposed, which is what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // `<input>` inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n}));\n\n// `name` is the one resolved key that does not travel with the bag, and here\n// it is a defect rather than a nicety: the bag lands on the spinbutton, and\n// what the spinbutton holds is the *formatted* number — `1,234` for 1234. A\n// `name` on it would post the grouping separators along with the digits. Reka\n// submits the model value itself through a hidden input it renders from the\n// root's own `name`, so that is where the row's name goes. Everything else in\n// the bag — the id, the merged description, `aria-required`, `aria-invalid` —\n// belongs on the `role=\"spinbutton\"` node, which is that input.\nconst inputFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this input without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// `optional()` drops the absent bounds and an absent name rather than\n// forwarding `undefined`, which Reka would read as \"a bound that is undefined\"\n// rather than \"no bound\" — and, for the name, would have it render a hidden\n// form input for a field nothing is submitting.\nconst rootProps = computed(() =>\n  optional({\n    modelValue: lastValue.value,\n    min: props.min,\n    max: props.max,\n    name: field.name,\n  }),\n);\n\nfunction clampValue(value: number): number {\n  const step = props.step || 1;\n  const stepped = Math.round(value / step) * step;\n  const withMin = props.min !== undefined ? Math.max(props.min, stepped) : stepped;\n  return props.max !== undefined ? Math.min(props.max, withMin) : withMin;\n}\n\n// The single source of truth for \"the last value we know about\", updated the\n// moment it changes — never re-derived from `props.modelValue` at commit time,\n// because that prop only reflects a new value after the host's v-model\n// round-trip re-renders us, which is a tick later than the blur or keydown\n// being handled.\n//\n// It is also what the Reka root binds as its own `model-value`, rather than\n// `props.modelValue`. Given a defined model value Reka runs fully controlled:\n// its increment reads back through that prop, so a host that correctly\n// withholds transient echoes until commit would freeze every arrow tick at\n// start + 1 and freeze the readout at the gesture's start value. Feeding it\n// `lastValue` keeps the ticks accumulating and the readout live inside a\n// gesture, while the host still sees nothing but transient emits until the\n// boundary.\nconst lastValue = ref(props.modelValue);\n\n// The value the host last acknowledged. `commit` only fires when `lastValue`\n// differs from it, so overlapping boundaries (Enter then blur, drag release\n// then blur) and no-edit focus passes (Tab in, Tab out) produce no extra\n// checkpoints.\nconst lastCommittedValue = ref(props.modelValue);\n\n// True while an uncommitted edit is in flight. An external prop change\n// re-baselines `lastCommittedValue` only when nothing is pending — otherwise\n// the host echoing our own transient emits back down would make the pending\n// edit look already committed and swallow its `commit`.\nlet editPending = false;\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n    if (!editPending) lastCommittedValue.value = value;\n  },\n);\n\nfunction onUpdate(value: number | undefined) {\n  // Reka clears its model to `undefined` when the text in the field does not\n  // parse — an emptied field, most reachably. The contract here is a number,\n  // so the field falls back to its own floor instead of forwarding a hole,\n  // which is also what Reka itself does when a stepper is pressed on\n  // unparseable text.\n  const next = value ?? props.min ?? 0;\n  editPending = true;\n  lastValue.value = next;\n  emit(\"update:modelValue\", next);\n}\n\nfunction commitLastValue() {\n  // The boundary ends the edit session even when the value ended up back where\n  // it started — a drag that returned to its origin still ends the gesture.\n  editPending = false;\n  if (lastValue.value === lastCommittedValue.value) return;\n  lastCommittedValue.value = lastValue.value;\n  emit(\"commit\", lastValue.value ?? props.min ?? 0);\n}\n\n// Shift = ×10. Reka's own arrow handling is bound on the input and ignores\n// `shiftKey`, so this intercepts in the capture phase — strictly before the\n// event reaches the input — and fully replaces the default ×1 tick for this\n// one case. Letting both run would double-step.\nfunction onKeydownCapture(event: KeyboardEvent) {\n  // Read-only closes this path as firmly as disabled does. Reka's own arrow\n  // handling already bails on `readonly`, and this override replaces it — so\n  // without the guard Shift+Arrow would be the one way to edit a field that\n  // says it cannot be edited.\n  if (field.disabled || field.readonly) return;\n  if (!event.shiftKey || (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\")) return;\n  event.preventDefault();\n  event.stopPropagation();\n  const tick = (props.step || 1) * 10;\n  const current = lastValue.value ?? props.min ?? 0;\n  onUpdate(clampValue(event.key === \"ArrowUp\" ? current + tick : current - tick));\n}\n\n// Bubble phase, not capture: by the time this fires, the input's own Enter\n// handling has already applied the typed text, because bubbling visits the\n// target before its ancestors.\nfunction onKeydownCommit(event: KeyboardEvent) {\n  if (event.key !== \"Enter\") return;\n  commitLastValue();\n}\n\n// A held arrow key is one gesture, exactly like a pointer drag: every keydown,\n// including the operating system's auto-repeats, only ticks the transient\n// value, and the keyup ends the gesture and commits the summed delta once. A\n// single tap is a keydown plus a keyup, so it still commits once.\nfunction onKeyupCommit(event: KeyboardEvent) {\n  if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n  commitLastValue();\n}\n\n// `focusout` bubbles where `blur` does not, so this reliably runs after the\n// input's own blur handling — but it only commits once focus has actually left\n// the field, not when it shifts internally to the hover-revealed stepper.\nfunction onFocusOut(event: FocusEvent) {\n  const root = event.currentTarget as HTMLElement;\n  if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;\n  commitLastValue();\n}\n\n// Horizontal scrub. A plain click must still place the caret for typing, so\n// the gesture does not take over until the pointer has moved past a small\n// threshold.\nconst DRAG_THRESHOLD_PX = 3;\nconst PIXELS_PER_STEP = 4;\n\n// Set while a drag's window listeners are attached, so unmounting mid-drag\n// detaches them instead of leaking handlers onto `window`.\nlet removeDragListeners: (() => void) | undefined;\nonUnmounted(() => removeDragListeners?.());\n\nfunction onPointerDown(event: PointerEvent) {\n  // A read-only field still places the caret and still selects text, which is\n  // the whole point of it — it simply never starts a scrub.\n  if (field.disabled || field.readonly || event.button !== 0) return;\n  const startX = event.clientX;\n  const startValue = lastValue.value ?? props.min ?? 0;\n  const step = props.step || 1;\n  let dragging = false;\n\n  function onPointerMove(moveEvent: PointerEvent) {\n    const deltaX = moveEvent.clientX - startX;\n    if (!dragging) {\n      if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;\n      dragging = true;\n      window.getSelection()?.removeAllRanges();\n    }\n    moveEvent.preventDefault();\n    const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);\n    const next = clampValue(startValue + deltaSteps * step);\n    if (next !== lastValue.value) onUpdate(next);\n  }\n\n  function onPointerUp() {\n    removeDragListeners?.();\n    if (dragging) commitLastValue();\n  }\n\n  // Bail-out (Escape mid-scrub, or a browser-issued pointercancel): the\n  // gesture is discarded. Nothing commits, and one last transient update\n  // carrying the start value lets the host restore the pre-drag preview.\n  function abortDrag() {\n    removeDragListeners?.();\n    if (!dragging) return;\n    if (lastValue.value !== startValue) onUpdate(startValue);\n    editPending = false;\n  }\n\n  function onDragKeydown(keyEvent: KeyboardEvent) {\n    if (keyEvent.key !== \"Escape\" || !dragging) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    abortDrag();\n  }\n\n  window.addEventListener(\"pointermove\", onPointerMove);\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", abortDrag);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  removeDragListeners = () => {\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", abortDrag);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    removeDragListeners = undefined;\n  };\n}\n</script>\n\n<template>\n  <NumberFieldRoot\n    ref=\"root\"\n    v-bind=\"rootProps\"\n    :step=\"step\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :aria-disabled=\"field.disabled || undefined\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"\n      cn(\n        'group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background',\n        'transition-[color,background-color,box-shadow] duration-fast ease-out',\n        // Rim-lit at rest; the ring blooms on focus.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !field.invalid && 'focus-within:shadow-halo',\n        // Three resting appearances, three channels — the same treatment\n        // TextField carries at length. Read-only and disabled used to share one\n        // fill and part only on the text colour, which is a distinction made in\n        // hue alone; the fill and the border weight now part them twice more.\n        //\n        // Read-only keeps its focus ring and its full-strength number: a\n        // read-only value is on show, not an unavailable control. The fill lifts\n        // to `subtle`, the rim stays `input` because the field's reach has not\n        // changed, and Reka's native `readonly` on the input carries the state\n        // to assistive tech, so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Unavailable is a *colour* and a *weight*, never an opacity.\n        // `opacity-50` on this box faded the value inside it:\n        // `--color-foreground` measures 14.09:1 on the resting fill and 2.99:1\n        // once composited at half alpha, and the unit suffix beside it — muted,\n        // and smaller — fell to 2.02:1. The fill drains a step past read-only\n        // and the rim slackens to `border`; the input below takes the matching\n        // text colour, which has to be declared there rather than inherited from\n        // here because the input names `text-foreground` itself.\n        field.disabled && 'border-border bg-muted',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field that is both in error and\n        // unavailable would otherwise lose its destructive rim to the disabled\n        // one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        'data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n    @keydown.capture=\"onKeydownCapture\"\n    @keydown=\"onKeydownCommit\"\n    @keyup=\"onKeyupCommit\"\n    @focusout=\"onFocusOut\"\n    @pointerdown=\"onPointerDown\"\n  >\n    <!-- `aria-roledescription` is written before the `v-bind` rather than after\n         it, which is the opposite of the field bag below and deliberate: it is\n         replacing Reka's own literal, not a caller's, so a caller who passes\n         the attribute directly should still beat it. Reka's is merged inside\n         its render function and Vue applies everything from here afterwards,\n         so both orders defeat Reka and only this one leaves the caller a way\n         past Loom. -->\n    <NumberFieldInput\n      :aria-roledescription=\"text.roleDescription\"\n      v-bind=\"{ ...inputAttrs, ...inputFieldAttrs }\"\n      :class=\"\n        cn(\n          'tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none',\n          unit ? 'pr-9' : 'pr-3',\n          // 4.68:1 against the drained fill the root takes, and two steps back\n          // from the black an editable value keeps — the state stays plain to\n          // see and the number stays plain to read. `cn()` is what makes the\n          // pair work: it drops the `text-foreground` above rather than leaving\n          // two colours for the stylesheet to order.\n          field.disabled && 'cursor-not-allowed text-muted-foreground',\n          // The scrub cursor is a promise the field makes about the gesture it\n          // takes. Read-only takes no gesture, so it must not make the promise\n          // — the caret cursor is the honest one for a value you may select\n          // and copy but not change.\n          !field.disabled && !field.readonly && 'cursor-ew-resize',\n        )\n      \"\n    />\n    <!-- The unit is presentation, so it is hidden from assistive technology\n         and it clears out on hover to make room for the stepper. -->\n    <span\n      v-if=\"unit\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0\"\n    >\n      {{ unit }}\n    </span>\n    <!-- The stepper is hidden until hover: a column of these is read as a\n         column of numbers, and a permanent pair of chevrons on every row turns\n         that into a column of controls.\n\n         It is not rendered at all on a read-only field. Reka's own\n         `handleChangingValue` bails on `readonly` *after* focusing the input,\n         so a rendered stepper would be two named buttons that a pointer or a\n         screen reader can still reach and press, and that answer by moving\n         focus and changing nothing. Absent is the honest state. -->\n    <div\n      v-if=\"!field.readonly\"\n      class=\"absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100\"\n    >\n      <!-- Both `:aria-label`s replace one Reka writes in English inside its own\n           render function — \"Increase\" and \"Decrease\". They reach the DOM node\n           as fallthrough attributes, which Vue merges last, so each is a\n           replacement rather than a second name. Removing one does not fall\n           back to nothing; it falls back to Reka's English.\n\n           The two keep `data-[disabled]:opacity-50` where the box around them\n           gave it up, and the difference is that each holds a chevron and\n           nothing else. Fading a glyph costs a reader nothing; their names are\n           in `aria-label`, not in dimmed text. -->\n      <NumberFieldIncrement\n        :aria-label=\"text.increment\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <!-- Stroke lives on the 24 grid and scales with size, so the inherited\n             1.5 would render 0.75 device pixels at this 12px box and all but\n             disappear. 2.5 restores the optical weight. -->\n        <ChevronUp class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldIncrement>\n      <NumberFieldDecrement\n        :aria-label=\"text.decrement\"\n        class=\"flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-press focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronDown class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldDecrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/number-field/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./NumberField.vue";
+export { NUMBER_FIELD_LABELS } from "./NumberField.vue";
+export type { NumberFieldLabels } from "@ecoma-io/loom-labels";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/number-field/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/number-field/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/packages/primitives/number-field/src/index.js

@@ -0,0 +1,3 @@
+import { NUMBER_FIELD_LABELS } from "./NumberField.vue_vue_type_script_setup_true_lang.js";
+import NumberField_default from "./NumberField.js";
+export { NUMBER_FIELD_LABELS, NumberField_default as default };

package/dist/packages/primitives/otp-input/src/OtpInput.js

@@ -0,0 +1,7 @@
+import OtpInput_vue_vue_type_script_setup_true_lang_default, { OTP_INPUT_LABELS } from "./OtpInput.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/otp-input/src/OtpInput.vue
+var OtpInput_default = OtpInput_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { OTP_INPUT_LABELS, OtpInput_default as default };
+
+//# sourceMappingURL=OtpInput.js.map

package/dist/packages/primitives/otp-input/src/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.js","names":[],"sources":["../../../../../packages/primitives/otp-input/src/OtpInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { OtpInputLabels, OtpInputType } from \"@ecoma-io/loom-labels\";\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 */\nexport const OTP_INPUT_LABELS: OtpInputLabels = {\n  cell: ({ index, length, type }) =>\n    `${type === \"numeric\" ? \"Digit\" : \"Character\"} ${String(index)} of ${String(length)}`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { PinInputInput, PinInputRoot } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * OtpInput — the row of single-character cells a one-time code or a short PIN\n * is typed into. Reach for it when the value really is a fixed-length code\n * that arrives out of band: the cells are what let `autocomplete=\"one-time-code\"`\n * offer the code the phone has just received, and `inputmode=\"numeric\"` is what\n * raises the digit keypad rather than the alphabet. Both are the reason this\n * exists at all rather than a TextField with a `maxlength` — and both are also\n * why anything a reader would want to read back, correct in the middle, or\n * paste in parts belongs in a TextField instead.\n *\n * Built on Reka UI's PinInput, which supplies the per-cell behaviour: typing\n * advances to the next cell, arrow keys move between them, Backspace on an\n * empty cell steps back and clears the one before it, and a pasted code is\n * distributed across the whole row rather than crammed into one cell.\n *\n * Two things are decided here that Reka leaves open.\n *\n * **The value is a scalar `string`.** Reka models it as an array of cells;\n * this exposes `\"1234\"`, exactly as Slider exposes a scalar where Reka models\n * an array — a code is what a host posts to an API and compares against, and\n * neither of those wants a six-element array. In numeric mode Reka's array is\n * even an array of *numbers*, which loses a leading zero the moment anyone\n * treats it as one value. The consequence is in `onUpdate`.\n *\n * **The row is one control, not `length` of them.** Reka names each cell and\n * leaves each one tabbable, which is how this control usually fails: six\n * inputs each announcing themselves in full, and six Tab presses to step over\n * a field a sighted user reads as one. The name of the thing being typed is\n * moved onto a labelled `role=\"group\"` so it is announced once on entering the\n * row, each cell is left with its position alone, and a roving tabindex makes\n * the row a single Tab stop.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`, and this control is the one where the resolved values\n * do not all land on the same node. The id of the row's hint or error line\n * describes the whole code and goes on the group; `required` and `invalid` are\n * states of the boxes being typed into and go on the cells, where the roles\n * that support them are — `role=\"group\"` supports neither. The row's id and\n * the name the code is submitted under both go to Reka's hidden input: `id` is\n * a declared prop of its root rather than a fallthrough attr, and that input is\n * the better target anyway, since `<label for>` associates only with a\n * labelable element and hands focus to the first cell from there.\n *\n * What a Field still cannot do here is *name* the row: its `<label>` reaches\n * the hidden input, which is `aria-hidden`, so no accessible name is computed\n * from it. Give the name with `ariaLabel` or `ariaLabelledby` as you would\n * outside a row.\n *\n * A row's `readonly` is deliberately ignored. There is nothing to read in an\n * uneditable code box that a line of text would not show better, and the cells\n * exist to be typed into. So the library's three resting appearances collapse\n * to two here: a cell goes straight from `background` to the disabled row's\n * drained fill, muted character and slackened rim, and the lifted `subtle` fill\n * that marks a value on show never appears on this control.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The code entered so far. Shorter than `length` while it is incomplete. */\n    modelValue?: string;\n    /** How many cells the code is typed into. */\n    length?: number;\n    /** What a cell accepts: digits only, or any character. */\n    type?: OtpInputType;\n    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */\n    mask?: boolean;\n    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** The accessible name of the whole row, when no visible element already labels it. */\n    ariaLabel?: string;\n    /** The id of the visible element that labels the row — a heading, or a field's own label. */\n    ariaLabelledby?: string;\n    /**\n     * The name each cell gives itself, as any subset of `OtpInputLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and\n     * 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 row whose cells are neither\n     * digits nor characters in the reader's terms — the groups of a licence\n     * key, say — where the noun has to say so however well the application is\n     * translated.\n     */\n    labels?: LabelOverrides<OtpInputLabels>;\n  }>(),\n  {\n    length: 6,\n    type: \"numeric\",\n    mask: false,\n    // Not `false`, for either. `false` is a caller saying \"this row is fine /\n    // enabled even though the field around it is not\"; absent is a caller\n    // saying nothing, and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries\n    // the full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The code so far, as one string. Fires on every cell that fills or clears. */\n  \"update:modelValue\": [value: string];\n  /** The finished code. Fires once, as the last empty cell takes its character. */\n  complete: [value: string];\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(\"otpInput\", OTP_INPUT_LABELS, () => props.labels);\n\n// Every fallthrough attribute lands on the group: an `aria-describedby`\n// pointing at an error line, a `data-testid`, an `id` — each describes the\n// control as a whole, and copying one onto `length` inputs would have a screen\n// reader repeat it on every cell. `class` is pulled out of that spread only so\n// it can go through `cn()`, which is what lets a caller's utility beat the\n// row's own instead of losing to whichever Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name`,\n// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: props.ariaLabelledby,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Three of the resolved keys do not travel with the bag, because the bag lands\n// on the group and the group is the wrong node for all three.\n//\n// `name` would be a `name` on a `<div>`, which no form reads; Reka's own\n// hidden input carries the joined code, so the row's name is given to the root\n// as a prop instead.\n//\n// `aria-required` and `aria-invalid` are states of the boxes a reader types\n// into, and `role=\"group\"` supports neither — `aria-invalid` is a global so it\n// would at least be legal there, `aria-required` is not and would fail\n// `aria-allowed-attr`. Both are bound per cell below, off the same resolved\n// values, so the row's error reaches the element a screen reader is actually\n// sitting on.\n//\n// `id` stays in the bag and still does not land here: it is a declared prop of\n// Reka's root, so it is taken as a prop rather than falling through, and Reka\n// puts it on that same hidden input — which is the labelable node a\n// `<label for>` needs, and the one that hands focus to the first cell.\nconst groupFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this group without anyone remembering to come\n  // back here.\n  const group: Record<string, unknown> = { ...field.attrs };\n  delete group.name;\n  delete group[\"aria-required\"];\n  delete group[\"aria-invalid\"];\n  return group;\n});\n\n// The single source of truth for the code we know about: seeded from the prop,\n// then advanced on every update Reka reports. Feeding this back into Reka\n// rather than `props.modelValue` is what keeps the row usable for a host that\n// binds no `modelValue` at all — the same buffer Slider keeps, for the same\n// reason. An absent prop leaves it empty rather than sticking the row on one\n// value, so nothing here needs `optional()`.\nconst code = ref(props.modelValue ?? \"\");\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value !== undefined) code.value = value;\n  },\n);\n\n// Longer than the row is the host's mistake to make, not ours to render: the\n// extra characters have no cell to live in.\nconst cells = computed(() => code.value.slice(0, props.length).split(\"\"));\n\n// Reka calls the digits-only mode \"number\". The prop says \"numeric\" because\n// nothing about the value is a number — a code with a leading zero is a\n// string, and this control never parses one.\nconst pinType = computed(() => (props.type === \"numeric\" ? \"number\" : \"text\"));\n\n// The row is one Tab stop. The stop is the first empty cell, which is also\n// where Reka's own `otp` handling redirects focus, or the last cell once the\n// code is full — so Tab lands where the next character goes.\nconst tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));\n\n// Typed wider than the declared emit on purpose: in numeric mode the array\n// really does come back holding numbers, and a cleared middle cell comes back\n// as a hole. Both are why a scalar is the exposed shape.\nfunction onUpdate(next: (string | number)[]) {\n  // `join` is where the scalar is decided, and it closes gaps: Reka can hold a\n  // cleared middle cell as a hole, a string cannot, so the cells after it\n  // shift left. That is the only reading that keeps the model and the row\n  // agreeing on one value — and it is what a single text input does when a\n  // character in the middle is deleted.\n  const value = next.join(\"\");\n  // Reka reports the whole row on every write, including a write that changed\n  // nothing a string can see — pasting the same code over itself is the\n  // reachable one. Stopping here keeps one changed code to one emitted value,\n  // and one filled code to one `complete`.\n  if (value === code.value) return;\n  code.value = value;\n  emit(\"update:modelValue\", value);\n  // Derived here rather than forwarded from Reka's own `complete`, which fires\n  // from a deep watcher on its model — and that model is set twice for one\n  // keystroke once the row is controlled, once by Reka and once by the value\n  // coming back around. Forwarding it would announce one filled code twice.\n  if (value.length === props.length) emit(\"complete\", value);\n}\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"{ ...groupAttrs, ...groupFieldAttrs, ...optional({ name: field.name }) }\"\n    :model-value=\"cells\"\n    :type=\"pinType\"\n    :mask=\"mask\"\n    :disabled=\"field.disabled\"\n    otp\n    role=\"group\"\n    :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby || (!ariaLabel ? field.labelledBy : undefined)\"\n    :data-invalid=\"field.invalid || undefined\"\n    :class=\"cn('inline-flex items-center gap-2', attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <!-- The `:aria-label` replaces the one Reka writes inside its own render\n         function — \"pin input 3 of 6\", the field's whole purpose restated once\n         per cell. It reaches the DOM node as a fallthrough attribute, which Vue\n         merges last, so it is a replacement rather than a second name. Removing\n         it does not fall back to nothing; it falls back to Reka's English. The\n         group carries the purpose, and a cell carries only where it sits. -->\n    <PinInputInput\n      v-for=\"cell in length\"\n      :key=\"cell\"\n      :index=\"cell - 1\"\n      :tabindex=\"cell - 1 === tabStopIndex ? 0 : -1\"\n      :aria-label=\"text.cell({ index: cell, length, type })\"\n      :aria-required=\"field.required || undefined\"\n      :aria-invalid=\"field.invalid || undefined\"\n      :data-filled=\"cell <= code.length || undefined\"\n      :class=\"\n        cn(\n          // Square, on the control scale's tallest step: a code cell is a\n          // touch target before it is a form row, and 44px is the size a thumb\n          // is aimed at. `tabular` keeps the six glyphs on one width so the\n          // row does not breathe as it fills.\n          'tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground',\n          'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n          // Rim-lit at rest; the ring blooms on the cell being typed into.\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          !field.invalid && 'focus-visible:shadow-halo',\n          // A filled cell is legible as filled from its character — or its\n          // mask dot — alone. The heavier border is a second, redundant cue,\n          // and a weight rather than a hue, so it survives both a colour\n          // deficiency and forced-colors.\n          //\n          // Withheld from an unavailable row, and only because the border is\n          // also the third channel of the disabled state below: two rules\n          // moving the same rim in opposite directions would leave a\n          // half-filled disabled row with a heavier edge than an empty one,\n          // which reads as the more available of the two. The cue is redundant\n          // by construction, so the state wins it.\n          !field.disabled && 'data-[filled]:border-border-strong',\n          // Unavailable is a *colour* and a *weight*, never an opacity. A cell\n          // holds one character — or one mask dot — and that is the entire\n          // content of the control, so `opacity-50` here did not dim a code so\n          // much as erase it: `--color-foreground` measures 14.09:1 on the\n          // resting fill and 2.99:1 once composited at half alpha. The drained\n          // fill carries the state instead, the character stays at a measured\n          // 4.68:1, and the rim slackens from `input` to `border` so the state\n          // is not told in hue alone.\n          //\n          // The fill and the text colour are `disabled:` variants rather than\n          // plain classes, so each outranks the resting `bg-background\n          // text-foreground` above on specificity rather than on where Tailwind\n          // happened to emit it. The border cannot join them: a `disabled:`\n          // variant would outrank the plain `border-destructive` below, and a\n          // row that is both in error and unavailable has to keep saying so.\n          'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',\n          field.disabled && 'border-border',\n          field.invalid && 'border-destructive focus-visible:outline-destructive',\n        )\n      \"\n    />\n  </PinInputRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/otp-input/src/OtpInput.vue.d.ts

@@ -0,0 +1,81 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { OtpInputLabels, OtpInputType } 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.
+ */
+export declare const OTP_INPUT_LABELS: OtpInputLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The code entered so far. Shorter than `length` while it is incomplete. */
+    modelValue?: string;
+    /** How many cells the code is typed into. */
+    length?: number;
+    /** What a cell accepts: digits only, or any character. */
+    type?: OtpInputType;
+    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */
+    mask?: boolean;
+    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** The accessible name of the whole row, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the row — a heading, or a field's own label. */
+    ariaLabelledby?: string;
+    /**
+     * The name each cell gives itself, as any subset of `OtpInputLabels` — 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 row whose cells are neither
+     * digits nor characters in the reader's terms — the groups of a licence
+     * key, say — where the noun has to say so however well the application is
+     * translated.
+     */
+    labels?: LabelOverrides<OtpInputLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The code entered so far. Shorter than `length` while it is incomplete. */
+    modelValue?: string;
+    /** How many cells the code is typed into. */
+    length?: number;
+    /** What a cell accepts: digits only, or any character. */
+    type?: OtpInputType;
+    /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */
+    mask?: boolean;
+    /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** The accessible name of the whole row, when no visible element already labels it. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the row — a heading, or a field's own label. */
+    ariaLabelledby?: string;
+    /**
+     * The name each cell gives itself, as any subset of `OtpInputLabels` — 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 row whose cells are neither
+     * digits nor characters in the reader's terms — the groups of a licence
+     * key, say — where the noun has to say so however well the application is
+     * translated.
+     */
+    labels?: LabelOverrides<OtpInputLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+    onComplete?: (value: string) => any;
+}>, {
+    length: number;
+    type: OtpInputType;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    mask: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=OtpInput.vue.d.ts.map

package/dist/packages/primitives/otp-input/src/OtpInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/otp-input/src/OtpInput.vue"],"names":[],"mappings":"AAoUA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvE,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAG9B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAyDd,6EAA6E;iBAChE,MAAM;IACnB,6CAA6C;aACpC,MAAM;IACf,0DAA0D;WACnD,YAAY;IACnB,8FAA8F;WACvF,OAAO;IACd,0FAA0F;eAC/E,OAAO,GAAG,SAAS;IAC9B,8IAA8I;cACpI,OAAO,GAAG,SAAS;IAC7B,uFAAuF;gBAC3E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;;;OAUG;aACM,cAAc,CAAC,cAAc,CAAC;;;;;IA3BvC,6EAA6E;iBAChE,MAAM;IACnB,6CAA6C;aACpC,MAAM;IACf,0DAA0D;WACnD,YAAY;IACnB,8FAA8F;WACvF,OAAO;IACd,0FAA0F;eAC/E,OAAO,GAAG,SAAS;IAC9B,8IAA8I;cACpI,OAAO,GAAG,SAAS;IAC7B,uFAAuF;gBAC3E,MAAM;IAClB,6FAA6F;qBAC5E,MAAM;IACvB;;;;;;;;;;OAUG;aACM,cAAc,CAAC,cAAc,CAAC;;;;;YAxB9B,MAAM;UAER,YAAY;cAIR,OAAO,GAAG,SAAS;aAEpB,OAAO,GAAG,SAAS;UAJtB,OAAO;6EA4Wd,CAAC"}

package/dist/packages/primitives/otp-input/src/OtpInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,132 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, unref, watch, withCtx } from "vue";
+import { PinInputInput, PinInputRoot } from "reka-ui";
+//#region packages/primitives/otp-input/src/OtpInput.vue?vue&type=script&setup=true&lang.ts
+/**
+* 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.
+*/
+var OTP_INPUT_LABELS = { cell: ({ index, length, type }) => `${type === "numeric" ? "Digit" : "Character"} ${String(index)} of ${String(length)}` };
+var OtpInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "OtpInput",
+	props: {
+		modelValue: {},
+		length: { default: 6 },
+		type: { default: "numeric" },
+		mask: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		labels: {}
+	},
+	emits: ["update:modelValue", "complete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("otpInput", OTP_INPUT_LABELS, () => props.labels);
+		const { attrs, rest: groupAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			ariaLabelledby: props.ariaLabelledby,
+			disabled: props.disabled,
+			invalid: props.invalid
+		}));
+		const groupFieldAttrs = computed(() => {
+			const group = { ...field.attrs };
+			delete group.name;
+			delete group["aria-required"];
+			delete group["aria-invalid"];
+			return group;
+		});
+		const code = ref(props.modelValue ?? "");
+		watch(() => props.modelValue, (value) => {
+			if (value !== void 0) code.value = value;
+		});
+		const cells = computed(() => code.value.slice(0, props.length).split(""));
+		const pinType = computed(() => props.type === "numeric" ? "number" : "text");
+		const tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));
+		function onUpdate(next) {
+			const value = next.join("");
+			if (value === code.value) return;
+			code.value = value;
+			emit("update:modelValue", value);
+			if (value.length === props.length) emit("complete", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PinInputRoot), mergeProps({
+				...unref(groupAttrs),
+				...groupFieldAttrs.value,
+				...unref(optional)({ name: unref(field).name })
+			}, {
+				"model-value": cells.value,
+				type: pinType.value,
+				mask: __props.mask,
+				disabled: unref(field).disabled,
+				otp: "",
+				role: "group",
+				"aria-label": __props.ariaLabelledby ? void 0 : __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby || (!__props.ariaLabel ? unref(field).labelledBy : void 0),
+				"data-invalid": unref(field).invalid || void 0,
+				class: unref(cn)("inline-flex items-center gap-2", unref(attrs).class),
+				"onUpdate:modelValue": onUpdate
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (cell) => {
+					return openBlock(), createBlock(unref(PinInputInput), {
+						key: cell,
+						index: cell - 1,
+						tabindex: cell - 1 === tabStopIndex.value ? 0 : -1,
+						"aria-label": unref(text).cell({
+							index: cell,
+							length: __props.length,
+							type: __props.type
+						}),
+						"aria-required": unref(field).required || void 0,
+						"aria-invalid": unref(field).invalid || void 0,
+						"data-filled": cell <= code.value.length || void 0,
+						class: normalizeClass(unref(cn)("tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-fast ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", !unref(field).invalid && "focus-visible:shadow-halo", !unref(field).disabled && "data-[filled]:border-border-strong", "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", unref(field).disabled && "border-border", unref(field).invalid && "border-destructive focus-visible:outline-destructive"))
+					}, null, 8, [
+						"index",
+						"tabindex",
+						"aria-label",
+						"aria-required",
+						"aria-invalid",
+						"data-filled",
+						"class"
+					]);
+				}), 128))]),
+				_: 1
+			}, 16, [
+				"model-value",
+				"type",
+				"mask",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"data-invalid",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { OTP_INPUT_LABELS, OtpInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=OtpInput.vue_vue_type_script_setup_true_lang.js.map