@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/primitives/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type TextareaResize = \"none\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Textarea — multi-line text entry. A native `<textarea>`, single node (no\n * wrapper — unlike TextField there are no `#leading`/`#trailing` adornments to\n * frame), so `class` and the rest of the fallthrough attrs both target the\n * same element; still routed through `useSplitAttrs()` for the same reason as\n * every other primitive — a caller's `class` needs a Tailwind-aware `cn()`\n * merge, not a raw `v-bind` clobbering it. The accessible name is a\n * first-class prop pair (`aria-label`/`aria-labelledby`, camelized by Vue)\n * bound onto the textarea explicitly, the same contract as TextField.\n */\nwithDefaults(\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. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border/ring and sets aria-invalid. */\n    invalid?: boolean;\n    /** Initial height in text rows. */\n    rows?: number;\n    /** Whether a person can drag-resize the field; `none` locks it to `rows`. */\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  {\n    disabled: false,\n    invalid: false,\n    rows: 3,\n    resize: \"vertical\",\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: textareaAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <textarea\n    v-bind=\"textareaAttrs\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :value=\"modelValue\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :rows=\"rows\"\n    :aria-invalid=\"invalid || undefined\"\n    :class=\"\n      cn(\n        '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).\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        !invalid && 'focus-visible:shadow-halo',\n        'placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        invalid && 'border-destructive focus-visible:outline-destructive',\n        resize === 'none' ? 'resize-none' : 'resize-y',\n        attrs.class as string,\n      )\n    \"\n    @input=\"$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/primitives/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  COUNT_LABELS,\n  warningWindow,\n  type CountBand,\n  type CountLabels,\n} from \"../../lib/count-labels\";\n\nexport type TextareaResize = \"none\" | \"vertical\";\n\n/**\n * Everything this control says out loud, and every word of it is Loom's own —\n * a bare `<textarea>` renders no English of anybody else's, so a dropped key\n * here falls back to nothing rather than to a stray untranslated string.\n *\n * These are TextField's five counter keys, by name and by argument shape, and\n * deliberately so: a host that has already worded a character counter should be\n * able to copy that bag across unchanged. They come from\n * `src/lib/count-labels.ts` rather than being declared a second time. They are\n * a slot of their own rather than a share of `textField`'s because that slot\n * also carries `reveal`, and handing a textarea's translator a password-toggle\n * key to fill in is asking a question the control cannot answer.\n */\nexport type TextareaLabels = CountLabels;\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 \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\nimport { useLabels, type LabelOverrides } from \"../../lib/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',\n          band === 'over' && 'text-destructive',\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":""}

package/dist/primitives/Textarea/Textarea.vue.d.ts

@@ -1,23 +1,78 @@
+import { type LabelOverrides } from "../../lib/labels";
+import { type CountLabels } from "../../lib/count-labels";
 export type TextareaResize = "none" | "vertical";
+/**
+ * Everything this control says out loud, and every word of it is Loom's own —
+ * a bare `<textarea>` renders no English of anybody else's, so a dropped key
+ * here falls back to nothing rather than to a stray untranslated string.
+ *
+ * These are TextField's five counter keys, by name and by argument shape, and
+ * deliberately so: a host that has already worded a character counter should be
+ * able to copy that bag across unchanged. They come from
+ * `src/lib/count-labels.ts` rather than being declared a second time. They are
+ * a slot of their own rather than a share of `textField`'s because that slot
+ * also carries `reveal`, and handing a textarea's translator a password-toggle
+ * key to fill in is asking a question the control cannot answer.
+ */
+export type TextareaLabels = CountLabels;
+/**
+ * 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: import("vue").DefineComponent<{
+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. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border/ring and sets aria-invalid. */
-    invalid?: boolean;
+    /** 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`. */
+    /** 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<{
@@ -25,24 +80,69 @@ declare const __VLS_export: import("vue").DefineComponent<{
     modelValue?: string;
     /** Text shown in the empty field. */
     placeholder?: string;
-    /** Disables the field and blocks pointer and keyboard input. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border/ring and sets aria-invalid. */
-    invalid?: boolean;
+    /** 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`. */
+    /** 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;
 }>, {
-    disabled: boolean;
-    invalid: boolean;
     resize: TextareaResize;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
     rows: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    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/primitives/Textarea/Textarea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Textarea/Textarea.vue"],"names":[],"mappings":"AAqFA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;wBAC5B,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAYd,uEAAuE;iBAC1D,MAAM;IACnB,qCAAqC;kBACvB,MAAM;IACpB,gEAAgE;eACrD,OAAO;IAClB,6EAA6E;cACnE,OAAO;IACjB,mCAAmC;WAC5B,MAAM;IACb,6EAA6E;aACpE,cAAc;IACvB,6EAA6E;gBACjE,MAAM;IAClB,0FAA0F;qBACzE,MAAM;;;;IAfvB,uEAAuE;iBAC1D,MAAM;IACnB,qCAAqC;kBACvB,MAAM;IACpB,gEAAgE;eACrD,OAAO;IAClB,6EAA6E;cACnE,OAAO;IACjB,mCAAmC;WAC5B,MAAM;IACb,6EAA6E;aACpE,cAAc;IACvB,6EAA6E;gBACjE,MAAM;IAClB,0FAA0F;qBACzE,MAAM;;;;cAVZ,OAAO;aAER,OAAO;YAIR,cAAc;UAFhB,MAAM;6EAyFb,CAAC"}
+{"version":3,"file":"Textarea.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Textarea/Textarea.vue"],"names":[],"mappings":"AAiaA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,cAA6B,CAAC;wBACvC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA6Cd,uEAAuE;iBAC1D,MAAM;IACnB,qCAAqC;kBACvB,MAAM;IACpB,kGAAkG;eACvF,OAAO,GAAG,SAAS;IAC9B,+HAA+H;eACpH,OAAO,GAAG,SAAS;IAC9B,yHAAyH;cAC/G,OAAO,GAAG,SAAS;IAC7B,uGAAuG;eAC5F,OAAO,GAAG,SAAS;IAC9B,6FAA6F;WACtF,MAAM;IACb,mCAAmC;WAC5B,MAAM;IACb,iKAAiK;aACxJ,cAAc;IACvB,6EAA6E;gBACjE,MAAM;IAClB,0FAA0F;qBACzE,MAAM;IACvB;;;;;;;;OAQG;gBACS,MAAM;IAClB;;;;;OAKG;gBACS,OAAO,GAAG,SAAS;IAC/B;;;;;;;;OAQG;aACM,cAAc,CAAC,cAAc,CAAC;;;;IAhDvC,uEAAuE;iBAC1D,MAAM;IACnB,qCAAqC;kBACvB,MAAM;IACpB,kGAAkG;eACvF,OAAO,GAAG,SAAS;IAC9B,+HAA+H;eACpH,OAAO,GAAG,SAAS;IAC9B,yHAAyH;cAC/G,OAAO,GAAG,SAAS;IAC7B,uGAAuG;eAC5F,OAAO,GAAG,SAAS;IAC9B,6FAA6F;WACtF,MAAM;IACb,mCAAmC;WAC5B,MAAM;IACb,iKAAiK;aACxJ,cAAc;IACvB,6EAA6E;gBACjE,MAAM;IAClB,0FAA0F;qBACzE,MAAM;IACvB;;;;;;;;OAQG;gBACS,MAAM;IAClB;;;;;OAKG;gBACS,OAAO,GAAG,SAAS;IAC/B;;;;;;;;OAQG;aACM,cAAc,CAAC,cAAc,CAAC;;;;YA/B9B,cAAc;cAZZ,OAAO,GAAG,SAAS;aAIpB,OAAO,GAAG,SAAS;cAFlB,OAAO,GAAG,SAAS;cAInB,OAAO,GAAG,SAAS;UAIvB,MAAM;eAuBD,OAAO,GAAG,SAAS;;cAoVrB,CAAC,KAAK,IAAgB,KAAK,GAAG;;eAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/primitives/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,88 @@
 import { cn } from "../../lib/cn.js";
+import { useLabels } from "../../lib/labels.js";
 import { useSplitAttrs } from "../../lib/attrs.js";
-import { createElementBlock, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { useFieldControl } from "../../lib/field-context.js";
+import { COUNT_LABELS, warningWindow } from "../../lib/count-labels.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useId, watch } from "vue";
 //#region src/primitives/Textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
+/**
+* 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",
-	"rows",
-	"aria-invalid"
+	"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",
@@ -19,36 +91,160 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		placeholder: {},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
 		},
 		invalid: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
 		rows: { default: 3 },
 		resize: { default: "vertical" },
 		ariaLabel: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		maxLength: {},
+		showCount: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props) {
+	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("textarea", mergeProps(unref(textareaAttrs), {
-				"aria-label": __props.ariaLabel,
-				"aria-labelledby": __props.ariaLabelledby,
-				value: __props.modelValue,
-				placeholder: __props.placeholder,
-				disabled: __props.disabled,
-				rows: __props.rows,
-				"aria-invalid": __props.invalid || void 0,
-				class: unref(cn)("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-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", !__props.invalid && "focus-visible:shadow-halo", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", __props.invalid && "border-destructive focus-visible:outline-destructive", __props.resize === "none" ? "resize-none" : "resize-y", unref(attrs).class),
-				onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
-			}), null, 16, _hoisted_1);
+			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", band.value === "over" && "text-destructive"))
+				}, 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_vue_vue_type_script_setup_true_lang_default as default };
+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/primitives/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type TextareaResize = \"none\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Textarea — multi-line text entry. A native `<textarea>`, single node (no\n * wrapper — unlike TextField there are no `#leading`/`#trailing` adornments to\n * frame), so `class` and the rest of the fallthrough attrs both target the\n * same element; still routed through `useSplitAttrs()` for the same reason as\n * every other primitive — a caller's `class` needs a Tailwind-aware `cn()`\n * merge, not a raw `v-bind` clobbering it. The accessible name is a\n * first-class prop pair (`aria-label`/`aria-labelledby`, camelized by Vue)\n * bound onto the textarea explicitly, the same contract as TextField.\n */\nwithDefaults(\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. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border/ring and sets aria-invalid. */\n    invalid?: boolean;\n    /** Initial height in text rows. */\n    rows?: number;\n    /** Whether a person can drag-resize the field; `none` locks it to `rows`. */\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  {\n    disabled: false,\n    invalid: false,\n    rows: 3,\n    resize: \"vertical\",\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: textareaAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <textarea\n    v-bind=\"textareaAttrs\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    :value=\"modelValue\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :rows=\"rows\"\n    :aria-invalid=\"invalid || undefined\"\n    :class=\"\n      cn(\n        '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).\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        !invalid && 'focus-visible:shadow-halo',\n        'placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        invalid && 'border-destructive focus-visible:outline-destructive',\n        resize === 'none' ? 'resize-none' : 'resize-y',\n        attrs.class as string,\n      )\n    \"\n    @input=\"$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,EAAE,OAAO,MAAM,kBAAkB,cAAc;;GAInD,OAAA,UAAA,GAAA,mBAwBE,YAxBF,WACU,MAuBR,aAAA,GAvBqB;IACpB,cAAY,QAAA;IACZ,mBAAiB,QAAA;IACjB,OAAO,QAAA;IACP,aAAa,QAAA;IACb,UAAU,QAAA;IACV,MAAM,QAAA;IACN,gBAAc,QAAA,WAAW,KAAA;IACzB,OAAc,MAAA,EAAA,CAAE,CAAA,kFAAA,sFAAA,qFAAuW,CAAA,QAAA,WAAO,6BAAA,qCAAA,mDAAiJ,QAAA,WAAO,wDAAoE,QAAA,WAAM,SAAA,gBAAA,YAAkD,MAAA,KAAA,CAAK,CAAC,KAAA;IAcxpB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAuB,OAAO,OAA+B,KAAK"}
+{"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/primitives/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  COUNT_LABELS,\n  warningWindow,\n  type CountBand,\n  type CountLabels,\n} from \"../../lib/count-labels\";\n\nexport type TextareaResize = \"none\" | \"vertical\";\n\n/**\n * Everything this control says out loud, and every word of it is Loom's own —\n * a bare `<textarea>` renders no English of anybody else's, so a dropped key\n * here falls back to nothing rather than to a stray untranslated string.\n *\n * These are TextField's five counter keys, by name and by argument shape, and\n * deliberately so: a host that has already worded a character counter should be\n * able to copy that bag across unchanged. They come from\n * `src/lib/count-labels.ts` rather than being declared a second time. They are\n * a slot of their own rather than a share of `textField`'s because that slot\n * also carries `reveal`, and handing a textarea's translator a password-toggle\n * key to fill in is asking a question the control cannot answer.\n */\nexport type TextareaLabels = CountLabels;\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 \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\nimport { useLabels, type LabelOverrides } from \"../../lib/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',\n          band === 'over' && 'text-destructive',\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,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,gBAAyC,KAAA,UAAI,UAAA,kBAAA,CAAA;IAa9d,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/primitives/TimePicker/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 src/primitives/TimePicker/TimePicker.vue
+var TimePicker_default = TimePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimePicker_default as default };
+
+//# sourceMappingURL=TimePicker.js.map