vectis-ui 0.15.0 → 0.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"VColorInput.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","_createBlock","VPopover","_isRef","VColorPicker","_createCommentVNode","VPopover_default","VInput_default","VColorPicker_default","_hoisted_1","_hoisted_2","_hoisted_3","VColorInput_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","model","useModel","emit","useRootAttrs","m","useMessages","rootEl","ref","panelRef","inputRef","pickerRef","group","inject","inputGroupKey","resolvedSize","resolvedCompact","resolvedDisabled","useControlShape","hasPanel","computed","useFieldPanel","inputAttrs","popupAttrs","forwardedAttrs","fieldText","value","parsed","parseColor","swatchColor","formatColor","commitField","text","color","next","onFieldKeydown","event","onPickerKeydown","closeAndFocus","clearVisible","canClear","clearValue","focusField","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","open","_cache","args","onFocusout","onKeydown","createVNode","mergeProps","$event","createSlots","withCtx","toggleFromIcon","createElementVNode","_ctx","renderSlot","createBlock","panelId","isRef","onPanelMousedown","createCommentVNode"],"sources":["../../../src/components/VColorInput/VColorInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose VInput with VColorPicker. The colour is typed into the field in any format, and the\n * swatch at its start opens the picker in a panel; a text input cannot use popovertarget, so the\n * manual panel bridge handles opening, dismissal and focus transfer into the picker.\n */\nimport { computed, inject, ref, watch } from 'vue'\n\nimport VColorPicker from '../VColorPicker/VColorPicker.vue'\nimport type { ColorFormat, ColorSwatch } from '../VColorPicker/VColorPicker.vue'\nimport { formatColor, parseColor } from '../VColorPicker/color'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VPopover from '../VPopover/VPopover.vue'\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ColorInputSize = 'sm' | 'md' | 'lg'\n\n/** Where the picker opens relative to the field. */\nexport type ColorInputPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\ninterface ColorInputProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The field accepts all\n   * four, and rewrites what was typed in this one when the reader leaves it.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as swatches in the picker. */\n  swatches?: ColorSwatch[]\n  /** Hides the picker's eyedropper button. */\n  hideEyeDropper?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid, is read along with it, and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ColorInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable. */\n  disabled?: boolean\n  /** Shows the colour without letting it change: nothing can be typed, and there is no picker. */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * What the swatch at the start of the field does, in words. It falls back to the design\n   * system dictionary.\n   */\n  pickerLabel?: string\n  /** Where the picker opens relative to the field. */\n  placement?: ColorInputPlacement\n}\n\nconst props = withDefaults(defineProps<ColorInputProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideEyeDropper: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  clearable: false,\n  clearLabel: undefined,\n  pickerLabel: undefined,\n  placement: 'bottom-start',\n})\n\n/** The colour, written in `format`, or `null` when the field is empty. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Controls of your own inside the field, placed before the clear cross. */\n  'value-end'?(): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst m = useMessages()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VColorPicker> | null>(null)\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst hasPanel = computed(() => !props.readonly)\n\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  toggleFromIcon,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel: () => pickerRef.value?.focus(),\n})\n\nconst inputAttrs = popupAttrs(\n  () => forwardedAttrs.value,\n  () => hasPanel.value,\n)\n\n/** What the field shows: the value, or what is being typed until the reader leaves. */\nconst fieldText = ref('')\nwatch(model, (value) => (fieldText.value = value ?? ''), { immediate: true })\n\nconst parsed = computed(() => parseColor(model.value))\n\n/** The colour the swatch shows, with the opacity it has. */\nconst swatchColor = computed(() =>\n  parsed.value ? formatColor(parsed.value, 'rgb', props.alpha) : undefined,\n)\n\n/**\n * Takes what was typed, in any of the four formats, and rewrites it in `format`. Anything that\n * is not a colour puts the field back as it was.\n */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    model.value = null\n    return\n  }\n  const color = parseColor(text)\n  if (!color) {\n    fieldText.value = model.value ?? ''\n    return\n  }\n  const next = formatColor(color, props.format, props.alpha)\n  model.value = next\n  // The same value written again changes nothing, so the watcher would leave the text as typed.\n  fieldText.value = next\n}\n\n// @keyboard\n// Enter takes the value and stays in the field; without it, the panel bridge would open the\n// picker. The down arrow remains the way into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\n// @keyboard\n// Enter on a track or a swatch is done with choosing: the panel closes and the focus returns to\n// the field. A button's Enter is left alone, being its click.\nfunction onPickerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' || !(event.target as HTMLElement).matches('input')) return\n  event.preventDefault()\n  closeAndFocus()\n}\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, !!model.value || !!fieldText.value),\n)\n\nfunction clearValue() {\n  model.value = null\n  fieldText.value = ''\n  focusField()\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onKeydown\"\n  >\n    <VInput\n      ref=\"inputRef\"\n      v-model=\"fieldText\"\n      class=\"v-color-input-field\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      v-bind=\"inputAttrs\"\n      :readonly=\"readonly\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :invalid=\"invalid\"\n      :clearable=\"clearable\"\n      :clear-visible=\"clearVisible\"\n      :clear-label=\"clearLabel ?? m.colorInput.clear\"\n      @clear=\"clearValue\"\n      @change=\"commitField\"\n      @keydown=\"onFieldKeydown\"\n    >\n      <template #start>\n        <button\n          v-if=\"hasPanel\"\n          type=\"button\"\n          class=\"v-field-action v-color-input-swatch\"\n          :aria-label=\"pickerLabel ?? m.colorInput.openPicker\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"toggleFromIcon\"\n        >\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </button>\n        <span v-else class=\"v-color-input-swatch\" aria-hidden=\"true\">\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </span>\n      </template>\n      <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n    </VInput>\n\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--color-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      :aria-label=\"label ?? m.colorInput.pickerLabel\"\n      class=\"v-color-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VColorPicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :format=\"format\"\n        :alpha=\"alpha\"\n        :swatches=\"swatches\"\n        :hide-eye-dropper=\"hideEyeDropper\"\n        hide-input\n        @keydown=\"onPickerKeydown\"\n      />\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-input {\n    anchor-scope: --color-input-anchor;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Anchored to the field's box rather than the wrapper, which also holds the label and the\n   * hint: the panel then covers whichever of the two it lands on.\n   */\n  .v-color-input .v-input-field {\n    anchor-name: --color-input-anchor;\n  }\n\n  /* A colour is written left to right in every language, as in VColorPicker's own field. */\n  .v-color-input .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-input .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  /* The read-only swatch, which is no button and takes none of `.v-field-action`. */\n  span.v-color-input-swatch {\n    display: inline-flex;\n    flex: none;\n  }\n\n  /*\n   * The checkerboard shows through a translucent colour, drawn in the theme's own surface and\n   * border colours; an empty field shows it alone. Forced colours leave the chip untouched: it\n   * is the value, not the theme's paint. As on VColorPicker's swatches, the edge is a\n   * translucent border shading the colour that runs under it, the checkerboard stopping inside:\n   * an opaque ring would leave a pale fringe on the antialiased pixels.\n   */\n  .v-color-input-chip {\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(var(--color-input-chip, transparent), var(--color-input-chip, transparent))\n        border-box,\n      repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%)\n        0 0 / var(--vectis-control-size-color-picker-checker)\n        var(--vectis-control-size-color-picker-checker) padding-box;\n    forced-color-adjust: none;\n  }\n\n  .v-color-input[data-disabled] .v-color-input-chip {\n    opacity: 0.5;\n  }\n\n  /*\n   * `position-anchor` and the chrome come from VPopover; the panel's own padding is cancelled,\n   * VColorPicker padding itself as the date and time pickers do.\n   */\n  .v-popover-panel.v-color-input-panel {\n    inline-size: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VColorInput.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","_createBlock","VPopover","_isRef","VColorPicker","_createCommentVNode","VPopover_default","VInput_default","VColorPicker_default","_hoisted_1","_hoisted_2","_hoisted_3","VColorInput_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","model","useModel","emit","useRootAttrs","m","useMessages","rootEl","ref","panelRef","inputRef","pickerRef","group","inject","inputGroupKey","resolvedSize","resolvedDisabled","useControlShape","hasPanel","computed","useFieldPanel","inputAttrs","popupAttrs","forwardedAttrs","fieldText","value","parsed","parseColor","swatchColor","formatColor","commitField","text","color","next","onFieldKeydown","event","onPickerKeydown","closeAndFocus","clearVisible","canClear","clearValue","focusField","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","open","_cache","args","onFocusout","onKeydown","createVNode","mergeProps","$event","createSlots","withCtx","toggleFromIcon","createElementVNode","_ctx","renderSlot","createBlock","panelId","isRef","onPanelMousedown","createCommentVNode"],"sources":["../../../src/components/VColorInput/VColorInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose VInput with VColorPicker. The colour is typed into the field in any format, and the\n * swatch at its start opens the picker in a panel; a text input cannot use popovertarget, so the\n * manual panel bridge handles opening, dismissal and focus transfer into the picker.\n */\nimport { computed, inject, ref, watch } from 'vue'\n\nimport VColorPicker from '../VColorPicker/VColorPicker.vue'\nimport type { ColorFormat, ColorSwatch } from '../VColorPicker/VColorPicker.vue'\nimport { formatColor, parseColor } from '../VColorPicker/color'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VPopover from '../VPopover/VPopover.vue'\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ColorInputSize = 'sm' | 'md' | 'lg'\n\n/** Where the picker opens relative to the field. */\nexport type ColorInputPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\ninterface ColorInputProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The field accepts all\n   * four, and rewrites what was typed in this one when the reader leaves it.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as swatches in the picker. */\n  swatches?: ColorSwatch[]\n  /** Hides the picker's eyedropper button. */\n  hideEyeDropper?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid, is read along with it, and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ColorInputSize\n  /** Makes the field unusable. */\n  disabled?: boolean\n  /** Shows the colour without letting it change: nothing can be typed, and there is no picker. */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * What the swatch at the start of the field does, in words. It falls back to the design\n   * system dictionary.\n   */\n  pickerLabel?: string\n  /** Where the picker opens relative to the field. */\n  placement?: ColorInputPlacement\n}\n\nconst props = withDefaults(defineProps<ColorInputProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideEyeDropper: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  clearable: false,\n  clearLabel: undefined,\n  pickerLabel: undefined,\n  placement: 'bottom-start',\n})\n\n/** The colour, written in `format`, or `null` when the field is empty. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Controls of your own inside the field, placed before the clear cross. */\n  'value-end'?(): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst m = useMessages()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VColorPicker> | null>(null)\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\nconst hasPanel = computed(() => !props.readonly)\n\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  toggleFromIcon,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel: () => pickerRef.value?.focus(),\n})\n\nconst inputAttrs = popupAttrs(\n  () => forwardedAttrs.value,\n  () => hasPanel.value,\n)\n\n/** What the field shows: the value, or what is being typed until the reader leaves. */\nconst fieldText = ref('')\nwatch(model, (value) => (fieldText.value = value ?? ''), { immediate: true })\n\nconst parsed = computed(() => parseColor(model.value))\n\n/** The colour the swatch shows, with the opacity it has. */\nconst swatchColor = computed(() =>\n  parsed.value ? formatColor(parsed.value, 'rgb', props.alpha) : undefined,\n)\n\n/**\n * Takes what was typed, in any of the four formats, and rewrites it in `format`. Anything that\n * is not a colour puts the field back as it was.\n */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    model.value = null\n    return\n  }\n  const color = parseColor(text)\n  if (!color) {\n    fieldText.value = model.value ?? ''\n    return\n  }\n  const next = formatColor(color, props.format, props.alpha)\n  model.value = next\n  // The same value written again changes nothing, so the watcher would leave the text as typed.\n  fieldText.value = next\n}\n\n// @keyboard\n// Enter takes the value and stays in the field; without it, the panel bridge would open the\n// picker. The down arrow remains the way into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\n// @keyboard\n// Enter on a track or a swatch is done with choosing: the panel closes and the focus returns to\n// the field. A button's Enter is left alone, being its click.\nfunction onPickerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' || !(event.target as HTMLElement).matches('input')) return\n  event.preventDefault()\n  closeAndFocus()\n}\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, !!model.value || !!fieldText.value),\n)\n\nfunction clearValue() {\n  model.value = null\n  fieldText.value = ''\n  focusField()\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onKeydown\"\n  >\n    <VInput\n      ref=\"inputRef\"\n      v-model=\"fieldText\"\n      class=\"v-color-input-field\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      v-bind=\"inputAttrs\"\n      :readonly=\"readonly\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :disabled=\"resolvedDisabled\"\n      :invalid=\"invalid\"\n      :clearable=\"clearable\"\n      :clear-visible=\"clearVisible\"\n      :clear-label=\"clearLabel ?? m.colorInput.clear\"\n      @clear=\"clearValue\"\n      @change=\"commitField\"\n      @keydown=\"onFieldKeydown\"\n    >\n      <template #start>\n        <button\n          v-if=\"hasPanel\"\n          type=\"button\"\n          class=\"v-field-action v-color-input-swatch\"\n          :aria-label=\"pickerLabel ?? m.colorInput.openPicker\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"toggleFromIcon\"\n        >\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </button>\n        <span v-else class=\"v-color-input-swatch\" aria-hidden=\"true\">\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </span>\n      </template>\n      <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n    </VInput>\n\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--color-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      :aria-label=\"label ?? m.colorInput.pickerLabel\"\n      class=\"v-color-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VColorPicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :format=\"format\"\n        :alpha=\"alpha\"\n        :swatches=\"swatches\"\n        :hide-eye-dropper=\"hideEyeDropper\"\n        hide-input\n        @keydown=\"onPickerKeydown\"\n      />\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-input {\n    anchor-scope: --color-input-anchor;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Anchored to the field's box rather than the wrapper, which also holds the label and the\n   * hint: the panel then covers whichever of the two it lands on.\n   */\n  .v-color-input .v-input-field {\n    anchor-name: --color-input-anchor;\n  }\n\n  /* A colour is written left to right in every language, as in VColorPicker's own field. */\n  .v-color-input .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-input .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  /* The read-only swatch, which is no button and takes none of `.v-field-action`. */\n  span.v-color-input-swatch {\n    display: inline-flex;\n    flex: none;\n  }\n\n  /*\n   * The checkerboard shows through a translucent colour, drawn in the theme's own surface and\n   * border colours; an empty field shows it alone. Forced colours leave the chip untouched: it\n   * is the value, not the theme's paint. As on VColorPicker's swatches, the edge is a\n   * translucent border shading the colour that runs under it, the checkerboard stopping inside:\n   * an opaque ring would leave a pale fringe on the antialiased pixels.\n   */\n  .v-color-input-chip {\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(var(--color-input-chip, transparent), var(--color-input-chip, transparent))\n        border-box,\n      repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%)\n        0 0 / var(--vectis-control-size-color-picker-checker)\n        var(--vectis-control-size-color-picker-checker) padding-box;\n    forced-color-adjust: none;\n  }\n\n  .v-color-input[data-disabled] .v-color-input-chip {\n    opacity: 0.5;\n  }\n\n  /*\n   * `position-anchor` and the chrome come from VPopover; the panel's own padding is cancelled,\n   * VColorPicker padding itself as the date and time pickers do.\n   */\n  .v-popover-panel.v-color-input-panel {\n    inline-size: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VColorPicker/color.js

@@ -68,7 +68,7 @@ function u(e, n, r, i) {
 function d(e, t) {
 	if (e === void 0) return null;
 	if (e === "none") return 0;
-	let n = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(%|deg|grad|rad|turn)?$/.exec(e);
+	let n = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(%|deg|grad|rad|turn)?$/.exec(e);
 	if (!n) return null;
 	let r = Number(n[1]);
 	switch (n[2]) {
@@ -97,7 +97,7 @@ function f(e) {
 function p(e) {
 	let r = (e ?? "").trim().toLowerCase();
 	if (!r) return null;
-	let i = /^(rgba?|hsla?|oklch)\(\s*([^)]*)\)$/.exec(r);
+	let i = /^(rgba?|hsla?|oklch)\(([^)]*)\)$/.exec(r);
 	if (!i) return f(r.replace(/^#/, ""));
 	let [o = "", s, c] = i[2].split("/");
 	if (c !== void 0) return null;

package/dist/components/VColorPicker/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["COLOR_FORMATS","clamp01","n","wrapHue","h","hsvToRgb","f","k","v","s","rgbToHsv","max","r","g","b","delta","hue","hslToRgb","l","rgbToHsl","rgba","toLinear","c","toGamma","rgbToOklch","lr","lg","lb","m","L","A","B","oklchToRgb","C","H","channel","readNumber","token","match","percent","parseHex","hex","a","pair","parseColor","text","input","fn","main","alphaPart","extra","args","legacyAlpha","alphaToken","name","arg","round","digits","formatColor","alpha","slash","format","sameColor"],"sources":["../../../src/components/VColorPicker/color.ts"],"sourcesContent":["// @core\n/**\n * Colour parsing, conversion and formatting for VColorPicker and VColorInput, without a\n * dependency. Everything works in sRGB: an `oklch()` colour outside it is clipped to the nearest\n * displayable one, which is what the picker could show anyway.\n */\n\n/** How a colour is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. */\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch'\n\n/** The formats in the order the picker offers them. */\nexport const COLOR_FORMATS: readonly ColorFormat[] = ['hex', 'rgb', 'hsl', 'oklch']\n\n/** A colour in sRGB, each channel from 0 to 1, alpha included. */\nexport interface Rgba {\n  r: number\n  g: number\n  b: number\n  a: number\n}\n\n/**\n * A colour as the picker holds it: hue in degrees, saturation and value (brightness) from 0 to\n * 1. The hue survives where RGB would lose it, on greys, black and white.\n */\nexport interface Hsva {\n  h: number\n  s: number\n  v: number\n  a: number\n}\n\nconst clamp01 = (n: number) => Math.min(Math.max(n, 0), 1)\nconst wrapHue = (h: number) => ((h % 360) + 360) % 360\n\nexport function hsvToRgb({ h, s, v, a }: Hsva): Rgba {\n  const f = (n: number) => {\n    const k = (n + h / 60) % 6\n    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1))\n  }\n  return { r: f(5), g: f(3), b: f(1), a }\n}\n\n/** `hue` is kept when the colour has none of its own: a grey, black or white. */\nexport function rgbToHsv({ r, g, b, a }: Rgba, hue = 0): Hsva {\n  const max = Math.max(r, g, b)\n  const delta = max - Math.min(r, g, b)\n  let h = hue\n  if (delta > 0) {\n    if (max === r) h = 60 * (((g - b) / delta + 6) % 6)\n    else if (max === g) h = 60 * ((b - r) / delta + 2)\n    else h = 60 * ((r - g) / delta + 4)\n  }\n  return { h: wrapHue(h), s: max === 0 ? 0 : delta / max, v: max, a }\n}\n\nfunction hslToRgb(h: number, s: number, l: number, a: number): Rgba {\n  const v = l + s * Math.min(l, 1 - l)\n  return hsvToRgb({ h, s: v === 0 ? 0 : 2 * (1 - l / v), v, a })\n}\n\nfunction rgbToHsl(rgba: Rgba): { h: number; s: number; l: number } {\n  const { h, s, v } = rgbToHsv(rgba)\n  const l = v * (1 - s / 2)\n  return { h, s: l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l }\n}\n\nconst toLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)\nconst toGamma = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)\n\n/** Björn Ottosson's OKLab matrices, from linear sRGB and back. */\nfunction rgbToOklch({ r, g, b }: Rgba): { l: number; c: number; h: number } {\n  const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)]\n  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb)\n  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb)\n  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb)\n  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s\n  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s\n  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n  return { l: L, c: Math.hypot(A, B), h: wrapHue((Math.atan2(B, A) * 180) / Math.PI) }\n}\n\nfunction oklchToRgb(L: number, C: number, H: number, a: number): Rgba {\n  const A = C * Math.cos((H * Math.PI) / 180)\n  const B = C * Math.sin((H * Math.PI) / 180)\n  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3\n  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3\n  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3\n  const channel = (n: number) => clamp01(toGamma(n))\n  return {\n    r: channel(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),\n    g: channel(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),\n    b: channel(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),\n    a,\n  }\n}\n\n/**\n * One argument of a colour function: a number, a percentage or an angle, `none` counting as 0.\n * `percent` is what 100% is worth for that channel.\n */\nfunction readNumber(token: string | undefined, percent: number): number | null {\n  if (token === undefined) return null\n  if (token === 'none') return 0\n  const match = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?)(%|deg|grad|rad|turn)?$/.exec(token)\n  if (!match) return null\n  const n = Number(match[1])\n  switch (match[2]) {\n    case '%':\n      return (n / 100) * percent\n    case 'grad':\n      return n * 0.9\n    case 'rad':\n      return (n * 180) / Math.PI\n    case 'turn':\n      return n * 360\n    default:\n      return n\n  }\n}\n\nfunction parseHex(hex: string): Rgba | null {\n  if (!/^[0-9a-f]+$/.test(hex) || ![3, 4, 6, 8].includes(hex.length)) return null\n  const pairs = hex.length <= 4 ? [...hex].map((c) => c + c) : hex.match(/../g)!\n  const [r = 0, g = 0, b = 0, a = 1] = pairs.map((pair) => parseInt(pair, 16) / 255)\n  return { r, g, b, a }\n}\n\n/**\n * Reads a colour written in hex (`#` optional, 3, 4, 6 or 8 digits), `rgb()`, `hsl()` or\n * `oklch()`, in the comma or the space syntax, with an optional alpha. Returns `null` for\n * anything else, CSS colour names included.\n */\nexport function parseColor(input: string | null | undefined): Rgba | null {\n  const text = (input ?? '').trim().toLowerCase()\n  if (!text) return null\n  const fn = /^(rgba?|hsla?|oklch)\\(\\s*([^)]*)\\)$/.exec(text)\n  if (!fn) return parseHex(text.replace(/^#/, ''))\n\n  const [main = '', alphaPart, extra] = fn[2]!.split('/')\n  if (extra !== undefined) return null\n  const args = main.trim().split(/\\s*,\\s*|\\s+/)\n  const legacyAlpha = alphaPart === undefined && args.length === 4 ? args.pop() : undefined\n  if (args.length !== 3) return null\n  const alphaToken = (alphaPart ?? legacyAlpha)?.trim()\n  const a = alphaToken === undefined ? 1 : readNumber(alphaToken, 1)\n  if (a === null) return null\n\n  const name = fn[1]!\n  if (name.startsWith('rgb')) {\n    const [r, g, b] = args.map((arg) => readNumber(arg, 255))\n    if (r == null || g == null || b == null) return null\n    return { r: clamp01(r / 255), g: clamp01(g / 255), b: clamp01(b / 255), a: clamp01(a) }\n  }\n  if (name.startsWith('hsl')) {\n    // Bare numbers are percentages here, as the space syntax allows.\n    const [h, s, l] = [readNumber(args[0], 360), readNumber(args[1], 100), readNumber(args[2], 100)]\n    if (h == null || s == null || l == null) return null\n    return hslToRgb(wrapHue(h), clamp01(s / 100), clamp01(l / 100), clamp01(a))\n  }\n  const [l, c, h] = [readNumber(args[0], 1), readNumber(args[1], 0.4), readNumber(args[2], 360)]\n  if (l == null || c == null || h == null) return null\n  return oklchToRgb(clamp01(l), Math.max(c, 0), wrapHue(h), clamp01(a))\n}\n\n/** Rounds to `digits` decimals and drops the trailing zeros. */\nconst round = (n: number, digits = 0) => String(Number(n.toFixed(digits)))\n\n/**\n * Writes a colour in `format`. The alpha appears only when `alpha` is true and the colour is not\n * opaque, so an opaque colour always reads the same whether alpha is offered or not.\n */\nexport function formatColor(rgba: Rgba, format: ColorFormat, alpha = false): string {\n  const a = alpha ? clamp01(rgba.a) : 1\n  const slash = a < 1 ? ` / ${round(a, 2)}` : ''\n  switch (format) {\n    case 'rgb':\n      return `rgb(${round(rgba.r * 255)} ${round(rgba.g * 255)} ${round(rgba.b * 255)}${slash})`\n    case 'hsl': {\n      const { h, s, l } = rgbToHsl(rgba)\n      return `hsl(${round(h)} ${round(s * 100)}% ${round(l * 100)}%${slash})`\n    }\n    case 'oklch': {\n      const { l, c, h } = rgbToOklch(rgba)\n      // Below this chroma the hue is noise from rounding: a grey is written with none.\n      const hue = c < 0.0005 ? 0 : h\n      return `oklch(${round(l * 100, 1)}% ${round(c, 3)} ${round(hue, 1)}${slash})`\n    }\n    default: {\n      const hex = (n: number) =>\n        Math.round(clamp01(n) * 255)\n          .toString(16)\n          .padStart(2, '0')\n      return `#${hex(rgba.r)}${hex(rgba.g)}${hex(rgba.b)}${a < 1 ? hex(a) : ''}`\n    }\n  }\n}\n\n/** Whether two colours are the same once written in hex, which is how swatches are matched. */\nexport function sameColor(a: Rgba | null, b: Rgba | null, alpha: boolean): boolean {\n  return !!a && !!b && formatColor(a, 'hex', alpha) === formatColor(b, 'hex', alpha)\n}\n"],"mappings":"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"}
+{"version":3,"file":"color.js","names":["COLOR_FORMATS","clamp01","n","wrapHue","h","hsvToRgb","f","k","v","s","rgbToHsv","max","r","g","b","delta","hue","hslToRgb","l","rgbToHsl","rgba","toLinear","c","toGamma","rgbToOklch","lr","lg","lb","m","L","A","B","oklchToRgb","C","H","channel","readNumber","token","match","percent","parseHex","hex","a","pair","parseColor","text","input","fn","main","alphaPart","extra","args","legacyAlpha","alphaToken","name","arg","round","digits","formatColor","alpha","slash","format","sameColor"],"sources":["../../../src/components/VColorPicker/color.ts"],"sourcesContent":["// @core\n/**\n * Colour parsing, conversion and formatting for VColorPicker and VColorInput, without a\n * dependency. Everything works in sRGB: an `oklch()` colour outside it is clipped to the nearest\n * displayable one, which is what the picker could show anyway.\n */\n\n/** How a colour is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. */\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch'\n\n/** The formats in the order the picker offers them. */\nexport const COLOR_FORMATS: readonly ColorFormat[] = ['hex', 'rgb', 'hsl', 'oklch']\n\n/** A colour in sRGB, each channel from 0 to 1, alpha included. */\nexport interface Rgba {\n  r: number\n  g: number\n  b: number\n  a: number\n}\n\n/**\n * A colour as the picker holds it: hue in degrees, saturation and value (brightness) from 0 to\n * 1. The hue survives where RGB would lose it, on greys, black and white.\n */\nexport interface Hsva {\n  h: number\n  s: number\n  v: number\n  a: number\n}\n\nconst clamp01 = (n: number) => Math.min(Math.max(n, 0), 1)\nconst wrapHue = (h: number) => ((h % 360) + 360) % 360\n\nexport function hsvToRgb({ h, s, v, a }: Hsva): Rgba {\n  const f = (n: number) => {\n    const k = (n + h / 60) % 6\n    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1))\n  }\n  return { r: f(5), g: f(3), b: f(1), a }\n}\n\n/** `hue` is kept when the colour has none of its own: a grey, black or white. */\nexport function rgbToHsv({ r, g, b, a }: Rgba, hue = 0): Hsva {\n  const max = Math.max(r, g, b)\n  const delta = max - Math.min(r, g, b)\n  let h = hue\n  if (delta > 0) {\n    if (max === r) h = 60 * (((g - b) / delta + 6) % 6)\n    else if (max === g) h = 60 * ((b - r) / delta + 2)\n    else h = 60 * ((r - g) / delta + 4)\n  }\n  return { h: wrapHue(h), s: max === 0 ? 0 : delta / max, v: max, a }\n}\n\nfunction hslToRgb(h: number, s: number, l: number, a: number): Rgba {\n  const v = l + s * Math.min(l, 1 - l)\n  return hsvToRgb({ h, s: v === 0 ? 0 : 2 * (1 - l / v), v, a })\n}\n\nfunction rgbToHsl(rgba: Rgba): { h: number; s: number; l: number } {\n  const { h, s, v } = rgbToHsv(rgba)\n  const l = v * (1 - s / 2)\n  return { h, s: l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l }\n}\n\nconst toLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)\nconst toGamma = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)\n\n/** Björn Ottosson's OKLab matrices, from linear sRGB and back. */\nfunction rgbToOklch({ r, g, b }: Rgba): { l: number; c: number; h: number } {\n  const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)]\n  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb)\n  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb)\n  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb)\n  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s\n  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s\n  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n  return { l: L, c: Math.hypot(A, B), h: wrapHue((Math.atan2(B, A) * 180) / Math.PI) }\n}\n\nfunction oklchToRgb(L: number, C: number, H: number, a: number): Rgba {\n  const A = C * Math.cos((H * Math.PI) / 180)\n  const B = C * Math.sin((H * Math.PI) / 180)\n  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3\n  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3\n  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3\n  const channel = (n: number) => clamp01(toGamma(n))\n  return {\n    r: channel(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),\n    g: channel(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),\n    b: channel(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),\n    a,\n  }\n}\n\n/**\n * One argument of a colour function: a number, a percentage or an angle, `none` counting as 0.\n * `percent` is what 100% is worth for that channel.\n */\nfunction readNumber(token: string | undefined, percent: number): number | null {\n  if (token === undefined) return null\n  if (token === 'none') return 0\n  // No two quantifiers may compete for the same digits: overlapping ones take quadratic time on\n  // a long run of them that fails to match.\n  const match = /^([+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?)(%|deg|grad|rad|turn)?$/.exec(token)\n  if (!match) return null\n  const n = Number(match[1])\n  switch (match[2]) {\n    case '%':\n      return (n / 100) * percent\n    case 'grad':\n      return n * 0.9\n    case 'rad':\n      return (n * 180) / Math.PI\n    case 'turn':\n      return n * 360\n    default:\n      return n\n  }\n}\n\nfunction parseHex(hex: string): Rgba | null {\n  if (!/^[0-9a-f]+$/.test(hex) || ![3, 4, 6, 8].includes(hex.length)) return null\n  const pairs = hex.length <= 4 ? [...hex].map((c) => c + c) : hex.match(/../g)!\n  const [r = 0, g = 0, b = 0, a = 1] = pairs.map((pair) => parseInt(pair, 16) / 255)\n  return { r, g, b, a }\n}\n\n/**\n * Reads a colour written in hex (`#` optional, 3, 4, 6 or 8 digits), `rgb()`, `hsl()` or\n * `oklch()`, in the comma or the space syntax, with an optional alpha. Returns `null` for\n * anything else, CSS colour names included.\n */\nexport function parseColor(input: string | null | undefined): Rgba | null {\n  const text = (input ?? '').trim().toLowerCase()\n  if (!text) return null\n  // The arguments are trimmed below; a `\\s*` before them would compete with `[^)]*`.\n  const fn = /^(rgba?|hsla?|oklch)\\(([^)]*)\\)$/.exec(text)\n  if (!fn) return parseHex(text.replace(/^#/, ''))\n\n  const [main = '', alphaPart, extra] = fn[2]!.split('/')\n  if (extra !== undefined) return null\n  const args = main.trim().split(/\\s*,\\s*|\\s+/)\n  const legacyAlpha = alphaPart === undefined && args.length === 4 ? args.pop() : undefined\n  if (args.length !== 3) return null\n  const alphaToken = (alphaPart ?? legacyAlpha)?.trim()\n  const a = alphaToken === undefined ? 1 : readNumber(alphaToken, 1)\n  if (a === null) return null\n\n  const name = fn[1]!\n  if (name.startsWith('rgb')) {\n    const [r, g, b] = args.map((arg) => readNumber(arg, 255))\n    if (r == null || g == null || b == null) return null\n    return { r: clamp01(r / 255), g: clamp01(g / 255), b: clamp01(b / 255), a: clamp01(a) }\n  }\n  if (name.startsWith('hsl')) {\n    // Bare numbers are percentages here, as the space syntax allows.\n    const [h, s, l] = [readNumber(args[0], 360), readNumber(args[1], 100), readNumber(args[2], 100)]\n    if (h == null || s == null || l == null) return null\n    return hslToRgb(wrapHue(h), clamp01(s / 100), clamp01(l / 100), clamp01(a))\n  }\n  const [l, c, h] = [readNumber(args[0], 1), readNumber(args[1], 0.4), readNumber(args[2], 360)]\n  if (l == null || c == null || h == null) return null\n  return oklchToRgb(clamp01(l), Math.max(c, 0), wrapHue(h), clamp01(a))\n}\n\n/** Rounds to `digits` decimals and drops the trailing zeros. */\nconst round = (n: number, digits = 0) => String(Number(n.toFixed(digits)))\n\n/**\n * Writes a colour in `format`. The alpha appears only when `alpha` is true and the colour is not\n * opaque, so an opaque colour always reads the same whether alpha is offered or not.\n */\nexport function formatColor(rgba: Rgba, format: ColorFormat, alpha = false): string {\n  const a = alpha ? clamp01(rgba.a) : 1\n  const slash = a < 1 ? ` / ${round(a, 2)}` : ''\n  switch (format) {\n    case 'rgb':\n      return `rgb(${round(rgba.r * 255)} ${round(rgba.g * 255)} ${round(rgba.b * 255)}${slash})`\n    case 'hsl': {\n      const { h, s, l } = rgbToHsl(rgba)\n      return `hsl(${round(h)} ${round(s * 100)}% ${round(l * 100)}%${slash})`\n    }\n    case 'oklch': {\n      const { l, c, h } = rgbToOklch(rgba)\n      // Below this chroma the hue is noise from rounding: a grey is written with none.\n      const hue = c < 0.0005 ? 0 : h\n      return `oklch(${round(l * 100, 1)}% ${round(c, 3)} ${round(hue, 1)}${slash})`\n    }\n    default: {\n      const hex = (n: number) =>\n        Math.round(clamp01(n) * 255)\n          .toString(16)\n          .padStart(2, '0')\n      return `#${hex(rgba.r)}${hex(rgba.g)}${hex(rgba.b)}${a < 1 ? hex(a) : ''}`\n    }\n  }\n}\n\n/** Whether two colours are the same once written in hex, which is how swatches are matched. */\nexport function sameColor(a: Rgba | null, b: Rgba | null, alpha: boolean): boolean {\n  return !!a && !!b && formatColor(a, 'hex', alpha) === formatColor(b, 'hex', alpha)\n}\n"],"mappings":"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"}

package/dist/components/VCombobox/VCombobox.d.ts

@@ -92,8 +92,6 @@ interface ComboboxProps {
     labelPosition?: FieldLabelPosition;
     /** The height of the field: 32, 40 or 48 pixels. */
     size?: ComboboxSize;
-    /** Takes 4px off the height, as everywhere else in the design system. */
-    compact?: boolean;
     /** What the field says while nothing is chosen and nothing has been typed. */
     placeholder?: string;
     /** Makes the field unusable, greyed out through the colour tokens. */
@@ -130,6 +128,13 @@ interface ComboboxProps {
     emptyText?: string;
     /** How the list is narrowed as one types. */
     filter?: ComboboxFilter;
+    /**
+     * Lets what has been typed become a value of its own. When it matches no option's label and no
+     * chosen value, a last row offers to create it; choosing that row adds the text to the value
+     * and emits `create`. Instead of an empty state, the list stays out of sight while it has
+     * nothing to show, and the chevron is dropped while there are no options at all.
+     */
+    creatable?: boolean;
     /**
      * How long to wait before telling the source what is being searched for, in
      * milliseconds. Zero tells it at once, which suits a source that is not a network
@@ -197,12 +202,14 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     el: import('vue').ComputedRef<HTMLInputElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clear: () => any;
+    create: (query: string) => any;
     search: (query: string) => any;
     "update:modelValue": (value: ItemValue | ItemValue[]) => any;
     "click:icon-start": (event: MouseEvent) => any;
     "load-more": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
+    onCreate?: ((query: string) => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: ItemValue | ItemValue[]) => any) | undefined;
     "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
@@ -214,7 +221,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     error: string;
     size: ComboboxSize;
     filter: ComboboxFilter;
-    compact: boolean;
     iconStart: IconSource;
     disabled: boolean;
     required: boolean;
@@ -235,6 +241,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     virtual: boolean;
     overflowText: (count: number) => string;
     emptyText: string;
+    creatable: boolean;
     searchDebounce: number;
     hasMore: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/VCombobox/VCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"VCombobox.js","names":["_sfc_main","VCombobox_vue_vue_type_script_setup_true_lang_default","VCombobox_default"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\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 field for assistive technology,\n   * 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 field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ComboboxSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The size, the density and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same pair is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    if (typeof matcher === 'function') return list.filter((o) => matcher(o, q))\n    const needle = normalizeText(q)\n    return list.filter((o) => normalizedLabelOf(o).includes(needle))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!open.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open; on a\n      // closed list it is left to go on and close the dialog.\n      if (open.value) {\n        event.preventDefault()\n        closePanel()\n      }\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"optionsId\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron v-else class=\"v-combobox-chevron\" :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VCombobox.js","names":["_sfc_main","VCombobox_vue_vue_type_script_setup_true_lang_default","VCombobox_default"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { optionsOf, selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\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 field for assistive technology,\n   * 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 field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ComboboxSize\n  /** What the field says while nothing is chosen and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * Lets what has been typed become a value of its own. When it matches no option's label and no\n   * chosen value, a last row offers to create it; choosing that row adds the text to the value\n   * and emits `create`. Instead of an empty state, the list stays out of sight while it has\n   * nothing to show, and the chevron is dropped while there are no options at all.\n   */\n  creatable?: boolean\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  creatable: false,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\n  clear: []\n  /**\n   * What had been typed was added to the value. Add the matching option to `options`, or replace\n   * the value with an identifier of your own.\n   */\n  create: [query: string]\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\n// The size and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same size is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\n/** The options the consumer gave, without the row offering to create one. */\nconst offered = computed(() => optionsOf(props.options))\n\n// Private, so that it can never pass for an option's value nor for a chosen one.\nconst createValue = `${optionsId}-create`\n\n/**\n * The row offering to create what has been typed, unless an option or a chosen value already\n * bears that label. A created value is its own label, so chosen values are compared as they are.\n */\nconst createOption = computed<ComboboxOption | null>(() => {\n  const term = closedTerm.value ?? searchTerm.value\n  if (!props.creatable || !term) return null\n  const needle = normalizeText(term)\n  const taken =\n    offered.value.some((o) => normalizedLabelOf(o) === needle) ||\n    selectedValues.value.some((v) => typeof v === 'string' && normalizeText(v) === needle)\n  return taken ? null : { value: createValue, label: m.value.combobox.create(term) }\n})\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => (createOption.value ? [...props.options, createOption.value] : props.options),\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    const needle = normalizeText(q)\n    const matches =\n      typeof matcher === 'function'\n        ? (o: ComboboxOption) => matcher(o, q)\n        : (o: ComboboxOption) => normalizedLabelOf(o).includes(needle)\n    // The row creating the term is the term itself: no rule may narrow it away.\n    return list.filter((o) => o === createOption.value || matches(o))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n})\n\n// @a11y\n/**\n * Whether the panel is on screen. A creatable field hides it rather than show an empty state, a\n * free entry needing no list; it stays open underneath, so the search, the paging and the\n * closing carry on as usual, and it reappears as soon as there is something to show.\n */\nconst panelShown = computed(\n  () => open.value && (!props.creatable || filtered.value.length > 0 || props.loading),\n)\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!panelShown.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => offered.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  if (option.value === createValue) {\n    create()\n    return\n  }\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\n}\n\n/** Adds what has been typed as a value of its own, labelled by itself until an option holds it. */\nfunction create() {\n  const text = searchTerm.value\n  remember({ value: text, label: text })\n  if (props.multiple) {\n    typed.value = false\n    model.value = [...selectedValues.value, text]\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = text\n    closePanel(text)\n  }\n  emit('create', text)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes a list on screen, so a surrounding VDialog stays open; on a\n      // closed or hidden list it is left to go on and close the dialog.\n      if (panelShown.value) event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"panelShown\"\n        :aria-controls=\"optionsId\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :invalid=\"invalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"panelShown && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron\n            v-else-if=\"!creatable || offered.length > 0\"\n            class=\"v-combobox-chevron\"\n            :icon=\"expandIcon\"\n            :open=\"panelShown\"\n          />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      :open=\"panelShown\"\n      anchor=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div\n        v-else-if=\"filtered.length === 0 && !creatable\"\n        class=\"v-combobox-state\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}