vectis-ui 0.12.0 → 0.14.0

package/dist/components/VTextarea/VTextarea.d.ts

@@ -1,3 +1,4 @@
+import { FieldLabelPosition } from '../VField/VField.js';
 import { IconSource } from '../VIcon/types.js';
 /** The height of one line: 32, 40 or 48 pixels. */
 export type TextareaSize = 'sm' | 'md' | 'lg';
@@ -38,6 +39,21 @@ interface TextareaProps {
      * that it is read out along with the label.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /** Marks the field as required: an asterisk follows the label, and the textarea is `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
     /**
      * 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
@@ -131,13 +147,18 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
 }>, {
     loading: boolean;
     label: string;
+    error: string;
     size: TextareaSize;
     compact: boolean;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
+    disabled: boolean;
+    required: boolean;
     invalid: boolean;
+    rows: number;
     hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
     readonly: boolean;
     iconStartLabel: string;
     iconEndLabel: string;
@@ -148,7 +169,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     maxlength: number;
     softLimit: boolean;
     counter: boolean;
-    rows: number;
     autoGrow: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"VTextarea.js","names":[],"sources":["../../../src/components/VTextarea/VTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native textarea owns editing and validity. JavaScript bridges the model, text limits and\n * clear-button focus; CSS controls optional content-based height.\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 gives the field\n   * its height.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height `rows`\n   * gives it, which stays its starting height.\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 real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\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  loadingText?: 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 own\n   * content (a read-only field included).\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 into\n   * error instead of silently refusing the keystrokes.\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  loadingText: 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 and\n   * the end icon.\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, counterId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint,\n  () => props.counter,\n)\n\n// Every length measurement goes through this projection: a value straight from an API or\n// a database is often `null`, and reading `.length` on it would throw at mount.\nconst modelText = computed(() => model.value ?? '')\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: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.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      <!--\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 same\n        way: what a composed field puts in that zone is OTHER content beside the icon, not\n        another way of drawing it.\n      -->\n      <button\n        v-if=\"iconStart && hasIconStartHandler\"\n        type=\"button\"\n        class=\"v-textarea-action v-field-action v-textarea-icon-start\"\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)\" class=\"v-textarea-icon-start\" />\n      <slot name=\"start\" />\n\n      <textarea\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"restAttrs\"\n        class=\"v-textarea-control\"\n        :rows=\"resolvedRows\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || 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=\"loadingText\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-textarea-action v-field-action v-textarea-icon-end\"\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)\" class=\"v-textarea-icon-end\" />\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        :id=\"counterId\"\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  /*\n   * The .v-textarea-label and .v-textarea-hint classes remain as hooks: a consumer overrides\n   * through them, and the disabled state below reaches them that way.\n   */\n\n  /*\n   * This is the box that carries the border, the background, the focus ring and the resize\n   * handle; which is why it also hides its overflow, `resize` having no effect on a box whose\n   * overflow is visible. `--field-border-color` is the single source of truth for its colour,\n   * and the hover, error and disabled states do nothing but redefine it.\n   */\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 from the\n     * v-control root (styles/control-size.css), the icon context included. The field carries no\n     * height of its own: it is the `rows` attribute on the textarea that sets one, and the\n     * field is simply as tall as the control it wraps.\n     */\n\n    /*\n     * The leading is named once and feeds two things that have to agree by construction: the\n     * field's own `line-height`, and the first line box below, against which everything sitting\n     * beside the text is offset.\n     */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /*\n     * It is DERIVED and must never be written as `1lh`. The buttons happened to be right only\n     * because the reset gives them `font: inherit`.\n     */\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    /*\n     * Derive padding from control height minus borders and one line. Read the compact-adjusted\n     * height so rows=1 matches VInput and each additional row adds one line.\n     */\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    /*\n     * The cap is what carries the VInput identity above into the OTHER row counts, and it has\n     * to stay derived from --control-height. A browser scales down any radius it cannot fit, so\n     * on a one-row field a pill override is already painted as half the control height; min()\n     * applies that same reduction to a field that is taller.\n     */\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;\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * 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 side is\n   * what keeps the item's OUTER box down to one line box.\n   */\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  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\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  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons takes keyboard focus, only that button's outline lights up: two\n   * indicators at once would be unreadable. And it is `:focus` rather than `:focus-visible`,\n   * because a text field shows its focus even when it was reached with the mouse.\n   */\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  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\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  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\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  /*\n   * A browser without support keeps the fixed height and its scrollbar, which is the intended\n   * fallback.\n   */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /*\n   * It is scoped to this branch and must not be lifted onto the control at large: a floor there\n   * would stop the control shrinking with the resize handle, and the field, which hides its\n   * overflow, would clip it instead of scrolling.\n   */\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":""}
+{"version":3,"file":"VTextarea.js","names":[],"sources":["../../../src/components/VTextarea/VTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native textarea owns editing and validity. JavaScript bridges the model, text limits and\n * clear-button focus; CSS controls optional content-based height.\n */\nimport { computed, ref } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldControlProps, FieldLabelPosition } from '../VField/VField.vue'\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'\n\nimport { useClearable } from '../../composables/useClearable'\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 gives the field\n   * its height.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height `rows`\n   * gives it, which stays its starting height.\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   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the textarea is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\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  loadingText?: 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 own\n   * content (a read-only field included).\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 into\n   * error instead of silently refusing the keystrokes.\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  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingText: 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 and\n   * the end icon.\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 { 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\n// Every length measurement goes through this projection: a value straight from an API or\n// a database is often `null`, and reading `.length` on it would throw at mount.\nconst modelText = computed(() => model.value ?? '')\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: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/** The attributes of the textarea, built on VField's: the consumer's win over `invalid`. */\nfunction textareaAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return { 'aria-invalid': props.invalid ? 'true' : undefined, ...fieldProps }\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  <VField\n    v-bind=\"restAttrs\"\n    class=\"v-textarea\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-textarea-field v-control\"\n        :style=\"{ '--textarea-rows': resolvedRows }\"\n        :data-size=\"size\"\n        :data-compact=\"compact ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n        :data-auto-grow=\"autoGrow ? '' : undefined\"\n      >\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 same\n        way: what a composed field puts in that zone is OTHER content beside the icon, not\n        another way of drawing it.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-textarea-action v-field-action v-textarea-icon-start\"\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)\" class=\"v-textarea-icon-start\" />\n        <slot name=\"start\" />\n\n        <!-- The label's `for` matches the id inside fieldProps, which the rule cannot follow. -->\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <textarea\n          ref=\"controlEl\"\n          v-model=\"model\"\n          v-bind=\"textareaAttrs(fieldProps)\"\n          class=\"v-textarea-control\"\n          :rows=\"resolvedRows\"\n          :maxlength=\"softLimit ? undefined : maxlength\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\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=\"loadingText\" />\n        <slot v-else name=\"end\">\n          <button\n            v-if=\"iconEnd && hasIconEndHandler\"\n            type=\"button\"\n            class=\"v-textarea-action v-field-action v-textarea-icon-end\"\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)\" class=\"v-textarea-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"counter\" #meta=\"{ id }\">\n      <span :id=\"id\" class=\"v-textarea-counter v-field-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The root is a VField, which lays out the label, the hint and the error. */\n  .v-textarea {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background, the focus ring and the resize\n   * handle; which is why it also hides its overflow, `resize` having no effect on a box whose\n   * overflow is visible. `--field-border-color` is the single source of truth for its colour,\n   * and the hover, error and disabled states do nothing but redefine it.\n   */\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 come from the v-control\n     * class on this box (styles/control-size.css), the icon context included. The field carries no\n     * height of its own: it is the `rows` attribute on the textarea that sets one, and the\n     * field is simply as tall as the control it wraps.\n     */\n\n    /*\n     * The leading is named once and feeds two things that have to agree by construction: the\n     * field's own `line-height`, and the first line box below, against which everything sitting\n     * beside the text is offset.\n     */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /*\n     * Derived rather than written as `1lh`: a custom property resolves `lh` where it is used, so\n     * the icons and buttons beside the text would each measure their own line height.\n     */\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    /*\n     * Derive padding from control height minus borders and one line. Read the compact-adjusted\n     * height so rows=1 matches VInput and each additional row adds one line.\n     */\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    /*\n     * The cap is what carries the VInput identity above into the OTHER row counts, and it has\n     * to stay derived from --control-height. A browser scales down any radius it cannot fit, so\n     * on a one-row field a pill override is already painted as half the control height; min()\n     * applies that same reduction to a field that is taller.\n     */\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;\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * 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 side is\n   * what keeps the item's OUTER box down to one line box.\n   */\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  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\n  .v-textarea .v-textarea-field[data-readonly] {\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  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons takes keyboard focus, only that button's outline lights up: two\n   * indicators at once would be unreadable. And it is `:focus` rather than `:focus-visible`,\n   * because a text field shows its focus even when it was reached with the mouse.\n   */\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  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\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  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\n  .v-textarea .v-textarea-field[data-disabled] {\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-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-textarea-field[data-disabled] .v-textarea-action,\n  .v-textarea-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-textarea-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * A browser without support keeps the fixed height and its scrollbar, which is the intended\n   * fallback.\n   */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /*\n   * It is scoped to this branch and must not be lifted onto the control at large: a floor there\n   * would stop the control shrinking with the resize handle, and the field, which hides its\n   * overflow, would clip it instead of scrolling.\n   */\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":""}

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

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

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 * Native textarea owns editing and validity. JavaScript bridges the model, text limits and\n * clear-button focus; CSS controls optional content-based height.\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 gives the field\n   * its height.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height `rows`\n   * gives it, which stays its starting height.\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 real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\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  loadingText?: 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 own\n   * content (a read-only field included).\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 into\n   * error instead of silently refusing the keystrokes.\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  loadingText: 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 and\n   * the end icon.\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, counterId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint,\n  () => props.counter,\n)\n\n// Every length measurement goes through this projection: a value straight from an API or\n// a database is often `null`, and reading `.length` on it would throw at mount.\nconst modelText = computed(() => model.value ?? '')\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: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.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      <!--\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 same\n        way: what a composed field puts in that zone is OTHER content beside the icon, not\n        another way of drawing it.\n      -->\n      <button\n        v-if=\"iconStart && hasIconStartHandler\"\n        type=\"button\"\n        class=\"v-textarea-action v-field-action v-textarea-icon-start\"\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)\" class=\"v-textarea-icon-start\" />\n      <slot name=\"start\" />\n\n      <textarea\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"restAttrs\"\n        class=\"v-textarea-control\"\n        :rows=\"resolvedRows\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || 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=\"loadingText\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-textarea-action v-field-action v-textarea-icon-end\"\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)\" class=\"v-textarea-icon-end\" />\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        :id=\"counterId\"\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  /*\n   * The .v-textarea-label and .v-textarea-hint classes remain as hooks: a consumer overrides\n   * through them, and the disabled state below reaches them that way.\n   */\n\n  /*\n   * This is the box that carries the border, the background, the focus ring and the resize\n   * handle; which is why it also hides its overflow, `resize` having no effect on a box whose\n   * overflow is visible. `--field-border-color` is the single source of truth for its colour,\n   * and the hover, error and disabled states do nothing but redefine it.\n   */\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 from the\n     * v-control root (styles/control-size.css), the icon context included. The field carries no\n     * height of its own: it is the `rows` attribute on the textarea that sets one, and the\n     * field is simply as tall as the control it wraps.\n     */\n\n    /*\n     * The leading is named once and feeds two things that have to agree by construction: the\n     * field's own `line-height`, and the first line box below, against which everything sitting\n     * beside the text is offset.\n     */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /*\n     * It is DERIVED and must never be written as `1lh`. The buttons happened to be right only\n     * because the reset gives them `font: inherit`.\n     */\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    /*\n     * Derive padding from control height minus borders and one line. Read the compact-adjusted\n     * height so rows=1 matches VInput and each additional row adds one line.\n     */\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    /*\n     * The cap is what carries the VInput identity above into the OTHER row counts, and it has\n     * to stay derived from --control-height. A browser scales down any radius it cannot fit, so\n     * on a one-row field a pill override is already painted as half the control height; min()\n     * applies that same reduction to a field that is taller.\n     */\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;\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * 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 side is\n   * what keeps the item's OUTER box down to one line box.\n   */\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  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\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  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons takes keyboard focus, only that button's outline lights up: two\n   * indicators at once would be unreadable. And it is `:focus` rather than `:focus-visible`,\n   * because a text field shows its focus even when it was reached with the mouse.\n   */\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  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\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  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\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  /*\n   * A browser without support keeps the fixed height and its scrollbar, which is the intended\n   * fallback.\n   */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /*\n   * It is scoped to this branch and must not be lifted onto the control at large: a floor there\n   * would stop the control shrinking with the resize handle, and the field, which hides its\n   * overflow, would clip it instead of scrolling.\n   */\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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"}
+{"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 * Native textarea owns editing and validity. JavaScript bridges the model, text limits and\n * clear-button focus; CSS controls optional content-based height.\n */\nimport { computed, ref } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldControlProps, FieldLabelPosition } from '../VField/VField.vue'\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'\n\nimport { useClearable } from '../../composables/useClearable'\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 gives the field\n   * its height.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height `rows`\n   * gives it, which stays its starting height.\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   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the textarea is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\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  loadingText?: 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 own\n   * content (a read-only field included).\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 into\n   * error instead of silently refusing the keystrokes.\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  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingText: 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 and\n   * the end icon.\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 { 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\n// Every length measurement goes through this projection: a value straight from an API or\n// a database is often `null`, and reading `.length` on it would throw at mount.\nconst modelText = computed(() => model.value ?? '')\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: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/** The attributes of the textarea, built on VField's: the consumer's win over `invalid`. */\nfunction textareaAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return { 'aria-invalid': props.invalid ? 'true' : undefined, ...fieldProps }\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  <VField\n    v-bind=\"restAttrs\"\n    class=\"v-textarea\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-textarea-field v-control\"\n        :style=\"{ '--textarea-rows': resolvedRows }\"\n        :data-size=\"size\"\n        :data-compact=\"compact ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n        :data-auto-grow=\"autoGrow ? '' : undefined\"\n      >\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 same\n        way: what a composed field puts in that zone is OTHER content beside the icon, not\n        another way of drawing it.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-textarea-action v-field-action v-textarea-icon-start\"\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)\" class=\"v-textarea-icon-start\" />\n        <slot name=\"start\" />\n\n        <!-- The label's `for` matches the id inside fieldProps, which the rule cannot follow. -->\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <textarea\n          ref=\"controlEl\"\n          v-model=\"model\"\n          v-bind=\"textareaAttrs(fieldProps)\"\n          class=\"v-textarea-control\"\n          :rows=\"resolvedRows\"\n          :maxlength=\"softLimit ? undefined : maxlength\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\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=\"loadingText\" />\n        <slot v-else name=\"end\">\n          <button\n            v-if=\"iconEnd && hasIconEndHandler\"\n            type=\"button\"\n            class=\"v-textarea-action v-field-action v-textarea-icon-end\"\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)\" class=\"v-textarea-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"counter\" #meta=\"{ id }\">\n      <span :id=\"id\" class=\"v-textarea-counter v-field-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The root is a VField, which lays out the label, the hint and the error. */\n  .v-textarea {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background, the focus ring and the resize\n   * handle; which is why it also hides its overflow, `resize` having no effect on a box whose\n   * overflow is visible. `--field-border-color` is the single source of truth for its colour,\n   * and the hover, error and disabled states do nothing but redefine it.\n   */\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 come from the v-control\n     * class on this box (styles/control-size.css), the icon context included. The field carries no\n     * height of its own: it is the `rows` attribute on the textarea that sets one, and the\n     * field is simply as tall as the control it wraps.\n     */\n\n    /*\n     * The leading is named once and feeds two things that have to agree by construction: the\n     * field's own `line-height`, and the first line box below, against which everything sitting\n     * beside the text is offset.\n     */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /*\n     * Derived rather than written as `1lh`: a custom property resolves `lh` where it is used, so\n     * the icons and buttons beside the text would each measure their own line height.\n     */\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    /*\n     * Derive padding from control height minus borders and one line. Read the compact-adjusted\n     * height so rows=1 matches VInput and each additional row adds one line.\n     */\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    /*\n     * The cap is what carries the VInput identity above into the OTHER row counts, and it has\n     * to stay derived from --control-height. A browser scales down any radius it cannot fit, so\n     * on a one-row field a pill override is already painted as half the control height; min()\n     * applies that same reduction to a field that is taller.\n     */\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;\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * 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 side is\n   * what keeps the item's OUTER box down to one line box.\n   */\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  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\n  .v-textarea .v-textarea-field[data-readonly] {\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  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons takes keyboard focus, only that button's outline lights up: two\n   * indicators at once would be unreadable. And it is `:focus` rather than `:focus-visible`,\n   * because a text field shows its focus even when it was reached with the mouse.\n   */\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  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\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  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\n  .v-textarea .v-textarea-field[data-disabled] {\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-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-textarea-field[data-disabled] .v-textarea-action,\n  .v-textarea-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-textarea-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * A browser without support keeps the fixed height and its scrollbar, which is the intended\n   * fallback.\n   */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /*\n   * It is scoped to this branch and must not be lifted onto the control at large: a floor there\n   * would stop the control shrinking with the resize handle, and the field, which hides its\n   * overflow, would clip it instead of scrolling.\n   */\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.d.ts

@@ -1,4 +1,5 @@
 import { IconSource } from '../VIcon/types.js';
+import { FieldLabelPosition } from '../VField/VField.js';
 import { TimePickerFormat } from '../VTimePicker/VTimePicker.js';
 import { TimePickerAllowed } from '../VTimePicker/limits.js';
 /**
@@ -67,6 +68,21 @@ interface TimeInputProps {
     label?: string;
     /** A line of help under the field. */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /** Marks the field as required: an asterisk follows the label, and the field is `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
     /** What the field says while empty. */
     placeholder?: string;
     /** The height of the field: 32, 40 or 48 pixels. */
@@ -94,7 +110,7 @@ interface TimeInputProps {
      * What the clock button does, in words. It names the button `pickerIcon` renders,
      * and falls back to the design system dictionary.
      */
-    pickerIconLabel?: string;
+    pickerLabel?: 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
@@ -164,25 +180,29 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     loading: boolean;
     label: string;
     placeholder: string;
+    format: TimePickerFormat;
+    pickerLabel: string;
+    error: string;
     size: TimeInputSize;
-    placement: TimeInputPlacement;
-    mode: TimeInputMode;
     compact: boolean;
-    disabled: boolean;
     iconStart: IconSource;
+    disabled: boolean;
+    required: boolean;
+    placement: TimeInputPlacement;
+    mode: TimeInputMode;
     invalid: boolean;
     hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
     readonly: boolean;
     iconStartLabel: string;
     loadingText: string;
     clearable: boolean;
     clearLabel: string;
-    max: string;
-    format: TimePickerFormat;
     min: string;
+    max: string;
     locale: string;
     showPicker: boolean;
-    pickerIconLabel: string;
     pickerIcon: IconSource;
     minuteStep: number;
     allowedHours: TimePickerAllowed;