vectis-ui 0.12.0 → 0.13.0

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":[],"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 } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\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\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 above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. 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   * 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  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   * 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\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 { attrs, 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 { fieldId, hintId, counterId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint,\n  () => props.counter,\n)\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// 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  <div\n    class=\"v-input v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-input-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-field\">\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      <input\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"restAttrs\"\n        class=\"v-input-control\"\n        :type=\"type\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly || noTyping || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\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\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The .v-input-label and .v-input-hint classes remain as hooks: a consumer overrides through\n   * them, and the disabled state below reaches them that way.\n   */\n\n  /*\n   * This is the box that carries the border, the background and the focus ring.\n   * `--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[data-readonly] .v-input-field {\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[data-disabled] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input[data-disabled] .v-input-label,\n  .v-input[data-disabled] .v-input-hint,\n  .v-input[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input[data-disabled] .v-input-action,\n  .v-input[data-disabled] .v-input-field > .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"],"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.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-input-group{gap:var(--vectis-space-1);width:100%;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-input-group-row{align-items:stretch;display:flex}.v-input-group-row>:not(:where(.v-overlay)){flex:none;min-inline-size:0}.v-input-group-row>:not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))){flex:1 1 0}.v-input-group-row>.v-button,.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){position:relative}.v-input-group-row>.v-button:not(:first-child),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):has(:is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *))):not(:first-child){margin-inline-start:-1px}.v-input-group-row>.v-button:not(:first-child),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):not(:first-child) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){border-start-start-radius:0;border-end-start-radius:0}.v-input-group-row>.v-button:has(~:not(.v-overlay)),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):has(~:not(.v-overlay)) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){border-start-end-radius:0;border-end-end-radius:0}.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-input-field:is(:has(.v-input-control:user-invalid),:has(.v-input-control[aria-invalid=true])){z-index:1}.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-input-field:has(.v-input-control:focus),.v-input-group-row>.v-button:focus-visible,.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-button:focus-visible:not(:where(.v-overlay *,.v-button-group *)){z-index:2}.v-input-group[data-disabled] :is(.v-input-group-label,.v-input-group-hint){color:var(--vectis-color-text-subtle)}}
+@layer vectis.components{.v-input-group{width:100%}.v-input-group-row{align-items:stretch;display:flex}.v-input-group-row>:not(:where(.v-overlay)){flex:none;min-inline-size:0}.v-input-group-row>:not(:where(.v-overlay)):has(.v-input-field:not(:where(.v-overlay *))){flex:1 1 0}.v-input-group-row>.v-button,.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){position:relative}.v-input-group-row>.v-button:not(:first-child),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):has(:is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *))):not(:first-child){margin-inline-start:-1px}.v-input-group-row>.v-button:not(:first-child),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):not(:first-child) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){border-start-start-radius:0;border-end-start-radius:0}.v-input-group-row>.v-button:has(~:not(.v-overlay)),.v-input-group-row>:not(:where(.v-overlay,.v-button-group)):has(~:not(.v-overlay)) :is(.v-input-field,.v-button):not(:where(.v-overlay *,.v-button-group *)){border-start-end-radius:0;border-end-end-radius:0}.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-input-field:is(:has(.v-input-control:user-invalid),:has(.v-input-control[aria-invalid=true])){z-index:1}.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-input-field:has(.v-input-control:focus),.v-input-group-row>.v-button:focus-visible,.v-input-group-row>:not(:where(.v-overlay,.v-button-group)) .v-button:focus-visible:not(:where(.v-overlay *,.v-button-group *)){z-index:2}}

package/dist/components/VInput/VInputGroup.d.ts

@@ -1,3 +1,4 @@
+import { FieldLabelPosition } from '../VField/VField.js';
 /** The heights a joined row offers, matching the field scale: 32, 40 or 48 pixels. */
 export type InputGroupSize = 'sm' | 'md' | 'lg';
 interface InputGroupProps {
@@ -12,6 +13,21 @@ interface InputGroupProps {
      * out along with the label.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the row, shown in place of the hint and read along with
+     * the group. It is announced when it appears or changes. Mark the segments at fault with
+     * `invalid`.
+     */
+    error?: string;
+    /** Adds an asterisk after the label. Mark the segments themselves `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the group for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the row (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
     /**
      * The height every segment takes, whatever it names for itself: a row of controls of
      * two heights stops reading as one object. Left out, each segment keeps its own.
@@ -32,10 +48,14 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<InputGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {
     label: string;
+    error: string;
     size: InputGroupSize;
     compact: boolean;
     disabled: boolean;
+    required: boolean;
     hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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 { computed, provide, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\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   * 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  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\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst labelId = useId()\nconst hintId = useId()\n\n// @a11y\n// In the template comes after `v-bind=\"forwardedAttrs\"` and would otherwise overwrite what the\n// consumer wrote, so this computed has to hand their value back itself. An `aria-label` or an\n// `aria-labelledby` written by the consumer names the group, and the VISIBLE label must not\n// double it: `aria-labelledby` wins over `aria-label` in the accessible name computation, so\n// emitting ours on top of a consumer's `aria-label` would silently cancel it.\nconst labelledBy = computed(() => {\n  const own = attrs['aria-labelledby'] as string | undefined\n  if (own !== undefined) return own\n  // TRUTHINESS, the test the template renders the label with: an empty `label=\"\"` renders\n  // no element, and naming the group after an id nothing carries leaves it nameless.\n  return props.label && attrs['aria-label'] === undefined ? labelId : undefined\n})\n\n// @a11y\n// This aggregation is also why the component takes `inheritAttrs: false` despite having a\n// single root: left to fallthrough, a consumer's `aria-describedby` would overwrite ours and\n// the hint would stop being announced, with nothing to show for it.\nconst describedBy = computed(() =>\n  joinIds(attrs['aria-describedby'] as string | undefined, !!props.hint && hintId),\n)\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  <div\n    class=\"v-input-group\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    role=\"group\"\n    v-bind=\"forwardedAttrs\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <!-- A span and not a `<label for>`: a label points at ONE control, and this names a row\n         of them. The group takes it through aria-labelledby, the ARIA pattern for a\n         composed field. -->\n    <VTypography v-if=\"label\" :id=\"labelId\" as=\"span\" variant=\"label\" class=\"v-input-group-label\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-group-row\">\n      <slot />\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-group-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * `.v-overlay` is in both guards and neither is optional. A panel must not pass for a\n   * segment: VMenu renders its own as a SIBLING of its trigger.\n   */\n\n  .v-input-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     classes stay as hooks: a consumer overrides through them, and the disabled state\n     below reaches them that way. */\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\").\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  /* VInput's rule, at the same values: through the colour tokens, never through opacity. */\n  .v-input-group[data-disabled] :is(.v-input-group-label, .v-input-group-hint) {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":""}
+{"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":""}

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

@@ -1,20 +1,25 @@
-import e from "../VTypography/VTypography.js";
-import { buttonGroupKey as t } from "../VButton/context.js";
-import { useRootAttrs as n } from "../../composables/useRootAttrs.js";
-import { joinIds as r } from "../../utils/ids.js";
-import { inputGroupKey as i } from "./context.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeProps as f, openBlock as p, provide as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, withCtx as y } from "vue";
+import { buttonGroupKey as e } from "../VButton/context.js";
+import { useRootAttrs as t } from "../../composables/useRootAttrs.js";
+import n from "../VField/VField.js";
+import { inputGroupKey as r } from "./context.js";
+import { createBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, openBlock as c, provide as l, renderSlot as u, unref as d, withCtx as f } from "vue";
 //#region src/components/VInput/VInputGroup.vue?vue&type=script&setup=true&lang.ts
-var b = [
-	"aria-labelledby",
-	"aria-describedby",
-	"data-disabled"
-], x = { class: "v-input-group-row" }, S = /*@__PURE__*/ d({
+var p = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "VInputGroup",
 	props: {
 		label: { default: void 0 },
 		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
 		size: { default: void 0 },
 		compact: {
 			type: Boolean,
@@ -25,55 +30,49 @@ var b = [
 			default: void 0
 		}
 	},
-	setup(d) {
-		let S = d, { attrs: C, rootClass: w, rootStyle: T, forwardedAttrs: E } = n(), D = v(), O = v(), k = a(() => {
-			let e = C["aria-labelledby"];
-			return e === void 0 ? S.label && C["aria-label"] === void 0 ? D : void 0 : e;
-		}), A = a(() => r(C["aria-describedby"], !!S.hint && O)), j = {
+	setup(o) {
+		let p = o, { rootClass: m, rootStyle: h, forwardedAttrs: g } = t(), _ = {
 			get size() {
-				return S.size;
+				return p.size;
 			},
 			get compact() {
-				return S.compact;
+				return p.compact;
 			},
 			get disabled() {
-				return S.disabled;
+				return p.disabled;
 			}
 		};
-		return m(i, j), m(t, j), (t, n) => (p(), c("div", f({
-			class: ["v-input-group", _(w)],
-			style: _(T),
-			role: "group"
-		}, _(E), {
-			"aria-labelledby": k.value,
-			"aria-describedby": A.value,
-			"data-disabled": d.disabled ? "" : void 0
-		}), [
-			d.label ? (p(), o(e, {
-				key: 0,
-				id: _(D),
-				as: "span",
-				variant: "label",
-				class: "v-input-group-label"
-			}, {
-				default: y(() => [u(g(d.label), 1)]),
-				_: 1
-			}, 8, ["id"])) : s("", !0),
-			l("div", x, [h(t.$slots, "default")]),
-			d.hint ? (p(), o(e, {
-				key: 1,
-				id: _(O),
-				variant: "caption",
-				tone: "muted",
-				class: "v-input-group-hint"
-			}, {
-				default: y(() => [u(g(d.hint), 1)]),
-				_: 1
-			}, 8, ["id"])) : s("", !0)
-		], 16, b));
+		return l(r, _), l(e, _), (e, t) => (c(), i(n, s(d(g), {
+			class: ["v-input-group", d(m)],
+			style: d(h),
+			label: o.label,
+			hint: o.hint,
+			error: o.error,
+			required: o.required,
+			disabled: o.disabled,
+			"hide-label": o.hideLabel,
+			"label-position": o.labelPosition,
+			group: ""
+		}), {
+			default: f(({ fieldProps: t }) => [a("div", s(t, {
+				class: "v-input-group-row",
+				role: "group"
+			}), [u(e.$slots, "default")], 16)]),
+			_: 3
+		}, 16, [
+			"class",
+			"style",
+			"label",
+			"hint",
+			"error",
+			"required",
+			"disabled",
+			"hide-label",
+			"label-position"
+		]));
 	}
 });
 //#endregion
-export { S as default };
+export { p as default };
 
 //# sourceMappingURL=VInputGroup.vue_vue_type_script_setup_true_lang.js.map

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 { computed, provide, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { buttonGroupKey } from '../VButton/context'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\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   * 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  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\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst labelId = useId()\nconst hintId = useId()\n\n// @a11y\n// In the template comes after `v-bind=\"forwardedAttrs\"` and would otherwise overwrite what the\n// consumer wrote, so this computed has to hand their value back itself. An `aria-label` or an\n// `aria-labelledby` written by the consumer names the group, and the VISIBLE label must not\n// double it: `aria-labelledby` wins over `aria-label` in the accessible name computation, so\n// emitting ours on top of a consumer's `aria-label` would silently cancel it.\nconst labelledBy = computed(() => {\n  const own = attrs['aria-labelledby'] as string | undefined\n  if (own !== undefined) return own\n  // TRUTHINESS, the test the template renders the label with: an empty `label=\"\"` renders\n  // no element, and naming the group after an id nothing carries leaves it nameless.\n  return props.label && attrs['aria-label'] === undefined ? labelId : undefined\n})\n\n// @a11y\n// This aggregation is also why the component takes `inheritAttrs: false` despite having a\n// single root: left to fallthrough, a consumer's `aria-describedby` would overwrite ours and\n// the hint would stop being announced, with nothing to show for it.\nconst describedBy = computed(() =>\n  joinIds(attrs['aria-describedby'] as string | undefined, !!props.hint && hintId),\n)\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  <div\n    class=\"v-input-group\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    role=\"group\"\n    v-bind=\"forwardedAttrs\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <!-- A span and not a `<label for>`: a label points at ONE control, and this names a row\n         of them. The group takes it through aria-labelledby, the ARIA pattern for a\n         composed field. -->\n    <VTypography v-if=\"label\" :id=\"labelId\" as=\"span\" variant=\"label\" class=\"v-input-group-label\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-group-row\">\n      <slot />\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-group-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * `.v-overlay` is in both guards and neither is optional. A panel must not pass for a\n   * segment: VMenu renders its own as a SIBLING of its trigger.\n   */\n\n  .v-input-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     classes stay as hooks: a consumer overrides through them, and the disabled state\n     below reaches them that way. */\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\").\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  /* VInput's rule, at the same values: through the colour tokens, never through opacity. */\n  .v-input-group[data-disabled] :is(.v-input-group-label, .v-input-group-hint) {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GAaR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAE/D,IAAU,EAAM,GAChB,IAAS,EAAM,GAQf,IAAa,QAAe;GAChC,IAAM,IAAM,EAAM;GAIlB,OAHI,MAAQ,KAAA,IAGL,EAAM,SAAS,EAAM,kBAAkB,KAAA,IAAY,IAAU,KAAA,IAHtC;EAIhC,CAAC,GAMK,IAAc,QAClB,EAAQ,EAAM,qBAA2C,CAAC,CAAC,EAAM,QAAQ,CAAM,CACjF,GAGM,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,EAwBM,OAxBN,EAwBM;GAvBJ,OAAK,CAAC,iBACE,EAAA,CAAA,CAAS;GAChB,OAAO,EAAA,CAAA;GACR,MAAK;KACG,EAAA,CAAA,GAAc;GACrB,mBAAiB,EAAA;GACjB,oBAAkB,EAAA;GAClB,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;GAKb,EAAA,SAAA,EAAA,GAAnB,EAEc,GAAA;;IAFa,IAAI,EAAA,CAAA;IAAS,IAAG;IAAO,SAAQ;IAAQ,OAAM;;qBAC3D,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;GAGV,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAGS,EAAA,QAAA,EAAA,GAAnB,EAEc,GAAA;;IAFY,IAAI,EAAA,CAAA;IAAQ,SAAQ;IAAU,MAAK;IAAQ,OAAM;;qBAC/D,CAAA,EAAA,EAAP,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA"}
+{"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"}

package/dist/components/VInputOTP/VInputOTP.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-input-otp{--input-otp-font-size:var(--vectis-font-size-lg);align-items:start;gap:var(--vectis-space-1);flex-direction:column;display:inline-flex}.v-input-otp-boxes{align-items:center;gap:var(--control-gap);direction:ltr;display:flex}.v-input-otp-input{width:var(--control-height);height:var(--control-height);text-align:center;background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-input-otp[data-readonly] .v-input-otp-input{background:var(--vectis-color-surface-sunken);border-color:var(--vectis-color-border)}.v-input-otp:not([data-invalid]) .v-input-otp-input:hover:not(:focus,:disabled){border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-input-otp-input:focus{border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--vectis-color-accent);outline:var(--vectis-focus-ring-width) solid transparent}.v-input-otp[data-invalid] .v-input-otp-input{border-color:var(--vectis-color-danger)}.v-input-otp[data-invalid] .v-input-otp-input:focus{box-shadow:0 0 0 1px var(--vectis-color-danger)}.v-input-otp-literal{color:var(--vectis-color-text-muted);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.v-input-otp[data-disabled] .v-input-otp-input{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);border-color:var(--vectis-color-border);cursor:not-allowed}.v-input-otp[data-disabled] .v-input-otp-literal,.v-input-otp[data-disabled] .v-input-otp-hint{color:var(--vectis-color-text-subtle)}.v-input-otp[data-size=sm]{--input-otp-font-size:var(--vectis-font-size-md)}.v-input-otp[data-size=lg]{--input-otp-font-size:var(--vectis-font-size-xl)}@media (prefers-reduced-motion:reduce){.v-input-otp-input{transition:none}}}
+@layer vectis.components{.v-input-otp.v-field{align-items:start;display:inline-flex}.v-input-otp-group{--input-otp-font-size:var(--vectis-font-size-lg)}.v-input-otp-boxes{align-items:center;gap:var(--control-gap);direction:ltr;display:flex}.v-input-otp-input{width:var(--control-height);height:var(--control-height);text-align:center;background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-input-otp-group[data-readonly] .v-input-otp-input{background:var(--vectis-color-surface-sunken);border-color:var(--vectis-color-border)}.v-input-otp-group:not([data-invalid]) .v-input-otp-input:hover:not(:focus,:disabled){border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-input-otp-input:focus{border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--vectis-color-accent);outline:var(--vectis-focus-ring-width) solid transparent}.v-input-otp-group[data-invalid] .v-input-otp-input{border-color:var(--vectis-color-danger)}.v-input-otp-group[data-invalid] .v-input-otp-input:focus{box-shadow:0 0 0 1px var(--vectis-color-danger)}.v-input-otp-literal{color:var(--vectis-color-text-muted);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.v-input-otp-group[data-disabled] .v-input-otp-input{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);border-color:var(--vectis-color-border);cursor:not-allowed}.v-input-otp-group[data-disabled] .v-input-otp-literal{color:var(--vectis-color-text-subtle)}.v-input-otp-group[data-size=sm]{--input-otp-font-size:var(--vectis-font-size-md)}.v-input-otp-group[data-size=lg]{--input-otp-font-size:var(--vectis-font-size-xl)}@media (prefers-reduced-motion:reduce){.v-input-otp-input{transition:none}}}

package/dist/components/VInputOTP/VInputOTP.d.ts

@@ -1,3 +1,4 @@
+import { FieldLabelPosition } from '../VField/VField.js';
 import { IconSource } from '../VIcon/types.js';
 /** The height of the boxes: 32, 40 or 48 pixels. */
 export type InputOTPSize = 'sm' | 'md' | 'lg';
@@ -33,8 +34,8 @@ interface InputOTPProps {
     /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */
     invalid?: boolean;
     /**
-     * What screen readers announce for the row as a whole. It falls back to the design system
-     * dictionary.
+     * The label above the boxes, which names the row. Without it, the row is named by its
+     * `aria-label` or by the design system dictionary.
      */
     label?: string;
     /**
@@ -42,6 +43,24 @@ interface InputOTPProps {
      * tied to the row for assistive technology, so it is read out along with the label.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the code as required: an asterisk follows the label, and the hidden input a form reads
+     * is `required`.
+     */
+    required?: boolean;
+    /** Hides the label visually. It still names the row for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the boxes (`top`, the default), or at their start, in a column
+     * of its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
 }
 type __VLS_Props = InputOTPProps;
 type __VLS_ModelProps = {
@@ -55,7 +74,7 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     /** Moves the focus to the first empty box, or to the last one when the code is complete. */
-    focus: (options?: FocusOptions) => void;
+    focus: (options?: FocusOptions) => void | undefined;
     /** Selects the box the focus is on, as clicking into one already does. */
     select: () => void;
     /** The row itself, for what neither of the two above covers. */
@@ -68,16 +87,20 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     onComplete?: ((code: string) => any) | undefined;
 }>, {
     label: string;
+    format: InputOTPFormat;
+    error: string;
     size: InputOTPSize;
     length: number;
     pattern: string;
     compact: boolean;
     disabled: boolean;
+    required: boolean;
     invalid: boolean;
     hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
     readonly: boolean;
     separatorIcon: IconSource;
-    format: InputOTPFormat;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;