vectis-ui 0.8.1 → 0.9.1

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

@@ -1,32 +1,33 @@
-import { useLocale as e, useMessages as t } from "../../i18n/state.js";
-import n from "../VTypography/VTypography.js";
-import { useControlShape as ee } from "../../composables/useControlShape.js";
-import { useRootAttrs as te } from "../../composables/useRootAttrs.js";
-import { joinIds as r } from "../../utils/ids.js";
-import { iconStartListener as i } from "../../composables/useIconClickHandlers.js";
-import { canClear as a } from "../../composables/useClearable.js";
+import { isDev as e } from "../../utils/env.js";
+import { useLocale as t, useMessages as n } from "../../i18n/state.js";
+import ee from "../VTypography/VTypography.js";
+import { useControlShape as r } from "../../composables/useControlShape.js";
+import { useRootAttrs as i } from "../../composables/useRootAttrs.js";
+import { joinIds as a } from "../../utils/ids.js";
+import { iconStartListener as o } from "../../composables/useIconClickHandlers.js";
+import { canClear as te } from "../../composables/useClearable.js";
 import { inputGroupKey as ne } from "../VInput/context.js";
 import re from "../VInput/VInput.js";
 import ie from "../VChip/VChip.js";
 import { chipScaleFor as ae } from "../../utils/chip.js";
-import { attach_file as o } from "../VIcon/icons/attach_file.js";
+import { attach_file as s } from "../VIcon/icons/attach_file.js";
 import { useFileDrop as oe } from "../../composables/useFileDrop.js";
 import { fileKey as se, formatBytes as ce } from "../../utils/file.js";
 import { useFileField as le } from "../../composables/useFileField.js";
 import { truncateMiddle as ue } from "./truncate.js";
-import { Fragment as de, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, inject as fe, mergeModels as g, mergeProps as _, normalizeClass as pe, normalizeStyle as me, openBlock as v, ref as y, renderList as he, renderSlot as b, toDisplayString as x, unref as S, useId as C, useModel as ge, withCtx as w } from "vue";
+import { Fragment as de, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as fe, createTextVNode as p, createVNode as m, defineComponent as h, inject as pe, mergeModels as g, mergeProps as _, normalizeClass as me, normalizeStyle as he, openBlock as v, ref as y, renderList as ge, renderSlot as b, toDisplayString as x, unref as S, useId as C, useModel as _e, withCtx as w } from "vue";
 //#region src/components/VFileInput/VFileInput.vue?vue&type=script&setup=true&lang.ts
-var _e = [
+var ve = [
 	"data-size",
 	"data-compact",
 	"data-display",
 	"data-disabled",
 	"data-readonly",
 	"data-dragging"
-], ve = {
+], ye = {
 	key: 0,
 	class: "v-file-input-meta v-field-meta"
-}, ye = ["id"], T = /*@__PURE__*/ h({
+}, T = ["id"], E = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "VFileInput",
 	props: /*@__PURE__*/ g({
@@ -43,7 +44,7 @@ var _e = [
 			type: Boolean,
 			default: !1
 		},
-		pickerIcon: { default: () => o },
+		pickerIcon: { default: () => s },
 		noDrop: {
 			type: Boolean,
 			default: !1
@@ -75,7 +76,7 @@ var _e = [
 			type: Boolean,
 			default: !1
 		},
-		loadingLabel: { default: void 0 },
+		loadingText: { default: void 0 },
 		clearable: {
 			type: Boolean,
 			default: !1
@@ -92,89 +93,90 @@ var _e = [
 		"clear",
 		"click:icon-start"
 	], ["update:modelValue"]),
-	setup(o, { expose: h, emit: g }) {
-		let T = o, E = g, D = ge(o, "modelValue"), { attrs: O, rootClass: k, rootStyle: A, forwardedAttrs: j } = te(), M = i((e) => E("click:icon-start", e)), N = t(), P = e(), { size: F, compact: I, disabled: L } = ee(T, fe(ne, null)), { fileEl: be, enabled: R, nativeInputAttrs: xe, controlAttrs: Se, acceptFiles: Ce, openPicker: z, removeAt: we, clear: Te } = le({
-			model: D,
-			props: T,
-			emit: E,
-			forwardedAttrs: j,
+	setup(s, { expose: h, emit: g }) {
+		let E = s, D = g, O = _e(s, "modelValue", { get: (e) => e ?? [] }), { attrs: k, rootClass: A, rootStyle: j, forwardedAttrs: M } = i(), N = o((e) => D("click:icon-start", e)), P = n(), be = t(), { size: F, compact: I, disabled: L } = r(E, pe(ne, null)), { fileEl: xe, enabled: R, nativeInputAttrs: Se, controlAttrs: Ce, acceptFiles: we, openPicker: z, removeAt: Te, clear: Ee } = le({
+			model: O,
+			props: E,
+			emit: D,
+			forwardedAttrs: M,
 			disabled: L,
 			excludeFromControl: ["aria-describedby"],
-			onClear: () => E("clear"),
-			warnings: void 0
-		}), Ee = s(() => ({
-			...Se.value,
-			...M
-		})), B = y(null), V = y(null), H = s(() => T.multiple ? T.display : "text"), De = s(() => H.value === "chip" ? "" : D.value.map((e) => e.name).join(", ")), Oe = s(() => D.value.length > 0 ? void 0 : T.placeholder ?? N.value.fileInput.placeholder), ke = s(() => a(T, L.value, D.value.length > 0)), Ae = s(() => T.readonly ? void 0 : T.pickerIcon), je = s(() => T.pickerIconLabel ?? N.value.fileInput.openPicker), Me = s(() => T.clearLabel ?? N.value.fileInput.clear), U = s(() => D.value.reduce((e, t) => e + t.size, 0)), W = s(() => {
-			let e = N.value.fileInput.files(D.value.length);
-			return D.value.length === 0 ? e : `${e} (${ce(U.value, P.value)})`;
-		}), G = C(), K = C(), Ne = s(() => r(O["aria-describedby"], !!T.hint && G, T.counter && K)), q = s(() => ae(F.value, I.value)), J = s(() => D.value.map((e) => ue(e.name)));
-		function Pe(e) {
+			onClear: () => D("clear"),
+			warnings: e ? () => [E.display === "chip" && !E.multiple && "display=\"chip\" ignored without `multiple`: a single file shows as text."] : void 0
+		}), De = c(() => ({
+			...Ce.value,
+			...N
+		})), B = y(null), V = y(null), H = c(() => E.multiple ? E.display : "text"), Oe = c(() => H.value === "chip" ? "" : O.value.map((e) => e.name).join(", ")), ke = c(() => O.value.length > 0 ? void 0 : E.placeholder ?? P.value.fileInput.placeholder), Ae = c(() => te(E, L.value, O.value.length > 0)), je = c(() => E.readonly ? void 0 : E.pickerIcon), Me = c(() => E.pickerIconLabel ?? P.value.fileInput.openPicker), Ne = c(() => E.clearLabel ?? P.value.fileInput.clear), U = c(() => O.value.reduce((e, t) => e + t.size, 0)), W = c(() => {
+			let e = P.value.fileInput.files(O.value.length);
+			return O.value.length === 0 ? e : `${e} (${ce(U.value, be.value)})`;
+		}), G = C(), K = C(), Pe = c(() => a(k["aria-describedby"], !!E.hint && G, E.counter && K)), q = c(() => ae(F.value, I.value)), J = c(() => O.value.map((e) => ue(e.name)));
+		function Fe(e) {
 			e.target.closest("button") || z();
 		}
-		function Fe(e) {
+		function Ie(e) {
 			e.key !== "Enter" && e.key !== " " || (e.preventDefault(), z());
 		}
 		function Y(e) {
-			we(e) && B.value?.focus();
+			Te(e) && B.value?.focus();
 		}
-		let { dragging: Ie, onDragEnter: X, onDragOver: Z, onDragLeave: Q, onDrop: $ } = oe(() => !T.noDrop && R.value, Ce);
+		let { dragging: Le, onDragEnter: X, onDragOver: Z, onDragLeave: Q, onDrop: $ } = oe(() => !E.noDrop && R.value, we);
 		return h({
 			focus: (e) => B.value?.focus(e),
 			open: z,
 			el: V
-		}), (e, t) => (v(), u("div", {
+		}), (e, t) => (v(), d("div", {
 			ref_key: "rootEl",
 			ref: V,
-			class: pe(["v-file-input", S(k)]),
-			style: me([{ "--chip-height": q.value.height }, S(A)]),
+			class: me(["v-file-input", S(A)]),
+			style: he([{ "--chip-height": q.value.height }, S(j)]),
 			"data-size": S(F),
 			"data-compact": S(I) ? "" : void 0,
 			"data-display": H.value,
 			"data-disabled": S(L) ? "" : void 0,
-			"data-readonly": o.readonly ? "" : void 0,
-			"data-dragging": S(Ie) ? "" : void 0,
+			"data-readonly": s.readonly ? "" : void 0,
+			"data-dragging": S(Le) ? "" : void 0,
 			onDragenter: t[0] ||= (...e) => S(X) && S(X)(...e),
 			onDragover: t[1] ||= (...e) => S(Z) && S(Z)(...e),
 			onDragleave: t[2] ||= (...e) => S(Q) && S(Q)(...e),
 			onDrop: t[3] ||= (...e) => S($) && S($)(...e)
 		}, [
-			d("input", _(S(xe), {
+			f("input", _(S(Se), {
 				ref_key: "fileEl",
-				ref: be,
+				ref: xe,
 				class: "v-file-input-native v-hidden-input"
 			}), null, 16),
-			d("div", {
+			f("div", {
 				class: "v-file-input-control",
-				onClick: Pe
-			}, [m(re, _(Ee.value, {
+				onClick: Fe
+			}, [m(re, _(De.value, {
 				ref_key: "inputRef",
 				ref: B,
 				class: { "v-input-end-pinned v-input-chips": H.value === "chip" },
-				"model-value": De.value,
-				readonly: "",
-				label: o.label,
-				placeholder: Oe.value,
+				"model-value": Oe.value,
+				"no-typing": "",
+				readonly: s.readonly,
+				label: s.label,
+				placeholder: ke.value,
 				size: S(F),
 				compact: S(I),
 				disabled: S(L),
-				invalid: o.invalid,
-				clearable: o.clearable,
-				"clear-visible": ke.value,
-				"clear-label": Me.value,
-				"icon-start": o.iconStart,
-				"icon-start-label": o.iconStartLabel,
-				loading: o.loading,
-				"loading-label": o.loadingLabel,
-				"icon-end": Ae.value,
-				"icon-end-label": je.value,
-				"aria-describedby": Ne.value,
+				invalid: s.invalid,
+				clearable: s.clearable,
+				"clear-visible": Ae.value,
+				"clear-label": Ne.value,
+				"icon-start": s.iconStart,
+				"icon-start-label": s.iconStartLabel,
+				loading: s.loading,
+				"loading-text": s.loadingText,
+				"icon-end": je.value,
+				"icon-end-label": Me.value,
+				"aria-describedby": Pe.value,
 				"onClick:iconEnd": S(z),
-				onClear: S(Te),
-				onKeydown: Fe
-			}), f({ _: 2 }, [H.value === "chip" || e.$slots.start ? {
+				onClear: S(Ee),
+				onKeydown: Ie
+			}), fe({ _: 2 }, [H.value === "chip" || e.$slots.start ? {
 				name: "start",
-				fn: w(() => [(v(!0), u(de, null, he(H.value === "chip" ? D.value : [], (t, n) => b(e.$slots, "chip", {
+				fn: w(() => [(v(!0), d(de, null, ge(H.value === "chip" ? O.value : [], (t, n) => b(e.$slots, "chip", {
 					file: t,
 					index: n,
 					label: J.value[n],
@@ -186,7 +188,7 @@ var _e = [
 					size: q.value.size,
 					compact: q.value.compact,
 					dismissible: S(R),
-					"dismiss-label": S(N).common.remove(t.name),
+					"dismiss-label": S(P).common.remove(t.name),
 					disabled: S(L),
 					title: J.value[n] === t.name ? void 0 : t.name,
 					onDismiss: (e) => Y(n)
@@ -210,6 +212,7 @@ var _e = [
 			} : void 0]), 1040, [
 				"class",
 				"model-value",
+				"readonly",
 				"label",
 				"placeholder",
 				"size",
@@ -222,35 +225,35 @@ var _e = [
 				"icon-start",
 				"icon-start-label",
 				"loading",
-				"loading-label",
+				"loading-text",
 				"icon-end",
 				"icon-end-label",
 				"aria-describedby",
 				"onClick:iconEnd",
 				"onClear"
 			])]),
-			o.hint || o.counter ? (v(), u("div", ve, [o.hint ? (v(), c(n, {
+			s.hint || s.counter ? (v(), d("div", ye, [s.hint ? (v(), l(ee, {
 				key: 0,
 				id: S(G),
 				variant: "caption",
 				tone: "muted",
 				class: "v-file-input-hint"
 			}, {
-				default: w(() => [p(x(o.hint), 1)]),
+				default: w(() => [p(x(s.hint), 1)]),
 				_: 1
-			}, 8, ["id"])) : l("", !0), o.counter ? (v(), u("span", {
+			}, 8, ["id"])) : u("", !0), s.counter ? (v(), d("span", {
 				key: 1,
 				id: S(K),
 				class: "v-file-input-counter v-field-counter"
 			}, [b(e.$slots, "counter", {
-				count: D.value.length,
+				count: O.value.length,
 				bytes: U.value,
 				text: W.value
-			}, () => [p(x(W.value), 1)])], 8, ye)) : l("", !0)])) : l("", !0)
-		], 46, _e));
+			}, () => [p(x(W.value), 1)])], 8, T)) : u("", !0)])) : u("", !0)
+		], 46, ve));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };
 
 //# sourceMappingURL=VFileInput.vue_vue_type_script_setup_true_lang.js.map

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 = 'text' | 'chip'\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 has 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  loadingLabel?: 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  loadingLabel: 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: {\n    file: File\n    index: number\n    label: string\n    remove: () => void\n    size: ChipSize\n    compact: boolean\n  }): 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: { count: number; bytes: number; text: string }): unknown\n}>()\n\n/**\n * Always a LIST of files, whether or not several are allowed — 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: () => [] })\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        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-label=\"loadingLabel\"\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 * 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKA,IAAM,IAAQ,GA2BR,IAAO,GAwDP,IAAQ,GAAmB,GAAA,cAAC,EAAqB,MAAM,MAAU,KAAS,CAAC,EAAE,CAAC,GAE9E,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAI/D,IAAiB,GAAmB,MAAU,EAAK,oBAAoB,CAAK,CAAC,GAE7E,IAAI,EAAY,GAChB,KAAS,EAAU,GAMnB,EACJ,MAAM,GACN,SAAS,GACT,UAAU,MACR,EAAgB,GALN,GAAO,IAAe,IAKT,CAAK,GAY1B,EACJ,YACA,YACA,sBACA,kBACA,iBACA,eACA,cACA,cACE,GAAa;GACf;GACA;GACA;GACA;GACA,UAAU;GACV,oBAAoB,CAAC,kBAAkB;GACvC,eAAe,EAAK,OAAO;GAE3B,UAAU,UACA,CACJ,EAAM,YAAY,UAChB,CAAC,EAAM,YACP,2EACJ,IACA,KAAA;EACN,CAAC,GAGK,KAAa,SAAgB;GAAE,GAAG,GAAa;GAAO,GAAG;EAAe,EAAE,GAE1E,IAAW,EAAwC,IAAI,GACvD,IAAS,EAAwB,IAAI,GAGrC,IAAkB,QAAkC,EAAM,WAAW,EAAM,UAAU,MAAO,GAE5F,KAAc,QAClB,EAAgB,UAAU,SAAS,KAAK,EAAM,MAAM,KAAK,MAAS,EAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CACxF,GAEM,KAAkB,QACtB,EAAM,MAAM,SAAS,IAAI,KAAA,IAAa,EAAM,eAAe,EAAE,MAAM,UAAU,WAC/E,GAQM,KAAe,QAAe,GAAS,GAAO,EAAiB,OAAO,EAAM,MAAM,SAAS,CAAC,CAAC,GAY7F,KAAU,QACd,EAAM,WAAW,KAAA,IAAY,EAAM,UACrC,GACM,KAAe,QAAe,EAAM,mBAAmB,EAAE,MAAM,UAAU,UAAU,GACnF,KAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,UAAU,KAAK,GAE/E,IAAY,QAAe,EAAM,MAAM,QAAQ,GAAK,MAAS,IAAM,EAAK,MAAM,CAAC,CAAC,GAUhF,IAAc,QAAe;GACjC,IAAM,IAAO,EAAE,MAAM,UAAU,MAAM,EAAM,MAAM,MAAM;GACvD,OAAO,EAAM,MAAM,WAAW,IAAI,IAAO,GAAG,EAAK,IAAI,GAAY,EAAU,OAAO,GAAO,KAAK,EAAE;EAClG,CAAC,GAEK,IAAS,EAAM,GACf,IAAY,EAAM,GAYlB,KAAc,QAClB,EACE,EAAM,qBACN,CAAC,CAAC,EAAM,QAAQ,GAChB,EAAM,WAAW,CACnB,CACF,GAOM,IAAY,QAAe,GAAa,EAAa,OAAO,EAAgB,KAAK,CAAC,GAgBlF,IAAa,QAAe,EAAM,MAAM,KAAK,MAAS,GAAe,EAAK,IAAI,CAAC,CAAC;EAEtF,SAAS,GAAe,GAAmB;GAIpC,EAAM,OAAuB,QAAQ,QAAQ,KAClD,EAAW;EACb;EAEA,SAAS,GAAe,GAAsB;GACxC,EAAM,QAAQ,WAAW,EAAM,QAAQ,QAG3C,EAAM,eAAe,GACrB,EAAW;EACb;EAEA,SAAS,EAAW,GAAe;GAIjC,AAAI,GAAS,CAAK,KAAG,EAAS,OAAO,MAAM;EAC7C;EAIA,IAAM,EAAE,cAAU,gBAAa,eAAY,gBAAa,cAAW,SAC3D,CAAC,EAAM,UAAU,EAAQ,OAC/B,EACF;SAEA,EAAa;GAEX,QAAQ,MAA2B,EAAS,OAAO,MAAM,CAAO;GAKhE,MAAM;GAKN,IAAI;EACN,CAAC,mBAIC,EAkGM,OAAA;YAjGA;GAAJ,KAAI;GACJ,OAAK,GAAA,CAAC,gBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,GAAA,CAAA,EAAA,iBAAsB,EAAA,MAAU,OAAM,GAAI,EAAA,CAAA,CAAS,CAAA;GACxD,aAAW,EAAA,CAAA;GACX,gBAAc,EAAA,CAAA,IAAe,KAAQ,KAAA;GACrC,gBAAc,EAAA;GACd,iBAAe,EAAA,CAAA,IAAgB,KAAQ,KAAA;GACvC,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,EAAA,IAAQ,KAAQ,KAAA;GAC/B,aAAS,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACX,YAAQ,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACV,aAAS,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACX,QAAI,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAEP,EAA2F,SAA3F,EAAe,EAA4E,EAAA,GAA5D;aAAM;IAAJ,KAAI;IAAS,OAAM;;GAEpD,EA8DM,OAAA;IA9DD,OAAM;IAAwB,SAAO;OAGxC,EA0DS,IA1DT,EACU,GAyDD,OAzDW;aACd;IAAJ,KAAI;IACH,OAAK,EAAA,oCAAwC,EAAA,UAAe,OAAA;IAC5D,eAAa,GAAA;IACd,aAAA;IACC,UAAU,EAAA;IACV,OAAO,EAAA;IACP,aAAa,GAAA;IACb,MAAM,EAAA,CAAA;IACN,SAAS,EAAA,CAAA;IACT,UAAU,EAAA,CAAA;IACV,SAAS,EAAA;IACT,WAAW,EAAA;IACX,iBAAe,GAAA;IACf,eAAa,GAAA;IACb,cAAY,EAAA;IACZ,oBAAkB,EAAA;IAClB,SAAS,EAAA;IACT,gBAAc,EAAA;IACd,YAAU,GAAA;IACV,kBAAgB,GAAA;IAChB,oBAAkB,GAAA;IAClB,mBAAgB,EAAA,CAAA;IAChB,SAAO,EAAA,EAAA;IACP,WAAS;qBAEM,EAAA,UAAe,UAAeA,EAAAA,OAAO,QAAA;UAAQ;gBAEO,EAAA,EAAA,EAAA,GADlE,EAyBW,IAAA,MAAA,GAxBe,EAAA,UAAe,SAAc,EAAA,QAAK,CAAA,IAAlD,GAAM,MAGd,EAoBO,EAAA,QAAA,QAAA;KAlBE;KACC;KACP,OAAO,EAAA,MAAW;KAClB,cAAc,EAAW,CAAK;KAC9B,MAAM,EAAA,MAAU;KAChB,SAAS,EAAA,MAAU;aAaf,CAXL,EAUC,IAAA;KATC,MAAK;KACJ,MAAM,EAAA,MAAU;KAChB,SAAS,EAAA,MAAU;KACnB,aAAa,EAAA,CAAA;KACb,iBAAe,EAAA,CAAA,CAAC,CAAC,OAAO,OAAO,EAAK,IAAI;KACxC,UAAU,EAAA,CAAA;KACV,OAAO,EAAA,MAAW,OAAW,EAAK,OAAO,KAAA,IAAY,EAAK;KAC1D,YAAO,MAAE,EAAW,CAAK;;sBACF,CAAA,EAAA,EAApB,EAAA,MAAW,EAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;iBApBlB,EAAA,EAAA,CAAO,CAAC,CAAI,CAAA,WAwBpB,EAAqB,EAAA,QAAA,OAAA,CAAA,CAAA;;eAGPA,EAAAA,OAAM,eAAA;UAAgB;gBAAmC,CAAzB,EAAyB,EAAA,QAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAIlE,EAAA,QAAQ,EAAA,WAAA,EAAA,GAAnB,EAeM,OAfN,IAeM,CAbI,EAAA,QAAA,EAAA,GADR,EAQc,IAAA;;IANX,IAAI,EAAA,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;qBAEI,CAAA,EAAA,EAAP,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA;;+BAEG,EAAA,WAAA,EAAA,GAAZ,EAIO,QAAA;;IAJe,IAAI,EAAA,CAAA;IAAW,OAAM;OACzC,EAEO,EAAA,QAAA,WAAA;IAFe,OAAO,EAAA,MAAM;IAAS,OAAO,EAAA;IAAY,MAAM,EAAA;YAE9D,CAAA,EAAA,EADF,EAAA,KAAW,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

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

@@ -5,10 +5,10 @@
  * (`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
+ * 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
+ * something the FILE domain decides: `utils/text.ts` is where it would go the
  * day a second consumer appears.
  */
 /** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not
@@ -18,12 +18,12 @@ 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
+ * 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
+ * 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.
  */
 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 * 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"}

package/dist/components/VFilePicker/VFilePicker.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-file-picker{--file-picker-border-color:var(--vectis-color-border-strong);--file-picker-bg:var(--vectis-color-surface-sunken);--file-picker-text:var(--vectis-color-text);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-raised);--file-picker-thumb-bg:var(--vectis-color-surface-muted);inline-size:100%;font-family:var(--vectis-text-family);display:block;position:relative}.v-file-picker-body{gap:var(--vectis-space-4);flex-direction:column;display:flex}.v-file-picker-zone{justify-content:center;align-items:center;gap:var(--vectis-space-2);inline-size:100%;min-block-size:var(--vectis-control-size-file-picker-min-block);padding:var(--vectis-space-6) var(--vectis-space-4);appearance:none;border:1px dashed var(--file-picker-border-color);border-radius:var(--vectis-radius-surface);background:var(--file-picker-bg);color:var(--file-picker-text);font:inherit;text-align:center;transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default);flex-direction:column;margin:0;display:flex}.v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone{cursor:pointer}.v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone:hover{--file-picker-border-color:var(--vectis-color-accent)}.v-file-picker[data-invalid] .v-file-picker-zone{--file-picker-border-color:var(--vectis-color-danger)}.v-file-picker-zone:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-file-picker[data-dragging]{--file-picker-border-color:var(--vectis-color-accent);--file-picker-bg:var(--vectis-color-accent-surface)}.v-file-picker-icon{--vectis-icon-size:var(--vectis-control-size-file-picker-icon);min-inline-size:var(--vectis-control-size-file-picker-icon);min-block-size:var(--vectis-control-size-file-picker-icon);color:var(--file-picker-text-muted);justify-content:center;align-items:center;display:inline-flex}.v-file-picker-icon>.v-spinner{font-size:var(--vectis-icon-size)}.v-file-picker-subtitle{--typography-color:var(--file-picker-text-muted)}.v-file-picker-separator{align-items:center;gap:var(--vectis-space-3);inline-size:100%;color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);margin-block-start:var(--vectis-space-2);display:flex}.v-file-picker-separator:before,.v-file-picker-separator:after{content:"";border-block-start:1px solid var(--vectis-color-border);flex:1 1 0}.v-file-picker-list{gap:var(--vectis-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.v-file-picker-item{align-items:center;gap:var(--vectis-space-3);padding:var(--vectis-space-2);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-row-bg);display:flex}.v-file-picker-thumb{inline-size:var(--vectis-control-size-file-picker-thumb);block-size:var(--vectis-control-size-file-picker-thumb);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-thumb-bg);color:var(--file-picker-text-muted);flex:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.v-file-picker-image{object-fit:cover;block-size:100%;inline-size:100%;display:block}.v-file-picker-info{min-inline-size:0;color:var(--file-picker-text);flex-direction:column;flex:auto;display:flex}.v-file-picker-name{font-size:var(--vectis-text-body-sm-size);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.v-file-picker-size{color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);font-variant-numeric:tabular-nums}.v-file-picker[data-preview=end]{container:v-file-picker/inline-size}.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:row;align-items:flex-start}.v-file-picker[data-preview=end] .v-file-picker-zone,.v-file-picker[data-preview=end] .v-file-picker-list{flex:1 1 0;min-inline-size:0}@container v-file-picker (width<=34rem){.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:column}}.v-file-picker[data-disabled]{--file-picker-border-color:var(--vectis-color-border);--file-picker-bg:var(--vectis-color-surface-muted);--file-picker-text:var(--vectis-color-text-muted);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-muted)}.v-file-picker[data-readonly]{--file-picker-border-color:var(--vectis-color-border)}@media (prefers-reduced-motion:reduce){.v-file-picker-zone{transition:none}}@media (forced-colors:active){.v-file-picker[data-dragging] .v-file-picker-zone{border-style:solid}.v-file-picker-thumb{border:1px solid}}}
+@layer vectis.components{.v-file-picker{--file-picker-border-color:var(--vectis-color-border-strong);--file-picker-bg:var(--vectis-color-surface-sunken);--file-picker-text:var(--vectis-color-text);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-raised);--file-picker-thumb-bg:var(--vectis-color-surface-muted);inline-size:100%;font-family:var(--vectis-text-family);display:block;position:relative}.v-file-picker-body{gap:var(--vectis-space-4);flex-direction:column;display:flex}.v-file-picker-zone{justify-content:center;align-items:center;gap:var(--vectis-space-2);inline-size:100%;min-block-size:var(--vectis-control-size-file-picker-min-block);padding:var(--vectis-space-6) var(--vectis-space-4);appearance:none;border:1px dashed var(--file-picker-border-color);border-radius:var(--vectis-radius-surface);background:var(--file-picker-bg);color:var(--file-picker-text);font:inherit;text-align:center;transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default);flex-direction:column;margin:0;display:flex}.v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone{cursor:pointer}.v-file-picker:not([data-disabled]):not([data-readonly]):not([data-invalid]) .v-file-picker-zone:hover{--file-picker-border-color:var(--vectis-color-accent)}.v-file-picker[data-invalid] .v-file-picker-zone{--file-picker-border-color:var(--vectis-color-danger)}.v-file-picker-zone:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-file-picker[data-dragging]{--file-picker-border-color:var(--vectis-color-accent);--file-picker-bg:var(--vectis-color-accent-surface)}.v-file-picker-icon{--vectis-icon-size:var(--vectis-control-size-file-picker-icon);min-inline-size:var(--vectis-control-size-file-picker-icon);min-block-size:var(--vectis-control-size-file-picker-icon);color:var(--file-picker-text-muted);justify-content:center;align-items:center;display:inline-flex}.v-file-picker-icon>.v-spinner{font-size:var(--vectis-icon-size)}.v-file-picker-subtitle{--typography-color:var(--file-picker-text-muted)}.v-file-picker-separator{align-items:center;gap:var(--vectis-space-3);inline-size:100%;color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);margin-block-start:var(--vectis-space-2);display:flex}.v-file-picker-separator:before,.v-file-picker-separator:after{content:"";border-block-start:1px solid var(--vectis-color-border);flex:1 1 0}.v-file-picker-list{gap:var(--vectis-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.v-file-picker-item{align-items:center;gap:var(--vectis-space-3);padding:var(--vectis-space-2);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-row-bg);display:flex}.v-file-picker-thumb{inline-size:var(--vectis-control-size-file-picker-thumb);block-size:var(--vectis-control-size-file-picker-thumb);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-thumb-bg);color:var(--file-picker-text-muted);flex:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.v-file-picker-image{object-fit:cover;block-size:100%;inline-size:100%;display:block}.v-file-picker-info{min-inline-size:0;color:var(--file-picker-text);flex-direction:column;flex:auto;display:flex}.v-file-picker-name{font-size:var(--vectis-text-body-sm-size);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.v-file-picker-size{color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);font-variant-numeric:tabular-nums}.v-file-picker[data-preview=end]{container:v-file-picker/inline-size}.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:row;align-items:flex-start}.v-file-picker[data-preview=end] .v-file-picker-zone,.v-file-picker[data-preview=end] .v-file-picker-list{flex:1 1 0;min-inline-size:0}@container v-file-picker (width<=34rem){.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:column}}.v-file-picker[data-disabled]{--file-picker-border-color:var(--vectis-color-border);--file-picker-bg:var(--vectis-color-surface-muted);--file-picker-text:var(--vectis-color-text-muted);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-muted)}.v-file-picker[data-readonly]{--file-picker-border-color:var(--vectis-color-border)}@media (prefers-reduced-motion:reduce){.v-file-picker-zone{transition:none}}@media (forced-colors:active){.v-file-picker[data-dragging] .v-file-picker-zone{border-style:solid}.v-file-picker-thumb{border:1px solid}}}