@ecoma-io/loom 0.3.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"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',\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":""}
+{"version":3,"file":"Textarea.js","names":[],"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":""}

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

@@ -1,5 +1,5 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import { type TextareaLabels } from "@ecoma-io/loom-labels";
+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

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

@@ -239,7 +239,7 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					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-text"))
+					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)
 			]);

package/dist/packages/primitives/textarea/src/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":["$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',\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":"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"}
+{"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":"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"}

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import type { TimeSegmentLabels } from "@ecoma-io/loom-labels";
+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.

package/dist/packages/primitives/timeline/src/Timeline.js

@@ -0,0 +1,7 @@
+import Timeline_vue_vue_type_script_setup_true_lang_default, { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/timeline/src/Timeline.vue
+var Timeline_default = Timeline_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TIMELINE_LABELS, Timeline_default as default };
+
+//# sourceMappingURL=Timeline.js.map

package/dist/packages/primitives/timeline/src/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/Timeline.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimelineLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Timeline — a chronological spine: markers down a line, each carrying a\n * moment (title, description, timestamp) and where it sits relative to now.\n *\n * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing\n * different clothes: ordered stages a reader moves through, which Stepper\n * already models with a state machine, reachability rules and keyboard\n * traversal. A timeline's moments are *records* the reader scans, and the\n * scan runs top-to-bottom at every viewport this library targets. If a\n * design reaches for horizontal, it is asking for Stepper.\n *\n * Statuses are explicit — the host owns the truth about what has happened —\n * and every item states its status in words beside the marker, because a\n * dot's colour alone is not a state.\n */\nexport const TIMELINE_LABELS: TimelineLabels = {\n  region: \"Timeline\",\n  complete: \"Completed\",\n  current: \"Current\",\n  upcoming: \"Upcoming\",\n};\n\n/** Where a moment sits relative to now. The host owns the truth. */\nexport type TimelineStatus = \"complete\" | \"current\" | \"upcoming\";\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\ndefineProps<{\n  /** Names the timeline when surrounding prose does not already say it. */\n  labels?: LabelOverrides<TimelineLabels>;\n}>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS);\n</script>\n\n<template>\n  <!-- An ordered list, because a timeline IS ordered. Items draw their own\n       connector stub; the last one's is retired here so the line stops where\n       the story does. -->\n  <!-- A div carrying explicit list roles rather than a styled ol: the docs\n       site's own unlayered `ol` rules beat every utility here (the failure\n       AvatarGroup recorded first), and explicit roles also survive engines\n       that drop list semantics once `list-style: none` lands. -->\n  <div\n    role=\"list\"\n    :aria-label=\"text.region\"\n    class=\"m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden\"\n  >\n    <!-- @slot The entries: one `TimelineItem` per moment, in order. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/timeline/src/Timeline.vue.d.ts

@@ -0,0 +1,37 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { TimelineLabels } from "../../../labels/src/index";
+/**
+ * Timeline — a chronological spine: markers down a line, each carrying a
+ * moment (title, description, timestamp) and where it sits relative to now.
+ *
+ * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing
+ * different clothes: ordered stages a reader moves through, which Stepper
+ * already models with a state machine, reachability rules and keyboard
+ * traversal. A timeline's moments are *records* the reader scans, and the
+ * scan runs top-to-bottom at every viewport this library targets. If a
+ * design reaches for horizontal, it is asking for Stepper.
+ *
+ * Statuses are explicit — the host owns the truth about what has happened —
+ * and every item states its status in words beside the marker, because a
+ * dot's colour alone is not a state.
+ */
+export declare const TIMELINE_LABELS: TimelineLabels;
+/** Where a moment sits relative to now. The host owns the truth. */
+export type TimelineStatus = "complete" | "current" | "upcoming";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Names the timeline when surrounding prose does not already say it. */
+    labels?: LabelOverrides<TimelineLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Names the timeline when surrounding prose does not already say it. */
+    labels?: LabelOverrides<TimelineLabels>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Timeline.vue.d.ts.map

package/dist/packages/primitives/timeline/src/Timeline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createElementBlock, defineComponent, openBlock, renderSlot, unref } from "vue";
+//#region packages/primitives/timeline/src/Timeline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+/**
+* Timeline — a chronological spine: markers down a line, each carrying a
+* moment (title, description, timestamp) and where it sits relative to now.
+*
+* **Vertical is the only axis.** A horizontal timeline is a Stepper wearing
+* different clothes: ordered stages a reader moves through, which Stepper
+* already models with a state machine, reachability rules and keyboard
+* traversal. A timeline's moments are *records* the reader scans, and the
+* scan runs top-to-bottom at every viewport this library targets. If a
+* design reaches for horizontal, it is asking for Stepper.
+*
+* Statuses are explicit — the host owns the truth about what has happened —
+* and every item states its status in words beside the marker, because a
+* dot's colour alone is not a state.
+*/
+var TIMELINE_LABELS = {
+	region: "Timeline",
+	complete: "Completed",
+	current: "Current",
+	upcoming: "Upcoming"
+};
+var Timeline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Timeline",
+	props: { labels: {} },
+	setup(__props) {
+		const text = useLabels("timeline", TIMELINE_LABELS);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "list",
+				"aria-label": unref(text).region,
+				class: "m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden"
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TIMELINE_LABELS, Timeline_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/timeline/src/Timeline.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/Timeline.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TimelineLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Timeline — a chronological spine: markers down a line, each carrying a\n * moment (title, description, timestamp) and where it sits relative to now.\n *\n * **Vertical is the only axis.** A horizontal timeline is a Stepper wearing\n * different clothes: ordered stages a reader moves through, which Stepper\n * already models with a state machine, reachability rules and keyboard\n * traversal. A timeline's moments are *records* the reader scans, and the\n * scan runs top-to-bottom at every viewport this library targets. If a\n * design reaches for horizontal, it is asking for Stepper.\n *\n * Statuses are explicit — the host owns the truth about what has happened —\n * and every item states its status in words beside the marker, because a\n * dot's colour alone is not a state.\n */\nexport const TIMELINE_LABELS: TimelineLabels = {\n  region: \"Timeline\",\n  complete: \"Completed\",\n  current: \"Current\",\n  upcoming: \"Upcoming\",\n};\n\n/** Where a moment sits relative to now. The host owns the truth. */\nexport type TimelineStatus = \"complete\" | \"current\" | \"upcoming\";\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\ndefineProps<{\n  /** Names the timeline when surrounding prose does not already say it. */\n  labels?: LabelOverrides<TimelineLabels>;\n}>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS);\n</script>\n\n<template>\n  <!-- An ordered list, because a timeline IS ordered. Items draw their own\n       connector stub; the last one's is retired here so the line stops where\n       the story does. -->\n  <!-- A div carrying explicit list roles rather than a styled ol: the docs\n       site's own unlayered `ol` rules beat every utility here (the failure\n       AvatarGroup recorded first), and explicit roles also survive engines\n       that drop list semantics once `list-style: none` lands. -->\n  <div\n    role=\"list\"\n    :aria-label=\"text.region\"\n    class=\"m-0 p-0 [&>*:last-child_.loom-timeline-line]:hidden\"\n  >\n    <!-- @slot The entries: one `TimelineItem` per moment, in order. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,IAAa,kBAAkC;CAC7C,QAAQ;CACR,UAAU;CACV,SAAS;CACT,UAAU;AACZ;;;;;EAeA,MAAM,OAAO,UAAU,YAAY,eAAe;;GAWhD,OAAA,UAAA,GAAA,mBAOM,OAAA;IANJ,MAAK;IACJ,cAAY,MAAA,IAAA,CAAI,CAAC;IAClB,OAAM;GAGN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/packages/primitives/timeline/src/TimelineItem.js

@@ -0,0 +1,7 @@
+import TimelineItem_vue_vue_type_script_setup_true_lang_default, { timelineMarkerVariants } from "./TimelineItem.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/timeline/src/TimelineItem.vue
+var TimelineItem_default = TimelineItem_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimelineItem_default as default, timelineMarkerVariants };
+
+//# sourceMappingURL=TimelineItem.js.map

package/dist/packages/primitives/timeline/src/TimelineItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.js","names":[],"sources":["../../../../../packages/primitives/timeline/src/TimelineItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The marker, per status. Complete fills with success and takes the check;\n * current fills with primary and wears a halo — emphasis without motion, so\n * reduced-motion readers lose nothing; upcoming is a hollow dot, present but\n * not yet lived.\n */\nexport const timelineMarkerVariants = cva(\n  \"relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border\",\n  {\n    variants: {\n      status: {\n        complete: \"border-success bg-success text-success-foreground\",\n        current: \"border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted\",\n        upcoming: \"border-border bg-background text-muted-foreground\",\n      },\n    },\n    defaultVariants: { status: \"upcoming\" as TimelineStatus },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TimelineLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TIMELINE_LABELS, type TimelineStatus } from \"./Timeline.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The moment's heading. */\n    title: string;\n    /** A line under the title. */\n    description?: string;\n    /** When it happened (or will). Rendered inside a real `<time>`. */\n    timestamp?: string;\n    /** Machine-readable timestamp for `<time datetime>`. */\n    datetime?: string;\n    /** Where the moment sits relative to now. The host owns the truth. */\n    status?: TimelineStatus;\n    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */\n    labels?: LabelOverrides<TimelineLabels>;\n  }>(),\n  { status: \"upcoming\" },\n);\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS, () => props.labels);\n\nconst STATUS_WORD = {\n  complete: \"complete\",\n  current: \"current\",\n  upcoming: \"upcoming\",\n} as const;\nconst statusWord = computed(() => {\n  const bag = text.value;\n  return bag[STATUS_WORD[props.status]];\n});\n</script>\n\n<template>\n  <!-- pl-8 clears the marker column; the connector stub is drawn by this\n       item along the left edge of that gutter and retired by the wrapper for\n       the last entry, so the line stops where the story does. -->\n  <div\n    role=\"listitem\"\n    class=\"relative pb-8 pl-8 last:pb-0\"\n    :aria-current=\"status === 'current' ? 'step' : undefined\"\n  >\n    <!-- The spine sits under the marker column: left-3 is exactly the\n         h-6 marker's centre, so the line runs through every dot and retires\n         with the final entry. -->\n    <span\n      aria-hidden=\"true\"\n      class=\"loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border\"\n    />\n\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn(timelineMarkerVariants({ status }), 'absolute left-0 top-0')\"\n    >\n      <Check v-if=\"status === 'complete'\" class=\"h-3.5 w-3.5\" />\n    </span>\n\n    <div>\n      <div class=\"flex flex-wrap items-baseline gap-x-2\">\n        <p class=\"text-sm font-medium\">{{ title }}</p>\n        <time\n          v-if=\"timestamp || datetime\"\n          :datetime=\"datetime\"\n          class=\"text-small tabular text-muted-foreground\"\n          >{{ timestamp ?? datetime }}</time\n        >\n        <span class=\"sr-only\">{{ statusWord }}</span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      <!-- @slot Anything beyond title/description/timestamp — a Badge, a link out. -->\n      <div v-if=\"$slots.default\" class=\"mt-2\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/timeline/src/TimelineItem.vue.d.ts

@@ -0,0 +1,50 @@
+import { type LabelOverrides, type TimelineLabels } from "../../../labels/src/index";
+import { type TimelineStatus } from "./Timeline.vue";
+/**
+ * The marker, per status. Complete fills with success and takes the check;
+ * current fills with primary and wears a halo — emphasis without motion, so
+ * reduced-motion readers lose nothing; upcoming is a hollow dot, present but
+ * not yet lived.
+ */
+export declare const timelineMarkerVariants: (props?: ({
+    status?: "complete" | "current" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The moment's heading. */
+    title: string;
+    /** A line under the title. */
+    description?: string;
+    /** When it happened (or will). Rendered inside a real `<time>`. */
+    timestamp?: string;
+    /** Machine-readable timestamp for `<time datetime>`. */
+    datetime?: string;
+    /** Where the moment sits relative to now. The host owns the truth. */
+    status?: TimelineStatus;
+    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */
+    labels?: LabelOverrides<TimelineLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The moment's heading. */
+    title: string;
+    /** A line under the title. */
+    description?: string;
+    /** When it happened (or will). Rendered inside a real `<time>`. */
+    timestamp?: string;
+    /** Machine-readable timestamp for `<time datetime>`. */
+    datetime?: string;
+    /** Where the moment sits relative to now. The host owns the truth. */
+    status?: TimelineStatus;
+    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */
+    labels?: LabelOverrides<TimelineLabels>;
+}> & Readonly<{}>, {
+    status: TimelineStatus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TimelineItem.vue.d.ts.map

package/dist/packages/primitives/timeline/src/TimelineItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+import "./Timeline.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { Check } from "@lucide/vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/timeline/src/TimelineItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current"];
+var _hoisted_2 = { class: "flex flex-wrap items-baseline gap-x-2" };
+var _hoisted_3 = { class: "text-sm font-medium" };
+var _hoisted_4 = ["datetime"];
+var _hoisted_5 = { class: "sr-only" };
+var _hoisted_6 = {
+	key: 0,
+	class: "mt-1 text-small text-muted-foreground"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "mt-2"
+};
+/**
+* The marker, per status. Complete fills with success and takes the check;
+* current fills with primary and wears a halo — emphasis without motion, so
+* reduced-motion readers lose nothing; upcoming is a hollow dot, present but
+* not yet lived.
+*/
+var timelineMarkerVariants = cva("relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border", {
+	variants: { status: {
+		complete: "border-success bg-success text-success-foreground",
+		current: "border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted",
+		upcoming: "border-border bg-background text-muted-foreground"
+	} },
+	defaultVariants: { status: "upcoming" }
+});
+var TimelineItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TimelineItem",
+	props: {
+		title: {},
+		description: {},
+		timestamp: {},
+		datetime: {},
+		status: { default: "upcoming" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("timeline", TIMELINE_LABELS, () => props.labels);
+		const STATUS_WORD = {
+			complete: "complete",
+			current: "current",
+			upcoming: "upcoming"
+		};
+		const statusWord = computed(() => {
+			return text.value[STATUS_WORD[props.status]];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "listitem",
+				class: "relative pb-8 pl-8 last:pb-0",
+				"aria-current": __props.status === "current" ? "step" : void 0
+			}, [
+				_cache[0] || (_cache[0] = createElementVNode("span", {
+					"aria-hidden": "true",
+					class: "loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border"
+				}, null, -1)),
+				createElementVNode("span", {
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)(unref(timelineMarkerVariants)({ status: __props.status }), "absolute left-0 top-0"))
+				}, [__props.status === "complete" ? (openBlock(), createBlock(unref(Check), {
+					key: 0,
+					class: "h-3.5 w-3.5"
+				})) : createCommentVNode("", true)], 2),
+				createElementVNode("div", null, [
+					createElementVNode("div", _hoisted_2, [
+						createElementVNode("p", _hoisted_3, toDisplayString(__props.title), 1),
+						__props.timestamp || __props.datetime ? (openBlock(), createElementBlock("time", {
+							key: 0,
+							datetime: __props.datetime,
+							class: "text-small tabular text-muted-foreground"
+						}, toDisplayString(__props.timestamp ?? __props.datetime), 9, _hoisted_4)) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_5, toDisplayString(statusWord.value), 1)
+					]),
+					__props.description ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+					_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+				])
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TimelineItem_vue_vue_type_script_setup_true_lang_default as default, timelineMarkerVariants };
+
+//# sourceMappingURL=TimelineItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/timeline/src/TimelineItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/primitives/timeline/src/TimelineItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The marker, per status. Complete fills with success and takes the check;\n * current fills with primary and wears a halo — emphasis without motion, so\n * reduced-motion readers lose nothing; upcoming is a hollow dot, present but\n * not yet lived.\n */\nexport const timelineMarkerVariants = cva(\n  \"relative z-raised flex h-6 w-6 shrink-0 items-center justify-center rounded-full border\",\n  {\n    variants: {\n      status: {\n        complete: \"border-success bg-success text-success-foreground\",\n        current: \"border-primary bg-primary-muted text-primary-text ring-4 ring-primary-muted\",\n        upcoming: \"border-border bg-background text-muted-foreground\",\n      },\n    },\n    defaultVariants: { status: \"upcoming\" as TimelineStatus },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TimelineLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TIMELINE_LABELS, type TimelineStatus } from \"./Timeline.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The moment's heading. */\n    title: string;\n    /** A line under the title. */\n    description?: string;\n    /** When it happened (or will). Rendered inside a real `<time>`. */\n    timestamp?: string;\n    /** Machine-readable timestamp for `<time datetime>`. */\n    datetime?: string;\n    /** Where the moment sits relative to now. The host owns the truth. */\n    status?: TimelineStatus;\n    /** Names what the item says on its own account, as any subset of `TimelineLabels`. */\n    labels?: LabelOverrides<TimelineLabels>;\n  }>(),\n  { status: \"upcoming\" },\n);\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"timeline\", TIMELINE_LABELS, () => props.labels);\n\nconst STATUS_WORD = {\n  complete: \"complete\",\n  current: \"current\",\n  upcoming: \"upcoming\",\n} as const;\nconst statusWord = computed(() => {\n  const bag = text.value;\n  return bag[STATUS_WORD[props.status]];\n});\n</script>\n\n<template>\n  <!-- pl-8 clears the marker column; the connector stub is drawn by this\n       item along the left edge of that gutter and retired by the wrapper for\n       the last entry, so the line stops where the story does. -->\n  <div\n    role=\"listitem\"\n    class=\"relative pb-8 pl-8 last:pb-0\"\n    :aria-current=\"status === 'current' ? 'step' : undefined\"\n  >\n    <!-- The spine sits under the marker column: left-3 is exactly the\n         h-6 marker's centre, so the line runs through every dot and retires\n         with the final entry. -->\n    <span\n      aria-hidden=\"true\"\n      class=\"loom-timeline-line absolute top-6 bottom-0 left-3 w-px -translate-x-1/2 bg-border\"\n    />\n\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn(timelineMarkerVariants({ status }), 'absolute left-0 top-0')\"\n    >\n      <Check v-if=\"status === 'complete'\" class=\"h-3.5 w-3.5\" />\n    </span>\n\n    <div>\n      <div class=\"flex flex-wrap items-baseline gap-x-2\">\n        <p class=\"text-sm font-medium\">{{ title }}</p>\n        <time\n          v-if=\"timestamp || datetime\"\n          :datetime=\"datetime\"\n          class=\"text-small tabular text-muted-foreground\"\n          >{{ timestamp ?? datetime }}</time\n        >\n        <span class=\"sr-only\">{{ statusWord }}</span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      <!-- @slot Anything beyond title/description/timestamp — a Badge, a link out. -->\n      <div v-if=\"$slots.default\" class=\"mt-2\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAa,yBAAyB,IACpC,2FACA;CACE,UAAU,EACR,QAAQ;EACN,UAAU;EACV,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,QAAQ,WAA6B;AAC1D,CACF;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAmBd,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;EAEtE,MAAM,cAAc;GAClB,UAAU;GACV,SAAS;GACT,UAAU;EACZ;EACA,MAAM,aAAa,eAAe;GAEhC,OADY,KAAK,MACN,YAAY,MAAM;EAC/B,CAAC;;GAOC,OAAA,UAAA,GAAA,mBAqCM,OAAA;IApCJ,MAAK;IACL,OAAM;IACL,gBAAc,QAAA,WAAM,YAAA,SAA0B,KAAA;;IAK/C,OAAA,OAAA,OAAA,KAAA,mBAGE,QAAA;KAFA,eAAY;KACZ,OAAM;;IAGR,mBAKO,QAAA;KAJL,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,sBAAA,CAAsB,CAAA,EAAA,QAAG,QAAA,OAAM,CAAA,GAAA,uBAAA,CAAA;IAE7B,GAAA,CAAA,QAAA,WAAM,cAAnB,UAAA,GAAA,YAA0D,MAAA,KAAA,GAAA;;KAAtB,OAAM;;IAG5C,mBAgBM,OAAA,MAAA;KAfJ,mBASM,OATN,YASM;MARJ,mBAA8C,KAA9C,YAA8C,gBAAZ,QAAA,KAAK,GAAA,CAAA;MAE/B,QAAA,aAAa,QAAA,YADrB,UAAA,GAAA,mBAKC,QAAA;;OAHE,UAAU,QAAA;OACX,OAAM;MACF,GAAA,gBAAA,QAAA,aAAa,QAAA,QAAQ,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;MAE3B,mBAA6C,QAA7C,YAA6C,gBAApB,WAAA,KAAU,GAAA,CAAA;;KAE5B,QAAA,eAAT,UAAA,GAAA,mBAAyF,KAAzF,YAAyF,gBAAlB,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEvEA,KAAAA,OAAO,WAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -0,0 +1,5 @@
+export { default, TIMELINE_LABELS } from "./Timeline.vue";
+export { default as TimelineItem, timelineMarkerVariants } from "./TimelineItem.vue";
+export type { TimelineLabels } from "../../../labels/src/index";
+export type { TimelineStatus } from "./Timeline.vue";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+import { TIMELINE_LABELS } from "./Timeline.vue_vue_type_script_setup_true_lang.js";
+import Timeline_default from "./Timeline.js";
+import "./TimelineItem.vue_vue_type_script_setup_true_lang.js";
+import TimelineItem_default from "./TimelineItem.js";
+export { TIMELINE_LABELS, TimelineItem_default as TimelineItem, Timeline_default as default };

package/dist/packages/primitives/toast/src/Toast.vue.d.ts

@@ -1,6 +1,6 @@
-import { type LabelOverrides, type ToastLabels } from "@ecoma-io/loom-labels";
+import { type LabelOverrides, type ToastLabels } from "../../../labels/src/index";
 export type ToastVariant = "info" | "success" | "warning" | "destructive" | "accent";
-export type { ToastLabels } from "@ecoma-io/loom-labels";
+export type { ToastLabels } from "../../../labels/src/index";
 export { TOAST_LABELS } from "./ToastItem.vue";
 declare const _default: typeof __VLS_export;
 export default _default;