@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/textarea/src/Textarea.vue.d.ts

@@ -0,0 +1,134 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import { type TextareaLabels } from "../../../labels/src/index";
+export type TextareaResize = "none" | "vertical";
+/**
+ * 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 TEXTAREA_LABELS: TextareaLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The current value. Pair with `@update:modelValue` for `v-model`. */
+    modelValue?: string;
+    /** Text shown in the empty field. */
+    placeholder?: string;
+    /** Disables the field and blocks pointer and keyboard input. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the value 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 or `FormData`. Unset defers to a wrapping Field. */
+    name?: string;
+    /** Initial height in text rows. */
+    rows?: number;
+    /** Whether a person can drag-resize the field; `none` locks it to `rows`. The counter sits below the box either way, so a drag never moves it onto the value. */
+    resize?: TextareaResize;
+    /** The accessible name, when no visible element already labels the field. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the field (e.g. a Field wrapper's label). */
+    ariaLabelledby?: string;
+    /**
+     * The character limit the counter reports against, and the point past
+     * which it reads as over-limit.
+     *
+     * Advisory, exactly as `required` is: it does **not** set the native
+     * `maxlength`, which silently truncates a paste and tells the reader
+     * nothing. Pass `maxlength` yourself as a plain attribute where you want
+     * the browser to enforce it too.
+     */
+    maxLength?: number;
+    /**
+     * Forces the counter on or off. Left unset it follows `maxLength` — a
+     * limit the reader is never shown is one they can only discover by
+     * exceeding it — so set it `true` for a running total with no limit, and
+     * `false` to hold a limit the field reports nowhere.
+     */
+    showCount?: boolean | undefined;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `TextareaLabels` — 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 counting something other
+     * than characters, where "80 words left" is the true sentence.
+     */
+    labels?: LabelOverrides<TextareaLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The current value. Pair with `@update:modelValue` for `v-model`. */
+    modelValue?: string;
+    /** Text shown in the empty field. */
+    placeholder?: string;
+    /** Disables the field and blocks pointer and keyboard input. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the value 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 or `FormData`. Unset defers to a wrapping Field. */
+    name?: string;
+    /** Initial height in text rows. */
+    rows?: number;
+    /** Whether a person can drag-resize the field; `none` locks it to `rows`. The counter sits below the box either way, so a drag never moves it onto the value. */
+    resize?: TextareaResize;
+    /** The accessible name, when no visible element already labels the field. */
+    ariaLabel?: string;
+    /** The id of the visible element that labels the field (e.g. a Field wrapper's label). */
+    ariaLabelledby?: string;
+    /**
+     * The character limit the counter reports against, and the point past
+     * which it reads as over-limit.
+     *
+     * Advisory, exactly as `required` is: it does **not** set the native
+     * `maxlength`, which silently truncates a paste and tells the reader
+     * nothing. Pass `maxlength` yourself as a plain attribute where you want
+     * the browser to enforce it too.
+     */
+    maxLength?: number;
+    /**
+     * Forces the counter on or off. Left unset it follows `maxLength` — a
+     * limit the reader is never shown is one they can only discover by
+     * exceeding it — so set it `true` for a running total with no limit, and
+     * `false` to hold a limit the field reports nowhere.
+     */
+    showCount?: boolean | undefined;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `TextareaLabels` — 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 counting something other
+     * than characters, where "80 words left" is the true sentence.
+     */
+    labels?: LabelOverrides<TextareaLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    resize: TextareaResize;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
+    rows: number;
+    showCount: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {}) => any;
+} & {
+    trailing?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Textarea.vue.d.ts.map

package/dist/packages/primitives/textarea/src/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,252 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { COUNT_LABELS, warningWindow } from "../../../labels/src/count-labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import "../../../labels/src/index.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useId, watch } from "vue";
+//#region packages/primitives/textarea/src/Textarea.vue?vue&type=script&setup=true&lang.ts
+/**
+* Textarea — multi-line text entry, around a native `<textarea>`. The
+* accessible name is a first-class prop pair (`aria-label`/`aria-labelledby`,
+* camelized by Vue) bound onto the textarea explicitly, the same contract as
+* TextField.
+*
+* The border, focus ring and invalid state live on the wrapper so optional
+* `#leading`/`#trailing` adornments sit *inside* the field and share its focus
+* bloom, instead of every caller re-inventing an icon-inside-input layout.
+* The slot names and positions match TextField's, and the vertical alignment
+* differs — `items-start` for multi-line, where the text begins, versus
+* `items-center` for single-line — because a five-row box with a centered icon
+* mid-field reads as a mistake rather than a choice.
+*
+* Wrapping a rendered structure means the fallthrough `class` must land on the
+* wrapper (so a caller's `w-64`/`flex-1` sizes the whole field) while the rest
+* of the attrs (`id`, `name`, `data-testid`, `aria-describedby`) belong on the
+* real `<textarea>` — the split-attrs convention shared with TextField.
+*
+* That same wrapper is why the character counter is a prop here rather than a
+* `CountedField` beside this one. A counter rendered *below* the field would
+* have to move the fallthrough `class` off the box a caller sizes with it, and
+* a textarea has no free column to hang one in — the value fills the box and
+* scrolls, and the bottom-right corner belongs to the native resize grabber.
+* The counter sits below the border, where `resize` moves the box's bottom
+* edge and the counter travels with it rather than floating over the text.
+*
+* Inside a [Field](../Field/Field.vue) it wires itself through
+* `useFieldControl()` — the row's id, the id of its hint or error line, and
+* `required` / `invalid` / `disabled` / `readonly` / `name` — so
+* `<Field label="Bio" hint="…"><Textarea /></Field>` needs no attributes at the
+* call site. Every prop below still wins over the row when it is set, in both
+* directions, which is why the four booleans default to `undefined` rather
+* than `false`.
+*
+* `readonly` and `disabled` are different states, and they are told apart on
+* three channels rather than one. A read-only field is a value on show: the
+* subtle fill, the text at full strength, the input hairline, still a Tab stop
+* and still submitted. A disabled one is unavailable: the deeper neutral fill,
+* the muted text, and the hairline receding to the plain border — a difference
+* in shape as well as in colour, which is what survives a reader who cannot
+* resolve the two fills apart.
+*/
+var _hoisted_1 = { class: "inline-flex max-w-full flex-col align-top" };
+var _hoisted_2 = [
+	"data-disabled",
+	"data-readonly",
+	"data-invalid"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "inline-flex shrink-0 text-muted-foreground transition-colors duration-fast ease-out group-focus-within:text-foreground"
+};
+var _hoisted_4 = [
+	"aria-label",
+	"aria-labelledby",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"rows"
+];
+var _hoisted_5 = {
+	key: 1,
+	class: "inline-flex shrink-0 items-center gap-1 text-muted-foreground transition-colors duration-fast ease-out group-focus-within:text-foreground"
+};
+var _hoisted_6 = ["id", "data-over-limit"];
+var _hoisted_7 = {
+	key: 1,
+	role: "status",
+	class: "sr-only"
+};
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing
+* rather than a transcription of it.
+*/
+var TEXTAREA_LABELS = COUNT_LABELS;
+var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Textarea",
+	props: {
+		modelValue: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
+		rows: { default: 3 },
+		resize: { default: "vertical" },
+		ariaLabel: {},
+		ariaLabelledby: {},
+		maxLength: {},
+		showCount: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { attrs, rest: textareaAttrs } = useSplitAttrs();
+		const text = useLabels("textarea", TEXTAREA_LABELS, () => props.labels);
+		const countId = useId();
+		/**
+		* What is actually in the box, which is not always `modelValue` — TextField's
+		* reasoning, and the same defect waiting on this side of it.
+		*
+		* Used without `v-model` this component is uncontrolled, so `modelValue` stays
+		* `undefined` while the reader types and the counter still has to count. And
+		* binding `:value="currentValue"` rather than `:value="modelValue"` is
+		* load-bearing rather than cosmetic: Vue's `value` patch coerces
+		* `null`/`undefined` to `""`, so any re-render of an uncontrolled field wipes
+		* it — a defect nothing had met only because nothing in this component
+		* re-rendered on a keystroke until the counter did.
+		*/
+		const typed = ref(props.modelValue ?? "");
+		const currentValue = computed(() => props.modelValue ?? typed.value);
+		function onInput(event) {
+			const value = event.target.value;
+			typed.value = value;
+			emit("update:modelValue", value);
+		}
+		/**
+		* Length in UTF-16 code units, which is what the platform's own `maxlength`
+		* counts. `[...value].length` would count code points and disagree with the
+		* browser on any astral character, so a caller who pairs this with a native
+		* `maxlength` would watch the counter and the enforcement drift apart.
+		*/
+		const count = computed(() => currentValue.value.length);
+		const showsCount = computed(() => props.showCount ?? props.maxLength !== void 0);
+		const band = computed(() => {
+			const max = props.maxLength;
+			if (max === void 0) return "under";
+			const remaining = max - count.value;
+			if (remaining < 0) return "over";
+			return remaining <= warningWindow(max) ? "near" : "under";
+		});
+		const countText = computed(() => {
+			const max = props.maxLength;
+			if (max === void 0) return text.value.count({ count: count.value });
+			const over = count.value - max;
+			return over > 0 ? text.value.countOverMax({
+				count: count.value,
+				max,
+				over
+			}) : text.value.countOfMax({
+				count: count.value,
+				max
+			});
+		});
+		/**
+		* What the live region says, and it changes **only when the band changes** —
+		* TextField's decision, taken once for the pair rather than re-litigated here.
+		*
+		* A region holding the counter itself would speak on every keystroke, burying
+		* the field's own echo of the character just typed under a number nobody asked
+		* for. What a reader needs is the two facts they cannot see coming — the limit
+		* is close, and the limit is passed — so this fires once at each crossing and
+		* goes quiet again on the way back down. The numbers are therefore true at the
+		* moment they are spoken and not after; the visible counter carries the live
+		* figure, and it is wired into `aria-describedby`, so the exact count is one
+		* re-read away whenever the reader wants it rather than pushed at them.
+		*/
+		const announcement = ref("");
+		watch(band, (now) => {
+			const max = props.maxLength;
+			if (max === void 0 || now === "under") {
+				announcement.value = "";
+				return;
+			}
+			announcement.value = now === "over" ? text.value.limitExceeded({
+				over: count.value - max,
+				max
+			}) : text.value.approachingLimit({
+				remaining: max - count.value,
+				max
+			});
+		});
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: [attrs["aria-describedby"], showsCount.value ? countId : ""].filter((id) => typeof id === "string" && id.length > 0).join(" "),
+			name: props.name,
+			disabled: props.disabled,
+			readonly: props.readonly,
+			invalid: props.invalid,
+			required: props.required
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", {
+					"data-disabled": unref(field).disabled || void 0,
+					"data-readonly": unref(field).readonly || void 0,
+					"data-invalid": unref(field).invalid || void 0,
+					class: normalizeClass(unref(cn)("group flex items-start gap-2 rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm", "transition-[color,background-color,border-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 && "cursor-not-allowed border-border bg-muted text-muted-foreground", "in-[fieldset:disabled]:cursor-not-allowed in-[fieldset:disabled]:bg-muted in-[fieldset:disabled]:text-muted-foreground", !unref(field).invalid && "in-[fieldset:disabled]:border-border", unref(field).invalid && "border-destructive focus-within:outline-destructive", unref(attrs).class))
+				}, [
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+					createElementVNode("textarea", mergeProps({
+						...unref(textareaAttrs),
+						...unref(field).attrs
+					}, {
+						"aria-label": __props.ariaLabel,
+						"aria-labelledby": __props.ariaLabelledby,
+						value: currentValue.value,
+						placeholder: __props.placeholder,
+						disabled: unref(field).disabled,
+						readonly: unref(field).readonly,
+						rows: __props.rows,
+						class: unref(cn)("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", __props.resize === "none" ? "resize-none" : "resize-y"),
+						onInput
+					}), null, 16, _hoisted_4),
+					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
+				], 10, _hoisted_2),
+				showsCount.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					id: unref(countId),
+					"data-over-limit": band.value === "over" || void 0,
+					class: normalizeClass(unref(cn)("tabular mt-1 select-none self-end text-small", band.value === "under" && "text-muted-foreground", band.value === "near" && "text-warning-text", band.value === "over" && "text-destructive-text"))
+				}, toDisplayString(countText.value), 11, _hoisted_6)) : createCommentVNode("", true),
+				showsCount.value && __props.maxLength !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(announcement.value), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { TEXTAREA_LABELS, Textarea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Textarea.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/textarea/src/Textarea.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/primitives/textarea/src/Textarea.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  COUNT_LABELS,\n  warningWindow,\n  type CountBand,\n  type TextareaLabels,\n} from \"@ecoma-io/loom-labels\";\n\nexport type TextareaResize = \"none\" | \"vertical\";\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 TEXTAREA_LABELS: TextareaLabels = COUNT_LABELS;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from \"vue\";\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\";\n\n/**\n * Textarea — multi-line text entry, around a native `<textarea>`. The\n * accessible name is a first-class prop pair (`aria-label`/`aria-labelledby`,\n * camelized by Vue) bound onto the textarea explicitly, the same contract as\n * TextField.\n *\n * The border, focus ring and invalid state live on the wrapper so optional\n * `#leading`/`#trailing` adornments sit *inside* the field and share its focus\n * bloom, instead of every caller re-inventing an icon-inside-input layout.\n * The slot names and positions match TextField's, and the vertical alignment\n * differs — `items-start` for multi-line, where the text begins, versus\n * `items-center` for single-line — because a five-row box with a centered icon\n * mid-field reads as a mistake rather than a choice.\n *\n * Wrapping a rendered structure means the fallthrough `class` must land on the\n * wrapper (so a caller's `w-64`/`flex-1` sizes the whole field) while the rest\n * of the attrs (`id`, `name`, `data-testid`, `aria-describedby`) belong on the\n * real `<textarea>` — the split-attrs convention shared with TextField.\n *\n * That same wrapper is why the character counter is a prop here rather than a\n * `CountedField` beside this one. A counter rendered *below* the field would\n * have to move the fallthrough `class` off the box a caller sizes with it, and\n * a textarea has no free column to hang one in — the value fills the box and\n * scrolls, and the bottom-right corner belongs to the native resize grabber.\n * The counter sits below the border, where `resize` moves the box's bottom\n * edge and the counter travels with it rather than floating over the text.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so\n * `<Field label=\"Bio\" hint=\"…\"><Textarea /></Field>` needs no attributes at the\n * call site. Every prop below still wins over the row when it is set, in both\n * directions, which is why the four booleans default to `undefined` rather\n * than `false`.\n *\n * `readonly` and `disabled` are different states, and they are told apart on\n * three channels rather than one. A read-only field is a value on show: the\n * subtle fill, the text at full strength, the input hairline, still a Tab stop\n * and still submitted. A disabled one is unavailable: the deeper neutral fill,\n * the muted text, and the hairline receding to the plain border — a difference\n * in shape as well as in colour, which is what survives a reader who cannot\n * resolve the two fills apart.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Pair with `@update:modelValue` for `v-model`. */\n    modelValue?: string;\n    /** Text shown in the empty field. */\n    placeholder?: string;\n    /** Disables the field and blocks pointer and keyboard input. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value 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 or `FormData`. Unset defers to a wrapping Field. */\n    name?: string;\n    /** Initial height in text rows. */\n    rows?: number;\n    /** Whether a person can drag-resize the field; `none` locks it to `rows`. The counter sits below the box either way, so a drag never moves it onto the value. */\n    resize?: TextareaResize;\n    /** The accessible name, when no visible element already labels the field. */\n    ariaLabel?: string;\n    /** The id of the visible element that labels the field (e.g. a Field wrapper's label). */\n    ariaLabelledby?: string;\n    /**\n     * The character limit the counter reports against, and the point past\n     * which it reads as over-limit.\n     *\n     * Advisory, exactly as `required` is: it does **not** set the native\n     * `maxlength`, which silently truncates a paste and tells the reader\n     * nothing. Pass `maxlength` yourself as a plain attribute where you want\n     * the browser to enforce it too.\n     */\n    maxLength?: number;\n    /**\n     * Forces the counter on or off. Left unset it follows `maxLength` — a\n     * limit the reader is never shown is one they can only discover by\n     * exceeding it — so set it `true` for a running total with no limit, and\n     * `false` to hold a limit the field reports nowhere.\n     */\n    showCount?: boolean | undefined;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `TextareaLabels` — 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 counting something other\n     * than characters, where \"80 words left\" is the true sentence.\n     */\n    labels?: LabelOverrides<TextareaLabels>;\n  }>(),\n  {\n    // Not `false`, for any of the four — see TextField.vue, which carries the\n    // full reasoning. `false` is a caller's decision that must beat the row;\n    // absent is a caller saying nothing, and only `undefined` survives to mean\n    // that past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n    rows: 3,\n    resize: \"vertical\",\n    // `undefined` for the same Boolean-cast reason, and here it is the whole\n    // feature: `showCount ?? (maxLength !== undefined)` would be a dead branch\n    // if an absent prop arrived as `false`.\n    showCount: undefined,\n  },\n);\n\nconst emit = defineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: textareaAttrs } = useSplitAttrs();\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(\"textarea\", TEXTAREA_LABELS, () => props.labels);\n\nconst countId = useId();\n\n/**\n * What is actually in the box, which is not always `modelValue` — TextField's\n * reasoning, and the same defect waiting on this side of it.\n *\n * Used without `v-model` this component is uncontrolled, so `modelValue` stays\n * `undefined` while the reader types and the counter still has to count. And\n * binding `:value=\"currentValue\"` rather than `:value=\"modelValue\"` is\n * load-bearing rather than cosmetic: Vue's `value` patch coerces\n * `null`/`undefined` to `\"\"`, so any re-render of an uncontrolled field wipes\n * it — a defect nothing had met only because nothing in this component\n * re-rendered on a keystroke until the counter did.\n */\nconst typed = ref(props.modelValue ?? \"\");\nconst currentValue = computed(() => props.modelValue ?? typed.value);\n\nfunction onInput(event: Event): void {\n  const value = (event.target as HTMLTextAreaElement).value;\n  typed.value = value;\n  emit(\"update:modelValue\", value);\n}\n\n/**\n * Length in UTF-16 code units, which is what the platform's own `maxlength`\n * counts. `[...value].length` would count code points and disagree with the\n * browser on any astral character, so a caller who pairs this with a native\n * `maxlength` would watch the counter and the enforcement drift apart.\n */\nconst count = computed(() => currentValue.value.length);\nconst showsCount = computed(() => props.showCount ?? props.maxLength !== undefined);\n\nconst band = computed<CountBand>(() => {\n  const max = props.maxLength;\n  if (max === undefined) return \"under\";\n  const remaining = max - count.value;\n  if (remaining < 0) return \"over\";\n  return remaining <= warningWindow(max) ? \"near\" : \"under\";\n});\n\nconst countText = computed(() => {\n  const max = props.maxLength;\n  if (max === undefined) return text.value.count({ count: count.value });\n  const over = count.value - max;\n  return over > 0\n    ? text.value.countOverMax({ count: count.value, max, over })\n    : text.value.countOfMax({ count: count.value, max });\n});\n\n/**\n * What the live region says, and it changes **only when the band changes** —\n * TextField's decision, taken once for the pair rather than re-litigated here.\n *\n * A region holding the counter itself would speak on every keystroke, burying\n * the field's own echo of the character just typed under a number nobody asked\n * for. What a reader needs is the two facts they cannot see coming — the limit\n * is close, and the limit is passed — so this fires once at each crossing and\n * goes quiet again on the way back down. The numbers are therefore true at the\n * moment they are spoken and not after; the visible counter carries the live\n * figure, and it is wired into `aria-describedby`, so the exact count is one\n * re-read away whenever the reader wants it rather than pushed at them.\n */\nconst announcement = ref(\"\");\nwatch(band, (now) => {\n  const max = props.maxLength;\n  if (max === undefined || now === \"under\") {\n    announcement.value = \"\";\n    return;\n  }\n  announcement.value =\n    now === \"over\"\n      ? text.value.limitExceeded({ over: count.value - max, max })\n      : text.value.approachingLimit({ remaining: max - count.value, max });\n});\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: a caller who sets either\n// still beats the row, and the row's description is merged into theirs. The\n// counter joins that list rather than replacing anything — it reads after the\n// caller's own description and before the row's message, which is the same\n// most-specific-first order `useFieldControl` applies one layer out.\n//\n// `field.attrs` then spreads **after** `textareaAttrs`, and that position is\n// the contract — see TextField.vue, which carries the full reasoning. The\n// `:aria-invalid` binding that used to sit below went with it: an individual\n// attribute written after a `v-bind` wins, so keeping one would overwrite the\n// resolved value with the raw prop.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: [attrs[\"aria-describedby\"] as string | undefined, showsCount.value ? countId : \"\"]\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</script>\n\n<template>\n  <!-- Layout, and nothing else: no fallthrough attribute lands here and nothing\n       is painted on it. `inline-flex` is what makes it shrink-wrap the field\n       frame — a block wrapper would be as wide as the column, and the counter\n       would right-align to that column rather than to the field's own edge. -->\n  <div class=\"inline-flex max-w-full flex-col align-top\">\n    <!-- The field frame: border, focus, state. Like TextField, the border lives\n         here so optional #leading/#trailing adornments sit inside the field and\n         share its focus bloom, instead of every caller re-inventing an\n         icon-inside-input layout. -->\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          'group flex items-start gap-2 rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm',\n          'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n          // Rim-lit at rest, the weave blooms on focus (Signature law): the field\n          // catches light instead of casting a shadow, and focus draws it tight.\n          'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n          !field.invalid && 'focus-within:shadow-halo',\n          // The three resting appearances, and each is three changes rather than\n          // one. Read-only and disabled used to share `bg-muted` and part only on\n          // the text colour, which is a distinction carried by hue alone — the\n          // one thing a reader with a colour deficiency, or a low-quality\n          // display, or forced-colors, does not get. The fill separates them and\n          // the border weight separates them again, so the progression\n          // available → on show → unavailable is legible on three channels.\n          //\n          // Read-only is a value **on show**: the fill lifts off `background` to\n          // `subtle` so the row reads as settled rather than editable, and the\n          // text stays full strength — 13.46:1 over that fill — because being\n          // read is the entire purpose of the state. The border does not move,\n          // because nothing about the control's reach has: it is still a Tab stop\n          // and still submitted. The native `readonly` attribute below carries\n          // the same fact to assistive tech, so nothing here rests on colour.\n          field.readonly && 'bg-subtle',\n          // Disabled is **unavailable**: the fill drains one step further to\n          // `muted`, the text follows it down to `muted-foreground` (4.68:1 over\n          // it, still AA), and the rim slackens from `input` to the lighter\n          // `border`.\n          //\n          // Drained rather than faded, and `opacity` is never the mechanism. The\n          // element a dim would sit on is the box, and the box is wrapped around\n          // the one thing a reader still needs: measured on the built site,\n          // `opacity-50` put a disabled field's value at 3.08:1 and its\n          // placeholder — already the muted colour before the fade — at 2.07:1.\n          // The text colour is declared here rather than on the `<textarea>` because\n          // the textarea sets no resting colour of its own and inherits this one,\n          // which also carries it to the adornments in the same box.\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 `<textarea>` inside\n          // it natively and never touches `field.disabled`, so the rule above\n          // cannot fire and the field rendered byte-identical to an editable one.\n          //\n          // `in-[fieldset:disabled]:` is a *read* of the attribute that did the\n          // disabling, so the fill and the native inertness cannot disagree — the\n          // fieldset element is still the only place the fact is written. It is\n          // preferred to `has-[:disabled]:` (a wrapper reading its own contents)\n          // because that proxy is wrong wherever a control holds a part that\n          // disables itself.\n          'in-[fieldset:disabled]:cursor-not-allowed in-[fieldset:disabled]:bg-muted in-[fieldset:disabled]:text-muted-foreground',\n          // Gated where the two rules below are ordered, and for the same reason.\n          // Tailwind emits the ancestor half of `in-*` inside `:where()`, so this\n          // carries no more specificity than `border-destructive` and would win\n          // on emission order alone — an unavailable field that is also in error\n          // would quietly lose its destructive rim.\n          !field.invalid && 'in-[fieldset:disabled]:border-border',\n          // Last of the three 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 lose\n          // its destructive rim to the disabled one if this sat above it.\n          field.invalid && 'border-destructive focus-within:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <span\n        v-if=\"$slots.leading\"\n        class=\"inline-flex shrink-0 text-muted-foreground transition-colors duration-fast ease-out group-focus-within:text-foreground\"\n      >\n        <slot name=\"leading\" />\n      </span>\n      <textarea\n        v-bind=\"{ ...textareaAttrs, ...field.attrs }\"\n        :aria-label=\"ariaLabel\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :value=\"currentValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"field.disabled\"\n        :readonly=\"field.readonly\"\n        :rows=\"rows\"\n        :class=\"\n          cn(\n            'min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',\n            resize === 'none' ? 'resize-none' : 'resize-y',\n          )\n        \"\n        @input=\"onInput\"\n      />\n      <span\n        v-if=\"$slots.trailing\"\n        class=\"inline-flex shrink-0 items-center gap-1 text-muted-foreground transition-colors duration-fast ease-out group-focus-within:text-foreground\"\n      >\n        <slot name=\"trailing\" />\n      </span>\n    </div>\n    <!-- Below the box, never inside it. A textarea's value fills its box and\n         scrolls, so there is no free column to hang a readout in, and the\n         bottom-right corner belongs to the native resize grabber — an inset\n         counter would sit on top of the one affordance that says the field can\n         be dragged. Here it travels with the bottom edge instead, so `resize`\n         moves it rather than moving the box out from under it.\n\n         `tabular` because the number changes under itself on every keystroke,\n         and proportional digits would shuffle the whole readout sideways as\n         they do. -->\n    <span\n      v-if=\"showsCount\"\n      :id=\"countId\"\n      :data-over-limit=\"band === 'over' || undefined\"\n      :class=\"\n        cn(\n          'tabular mt-1 select-none self-end text-small',\n          band === 'under' && 'text-muted-foreground',\n          // Colour, and never only colour: `countOverMax` says the limit is\n          // passed in words as well, and `approachingLimit` announces the near\n          // band once. The digits themselves are the third reading — 21/20 is\n          // over the limit whatever it is painted.\n          band === 'near' && 'text-warning-text',\n          band === 'over' && 'text-destructive-text',\n        )\n      \"\n    >\n      {{ countText }}\n    </span>\n    <!-- In the DOM from the first render, empty. A live region mounted at the\n         same moment as its text is a region assistive tech was not yet\n         watching, so the first warning — the one that matters most — is the one\n         it announces least reliably. -->\n    <span v-if=\"showsCount && maxLength !== undefined\" role=\"status\" class=\"sr-only\">\n      {{ announcement }}\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAa,kBAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqD/C,MAAM,QAAQ;EAsEd,MAAM,OAAO;EAGb,MAAM,EAAE,OAAO,MAAM,kBAAkB,cAAc;EAKrD,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;EAEtE,MAAM,UAAU,MAAM;;;;;;;;;;;;;EActB,MAAM,QAAQ,IAAI,MAAM,cAAc,EAAE;EACxC,MAAM,eAAe,eAAe,MAAM,cAAc,MAAM,KAAK;EAEnE,SAAS,QAAQ,OAAoB;GACnC,MAAM,QAAS,MAAM,OAA+B;GACpD,MAAM,QAAQ;GACd,KAAK,qBAAqB,KAAK;EACjC;;;;;;;EAQA,MAAM,QAAQ,eAAe,aAAa,MAAM,MAAM;EACtD,MAAM,aAAa,eAAe,MAAM,aAAa,MAAM,cAAc,KAAA,CAAS;EAElF,MAAM,OAAO,eAA0B;GACrC,MAAM,MAAM,MAAM;GAClB,IAAI,QAAQ,KAAA,GAAW,OAAO;GAC9B,MAAM,YAAY,MAAM,MAAM;GAC9B,IAAI,YAAY,GAAG,OAAO;GAC1B,OAAO,aAAa,cAAc,GAAG,IAAI,SAAS;EACpD,CAAC;EAED,MAAM,YAAY,eAAe;GAC/B,MAAM,MAAM,MAAM;GAClB,IAAI,QAAQ,KAAA,GAAW,OAAO,KAAK,MAAM,MAAM,EAAE,OAAO,MAAM,MAAM,CAAC;GACrE,MAAM,OAAO,MAAM,QAAQ;GAC3B,OAAO,OAAO,IACV,KAAK,MAAM,aAAa;IAAE,OAAO,MAAM;IAAO;IAAK;GAAK,CAAC,IACzD,KAAK,MAAM,WAAW;IAAE,OAAO,MAAM;IAAO;GAAI,CAAC;EACvD,CAAC;;;;;;;;;;;;;;EAeD,MAAM,eAAe,IAAI,EAAE;EAC3B,MAAM,OAAO,QAAQ;GACnB,MAAM,MAAM,MAAM;GAClB,IAAI,QAAQ,KAAA,KAAa,QAAQ,SAAS;IACxC,aAAa,QAAQ;IACrB;GACF;GACA,aAAa,QACX,QAAQ,SACJ,KAAK,MAAM,cAAc;IAAE,MAAM,MAAM,QAAQ;IAAK;GAAI,CAAC,IACzD,KAAK,MAAM,iBAAiB;IAAE,WAAW,MAAM,MAAM;IAAO;GAAI,CAAC;EACzE,CAAC;EAcD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,CAAC,MAAM,qBAA2C,WAAW,QAAQ,UAAU,EAAE,CAAA,CAC3F,QAAQ,OAAqB,OAAO,OAAO,YAAY,GAAG,SAAS,CAAC,CAAA,CACpE,KAAK,GAAG;GACX,MAAM,MAAM;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,EAAE;;GAQA,OAAA,UAAA,GAAA,mBA4IM,OA5IN,YA4IM;IAvIJ,mBAkGM,OAAA;KAjGH,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;KACjC,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;KACjC,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;KAC/B,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,+GAAA,sFAAA,kFAAue,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,4BAAipC,MAAA,KAAA,CAAK,CAAC,YAAQ,aAAs6B,MAAA,KAAA,CAAK,CAAC,YAAQ,mEAAA,0HAAi1C,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,wCAAsX,MAAA,KAAA,CAAK,CAAC,WAAO,uDAAqE,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;;KAkE93IA,KAAAA,OAAO,WADf,UAAA,GAAA,mBAKO,QALP,YAKO,CADL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEzB,mBAgBE,YAhBF,WAgBE;MAAA,GAfa,MAAA,aAAA;MAAa,GAAK,MAAA,KAAA,CAAK,CAAC;KAAK,GAAA;MACzC,cAAY,QAAA;MACZ,mBAAiB,QAAA;MACjB,OAAO,aAAA;MACP,aAAa,QAAA;MACb,UAAU,MAAA,KAAA,CAAK,CAAC;MAChB,UAAU,MAAA,KAAA,CAAK,CAAC;MAChB,MAAM,QAAA;MACN,OAAkB,MAAA,EAAA,CAAE,CAAA,4GAAsI,QAAA,WAAM,SAAA,gBAAA,UAAA;MAMzJ;;KAGFA,KAAAA,OAAO,YADf,UAAA,GAAA,mBAKO,QALP,YAKO,CADL,WAAwB,KAAA,QAAA,UAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;IAcpB,WAAA,SADR,UAAA,GAAA,mBAkBO,QAAA;;KAhBJ,IAAI,MAAA,OAAA;KACJ,mBAAiB,KAAA,UAAI,UAAe,KAAA;KACpC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,gDAAsE,KAAA,UAAI,WAAA,yBAAmV,KAAA,UAAI,UAAA,qBAA8C,KAAA,UAAI,UAAA,uBAAA,CAAA;IAane,GAAA,gBAAA,UAAA,KAAS,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAMF,WAAA,SAAc,QAAA,cAAc,KAAA,KAAxC,UAAA,GAAA,mBAEO,QAFP,YAEO,gBADF,aAAA,KAAY,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -0,0 +1,5 @@
+export { default } from "./Textarea.vue";
+export { TEXTAREA_LABELS } from "./Textarea.vue";
+export type { TextareaResize } from "./Textarea.vue";
+export type { TextareaLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { TEXTAREA_LABELS } from "./Textarea.vue_vue_type_script_setup_true_lang.js";
+import Textarea_default from "./Textarea.js";
+export { TEXTAREA_LABELS, Textarea_default as default };

package/dist/packages/primitives/time-picker/src/TimePicker.js

@@ -0,0 +1,7 @@
+import TimePicker_vue_vue_type_script_setup_true_lang_default from "./TimePicker.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/time-picker/src/TimePicker.vue
+var TimePicker_default = TimePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimePicker_default as default };
+
+//# sourceMappingURL=TimePicker.js.map

package/dist/packages/primitives/time-picker/src/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../../../../packages/primitives/time-picker/src/TimePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimeSegmentLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology: the four names\n * Reka UI would otherwise give the segments in English of its own accord.\n * There is nothing else — the icon is decoration and hidden, and the field\n * group takes its name from the caller or from a wrapping Field.\n *\n * An alias for the shared slice rather than a fifth interface. The same four\n * names are said by `DateTimePicker` and `DateTimeRangePicker`, they come from\n * one Reka implementation, and `src/lib/date-labels.ts` carries why they are\n * declared once. The alias exists so this control's `labels` prop reads like\n * every other one's; annotate with `LabelOverrides<TimePickerLabels>` rather\n * than with this, which is total.\n */\nexport type TimePickerLabels = TimeSegmentLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { TimeFieldInput, TimeFieldRoot, type TimeValue } from \"reka-ui\";\nimport { Clock } from \"@lucide/vue\";\nimport { parseTime } from \"@internationalized/date\";\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 { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  TIME_SEGMENT_LABELS,\n  emptySegmentValueText,\n  isTimeSegmentPart,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * TimePicker — a time of day, typed into a segmented field. Reach for it\n * wherever a clock time is a value: a meeting start, a reminder, opening hours.\n *\n * **There is no clock face and no dropdown, deliberately.** A clock dial is\n * slower than typing for every reader who can type, and unusable for several\n * who cannot; a 96-row list of quarter hours is worse again. The segmented\n * field already is the control — arrow keys change the segment under the\n * cursor, digits fill it and advance — so a panel would only be a second, worse\n * path to the same value. That is the one place this diverges from DatePicker,\n * where the calendar earns its panel by answering \"which Tuesday?\", a question\n * a time never has.\n *\n * **The model value is a plain `\"HH:mm\"` string in 24-hour time**, or\n * `\"HH:mm:ss\"` when `granularity` asks for seconds — the same boundary\n * DatePicker draws for `\"YYYY-MM-DD\"`, and drawn here for the same reason: a\n * host has a string from its API and should not have to learn a date library to\n * bind a time. `hourCycle` moves the *display* to 12-hour and never the value,\n * because conflating the two is how a 12-hour locale ends up storing `\"01:30\"`\n * for half past one in the afternoon.\n *\n * **A time is not a date.** There is no timezone here, no offset, and no `Date`\n * anywhere near the public surface: `\"09:00\"` is nine in the morning wherever\n * it is read, and the moment that turns into is the host's question, not this\n * component's. Pair it with a DatePicker when an instant is what is wanted.\n *\n * Unlike DatePicker there are no `min`/`max` bounds. A time of day has no\n * ordering that survives midnight — a night shift is \"not before 22:00\" *and*\n * \"not after 02:00\", two bounds that cross rather than fence — so a min/max\n * pair would quietly call 01:00 out of range for the exact case it was reached\n * for. A window like that belongs to the host, which knows which day each end\n * is on.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Starts at\" error=\"…\"><TimePicker /></Field>` needs no attributes at the\n * call site. Every prop below still wins over the row when it is set, in both\n * directions, which is why the four booleans default to `undefined` rather than\n * `false`. `readonly` and `disabled` are different states, so the field rests in\n * three appearances rather than two: read-only is a time on show — still a Tab\n * stop, still submitted, a lifted fill with the segments at full strength —\n * where disabled is unavailable and drained a step further, in fill, text\n * colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen time as `\"HH:mm\"`, or `\"HH:mm:ss\"` at second granularity, in\n     * 24-hour time whatever the field displays. Unset, empty or unparseable\n     * means no time is chosen. The explicit `| undefined` is what lets\n     * `v-model` bind a ref that clears — the emitted value drops to `undefined`\n     * when the field is emptied, and a plain optional prop refuses to take it\n     * back.\n     */\n    modelValue?: string | undefined;\n    /**\n     * Whether the field reads as 12-hour with an AM/PM segment or as 24-hour.\n     * Display only: the value stays 24-hour either way. Unset follows `locale`,\n     * which is what a reader of that locale expects to see.\n     */\n    hourCycle?: 12 | 24;\n    /** How far down the field goes. `\"hour\"` and `\"minute\"` report `\"HH:mm\"`; `\"second\"` adds a seconds segment and reports `\"HH:mm:ss\"`. */\n    granularity?: \"hour\" | \"minute\" | \"second\";\n    /** BCP 47 tag driving the order of the segments, the separator between them, and the 12-or-24-hour default. */\n    locale?: string;\n    /** Unavailable: dims the control and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the time without allowing an edit: the field stays a Tab stop, stays submitted, and is filled rather than dimmed. 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    /** Marks the field mandatory to assistive tech (`aria-required` on the segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the time through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for the four segments, as any subset of `TimePickerLabels` — the\n     * rest stay as the host's `provideLoomLabels` vocabulary left them, and then\n     * as Loom's English.\n     *\n     * Every one of them replaces a literal Reka writes itself, so this is not\n     * decoration: leave the vocabulary unset and the segments are named in\n     * English rather than named not at all.\n     */\n    labels?: LabelOverrides<TimePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen time as `\"HH:mm\"` (or `\"HH:mm:ss\"`), or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\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(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\n\n// Read through the ref on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. `undefined` for the `literal` separators, which\n// Reka renders `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return isTimeSegmentPart(part) ? text.value[part] : undefined;\n}\n\n// The companion to `segmentLabel`, and the reason it returns an object rather\n// than a string is in `emptySegmentValueText`: Reka's `aria-valuetext` is a\n// hard-coded \"Empty\" only while the segment holds nothing, so this replaces\n// that case and leaves the filled one — a number — exactly as Reka wrote it.\n//\n// The dayPeriod is the exception. Reka writes `\"AM\"` or `\"PM\"` from its own\n// hour-cycle logic, not from `Intl.DateTimeFormat`, so a localised field\n// still announces the period in English. `filledDayPeriod` lets a host replace\n// those with the locale's own period names (Arabic `\"ص\"`/`\"م\"`, Japanese\n// `\"午前\"`/`\"午後\"`).\nfunction segmentValueText(part: string, value: string): { \"aria-valuetext\"?: string } {\n  const empty = emptySegmentValueText(part, value, text.value.empty);\n  if (empty[\"aria-valuetext\"]) return empty;\n  if (part === \"dayPeriod\") {\n    return { \"aria-valuetext\": text.value.filledDayPeriod({ dayPeriod: value }) };\n  }\n  return {};\n}\n\n// One rendered node, so both halves of the fallthrough land on it — the split\n// exists only because `class` needs the Tailwind-aware merge and Vue's own\n// fallthrough would concatenate a caller's `h-11` after our `h-9` instead of\n// replacing it. That node is Reka's `role=\"group\"`, which is also where\n// `aria-label` belongs: a screen reader announces a group's name once on\n// entering it, rather than once per segment.\n//\n// It is also why `invalid` is announced with `aria-invalid` and nothing else.\n// DatePicker moves its `data-invalid` marker onto the anchor because the field\n// group already spells that attribute with Reka's own meaning; here there is no\n// second element to move it to, and an attribute Reka binds itself wins outright\n// — its template merges `$attrs` first and its own bindings after, so a\n// `data-invalid` passed in from out here is overwritten by Reka's own\n// `undefined` before it reaches the DOM. Setting it would look like it worked\n// and silently do nothing.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The time segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so Reka's hidden input went inert inside a disabled group\n * while the segments a reader actually uses still typed. Measured in jsdom: an\n * empty hour segment became `12` on an arrow key.\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 handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs rather than replacing it. `field.attrs` then spreads onto\n// `TimeFieldRoot` **after** `fieldAttrs`, which is the node both were already\n// landing on.\n//\n// **Where each key ends up was checked rather than assumed**, given what the\n// note above says about attributes this node overwrites. The set Reka spells\n// itself is `role`, `aria-disabled`, `data-disabled`, `data-readonly`,\n// `data-invalid` and `dir`, and `field.attrs` spells none of them:\n// `aria-describedby`, `aria-required` and `aria-invalid` are undeclared and land\n// on the `role=\"group\"` as intended, while `id` and `name` are declared props\n// and land on the visually-hidden `<input>` the field submits through — which is\n// the element a `<label for>` can actually name, a `role=\"group\"` div not being\n// labelable.\n//\n// The `:aria-invalid` binding that used to sit on the root is gone with it: an\n// individual attribute written after a `v-bind` wins, so keeping one would\n// overwrite the resolved value with the raw prop.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // native input Reka renders inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, and the same three-way guard.\nconst groupLabelledBy = computed(() =>\n  attrs[\"aria-label\"] || attrs[\"aria-labelledby\"] ? undefined : field.labelledBy,\n);\n\nfunction fromClock(value: string | undefined): TimeValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseTime(value);\n  } catch {\n    // Same contract as DatePicker: a half-typed or wrongly-shaped value is read\n    // as no time chosen. A component library cannot decide that a host's bad\n    // data is fatal.\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `Time.toString()`, which always prints\n// seconds and appends a fractional part when the value carries one — so a\n// minute-granularity field would report `\"09:30:00\"`, and a value the host\n// parsed from `\"09:30:00.5\"` would round-trip a half second the field never\n// showed. The string that comes back is the string the segments are showing.\nfunction toClock(time: TimeValue): string {\n  const hhmm = `${pad(time.hour)}:${pad(time.minute)}`;\n  return props.granularity === \"second\" ? `${hhmm}:${pad(time.second)}` : hhmm;\n}\n\n// `optional()` rather than plain bindings: Reka reads an explicit `undefined`\n// `modelValue` as a value the host owns and is holding empty, which turns an\n// uncontrolled field into a permanently empty one, and an `hourCycle` of\n// `undefined` is how it is told to follow the locale. Dropping the keys says\n// what is true.\nconst rootValue = computed(() =>\n  optional({ modelValue: fromClock(props.modelValue), hourCycle: props.hourCycle }),\n);\n\nfunction onTimeChange(time: TimeValue | undefined) {\n  emit(\"update:modelValue\", time ? toClock(time) : undefined);\n}\n\n// The field is one Tab stop, not four. The reasoning, and the reason Reka's own\n// ArrowLeft/ArrowRight handling survives it untouched, is written out in\n// DatePicker — it moves focus with `focus()` directly, which ignores tabindex.\n// It matters more here: a 12-hour field with seconds is four segments, so\n// leaving Reka's default in place costs a keyboard reader four Tab presses to\n// cross one control.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the time is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a granularity or locale change takes\n  // it away — a field whose only tab stop is a seconds segment that no longer\n  // exists is a field nothing can reach.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// Reka reads `hourCycle` once, when it builds its formatter, and seeds its\n// segment values from the granularity in the same breath — neither is watched.\n// Observed: a field showing 13:30 that is moved to a 12-hour cycle relabels\n// itself \"1:30 AM\", half a day wrong, because the AM/PM segment appears with\n// its initial value and nothing recomputes it from the hour. Widening the\n// granularity on an empty field is the same fault with a different symptom: the\n// new seconds segment arrives with no entry to read, so it renders without a\n// role at all.\n//\n// Both are structural changes — they add and remove segments — so keying the\n// field on them rebuilds it rather than patching a half-migrated one. `locale`\n// is deliberately not in the key: Reka does watch that, and rebuilding on it\n// would throw away focus mid-edit for a change it handles correctly.\nconst shape = computed(() => `${props.granularity}-${props.hourCycle}`);\n\n/**\n * Reka's hour segment publishes `aria-valuenow` and `aria-valuetext` straight\n * off the internal 24-hour value while publishing `aria-valuemin`/`max` as\n * 1–12, so half past one in the afternoon announces itself as \"13 PM\", out of\n * its own declared range. The displayed hour is the one the reader is being\n * asked about, so the announcement is rebuilt from what the segment actually\n * shows. Only under an explicit 12-hour cycle: left to the locale, Reka defers\n * to the formatter and the pair is already consistent.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  // An unfilled hour reads as its placeholder rather than a number, and there is\n  // no number to announce for it. The empty case is not left to Reka's English\n  // \"Empty\" either — `segmentValueText` binds the vocabulary's word for it on\n  // the same element, and the two never collide: this returns a value only for\n  // a filled hour and that one only for an empty segment.\n  if (!Number.isInteger(shown) || period === undefined) return undefined;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": `${shown} ${period}` };\n}\n</script>\n\n<template>\n  <TimeFieldRoot\n    ref=\"root\"\n    :key=\"shape\"\n    v-slot=\"{ segments }\"\n    v-bind=\"{ ...rootValue, ...fieldAttrs, ...field.attrs }\"\n    :aria-labelledby=\"groupLabelledBy\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :class=\"\n      cn(\n        // The text input's own height scale, so a time sitting in a form row\n        // beside a text field lines up rather than nearly lining up. No gap:\n        // the colon between two segments is itself a segment, so spacing them\n        // apart writes the time as `09 : 30`.\n        'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n        'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n        // The box carries the ring and the focused segment below carries a fill\n        // instead of a second outline, exactly as DatePicker's field does — a\n        // ring drawn inside a ring reads as a rendering fault.\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, and each is painted on this group rather\n        // than on the segments inside it: a per-segment fill leaves the colon\n        // between them on `background`, and the time comes out striped.\n        //\n        // Read-only lifts to `subtle` and keeps its focus ring and its\n        // full-strength segments — 13.46:1 over that fill — because a read-only\n        // time is a value on show, not an unavailable control. The rim stays\n        // `input`: the field is still a Tab stop and still submitted. Reka's own\n        // `data-readonly` on this node carries the same state to assistive tech,\n        // so nothing here rests on colour.\n        field.readonly && 'bg-subtle',\n        // Drained rather than faded, for the reason DatePicker and\n        // DateTimePicker both write out — this control was the one member of\n        // the family the sweep still caught. `opacity-50` took the segments\n        // down with the box: measured on the built site, the hour and the\n        // period read 3.08:1 and the colon between them 2.07:1, and those\n        // segments *are* the value. The fill drains one step past read-only,\n        // the muted text over it is 4.68:1, and the rim slackens from `input`\n        // to `border` — three channels, so the two states do not part on hue\n        // alone. Set on the group because no segment declares a resting colour\n        // of its own, so each inherits this one.\n        field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n        // Last of the rules that name a border colour: `cn()` resolves one by\n        // whichever class it saw last, so a field both in error and unavailable\n        // would otherwise lose its destructive rim to the disabled one.\n        field.invalid && 'border-destructive focus-within:outline-destructive',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onTimeChange\"\n  >\n    <!-- Leading, where DatePicker's calendar button is trailing: that trailing\n         slot is a button in every other member of this family, and a glyph\n         sitting in it that opens nothing would promise a panel this control\n         does not have. Decoration, so it is hidden from the accessibility\n         tree — the group's own name says what the field is. -->\n    <Clock aria-hidden=\"true\" class=\"mr-2 h-4 w-4 shrink-0 text-muted-foreground\" />\n\n    <!-- The `:aria-label` replaces the one Reka writes in English inside its\n         own render function. It reaches the DOM node as a fallthrough\n         attribute, which Vue merges last, so it is a replacement rather than a\n         second name. Removing it does not fall back to nothing; it falls back\n         to Reka's English. -->\n    <TimeFieldInput\n      v-for=\"(item, index) in segments\"\n      :key=\"index\"\n      :part=\"item.part\"\n      :tabindex=\"segmentTabIndex(item.part, segments)\"\n      :aria-label=\"segmentLabel(item.part)\"\n      v-bind=\"{\n        ...segmentValueText(item.part, item.value),\n        ...(item.part === 'hour' ? hourAnnouncement(segments) : undefined),\n      }\"\n      :class=\"\n        cn(\n          'tabular rounded-sm px-0.5 outline-none',\n          'transition-colors duration-instant ease-out',\n          'focus:bg-primary-muted focus:text-primary-text',\n          'data-[placeholder]:text-muted-foreground',\n          item.part === 'literal' && 'text-muted-foreground',\n        )\n      \"\n      @focusin=\"focusedPart = item.part\"\n    >\n      {{ item.value }}\n    </TimeFieldInput>\n  </TimeFieldRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/time-picker/src/TimePicker.vue.d.ts

@@ -0,0 +1,111 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { TimeSegmentLabels } from "../../../labels/src/index";
+/**
+ * Everything this control publishes to assistive technology: the four names
+ * Reka UI would otherwise give the segments in English of its own accord.
+ * There is nothing else — the icon is decoration and hidden, and the field
+ * group takes its name from the caller or from a wrapping Field.
+ *
+ * An alias for the shared slice rather than a fifth interface. The same four
+ * names are said by `DateTimePicker` and `DateTimeRangePicker`, they come from
+ * one Reka implementation, and `src/lib/date-labels.ts` carries why they are
+ * declared once. The alias exists so this control's `labels` prop reads like
+ * every other one's; annotate with `LabelOverrides<TimePickerLabels>` rather
+ * than with this, which is total.
+ */
+export type TimePickerLabels = TimeSegmentLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The chosen time as `"HH:mm"`, or `"HH:mm:ss"` at second granularity, in
+     * 24-hour time whatever the field displays. Unset, empty or unparseable
+     * means no time is chosen. The explicit `| undefined` is what lets
+     * `v-model` bind a ref that clears — the emitted value drops to `undefined`
+     * when the field is emptied, and a plain optional prop refuses to take it
+     * back.
+     */
+    modelValue?: string | undefined;
+    /**
+     * Whether the field reads as 12-hour with an AM/PM segment or as 24-hour.
+     * Display only: the value stays 24-hour either way. Unset follows `locale`,
+     * which is what a reader of that locale expects to see.
+     */
+    hourCycle?: 12 | 24;
+    /** How far down the field goes. `"hour"` and `"minute"` report `"HH:mm"`; `"second"` adds a seconds segment and reports `"HH:mm:ss"`. */
+    granularity?: "hour" | "minute" | "second";
+    /** BCP 47 tag driving the order of the segments, the separator between them, and the 12-or-24-hour default. */
+    locale?: string;
+    /** Unavailable: dims the control and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the time without allowing an edit: the field stays a Tab stop, stays submitted, and is filled rather than dimmed. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and 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` on the segment group). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the time through. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for the four segments, as any subset of `TimePickerLabels` — the
+     * rest stay as the host's `provideLoomLabels` vocabulary left them, and then
+     * as Loom's English.
+     *
+     * Every one of them replaces a literal Reka writes itself, so this is not
+     * decoration: leave the vocabulary unset and the segments are named in
+     * English rather than named not at all.
+     */
+    labels?: LabelOverrides<TimePickerLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The chosen time as `"HH:mm"`, or `"HH:mm:ss"` at second granularity, in
+     * 24-hour time whatever the field displays. Unset, empty or unparseable
+     * means no time is chosen. The explicit `| undefined` is what lets
+     * `v-model` bind a ref that clears — the emitted value drops to `undefined`
+     * when the field is emptied, and a plain optional prop refuses to take it
+     * back.
+     */
+    modelValue?: string | undefined;
+    /**
+     * Whether the field reads as 12-hour with an AM/PM segment or as 24-hour.
+     * Display only: the value stays 24-hour either way. Unset follows `locale`,
+     * which is what a reader of that locale expects to see.
+     */
+    hourCycle?: 12 | 24;
+    /** How far down the field goes. `"hour"` and `"minute"` report `"HH:mm"`; `"second"` adds a seconds segment and reports `"HH:mm:ss"`. */
+    granularity?: "hour" | "minute" | "second";
+    /** BCP 47 tag driving the order of the segments, the separator between them, and the 12-or-24-hour default. */
+    locale?: string;
+    /** Unavailable: dims the control and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the time without allowing an edit: the field stays a Tab stop, stays submitted, and is filled rather than dimmed. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and 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` on the segment group). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the time through. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for the four segments, as any subset of `TimePickerLabels` — the
+     * rest stay as the host's `provideLoomLabels` vocabulary left them, and then
+     * as Loom's English.
+     *
+     * Every one of them replaces a literal Reka writes itself, so this is not
+     * decoration: leave the vocabulary unset and the segments are named in
+     * English rather than named not at all.
+     */
+    labels?: LabelOverrides<TimePickerLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | undefined) => any;
+}>, {
+    locale: string;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
+    granularity: "hour" | "minute" | "second";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=TimePicker.vue.d.ts.map