vectis-ui 0.1.0 → 0.8.0

package/dist/components/VTextarea/VTextarea.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,22 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import n from "../VTypography/VTypography.js";
-import { iconName as r, iconProps as i } from "../VIcon/iconProps.js";
+import { iconName as t, iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VIcon/VIcon.js";
+import i from "../VTypography/VTypography.js";
 import a from "../VSpinner/VSpinner.js";
 import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
 import { close as s } from "../VIcon/icons/close.js";
 import { useFieldIds as c } from "../../composables/useFieldIds.js";
-import { useIconClickHandlers as l } from "../../composables/useIconClickHandlers.js";
-import { useTextLimit as u } from "../../composables/useTextLimit.js";
-import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, normalizeClass as S, normalizeProps as C, normalizeStyle as w, openBlock as T, ref as E, renderSlot as D, toDisplayString as O, unref as k, useModel as ee, vModelText as te, withCtx as A, withDirectives as j } from "vue";
+import { useIconClickHandlers as ee } from "../../composables/useIconClickHandlers.js";
+import { useClearable as te } from "../../composables/useClearable.js";
+import { useTextLimit as l } from "../../composables/useTextLimit.js";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeProps as S, normalizeStyle as C, openBlock as w, ref as T, renderSlot as E, toDisplayString as D, unref as O, useModel as ne, vModelText as re, withCtx as k, withDirectives as A } from "vue";
 //#region src/components/VTextarea/VTextarea.vue?vue&type=script&setup=true&lang.ts
-var M = [
+var j = [
 	"data-size",
 	"data-compact",
 	"data-disabled",
 	"data-readonly"
-], N = ["data-auto-grow"], P = ["aria-label", "disabled"], F = [
+], M = ["data-auto-grow"], N = ["aria-label", "disabled"], P = [
 	"id",
 	"rows",
 	"maxlength",
@@ -23,13 +24,13 @@ var M = [
 	"readonly",
 	"aria-invalid",
 	"aria-describedby"
-], I = ["aria-label"], L = ["aria-label", "disabled"], R = {
+], F = ["aria-label"], I = ["aria-label", "disabled"], L = {
 	key: 1,
-	class: "v-textarea-meta"
-}, z = ["data-over"], B = /*@__PURE__*/ v({
+	class: "v-textarea-meta v-field-meta"
+}, R = ["data-over"], z = /*@__PURE__*/ _({
 	inheritAttrs: !1,
 	__name: "VTextarea",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ y({
 		size: { default: "md" },
 		compact: {
 			type: Boolean,
@@ -67,6 +68,10 @@ var M = [
 			type: Boolean,
 			default: !1
 		},
+		clearVisible: {
+			type: Boolean,
+			default: void 0
+		},
 		clearLabel: { default: void 0 },
 		maxlength: { default: void 0 },
 		softLimit: {
@@ -81,107 +86,119 @@ var M = [
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ b([
+	emits: /*@__PURE__*/ y([
 		"click:icon-start",
 		"click:icon-end",
 		"clear"
 	], ["update:modelValue"]),
-	setup(v, { emit: b }) {
-		let B = v, V = b, H = ee(v, "modelValue"), U = d(() => Math.max(1, Math.round(B.rows))), { attrs: W, rootClass: G, rootStyle: K, forwardedAttrs: q } = o(), J = e(), Y = d(() => B.loadingLabel ?? J.value.common.loading), X = d(() => B.clearLabel ?? J.value.common.clear), { fieldId: Z, hintId: ne, describedBy: re } = c(W, () => !!B.hint), { hasIconStartHandler: ie, hasIconEndHandler: Q } = l({
+	setup(_, { expose: y, emit: z }) {
+		let B = _, V = z, H = ne(_, "modelValue"), U = u(() => Math.max(1, Math.round(B.rows))), { attrs: W, rootClass: G, rootStyle: K, forwardedAttrs: q } = o(), J = e(), Y = u(() => B.clearLabel ?? J.value.common.clear), { fieldId: X, hintId: ie, describedBy: ae } = c(W, () => !!B.hint), { hasIconStartHandler: oe, hasIconEndHandler: se } = ee({
 			name: "VTextarea",
 			iconStartLabel: B.iconStartLabel,
 			iconEndLabel: B.iconEndLabel
-		}), $ = E(null), ae = d(() => B.clearable && H.value.length > 0 && !B.disabled && !B.readonly);
-		function oe() {
-			H.value = "", V("clear"), $.value?.focus();
-		}
-		let { counterText: se, over: ce } = u({
-			el: $,
+		}), Z = T(null), { showClear: Q, onClear: $ } = te({
+			clearable: () => B.clearable,
+			clearVisible: () => B.clearVisible,
+			disabled: () => B.disabled,
+			readonly: () => B.readonly,
+			text: () => H.value,
+			controlEl: Z,
+			onCleared: () => {
+				H.value = "", V("clear");
+			}
+		}), { counterText: ce, over: le } = l({
+			el: Z,
 			text: () => H.value,
 			maxlength: () => B.maxlength,
 			softLimit: () => B.softLimit
 		});
-		return (e, o) => (T(), m("div", {
-			class: S(["v-textarea v-control", k(G)]),
-			style: w(k(K)),
-			"data-size": v.size,
-			"data-compact": v.compact ? "" : void 0,
-			"data-disabled": v.disabled ? "" : void 0,
-			"data-readonly": v.readonly ? "" : void 0
+		return y({
+			focus: (e) => Z.value?.focus(e),
+			select: () => Z.value?.select(),
+			el: Z
+		}), (e, o) => (w(), p("div", {
+			class: x(["v-textarea v-control", O(G)]),
+			style: C(O(K)),
+			"data-size": _.size,
+			"data-compact": _.compact ? "" : void 0,
+			"data-disabled": _.disabled ? "" : void 0,
+			"data-readonly": _.readonly ? "" : void 0
 		}, [
-			v.label ? (T(), f(n, {
+			_.label ? (w(), d(i, {
 				key: 0,
 				as: "label",
 				variant: "label",
 				class: "v-textarea-label",
-				for: k(Z)
+				for: O(X)
 			}, {
-				default: A(() => [g(O(v.label), 1)]),
+				default: k(() => [h(D(_.label), 1)]),
 				_: 1
-			}, 8, ["for"])) : p("", !0),
-			h("div", {
+			}, 8, ["for"])) : f("", !0),
+			m("div", {
 				class: "v-textarea-field",
-				style: w({ "--textarea-rows": U.value }),
-				"data-auto-grow": v.autoGrow ? "" : void 0
+				style: C({ "--textarea-rows": U.value }),
+				"data-auto-grow": _.autoGrow ? "" : void 0
 			}, [
-				D(e.$slots, "start", {}, () => [v.iconStart && k(ie) ? (T(), m("button", {
+				_.iconStart && O(oe) ? (w(), p("button", {
 					key: 0,
 					type: "button",
-					class: "v-textarea-action",
-					"aria-label": v.iconStartLabel ?? k(r)(v.iconStart),
-					disabled: v.disabled,
+					class: "v-textarea-action v-field-action",
+					"aria-label": _.iconStartLabel ?? O(t)(_.iconStart),
+					disabled: _.disabled,
 					onClick: o[0] ||= (e) => V("click:icon-start", e)
-				}, [_(t, C(y(k(i)(v.iconStart))), null, 16)], 8, P)) : v.iconStart ? (T(), f(t, C(x({ key: 1 }, k(i)(v.iconStart))), null, 16)) : p("", !0)]),
-				j(h("textarea", x(k(q), {
-					id: k(Z),
+				}, [g(r, S(v(O(n)(_.iconStart))), null, 16)], 8, N)) : _.iconStart ? (w(), d(r, S(b({ key: 1 }, O(n)(_.iconStart))), null, 16)) : f("", !0),
+				E(e.$slots, "start"),
+				A(m("textarea", b(O(q), {
+					id: O(X),
 					ref_key: "controlEl",
-					ref: $,
+					ref: Z,
 					"onUpdate:modelValue": o[1] ||= (e) => H.value = e,
 					class: "v-textarea-control",
 					rows: U.value,
-					maxlength: v.softLimit ? void 0 : v.maxlength,
-					disabled: v.disabled,
-					readonly: v.readonly || void 0,
-					"aria-invalid": v.invalid || void 0,
-					"aria-describedby": k(re)
-				}), null, 16, F), [[te, H.value]]),
-				ae.value ? (T(), m("button", {
-					key: 0,
+					maxlength: _.softLimit ? void 0 : _.maxlength,
+					disabled: _.disabled,
+					readonly: _.readonly || void 0,
+					"aria-invalid": _.invalid || void 0,
+					"aria-describedby": O(ae)
+				}), null, 16, P), [[re, H.value]]),
+				E(e.$slots, "value-end"),
+				O(Q) ? (w(), p("button", {
+					key: 2,
 					type: "button",
-					class: "v-textarea-action v-textarea-clear",
-					"aria-label": X.value,
-					onClick: oe
-				}, [_(t, { name: k(s) }, null, 8, ["name"])], 8, I)) : p("", !0),
-				v.loading ? (T(), f(a, {
-					key: 1,
-					label: Y.value
-				}, null, 8, ["label"])) : D(e.$slots, "end", {}, () => [v.iconEnd && k(Q) ? (T(), m("button", {
+					class: "v-textarea-action v-field-action v-textarea-clear",
+					"aria-label": Y.value,
+					onClick: o[2] ||= (...e) => O($) && O($)(...e)
+				}, [g(r, { name: O(s) }, null, 8, ["name"])], 8, F)) : f("", !0),
+				_.loading ? (w(), d(a, {
+					key: 3,
+					label: _.loadingLabel
+				}, null, 8, ["label"])) : E(e.$slots, "end", {}, () => [_.iconEnd && O(se) ? (w(), p("button", {
 					key: 0,
 					type: "button",
-					class: "v-textarea-action",
-					"aria-label": v.iconEndLabel ?? k(r)(v.iconEnd),
-					disabled: v.disabled,
-					onClick: o[2] ||= (e) => V("click:icon-end", e)
-				}, [_(t, C(y(k(i)(v.iconEnd))), null, 16)], 8, L)) : v.iconEnd ? (T(), f(t, C(x({ key: 1 }, k(i)(v.iconEnd))), null, 16)) : p("", !0)], void 0, 2)
-			], 12, N),
-			v.hint || v.counter ? (T(), m("div", R, [v.hint ? (T(), f(n, {
+					class: "v-textarea-action v-field-action",
+					"aria-label": _.iconEndLabel ?? O(t)(_.iconEnd),
+					disabled: _.disabled,
+					onClick: o[3] ||= (e) => V("click:icon-end", e)
+				}, [g(r, S(v(O(n)(_.iconEnd))), null, 16)], 8, I)) : _.iconEnd ? (w(), d(r, S(b({ key: 1 }, O(n)(_.iconEnd))), null, 16)) : f("", !0)], void 0, 4)
+			], 12, M),
+			_.hint || _.counter ? (w(), p("div", L, [_.hint ? (w(), d(i, {
 				key: 0,
-				id: k(ne),
+				id: O(ie),
 				variant: "caption",
 				tone: "muted",
 				class: "v-textarea-hint"
 			}, {
-				default: A(() => [g(O(v.hint), 1)]),
+				default: k(() => [h(D(_.hint), 1)]),
 				_: 1
-			}, 8, ["id"])) : p("", !0), v.counter ? (T(), m("span", {
+			}, 8, ["id"])) : f("", !0), _.counter ? (w(), p("span", {
 				key: 1,
-				class: "v-textarea-counter",
-				"data-over": k(ce) ? "" : void 0
-			}, O(k(se)), 9, z)) : p("", !0)])) : p("", !0)
-		], 14, M));
+				class: "v-textarea-counter v-field-counter",
+				"data-over": O(le) ? "" : void 0
+			}, D(O(ce)), 9, R)) : f("", !0)])) : f("", !0)
+		], 14, j));
 	}
 });
 //#endregion
-export { B as default };
+export { z as default };
 
 //# sourceMappingURL=VTextarea.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VTextarea/VTextarea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTextarea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTextarea/VTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A field for text running over several lines, with the same label, hint, icons,\n * counter, loading state and clear button as VInput, arranged around a real\n * `<textarea>`.\n *\n * Two things differ from its single-line counterpart. The field can grow with what\n * is typed into it, and that is pure CSS — a browser without `field-sizing` simply\n * keeps a fixed height with its usual scrollbar. And the counter is placed UNDER the\n * field rather than inside it, where several lines of text would run into it.\n *\n * As in VInput, the attributes it is given are split — `class` and `style` stay\n * outside, the rest goes to the textarea — validation stays the browser's, and the\n * only behavioural JavaScript is the v-model and the clear button, which has to hand\n * focus back to the field it just emptied.\n */\nimport { computed, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\ninterface TextareaProps {\n  /** The size of the field, which sets its padding, its type scale and its icons. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * Takes 4px off the field by tightening its padding, leaving the number of lines,\n   * the type and the icons alone.\n   */\n  compact?: boolean\n  /**\n   * How many lines of text the field shows — the native `rows` attribute, which is\n   * what gives the field its height. Anything under 1 is raised to 1, and at 1 the\n   * field is exactly as tall as a VInput of the same size.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height\n   * `rows` gives it — which stays its starting height. It is pure CSS; where the\n   * browser does not support it, the field simply behaves like an ordinary textarea.\n   */\n  autoGrow?: boolean\n  /**\n   * Marks the field as invalid whatever the browser thinks — the route for a rule\n   * only the server can check.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the text without allowing it to be changed. The field can still be focused\n   * and copied from, and the clear button is hidden.\n   */\n  readonly?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, tied to the textarea for assistive technology so\n   * that it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached — in which case\n   * it needs `iconStartLabel`. The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field goes\n   * into error instead of silently refusing the keystrokes. It is reported through\n   * the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, under the field: \"12/80\" against a limit, or just\n   * \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n  size: 'md',\n  compact: false,\n  rows: 5,\n  autoGrow: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Content at the start of the field, which replaces `iconStart`. */\n  start?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while the\n   * field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\nconst model = defineModel<string>({ default: '' })\n\n// HTML wants `rows` to be a positive integer, and it drops anything else on the floor:\n// a 0, a negative or a fractional value would leave the browser falling back to its own\n// default of two rows, which is neither what was asked for nor this component's default.\n// Rounding and flooring here is what keeps the prop's contract out of the parser's hands.\nconst resolvedRows = computed(() => Math.max(1, Math.round(props.rows)))\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the\n// field; every other attribute goes to the textarea, where it does something.\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedLoadingLabel = computed(() => props.loadingLabel ?? m.value.common.loading)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VTextarea',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLTextAreaElement | null>(null)\n\nconst showClear = computed(\n  () => props.clearable && model.value.length > 0 && !props.disabled && !props.readonly,\n)\n\n// @a11y @core — moving the focus back is the accessibility half of this handler.\n// The cross vanishes the instant it empties the field, so without that call focus\n// falls back to the page body and a keyboard user loses their place in the form.\nfunction onClear() {\n  model.value = ''\n  emit('clear')\n  controlEl.value?.focus()\n}\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => model.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-textarea v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-textarea-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div\n      class=\"v-textarea-field\"\n      :style=\"{ '--textarea-rows': resolvedRows }\"\n      :data-auto-grow=\"autoGrow ? '' : undefined\"\n    >\n      <slot name=\"start\">\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-textarea-action\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-start', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconStart)\" />\n        </button>\n        <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n\n      <textarea\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-textarea-control\"\n        :rows=\"resolvedRows\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-textarea-action v-textarea-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"resolvedLoadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-textarea-action\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-textarea-meta\">\n      <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-textarea-hint\">\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" class=\"v-textarea-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-textarea {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-textarea-label and .v-textarea-hint classes remain as hooks: a consumer\n     overrides through them, and the disabled state below reaches them that way. */\n\n  .v-textarea-meta {\n    display: flex;\n    align-items: baseline;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The counter keeps its own local styling rather than going through VTypography:\n     figures of equal width, so the number does not shift as it counts, and a colour\n     that marks the overflow — neither of which is a typographic role. */\n  .v-textarea-counter {\n    margin-inline-start: auto;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-textarea-counter[data-over] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* This is the box that carries the border, the background, the focus ring and the\n     resize handle — which is why it also hides its overflow, `resize` having no\n     effect on a box whose overflow is visible. `--field-border-color` is the single\n     source of truth for its colour, and the hover, error and disabled states do\n     nothing but redefine it. */\n  .v-textarea-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    /*\n     * Nothing here restates the size scale: the `--control-*` variables are inherited\n     * from the v-control root (styles/control-size.css), the icon context included.\n     *\n     * The field carries NO height of its own: it is the `rows` attribute on the\n     * textarea that sets one, and the field is simply as tall as the control it wraps.\n     * That is what makes dragging the resize handle behave like a bare textarea — the\n     * field shrinks and the control scrolls — instead of stopping at a CSS floor.\n     */\n\n    /* The leading is named ONCE and feeds two things that have to agree by\n       construction: the field's own `line-height`, and the first line box below,\n       against which everything sitting beside the text is offset. */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /* The height of the FIRST line box, the row the icons and the buttons align on.\n\n       TRAP — it is DERIVED and must never be written as `1lh`. The `lh` unit resolves\n       against the element the property is USED on, and the children do not share the\n       field's font: an icon carries `--vectis-icon-size` (20px against the field's\n       14px), so `1lh` measured a 30px line there and dropped every icon 4.5px below\n       the text and the buttons it is supposed to line up with. The buttons happened to\n       be right only because the reset gives them `font: inherit`. */\n    --textarea-line: calc(var(--control-font-size) * var(--textarea-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--control-gap);\n    padding-inline: var(--control-padding-inline-field);\n    /* Half of what is left of the control height once its two 1px borders and one line\n       box are taken out — so at `rows=\"1\"` the field is exactly a VInput of the same\n       size, and every further row adds precisely one line box.\n\n       It reads --control-height and not --control-height-base, which is what carries\n       the density here: with no height of its own left to shrink, the padding is the\n       only lever `compact` has, and 2px off each edge is the -4px the whole scale\n       promises. */\n    padding-block: calc((var(--control-height) - 2px - var(--textarea-line)) / 2);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    /* Text running over several lines takes the body line height. The `control` type\n       role, whose lines are set tight against one another, only makes sense for a\n       single-line label. */\n    line-height: var(--textarea-leading);\n    resize: vertical;\n    overflow: hidden;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-textarea-control {\n    flex: 1;\n    min-width: 0;\n    align-self: stretch;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n    resize: none; /* the resize handle belongs to the field, so there is only one */\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The icons and buttons align with the FIRST line of text rather than with the\n     middle of a field whose height varies: half the difference between the line box and\n     the element centres it there. On a single line that comes out identical to the\n     centring VInput gets from its fixed height, which is the point.\n\n     The measure is `--textarea-line` and never `1lh` — see the trap where it is\n     declared: `lh` would be resolved against each child's own font, which differs from\n     the field's.\n\n     TRAP — the margin is SYMMETRIC, the VToast rule. It looks redundant under\n     `align-items: flex-start`, where only the start side moves anything, but the end\n     side is what keeps the item's OUTER box down to one line box. Left off, a clear\n     cross (24px against a 21px line) would be the tallest thing in the flex line and\n     the field would be 1.5px taller than the rows asked for — 2px at `lg` — which is\n     exactly the gap that stops `rows=\"1\"` from being a VInput. */\n  .v-textarea-field > .v-icon,\n  .v-textarea-field > .v-spinner {\n    margin-block: calc((var(--textarea-line) - var(--vectis-icon-size)) / 2);\n  }\n\n  .v-textarea-field > .v-textarea-action {\n    margin-block: calc((var(--textarea-line) - var(--control-action-size)) / 2);\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-textarea-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-textarea-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What belongs\n     to a read-only field is its BASE colour alone. */\n  .v-textarea[data-readonly] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-textarea-field:hover:not(:has(.v-textarea-control:focus)):not(\n      :has(\n        .v-textarea-control:disabled,\n        .v-textarea-control:user-invalid,\n        .v-textarea-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when one\n     of the field's own buttons takes keyboard focus, only that button's outline\n     lights up: two indicators at once would be unreadable. And it is `:focus` rather\n     than `:focus-visible`, because a text field shows its focus even when it was\n     reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-textarea-field:has(.v-textarea-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND the\n     focus ring both turn red without either being restated. */\n  .v-textarea-field:has(.v-textarea-control:user-invalid),\n  .v-textarea-field:has(.v-textarea-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* The field's own buttons — the clear cross, a clickable icon — go from muted grey\n     to full strength on hover, and take VButton's radius so their focus ring has the\n     same rounded corners as everything else.\n\n     The negative margin is DERIVED and never written as a number: it is exactly half\n     the difference between the icon and the wider box holding it. Subtracting it\n     cancels that inset, so the glyph lands precisely where a decorative icon would\n     have — against the field's padding, one --control-gap from its neighbour. */\n  .v-textarea-action {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text-muted);\n    border-radius: var(--vectis-radius-interactive);\n    cursor: pointer;\n    flex: none;\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-textarea-action:hover:not(:disabled) {\n    color: var(--vectis-color-text);\n  }\n\n  .v-textarea-action:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-textarea[data-disabled] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n    resize: none;\n  }\n\n  .v-textarea[data-disabled] .v-textarea-label,\n  .v-textarea[data-disabled] .v-textarea-hint,\n  .v-textarea[data-disabled] .v-textarea-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-textarea[data-disabled] .v-textarea-action,\n  .v-textarea[data-disabled] .v-textarea-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-textarea-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /* Growing with the content is pure CSS: `field-sizing` makes the textarea's height\n     follow what is typed, and the field around it follows in turn. The resize handle\n     goes, there being nothing left to resize by hand. A browser without support keeps\n     the fixed height and its scrollbar, which is the intended fallback. */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /* `field-sizing: content` sizes the control to what has been typed and ignores `rows`\n     outright, so an auto-growing field would open one line tall whatever the prop said.\n     The floor hands the STARTING height back to `rows` and leaves the growing to the\n     browser. It is scoped to this branch and must not be lifted onto the control at\n     large: a floor there would stop the control shrinking with the resize handle, and\n     the field, which hides its overflow, would clip it instead of scrolling. */\n  .v-textarea-field[data-auto-grow] .v-textarea-control {\n    field-sizing: content;\n    min-block-size: calc(var(--textarea-rows) * var(--textarea-line));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-textarea-field,\n    .v-textarea-action {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VTextarea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTextarea/VTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A multi-line field, with the same label, hint, icons, counter, loading state and clear\n * cross as VInput, arranged around a real `<textarea>`.\n *\n * Two things differ. It grows with what is typed, which is pure CSS (`field-sizing`) — a\n * browser without it keeps a fixed height and its usual scrollbar. And the counter goes\n * UNDER the field rather than inside it, where several lines of text would run into it.\n *\n * As in VInput: the attrs split, validation stays the browser's, and the only behavioural JS\n * is the v-model and the clear cross, which hands focus back to the field it just emptied.\n */\nimport { computed, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useClearable } from '../../composables/useClearable'\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of one line: 32, 40 or 48 pixels. */\nexport type TextareaSize = 'sm' | 'md' | 'lg'\n\ninterface TextareaProps {\n  /** The size of the field, which sets its padding, its type scale and its icons. */\n  size?: TextareaSize\n  /**\n   * Takes 4px off the field by tightening its padding, leaving the number of lines,\n   * the type and the icons alone.\n   */\n  compact?: boolean\n  /**\n   * How many lines of text the field shows — the native `rows` attribute, which is\n   * what gives the field its height. Anything under 1 is raised to 1, and at 1 the\n   * field is exactly as tall as a VInput of the same size.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height\n   * `rows` gives it — which stays its starting height. It is pure CSS; where the\n   * browser does not support it, the field simply behaves like an ordinary textarea.\n   */\n  autoGrow?: boolean\n  /**\n   * Marks the field as invalid whatever the browser thinks — the route for a rule\n   * only the server can check.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the text without allowing it to be changed. The field can still be focused\n   * and copied from, and the clear button is hidden.\n   */\n  readonly?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, tied to the textarea for assistive technology so\n   * that it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached — in which case\n   * it needs `iconStartLabel`. The `#start` slot is rendered after it, so the two can\n   * be given together.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out from its\n   * own content — a read-only field included. It is the same escape hatch VInput offers,\n   * for the same reason: a component built on top of this one may hold what there is to\n   * clear somewhere other than the text.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field goes\n   * into error instead of silently refusing the keystrokes. It is reported through\n   * the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, under the field: \"12/80\" against a limit, or just\n   * \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n  size: 'md',\n  compact: false,\n  rows: 5,\n  autoGrow: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its\n   * place, as in VInput.\n   */\n  start?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while the\n   * field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the field's own — the clear cross\n   * and the end icon. It is the slot for something that acts on the VALUE rather than on\n   * the field, and it is VInput's slot of the same name.\n   */\n  'value-end'?(): unknown\n}>()\n\n/** The text in the field, empty to begin with. */\nconst model = defineModel<string>({ default: '' })\n\n// HTML wants `rows` to be a positive integer, and it drops anything else on the floor:\n// a 0, a negative or a fractional value would leave the browser falling back to its own\n// default of two rows, which is neither what was asked for nor this component's default.\n// Rounding and flooring here is what keeps the prop's contract out of the parser's hands.\nconst resolvedRows = computed(() => Math.max(1, Math.round(props.rows)))\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the\n// field; every other attribute goes to the textarea, where it does something.\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VTextarea',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLTextAreaElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => props.disabled,\n  readonly: () => props.readonly,\n  text: () => model.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => model.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\ndefineExpose({\n  /** Moves the focus to the real textarea. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field. */\n  select: () => controlEl.value?.select(),\n  /** The real `<textarea>`, for what neither of the two above covers. */\n  el: controlEl,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-textarea v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-textarea-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div\n      class=\"v-textarea-field\"\n      :style=\"{ '--textarea-rows': resolvedRows }\"\n      :data-auto-grow=\"autoGrow ? '' : undefined\"\n    >\n      <!-- The start icon is rendered BEFORE the slot, where the end icon is the slot's own\n           fallback. The asymmetry is VInput's, mirrored here so the two fields answer the\n           same way: what a composed field puts in that zone is OTHER content beside the\n           icon, not another way of drawing it. -->\n      <button\n        v-if=\"iconStart && hasIconStartHandler\"\n        type=\"button\"\n        class=\"v-textarea-action v-field-action\"\n        :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n        :disabled=\"disabled\"\n        @click=\"emit('click:icon-start', $event)\"\n      >\n        <VIcon v-bind=\"iconProps(iconStart)\" />\n      </button>\n      <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      <slot name=\"start\" />\n\n      <textarea\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-textarea-control\"\n        :rows=\"resolvedRows\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <slot name=\"value-end\" />\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-textarea-action v-field-action v-textarea-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"loadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-textarea-action v-field-action\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-textarea-meta v-field-meta\">\n      <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-textarea-hint\">\n        {{ hint }}\n      </VTypography>\n      <span\n        v-if=\"counter\"\n        class=\"v-textarea-counter v-field-counter\"\n        :data-over=\"over ? '' : undefined\"\n      >\n        {{ counterText }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-textarea {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-textarea-label and .v-textarea-hint classes remain as hooks: a consumer\n     overrides through them, and the disabled state below reaches them that way. */\n\n  /* This is the box that carries the border, the background, the focus ring and the\n     resize handle — which is why it also hides its overflow, `resize` having no\n     effect on a box whose overflow is visible. `--field-border-color` is the single\n     source of truth for its colour, and the hover, error and disabled states do\n     nothing but redefine it. */\n  .v-textarea-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    /*\n     * Nothing here restates the size scale: the `--control-*` variables are inherited\n     * from the v-control root (styles/control-size.css), the icon context included.\n     *\n     * The field carries NO height of its own: it is the `rows` attribute on the\n     * textarea that sets one, and the field is simply as tall as the control it wraps.\n     * That is what makes dragging the resize handle behave like a bare textarea — the\n     * field shrinks and the control scrolls — instead of stopping at a CSS floor.\n     */\n\n    /* The leading is named ONCE and feeds two things that have to agree by\n       construction: the field's own `line-height`, and the first line box below,\n       against which everything sitting beside the text is offset. */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /* The height of the FIRST line box, the row the icons and the buttons align on.\n\n       TRAP — it is DERIVED and must never be written as `1lh`. The `lh` unit resolves\n       against the element the property is USED on, and the children do not share the\n       field's font: an icon carries `--vectis-icon-size` (20px against the field's\n       14px), so `1lh` measured a 30px line there and dropped every icon 4.5px below\n       the text and the buttons it is supposed to line up with. The buttons happened to\n       be right only because the reset gives them `font: inherit`. */\n    --textarea-line: calc(var(--control-font-size) * var(--textarea-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--control-gap);\n    padding-inline: var(--control-padding-inline-field);\n    /* Half of what is left of the control height once its two 1px borders and one line\n       box are taken out — so at `rows=\"1\"` the field is exactly a VInput of the same\n       size, and every further row adds precisely one line box.\n\n       It reads --control-height and not --control-height-base, which is what carries\n       the density here: with no height of its own left to shrink, the padding is the\n       only lever `compact` has, and 2px off each edge is the -4px the whole scale\n       promises. */\n    padding-block: calc((var(--control-height) - 2px - var(--textarea-line)) / 2);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    /* TRAP — the cap is what carries the VInput identity above into the OTHER row counts,\n       and it has to stay derived from --control-height. A browser scales down any radius it\n       cannot fit, so on a one-row field a pill override is already painted as half the\n       control height; min() applies that same reduction to a field that is taller. Written\n       bare, the identical override paints half of a FIVE-row box instead: 60px corners on a\n       120px field, an ellipse sitting beside buttons that kept 20px, and the same again on\n       every drag of the resize handle. At the shipped 6px it resolves to 6px on every size,\n       compact included, so nothing at the default value can see this line go — only the\n       PillRadius play function can. */\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-size: var(--control-font-size);\n    /* Text running over several lines takes the body line height. The `control` type\n       role, whose lines are set tight against one another, only makes sense for a\n       single-line label. */\n    line-height: var(--textarea-leading);\n    resize: vertical;\n    overflow: hidden;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-textarea-control {\n    flex: 1;\n    min-width: 0;\n    align-self: stretch;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n    resize: none; /* the resize handle belongs to the field, so there is only one */\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The icons and buttons align with the FIRST line of text rather than with the\n     middle of a field whose height varies: half the difference between the line box and\n     the element centres it there. On a single line that comes out identical to the\n     centring VInput gets from its fixed height, which is the point.\n\n     The measure is `--textarea-line` and never `1lh` — see the trap where it is\n     declared: `lh` would be resolved against each child's own font, which differs from\n     the field's.\n\n     TRAP — the margin is SYMMETRIC, the VToast rule. It looks redundant under\n     `align-items: flex-start`, where only the start side moves anything, but the end\n     side is what keeps the item's OUTER box down to one line box. Left off, a clear\n     cross (24px against a 21px line) would be the tallest thing in the flex line and\n     the field would be 1.5px taller than the rows asked for — 2px at `lg` — which is\n     exactly the gap that stops `rows=\"1\"` from being a VInput. */\n  .v-textarea-field > .v-icon,\n  .v-textarea-field > .v-spinner {\n    margin-block: calc((var(--textarea-line) - var(--vectis-icon-size)) / 2);\n  }\n\n  .v-textarea-field > .v-textarea-action {\n    margin-block: calc((var(--textarea-line) - var(--control-action-size)) / 2);\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-textarea-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-textarea-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What belongs\n     to a read-only field is its BASE colour alone. */\n  .v-textarea[data-readonly] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-textarea-field:hover:not(:has(.v-textarea-control:focus)):not(\n      :has(\n        .v-textarea-control:disabled,\n        .v-textarea-control:user-invalid,\n        .v-textarea-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when one\n     of the field's own buttons takes keyboard focus, only that button's outline\n     lights up: two indicators at once would be unreadable. And it is `:focus` rather\n     than `:focus-visible`, because a text field shows its focus even when it was\n     reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-textarea-field:has(.v-textarea-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND the\n     focus ring both turn red without either being restated. */\n  .v-textarea-field:has(.v-textarea-control:user-invalid),\n  .v-textarea-field:has(.v-textarea-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-textarea[data-disabled] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n    resize: none;\n  }\n\n  .v-textarea[data-disabled] .v-textarea-label,\n  .v-textarea[data-disabled] .v-textarea-hint,\n  .v-textarea[data-disabled] .v-textarea-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-textarea[data-disabled] .v-textarea-action,\n  .v-textarea[data-disabled] .v-textarea-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-textarea-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /* Growing with the content is pure CSS: `field-sizing` makes the textarea's height\n     follow what is typed, and the field around it follows in turn. The resize handle\n     goes, there being nothing left to resize by hand. A browser without support keeps\n     the fixed height and its scrollbar, which is the intended fallback. */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /* `field-sizing: content` sizes the control to what has been typed and ignores `rows`\n     outright, so an auto-growing field would open one line tall whatever the prop said.\n     The floor hands the STARTING height back to `rows` and leaves the growing to the\n     browser. It is scoped to this branch and must not be lifted onto the control at\n     large: a floor there would stop the control shrinking with the resize handle, and\n     the field, which hides its overflow, would clip it instead of scrolling. */\n  .v-textarea-field[data-auto-grow] .v-textarea-control {\n    field-sizing: content;\n    min-block-size: calc(var(--textarea-rows) * var(--textarea-line));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-textarea-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VTimeInput/VTimeInput.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-time-input{anchor-scope:--time-input-anchor;width:100%;font-family:var(--vectis-text-family);display:block}.v-time-input-row{align-items:stretch;gap:var(--vectis-space-2);display:flex}.v-time-input-control{anchor-name:--time-input-anchor;cursor:pointer;flex:1;min-inline-size:0}.v-time-input[data-mode=input] .v-time-input-control{cursor:text}.v-time-input[data-mode=input] .v-input-control{font-variant-numeric:tabular-nums}.v-time-input-meridiem{flex:none;align-self:center}.v-time-input-row:has(.v-input-label) .v-time-input-meridiem{margin-block-start:calc(var(--vectis-text-label-size) * var(--vectis-text-label-leading) + var(--vectis-space-1))}.v-time-input-row:has(.v-input-hint) .v-time-input-meridiem{margin-block-end:calc(var(--vectis-text-caption-size) * var(--vectis-text-caption-leading) + var(--vectis-space-1))}.v-popover-panel.v-time-input-panel{width:max-content;padding:var(--vectis-space-3);color:var(--vectis-color-text);flex-direction:column;display:flex}.v-time-input-list{min-inline-size:anchor-size(width);max-block-size:var(--vectis-control-size-time-input-list-max-block);overflow:auto}.v-time-input-option{width:100%;min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);border-radius:var(--vectis-radius-sm);color:var(--vectis-color-text);font-family:inherit;font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);font-variant-numeric:tabular-nums;text-align:start;cursor:pointer;background:0 0;border:none;align-items:center;display:flex}.v-time-input-option:hover{background:var(--vectis-color-surface-muted)}.v-time-input-option:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-time-input-option[aria-selected=true]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-time-input-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-2);display:flex}}
+@layer vectis.components{.v-time-input{anchor-scope:--time-input-anchor;width:100%;font-family:var(--vectis-text-family);display:block}.v-time-input-control{cursor:pointer}.v-time-input-control .v-input-field{anchor-name:--time-input-anchor}.v-time-input[data-mode=input] .v-time-input-control{cursor:text}.v-time-input[data-mode=input] .v-input-control{font-variant-numeric:tabular-nums}.v-field-action.v-time-input-meridiem{inline-size:auto;min-inline-size:var(--control-action-size);padding-inline:calc((var(--control-action-size) - var(--vectis-icon-size)) / 2);font:inherit}.v-separator[data-orientation=vertical].v-time-input-divider{block-size:var(--control-action-size);align-self:center}.v-popover-panel.v-time-input-panel{width:max-content;color:var(--vectis-color-text);padding:0}.v-time-input[data-mode=list] .v-combobox-panel{font-variant-numeric:tabular-nums}}

package/dist/components/VTimeInput/VTimeInput.d.ts

@@ -1,24 +1,11 @@
 import { IconSource } from '../VIcon/types.js';
 import { TimePickerFormat } from '../VTimePicker/VTimePicker.js';
-/**
- * A field for choosing a time, with an optional panel below it. The shell is the same one
- * VDateInput uses: the panel is opened from code, which is what lets the focus be moved
- * into it, and closed when the focus leaves the component or Escape is pressed.
- *
- * The field comes in three forms. It can be TYPED into, hours and minutes behind a mask,
- * optionally with a picker beside it. It can be read-only, the picker then being the only way
- * in. Or it can offer a LIST of times at a fixed interval, which suits booking a slot far
- * better than pointing at a clock face.
- *
- * The two panels commit differently, and deliberately so. The PICKER works on a draft that
- * only OK writes to the value — Cancel, Escape and the focus leaving all discard it —
- * because dragging a hand across a clock passes over dozens of times nobody meant. The
- * LIST writes immediately: choosing a row there is one deliberate gesture.
- *
- * Whatever is displayed, the value itself is always a 24-hour time.
- */
-export type TimeInputMode = 'readonly' | 'input' | 'list';
-type Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+import { TimePickerAllowed } from '../VTimePicker/limits.js';
+export type TimeInputMode = 'picker' | 'input' | 'list';
+/** Where the panel opens relative to the field, whether it holds the clock or the list. */
+export type TimeInputPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+/** The height of the field: 32, 40 or 48 pixels. */
+export type TimeInputSize = 'sm' | 'md' | 'lg';
 interface TimeInputProps {
     /**
      * Whether times are shown on a 12- or a 24-hour clock. Left out, the reader's language
@@ -26,19 +13,17 @@ interface TimeInputProps {
      */
     format?: TimePickerFormat;
     /**
-     * Which form the field takes: one that can be TYPED into, a read-only one where the
-     * picker is the only way in — so the picker is forced on there — or a LIST of times at a
-     * fixed interval, where a picker would make no sense.
+     * Which form the field takes: one that can be TYPED into, a `picker` one where the
+     * clock is the only way in — so the picker is forced on there — or a searchable LIST of
+     * times at a fixed interval, where a picker would make no sense.
      */
     mode?: TimeInputMode;
     /**
      * Offers the picker beside a field one can type into: an icon at the end of the field,
      * and a panel it opens.
      *
-     * It is left undefined by default rather than set to off, which is what distinguishes
-     * "not given" from an explicit refusal — and therefore what allows warning only the
-     * consumer who really asked to remove the picker from a read-only field, where it is the
-     * only way in.
+     * It means nothing in `picker` mode, where the clock is already the only way to choose,
+     * nor in `list` mode, which has a panel of its own — VDateInput reads it the same way.
      */
     showPicker?: boolean;
     /**
@@ -46,6 +31,21 @@ interface TimeInputProps {
      * arrow keys and to the rows of the list.
      */
     minuteStep?: number;
+    /**
+     * The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`.
+     * The picker and the list both LEAVE OUT what it rules out, and a time typed past it
+     * makes the field invalid.
+     */
+    min?: string;
+    /** The latest time that can be chosen, inclusive, written like `min`. */
+    max?: string;
+    /**
+     * Which hours can be chosen: the list of them, or a rule answering for one. The hour
+     * handed to a rule is always the 24-hour one, whichever clock is on display.
+     */
+    allowedHours?: TimePickerAllowed;
+    /** Which minutes can be chosen: the list of them, or a rule answering for one. */
+    allowedMinutes?: TimePickerAllowed;
     /**
      * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES
      * PRECEDENCE over the design system's global locale and falls back to it — which is why
@@ -60,25 +60,87 @@ interface TimeInputProps {
     /** What the field says while empty. */
     placeholder?: string;
     /** The height of the field: 32, 40 or 48 pixels. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: TimeInputSize;
     /** Takes 4px off the height. */
     compact?: boolean;
     /** Makes the field unusable, greyed out through the colour tokens. */
     disabled?: boolean;
+    /**
+     * Shows the time without letting it be changed: nothing can be typed, there is no
+     * clock and no clear cross. The field stays focusable and can be copied from, which
+     * is what separates it from `disabled`, and it is a different question from `mode`,
+     * which says how a field that CAN be changed is filled in.
+     */
+    readonly?: boolean;
     /** Marks the field as invalid — for a rule of your own. */
     invalid?: boolean;
+    /**
+     * An icon inside the field, at the start. It is decorative by default and becomes a
+     * real button as soon as a `@click:icon-start` listener is attached, in which case it
+     * needs `iconStartLabel`.
+     */
+    iconStart?: IconSource;
+    /** What the start icon does, in words, once it is clickable. */
+    iconStartLabel?: string;
+    /**
+     * What the clock button does, in words. It names the button `pickerIcon` renders,
+     * and falls back to the design system dictionary.
+     */
+    pickerIconLabel?: string;
+    /**
+     * Shows a spinner at the end of the field, in place of the clock icon. It says that
+     * something is being loaded and changes nothing else: the field can still be typed
+     * into and the panel still opens.
+     */
+    loading?: boolean;
+    /**
+     * What screen readers announce while the spinner turns. It falls back to the design
+     * system dictionary.
+     */
+    loadingLabel?: string;
     /** Offers a cross that empties the value, shown before the end icon. */
     clearable?: boolean;
+    /** What that cross does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
     /**
      * The icon that opens the PICKER, at the end of the field. It has no effect on the list
      * form, whose chevron follows the combobox convention. The clear cross appears to its
      * left rather than in its place.
      */
     pickerIcon?: IconSource;
-    /** Where the panel opens relative to the field. */
-    placement?: Placement;
+    /** Where the panel opens relative to the field, whether it holds the clock or the list. */
+    placement?: TimeInputPlacement;
 }
 type __VLS_Props = TimeInputProps;
+type __VLS_Slots = {
+    /**
+     * Content at the start of the field, rendered after `iconStart` rather than in its place,
+     * as in VInput.
+     */
+    start?(): unknown;
+    /**
+     * Controls of your own inside the field, after the AM/PM button when there is one and
+     * before the ones the field owns — the clear cross and the icon that opens the panel.
+     * Those two are this component's own affordance, which is why there is no `#end` here.
+     */
+    'value-end'?(): unknown;
+    /**
+     * The strip at the foot of the clock, which REPLACES the Cancel and OK buttons rather
+     * than joining them.
+     *
+     * It receives both actions, and they are what make the slot usable: the clock writes a
+     * DRAFT that only `confirm` commits, so a footer of your own without it would leave the
+     * value unchangeable through the panel. `cancel` drops the draft and closes, and `close`
+     * is the same function under the name VDateInput's footer hands out.
+     *
+     * It is not rendered in `list` mode, which has no panel of this component's own.
+     */
+    footer?(props: {
+        confirm: () => void;
+        cancel: () => void;
+        close: () => void;
+    }): unknown;
+};
 type __VLS_ModelProps = {
     /**
      * The time, always as a 24-hour "HH:mm" string whatever clock is displayed. A consumer
@@ -87,26 +149,54 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the text field. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** Selects what the field is showing. */
+    select: () => void | undefined;
+    /** The real `<input>` behind the field, for what neither of the two above covers. */
+    el: import('vue').ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
     "update:modelValue": (value: string | null) => any;
+    "click:icon-start": (event: MouseEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    loading: boolean;
     label: string;
-    minuteStep: number;
     placeholder: string;
-    size: "sm" | "md" | "lg";
-    placement: Placement;
+    size: TimeInputSize;
+    placement: TimeInputPlacement;
     mode: TimeInputMode;
     compact: boolean;
     disabled: boolean;
+    iconStart: IconSource;
     invalid: boolean;
     hint: string;
+    readonly: boolean;
+    iconStartLabel: string;
+    loadingLabel: string;
     clearable: boolean;
+    clearLabel: string;
+    max: string;
     format: TimePickerFormat;
+    min: string;
     locale: string;
     showPicker: boolean;
+    pickerIconLabel: string;
     pickerIcon: IconSource;
+    minuteStep: number;
+    allowedHours: TimePickerAllowed;
+    allowedMinutes: TimePickerAllowed;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};