vectis-ui 0.14.0 → 0.15.0

package/dist/components/VInput/VInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInput.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref, useId } 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 { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\nimport { joinIds } from '../../utils/ids'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\n/**\n * What the `#control` slot hands over, to bind on the element replacing the input: its id, which\n * the label points at, the class the field's states are drawn from, the references to the hint\n * and the error, and the attributes set on the field other than `class` and `style`. `required`\n * is left out: the replacing element states it in its own way.\n */\nexport type InputControlProps = {\n  id: string\n  class: string\n  disabled: boolean\n  'aria-invalid'?: 'true'\n  'aria-describedby'?: string\n} & Record<string, unknown>\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label, tied to the field so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so 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 input 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\n   * design 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\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\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, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\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  noTyping: 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 place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): 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   * Replaces the input with another control, for a field composed on top of this one: VSelect\n   * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and\n   * disabled states from that control. The model, the limit and the counter apply to the input\n   * alone.\n   */\n  control?(props: { controlProps: InputControlProps }): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the\n   * field's description, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst counterId = useId()\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/**\n * The attributes of the input, built on VField's: the consumer's attributes win over the\n * `invalid` prop, and the counter inside the field joins the description last.\n */\nfunction inputAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    'aria-invalid': props.invalid ? 'true' : undefined,\n    ...fieldProps,\n    'aria-describedby': joinIds(fieldProps['aria-describedby'], props.counter && counterId),\n  }\n}\n\nfunction controlProps(fieldProps: FieldControlProps): InputControlProps {\n  const bound = inputAttrs(fieldProps)\n  delete bound.required\n  return { ...bound, class: 'v-input-control', disabled: resolvedDisabled.value }\n}\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, 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-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-input-field v-control\"\n        :data-size=\"resolvedSize\"\n        :data-compact=\"resolvedCompact ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n      >\n        <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-start\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"resolvedDisabled\"\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-input-icon-start\" />\n        <slot name=\"start\" />\n\n        <slot name=\"control\" :control-props=\"controlProps(fieldProps)\">\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          <input\n            ref=\"controlEl\"\n            v-model=\"model\"\n            v-bind=\"inputAttrs(fieldProps)\"\n            class=\"v-input-control\"\n            :type=\"type\"\n            :maxlength=\"softLimit ? undefined : maxlength\"\n            :disabled=\"resolvedDisabled\"\n            :readonly=\"readonly || noTyping || undefined\"\n          />\n        </slot>\n\n        <span\n          v-if=\"counter\"\n          :id=\"counterId\"\n          class=\"v-input-counter v-field-counter\"\n          :data-over=\"over ? '' : undefined\"\n        >\n          {{ counterText }}\n        </span>\n\n        <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n        <slot name=\"value-end\" />\n\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-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-input-action v-field-action v-input-icon-end\"\n            :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n            :disabled=\"resolvedDisabled\"\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-input-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"$slots.meta\" #meta=\"{ id }\"><slot :id=\"id\" name=\"meta\" /></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-input {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background and the focus ring, and the size and\n   * state attributes. `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    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-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\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  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\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-input .v-input-field[data-readonly] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-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; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-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-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\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-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\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-input .v-input-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  }\n\n  .v-input-field[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input-field[data-disabled] .v-input-action,\n  .v-input-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VInput.js","names":["_sfc_main","VInput_vue_vue_type_script_setup_true_lang_default","VInput_default"],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref, useId } 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 { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\nimport { joinIds } from '../../utils/ids'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\n/**\n * What the `#control` slot hands over, to bind on the element replacing the input: its id, which\n * the label points at, the class the field's states are drawn from, the references to the hint\n * and the error, and the attributes set on the field other than `class` and `style`. `required`\n * is left out: the replacing element states it in its own way.\n */\nexport type InputControlProps = {\n  id: string\n  class: string\n  disabled: boolean\n  'aria-invalid'?: 'true'\n  'aria-describedby'?: string\n} & Record<string, unknown>\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label, tied to the field so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so 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 input 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\n   * design 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\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\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, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\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  noTyping: 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 place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): 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   * Replaces the input with another control, for a field composed on top of this one: VSelect\n   * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and\n   * disabled states from that control. The model, the limit and the counter apply to the input\n   * alone.\n   */\n  control?(props: { controlProps: InputControlProps }): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the\n   * field's description, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst counterId = useId()\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/**\n * The attributes of the input, built on VField's: the consumer's attributes win over the\n * `invalid` prop, and the counter inside the field joins the description last.\n */\nfunction inputAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    'aria-invalid': props.invalid ? 'true' : undefined,\n    ...fieldProps,\n    'aria-describedby': joinIds(fieldProps['aria-describedby'], props.counter && counterId),\n  }\n}\n\nfunction controlProps(fieldProps: FieldControlProps): InputControlProps {\n  const bound = inputAttrs(fieldProps)\n  delete bound.required\n  return { ...bound, class: 'v-input-control', disabled: resolvedDisabled.value }\n}\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, 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-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-input-field v-control\"\n        :data-size=\"resolvedSize\"\n        :data-compact=\"resolvedCompact ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n      >\n        <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-start\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"resolvedDisabled\"\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-input-icon-start\" />\n        <slot name=\"start\" />\n\n        <slot name=\"control\" :control-props=\"controlProps(fieldProps)\">\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          <input\n            ref=\"controlEl\"\n            v-model=\"model\"\n            v-bind=\"inputAttrs(fieldProps)\"\n            class=\"v-input-control\"\n            :type=\"type\"\n            :maxlength=\"softLimit ? undefined : maxlength\"\n            :disabled=\"resolvedDisabled\"\n            :readonly=\"readonly || noTyping || undefined\"\n          />\n        </slot>\n\n        <span\n          v-if=\"counter\"\n          :id=\"counterId\"\n          class=\"v-input-counter v-field-counter\"\n          :data-over=\"over ? '' : undefined\"\n        >\n          {{ counterText }}\n        </span>\n\n        <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n        <slot name=\"value-end\" />\n\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-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-input-action v-field-action v-input-icon-end\"\n            :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n            :disabled=\"resolvedDisabled\"\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-input-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"$slots.meta\" #meta=\"{ id }\"><slot :id=\"id\" name=\"meta\" /></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-input {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background and the focus ring, and the size and\n   * state attributes. `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    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-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\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  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\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-input .v-input-field[data-readonly] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-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; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-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-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\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-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\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-input .v-input-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  }\n\n  .v-input-field[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input-field[data-disabled] .v-input-action,\n  .v-input-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VInput/VInput.vue_vue_type_script_setup_true_lang.js

@@ -98,21 +98,21 @@ var M = [
 		"clear"
 	], ["update:modelValue"]),
 	setup(v, { expose: x, emit: R }) {
-		let z = v, B = R, V = O(v, "modelValue"), H = f(() => String(V.value ?? "")), { rootClass: ae, rootStyle: U, forwardedAttrs: W } = o(), { size: G, compact: K, disabled: q } = i(z, b(d, null)), J = e(), oe = f(() => z.clearLabel ?? J.value.common.clear), Y = D(), { hasIconStartHandler: se, hasIconEndHandler: ce } = te({
+		let z = v, B = R, V = O(v, "modelValue"), H = f(() => String(V.value ?? "")), { rootClass: ae, rootStyle: U, forwardedAttrs: W } = o(), G = b(d, null), { size: K, compact: q, disabled: J } = i(z, G), oe = e(), se = f(() => z.clearLabel ?? oe.value.common.clear), Y = D(), { hasIconStartHandler: ce, hasIconEndHandler: le } = te({
 			name: "VInput",
 			iconStartLabel: z.iconStartLabel,
 			iconEndLabel: z.iconEndLabel
-		}), X = re(null), { showClear: le, onClear: Z } = l({
+		}), X = re(null), { showClear: ue, onClear: Z } = l({
 			clearable: () => z.clearable,
 			clearVisible: () => z.clearVisible,
-			disabled: () => q.value,
+			disabled: () => J.value,
 			readonly: () => z.readonly,
 			text: () => H.value,
 			controlEl: X,
 			onCleared: () => {
 				V.value = "", B("clear");
 			}
-		}), { counterText: ue, over: Q } = u({
+		}), { counterText: Q, over: de } = u({
 			el: X,
 			text: () => H.value,
 			maxlength: () => z.maxlength,
@@ -125,12 +125,12 @@ var M = [
 				"aria-describedby": s(e["aria-describedby"], z.counter && Y)
 			};
 		}
-		function de(e) {
+		function fe(e) {
 			let t = $(e);
 			return delete t.required, {
 				...t,
 				class: "v-input-control",
-				disabled: q.value
+				disabled: J.value
 			};
 		}
 		return x({
@@ -144,27 +144,27 @@ var M = [
 			hint: v.hint,
 			error: v.error,
 			required: v.required,
-			disabled: E(q),
+			disabled: E(J),
 			"hide-label": v.hideLabel,
 			"label-position": v.labelPosition
 		}), ne({
 			default: A(({ fieldProps: o }) => [g("div", {
 				class: "v-input-field v-control",
-				"data-size": E(G),
-				"data-compact": E(K) ? "" : void 0,
-				"data-disabled": E(q) ? "" : void 0,
+				"data-size": E(K),
+				"data-compact": E(q) ? "" : void 0,
+				"data-disabled": E(J) ? "" : void 0,
 				"data-readonly": v.readonly ? "" : void 0
 			}, [
-				v.iconStart && E(se) ? (w(), h("button", {
+				v.iconStart && E(ce) ? (w(), h("button", {
 					key: 0,
 					type: "button",
 					class: "v-input-action v-field-action v-input-icon-start",
 					"aria-label": v.iconStartLabel ?? E(t)(v.iconStart),
-					disabled: E(q),
+					disabled: E(J),
 					onClick: i[0] ||= (e) => B("click:icon-start", e)
 				}, [_(r, C(y(E(n)(v.iconStart))), null, 16)], 8, N)) : v.iconStart ? (w(), p(r, S({ key: 1 }, E(n)(v.iconStart), { class: "v-input-icon-start" }), null, 16)) : m("", !0),
 				T(e.$slots, "start"),
-				T(e.$slots, "control", { controlProps: de(o) }, () => [j(g("input", S({
+				T(e.$slots, "control", { controlProps: fe(o) }, () => [j(g("input", S({
 					ref_key: "controlEl",
 					ref: X,
 					"onUpdate:modelValue": i[1] ||= (e) => V.value = e
@@ -172,32 +172,32 @@ var M = [
 					class: "v-input-control",
 					type: v.type,
 					maxlength: v.softLimit ? void 0 : v.maxlength,
-					disabled: E(q),
+					disabled: E(J),
 					readonly: v.readonly || v.noTyping || void 0
 				}), null, 16, P), [[k, V.value]])]),
 				v.counter ? (w(), h("span", {
 					key: 2,
 					id: E(Y),
 					class: "v-input-counter v-field-counter",
-					"data-over": E(Q) ? "" : void 0
-				}, ie(E(ue)), 9, F)) : m("", !0),
+					"data-over": E(de) ? "" : void 0
+				}, ie(E(Q)), 9, F)) : m("", !0),
 				T(e.$slots, "value-end"),
-				E(le) ? (w(), h("button", {
+				E(ue) ? (w(), h("button", {
 					key: 3,
 					type: "button",
 					class: "v-input-action v-field-action v-input-clear",
-					"aria-label": oe.value,
+					"aria-label": se.value,
 					onClick: i[2] ||= (...e) => E(Z) && E(Z)(...e)
 				}, [_(r, { name: E(ee) }, null, 8, ["name"])], 8, I)) : m("", !0),
 				v.loading ? (w(), p(a, {
 					key: 4,
 					label: v.loadingText
-				}, null, 8, ["label"])) : T(e.$slots, "end", {}, () => [v.iconEnd && E(ce) ? (w(), h("button", {
+				}, null, 8, ["label"])) : T(e.$slots, "end", {}, () => [v.iconEnd && E(le) ? (w(), h("button", {
 					key: 0,
 					type: "button",
 					class: "v-input-action v-field-action v-input-icon-end",
 					"aria-label": v.iconEndLabel ?? E(t)(v.iconEnd),
-					disabled: E(q),
+					disabled: E(J),
 					onClick: i[3] ||= (e) => B("click:icon-end", e)
 				}, [_(r, C(y(E(n)(v.iconEnd))), null, 16)], 8, L)) : v.iconEnd ? (w(), p(r, S({ key: 1 }, E(n)(v.iconEnd), { class: "v-input-icon-end" }), null, 16)) : m("", !0)], void 0, 5)
 			], 8, M)]),

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

@@ -1 +1 @@
-{"version":3,"file":"VInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref, useId } 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 { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\nimport { joinIds } from '../../utils/ids'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\n/**\n * What the `#control` slot hands over, to bind on the element replacing the input: its id, which\n * the label points at, the class the field's states are drawn from, the references to the hint\n * and the error, and the attributes set on the field other than `class` and `style`. `required`\n * is left out: the replacing element states it in its own way.\n */\nexport type InputControlProps = {\n  id: string\n  class: string\n  disabled: boolean\n  'aria-invalid'?: 'true'\n  'aria-describedby'?: string\n} & Record<string, unknown>\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label, tied to the field so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so 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 input 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\n   * design 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\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\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, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\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  noTyping: 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 place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): 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   * Replaces the input with another control, for a field composed on top of this one: VSelect\n   * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and\n   * disabled states from that control. The model, the limit and the counter apply to the input\n   * alone.\n   */\n  control?(props: { controlProps: InputControlProps }): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the\n   * field's description, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst counterId = useId()\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/**\n * The attributes of the input, built on VField's: the consumer's attributes win over the\n * `invalid` prop, and the counter inside the field joins the description last.\n */\nfunction inputAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    'aria-invalid': props.invalid ? 'true' : undefined,\n    ...fieldProps,\n    'aria-describedby': joinIds(fieldProps['aria-describedby'], props.counter && counterId),\n  }\n}\n\nfunction controlProps(fieldProps: FieldControlProps): InputControlProps {\n  const bound = inputAttrs(fieldProps)\n  delete bound.required\n  return { ...bound, class: 'v-input-control', disabled: resolvedDisabled.value }\n}\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, 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-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-input-field v-control\"\n        :data-size=\"resolvedSize\"\n        :data-compact=\"resolvedCompact ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n      >\n        <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-start\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"resolvedDisabled\"\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-input-icon-start\" />\n        <slot name=\"start\" />\n\n        <slot name=\"control\" :control-props=\"controlProps(fieldProps)\">\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          <input\n            ref=\"controlEl\"\n            v-model=\"model\"\n            v-bind=\"inputAttrs(fieldProps)\"\n            class=\"v-input-control\"\n            :type=\"type\"\n            :maxlength=\"softLimit ? undefined : maxlength\"\n            :disabled=\"resolvedDisabled\"\n            :readonly=\"readonly || noTyping || undefined\"\n          />\n        </slot>\n\n        <span\n          v-if=\"counter\"\n          :id=\"counterId\"\n          class=\"v-input-counter v-field-counter\"\n          :data-over=\"over ? '' : undefined\"\n        >\n          {{ counterText }}\n        </span>\n\n        <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n        <slot name=\"value-end\" />\n\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-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-input-action v-field-action v-input-icon-end\"\n            :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n            :disabled=\"resolvedDisabled\"\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-input-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"$slots.meta\" #meta=\"{ id }\"><slot :id=\"id\" name=\"meta\" /></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-input {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background and the focus ring, and the size and\n   * state attributes. `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    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-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\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  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\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-input .v-input-field[data-readonly] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-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; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-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-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\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-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\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-input .v-input-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  }\n\n  .v-input-field[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input-field[data-disabled] .v-input-action,\n  .v-input-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VInput.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","VField","_mergeProps","_unref","_createSlots","_withCtx","_createElementVNode","_createElementBlock","_createVNode","VIcon","_normalizeProps","_guardReactiveProps","_createCommentVNode","_renderSlot","_withDirectives","_vModelDynamic","_toDisplayString","closeIcon","VSpinner","VIcon_default","VSpinner_default","VField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","VInput_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","modelText","computed","restAttrs","useRootAttrs","group","inject","inputGroupKey","resolvedSize","resolvedCompact","resolvedDisabled","useControlShape","m","useMessages","resolvedClearLabel","counterId","useId","useIconClickHandlers","controlEl","ref","useClearable","useTextLimit","inputAttrs","fieldProps","joinIds","controlProps","bound","options","openBlock","createBlock","mergeProps","unref","rootClass","rootStyle","createSlots","withCtx","createElementVNode","hasIconStartHandler","createElementBlock","iconName","_cache","$event","createVNode","normalizeProps","guardReactiveProps","iconProps","createCommentVNode","renderSlot","_ctx","withDirectives","vModelDynamic","over","toDisplayString","counterText","showClear","args","onClear","close","hasIconEndHandler"],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref, useId } 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 { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\nimport { joinIds } from '../../utils/ids'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\n/**\n * What the `#control` slot hands over, to bind on the element replacing the input: its id, which\n * the label points at, the class the field's states are drawn from, the references to the hint\n * and the error, and the attributes set on the field other than `class` and `style`. `required`\n * is left out: the replacing element states it in its own way.\n */\nexport type InputControlProps = {\n  id: string\n  class: string\n  disabled: boolean\n  'aria-invalid'?: 'true'\n  'aria-describedby'?: string\n} & Record<string, unknown>\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label, tied to the field so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so 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 input 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\n   * design 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\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\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, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\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  noTyping: 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 place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): 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   * Replaces the input with another control, for a field composed on top of this one: VSelect\n   * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and\n   * disabled states from that control. The model, the limit and the counter apply to the input\n   * alone.\n   */\n  control?(props: { controlProps: InputControlProps }): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the\n   * field's description, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst counterId = useId()\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/**\n * The attributes of the input, built on VField's: the consumer's attributes win over the\n * `invalid` prop, and the counter inside the field joins the description last.\n */\nfunction inputAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    'aria-invalid': props.invalid ? 'true' : undefined,\n    ...fieldProps,\n    'aria-describedby': joinIds(fieldProps['aria-describedby'], props.counter && counterId),\n  }\n}\n\nfunction controlProps(fieldProps: FieldControlProps): InputControlProps {\n  const bound = inputAttrs(fieldProps)\n  delete bound.required\n  return { ...bound, class: 'v-input-control', disabled: resolvedDisabled.value }\n}\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, 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-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-input-field v-control\"\n        :data-size=\"resolvedSize\"\n        :data-compact=\"resolvedCompact ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n      >\n        <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-start\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"resolvedDisabled\"\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-input-icon-start\" />\n        <slot name=\"start\" />\n\n        <slot name=\"control\" :control-props=\"controlProps(fieldProps)\">\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          <input\n            ref=\"controlEl\"\n            v-model=\"model\"\n            v-bind=\"inputAttrs(fieldProps)\"\n            class=\"v-input-control\"\n            :type=\"type\"\n            :maxlength=\"softLimit ? undefined : maxlength\"\n            :disabled=\"resolvedDisabled\"\n            :readonly=\"readonly || noTyping || undefined\"\n          />\n        </slot>\n\n        <span\n          v-if=\"counter\"\n          :id=\"counterId\"\n          class=\"v-input-counter v-field-counter\"\n          :data-over=\"over ? '' : undefined\"\n        >\n          {{ counterText }}\n        </span>\n\n        <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n        <slot name=\"value-end\" />\n\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-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-input-action v-field-action v-input-icon-end\"\n            :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n            :disabled=\"resolvedDisabled\"\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-input-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"$slots.meta\" #meta=\"{ id }\"><slot :id=\"id\" name=\"meta\" /></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-input {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background and the focus ring, and the size and\n   * state attributes. `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    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-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\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  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\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-input .v-input-field[data-readonly] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-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; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-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-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\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-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\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-input .v-input-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  }\n\n  .v-input-field[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input-field[data-disabled] .v-input-action,\n  .v-input-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VInput/VInputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInputGroup.js","names":[],"sources":["../../../src/components/VInput/VInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Join functional field boxes rather than their label-and-hint wrappers. Context shares row\n * shape and disables descendants without changing their native controls.\n */\nimport { provide } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { inputGroupKey } from './context'\n\n/** The heights a joined row offers, matching the field scale: 32, 40 or 48 pixels. */\nexport type InputGroupSize = 'sm' | 'md' | 'lg'\n\ninterface InputGroupProps {\n  /**\n   * The label above the row, rendered once for all of its segments and used as the\n   * group's accessible name. A segment carrying one of its own is pushed out of line,\n   * so name each of them with `aria-label` instead.\n   */\n  label?: string\n  /**\n   * A line of help under the row, tied to the group so assistive technology reads it\n   * out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the row, shown in place of the hint and read along with\n   * the group. It is announced when it appears or changes. Mark the segments at fault with\n   * `invalid`.\n   */\n  error?: string\n  /** Adds an asterisk after the label. Mark the segments themselves `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the row (`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   * The height every segment takes, whatever it names for itself: a row of controls of\n   * two heights stops reading as one object. Left out, each segment keeps its own.\n   */\n  size?: InputGroupSize\n  /** Takes 4px off the height of every segment, the way `compact` does on a lone field. */\n  compact?: boolean\n  /**\n   * Makes the whole row unusable. It adds to what each segment says rather than\n   * replacing it: a segment disabled on its own stays disabled under a row that says\n   * nothing.\n   */\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\n// Every one of the three below defaults to `undefined`, the booleans included. It is\n// `undefined`, and not `false`, that means \"the group has no opinion\", and that is what makes a\n// bare VInputGroup change nothing about what it contains.\nconst props = withDefaults(defineProps<InputGroupProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: undefined,\n  compact: undefined,\n  disabled: undefined,\n})\n\ndefineSlots<{\n  /** The fields and buttons to join. Each one is a segment of the row. */\n  default(): unknown\n}>()\n\n// The consumer's attributes name and describe the row, which VField's group mode hands over: a\n// consumer's `aria-labelledby` or `aria-label` wins over the visible label.\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Getters, so the group's props stay reactive on the other side of the injection.\nconst rowContext = {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n}\n\nprovide(inputGroupKey, rowContext)\n\n// The group provides VButtonGroup's context TOO, which makes a VButton or a VIconButton segment\n// follow the row's height without a new line in VButton: the arbitration there is already\n// `group?.x ?? props.x`, exactly this one. Variant, tone and elevation stay `undefined`; in a\n// row of fields those are the button's own decisions.\nprovide(buttonGroupKey, rowContext)\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-input-group\"\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    group\n  >\n    <!-- A label points at ONE control, and this names a row of them: the row takes it through\n         aria-labelledby, the ARIA pattern for a composed field. -->\n    <template #default=\"{ fieldProps }\">\n      <div v-bind=\"fieldProps\" class=\"v-input-group-row\" role=\"group\">\n        <slot />\n      </div>\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-input-group {\n    width: 100%;\n  }\n\n  /*\n   * Do not put v-control on the row: rederiving its inherited height would reset compact\n   * dimensions already applied by the fields.\n   */\n  .v-input-group-row {\n    display: flex;\n    /* Same height whatever a segment measures. This changes nothing in an ordinary row,\n       where everything is --control-height, and it is what stops a segment that GROWS from\n       leaving its neighbours hanging at the top. */\n    align-items: stretch;\n  }\n\n  /*\n   * The logic is written this way round because it is the one that enumerates nothing: a bare\n   * VButton, or one under two companions, has no `.v-input-field`, so it never stretches\n   * without our having to name it. The proportions belong to the consumer, an inline `flex` on\n   * the segment (style=\"flex: 0 0 9rem\"). Every segment rule excludes `.v-overlay`: VMenu\n   * renders its panel as a sibling of its trigger, and a panel must not pass for a segment.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)) {\n    flex: none;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The field has to be the segment's own, never one inside a panel it opens: a VPopover\n   * segment holding a VInput in its panel is a button, and stays its natural width.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))) {\n    flex: 1 1 0;\n  }\n\n  /*\n   * Without this rule the paint order would depend on which components the row happens to hold.\n   * A combobox's field is already `position: relative` (VInput's `.v-input-end-pinned`, which\n   * lifts its chevron and its cross out of the flow) where a bare `.v-input-field` is not, and\n   * a positioned element paints after every in-flow block whatever the document order.\n   */\n  .v-input-group-row > .v-button,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    position: relative;\n  }\n\n  /*\n   * VButton's base is `border: 1px solid transparent`, so a row of solid buttons has no line to\n   * inherit and the seam is the only separation possible. A field carries a real opaque border,\n   * and melting it with its neighbour's PRODUCES the line; a seam here would double it, and in\n   * VButtonGroup's `--vectis-color-border` it would come out LIGHTER than the row's own\n   * outline.\n   */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(\n      :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *))\n    ):not(:first-child) {\n    margin-inline-start: -1px;\n  }\n\n  /* Only the two outer corners of the row stay rounded. Logical properties throughout, so a\n     right-to-left row rounds its other end with no second rule, and the pull above is\n     `margin-inline-start`. */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):not(:first-child)\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The last segment reads `:has(~ :not(.v-overlay))` and not `:not(:last-child)`, and that is\n   * VMenu's doing: it renders its panel as a SIBLING of its trigger, so a menu closing a row\n   * would leave its trigger without `:last-child` and the row would lose its outer corner with\n   * nothing in the DOM to say why. Asking whether a real SEGMENT follows weighs exactly what\n   * the test it replaces weighed.\n   */\n  .v-input-group-row > .v-button:has(~ :not(.v-overlay)),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(~ :not(.v-overlay))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /*\n   * This rule must stay ABOVE the focus rule. A field both invalid and focused matches the two,\n   * they weigh the same (0,4,0), and nothing but the source order arbitrates between them; it\n   * is the accent ring the reader has to see.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:is(\n      :has(.v-input-control:user-invalid),\n      :has(.v-input-control[aria-invalid='true'])\n    ) {\n    z-index: 1;\n  }\n\n  /*\n   * The field draws its focus as its own 1px border PLUS a 1px shadow just outside the border\n   * box, and that shadow falls into the neighbour the pull brought over it: without this rule\n   * the accent edge disappears from one side of every segment but the last. Two tests, because\n   * the two kinds of segment mark focus differently.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:has(.v-input-control:focus),\n  .v-input-group-row > .v-button:focus-visible,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-button:focus-visible:not(:where(.v-overlay *, .v-button-group *)) {\n    z-index: 2;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VInputGroup.js","names":["_sfc_main","VInputGroup_vue_vue_type_script_setup_true_lang_default","VInputGroup_default"],"sources":["../../../src/components/VInput/VInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Join functional field boxes rather than their label-and-hint wrappers. Context shares row\n * shape and disables descendants without changing their native controls.\n */\nimport { provide } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { inputGroupKey } from './context'\n\n/** The heights a joined row offers, matching the field scale: 32, 40 or 48 pixels. */\nexport type InputGroupSize = 'sm' | 'md' | 'lg'\n\ninterface InputGroupProps {\n  /**\n   * The label above the row, rendered once for all of its segments and used as the\n   * group's accessible name. A segment carrying one of its own is pushed out of line,\n   * so name each of them with `aria-label` instead.\n   */\n  label?: string\n  /**\n   * A line of help under the row, tied to the group so assistive technology reads it\n   * out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the row, shown in place of the hint and read along with\n   * the group. It is announced when it appears or changes. Mark the segments at fault with\n   * `invalid`.\n   */\n  error?: string\n  /** Adds an asterisk after the label. Mark the segments themselves `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the row (`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   * The height every segment takes, whatever it names for itself: a row of controls of\n   * two heights stops reading as one object. Left out, each segment keeps its own.\n   */\n  size?: InputGroupSize\n  /** Takes 4px off the height of every segment, the way `compact` does on a lone field. */\n  compact?: boolean\n  /**\n   * Makes the whole row unusable. It adds to what each segment says rather than\n   * replacing it: a segment disabled on its own stays disabled under a row that says\n   * nothing.\n   */\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\n// Every one of the three below defaults to `undefined`, the booleans included. It is\n// `undefined`, and not `false`, that means \"the group has no opinion\", and that is what makes a\n// bare VInputGroup change nothing about what it contains.\nconst props = withDefaults(defineProps<InputGroupProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: undefined,\n  compact: undefined,\n  disabled: undefined,\n})\n\ndefineSlots<{\n  /** The fields and buttons to join. Each one is a segment of the row. */\n  default(): unknown\n}>()\n\n// The consumer's attributes name and describe the row, which VField's group mode hands over: a\n// consumer's `aria-labelledby` or `aria-label` wins over the visible label.\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Getters, so the group's props stay reactive on the other side of the injection.\nconst rowContext = {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n}\n\nprovide(inputGroupKey, rowContext)\n\n// The group provides VButtonGroup's context TOO, which makes a VButton or a VIconButton segment\n// follow the row's height without a new line in VButton: the arbitration there is already\n// `group?.x ?? props.x`, exactly this one. Variant, tone and elevation stay `undefined`; in a\n// row of fields those are the button's own decisions.\nprovide(buttonGroupKey, rowContext)\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-input-group\"\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    group\n  >\n    <!-- A label points at ONE control, and this names a row of them: the row takes it through\n         aria-labelledby, the ARIA pattern for a composed field. -->\n    <template #default=\"{ fieldProps }\">\n      <div v-bind=\"fieldProps\" class=\"v-input-group-row\" role=\"group\">\n        <slot />\n      </div>\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-input-group {\n    width: 100%;\n  }\n\n  /*\n   * Do not put v-control on the row: rederiving its inherited height would reset compact\n   * dimensions already applied by the fields.\n   */\n  .v-input-group-row {\n    display: flex;\n    /* Same height whatever a segment measures. This changes nothing in an ordinary row,\n       where everything is --control-height, and it is what stops a segment that GROWS from\n       leaving its neighbours hanging at the top. */\n    align-items: stretch;\n  }\n\n  /*\n   * The logic is written this way round because it is the one that enumerates nothing: a bare\n   * VButton, or one under two companions, has no `.v-input-field`, so it never stretches\n   * without our having to name it. The proportions belong to the consumer, an inline `flex` on\n   * the segment (style=\"flex: 0 0 9rem\"). Every segment rule excludes `.v-overlay`: VMenu\n   * renders its panel as a sibling of its trigger, and a panel must not pass for a segment.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)) {\n    flex: none;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The field has to be the segment's own, never one inside a panel it opens: a VPopover\n   * segment holding a VInput in its panel is a button, and stays its natural width.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))) {\n    flex: 1 1 0;\n  }\n\n  /*\n   * Without this rule the paint order would depend on which components the row happens to hold.\n   * A combobox's field is already `position: relative` (VInput's `.v-input-end-pinned`, which\n   * lifts its chevron and its cross out of the flow) where a bare `.v-input-field` is not, and\n   * a positioned element paints after every in-flow block whatever the document order.\n   */\n  .v-input-group-row > .v-button,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    position: relative;\n  }\n\n  /*\n   * VButton's base is `border: 1px solid transparent`, so a row of solid buttons has no line to\n   * inherit and the seam is the only separation possible. A field carries a real opaque border,\n   * and melting it with its neighbour's PRODUCES the line; a seam here would double it, and in\n   * VButtonGroup's `--vectis-color-border` it would come out LIGHTER than the row's own\n   * outline.\n   */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(\n      :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *))\n    ):not(:first-child) {\n    margin-inline-start: -1px;\n  }\n\n  /* Only the two outer corners of the row stay rounded. Logical properties throughout, so a\n     right-to-left row rounds its other end with no second rule, and the pull above is\n     `margin-inline-start`. */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):not(:first-child)\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The last segment reads `:has(~ :not(.v-overlay))` and not `:not(:last-child)`, and that is\n   * VMenu's doing: it renders its panel as a SIBLING of its trigger, so a menu closing a row\n   * would leave its trigger without `:last-child` and the row would lose its outer corner with\n   * nothing in the DOM to say why. Asking whether a real SEGMENT follows weighs exactly what\n   * the test it replaces weighed.\n   */\n  .v-input-group-row > .v-button:has(~ :not(.v-overlay)),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(~ :not(.v-overlay))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /*\n   * This rule must stay ABOVE the focus rule. A field both invalid and focused matches the two,\n   * they weigh the same (0,4,0), and nothing but the source order arbitrates between them; it\n   * is the accent ring the reader has to see.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:is(\n      :has(.v-input-control:user-invalid),\n      :has(.v-input-control[aria-invalid='true'])\n    ) {\n    z-index: 1;\n  }\n\n  /*\n   * The field draws its focus as its own 1px border PLUS a 1px shadow just outside the border\n   * box, and that shadow falls into the neighbour the pull brought over it: without this rule\n   * the accent edge disappears from one side of every segment but the last. Two tests, because\n   * the two kinds of segment mark focus differently.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:has(.v-input-control:focus),\n  .v-input-group-row > .v-button:focus-visible,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-button:focus-visible:not(:where(.v-overlay *, .v-button-group *)) {\n    z-index: 2;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VInput/VInputGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInputGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VInput/VInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Join functional field boxes rather than their label-and-hint wrappers. Context shares row\n * shape and disables descendants without changing their native controls.\n */\nimport { provide } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { inputGroupKey } from './context'\n\n/** The heights a joined row offers, matching the field scale: 32, 40 or 48 pixels. */\nexport type InputGroupSize = 'sm' | 'md' | 'lg'\n\ninterface InputGroupProps {\n  /**\n   * The label above the row, rendered once for all of its segments and used as the\n   * group's accessible name. A segment carrying one of its own is pushed out of line,\n   * so name each of them with `aria-label` instead.\n   */\n  label?: string\n  /**\n   * A line of help under the row, tied to the group so assistive technology reads it\n   * out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the row, shown in place of the hint and read along with\n   * the group. It is announced when it appears or changes. Mark the segments at fault with\n   * `invalid`.\n   */\n  error?: string\n  /** Adds an asterisk after the label. Mark the segments themselves `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the row (`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   * The height every segment takes, whatever it names for itself: a row of controls of\n   * two heights stops reading as one object. Left out, each segment keeps its own.\n   */\n  size?: InputGroupSize\n  /** Takes 4px off the height of every segment, the way `compact` does on a lone field. */\n  compact?: boolean\n  /**\n   * Makes the whole row unusable. It adds to what each segment says rather than\n   * replacing it: a segment disabled on its own stays disabled under a row that says\n   * nothing.\n   */\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\n// Every one of the three below defaults to `undefined`, the booleans included. It is\n// `undefined`, and not `false`, that means \"the group has no opinion\", and that is what makes a\n// bare VInputGroup change nothing about what it contains.\nconst props = withDefaults(defineProps<InputGroupProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: undefined,\n  compact: undefined,\n  disabled: undefined,\n})\n\ndefineSlots<{\n  /** The fields and buttons to join. Each one is a segment of the row. */\n  default(): unknown\n}>()\n\n// The consumer's attributes name and describe the row, which VField's group mode hands over: a\n// consumer's `aria-labelledby` or `aria-label` wins over the visible label.\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Getters, so the group's props stay reactive on the other side of the injection.\nconst rowContext = {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n}\n\nprovide(inputGroupKey, rowContext)\n\n// The group provides VButtonGroup's context TOO, which makes a VButton or a VIconButton segment\n// follow the row's height without a new line in VButton: the arbitration there is already\n// `group?.x ?? props.x`, exactly this one. Variant, tone and elevation stay `undefined`; in a\n// row of fields those are the button's own decisions.\nprovide(buttonGroupKey, rowContext)\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-input-group\"\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    group\n  >\n    <!-- A label points at ONE control, and this names a row of them: the row takes it through\n         aria-labelledby, the ARIA pattern for a composed field. -->\n    <template #default=\"{ fieldProps }\">\n      <div v-bind=\"fieldProps\" class=\"v-input-group-row\" role=\"group\">\n        <slot />\n      </div>\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-input-group {\n    width: 100%;\n  }\n\n  /*\n   * Do not put v-control on the row: rederiving its inherited height would reset compact\n   * dimensions already applied by the fields.\n   */\n  .v-input-group-row {\n    display: flex;\n    /* Same height whatever a segment measures. This changes nothing in an ordinary row,\n       where everything is --control-height, and it is what stops a segment that GROWS from\n       leaving its neighbours hanging at the top. */\n    align-items: stretch;\n  }\n\n  /*\n   * The logic is written this way round because it is the one that enumerates nothing: a bare\n   * VButton, or one under two companions, has no `.v-input-field`, so it never stretches\n   * without our having to name it. The proportions belong to the consumer, an inline `flex` on\n   * the segment (style=\"flex: 0 0 9rem\"). Every segment rule excludes `.v-overlay`: VMenu\n   * renders its panel as a sibling of its trigger, and a panel must not pass for a segment.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)) {\n    flex: none;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The field has to be the segment's own, never one inside a panel it opens: a VPopover\n   * segment holding a VInput in its panel is a button, and stays its natural width.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))) {\n    flex: 1 1 0;\n  }\n\n  /*\n   * Without this rule the paint order would depend on which components the row happens to hold.\n   * A combobox's field is already `position: relative` (VInput's `.v-input-end-pinned`, which\n   * lifts its chevron and its cross out of the flow) where a bare `.v-input-field` is not, and\n   * a positioned element paints after every in-flow block whatever the document order.\n   */\n  .v-input-group-row > .v-button,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    position: relative;\n  }\n\n  /*\n   * VButton's base is `border: 1px solid transparent`, so a row of solid buttons has no line to\n   * inherit and the seam is the only separation possible. A field carries a real opaque border,\n   * and melting it with its neighbour's PRODUCES the line; a seam here would double it, and in\n   * VButtonGroup's `--vectis-color-border` it would come out LIGHTER than the row's own\n   * outline.\n   */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(\n      :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *))\n    ):not(:first-child) {\n    margin-inline-start: -1px;\n  }\n\n  /* Only the two outer corners of the row stay rounded. Logical properties throughout, so a\n     right-to-left row rounds its other end with no second rule, and the pull above is\n     `margin-inline-start`. */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):not(:first-child)\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The last segment reads `:has(~ :not(.v-overlay))` and not `:not(:last-child)`, and that is\n   * VMenu's doing: it renders its panel as a SIBLING of its trigger, so a menu closing a row\n   * would leave its trigger without `:last-child` and the row would lose its outer corner with\n   * nothing in the DOM to say why. Asking whether a real SEGMENT follows weighs exactly what\n   * the test it replaces weighed.\n   */\n  .v-input-group-row > .v-button:has(~ :not(.v-overlay)),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(~ :not(.v-overlay))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /*\n   * This rule must stay ABOVE the focus rule. A field both invalid and focused matches the two,\n   * they weigh the same (0,4,0), and nothing but the source order arbitrates between them; it\n   * is the accent ring the reader has to see.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:is(\n      :has(.v-input-control:user-invalid),\n      :has(.v-input-control[aria-invalid='true'])\n    ) {\n    z-index: 1;\n  }\n\n  /*\n   * The field draws its focus as its own 1px border PLUS a 1px shadow just outside the border\n   * box, and that shadow falls into the neighbour the pull brought over it: without this rule\n   * the accent edge disappears from one side of every segment but the last. Two tests, because\n   * the two kinds of segment mark focus differently.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:has(.v-input-control:focus),\n  .v-input-group-row > .v-button:focus-visible,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-button:focus-visible:not(:where(.v-overlay *, .v-button-group *)) {\n    z-index: 2;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAQ,GAmBR,EAAE,cAAW,cAAW,sBAAmB,EAAa,GAGxD,IAAa;GACjB,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,WAAW;IACb,OAAO,EAAM;GACf;EACF;SAEA,EAAQ,GAAe,CAAU,GAMjC,EAAQ,GAAgB,CAAU,mBAIhC,EAqBS,GArBT,EACU,EAoBD,CAAA,GApBe;GACtB,OAAK,CAAC,iBACE,EAAA,CAAA,CAAS;GAChB,OAAO,EAAA,CAAA;GACP,OAAO,EAAA;GACP,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAU,EAAA;GACV,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,kBAAgB,EAAA;GACjB,OAAA;;GAIW,SAAO,GAGV,EAHc,oBAAU,CAC9B,EAEM,OAFN,EAAa,GAAU;IAAE,OAAM;IAAoB,MAAK;QACtD,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"VInputGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","VField","_mergeProps","_unref","_withCtx","_createElementVNode","_renderSlot","VField_default","VInputGroup_vue_vue_type_script_setup_true_lang_default","props","__props","useRootAttrs","rowContext","provide","inputGroupKey","buttonGroupKey","openBlock","createBlock","mergeProps","unref","forwardedAttrs","rootClass","rootStyle","withCtx","createElementVNode","fieldProps","renderSlot","_ctx"],"sources":["../../../src/components/VInput/VInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Join functional field boxes rather than their label-and-hint wrappers. Context shares row\n * shape and disables descendants without changing their native controls.\n */\nimport { provide } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { inputGroupKey } from './context'\n\n/** The heights a joined row offers, matching the field scale: 32, 40 or 48 pixels. */\nexport type InputGroupSize = 'sm' | 'md' | 'lg'\n\ninterface InputGroupProps {\n  /**\n   * The label above the row, rendered once for all of its segments and used as the\n   * group's accessible name. A segment carrying one of its own is pushed out of line,\n   * so name each of them with `aria-label` instead.\n   */\n  label?: string\n  /**\n   * A line of help under the row, tied to the group so assistive technology reads it\n   * out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the row, shown in place of the hint and read along with\n   * the group. It is announced when it appears or changes. Mark the segments at fault with\n   * `invalid`.\n   */\n  error?: string\n  /** Adds an asterisk after the label. Mark the segments themselves `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the row (`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   * The height every segment takes, whatever it names for itself: a row of controls of\n   * two heights stops reading as one object. Left out, each segment keeps its own.\n   */\n  size?: InputGroupSize\n  /** Takes 4px off the height of every segment, the way `compact` does on a lone field. */\n  compact?: boolean\n  /**\n   * Makes the whole row unusable. It adds to what each segment says rather than\n   * replacing it: a segment disabled on its own stays disabled under a row that says\n   * nothing.\n   */\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\n// Every one of the three below defaults to `undefined`, the booleans included. It is\n// `undefined`, and not `false`, that means \"the group has no opinion\", and that is what makes a\n// bare VInputGroup change nothing about what it contains.\nconst props = withDefaults(defineProps<InputGroupProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: undefined,\n  compact: undefined,\n  disabled: undefined,\n})\n\ndefineSlots<{\n  /** The fields and buttons to join. Each one is a segment of the row. */\n  default(): unknown\n}>()\n\n// The consumer's attributes name and describe the row, which VField's group mode hands over: a\n// consumer's `aria-labelledby` or `aria-label` wins over the visible label.\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Getters, so the group's props stay reactive on the other side of the injection.\nconst rowContext = {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n}\n\nprovide(inputGroupKey, rowContext)\n\n// The group provides VButtonGroup's context TOO, which makes a VButton or a VIconButton segment\n// follow the row's height without a new line in VButton: the arbitration there is already\n// `group?.x ?? props.x`, exactly this one. Variant, tone and elevation stay `undefined`; in a\n// row of fields those are the button's own decisions.\nprovide(buttonGroupKey, rowContext)\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-input-group\"\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    group\n  >\n    <!-- A label points at ONE control, and this names a row of them: the row takes it through\n         aria-labelledby, the ARIA pattern for a composed field. -->\n    <template #default=\"{ fieldProps }\">\n      <div v-bind=\"fieldProps\" class=\"v-input-group-row\" role=\"group\">\n        <slot />\n      </div>\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-input-group {\n    width: 100%;\n  }\n\n  /*\n   * Do not put v-control on the row: rederiving its inherited height would reset compact\n   * dimensions already applied by the fields.\n   */\n  .v-input-group-row {\n    display: flex;\n    /* Same height whatever a segment measures. This changes nothing in an ordinary row,\n       where everything is --control-height, and it is what stops a segment that GROWS from\n       leaving its neighbours hanging at the top. */\n    align-items: stretch;\n  }\n\n  /*\n   * The logic is written this way round because it is the one that enumerates nothing: a bare\n   * VButton, or one under two companions, has no `.v-input-field`, so it never stretches\n   * without our having to name it. The proportions belong to the consumer, an inline `flex` on\n   * the segment (style=\"flex: 0 0 9rem\"). Every segment rule excludes `.v-overlay`: VMenu\n   * renders its panel as a sibling of its trigger, and a panel must not pass for a segment.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)) {\n    flex: none;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The field has to be the segment's own, never one inside a panel it opens: a VPopover\n   * segment holding a VInput in its panel is a button, and stays its natural width.\n   */\n  .v-input-group-row > :not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))) {\n    flex: 1 1 0;\n  }\n\n  /*\n   * Without this rule the paint order would depend on which components the row happens to hold.\n   * A combobox's field is already `position: relative` (VInput's `.v-input-end-pinned`, which\n   * lifts its chevron and its cross out of the flow) where a bare `.v-input-field` is not, and\n   * a positioned element paints after every in-flow block whatever the document order.\n   */\n  .v-input-group-row > .v-button,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    position: relative;\n  }\n\n  /*\n   * VButton's base is `border: 1px solid transparent`, so a row of solid buttons has no line to\n   * inherit and the seam is the only separation possible. A field carries a real opaque border,\n   * and melting it with its neighbour's PRODUCES the line; a seam here would double it, and in\n   * VButtonGroup's `--vectis-color-border` it would come out LIGHTER than the row's own\n   * outline.\n   */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(\n      :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *))\n    ):not(:first-child) {\n    margin-inline-start: -1px;\n  }\n\n  /* Only the two outer corners of the row stay rounded. Logical properties throughout, so a\n     right-to-left row rounds its other end with no second rule, and the pull above is\n     `margin-inline-start`. */\n  .v-input-group-row > .v-button:not(:first-child),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):not(:first-child)\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The last segment reads `:has(~ :not(.v-overlay))` and not `:not(:last-child)`, and that is\n   * VMenu's doing: it renders its panel as a SIBLING of its trigger, so a menu closing a row\n   * would leave its trigger without `:last-child` and the row would lose its outer corner with\n   * nothing in the DOM to say why. Asking whether a real SEGMENT follows weighs exactly what\n   * the test it replaces weighed.\n   */\n  .v-input-group-row > .v-button:has(~ :not(.v-overlay)),\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group)):has(~ :not(.v-overlay))\n    :is(.v-input-field, .v-button):not(:where(.v-overlay *, .v-button-group *)) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /*\n   * This rule must stay ABOVE the focus rule. A field both invalid and focused matches the two,\n   * they weigh the same (0,4,0), and nothing but the source order arbitrates between them; it\n   * is the accent ring the reader has to see.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:is(\n      :has(.v-input-control:user-invalid),\n      :has(.v-input-control[aria-invalid='true'])\n    ) {\n    z-index: 1;\n  }\n\n  /*\n   * The field draws its focus as its own 1px border PLUS a 1px shadow just outside the border\n   * box, and that shadow falls into the neighbour the pull brought over it: without this rule\n   * the accent edge disappears from one side of every segment but the last. Two tests, because\n   * the two kinds of segment mark focus differently.\n   */\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-input-field:has(.v-input-control:focus),\n  .v-input-group-row > .v-button:focus-visible,\n  .v-input-group-row\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-button:focus-visible:not(:where(.v-overlay *, .v-button-group *)) {\n    z-index: 2;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAMU,IAAQC,GAmBR,EAAE,cAAW,cAAW,sBAAmBC,EAAa,GAGxDC,IAAa;GACjB,IAAI,OAAO;IACT,OAAOH,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAOA,EAAM;GACf;GACA,IAAI,WAAW;IACb,OAAOA,EAAM;GACf;EACF;SAEAI,EAAQC,GAAeF,CAAU,GAMjCC,EAAQE,GAAgBH,CAAU,cAIhCb,EAAA,GAAAC,EAqBSC,GArBTC,EACUC,EAoBDiB,CAAA,GApBe;GACtB,OAAK,CAAC,iBACEjB,EAAAkB,CAAA,CAAS;GAChB,OAAOlB,EAAAmB,CAAA;GACP,OAAOZ,EAAA;GACP,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,cAAYA,EAAA;GACZ,kBAAgBA,EAAA;GACjB,OAAA;;GAIW,SAAON,GAGV,EAHc,oBAAU,CAC9BC,EAEM,OAFNH,EAAauB,GAAU;IAAE,OAAM;IAAoB,MAAK;GACtDnB,CAAAA,GAAAA,CAAAA,EAAQqB,EAAA,QAAA,SAAA,CAAA,GAAA,EAAA,CAAA,CAAA"}

package/dist/components/VInput/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VInput/context.ts"],"sourcesContent":["/**\n * Limit inherited context to fields so nested panel buttons do not take the surrounding row's\n * dimensions.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { InputGroupSize } from './VInputGroup.vue'\n\nexport interface InputGroupContext {\n  /** The height of the segments. */\n  readonly size?: InputGroupSize\n  /** The reduced density. */\n  readonly compact?: boolean\n  /** Whether the whole row is unusable, which no segment can refuse. */\n  readonly disabled?: boolean\n}\n\nexport const inputGroupKey: InjectionKey<InputGroupContext> = Symbol('v-input-group')\n"],"mappings":";AAkBA,IAAa,IAAiD,OAAO,eAAe"}
+{"version":3,"file":"context.js","names":["inputGroupKey"],"sources":["../../../src/components/VInput/context.ts"],"sourcesContent":["/**\n * Limit inherited context to fields so nested panel buttons do not take the surrounding row's\n * dimensions.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { InputGroupSize } from './VInputGroup.vue'\n\nexport interface InputGroupContext {\n  /** The height of the segments. */\n  readonly size?: InputGroupSize\n  /** The reduced density. */\n  readonly compact?: boolean\n  /** Whether the whole row is unusable, which no segment can refuse. */\n  readonly disabled?: boolean\n}\n\nexport const inputGroupKey: InjectionKey<InputGroupContext> = Symbol('v-input-group')\n"],"mappings":";AAkBA,IAAaA,IAAiD,OAAO,eAAe"}