vectis-ui 0.14.0 → 0.16.0

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 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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"}
+{"version":3,"file":"VTextarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","VField","_mergeProps","_unref","_createSlots","_withCtx","_createElementVNode","_normalizeStyle","_createElementBlock","_createVNode","VIcon","_normalizeProps","_guardReactiveProps","_createCommentVNode","_renderSlot","_withDirectives","_vModelText","closeIcon","VSpinner","_toDisplayString","VIcon_default","VSpinner_default","VField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","VTextarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","resolvedRows","computed","restAttrs","useRootAttrs","m","useMessages","resolvedClearLabel","modelText","useIconClickHandlers","controlEl","ref","useClearable","useTextLimit","textareaAttrs","fieldProps","options","openBlock","createBlock","mergeProps","unref","rootClass","rootStyle","createSlots","withCtx","createElementVNode","normalizeStyle","hasIconStartHandler","createElementBlock","iconName","_cache","$event","createVNode","normalizeProps","guardReactiveProps","iconProps","createCommentVNode","renderSlot","_ctx","withDirectives","vModelText","showClear","args","onClear","close","hasIconEndHandler","over","toDisplayString","counterText"],"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   * 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  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-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 density-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6HA,IAAMoC,IAAQC,GA2BRC,IAAOH,GA4BPI,IAAQvC,EAAmBqC,GAAA,YAAgB,GAM3CI,IAAeC,QAAe,KAAK,IAAI,GAAG,KAAK,MAAMN,EAAM,IAAI,CAAC,CAAC,GAIjE,EAAE,cAAW,cAAW,gBAAgBO,MAAcC,EAAa,GAInEC,IAAIC,EAAY,GAChBC,IAAqBL,QAAeN,EAAM,cAAcS,EAAE,MAAM,OAAO,KAAK,GAI5EG,IAAYN,QAAeH,EAAM,SAAS,EAAE,GAE5C,EAAE,wBAAqB,yBAAsBU,EAAqB;GACtE,MAAM;GACN,gBAAgBb,EAAM;GACtB,cAAcA,EAAM;EACtB,CAAC,GAEKc,IAAYC,EAAgC,IAAI,GAEhD,EAAE,cAAW,eAAYC,EAAa;GAC1C,iBAAiBhB,EAAM;GACvB,oBAAoBA,EAAM;GAC1B,gBAAgBA,EAAM;GACtB,gBAAgBA,EAAM;GACtB,YAAYY,EAAU;GACtB;GACA,iBAAiB;IAEf,AADA,EAAM,QAAQ,IACdV,EAAK,OAAO;GACd;EACF,CAAC,GAEK,EAAE,iBAAa,aAASe,EAAa;GACzC,IAAIH;GACJ,YAAYF,EAAU;GACtB,iBAAiBZ,EAAM;GACvB,iBAAiBA,EAAM;EACzB,CAAC;EAGD,SAASkB,GAAc,GAAkD;GACvE,OAAO;IAAE,gBAAgBlB,EAAM,UAAU,SAAS,KAAA;IAAW,GAAGmB;GAAW;EAC7E;SAEArB,EAAa;GAEX,QAAQ,MAA2BgB,EAAU,OAAO,MAAMM,CAAO;GAEjE,cAAcN,EAAU,OAAO,OAAO;GAEtC,IAAIA;EACN,CAAC,cAICjD,EAAA,GAAAC,EAuFSC,GAvFTC,EACUC,EAsFDsC,CAAA,GAtFU;GACjB,OAAK,CAAC,cACEtC,EAAAwD,CAAA,CAAS;GAChB,OAAOxD,EAAAyD,CAAA;GACP,OAAOzB,EAAA;GACP,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,cAAYA,EAAA;GACZ,kBAAgBA,EAAA;;GAEN,SAAO9B,GAmEV,EAnEc,oBAAU,CAC9BC,EAkEM,OAAA;IAjEJ,OAAM;IACL,OAAKC,EAAA,EAAA,mBAAuBgC,EAAA,MAAY,CAAA;IACxC,aAAWJ,EAAA;IACX,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,kBAAgBA,EAAA,WAAQ,KAAQ,KAAA;;IASzBA,EAAA,aAAahC,EAAA8D,CAAA,KADrBlE,EAAA,GAAAS,EASS,UAAA;;KAPP,MAAK;KACL,OAAM;KACL,cAAY2B,EAAA,kBAAkBhC,EAAAgE,CAAA,CAAQ,CAAChC,EAAA,SAAS;KAChD,UAAUA,EAAA;KACV,SAAK,AAAAiC,EAAA,QAAA,MAAEhC,EAAI,oBAAqBiC,CAAM;IAEvC5D,GAAAA,CAAAA,EAAuCC,GAAAC,EAAAC,EAAxBT,EAAAsE,CAAA,CAAS,CAACtC,EAAA,SAAS,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAAX,CAAA,KAElBW,EAAA,aAAlBpC,EAAA,GAAAC,EAA2FU,GAA3FR,EAA2F,EAAA,KAAA,EAAA,GAAtDC,EAAAsE,CAAA,CAAS,CAACtC,EAAA,SAAS,GAAA,EAAG,OAAM,wBAAuB,CAAA,GAAA,MAAA,EAAA,KAAAuC,EAAA,IAAA,EAAA;IACxF5D,EAAqB8D,EAAA,QAAA,OAAA;IAIrB7D,EAAAT,EASE,YATFJ,EASE;KARI,SAAA;KAAJ,KAAI8C;KACK,uBAAA,AAAAoB,EAAA,QAAA,MAAA,EAAK,QAAAC;IACN,GAAAjB,GAAcC,CAAU,GAAA;KAChC,OAAM;KACL,MAAMd,EAAA;KACN,WAAWJ,EAAA,YAAY,KAAA,IAAYA,EAAA;KACnC,UAAUA,EAAA;KACV,UAAUA,EAAA,YAAY,KAAA;IANd,CAAA,GAAA,MAAA,IAAAV,CAAA,GAAA,CAAA,CAAAT,IAAAqB,EAAA,KAAK,CAAA,CAAA;IAShBvB,EAAyB8D,EAAA,QAAA,WAAA;IAGjBzE,EAAA4E,CAAA,KADRhF,EAAA,GAAAS,EAQS,UAAA;;KANP,MAAK;KACL,OAAM;KACL,cAAYqC,EAAA;KACZ,SAAK,AAAAuB,EAAA,QAAE,GAAAY,MAAA7E,EAAA8E,CAAA,KAAA9E,EAAA8E,CAAA,CAAA,CAAA,GAAAD,CAAA;IAERvE,GAAAA,CAAAA,EAA2BC,GAAA,EAAnB,MAAMP,EAAAc,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,GAAAS,CAAA,KAAAgD,EAAA,IAAA,EAAA;IAGTvC,EAAA,WAAhBpC,EAAA,GAAAC,EAAgDkB,GAAA;;KAAtB,OAAOiB,EAAA;IACjCrB,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,KAAAA,EAYO8D,EAAA,QAAA,OAAA,CAAA,SAAA,CAVGzC,EAAA,WAAWhC,EAAAgF,CAAA,KADnBpF,EAAA,GAAAS,EASS,UAAA;;KAPP,MAAK;KACL,OAAM;KACL,cAAY2B,EAAA,gBAAgBhC,EAAAgE,CAAA,CAAQ,CAAChC,EAAA,OAAO;KAC5C,UAAUA,EAAA;KACV,SAAK,AAAAiC,EAAA,QAAA,MAAEhC,EAAI,kBAAmBiC,CAAM;IAErC5D,GAAAA,CAAAA,EAAqCC,GAAAC,EAAAC,EAAtBT,EAAAsE,CAAA,CAAS,CAACtC,EAAA,OAAO,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAAR,CAAA,KAEhBQ,EAAA,WAAlBpC,EAAA,GAAAC,EAAqFU,GAArFR,EAAqF,EAAA,KAAA,EAAA,GAAlDC,EAAAsE,CAAA,CAAS,CAACtC,EAAA,OAAO,GAAA,EAAG,OAAM,sBAAqB,CAAA,GAAA,MAAA,EAAA,KAAAuC,EAAA,IAAA,EAAA,CAAA,GAAA,KAAA,GAAA,CAAA;;;EAIxE,GAAA,CAAAvC,EAAA,UAAA;GAAU,MAAA;GACxB,IAAA9B,GAEO,EAHyB,YAAE,CAClCC,EAEO,QAAA;IAFI;IAAI,OAAM;IAAsC,aAAWH,EAAAiF,EAAA,IAAI,KAAQ,KAAA;GAC7E,GAAAjE,EAAAhB,EAAAmF,EAAA,CAAW,GAAA,GAAA1D,CAAA,CAAA,CAAA"}

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

@@ -87,8 +87,6 @@ interface TimeInputProps {
     placeholder?: string;
     /** The height of the field: 32, 40 or 48 pixels. */
     size?: TimeInputSize;
-    /** Takes 4px off the height. */
-    compact?: boolean;
     /** Makes the field unusable, greyed out through the colour tokens. */
     disabled?: boolean;
     /**
@@ -184,7 +182,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     pickerLabel: string;
     error: string;
     size: TimeInputSize;
-    compact: boolean;
     iconStart: IconSource;
     disabled: boolean;
     required: boolean;

package/dist/components/VTimeInput/VTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTimeInput.js","names":[],"sources":["../../../src/components/VTimeInput/VTimeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose typing and clock modes from VInput and VTimePicker; list mode delegates to VCombobox.\n * JavaScript supplies masking and manual panel focus because text inputs cannot use\n * popovertarget.\n */\n\nimport { computed, inject, provide, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCombobox from '../VCombobox/VCombobox.vue'\nimport type { ListboxOption } from '../../types'\nimport { inputGroupKey } from '../VInput/context'\nimport { schedule as scheduleIcon } from '../VIcon/icons/schedule'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VSeparator from '../VSeparator/VSeparator.vue'\nimport VTimePicker from '../VTimePicker/VTimePicker.vue'\nimport type { TimePickerFormat } from '../VTimePicker/VTimePicker.vue'\nimport {\n  isTimeAllowed,\n  limitsProblem,\n  nearestAllowedTime,\n  resolveLimits,\n} from '../VTimePicker/limits'\nimport type { TimePickerAllowed } from '../VTimePicker/limits'\nimport {\n  formatTime,\n  formatTimeDisplay,\n  hourCycleFor,\n  isValidTime,\n  parseTime,\n} from '../../utils/time'\nimport {\n  formatTimeMask,\n  parseTimeMask,\n  snapMinute,\n  timeCaret,\n  timeList,\n  timeToMask,\n  to12h,\n  withMeridiem,\n} from '../../utils/clock'\nimport type { Meridiem } from '../../utils/time'\nimport type { TimeOption } from '../../utils/clock'\nimport { readWrittenTime, timeMatches } from './search'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { digitsOf } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * Whether the field can be typed into, only filled from the clock, or picked from a list of\n * times.\n */\nexport type TimeInputMode = 'picker' | 'input' | 'list'\n\n/** What the `#footer` slot receives. */\nexport interface TimeInputFooterSlotProps {\n  /** Writes the time on the clock into the value, then closes. */\n  confirm: () => void\n  /** Closes and drops the time on the clock, the value left as it was. */\n  cancel: () => void\n  /** The same as `cancel`, under the name VDateInput's footer uses. */\n  close: () => void\n}\n\nconst MODES: TimeInputMode[] = ['picker', 'input', 'list']\n\n/** Where the panel opens relative to the field, whether it holds the clock or the list. */\nexport type TimeInputPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type TimeInputSize = 'sm' | 'md' | 'lg'\n\ninterface TimeInputProps {\n  /**\n   * Whether times are shown on a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * Which form the field takes: one that can be TYPED into, a `picker` one where the\n   * clock is the only way in (so the picker is forced on there), or a searchable LIST of\n   * times at a fixed interval, where a picker would make no sense.\n   */\n  mode?: TimeInputMode\n  /**\n   * Offers the picker beside a field one can type into: an icon at the end of the field, and a\n   * panel it opens.\n   */\n  showPicker?: boolean\n  /**\n   * The interval between two times that can be chosen. It applies to the picker, to the\n   * arrow keys and to the rows of the list.\n   */\n  minuteStep?: number\n  /**\n   * The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`.\n   * The picker and the list both LEAVE OUT what it rules out, and a time typed past it\n   * makes the field invalid.\n   */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /**\n   * Which hours can be chosen: the list of them, or a rule answering for one. The hour\n   * handed to a rule is always the 24-hour one, whichever clock is on display.\n   */\n  allowedHours?: TimePickerAllowed\n  /** Which minutes can be chosen: the list of them, or a rule answering for one. */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES\n   * PRECEDENCE over the design system's global locale and falls back to it, which is why\n   * it has no literal default: `undefined` has to stay recognizable for the global locale\n   * to have its chance.\n   */\n  locale?: string\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\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 field 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  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: TimeInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the time without letting it be changed: nothing can be typed, there is no clock and\n   * no clear cross.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the clock button does, in words. It names the button `pickerIcon` renders,\n   * and falls back to the design system dictionary.\n   */\n  pickerLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the clock icon. It says that\n   * something is being loaded and changes nothing else: the field can still be typed\n   * into and the panel still opens.\n   */\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  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The icon that opens the PICKER, at the end of the field. It has no effect on the list\n   * form, whose chevron follows the combobox convention. The clear cross appears to its\n   * left rather than in its place.\n   */\n  pickerIcon?: IconSource\n  /** Where the panel opens relative to the field, whether it holds the clock or the list. */\n  placement?: TimeInputPlacement\n}\n\nconst props = withDefaults(defineProps<TimeInputProps>(), {\n  format: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and therefore\n  // what allows warning only the consumer who explicitly asked for something that cannot work.\n  mode: undefined,\n  showPicker: false,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  locale: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  pickerIcon: () => scheduleIcon,\n  placement: 'bottom-start',\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * as in VInput.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, after the AM/PM button when there is one and before\n   * the ones the field owns: the clear cross and the icon that opens the panel.\n   */\n  'value-end'?(): unknown\n  /**\n   * The strip at the foot of the clock, which REPLACES the Cancel and OK buttons rather than\n   * joining them.\n   */\n  footer?(props: TimeInputFooterSlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field on screen; the masked VInput or the list's VCombobox. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst listRef = ref<InstanceType<typeof VCombobox> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VTimePicker> | null>(null)\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\nconst resolvedMode = computed<TimeInputMode>(() => {\n  // The default is applied before the value is checked. A prop that was never given is not an\n  // unknown value, and treating it as one would warn on a bare `<VTimeInput />`.\n  const mode = props.mode ?? 'input'\n  return MODES.includes(mode) ? mode : 'input'\n})\nconst typing = computed(() => resolvedMode.value === 'input')\nconst isList = computed(() => resolvedMode.value === 'list')\n/**\n * Whether this component builds a panel of its own, which is the clock's: the list form hands\n * that job to VCombobox.\n */\nconst hasPanel = computed(\n  () => !props.readonly && (resolvedMode.value === 'picker' || (typing.value && props.showPicker)),\n)\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once. */\nconst limits = computed(() => resolveLimits(props))\n\n/** Whether the value is one the restrictions allow. Nothing at all is not a breach. */\nconst valueAllowed = computed(() => {\n  const parts = modelParts.value\n  return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n})\n\n// @devwarn\nif (isDev) {\n  // The clock receives `minuteStep` and the restrictions as they stand, so what it would say\n  // about them is said here, under the name the consumer wrote (utils/hostWarns).\n  provide(hostWarnsKey, true)\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimeInput] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VTimeInput] unknown mode \"${props.mode}\": use \"input\" (the default), \"picker\" or \"list\".`,\n      )\n    if (isList.value && props.showPicker)\n      console.warn(\n        '[VTimeInput] showPicker is ignored in \"list\" mode: the list of times is the only panel.',\n      )\n    // The list form is a VCombobox, which draws the end of the field itself: its own chevron in\n    // place of the clock. The two props that describe this component's end icon therefore reach\n    // nothing at all, and their absence is invisible on screen.\n    const inert = ([] as string[]).concat(\n      props.pickerIcon !== scheduleIcon ? 'pickerIcon' : [],\n      props.pickerLabel ? 'pickerLabel' : [],\n    )\n    const isAre = inert.length > 1 ? 'are' : 'is'\n    if (isList.value && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored in \"list\" mode: the list draws its own chevron.`,\n      )\n    // A field one types into without the picker has no end icon either, as in VDateInput.\n    // A read-only field is left out: it is a state that comes and goes, not a configuration\n    // to correct.\n    if (typing.value && !props.showPicker && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored without showPicker: a field one types into has no clock icon unless it offers the clock.`,\n      )\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimeInput] ${problem}`)\n    if (isList.value && props.minuteStep < 5)\n      console.warn(\n        `[VTimeInput] minuteStep ${props.minuteStep} in \"list\" mode would render ${Math.ceil(1440 / props.minuteStep)} rows: a step of 15 or 30 minutes is expected.`,\n      )\n  })\n}\n\n/** The time being built on the clock, in the same canonical form as the value itself. */\nconst pickerDraft = ref<string | null>(null)\n\nconst modelParts = computed(() => parseTime(model.value))\n\n/** The half of the day chosen while no time is set: VTimePicker's own `pendingMeridiem`. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day the FIELD is showing. It is what the mask needs: typing \"9:30\" says\n * nothing about the morning or the afternoon, so the answer has to be readable while the\n * panel is shut.\n */\nconst currentMeridiem = computed<Meridiem>(() => {\n  // With the picker open it is the DRAFT that is on screen, and this control has to read\n  // the same thing: two controls showing opposite halves of the day until OK is pressed\n  // is the one state that must not happen.\n  const parts = open.value && hasPanel.value ? parseTime(pickerDraft.value) : modelParts.value\n  return parts ? to12h(parts.hour).meridiem : pendingMeridiem.value\n})\n\n/**\n * The button beside the value flips the half of the day. There is no third state to reach,\n * so it names the half it is showing and swaps to the other one on a click.\n */\nfunction toggleMeridiem() {\n  const next: Meridiem = currentMeridiem.value === 'PM' ? 'AM' : 'PM'\n  pendingMeridiem.value = next\n  // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n  // and applies to the first time typed or chosen.\n  const moved = withMeridiem(model.value, next)\n  if (moved) model.value = moved\n  // With the picker open the draft has to follow as well, or OK would write back the\n  // half of the day the reader has just changed.\n  const pending = open.value && hasPanel.value ? withMeridiem(pickerDraft.value, next) : null\n  if (pending) pickerDraft.value = pending\n}\n\n/** Whether the button is rendered at all. */\nconst hasMeridiem = computed(\n  () => typing.value && !props.readonly && resolvedFormat.value === '12h',\n)\n\nconst hasValue = computed(() => !!modelParts.value)\nconst displayText = computed(() =>\n  model.value ? formatTimeDisplay(model.value, resolvedLocale.value, resolvedFormat.value) : '',\n)\n\n// @a11y\n// Where the focus goes when the panel opens. The picker publishes where its own focus belongs,\n// so nothing here has to know that the target is a slider; the same arrangement VDateInput has\n// with VDatePicker.\nfunction focusInPanel() {\n  pickerRef.value?.focus()\n}\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts). Nothing else is needed here: the\n// AM/PM button lives INSIDE the field, so a 12 hour field is one box like any other and\n// the row has nothing of its own to join.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The whole \"field plus panel\" shell, shared with VDateInput. What is specific to this\n// component is only what happens around it: preparing the draft as the panel opens, and\n// clearing the announcement as it closes.\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  onFieldFocus,\n  toggleFromIcon,\n  onControlClick,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  // With no panel there is nothing to open. This is the composable's SINGLE cut-off point, and\n  // every way in passes through it; clicking the field, focusing it, the down arrow, Enter, the\n  // icon.\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel,\n  // Beside a field one types into, the panel opens on focus WITHOUT taking it, so typing\n  // carries on.\n  openOnFocus: () => typing.value,\n  onOpen: () => {\n    const parts = modelParts.value\n    if (parts) pickerDraft.value = formatTime(parts.hour, parts.minute)\n    // A clock opened BESIDE a field one types into starts empty: it opened because the\n    // field took the focus, not because a time was asked for, and a draft set to the\n    // current time would hand its half of the day to the digits about to be typed, so\n    // \"0930\" typed in the afternoon would become 21:30.\n    else if (typing.value) pickerDraft.value = null\n    else {\n      // Reading the clock is safe here: this runs from a handler, hence in a browser, never\n      // during a render; and it is why the picker itself never reads it, so that it stays\n      // identical on both sides of hydration. The instant is taken once: two reads could\n      // straddle a minute.\n      const now = new Date()\n      const wanted = snapMinute(now.getMinutes(), props.minuteStep)\n      // Pulled to the nearest time the restrictions allow, so that the panel never opens\n      // on one the reader would be refused. Null is a set of restrictions that allows\n      // nothing at all, which the warning above has already reported.\n      pickerDraft.value =\n        nearestAllowedTime(now.getHours(), wanted, limits.value) ??\n        formatTime(now.getHours(), wanted)\n    }\n    pickerRef.value?.reset()\n  },\n  onClose: () => {\n    pickerRef.value?.reset()\n  },\n})\n\n// Escape and the focus leaving both close without committing, as Cancel does: only OK writes\n// the value.\n\n/** OK: the ONE route by which the picker's draft becomes the value. */\nfunction confirm() {\n  if (pickerDraft.value) model.value = pickerDraft.value\n  closeAndFocus()\n}\n\n/** Cancel: the draft is simply dropped with the panel. */\nconst cancel = closeAndFocus\n\nconst inputAttrs = popupAttrs(\n  () => fieldAttrs.value,\n  () => hasPanel.value,\n)\n\n/*\n * Emptying the value, called by the field as it emits its clear event. The focus is taken\n * through `focusField`, whose note says why that stops the panel reopening.\n */\nfunction clearValue() {\n  model.value = null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  focusField()\n  emit('clear')\n}\n\nconst m = useMessages()\n\n// @core\n/**\n * Saying no to a time that is not one the restrictions allow. It is written unconditionally\n * rather than only while typing: the browser BARS a read-only control from constraint\n * validation, so the read-only form settles it without a branch here.\n */\nwatchEffect(\n  () => {\n    const el = fieldEl.value\n    if (!el) return\n    const own = m.value.timeInput.unavailable\n    if (!valueAllowed.value) el.setCustomValidity(own)\n    // Only the component's own message is taken back: a consumer's verdict written over it,\n    // a server saying the slot is taken, stays until the consumer clears it.\n    else if (el.validationMessage === own) el.setCustomValidity('')\n  },\n  { flush: 'post' },\n)\n\n/*\n * A time always has the HH:MM shape, so the caret is computed outright where a date has to look\n * for a separator it cannot predict, and a final commit is no different from a live one: there\n * is no two-digit year to expand.\n */\nconst {\n  draft,\n  fieldModel,\n  writeField,\n  commitOrRevert,\n  onFieldInput,\n  onKeydown: onMaskKeydown,\n  onPaste,\n} = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () => model.value,\n  writeValue: (time) => {\n    model.value = time\n    // With the clock open beside the field, it follows what is typed: otherwise OK would\n    // write the clock's time back over the one the reader has just typed.\n    if (open.value && hasPanel.value) pickerDraft.value = time\n  },\n  maxDigits: () => 4,\n  format: formatTimeMask,\n  caret: (_text, digitsBefore, inserting) => timeCaret(digitsBefore, inserting),\n  parse: (text) => parseTimeMask(text, resolvedFormat.value, currentMeridiem.value),\n  toMask: (time) => timeToMask(time, resolvedFormat.value),\n})\n\n// @keyboard\n// What the mask's keys mean for a time: typing anything that is not a digit,\n// the separator included so that \"9:30\" can be typed exactly as it reads, completes the\n// hour with a leading zero and moves on to the minutes; the down arrow is the one explicit\n// way from the field into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  onMaskKeydown(event, {\n    onSeparator: (el) => {\n      const digits = digitsOf(el.value)\n      if (digits.length === 1) writeField(formatTimeMask(`0${digits}`), 3)\n    },\n    onArrowDown: () => {\n      if (!open.value) return false\n      focusInPanel()\n      return true\n    },\n    onEnter: closeAndFocus,\n  })\n}\n\n/** Pasting. */\nfunction onFieldPaste(event: ClipboardEvent) {\n  onPaste(event, (pasted) =>\n    isValidTime(pasted)\n      ? pasted\n      : readWrittenTime(pasted, resolvedFormat.value, currentMeridiem.value),\n  )\n}\n\n/*\n * The list form must not reach these two at all, and being panel-less is not enough to keep it\n * out. `useFieldPanel.onKeydown` cancels the default on Enter before asking whether a panel can\n * open, so an Enter travelling up from the VCombobox would stop a surrounding form from being\n * submitted with nothing to show for it.\n */\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (!isList.value) onKeydown(event)\n}\n\nfunction onRootFocusout(event: FocusEvent) {\n  if (!isList.value) onFocusout(event)\n}\n\n/*\n * The list form is a VCombobox, given what a combobox cannot know about times: which rows to\n * offer, how a search matches one, and a value that is a nullable string where a combobox's is a\n * plain one.\n */\n\n/**\n * The rows the step and the restrictions offer, which the value does not enter into: a\n * change of value must not format up to 1440 times again.\n */\nconst baseOptions = computed<TimeOption[]>(() => {\n  if (!isList.value) return []\n  return timeList(props.minuteStep, resolvedLocale.value, resolvedFormat.value).filter((row) => {\n    // A list is read before it is chosen from, so a time it may not take has no reason to be in\n    // it, which is the picker's own rule for its numerals.\n    const parts = parseTime(row.value)\n    return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n  })\n})\n\n/**\n * The rows on offer. Without it the field would fall back to showing the raw canonical string;\n * \"09:07\" in a field that spells every other row \"9:07 AM\"; since a combobox labels a value\n * through the option carrying it.\n */\nconst options = computed<TimeOption[]>(() => {\n  const rows = baseOptions.value\n  const current = model.value\n  if (!isValidTime(current) || rows.some((row) => row.value === current)) return rows\n  const at = rows.findIndex((row) => row.value > current)\n  const extra: TimeOption = {\n    value: current,\n    label: formatTimeDisplay(current, resolvedLocale.value, resolvedFormat.value),\n  }\n  return at < 0 ? [...rows, extra] : [...rows.slice(0, at), extra, ...rows.slice(at)]\n})\n\n/**\n * The search, which accepts the digit run as well as the words; \"930\" finds 9:30, the way the\n * typed form's mask reads what it is given.\n */\nconst matchTime = (option: ListboxOption, query: string) =>\n  timeMatches(option.label, String(option.value), query)\n\n/**\n * The bridge to VCombobox, whose value is a plain string where this component's is\n * nullable: an emptied combobox says so with an empty string, which is not a time.\n */\nconst listModel = computed<string | string[]>({\n  get: () => model.value ?? '',\n  set: (value) => {\n    model.value = typeof value === 'string' && value ? value : null\n  },\n})\n\n/*\n * Whether the cross is shown has to be answered explicitly here: outside the typed mode the\n * field is read-only and would hide it, while the value comes from the panel. The `readonly`\n * PROP is the one case where that default answer was right: frozen, the field offers no route\n * to a new value, so it offers no route to none either.\n */\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n// Defined even when no icon is rendered: VInput warns at setup about a clickable icon without a\n// label, and cannot know whether the icon exists.\nconst endIconLabel = computed(() => props.pickerLabel ?? m.value.timeInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.timeInput.clear)\n\n/*\n * The three of them go through whichever field is on screen: in the list form there is no\n * VInput of this component's own, the VCombobox owning the one the reader sees. Exposing\n * the same trio as the other fields is what keeps a consumer's `ref` working whatever the\n * mode, which is a runtime prop they may well be binding.\n */\nconst field = computed(() => (isList.value ? listRef.value : inputRef.value))\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => field.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => field.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => field.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-time-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @focusout=\"onRootFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <!--\n      All this component adds is the three things a combobox cannot know about times; the rows,\n      the search, and a value that may be nothing.\n    -->\n    <VCombobox\n      v-if=\"isList\"\n      ref=\"listRef\"\n      v-model=\"listModel\"\n      v-bind=\"fieldAttrs\"\n      :options=\"options\"\n      :filter=\"matchTime\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :readonly=\"readonly\"\n      :invalid=\"invalid\"\n      :icon-start=\"iconStart\"\n      :icon-start-label=\"iconStartLabel\"\n      :clearable=\"clearable\"\n      :clear-label=\"clearLabel\"\n      :loading=\"loading\"\n      :loading-text=\"loadingText\"\n      :placement=\"placement\"\n      @clear=\"emit('clear')\"\n    />\n\n    <div v-else class=\"v-time-input-control\" @click=\"onControlClick\">\n      <!--\n        The field is declared a combobox rather than left as the plain text box it implicitly\n        is, because a text box may not carry the attribute saying whether something is expanded;\n        the same reasoning as in VDateInput.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"inputAttrs\"\n        :readonly=\"readonly\"\n        :no-typing=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :placeholder=\"placeholder ?? (typing ? m.timeInput.maskPlaceholder : undefined)\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        @click:icon-end=\"toggleFromIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      >\n        <!--\n          It is dropped when nothing follows it, or it would trail off the end of an otherwise\n          bare field.\n        -->\n        <template v-if=\"$slots.start\" #start><slot name=\"start\" /></template>\n        <template v-if=\"hasMeridiem || $slots['value-end']\" #value-end>\n          <button\n            v-if=\"hasMeridiem\"\n            type=\"button\"\n            class=\"v-input-action v-field-action v-time-input-meridiem\"\n            :disabled=\"resolvedDisabled\"\n            :aria-label=\"\n              m.timeInput.meridiemValue(\n                currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am,\n              )\n            \"\n            @click=\"toggleMeridiem\"\n          >\n            {{ currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am }}\n          </button>\n          <VSeparator\n            v-if=\"hasMeridiem && (clearVisible || endIcon)\"\n            orientation=\"vertical\"\n            class=\"v-time-input-divider\"\n          />\n          <slot name=\"value-end\" />\n        </template>\n      </VInput>\n    </div>\n\n    <!-- The absence of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--time-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      class=\"v-time-input-panel\"\n      :aria-label=\"label ?? m.timeInput.pickerLabel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <!--\n        The picker works on the DRAFT and not on the value, which makes OK the only way in:\n        Cancel, Escape and the focus leaving simply drop it. The two actions are handed to its\n        own footer slot, since they belong to this panel rather than to a clock shown on its\n        own.\n      -->\n      <VTimePicker\n        ref=\"pickerRef\"\n        v-model=\"pickerDraft\"\n        :format=\"resolvedFormat\"\n        :locale=\"resolvedLocale\"\n        :minute-step=\"minuteStep\"\n        :min=\"min\"\n        :max=\"max\"\n        :allowed-hours=\"allowedHours\"\n        :allowed-minutes=\"allowedMinutes\"\n        @confirm=\"confirm\"\n      >\n        <!--\n          The slot REPLACES the two buttons rather than sitting beside them, so it is handed\n          both actions: the clock writes a draft, and without `confirm` a footer of one's own\n          could never commit it; the value would become unchangeable through the panel. The\n          `remove` of VCombobox's `#chip` slot exists for the same reason.\n        -->\n        <template #footer>\n          <slot name=\"footer\" :confirm=\"confirm\" :cancel=\"cancel\" :close=\"cancel\">\n            <VButton variant=\"ghost\" tone=\"neutral\" @click=\"cancel\">{{ m.common.cancel }}</VButton>\n            <VButton @click=\"confirm\">{{ m.common.confirm }}</VButton>\n          </slot>\n        </template>\n      </VTimePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-time-input {\n    /* Confines the anchor name to this instance. It is declared on the root because that\n       is the common ancestor of the field and the panel. */\n    anchor-scope: --time-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-time-input:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: pointer;\n  }\n\n  /*\n   * Anchor through the clock/input wrapper only; list mode belongs to VCombobox and must retain\n   * its own anchor independently of stylesheet order.\n   */\n  .v-time-input-control .v-input-field {\n    anchor-name: --time-input-anchor;\n  }\n\n  /* A field one types into shows the text cursor rather than the pointer a clickable\n     control shows. Its figures are also given equal widths: with proportional ones the\n     text shifts as digits are typed, and the caret appears to jitter. */\n  .v-time-input[data-mode='input']:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: text;\n  }\n\n  .v-time-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Give the AM/PM action room for text while preserving the neighbouring icon buttons' minimum\n   * hit target.\n   */\n  .v-field-action.v-time-input-meridiem {\n    inline-size: auto;\n    min-inline-size: var(--control-action-size);\n    padding-inline: calc((var(--control-action-size) - var(--vectis-icon-size)) / 2);\n    font: inherit;\n  }\n\n  /*\n   * The rule between the AM/PM button and the field's own controls, which keeps a word from\n   * reading as a third icon in the row. A vertical VSeparator stretches to its flex line by\n   * contract, which here is the full height of the field: it would meet the border at both ends\n   * and read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-time-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  /*\n   * No `display` here either: the column layout is `.v-panel`'s, and a panel declaring its own\n   * is what the doubled-class `.v-overlay` guard exists to overrule. The selector compounds two\n   * classes VPopover puts on the same element, because the padding is also declared by the\n   * shared panel class: at equal specificity the winner would be whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-popover-panel.v-time-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n\n  /*\n   * The list form is a VCombobox and takes everything from it; this is the one declaration that\n   * does not belong to a combobox in general. A column of times read down the panel is a column\n   * of FIGURES, and proportional ones slide the colon from row to row.\n   */\n  .v-time-input[data-mode='list'] .v-combobox-panel {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTimeInput.js","names":["_sfc_main","VTimeInput_vue_vue_type_script_setup_true_lang_default","VTimeInput_default"],"sources":["../../../src/components/VTimeInput/VTimeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose typing and clock modes from VInput and VTimePicker; list mode delegates to VCombobox.\n * JavaScript supplies masking and manual panel focus because text inputs cannot use\n * popovertarget.\n */\n\nimport { computed, inject, provide, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCombobox from '../VCombobox/VCombobox.vue'\nimport type { ListboxOption } from '../../types'\nimport { inputGroupKey } from '../VInput/context'\nimport { schedule as scheduleIcon } from '../VIcon/icons/schedule'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VSeparator from '../VSeparator/VSeparator.vue'\nimport VTimePicker from '../VTimePicker/VTimePicker.vue'\nimport type { TimePickerFormat } from '../VTimePicker/VTimePicker.vue'\nimport {\n  isTimeAllowed,\n  limitsProblem,\n  nearestAllowedTime,\n  resolveLimits,\n} from '../VTimePicker/limits'\nimport type { TimePickerAllowed } from '../VTimePicker/limits'\nimport {\n  formatTime,\n  formatTimeDisplay,\n  hourCycleFor,\n  isValidTime,\n  parseTime,\n} from '../../utils/time'\nimport {\n  formatTimeMask,\n  parseTimeMask,\n  snapMinute,\n  timeCaret,\n  timeList,\n  timeToMask,\n  to12h,\n  withMeridiem,\n} from '../../utils/clock'\nimport type { Meridiem } from '../../utils/time'\nimport type { TimeOption } from '../../utils/clock'\nimport { readWrittenTime, timeMatches } from './search'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { digitsOf } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * Whether the field can be typed into, only filled from the clock, or picked from a list of\n * times.\n */\nexport type TimeInputMode = 'picker' | 'input' | 'list'\n\n/** What the `#footer` slot receives. */\nexport interface TimeInputFooterSlotProps {\n  /** Writes the time on the clock into the value, then closes. */\n  confirm: () => void\n  /** Closes and drops the time on the clock, the value left as it was. */\n  cancel: () => void\n  /** The same as `cancel`, under the name VDateInput's footer uses. */\n  close: () => void\n}\n\nconst MODES: TimeInputMode[] = ['picker', 'input', 'list']\n\n/** Where the panel opens relative to the field, whether it holds the clock or the list. */\nexport type TimeInputPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type TimeInputSize = 'sm' | 'md' | 'lg'\n\ninterface TimeInputProps {\n  /**\n   * Whether times are shown on a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * Which form the field takes: one that can be TYPED into, a `picker` one where the\n   * clock is the only way in (so the picker is forced on there), or a searchable LIST of\n   * times at a fixed interval, where a picker would make no sense.\n   */\n  mode?: TimeInputMode\n  /**\n   * Offers the picker beside a field one can type into: an icon at the end of the field, and a\n   * panel it opens.\n   */\n  showPicker?: boolean\n  /**\n   * The interval between two times that can be chosen. It applies to the picker, to the\n   * arrow keys and to the rows of the list.\n   */\n  minuteStep?: number\n  /**\n   * The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`.\n   * The picker and the list both LEAVE OUT what it rules out, and a time typed past it\n   * makes the field invalid.\n   */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /**\n   * Which hours can be chosen: the list of them, or a rule answering for one. The hour\n   * handed to a rule is always the 24-hour one, whichever clock is on display.\n   */\n  allowedHours?: TimePickerAllowed\n  /** Which minutes can be chosen: the list of them, or a rule answering for one. */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES\n   * PRECEDENCE over the design system's global locale and falls back to it, which is why\n   * it has no literal default: `undefined` has to stay recognizable for the global locale\n   * to have its chance.\n   */\n  locale?: string\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\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 field 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  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: TimeInputSize\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the time without letting it be changed: nothing can be typed, there is no clock and\n   * no clear cross.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the clock button does, in words. It names the button `pickerIcon` renders,\n   * and falls back to the design system dictionary.\n   */\n  pickerLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the clock icon. It says that\n   * something is being loaded and changes nothing else: the field can still be typed\n   * into and the panel still opens.\n   */\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  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The icon that opens the PICKER, at the end of the field. It has no effect on the list\n   * form, whose chevron follows the combobox convention. The clear cross appears to its\n   * left rather than in its place.\n   */\n  pickerIcon?: IconSource\n  /** Where the panel opens relative to the field, whether it holds the clock or the list. */\n  placement?: TimeInputPlacement\n}\n\nconst props = withDefaults(defineProps<TimeInputProps>(), {\n  format: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and therefore\n  // what allows warning only the consumer who explicitly asked for something that cannot work.\n  mode: undefined,\n  showPicker: false,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  locale: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  pickerIcon: () => scheduleIcon,\n  placement: 'bottom-start',\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * as in VInput.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, after the AM/PM button when there is one and before\n   * the ones the field owns: the clear cross and the icon that opens the panel.\n   */\n  'value-end'?(): unknown\n  /**\n   * The strip at the foot of the clock, which REPLACES the Cancel and OK buttons rather than\n   * joining them.\n   */\n  footer?(props: TimeInputFooterSlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field on screen; the masked VInput or the list's VCombobox. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst listRef = ref<InstanceType<typeof VCombobox> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VTimePicker> | null>(null)\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\nconst resolvedMode = computed<TimeInputMode>(() => {\n  // The default is applied before the value is checked. A prop that was never given is not an\n  // unknown value, and treating it as one would warn on a bare `<VTimeInput />`.\n  const mode = props.mode ?? 'input'\n  return MODES.includes(mode) ? mode : 'input'\n})\nconst typing = computed(() => resolvedMode.value === 'input')\nconst isList = computed(() => resolvedMode.value === 'list')\n/**\n * Whether this component builds a panel of its own, which is the clock's: the list form hands\n * that job to VCombobox.\n */\nconst hasPanel = computed(\n  () => !props.readonly && (resolvedMode.value === 'picker' || (typing.value && props.showPicker)),\n)\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once. */\nconst limits = computed(() => resolveLimits(props))\n\n/** Whether the value is one the restrictions allow. Nothing at all is not a breach. */\nconst valueAllowed = computed(() => {\n  const parts = modelParts.value\n  return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n})\n\n// @devwarn\nif (isDev) {\n  // The clock receives `minuteStep` and the restrictions as they stand, so what it would say\n  // about them is said here, under the name the consumer wrote (utils/hostWarns).\n  provide(hostWarnsKey, true)\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimeInput] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VTimeInput] unknown mode \"${props.mode}\": use \"input\" (the default), \"picker\" or \"list\".`,\n      )\n    if (isList.value && props.showPicker)\n      console.warn(\n        '[VTimeInput] showPicker is ignored in \"list\" mode: the list of times is the only panel.',\n      )\n    // The list form is a VCombobox, which draws the end of the field itself: its own chevron in\n    // place of the clock. The two props that describe this component's end icon therefore reach\n    // nothing at all, and their absence is invisible on screen.\n    const inert = ([] as string[]).concat(\n      props.pickerIcon !== scheduleIcon ? 'pickerIcon' : [],\n      props.pickerLabel ? 'pickerLabel' : [],\n    )\n    const isAre = inert.length > 1 ? 'are' : 'is'\n    if (isList.value && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored in \"list\" mode: the list draws its own chevron.`,\n      )\n    // A field one types into without the picker has no end icon either, as in VDateInput.\n    // A read-only field is left out: it is a state that comes and goes, not a configuration\n    // to correct.\n    if (typing.value && !props.showPicker && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored without showPicker: a field one types into has no clock icon unless it offers the clock.`,\n      )\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimeInput] ${problem}`)\n    if (isList.value && props.minuteStep < 5)\n      console.warn(\n        `[VTimeInput] minuteStep ${props.minuteStep} in \"list\" mode would render ${Math.ceil(1440 / props.minuteStep)} rows: a step of 15 or 30 minutes is expected.`,\n      )\n  })\n}\n\n/** The time being built on the clock, in the same canonical form as the value itself. */\nconst pickerDraft = ref<string | null>(null)\n\nconst modelParts = computed(() => parseTime(model.value))\n\n/** The half of the day chosen while no time is set: VTimePicker's own `pendingMeridiem`. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day the FIELD is showing. It is what the mask needs: typing \"9:30\" says\n * nothing about the morning or the afternoon, so the answer has to be readable while the\n * panel is shut.\n */\nconst currentMeridiem = computed<Meridiem>(() => {\n  // With the picker open it is the DRAFT that is on screen, and this control has to read\n  // the same thing: two controls showing opposite halves of the day until OK is pressed\n  // is the one state that must not happen.\n  const parts = open.value && hasPanel.value ? parseTime(pickerDraft.value) : modelParts.value\n  return parts ? to12h(parts.hour).meridiem : pendingMeridiem.value\n})\n\n/**\n * The button beside the value flips the half of the day. There is no third state to reach,\n * so it names the half it is showing and swaps to the other one on a click.\n */\nfunction toggleMeridiem() {\n  const next: Meridiem = currentMeridiem.value === 'PM' ? 'AM' : 'PM'\n  pendingMeridiem.value = next\n  // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n  // and applies to the first time typed or chosen.\n  const moved = withMeridiem(model.value, next)\n  if (moved) model.value = moved\n  // With the picker open the draft has to follow as well, or OK would write back the\n  // half of the day the reader has just changed.\n  const pending = open.value && hasPanel.value ? withMeridiem(pickerDraft.value, next) : null\n  if (pending) pickerDraft.value = pending\n}\n\n/** Whether the button is rendered at all. */\nconst hasMeridiem = computed(\n  () => typing.value && !props.readonly && resolvedFormat.value === '12h',\n)\n\nconst hasValue = computed(() => !!modelParts.value)\nconst displayText = computed(() =>\n  model.value ? formatTimeDisplay(model.value, resolvedLocale.value, resolvedFormat.value) : '',\n)\n\n// @a11y\n// Where the focus goes when the panel opens. The picker publishes where its own focus belongs,\n// so nothing here has to know that the target is a slider; the same arrangement VDateInput has\n// with VDatePicker.\nfunction focusInPanel() {\n  pickerRef.value?.focus()\n}\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts). Nothing else is needed here: the\n// AM/PM button lives INSIDE the field, so a 12 hour field is one box like any other and\n// the row has nothing of its own to join.\nconst group = inject(inputGroupKey, null)\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\n// The whole \"field plus panel\" shell, shared with VDateInput. What is specific to this\n// component is only what happens around it: preparing the draft as the panel opens, and\n// clearing the announcement as it closes.\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  onFieldFocus,\n  toggleFromIcon,\n  onControlClick,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  // With no panel there is nothing to open. This is the composable's SINGLE cut-off point, and\n  // every way in passes through it; clicking the field, focusing it, the down arrow, Enter, the\n  // icon.\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel,\n  // Beside a field one types into, the panel opens on focus WITHOUT taking it, so typing\n  // carries on.\n  openOnFocus: () => typing.value,\n  onOpen: () => {\n    const parts = modelParts.value\n    if (parts) pickerDraft.value = formatTime(parts.hour, parts.minute)\n    // A clock opened BESIDE a field one types into starts empty: it opened because the\n    // field took the focus, not because a time was asked for, and a draft set to the\n    // current time would hand its half of the day to the digits about to be typed, so\n    // \"0930\" typed in the afternoon would become 21:30.\n    else if (typing.value) pickerDraft.value = null\n    else {\n      // Reading the clock is safe here: this runs from a handler, hence in a browser, never\n      // during a render; and it is why the picker itself never reads it, so that it stays\n      // identical on both sides of hydration. The instant is taken once: two reads could\n      // straddle a minute.\n      const now = new Date()\n      const wanted = snapMinute(now.getMinutes(), props.minuteStep)\n      // Pulled to the nearest time the restrictions allow, so that the panel never opens\n      // on one the reader would be refused. Null is a set of restrictions that allows\n      // nothing at all, which the warning above has already reported.\n      pickerDraft.value =\n        nearestAllowedTime(now.getHours(), wanted, limits.value) ??\n        formatTime(now.getHours(), wanted)\n    }\n    pickerRef.value?.reset()\n  },\n  onClose: () => {\n    pickerRef.value?.reset()\n  },\n})\n\n// Escape and the focus leaving both close without committing, as Cancel does: only OK writes\n// the value.\n\n/** OK: the ONE route by which the picker's draft becomes the value. */\nfunction confirm() {\n  if (pickerDraft.value) model.value = pickerDraft.value\n  closeAndFocus()\n}\n\n/** Cancel: the draft is simply dropped with the panel. */\nconst cancel = closeAndFocus\n\nconst inputAttrs = popupAttrs(\n  () => fieldAttrs.value,\n  () => hasPanel.value,\n)\n\n/*\n * Emptying the value, called by the field as it emits its clear event. The focus is taken\n * through `focusField`, whose note says why that stops the panel reopening.\n */\nfunction clearValue() {\n  model.value = null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  focusField()\n  emit('clear')\n}\n\nconst m = useMessages()\n\n// @core\n/**\n * Saying no to a time that is not one the restrictions allow. It is written unconditionally\n * rather than only while typing: the browser BARS a read-only control from constraint\n * validation, so the read-only form settles it without a branch here.\n */\nwatchEffect(\n  () => {\n    const el = fieldEl.value\n    if (!el) return\n    const own = m.value.timeInput.unavailable\n    if (!valueAllowed.value) el.setCustomValidity(own)\n    // Only the component's own message is taken back: a consumer's verdict written over it,\n    // a server saying the slot is taken, stays until the consumer clears it.\n    else if (el.validationMessage === own) el.setCustomValidity('')\n  },\n  { flush: 'post' },\n)\n\n/*\n * A time always has the HH:MM shape, so the caret is computed outright where a date has to look\n * for a separator it cannot predict, and a final commit is no different from a live one: there\n * is no two-digit year to expand.\n */\nconst {\n  draft,\n  fieldModel,\n  writeField,\n  commitOrRevert,\n  onFieldInput,\n  onKeydown: onMaskKeydown,\n  onPaste,\n} = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () => model.value,\n  writeValue: (time) => {\n    model.value = time\n    // With the clock open beside the field, it follows what is typed: otherwise OK would\n    // write the clock's time back over the one the reader has just typed.\n    if (open.value && hasPanel.value) pickerDraft.value = time\n  },\n  maxDigits: () => 4,\n  format: formatTimeMask,\n  caret: (_text, digitsBefore, inserting) => timeCaret(digitsBefore, inserting),\n  parse: (text) => parseTimeMask(text, resolvedFormat.value, currentMeridiem.value),\n  toMask: (time) => timeToMask(time, resolvedFormat.value),\n})\n\n// @keyboard\n// What the mask's keys mean for a time: typing anything that is not a digit,\n// the separator included so that \"9:30\" can be typed exactly as it reads, completes the\n// hour with a leading zero and moves on to the minutes; the down arrow is the one explicit\n// way from the field into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  onMaskKeydown(event, {\n    onSeparator: (el) => {\n      const digits = digitsOf(el.value)\n      if (digits.length === 1) writeField(formatTimeMask(`0${digits}`), 3)\n    },\n    onArrowDown: () => {\n      if (!open.value) return false\n      focusInPanel()\n      return true\n    },\n    onEnter: closeAndFocus,\n  })\n}\n\n/** Pasting. */\nfunction onFieldPaste(event: ClipboardEvent) {\n  onPaste(event, (pasted) =>\n    isValidTime(pasted)\n      ? pasted\n      : readWrittenTime(pasted, resolvedFormat.value, currentMeridiem.value),\n  )\n}\n\n/*\n * The list form must not reach these two at all, and being panel-less is not enough to keep it\n * out. `useFieldPanel.onKeydown` cancels the default on Enter before asking whether a panel can\n * open, so an Enter travelling up from the VCombobox would stop a surrounding form from being\n * submitted with nothing to show for it.\n */\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (!isList.value) onKeydown(event)\n}\n\nfunction onRootFocusout(event: FocusEvent) {\n  if (!isList.value) onFocusout(event)\n}\n\n/*\n * The list form is a VCombobox, given what a combobox cannot know about times: which rows to\n * offer, how a search matches one, and a value that is a nullable string where a combobox's is a\n * plain one.\n */\n\n/**\n * The rows the step and the restrictions offer, which the value does not enter into: a\n * change of value must not format up to 1440 times again.\n */\nconst baseOptions = computed<TimeOption[]>(() => {\n  if (!isList.value) return []\n  return timeList(props.minuteStep, resolvedLocale.value, resolvedFormat.value).filter((row) => {\n    // A list is read before it is chosen from, so a time it may not take has no reason to be in\n    // it, which is the picker's own rule for its numerals.\n    const parts = parseTime(row.value)\n    return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n  })\n})\n\n/**\n * The rows on offer. Without it the field would fall back to showing the raw canonical string;\n * \"09:07\" in a field that spells every other row \"9:07 AM\"; since a combobox labels a value\n * through the option carrying it.\n */\nconst options = computed<TimeOption[]>(() => {\n  const rows = baseOptions.value\n  const current = model.value\n  if (!isValidTime(current) || rows.some((row) => row.value === current)) return rows\n  const at = rows.findIndex((row) => row.value > current)\n  const extra: TimeOption = {\n    value: current,\n    label: formatTimeDisplay(current, resolvedLocale.value, resolvedFormat.value),\n  }\n  return at < 0 ? [...rows, extra] : [...rows.slice(0, at), extra, ...rows.slice(at)]\n})\n\n/**\n * The search, which accepts the digit run as well as the words; \"930\" finds 9:30, the way the\n * typed form's mask reads what it is given.\n */\nconst matchTime = (option: ListboxOption, query: string) =>\n  timeMatches(option.label, String(option.value), query)\n\n/**\n * The bridge to VCombobox, whose value is a plain string where this component's is\n * nullable: an emptied combobox says so with an empty string, which is not a time.\n */\nconst listModel = computed<string | string[]>({\n  get: () => model.value ?? '',\n  set: (value) => {\n    model.value = typeof value === 'string' && value ? value : null\n  },\n})\n\n/*\n * Whether the cross is shown has to be answered explicitly here: outside the typed mode the\n * field is read-only and would hide it, while the value comes from the panel. The `readonly`\n * PROP is the one case where that default answer was right: frozen, the field offers no route\n * to a new value, so it offers no route to none either.\n */\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n// Defined even when no icon is rendered: VInput warns at setup about a clickable icon without a\n// label, and cannot know whether the icon exists.\nconst endIconLabel = computed(() => props.pickerLabel ?? m.value.timeInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.timeInput.clear)\n\n/*\n * The three of them go through whichever field is on screen: in the list form there is no\n * VInput of this component's own, the VCombobox owning the one the reader sees. Exposing\n * the same trio as the other fields is what keeps a consumer's `ref` working whatever the\n * mode, which is a runtime prop they may well be binding.\n */\nconst field = computed(() => (isList.value ? listRef.value : inputRef.value))\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => field.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => field.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => field.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-time-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @focusout=\"onRootFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <!--\n      All this component adds is the three things a combobox cannot know about times; the rows,\n      the search, and a value that may be nothing.\n    -->\n    <VCombobox\n      v-if=\"isList\"\n      ref=\"listRef\"\n      v-model=\"listModel\"\n      v-bind=\"fieldAttrs\"\n      :options=\"options\"\n      :filter=\"matchTime\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :disabled=\"resolvedDisabled\"\n      :readonly=\"readonly\"\n      :invalid=\"invalid\"\n      :icon-start=\"iconStart\"\n      :icon-start-label=\"iconStartLabel\"\n      :clearable=\"clearable\"\n      :clear-label=\"clearLabel\"\n      :loading=\"loading\"\n      :loading-text=\"loadingText\"\n      :placement=\"placement\"\n      @clear=\"emit('clear')\"\n    />\n\n    <div v-else class=\"v-time-input-control\" @click=\"onControlClick\">\n      <!--\n        The field is declared a combobox rather than left as the plain text box it implicitly\n        is, because a text box may not carry the attribute saying whether something is expanded;\n        the same reasoning as in VDateInput.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"inputAttrs\"\n        :readonly=\"readonly\"\n        :no-typing=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :placeholder=\"placeholder ?? (typing ? m.timeInput.maskPlaceholder : undefined)\"\n        :size=\"resolvedSize\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        @click:icon-end=\"toggleFromIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      >\n        <!--\n          It is dropped when nothing follows it, or it would trail off the end of an otherwise\n          bare field.\n        -->\n        <template v-if=\"$slots.start\" #start><slot name=\"start\" /></template>\n        <template v-if=\"hasMeridiem || $slots['value-end']\" #value-end>\n          <button\n            v-if=\"hasMeridiem\"\n            type=\"button\"\n            class=\"v-input-action v-field-action v-time-input-meridiem\"\n            :disabled=\"resolvedDisabled\"\n            :aria-label=\"\n              m.timeInput.meridiemValue(\n                currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am,\n              )\n            \"\n            @click=\"toggleMeridiem\"\n          >\n            {{ currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am }}\n          </button>\n          <VSeparator\n            v-if=\"hasMeridiem && (clearVisible || endIcon)\"\n            orientation=\"vertical\"\n            class=\"v-time-input-divider\"\n          />\n          <slot name=\"value-end\" />\n        </template>\n      </VInput>\n    </div>\n\n    <!-- The absence of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--time-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      class=\"v-time-input-panel\"\n      :aria-label=\"label ?? m.timeInput.pickerLabel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <!--\n        The picker works on the DRAFT and not on the value, which makes OK the only way in:\n        Cancel, Escape and the focus leaving simply drop it. The two actions are handed to its\n        own footer slot, since they belong to this panel rather than to a clock shown on its\n        own.\n      -->\n      <VTimePicker\n        ref=\"pickerRef\"\n        v-model=\"pickerDraft\"\n        :format=\"resolvedFormat\"\n        :locale=\"resolvedLocale\"\n        :minute-step=\"minuteStep\"\n        :min=\"min\"\n        :max=\"max\"\n        :allowed-hours=\"allowedHours\"\n        :allowed-minutes=\"allowedMinutes\"\n        @confirm=\"confirm\"\n      >\n        <!--\n          The slot REPLACES the two buttons rather than sitting beside them, so it is handed\n          both actions: the clock writes a draft, and without `confirm` a footer of one's own\n          could never commit it; the value would become unchangeable through the panel. The\n          `remove` of VCombobox's `#chip` slot exists for the same reason.\n        -->\n        <template #footer>\n          <slot name=\"footer\" :confirm=\"confirm\" :cancel=\"cancel\" :close=\"cancel\">\n            <VButton variant=\"ghost\" tone=\"neutral\" @click=\"cancel\">{{ m.common.cancel }}</VButton>\n            <VButton @click=\"confirm\">{{ m.common.confirm }}</VButton>\n          </slot>\n        </template>\n      </VTimePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-time-input {\n    /* Confines the anchor name to this instance. It is declared on the root because that\n       is the common ancestor of the field and the panel. */\n    anchor-scope: --time-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-time-input:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: pointer;\n  }\n\n  /*\n   * Anchor through the clock/input wrapper only; list mode belongs to VCombobox and must retain\n   * its own anchor independently of stylesheet order.\n   */\n  .v-time-input-control .v-input-field {\n    anchor-name: --time-input-anchor;\n  }\n\n  /* A field one types into shows the text cursor rather than the pointer a clickable\n     control shows. Its figures are also given equal widths: with proportional ones the\n     text shifts as digits are typed, and the caret appears to jitter. */\n  .v-time-input[data-mode='input']:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: text;\n  }\n\n  .v-time-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Give the AM/PM action room for text while preserving the neighbouring icon buttons' minimum\n   * hit target.\n   */\n  .v-field-action.v-time-input-meridiem {\n    inline-size: auto;\n    min-inline-size: var(--control-action-size);\n    padding-inline: calc((var(--control-action-size) - var(--vectis-icon-size)) / 2);\n    font: inherit;\n  }\n\n  /*\n   * The rule between the AM/PM button and the field's own controls, which keeps a word from\n   * reading as a third icon in the row. A vertical VSeparator stretches to its flex line by\n   * contract, which here is the full height of the field: it would meet the border at both ends\n   * and read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-time-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  /*\n   * No `display` here either: the column layout is `.v-panel`'s, and a panel declaring its own\n   * is what the doubled-class `.v-overlay` guard exists to overrule. The selector compounds two\n   * classes VPopover puts on the same element, because the padding is also declared by the\n   * shared panel class: at equal specificity the winner would be whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-popover-panel.v-time-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n\n  /*\n   * The list form is a VCombobox and takes everything from it; this is the one declaration that\n   * does not belong to a combobox in general. A column of times read down the panel is a column\n   * of FIGURES, and proportional ones slide the colon from row to row.\n   */\n  .v-time-input[data-mode='list'] .v-combobox-panel {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}