vectis-ui 0.10.1 → 0.10.2

package/dist/components/VDialog/VDialogAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialogAlert.js","names":[],"sources":["../../../src/components/VDialog/VDialogAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A dialog demanding an answer: confirming something irreversible, acknowledging a\n * failure. It looks exactly like VDialog and is nothing more than VDialog with its\n * options fixed, but those fixed options change what it is.\n *\n * It is announced to assistive technology as an alert rather than an ordinary dialog,\n * and every casual way out is closed off: there is no cross, a click outside does\n * nothing, and Escape does nothing either. The buttons in the footer are the only way\n * to dismiss it — which is why supplying them is not optional.\n */\n\nimport { computed, ref } from 'vue'\n\nimport VDialog from './VDialog.vue'\nimport type { DialogTriggerProps } from './VDialog.vue'\n\ninterface DialogAlertProps {\n  /**\n   * The question being asked, which also names the dialog for assistive technology.\n   * It is ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, spelling out the consequences of the answer. */\n  subtitle?: string\n  /**\n   * How wide the alert is: a number is read as pixels, a string as any CSS length. Left\n   * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is\n   * never allowed to exceed the width of the viewport.\n   */\n  width?: number | string\n}\n\nwithDefaults(defineProps<DialogAlertProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n})\n\n/** Whether the alert is showing. It starts closed, and closing writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** What the alert says. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /**\n   * Extra controls in the header, where a dialog puts them before its cross: a link to help,\n   * for instance. An alert has no cross, so they sit at the end of the header alone.\n   */\n  'header-actions'?(): unknown\n  /**\n   * The buttons that answer the alert. They are not optional: nothing else can close\n   * this dialog.\n   */\n  footer?(): unknown\n  /**\n   * The button that opens the alert. Bind the `triggerProps` it receives onto it.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\n/*\n * The same three members VDialog exposes, handed straight through. This component is\n * VDialog with its options fixed, so a ref on it has to answer the same way — without\n * this, the one dialog that CANNOT be dismissed by Escape or by a click outside would\n * also be the one a consumer could not close from code.\n */\nconst dialogRef = ref<InstanceType<typeof VDialog> | null>(null)\n\ndefineExpose({\n  /**\n   * Opens the alert, exactly as setting `open` does. The opening lands on the next tick:\n   * the promise returned settles once the alert is showing.\n   */\n  show: (): Promise<void> => dialogRef.value?.show() ?? Promise.resolve(),\n  /** Closes it. The footer's buttons are the reader's only way out; this is yours. */\n  close: () => dialogRef.value?.close(),\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: computed(() => dialogRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VDialog\n    ref=\"dialogRef\"\n    v-model:open=\"open\"\n    role=\"alertdialog\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    :width=\"width\"\n    hide-close\n    persistent-backdrop\n    persistent-escape\n  >\n    <template v-if=\"$slots.trigger\" #trigger=\"{ triggerProps }\">\n      <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    </template>\n    <template v-if=\"$slots.header\" #header>\n      <slot name=\"header\" />\n    </template>\n    <template v-if=\"$slots['header-actions']\" #header-actions>\n      <slot name=\"header-actions\" />\n    </template>\n    <slot />\n    <template v-if=\"$slots.footer\" #footer>\n      <slot name=\"footer\" />\n    </template>\n  </VDialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"VDialogAlert.js","names":[],"sources":["../../../src/components/VDialog/VDialogAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Fix VDialog to alertdialog semantics and require an explicit answer instead of light\n * dismissal.\n */\n\nimport { computed, ref } from 'vue'\n\nimport VDialog from './VDialog.vue'\nimport type { DialogTriggerProps } from './VDialog.vue'\n\ninterface DialogAlertProps {\n  /**\n   * The question being asked, which also names the dialog for assistive technology.\n   * It is ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, spelling out the consequences of the answer. */\n  subtitle?: string\n  /**\n   * How wide the alert is: a number is read as pixels, a string as any CSS length. Left out, it\n   * takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n}\n\nwithDefaults(defineProps<DialogAlertProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n})\n\n/** Whether the alert is showing. It starts closed, and closing writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** What the alert says. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /**\n   * Extra controls in the header, where a dialog puts them before its cross: a link to help,\n   * for instance. An alert has no cross, so they sit at the end of the header alone.\n   */\n  'header-actions'?(): unknown\n  /**\n   * The buttons that answer the alert. They are not optional: nothing else can close\n   * this dialog.\n   */\n  footer?(): unknown\n  /**\n   * The button that opens the alert. Bind the `triggerProps` it receives onto it.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\n/*\n * This component is VDialog with its options fixed, so a ref on it has to answer the same way;\n * without this, the one dialog that CANNOT be dismissed by Escape or by a click outside would\n * also be the one a consumer could not close from code.\n */\nconst dialogRef = ref<InstanceType<typeof VDialog> | null>(null)\n\ndefineExpose({\n  /**\n   * Opens the alert, exactly as setting `open` does. The opening lands on the next tick:\n   * the promise returned settles once the alert is showing.\n   */\n  show: (): Promise<void> => dialogRef.value?.show() ?? Promise.resolve(),\n  /** Closes it. The footer's buttons are the reader's only way out; this is yours. */\n  close: () => dialogRef.value?.close(),\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: computed(() => dialogRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VDialog\n    ref=\"dialogRef\"\n    v-model:open=\"open\"\n    role=\"alertdialog\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    :width=\"width\"\n    hide-close\n    persistent-backdrop\n    persistent-escape\n  >\n    <template v-if=\"$slots.trigger\" #trigger=\"{ triggerProps }\">\n      <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    </template>\n    <template v-if=\"$slots.header\" #header>\n      <slot name=\"header\" />\n    </template>\n    <template v-if=\"$slots['header-actions']\" #header-actions>\n      <slot name=\"header-actions\" />\n    </template>\n    <slot />\n    <template v-if=\"$slots.footer\" #footer>\n      <slot name=\"footer\" />\n    </template>\n  </VDialog>\n</template>\n"],"mappings":""}

package/dist/components/VDialog/VDialogAlert.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialogAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialogAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A dialog demanding an answer: confirming something irreversible, acknowledging a\n * failure. It looks exactly like VDialog and is nothing more than VDialog with its\n * options fixed, but those fixed options change what it is.\n *\n * It is announced to assistive technology as an alert rather than an ordinary dialog,\n * and every casual way out is closed off: there is no cross, a click outside does\n * nothing, and Escape does nothing either. The buttons in the footer are the only way\n * to dismiss it — which is why supplying them is not optional.\n */\n\nimport { computed, ref } from 'vue'\n\nimport VDialog from './VDialog.vue'\nimport type { DialogTriggerProps } from './VDialog.vue'\n\ninterface DialogAlertProps {\n  /**\n   * The question being asked, which also names the dialog for assistive technology.\n   * It is ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, spelling out the consequences of the answer. */\n  subtitle?: string\n  /**\n   * How wide the alert is: a number is read as pixels, a string as any CSS length. Left\n   * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is\n   * never allowed to exceed the width of the viewport.\n   */\n  width?: number | string\n}\n\nwithDefaults(defineProps<DialogAlertProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n})\n\n/** Whether the alert is showing. It starts closed, and closing writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** What the alert says. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /**\n   * Extra controls in the header, where a dialog puts them before its cross: a link to help,\n   * for instance. An alert has no cross, so they sit at the end of the header alone.\n   */\n  'header-actions'?(): unknown\n  /**\n   * The buttons that answer the alert. They are not optional: nothing else can close\n   * this dialog.\n   */\n  footer?(): unknown\n  /**\n   * The button that opens the alert. Bind the `triggerProps` it receives onto it.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\n/*\n * The same three members VDialog exposes, handed straight through. This component is\n * VDialog with its options fixed, so a ref on it has to answer the same way — without\n * this, the one dialog that CANNOT be dismissed by Escape or by a click outside would\n * also be the one a consumer could not close from code.\n */\nconst dialogRef = ref<InstanceType<typeof VDialog> | null>(null)\n\ndefineExpose({\n  /**\n   * Opens the alert, exactly as setting `open` does. The opening lands on the next tick:\n   * the promise returned settles once the alert is showing.\n   */\n  show: (): Promise<void> => dialogRef.value?.show() ?? Promise.resolve(),\n  /** Closes it. The footer's buttons are the reader's only way out; this is yours. */\n  close: () => dialogRef.value?.close(),\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: computed(() => dialogRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VDialog\n    ref=\"dialogRef\"\n    v-model:open=\"open\"\n    role=\"alertdialog\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    :width=\"width\"\n    hide-close\n    persistent-backdrop\n    persistent-escape\n  >\n    <template v-if=\"$slots.trigger\" #trigger=\"{ triggerProps }\">\n      <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    </template>\n    <template v-if=\"$slots.header\" #header>\n      <slot name=\"header\" />\n    </template>\n    <template v-if=\"$slots['header-actions']\" #header-actions>\n      <slot name=\"header-actions\" />\n    </template>\n    <slot />\n    <template v-if=\"$slots.footer\" #footer>\n      <slot name=\"footer\" />\n    </template>\n  </VDialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GA6BtD,IAAY,EAAyC,IAAI;SAE/D,EAAa;GAKX,YAA2B,EAAU,OAAO,KAAK,KAAK,QAAQ,QAAQ;GAEtE,aAAa,EAAU,OAAO,MAAM;GAEpC,IAAI,QAAe,EAAU,OAAO,MAAM,IAAI;EAChD,CAAC,mBAIC,EAwBU,GAAA;YAvBJ;GAAJ,KAAI;GACI,MAAM,EAAA;sCAAI,QAAA;GAClB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,OAAO,EAAA;GACR,cAAA;GACA,uBAAA;GACA,qBAAA;;oBAWQ,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;;;GATQA,EAAAA,OAAO,UAAA;UAAU;WACsB,EADX,sBAAY,CACtD,EAAqD,EAAA,QAAA,WAAA,EAAhB,gBAAY,CAAA,CAAA,CAAA;;;GAEnCA,EAAAA,OAAO,SAAA;UAAS;gBACR,CAAtB,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA;;;GAERA,EAAAA,OAAM,oBAAA;UAAqB;gBACX,CAA9B,EAA8B,EAAA,QAAA,gBAAA,CAAA,CAAA;;;GAGhBA,EAAAA,OAAO,SAAA;UAAS;gBACR,CAAtB,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA"}
+{"version":3,"file":"VDialogAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialogAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Fix VDialog to alertdialog semantics and require an explicit answer instead of light\n * dismissal.\n */\n\nimport { computed, ref } from 'vue'\n\nimport VDialog from './VDialog.vue'\nimport type { DialogTriggerProps } from './VDialog.vue'\n\ninterface DialogAlertProps {\n  /**\n   * The question being asked, which also names the dialog for assistive technology.\n   * It is ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, spelling out the consequences of the answer. */\n  subtitle?: string\n  /**\n   * How wide the alert is: a number is read as pixels, a string as any CSS length. Left out, it\n   * takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n}\n\nwithDefaults(defineProps<DialogAlertProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n})\n\n/** Whether the alert is showing. It starts closed, and closing writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** What the alert says. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /**\n   * Extra controls in the header, where a dialog puts them before its cross: a link to help,\n   * for instance. An alert has no cross, so they sit at the end of the header alone.\n   */\n  'header-actions'?(): unknown\n  /**\n   * The buttons that answer the alert. They are not optional: nothing else can close\n   * this dialog.\n   */\n  footer?(): unknown\n  /**\n   * The button that opens the alert. Bind the `triggerProps` it receives onto it.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\n/*\n * This component is VDialog with its options fixed, so a ref on it has to answer the same way;\n * without this, the one dialog that CANNOT be dismissed by Escape or by a click outside would\n * also be the one a consumer could not close from code.\n */\nconst dialogRef = ref<InstanceType<typeof VDialog> | null>(null)\n\ndefineExpose({\n  /**\n   * Opens the alert, exactly as setting `open` does. The opening lands on the next tick:\n   * the promise returned settles once the alert is showing.\n   */\n  show: (): Promise<void> => dialogRef.value?.show() ?? Promise.resolve(),\n  /** Closes it. The footer's buttons are the reader's only way out; this is yours. */\n  close: () => dialogRef.value?.close(),\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: computed(() => dialogRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VDialog\n    ref=\"dialogRef\"\n    v-model:open=\"open\"\n    role=\"alertdialog\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    :width=\"width\"\n    hide-close\n    persistent-backdrop\n    persistent-escape\n  >\n    <template v-if=\"$slots.trigger\" #trigger=\"{ triggerProps }\">\n      <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    </template>\n    <template v-if=\"$slots.header\" #header>\n      <slot name=\"header\" />\n    </template>\n    <template v-if=\"$slots['header-actions']\" #header-actions>\n      <slot name=\"header-actions\" />\n    </template>\n    <slot />\n    <template v-if=\"$slots.footer\" #footer>\n      <slot name=\"footer\" />\n    </template>\n  </VDialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GA4BtD,IAAY,EAAyC,IAAI;SAE/D,EAAa;GAKX,YAA2B,EAAU,OAAO,KAAK,KAAK,QAAQ,QAAQ;GAEtE,aAAa,EAAU,OAAO,MAAM;GAEpC,IAAI,QAAe,EAAU,OAAO,MAAM,IAAI;EAChD,CAAC,mBAIC,EAwBU,GAAA;YAvBJ;GAAJ,KAAI;GACI,MAAM,EAAA;sCAAI,QAAA;GAClB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,OAAO,EAAA;GACR,cAAA;GACA,uBAAA;GACA,qBAAA;;oBAWQ,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;;;GATQA,EAAAA,OAAO,UAAA;UAAU;WACsB,EADX,sBAAY,CACtD,EAAqD,EAAA,QAAA,WAAA,EAAhB,gBAAY,CAAA,CAAA,CAAA;;;GAEnCA,EAAAA,OAAO,SAAA;UAAS;gBACR,CAAtB,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA;;;GAERA,EAAAA,OAAM,oBAAA;UAAqB;gBACX,CAA9B,EAA8B,EAAA,QAAA,gBAAA,CAAA,CAAA;;;GAGhBA,EAAAA,OAAO,SAAA;UAAS;gBACR,CAAtB,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/VFileInput/VFileInput.d.ts

@@ -32,13 +32,7 @@ export type FileInputSize = 'sm' | 'md' | 'lg';
 interface FileInputProps {
     /** Allows several files to be chosen. With one only, every extra file is turned away. */
     multiple?: boolean;
-    /**
-     * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).
-     *
-     * It is applied TWICE, and it has to be: as an attribute, which is what filters the
-     * system's file dialog, and again in code, which is the only thing that can filter a
-     * file DROPPED on the component, the attribute having no say over a drop.
-     */
+    /** Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`). */
     accept?: string;
     /**
      * How the chosen files are shown: their names joined by commas, or one dismissible
@@ -86,10 +80,9 @@ interface FileInputProps {
      */
     placeholder?: string;
     /**
-     * An icon inside the field, at the start. It is rendered before the chips rather than
-     * in their place, so it survives a chip display. Decorative by default, it becomes a
-     * real button as soon as a `@click:icon-start` listener is attached, in which case it
-     * needs `iconStartLabel`.
+     * An icon inside the field, at the start. Decorative by default, it becomes a real button as
+     * soon as a `@click:icon-start` listener is attached, in which case it needs
+     * `iconStartLabel`.
      */
     iconStart?: IconSource;
     /** What the start icon does, in words, once it is clickable. */
@@ -100,9 +93,8 @@ interface FileInputProps {
      */
     pickerIconLabel?: string;
     /**
-     * Shows a spinner at the end of the field, in place of the attach icon, while an
-     * upload is under way, typically. It says that something is happening and changes
-     * nothing else: files can still be dropped and the dialog still opens.
+     * Shows a spinner at the end of the field, in place of the attach icon, while an upload is
+     * under way, typically.
      */
     loading?: boolean;
     /**
@@ -110,11 +102,7 @@ interface FileInputProps {
      * system dictionary.
      */
     loadingText?: string;
-    /**
-     * Offers a cross that empties the selection. Worth turning on here more than on an
-     * ordinary field: what a picker holds cannot be erased by typing, so the cross is the
-     * only way back out of a wrong choice.
-     */
+    /** Offers a cross that empties the selection. */
     clearable?: boolean;
     /** What that cross does, in words. It falls back to the design system dictionary. */
     clearLabel?: string;
@@ -127,20 +115,11 @@ type __VLS_Slots = {
      */
     start?(): unknown;
     /**
-     * Controls of your own inside the field, placed before the ones the field owns: the
-     * clear cross and the icon that opens the file dialog. Those two are this component's
-     * own affordance, which is why there is no `#end` here: it would replace them.
+     * Controls of your own inside the field, placed before the ones the field owns: the clear
+     * cross and the icon that opens the file dialog.
      */
     'value-end'?(): unknown;
-    /**
-     * Replaces the chip standing for one file.
-     *
-     * Three of the values it receives are what make it usable without regressions:
-     * `label` is the name already shortened in the MIDDLE so that its extension survives,
-     * `remove` is what takes the file out (without it the file could no longer be removed
-     * at all), and the size and density are the ones worked out to sit inside the field,
-     * which cannot be guessed from outside.
-     */
+    /** Replaces the chip standing for one file. */
     chip?(props: FileInputChipSlotProps): unknown;
     /**
      * Replaces the counter under the field. `text` is the sentence already built and
@@ -149,12 +128,7 @@ type __VLS_Slots = {
     counter?(props: FileInputCounterSlotProps): unknown;
 };
 type __VLS_ModelProps = {
-    /**
-     * Always a LIST of files, whether or not several are allowed, and never a file on its own.
-     * The shape of the value does not depend on a prop, so a consumer never has to narrow a
-     * union TypeScript has no way of discriminating. With a single file it is simply a list
-     * of at most one.
-     */
+    /** Always a LIST of files, whether or not several are allowed, and never a file on its own. */
     modelValue?: File[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/VFileInput/VFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFileInput.js","names":[],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * File selection presented as an ordinary form field: a read-only VInput showing what was\n * picked, with the real file input hidden behind it — VDateInput's `readonly` shape, minus\n * the panel. The v-model is always a `File[]`, `multiple` or not, so a consumer never has to\n * narrow a union TypeScript cannot discriminate.\n *\n * The JS is imposed by the platform, not chosen. A dialog opens ONLY from a real click on a\n * file input, and a `FileList` cannot be written from a template — so the visible field can\n * never BE the native control, and that control is only ever a SOURCE of files.\n *\n * The rest follows: the relayed click, the reset after every change (without which the same\n * file cannot be picked twice running), and screening in code, `accept` having no say over\n * a drop.\n */\nimport { computed, inject, ref, useId } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipSize } from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { joinIds } from '../../utils/ids'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'chip' | 'text'\n\n/** What the `#chip` slot receives. */\nexport interface FileInputChipSlotProps {\n  /** The file the chip stands for. */\n  file: File\n  /** Its position in the selection. */\n  index: number\n  /** Its name, already shortened in the middle so the extension survives. */\n  label: string\n  /** Takes the file out of the selection, the only way to. */\n  remove: () => void\n  /** The chip size worked out to sit inside the field, one step below it. */\n  size: ChipSize\n  /** Whether the chip takes its compact height, to catch up below the smallest step. */\n  compact: boolean\n}\n\n/** What the `#counter` slot receives. */\nexport interface FileInputCounterSlotProps {\n  /** How many files are selected. */\n  count: number\n  /** Their total size, in bytes. */\n  bytes: number\n  /** The sentence the counter shows by default, already translated. */\n  text: string\n}\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type FileInputSize = 'sm' | 'md' | 'lg'\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. With one only, every extra file is turned away. */\n  multiple?: boolean\n  /**\n   * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).\n   *\n   * It is applied TWICE, and it has to be: as an attribute, which is what filters the\n   * system's file dialog, and again in code, which is the only thing that can filter a\n   * file DROPPED on the component, the attribute having no say over a drop.\n   */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\n  /** The largest ONE file may be, in bytes. */\n  maxSize?: number\n  /** The largest the whole selection may be, in bytes. */\n  maxTotalSize?: number\n  /** How many files may be chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  pickerIcon?: IconSource\n  /** Refuses files dropped onto the component: only the dialog then adds any. */\n  noDrop?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: FileInputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid, for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /**\n   * An icon inside the field, at the start. It is rendered before the chips rather than\n   * in their place, so it survives a chip display. Decorative by default, it becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the button at the end of the field does, in words. It names the button\n   * `pickerIcon` renders, and falls back to the design system dictionary.\n   */\n  pickerIconLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the attach icon, while an\n   * upload is under way, typically. It says that something is happening and changes\n   * nothing else: files can still be dropped and the dialog still opens.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /**\n   * Offers a cross that empties the selection. Worth turning on here more than on an\n   * ordinary field: what a picker holds cannot be erased by typing, so the cross is the\n   * only way back out of a wrong choice.\n   */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  pickerIcon: () => attachFileIcon,\n  noDrop: false,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerIconLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection: added something, removed something, cleared it. */\n  change: [files: File[]]\n  /**\n   * A file was turned away and never joined the selection. It is emitted once PER file,\n   * so a batch drop can be reported precisely.\n   */\n  reject: [rejection: FileRejection]\n  /**\n   * ONE file was taken out through its chip, with the file and the position it held.\n   * `change` follows it with the whole list, as it does after every other change.\n   */\n  remove: [file: File, index: number]\n  /** The clear cross emptied the selection. */\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   * files 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\n   * clear cross and the icon that opens the file dialog. Those two are this component's\n   * own affordance, which is why there is no `#end` here: it would replace them.\n   */\n  'value-end'?(): unknown\n  /**\n   * Replaces the chip standing for one file.\n   *\n   * Three of the values it receives are what make it usable without regressions:\n   * `label` is the name already shortened in the MIDDLE so that its extension survives,\n   * `remove` is what takes the file out (without it the file could no longer be removed\n   * at all), and the size and density are the ones worked out to sit inside the field,\n   * which cannot be guessed from outside.\n   */\n  chip?(props: FileInputChipSlotProps): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size in `bytes` are there for a wording of your own.\n   */\n  counter?(props: FileInputCounterSlotProps): unknown\n}>()\n\n// `get` reads an explicit `null` as the empty list: the default applies only to a model\n// that was never given, and `files = ref(null)` is a common start in untyped code.\n/**\n * Always a LIST of files, whether or not several are allowed, and never a file on its own.\n * The shape of the value does not depend on a prop, so a consumer never has to narrow a\n * union TypeScript has no way of discriminating. With a single file it is simply a list\n * of at most one.\n */\nconst model = defineModel<File[]>({ default: () => [], get: (files) => files ?? [] })\n\nconst { attrs, 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\nconst m = useMessages()\nconst locale = useLocale()\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). The chips read the resolved pair\n// too, or they would come out one step off the field they sit in.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n/*\n * The hidden input, the sorting of the consumer's attributes, the single entry point into\n * the value, the removal of a file and the emptying of all of them live in `useFileField`,\n * shared with VFilePicker.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible\n * field: that is what they see, focus and click, so a consumer's own `<label for>` has\n * to point at it. The description attribute is pulled out of that bucket, because this\n * component re-assembles it further down.\n */\nconst {\n  fileEl,\n  enabled,\n  nativeInputAttrs,\n  controlAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt,\n  clear,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  disabled: resolvedDisabled,\n  excludeFromControl: ['aria-describedby'],\n  onClear: () => emit('clear'),\n  // Behind `isDev`, which a production build folds to false, so the message is dropped.\n  warnings: isDev\n    ? () => [\n        props.display === 'chip' &&\n          !props.multiple &&\n          'display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      ]\n    : undefined,\n})\n\n/** What reaches the visible field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...controlAttrs.value, ...iconStartClick }))\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Chips only mean something for a list: a single file always shows as plain text.\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * Whether the clear cross is shown has to be answered EXPLICITLY here. The visible field\n * is read-only, and a read-only field hides its cross by default — rightly so, since its\n * text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst clearVisible = computed(() => canClear(props, resolvedDisabled.value, model.value.length > 0))\n\n// @a11y @devwarn\n/*\n * The icon disappears along with what it offers: a read-only field opens no dialog, so\n * an icon inviting one would be a lie — the same rule VDateInput follows for its\n * calendar.\n *\n * TRAP — its LABEL stays defined at all times, even when no icon is rendered. The helper\n * that detects a click handler on an icon warns AT SETUP if one is attached without a\n * label, and it has no way of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.pickerIcon,\n)\nconst endIconLabel = computed(() => props.pickerIconLabel ?? m.value.fileInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.fileInput.clear)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since\n * it is language; the SIZE is formatted by the platform, which knows the local\n * conventions; and the parentheses come from neither, being punctuation every language\n * shares — the same boundary VBadge's \"99+\" falls on.\n *\n * With nothing chosen it states the count alone: \"0 files ()\" would be noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here\n * rather than by VInput: the hint belongs to OUR row under the field, VInput having no\n * such row — its own counter sits inside the field.\n *\n * The counter is deliberately part of that list, unlike in VTextarea. When the files are\n * shown as chips the field's own text is EMPTY, and the counter is then the only spoken\n * summary of what has been chosen.\n */\nconst describedBy = computed(() =>\n  joinIds(\n    attrs['aria-describedby'] as string | undefined,\n    !!props.hint && hintId,\n    props.counter && counterId,\n  ),\n)\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 VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/**\n * What each chip shows for its file, worked out once per change of the selection rather\n * than on every render, which reads it three times per chip. The name is shortened in the\n * MIDDLE rather than cut off at the end, for two reasons.\n *\n * The chips WRAP, so there is no line for a long name to overflow: left whole it would\n * simply push the field onto two or three rows. And cutting the middle preserves the\n * extension, which is what tells the reader what kind of file it is — an ellipsis at the\n * end drops it first.\n *\n * The full name is never lost: the removal button is named with it, and the chip carries\n * it as a tooltip whenever the label was actually shortened.\n */\n// Computed lazily, so a text display, which never reads it, never pays for it.\nconst chipLabels = computed(() => model.value.map((file) => truncateMiddle(file.name)))\n\nfunction onControlClick(event: MouseEvent) {\n  // The field's own buttons already handle their clicks, and the click also reaches the\n  // field itself. Without this guard the attach icon would open the dialog TWICE, and\n  // the clear cross would reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeFile(index: number) {\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  if (removeAt(index)) inputRef.value?.focus()\n}\n\n/* Files may be dropped on the component itself; there is no separate drop area here —\n   that is what VFilePicker is for. */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => !props.noDrop && enabled.value,\n  acceptFiles,\n)\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did (a\n   * click, a key press): browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n  /**\n   * The component's own box, for what neither of the two above covers. It is the wrapper\n   * and not the hidden file input: that one is the FORM's element, this is the reader's.\n   */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-file-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    @dragenter=\"onDragEnter\"\n    @dragover=\"onDragOver\"\n    @dragleave=\"onDragLeave\"\n    @drop=\"onDrop\"\n  >\n    <input v-bind=\"nativeInputAttrs\" ref=\"fileEl\" class=\"v-file-input-native v-hidden-input\" />\n\n    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <!-- Shown as chips, the field takes VInput's two arrangements for chips: its end\n           controls lifted out of the flow, and the chips wrapping onto several rows. -->\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :class=\"{ 'v-input-end-pinned v-input-chips': resolvedDisplay === 'chip' }\"\n        :model-value=\"displayText\"\n        no-typing\n        :readonly=\"readonly\"\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clear\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip' || $slots.start\" #start>\n          <template\n            v-for=\"(file, index) in resolvedDisplay === 'chip' ? model : []\"\n            :key=\"fileKey(file)\"\n          >\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabels[index]!\"\n              :remove=\"() => removeFile(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"enabled\"\n                :dismiss-label=\"m.common.remove(file.name)\"\n                :disabled=\"resolvedDisabled\"\n                :title=\"chipLabels[index] === file.name ? undefined : file.name\"\n                @dismiss=\"removeFile(index)\"\n                >{{ chipLabels[index] }}</VChip\n              >\n            </slot>\n          </template>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta v-field-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter v-field-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :bytes=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Positioned so the hidden file input, which has no size at all, has something to be\n     placed against. */\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The real file input is a SOURCE of files and not a control anyone deals with: it\n     wears `.v-hidden-input`, and taking it out of the tab order and hiding it from screen\n     readers, in `useFileField`, is what leaves the visible field as the single stop and the\n     single announcement. */\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /* While a file is being dragged over it, the field is highlighted by redefining the\n     very variable VInput uses for its own border colour — so the two can never disagree.\n\n     TRAP — the selector weighs (0,4,0), one step above VInput's states, and it has to. The\n     field inside is ALWAYS read-only, and VInput's read-only background weighs (0,3,0): at\n     that weight the winner would be whichever of the two sheets a bundler put last. */\n  .v-file-input[data-dragging] .v-input .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VFileInput.js","names":[],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Compose a read-only VInput with a native file input. useFileField bridges File[] selection to\n * the browser dialog and form submission.\n */\nimport { computed, inject, ref, useId } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipSize } from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { joinIds } from '../../utils/ids'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'chip' | 'text'\n\n/** What the `#chip` slot receives. */\nexport interface FileInputChipSlotProps {\n  /** The file the chip stands for. */\n  file: File\n  /** Its position in the selection. */\n  index: number\n  /** Its name, already shortened in the middle so the extension survives. */\n  label: string\n  /** Takes the file out of the selection, the only way to. */\n  remove: () => void\n  /** The chip size worked out to sit inside the field, one step below it. */\n  size: ChipSize\n  /** Whether the chip takes its compact height, to catch up below the smallest step. */\n  compact: boolean\n}\n\n/** What the `#counter` slot receives. */\nexport interface FileInputCounterSlotProps {\n  /** How many files are selected. */\n  count: number\n  /** Their total size, in bytes. */\n  bytes: number\n  /** The sentence the counter shows by default, already translated. */\n  text: string\n}\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type FileInputSize = 'sm' | 'md' | 'lg'\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. With one only, every extra file is turned away. */\n  multiple?: boolean\n  /** Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`). */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\n  /** The largest ONE file may be, in bytes. */\n  maxSize?: number\n  /** The largest the whole selection may be, in bytes. */\n  maxTotalSize?: number\n  /** How many files may be chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  pickerIcon?: IconSource\n  /** Refuses files dropped onto the component: only the dialog then adds any. */\n  noDrop?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: FileInputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid, for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /**\n   * An icon inside the field, at the start. Decorative by default, it becomes a real button as\n   * soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the button at the end of the field does, in words. It names the button\n   * `pickerIcon` renders, and falls back to the design system dictionary.\n   */\n  pickerIconLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the attach icon, while an upload is\n   * under way, typically.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  pickerIcon: () => attachFileIcon,\n  noDrop: false,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerIconLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection: added something, removed something, cleared it. */\n  change: [files: File[]]\n  /**\n   * A file was turned away and never joined the selection. It is emitted once PER file,\n   * so a batch drop can be reported precisely.\n   */\n  reject: [rejection: FileRejection]\n  /**\n   * ONE file was taken out through its chip, with the file and the position it held.\n   * `change` follows it with the whole list, as it does after every other change.\n   */\n  remove: [file: File, index: number]\n  /** The clear cross emptied the selection. */\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   * files 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 icon that opens the file dialog.\n   */\n  'value-end'?(): unknown\n  /** Replaces the chip standing for one file. */\n  chip?(props: FileInputChipSlotProps): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size in `bytes` are there for a wording of your own.\n   */\n  counter?(props: FileInputCounterSlotProps): unknown\n}>()\n\n// `get` reads an explicit `null` as the empty list: the default applies only to a model\n// that was never given, and `files = ref(null)` is a common start in untyped code.\n/** Always a LIST of files, whether or not several are allowed, and never a file on its own. */\nconst model = defineModel<File[]>({ default: () => [], get: (files) => files ?? [] })\n\nconst { attrs, 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\nconst m = useMessages()\nconst locale = useLocale()\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). The chips read the resolved pair\n// too, or they would come out one step off the field they sit in.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n/*\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible field: that\n * is what they see, focus and click, so a consumer's own `<label for>` has to point at it. The\n * description attribute is pulled out of that bucket, because this component re-assembles it\n * further down.\n */\nconst {\n  fileEl,\n  enabled,\n  nativeInputAttrs,\n  controlAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt,\n  clear,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  disabled: resolvedDisabled,\n  excludeFromControl: ['aria-describedby'],\n  onClear: () => emit('clear'),\n  warnings: isDev\n    ? () => [\n        props.display === 'chip' &&\n          !props.multiple &&\n          'display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      ]\n    : undefined,\n})\n\n/** What reaches the visible field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...controlAttrs.value, ...iconStartClick }))\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * The visible field is read-only, and a read-only field hides its cross by default; rightly so,\n * since its text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst clearVisible = computed(() => canClear(props, resolvedDisabled.value, model.value.length > 0))\n\n// @a11y @devwarn\n/*\n * Its label stays defined always, even when no icon is rendered. The helper that detects a\n * click handler on an icon warns AT setup if one is attached without a label, and it has no way\n * of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.pickerIcon,\n)\nconst endIconLabel = computed(() => props.pickerIconLabel ?? m.value.fileInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.fileInput.clear)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since it is\n * language; the SIZE is formatted by the platform, which knows the local conventions; and the\n * parentheses come from neither, being punctuation every language shares; the same boundary\n * VBadge's \"99+\" falls on. With nothing chosen it states the count alone: \"0 files ()\" would be\n * noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here rather\n * than by VInput: the hint belongs to OUR row under the field, VInput having no such row; its\n * own counter sits inside the field. The counter is deliberately part of that list, unlike in\n * VTextarea.\n */\nconst describedBy = computed(() =>\n  joinIds(\n    attrs['aria-describedby'] as string | undefined,\n    !!props.hint && hintId,\n    props.counter && counterId,\n  ),\n)\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 VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/**\n * What each chip shows for its file, worked out once per change of the selection rather than on\n * every render, which reads it three times per chip.\n */\n// Computed lazily, so a text display, which never reads it, never pays for it.\nconst chipLabels = computed(() => model.value.map((file) => truncateMiddle(file.name)))\n\nfunction onControlClick(event: MouseEvent) {\n  // Without this guard the attach icon would open the dialog TWICE, and the clear cross would\n  // reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeFile(index: number) {\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  if (removeAt(index)) inputRef.value?.focus()\n}\n\n/*\n * Files may be dropped on the component itself; there is no separate drop area here; that is\n * what VFilePicker is for.\n */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => !props.noDrop && enabled.value,\n  acceptFiles,\n)\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did (a\n   * click, a key press): browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n  /**\n   * The component's own box, for what neither of the two above covers. It is the wrapper\n   * and not the hidden file input: that one is the FORM's element, this is the reader's.\n   */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-file-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    @dragenter=\"onDragEnter\"\n    @dragover=\"onDragOver\"\n    @dragleave=\"onDragLeave\"\n    @drop=\"onDrop\"\n  >\n    <input v-bind=\"nativeInputAttrs\" ref=\"fileEl\" class=\"v-file-input-native v-hidden-input\" />\n\n    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <!-- Shown as chips, the field takes VInput's two arrangements for chips: its end\n           controls lifted out of the flow, and the chips wrapping onto several rows. -->\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :class=\"{ 'v-input-end-pinned v-input-chips': resolvedDisplay === 'chip' }\"\n        :model-value=\"displayText\"\n        no-typing\n        :readonly=\"readonly\"\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clear\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip' || $slots.start\" #start>\n          <template\n            v-for=\"(file, index) in resolvedDisplay === 'chip' ? model : []\"\n            :key=\"fileKey(file)\"\n          >\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabels[index]!\"\n              :remove=\"() => removeFile(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"enabled\"\n                :dismiss-label=\"m.common.remove(file.name)\"\n                :disabled=\"resolvedDisabled\"\n                :title=\"chipLabels[index] === file.name ? undefined : file.name\"\n                @dismiss=\"removeFile(index)\"\n                >{{ chipLabels[index] }}</VChip\n              >\n            </slot>\n          </template>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta v-field-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter v-field-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :bytes=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The real file input is a source of files and not a control anyone deals with: it wears\n   * `.v-hidden-input`, and taking it out of the tab order and hiding it from screen readers, in\n   * `useFileField`, is what leaves the visible field as the single stop and the single\n   * announcement.\n   */\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /*\n   * The selector weighs (0,4,0), one step above VInput's states, and it has to. The field\n   * inside is always read-only, and VInput's read-only background weighs (0,3,0): at that\n   * weight the winner would be whichever of the two sheets a bundler put last.\n   */\n  .v-file-input[data-dragging] .v-input .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VFileInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * File selection presented as an ordinary form field: a read-only VInput showing what was\n * picked, with the real file input hidden behind it — VDateInput's `readonly` shape, minus\n * the panel. The v-model is always a `File[]`, `multiple` or not, so a consumer never has to\n * narrow a union TypeScript cannot discriminate.\n *\n * The JS is imposed by the platform, not chosen. A dialog opens ONLY from a real click on a\n * file input, and a `FileList` cannot be written from a template — so the visible field can\n * never BE the native control, and that control is only ever a SOURCE of files.\n *\n * The rest follows: the relayed click, the reset after every change (without which the same\n * file cannot be picked twice running), and screening in code, `accept` having no say over\n * a drop.\n */\nimport { computed, inject, ref, useId } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipSize } from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { joinIds } from '../../utils/ids'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'chip' | 'text'\n\n/** What the `#chip` slot receives. */\nexport interface FileInputChipSlotProps {\n  /** The file the chip stands for. */\n  file: File\n  /** Its position in the selection. */\n  index: number\n  /** Its name, already shortened in the middle so the extension survives. */\n  label: string\n  /** Takes the file out of the selection, the only way to. */\n  remove: () => void\n  /** The chip size worked out to sit inside the field, one step below it. */\n  size: ChipSize\n  /** Whether the chip takes its compact height, to catch up below the smallest step. */\n  compact: boolean\n}\n\n/** What the `#counter` slot receives. */\nexport interface FileInputCounterSlotProps {\n  /** How many files are selected. */\n  count: number\n  /** Their total size, in bytes. */\n  bytes: number\n  /** The sentence the counter shows by default, already translated. */\n  text: string\n}\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type FileInputSize = 'sm' | 'md' | 'lg'\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. With one only, every extra file is turned away. */\n  multiple?: boolean\n  /**\n   * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).\n   *\n   * It is applied TWICE, and it has to be: as an attribute, which is what filters the\n   * system's file dialog, and again in code, which is the only thing that can filter a\n   * file DROPPED on the component, the attribute having no say over a drop.\n   */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\n  /** The largest ONE file may be, in bytes. */\n  maxSize?: number\n  /** The largest the whole selection may be, in bytes. */\n  maxTotalSize?: number\n  /** How many files may be chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  pickerIcon?: IconSource\n  /** Refuses files dropped onto the component: only the dialog then adds any. */\n  noDrop?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: FileInputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid, for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /**\n   * An icon inside the field, at the start. It is rendered before the chips rather than\n   * in their place, so it survives a chip display. Decorative by default, it becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the button at the end of the field does, in words. It names the button\n   * `pickerIcon` renders, and falls back to the design system dictionary.\n   */\n  pickerIconLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the attach icon, while an\n   * upload is under way, typically. It says that something is happening and changes\n   * nothing else: files can still be dropped and the dialog still opens.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /**\n   * Offers a cross that empties the selection. Worth turning on here more than on an\n   * ordinary field: what a picker holds cannot be erased by typing, so the cross is the\n   * only way back out of a wrong choice.\n   */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  pickerIcon: () => attachFileIcon,\n  noDrop: false,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerIconLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection: added something, removed something, cleared it. */\n  change: [files: File[]]\n  /**\n   * A file was turned away and never joined the selection. It is emitted once PER file,\n   * so a batch drop can be reported precisely.\n   */\n  reject: [rejection: FileRejection]\n  /**\n   * ONE file was taken out through its chip, with the file and the position it held.\n   * `change` follows it with the whole list, as it does after every other change.\n   */\n  remove: [file: File, index: number]\n  /** The clear cross emptied the selection. */\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   * files 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\n   * clear cross and the icon that opens the file dialog. Those two are this component's\n   * own affordance, which is why there is no `#end` here: it would replace them.\n   */\n  'value-end'?(): unknown\n  /**\n   * Replaces the chip standing for one file.\n   *\n   * Three of the values it receives are what make it usable without regressions:\n   * `label` is the name already shortened in the MIDDLE so that its extension survives,\n   * `remove` is what takes the file out (without it the file could no longer be removed\n   * at all), and the size and density are the ones worked out to sit inside the field,\n   * which cannot be guessed from outside.\n   */\n  chip?(props: FileInputChipSlotProps): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size in `bytes` are there for a wording of your own.\n   */\n  counter?(props: FileInputCounterSlotProps): unknown\n}>()\n\n// `get` reads an explicit `null` as the empty list: the default applies only to a model\n// that was never given, and `files = ref(null)` is a common start in untyped code.\n/**\n * Always a LIST of files, whether or not several are allowed, and never a file on its own.\n * The shape of the value does not depend on a prop, so a consumer never has to narrow a\n * union TypeScript has no way of discriminating. With a single file it is simply a list\n * of at most one.\n */\nconst model = defineModel<File[]>({ default: () => [], get: (files) => files ?? [] })\n\nconst { attrs, 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\nconst m = useMessages()\nconst locale = useLocale()\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). The chips read the resolved pair\n// too, or they would come out one step off the field they sit in.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n/*\n * The hidden input, the sorting of the consumer's attributes, the single entry point into\n * the value, the removal of a file and the emptying of all of them live in `useFileField`,\n * shared with VFilePicker.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible\n * field: that is what they see, focus and click, so a consumer's own `<label for>` has\n * to point at it. The description attribute is pulled out of that bucket, because this\n * component re-assembles it further down.\n */\nconst {\n  fileEl,\n  enabled,\n  nativeInputAttrs,\n  controlAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt,\n  clear,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  disabled: resolvedDisabled,\n  excludeFromControl: ['aria-describedby'],\n  onClear: () => emit('clear'),\n  // Behind `isDev`, which a production build folds to false, so the message is dropped.\n  warnings: isDev\n    ? () => [\n        props.display === 'chip' &&\n          !props.multiple &&\n          'display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      ]\n    : undefined,\n})\n\n/** What reaches the visible field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...controlAttrs.value, ...iconStartClick }))\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Chips only mean something for a list: a single file always shows as plain text.\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * Whether the clear cross is shown has to be answered EXPLICITLY here. The visible field\n * is read-only, and a read-only field hides its cross by default — rightly so, since its\n * text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst clearVisible = computed(() => canClear(props, resolvedDisabled.value, model.value.length > 0))\n\n// @a11y @devwarn\n/*\n * The icon disappears along with what it offers: a read-only field opens no dialog, so\n * an icon inviting one would be a lie — the same rule VDateInput follows for its\n * calendar.\n *\n * TRAP — its LABEL stays defined at all times, even when no icon is rendered. The helper\n * that detects a click handler on an icon warns AT SETUP if one is attached without a\n * label, and it has no way of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.pickerIcon,\n)\nconst endIconLabel = computed(() => props.pickerIconLabel ?? m.value.fileInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.fileInput.clear)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since\n * it is language; the SIZE is formatted by the platform, which knows the local\n * conventions; and the parentheses come from neither, being punctuation every language\n * shares — the same boundary VBadge's \"99+\" falls on.\n *\n * With nothing chosen it states the count alone: \"0 files ()\" would be noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here\n * rather than by VInput: the hint belongs to OUR row under the field, VInput having no\n * such row — its own counter sits inside the field.\n *\n * The counter is deliberately part of that list, unlike in VTextarea. When the files are\n * shown as chips the field's own text is EMPTY, and the counter is then the only spoken\n * summary of what has been chosen.\n */\nconst describedBy = computed(() =>\n  joinIds(\n    attrs['aria-describedby'] as string | undefined,\n    !!props.hint && hintId,\n    props.counter && counterId,\n  ),\n)\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 VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/**\n * What each chip shows for its file, worked out once per change of the selection rather\n * than on every render, which reads it three times per chip. The name is shortened in the\n * MIDDLE rather than cut off at the end, for two reasons.\n *\n * The chips WRAP, so there is no line for a long name to overflow: left whole it would\n * simply push the field onto two or three rows. And cutting the middle preserves the\n * extension, which is what tells the reader what kind of file it is — an ellipsis at the\n * end drops it first.\n *\n * The full name is never lost: the removal button is named with it, and the chip carries\n * it as a tooltip whenever the label was actually shortened.\n */\n// Computed lazily, so a text display, which never reads it, never pays for it.\nconst chipLabels = computed(() => model.value.map((file) => truncateMiddle(file.name)))\n\nfunction onControlClick(event: MouseEvent) {\n  // The field's own buttons already handle their clicks, and the click also reaches the\n  // field itself. Without this guard the attach icon would open the dialog TWICE, and\n  // the clear cross would reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeFile(index: number) {\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  if (removeAt(index)) inputRef.value?.focus()\n}\n\n/* Files may be dropped on the component itself; there is no separate drop area here —\n   that is what VFilePicker is for. */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => !props.noDrop && enabled.value,\n  acceptFiles,\n)\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did (a\n   * click, a key press): browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n  /**\n   * The component's own box, for what neither of the two above covers. It is the wrapper\n   * and not the hidden file input: that one is the FORM's element, this is the reader's.\n   */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-file-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    @dragenter=\"onDragEnter\"\n    @dragover=\"onDragOver\"\n    @dragleave=\"onDragLeave\"\n    @drop=\"onDrop\"\n  >\n    <input v-bind=\"nativeInputAttrs\" ref=\"fileEl\" class=\"v-file-input-native v-hidden-input\" />\n\n    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <!-- Shown as chips, the field takes VInput's two arrangements for chips: its end\n           controls lifted out of the flow, and the chips wrapping onto several rows. -->\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :class=\"{ 'v-input-end-pinned v-input-chips': resolvedDisplay === 'chip' }\"\n        :model-value=\"displayText\"\n        no-typing\n        :readonly=\"readonly\"\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clear\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip' || $slots.start\" #start>\n          <template\n            v-for=\"(file, index) in resolvedDisplay === 'chip' ? model : []\"\n            :key=\"fileKey(file)\"\n          >\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabels[index]!\"\n              :remove=\"() => removeFile(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"enabled\"\n                :dismiss-label=\"m.common.remove(file.name)\"\n                :disabled=\"resolvedDisabled\"\n                :title=\"chipLabels[index] === file.name ? undefined : file.name\"\n                @dismiss=\"removeFile(index)\"\n                >{{ chipLabels[index] }}</VChip\n              >\n            </slot>\n          </template>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta v-field-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter v-field-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :bytes=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Positioned so the hidden file input, which has no size at all, has something to be\n     placed against. */\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The real file input is a SOURCE of files and not a control anyone deals with: it\n     wears `.v-hidden-input`, and taking it out of the tab order and hiding it from screen\n     readers, in `useFileField`, is what leaves the visible field as the single stop and the\n     single announcement. */\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /* While a file is being dragged over it, the field is highlighted by redefining the\n     very variable VInput uses for its own border colour — so the two can never disagree.\n\n     TRAP — the selector weighs (0,4,0), one step above VInput's states, and it has to. The\n     field inside is ALWAYS read-only, and VInput's read-only background weighs (0,3,0): at\n     that weight the winner would be whichever of the two sheets a bundler put last. */\n  .v-file-input[data-dragging] .v-input .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VFileInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Compose a read-only VInput with a native file input. useFileField bridges File[] selection to\n * the browser dialog and form submission.\n */\nimport { computed, inject, ref, useId } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipSize } from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { joinIds } from '../../utils/ids'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'chip' | 'text'\n\n/** What the `#chip` slot receives. */\nexport interface FileInputChipSlotProps {\n  /** The file the chip stands for. */\n  file: File\n  /** Its position in the selection. */\n  index: number\n  /** Its name, already shortened in the middle so the extension survives. */\n  label: string\n  /** Takes the file out of the selection, the only way to. */\n  remove: () => void\n  /** The chip size worked out to sit inside the field, one step below it. */\n  size: ChipSize\n  /** Whether the chip takes its compact height, to catch up below the smallest step. */\n  compact: boolean\n}\n\n/** What the `#counter` slot receives. */\nexport interface FileInputCounterSlotProps {\n  /** How many files are selected. */\n  count: number\n  /** Their total size, in bytes. */\n  bytes: number\n  /** The sentence the counter shows by default, already translated. */\n  text: string\n}\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type FileInputSize = 'sm' | 'md' | 'lg'\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. With one only, every extra file is turned away. */\n  multiple?: boolean\n  /** Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`). */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\n  /** The largest ONE file may be, in bytes. */\n  maxSize?: number\n  /** The largest the whole selection may be, in bytes. */\n  maxTotalSize?: number\n  /** How many files may be chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  pickerIcon?: IconSource\n  /** Refuses files dropped onto the component: only the dialog then adds any. */\n  noDrop?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: FileInputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid, for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /**\n   * An icon inside the field, at the start. Decorative by default, it becomes a real button as\n   * soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the button at the end of the field does, in words. It names the button\n   * `pickerIcon` renders, and falls back to the design system dictionary.\n   */\n  pickerIconLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the attach icon, while an upload is\n   * under way, typically.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  pickerIcon: () => attachFileIcon,\n  noDrop: false,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerIconLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection: added something, removed something, cleared it. */\n  change: [files: File[]]\n  /**\n   * A file was turned away and never joined the selection. It is emitted once PER file,\n   * so a batch drop can be reported precisely.\n   */\n  reject: [rejection: FileRejection]\n  /**\n   * ONE file was taken out through its chip, with the file and the position it held.\n   * `change` follows it with the whole list, as it does after every other change.\n   */\n  remove: [file: File, index: number]\n  /** The clear cross emptied the selection. */\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   * files 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 icon that opens the file dialog.\n   */\n  'value-end'?(): unknown\n  /** Replaces the chip standing for one file. */\n  chip?(props: FileInputChipSlotProps): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size in `bytes` are there for a wording of your own.\n   */\n  counter?(props: FileInputCounterSlotProps): unknown\n}>()\n\n// `get` reads an explicit `null` as the empty list: the default applies only to a model\n// that was never given, and `files = ref(null)` is a common start in untyped code.\n/** Always a LIST of files, whether or not several are allowed, and never a file on its own. */\nconst model = defineModel<File[]>({ default: () => [], get: (files) => files ?? [] })\n\nconst { attrs, 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\nconst m = useMessages()\nconst locale = useLocale()\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). The chips read the resolved pair\n// too, or they would come out one step off the field they sit in.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n/*\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible field: that\n * is what they see, focus and click, so a consumer's own `<label for>` has to point at it. The\n * description attribute is pulled out of that bucket, because this component re-assembles it\n * further down.\n */\nconst {\n  fileEl,\n  enabled,\n  nativeInputAttrs,\n  controlAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt,\n  clear,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  disabled: resolvedDisabled,\n  excludeFromControl: ['aria-describedby'],\n  onClear: () => emit('clear'),\n  warnings: isDev\n    ? () => [\n        props.display === 'chip' &&\n          !props.multiple &&\n          'display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      ]\n    : undefined,\n})\n\n/** What reaches the visible field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...controlAttrs.value, ...iconStartClick }))\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * The visible field is read-only, and a read-only field hides its cross by default; rightly so,\n * since its text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst clearVisible = computed(() => canClear(props, resolvedDisabled.value, model.value.length > 0))\n\n// @a11y @devwarn\n/*\n * Its label stays defined always, even when no icon is rendered. The helper that detects a\n * click handler on an icon warns AT setup if one is attached without a label, and it has no way\n * of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.pickerIcon,\n)\nconst endIconLabel = computed(() => props.pickerIconLabel ?? m.value.fileInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.fileInput.clear)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since it is\n * language; the SIZE is formatted by the platform, which knows the local conventions; and the\n * parentheses come from neither, being punctuation every language shares; the same boundary\n * VBadge's \"99+\" falls on. With nothing chosen it states the count alone: \"0 files ()\" would be\n * noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here rather\n * than by VInput: the hint belongs to OUR row under the field, VInput having no such row; its\n * own counter sits inside the field. The counter is deliberately part of that list, unlike in\n * VTextarea.\n */\nconst describedBy = computed(() =>\n  joinIds(\n    attrs['aria-describedby'] as string | undefined,\n    !!props.hint && hintId,\n    props.counter && counterId,\n  ),\n)\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 VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/**\n * What each chip shows for its file, worked out once per change of the selection rather than on\n * every render, which reads it three times per chip.\n */\n// Computed lazily, so a text display, which never reads it, never pays for it.\nconst chipLabels = computed(() => model.value.map((file) => truncateMiddle(file.name)))\n\nfunction onControlClick(event: MouseEvent) {\n  // Without this guard the attach icon would open the dialog TWICE, and the clear cross would\n  // reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeFile(index: number) {\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  if (removeAt(index)) inputRef.value?.focus()\n}\n\n/*\n * Files may be dropped on the component itself; there is no separate drop area here; that is\n * what VFilePicker is for.\n */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => !props.noDrop && enabled.value,\n  acceptFiles,\n)\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did (a\n   * click, a key press): browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n  /**\n   * The component's own box, for what neither of the two above covers. It is the wrapper\n   * and not the hidden file input: that one is the FORM's element, this is the reader's.\n   */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-file-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    @dragenter=\"onDragEnter\"\n    @dragover=\"onDragOver\"\n    @dragleave=\"onDragLeave\"\n    @drop=\"onDrop\"\n  >\n    <input v-bind=\"nativeInputAttrs\" ref=\"fileEl\" class=\"v-file-input-native v-hidden-input\" />\n\n    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <!-- Shown as chips, the field takes VInput's two arrangements for chips: its end\n           controls lifted out of the flow, and the chips wrapping onto several rows. -->\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :class=\"{ 'v-input-end-pinned v-input-chips': resolvedDisplay === 'chip' }\"\n        :model-value=\"displayText\"\n        no-typing\n        :readonly=\"readonly\"\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clear\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip' || $slots.start\" #start>\n          <template\n            v-for=\"(file, index) in resolvedDisplay === 'chip' ? model : []\"\n            :key=\"fileKey(file)\"\n          >\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabels[index]!\"\n              :remove=\"() => removeFile(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"enabled\"\n                :dismiss-label=\"m.common.remove(file.name)\"\n                :disabled=\"resolvedDisabled\"\n                :title=\"chipLabels[index] === file.name ? undefined : file.name\"\n                @dismiss=\"removeFile(index)\"\n                >{{ chipLabels[index] }}</VChip\n              >\n            </slot>\n          </template>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta v-field-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter v-field-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :bytes=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The real file input is a source of files and not a control anyone deals with: it wears\n   * `.v-hidden-input`, and taking it out of the tab order and hiding it from screen readers, in\n   * `useFileField`, is what leaves the visible field as the single stop and the single\n   * announcement.\n   */\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /*\n   * The selector weighs (0,4,0), one step above VInput's states, and it has to. The field\n   * inside is always read-only, and VInput's read-only background weighs (0,3,0): at that\n   * weight the winner would be whichever of the two sheets a bundler put last.\n   */\n  .v-file-input[data-dragging] .v-input .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VFileInput/truncate.d.ts

@@ -1,29 +1,9 @@
 /**
- * Middle truncation, for text whose END carries as much meaning as its start.
- * A file name is the canonical case: `text-overflow: ellipsis` would drop the
- * extension, which is often the only thing distinguishing two entries
- * (`invoice.pdf` and `invoice.png`), and the tail is also where the version or
- * date suffixes live.
- *
- * Pure, no Vue: the `VHotkeys/platform.ts` precedent: a single consumer, so it
- * stays in the component's folder. Deliberately NOT promoted alongside the file
- * helpers of `utils/file.ts`: cutting a string is a lexical operation, not
- * something the FILE domain decides: `utils/text.ts` is where it would go the
- * day a second consumer appears.
+ * Preserve both filename ends when truncating so extensions and version suffixes remain
+ * identifiable.
  */
 /** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not
     the field's width but keeping a row readable at a glance. */
 export declare const CHIP_NAME_MAX = 20;
-/**
- * `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`.
- *
- * The result is EXACTLY `max` characters long: the ellipsis takes one of them,
- * and the odd one goes to the head: the start of a name is what makes it
- * recognizable, the end is what disambiguates it.
- *
- * Counted in CODE POINTS (`[...text]`) and not in UTF-16 units: an emoji in a
- * name would otherwise be cut between its two halves and render as a
- * replacement character. Combining marks stay out of scope: a grapheme
- * segmenter for a chip label would be a lot of machinery for a rounding error.
- */
+/** `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`. */
 export declare function truncateMiddle(text: string, max?: number): string;

package/dist/components/VFileInput/truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/VFileInput/truncate.ts"],"sourcesContent":["/**\n * Middle truncation, for text whose END carries as much meaning as its start.\n * A file name is the canonical case: `text-overflow: ellipsis` would drop the\n * extension, which is often the only thing distinguishing two entries\n * (`invoice.pdf` and `invoice.png`), and the tail is also where the version or\n * date suffixes live.\n *\n * Pure, no Vue: the `VHotkeys/platform.ts` precedent: a single consumer, so it\n * stays in the component's folder. Deliberately NOT promoted alongside the file\n * helpers of `utils/file.ts`: cutting a string is a lexical operation, not\n * something the FILE domain decides: `utils/text.ts` is where it would go the\n * day a second consumer appears.\n */\n\n/** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not\n    the field's width but keeping a row readable at a glance. */\nexport const CHIP_NAME_MAX = 20\n\n/**\n * `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`.\n *\n * The result is EXACTLY `max` characters long: the ellipsis takes one of them,\n * and the odd one goes to the head: the start of a name is what makes it\n * recognizable, the end is what disambiguates it.\n *\n * Counted in CODE POINTS (`[...text]`) and not in UTF-16 units: an emoji in a\n * name would otherwise be cut between its two halves and render as a\n * replacement character. Combining marks stay out of scope: a grapheme\n * segmenter for a chip label would be a lot of machinery for a rounding error.\n */\nexport function truncateMiddle(text: string, max: number = CHIP_NAME_MAX): string {\n  const chars = [...text]\n  if (chars.length <= max) return text\n\n  const budget = Math.max(0, max - 1)\n  const head = Math.ceil(budget / 2)\n  const tail = budget - head\n\n  return `${chars.slice(0, head).join('')}…${chars.slice(chars.length - tail).join('')}`\n}\n"],"mappings":"AA8BA,SAAgB,EAAe,GAAc,IAAA,IAAqC;CAChF,IAAM,IAAQ,CAAC,GAAG,CAAI;CACtB,IAAI,EAAM,UAAU,GAAK,OAAO;CAEhC,IAAM,IAAS,KAAK,IAAI,GAAG,IAAM,CAAC,GAC5B,IAAO,KAAK,KAAK,IAAS,CAAC,GAC3B,IAAO,IAAS;CAEtB,OAAO,GAAG,EAAM,MAAM,GAAG,CAAI,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAM,MAAM,EAAM,SAAS,CAAI,CAAC,CAAC,KAAK,EAAE;AACrF"}
+{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/VFileInput/truncate.ts"],"sourcesContent":["/**\n * Preserve both filename ends when truncating so extensions and version suffixes remain\n * identifiable.\n */\n\n/** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not\n    the field's width but keeping a row readable at a glance. */\nexport const CHIP_NAME_MAX = 20\n\n/** `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`. */\nexport function truncateMiddle(text: string, max: number = CHIP_NAME_MAX): string {\n  const chars = [...text]\n  if (chars.length <= max) return text\n\n  const budget = Math.max(0, max - 1)\n  const head = Math.ceil(budget / 2)\n  const tail = budget - head\n\n  return `${chars.slice(0, head).join('')}…${chars.slice(chars.length - tail).join('')}`\n}\n"],"mappings":"AAUA,SAAgB,EAAe,GAAc,IAAA,IAAqC;CAChF,IAAM,IAAQ,CAAC,GAAG,CAAI;CACtB,IAAI,EAAM,UAAU,GAAK,OAAO;CAEhC,IAAM,IAAS,KAAK,IAAI,GAAG,IAAM,CAAC,GAC5B,IAAO,KAAK,KAAK,IAAS,CAAC,GAC3B,IAAO,IAAS;CAEtB,OAAO,GAAG,EAAM,MAAM,GAAG,CAAI,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAM,MAAM,EAAM,SAAS,CAAI,CAAC,CAAC,KAAK,EAAE;AACrF"}

package/dist/components/VFilePicker/VFilePicker.d.ts

@@ -32,14 +32,7 @@ export interface FilePickerRow {
     index: number;
     /** What kind of file it is, as worked out from its type or its extension. */
     kind: FilePickerKind;
-    /**
-     * The address of its image thumbnail, when there is one.
-     *
-     * It is absent on the server AND on the browser's first render, since those addresses
-     * only exist in a browser and creating them during the first render would make the two
-     * markups differ. It is absent as well for anything the browser fails to decode. Fall
-     * back to the icon in that case.
-     */
+    /** The address of its image thumbnail, when there is one. Fall back to the icon in that case. */
     thumbnail: string | undefined;
     /** The icon standing for that kind of file, a consumer's override included. */
     icon: IconSource;
@@ -49,24 +42,13 @@ export interface FilePickerRow {
     remove: () => void;
 }
 interface FilePickerProps {
-    /**
-     * What the reader is being asked to drop, in one line. It is REQUIRED: a drop zone
-     * with no instruction is just a rectangle.
-     *
-     * Note that this prop shadows the HTML attribute of the same name on the component
-     * itself, an accepted trade-off: a tooltip on a drop zone would be redundant anyway.
-     */
+    /** What the reader is being asked to drop, in one line. */
     title: string;
     /** A second line under it, for the constraints in plain words: kinds, sizes, how many. */
     subtitle?: string;
     /** The large icon at the top of the zone. */
     icon?: IconSource;
-    /**
-     * Hides the separator and the browse button under the instruction. That changes the
-     * zone's nature: it then becomes the control ITSELF, a real button, so Enter, Space
-     * and the focus come from the platform rather than from a container that merely
-     * reacts to clicks.
-     */
+    /** Hides the separator and the browse button under the instruction. */
     hideBrowse?: boolean;
     /**
      * The wording drawn on the browse button, which is also its accessible name. It falls
@@ -74,12 +56,8 @@ interface FilePickerProps {
      */
     browseText?: string;
     /**
-     * Where the files taken are listed: under the zone, or beside it. Beside folds back
-     * underneath when the COMPONENT is narrow, following the width it was given rather
-     * than the width of the window.
-     *
-     * By default nothing is listed at all: the value is there for a parent that wants to
-     * present it its own way.
+     * Where the files taken are listed: under the zone, or beside it. By default nothing is
+     * listed at all: the value is there for a parent that wants to present it its own way.
      */
     preview?: FilePickerPreview;
     /**
@@ -97,13 +75,7 @@ interface FilePickerProps {
     removeIcon?: IconSource;
     /** Allows several files to be taken. With one only, every extra file is turned away. */
     multiple?: boolean;
-    /**
-     * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).
-     *
-     * It is applied TWICE, and it has to be: as an attribute, which is what filters the
-     * system's file dialog, and again in code, which is the only thing that can filter a
-     * DROPPED file, the attribute having no say over a drop.
-     */
+    /** Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`). */
     accept?: string;
     /** The largest ONE file may be, in bytes. */
     maxSize?: number;
@@ -119,16 +91,13 @@ interface FilePickerProps {
      */
     readonly?: boolean;
     /**
-     * Marks the zone as invalid, which colours its outline and is announced on the control
-     * the reader reaches. It is for a rule of your own: nothing here is checked by the browser,
-     * the real input being hidden.
+     * Marks the zone as invalid, which colours its outline and is announced on the control the
+     * reader reaches.
      */
     invalid?: boolean;
     /**
      * Shows a spinner in place of the zone icon, typically while an upload is under way.
-     * It says that something is happening and changes nothing else: files can still be
-     * dropped and the dialog still opens. `disabled` and `readonly` are the props that cut
-     * those off.
+     * `disabled` and `readonly` are the props that cut those off.
      */
     loading?: boolean;
     /**
@@ -139,26 +108,17 @@ interface FilePickerProps {
 }
 type __VLS_Props = FilePickerProps;
 type __VLS_Slots = {
-    /**
-     * The large icon, for an illustration the icon props cannot express.
-     *
-     * It must stay non-interactive, and so must the two below: with the browse button
-     * hidden, the zone IS a button, and nothing interactive may sit inside one.
-     */
+    /** The large icon, for an illustration the icon props cannot express. */
     icon?(): unknown;
     /** The instruction. Text and inline elements only, for the same reason. */
     title?(): unknown;
     /** The second line. Same contract as the instruction. */
     subtitle?(): unknown;
-    /**
-     * The browse button. Call the `open` it receives: without it a button of your own
-     * could no longer open the file dialog at all.
-     */
+    /** The browse button. */
     browse?(props: FilePickerBrowseSlotProps): unknown;
     /**
-     * A WHOLE row of the list, the way out for a row showing its own upload progress. It
-     * receives everything the standard row was given, so nothing has to be worked out
-     * again.
+     * A whole row of the list, the way out for a row showing its own upload progress. It receives
+     * everything the standard row was given, so nothing has to be worked out again.
      */
     item?(props: FilePickerRow): unknown;
     /**
@@ -166,21 +126,11 @@ type __VLS_Slots = {
      * video's poster frame, or a format the browser cannot decode.
      */
     thumbnail?(props: FilePickerRow): unknown;
-    /**
-     * The control that removes a row. Two of the values it receives are not optional in
-     * practice: `remove` is the only thing that can take the file out, and `removeLabel` is
-     * the ready-made accessible name, the file's own included, without which the button
-     * would be announced as nothing at all.
-     */
+    /** The control that removes a row. */
     remove?(props: FilePickerRemoveSlotProps): unknown;
 };
 type __VLS_ModelProps = {
-    /**
-     * Always a LIST of files, whether or not several are allowed, and never a file on its own.
-     * The shape of the value does not depend on a prop, so a consumer never has to narrow a
-     * union TypeScript has no way of discriminating. With a single file it is simply a list
-     * of at most one.
-     */
+    /** Always a LIST of files, whether or not several are allowed, and never a file on its own. */
     modelValue?: File[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;