vectis-ui 0.8.1 → 0.9.1

package/dist/components/VFilePicker/VFilePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,37 +1,38 @@
-import { useLocale as e, useMessages as t } from "../../i18n/state.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
-import r from "../VIcon/VIcon.js";
-import i from "../VTypography/VTypography.js";
-import a from "../VSpinner/VSpinner.js";
-import ee from "../VButton/VButton.js";
-import te from "../VIconButton/VIconButton.js";
+import { isDev as e } from "../../utils/env.js";
+import { useLocale as t, useMessages as n } from "../../i18n/state.js";
+import { iconProps as r } from "../VIcon/iconProps.js";
+import i from "../VIcon/VIcon.js";
+import a from "../VTypography/VTypography.js";
+import ee from "../VSpinner/VSpinner.js";
+import te from "../VButton/VButton.js";
+import o from "../VIconButton/VIconButton.js";
 import { useRootAttrs as ne } from "../../composables/useRootAttrs.js";
-import { close as o } from "../VIcon/icons/close.js";
-import { useFileDrop as s } from "../../composables/useFileDrop.js";
-import { fileKey as re, formatBytes as ie } from "../../utils/file.js";
-import { useFileField as ae } from "../../composables/useFileField.js";
-import { audio_file as oe } from "../VIcon/icons/audio_file.js";
+import { close as s } from "../VIcon/icons/close.js";
+import { useFileDrop as re } from "../../composables/useFileDrop.js";
+import { fileKey as ie, formatBytes as ae } from "../../utils/file.js";
+import { useFileField as oe } from "../../composables/useFileField.js";
+import { audio_file as se } from "../VIcon/icons/audio_file.js";
 import { cloud_upload as c } from "../VIcon/icons/cloud_upload.js";
 import { code as l } from "../VIcon/icons/code.js";
 import { description as u } from "../VIcon/icons/description.js";
 import { folder_zip as d } from "../VIcon/icons/folder_zip.js";
-import { image as f } from "../VIcon/icons/image.js";
-import { picture_as_pdf as se } from "../VIcon/icons/picture_as_pdf.js";
-import { table_chart as ce } from "../VIcon/icons/table_chart.js";
-import { video_file as le } from "../VIcon/icons/video_file.js";
-import { fileKind as ue } from "./fileKind.js";
-import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, nextTick as de, normalizeClass as fe, normalizeProps as pe, normalizeStyle as me, onBeforeUnmount as he, onMounted as ge, openBlock as w, reactive as _e, ref as T, renderList as E, renderSlot as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, useModel as j, watch as M, withCtx as N } from "vue";
+import { image as ce } from "../VIcon/icons/image.js";
+import { picture_as_pdf as le } from "../VIcon/icons/picture_as_pdf.js";
+import { table_chart as ue } from "../VIcon/icons/table_chart.js";
+import { video_file as de } from "../VIcon/icons/video_file.js";
+import { fileKind as fe } from "./fileKind.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as S, nextTick as pe, normalizeClass as me, normalizeProps as he, normalizeStyle as ge, onBeforeUnmount as _e, onMounted as ve, openBlock as C, reactive as ye, ref as w, renderList as T, renderSlot as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as A, watch as j, withCtx as M } from "vue";
 //#region src/components/VFilePicker/VFilePicker.vue?vue&type=script&setup=true&lang.ts
-var P = [
+var N = [
 	"data-preview",
 	"data-disabled",
 	"data-readonly",
 	"data-invalid",
 	"data-dragging"
-], F = { class: "v-file-picker-body" }, I = { class: "v-file-picker-icon" }, ve = { class: "v-file-picker-separator" }, ye = ["aria-label"], be = { class: "v-file-picker-thumb" }, xe = ["src", "onError"], Se = { class: "v-file-picker-info" }, Ce = ["title"], we = { class: "v-file-picker-size" }, L = /*@__PURE__*/ x({
+], P = { class: "v-file-picker-body" }, be = { class: "v-file-picker-icon" }, xe = { class: "v-file-picker-separator" }, Se = ["aria-label"], Ce = { class: "v-file-picker-thumb" }, we = ["src", "onError"], Te = { class: "v-file-picker-info" }, Ee = ["title"], De = { class: "v-file-picker-size" }, F = /*@__PURE__*/ b({
 	inheritAttrs: !1,
 	__name: "VFilePicker",
-	props: /*@__PURE__*/ S({
+	props: /*@__PURE__*/ x({
 		title: {},
 		subtitle: { default: void 0 },
 		icon: { default: () => c },
@@ -39,7 +40,7 @@ var P = [
 			type: Boolean,
 			default: !1
 		},
-		browseLabel: { default: void 0 },
+		browseText: { default: void 0 },
 		preview: {
 			type: [Boolean, String],
 			default: !1
@@ -49,7 +50,7 @@ var P = [
 			default: !1
 		},
 		typeIcons: { default: void 0 },
-		removeIcon: { default: () => o },
+		removeIcon: { default: () => s },
 		multiple: {
 			type: Boolean,
 			default: !1
@@ -74,196 +75,212 @@ var P = [
 			type: Boolean,
 			default: !1
 		},
-		loadingLabel: { default: void 0 }
+		loadingText: { default: void 0 }
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ S([
+	emits: /*@__PURE__*/ x([
 		"change",
 		"reject",
 		"remove"
 	], ["update:modelValue"]),
-	setup(o, { expose: c, emit: x }) {
-		let S = o, L = x, R = j(o, "modelValue"), { attrs: Te, rootClass: z, rootStyle: Ee, forwardedAttrs: De } = ne(), B = t(), Oe = e(), { fileEl: ke, enabled: V, nativeInputAttrs: Ae, controlAttrs: je, acceptFiles: Me, openPicker: H, removeAt: Ne } = ae({
-			model: R,
-			props: S,
-			emit: L,
-			forwardedAttrs: De,
-			warnings: void 0
-		}), U = T(null), W = T(null), G = m(() => S.preview !== !1 && R.value.length > 0), Pe = {
-			image: f,
-			pdf: se,
-			audio: oe,
-			video: le,
+	setup(s, { expose: c, emit: b }) {
+		let x = s, F = b, I = A(s, "modelValue", { get: (e) => e ?? [] }), { attrs: L, rootClass: Oe, rootStyle: ke, forwardedAttrs: R } = ne(), z = n(), Ae = t(), { fileEl: je, enabled: B, nativeInputAttrs: Me, controlAttrs: Ne, acceptFiles: Pe, openPicker: V, removeAt: Fe } = oe({
+			model: I,
+			props: x,
+			emit: F,
+			forwardedAttrs: R,
+			warnings: e ? () => [!x.hideBrowse && (L["aria-label"] !== void 0 || L["aria-labelledby"] !== void 0) && "an aria-label on the zone is inert while the browse button is shown: the zone is a plain container then, and axe reports aria-prohibited-attr. Name the zone through `title`, or set `hide-browse` to make the zone itself the control."] : void 0
+		}), H = w(null), U = w(null), W = p(() => x.preview !== !1 && I.value.length > 0), Ie = {
+			image: ce,
+			pdf: le,
+			audio: se,
+			video: de,
 			archive: d,
-			spreadsheet: ce,
+			spreadsheet: ue,
 			code: l,
 			file: u
-		}, Fe = (e) => S.typeIcons?.[e] ?? Pe[e];
-		function Ie(e) {
-			!S.hideBrowse && e.target.closest("button") || H();
+		}, Le = (e) => x.typeIcons?.[e] ?? Ie[e];
+		function Re(e) {
+			!x.hideBrowse && e.target.closest("button") || V();
 		}
-		let { dragging: Le, onDragEnter: K, onDragOver: q, onDragLeave: J, onDrop: Y } = s(() => V.value, Me), X = T(null);
-		function Z() {
-			let e = U.value;
+		let { dragging: ze, onDragEnter: G, onDragOver: K, onDragLeave: q, onDrop: J } = re(() => B.value, Pe), Y = w(null);
+		function X() {
+			let e = H.value;
 			return e ? e.matches("button") ? e : e.querySelector("button") : null;
 		}
-		async function Re(e) {
-			if (!Ne(e)) return;
-			await de();
-			let t = W.value?.querySelectorAll(".v-file-picker-item") ?? [];
-			(t[Math.min(e, t.length - 1)]?.querySelector("button") ?? Z())?.focus();
+		async function Be(e) {
+			if (!Fe(e)) return;
+			await pe();
+			let t = U.value?.querySelectorAll(".v-file-picker-item") ?? [];
+			(t[Math.min(e, t.length - 1)]?.querySelector("button") ?? X())?.focus();
 		}
-		let Q = _e(/* @__PURE__ */ new Map()), ze = (e) => e.type.startsWith("image/");
-		function $() {
-			let e = new Set(!S.hideThumbnails && S.preview !== !1 ? R.value.filter(ze) : []);
-			for (let [t, n] of Q) e.has(t) || (URL.revokeObjectURL(n), Q.delete(t));
-			for (let t of e) Q.has(t) || Q.set(t, URL.createObjectURL(t));
+		let Z = ye(/* @__PURE__ */ new Map()), Ve = (e) => e.type.startsWith("image/");
+		function Q() {
+			let e = new Set(!x.hideThumbnails && x.preview !== !1 ? I.value.filter((e) => Ve(e) && !$.has(e)) : []);
+			for (let [t, n] of Z) e.has(t) || (URL.revokeObjectURL(n), Z.delete(t));
+			for (let t of e) Z.has(t) || Z.set(t, URL.createObjectURL(t));
 		}
-		function Be(e) {
-			let t = Q.get(e);
-			t && (URL.revokeObjectURL(t), Q.delete(e));
+		function He(e) {
+			let t = Z.get(e);
+			t && (URL.revokeObjectURL(t), Z.delete(e), $.add(e));
 		}
-		ge($), M([
-			R,
-			() => S.hideThumbnails,
-			() => S.preview
-		], $, { deep: !0 }), he(() => {
-			for (let e of Q.values()) URL.revokeObjectURL(e);
-			Q.clear();
+		let $ = /* @__PURE__ */ new WeakSet();
+		ve(Q), j([
+			I,
+			() => x.hideThumbnails,
+			() => x.preview
+		], Q, { deep: !0 }), _e(() => {
+			for (let e of Z.values()) URL.revokeObjectURL(e);
+			Z.clear();
 		});
-		let Ve = m(() => G.value ? R.value.map((e, t) => {
-			let n = ue(e);
+		let Ue = p(() => W.value ? I.value.map((e, t) => {
+			let n = fe(e);
 			return {
-				key: re(e),
+				key: ie(e),
 				row: {
 					file: e,
 					index: t,
 					kind: n,
-					thumbnail: Q.get(e),
-					icon: Fe(n),
-					sizeText: ie(e.size, Oe.value),
-					remove: () => Re(t)
+					thumbnail: Z.get(e),
+					icon: Le(n),
+					sizeText: ae(e.size, Ae.value),
+					remove: () => Be(t)
 				},
-				removeLabel: B.value.common.remove(e.name)
+				removeLabel: z.value.common.remove(e.name)
 			};
 		}) : []);
 		return c({
-			focus: (e) => Z()?.focus(e),
-			open: H,
-			el: X
-		}), (e, t) => (w(), _("div", {
+			focus: (e) => X()?.focus(e),
+			open: V,
+			el: Y
+		}), (e, t) => (C(), g("div", {
 			ref_key: "rootEl",
-			ref: X,
-			class: fe(["v-file-picker", A(z)]),
-			style: me(A(Ee)),
-			"data-preview": o.preview || void 0,
-			"data-disabled": o.disabled ? "" : void 0,
-			"data-readonly": o.readonly ? "" : void 0,
-			"data-invalid": o.invalid ? "" : void 0,
-			"data-dragging": A(Le) ? "" : void 0,
-			onDragenter: t[0] ||= (...e) => A(K) && A(K)(...e),
-			onDragover: t[1] ||= (...e) => A(q) && A(q)(...e),
-			onDragleave: t[2] ||= (...e) => A(J) && A(J)(...e),
-			onDrop: t[3] ||= (...e) => A(Y) && A(Y)(...e)
-		}, [v("input", C(A(Ae), {
+			ref: Y,
+			class: me(["v-file-picker", k(Oe)]),
+			style: ge(k(ke)),
+			"data-preview": s.preview || void 0,
+			"data-disabled": s.disabled ? "" : void 0,
+			"data-readonly": s.readonly ? "" : void 0,
+			"data-invalid": s.invalid ? "" : void 0,
+			"data-dragging": k(ze) ? "" : void 0,
+			onDragenter: t[0] ||= (...e) => k(G) && k(G)(...e),
+			onDragover: t[1] ||= (...e) => k(K) && k(K)(...e),
+			onDragleave: t[2] ||= (...e) => k(q) && k(q)(...e),
+			onDrop: t[3] ||= (...e) => k(J) && k(J)(...e)
+		}, [_("input", S(k(Me), {
 			ref_key: "fileEl",
-			ref: ke,
+			ref: je,
 			class: "v-file-picker-native v-hidden-input"
-		}), null, 16), v("div", F, [(w(), h(O(o.hideBrowse ? "button" : "div"), C(A(je), {
+		}), null, 16), _("div", P, [(C(), m(D(s.hideBrowse ? "button" : "div"), S({
 			ref_key: "zoneEl",
-			ref: U,
+			ref: H,
+			"aria-invalid": s.hideBrowse && s.invalid ? "true" : void 0,
+			"aria-disabled": s.hideBrowse && s.readonly ? "true" : void 0
+		}, k(Ne), {
 			class: "v-file-picker-zone",
-			type: o.hideBrowse ? "button" : void 0,
-			disabled: o.hideBrowse && !A(V) ? !0 : void 0,
-			onClick: Ie
+			type: s.hideBrowse ? "button" : void 0,
+			disabled: s.hideBrowse && s.disabled ? !0 : void 0,
+			onClick: Re
 		}), {
-			default: N(() => [
-				v("span", I, [D(e.$slots, "icon", {}, () => [o.loading ? (w(), h(a, {
+			default: M(() => [
+				_("span", be, [E(e.$slots, "icon", {}, () => [s.loading ? (C(), m(ee, {
 					key: 0,
-					label: o.loadingLabel
-				}, null, 8, ["label"])) : (w(), h(r, pe(C({ key: 1 }, A(n)(o.icon))), null, 16))])]),
-				b(i, {
+					label: s.loadingText
+				}, null, 8, ["label"])) : (C(), m(i, he(S({ key: 1 }, k(r)(s.icon))), null, 16))])]),
+				y(a, {
 					as: "span",
 					variant: "subtitle",
 					class: "v-file-picker-title"
 				}, {
-					default: N(() => [D(e.$slots, "title", {}, () => [y(k(o.title), 1)])]),
+					default: M(() => [E(e.$slots, "title", {}, () => [v(O(s.title), 1)])]),
 					_: 3
 				}),
-				o.subtitle || e.$slots.subtitle ? (w(), h(i, {
+				s.subtitle || e.$slots.subtitle ? (C(), m(a, {
 					key: 0,
 					as: "span",
 					variant: "body-sm",
 					class: "v-file-picker-subtitle"
 				}, {
-					default: N(() => [D(e.$slots, "subtitle", {}, () => [y(k(o.subtitle), 1)])]),
+					default: M(() => [E(e.$slots, "subtitle", {}, () => [v(O(s.subtitle), 1)])]),
 					_: 3
-				})) : g("", !0),
-				o.hideBrowse ? g("", !0) : (w(), _(p, { key: 1 }, [v("span", ve, k(A(B).filePicker.or), 1), D(e.$slots, "browse", {
-					open: A(H),
-					disabled: !A(V)
-				}, () => [b(ee, {
+				})) : h("", !0),
+				s.hideBrowse ? h("", !0) : (C(), g(f, { key: 1 }, [_("span", xe, O(k(z).filePicker.or), 1), E(e.$slots, "browse", {
+					open: k(V),
+					disabled: !k(B)
+				}, () => [y(te, {
 					class: "v-file-picker-browse",
 					variant: "outline",
 					tone: "neutral",
-					disabled: !A(V),
-					onClick: A(H)
+					disabled: s.disabled,
+					"aria-disabled": s.readonly ? "true" : void 0,
+					"aria-invalid": s.invalid ? "true" : void 0,
+					onClick: k(V)
 				}, {
-					default: N(() => [y(k(o.browseLabel ?? A(B).filePicker.browse), 1)]),
+					default: M(() => [v(O(s.browseText ?? k(z).filePicker.browse), 1)]),
 					_: 1
-				}, 8, ["disabled", "onClick"])])], 64))
+				}, 8, [
+					"disabled",
+					"aria-disabled",
+					"aria-invalid",
+					"onClick"
+				])])], 64))
 			]),
 			_: 3
-		}, 16, ["type", "disabled"])), G.value ? (w(), _("ul", {
+		}, 16, [
+			"aria-invalid",
+			"aria-disabled",
+			"type",
+			"disabled"
+		])), W.value ? (C(), g("ul", {
 			key: 0,
 			ref_key: "listEl",
-			ref: W,
+			ref: U,
 			class: "v-file-picker-list",
-			"aria-label": A(B).filePicker.list
-		}, [(w(!0), _(p, null, E(Ve.value, ({ key: t, row: i, removeLabel: a }) => (w(), _("li", {
+			"aria-label": k(z).filePicker.list
+		}, [(C(!0), g(f, null, T(Ue.value, ({ key: t, row: n, removeLabel: a }) => (C(), g("li", {
 			key: t,
 			class: "v-file-picker-item"
-		}, [D(e.$slots, "item", C({ ref_for: !0 }, i), () => [
-			v("span", be, [D(e.$slots, "thumbnail", C({ ref_for: !0 }, i), () => [i.thumbnail ? (w(), _("img", {
+		}, [E(e.$slots, "item", S({ ref_for: !0 }, n), () => [
+			_("span", Ce, [E(e.$slots, "thumbnail", S({ ref_for: !0 }, n), () => [n.thumbnail ? (C(), g("img", {
 				key: 0,
 				class: "v-file-picker-image",
-				src: i.thumbnail,
+				src: n.thumbnail,
 				alt: "",
 				loading: "lazy",
 				decoding: "async",
-				onError: (e) => Be(i.file)
-			}, null, 40, xe)) : (w(), h(r, C({
+				onError: (e) => He(n.file)
+			}, null, 40, we)) : (C(), m(i, S({
 				key: 1,
 				ref_for: !0
-			}, A(n)(i.icon)), null, 16))])]),
-			v("span", Se, [v("span", {
+			}, k(r)(n.icon)), null, 16))])]),
+			_("span", Te, [_("span", {
 				class: "v-file-picker-name",
-				title: i.file.name
-			}, k(i.file.name), 9, Ce), v("span", we, k(i.sizeText), 1)]),
-			D(e.$slots, "remove", {
-				file: i.file,
-				index: i.index,
-				remove: i.remove,
+				title: n.file.name
+			}, O(n.file.name), 9, Ee), _("span", De, O(n.sizeText), 1)]),
+			E(e.$slots, "remove", {
+				file: n.file,
+				index: n.index,
+				remove: n.remove,
 				removeLabel: a
-			}, () => [b(te, {
+			}, () => [y(o, {
 				class: "v-file-picker-remove",
 				size: "sm",
-				icon: o.removeIcon,
+				icon: s.removeIcon,
 				label: a,
-				disabled: !A(V),
-				onClick: i.remove
+				disabled: !k(B),
+				onClick: n.remove
 			}, null, 8, [
 				"icon",
 				"label",
 				"disabled",
 				"onClick"
 			])])
-		])]))), 128))], 8, ye)) : g("", !0)])], 46, P));
+		])]))), 128))], 8, Se)) : h("", !0)])], 46, N));
 	}
 });
 //#endregion
-export { L as default };
+export { F as default };
 
 //# sourceMappingURL=VFilePicker.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VFilePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VFilePicker/VFilePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A drop zone: a dashed rectangle taking files dragged onto it or chosen from a dialog, with\n * an optional list of what it holds. The v-model is a plain `File[]`, and the division of\n * labour matters — this component SHOWS and SCREENS, uploading is the parent's business.\n *\n * Four things need JS, each forced by the platform. A dialog opens ONLY from a real click on\n * a file input, and a `FileList` cannot be written from a template, so the input is a SOURCE\n * of files rather than a mirror of the value. `accept` has no say over a DROP. The input has\n * to be reset after every change, or the same file cannot be chosen twice running. And a\n * thumbnail needs an object URL, which then has to be released.\n *\n * The KEYBOARD is deliberately not among them: with the browse button hidden the zone\n * becomes a real `<button>`, so Enter, Space, focus, role and a disabled control's inertness\n * all come from the browser. The other incarnation, a plain container, exists for one reason\n * — a button inside a button is invalid markup and unusable by keyboard. The drag highlight,\n * the \"or\" separator and the side-by-side layout are CSS too.\n */\nimport { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { audio_file as audioFileIcon } from '../VIcon/icons/audio_file'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { cloud_upload as cloudUploadIcon } from '../VIcon/icons/cloud_upload'\nimport { code as codeIcon } from '../VIcon/icons/code'\nimport { description as descriptionIcon } from '../VIcon/icons/description'\nimport { folder_zip as folderZipIcon } from '../VIcon/icons/folder_zip'\nimport { image as imageIcon } from '../VIcon/icons/image'\nimport { picture_as_pdf as pictureAsPdfIcon } from '../VIcon/icons/picture_as_pdf'\nimport { table_chart as tableChartIcon } from '../VIcon/icons/table_chart'\nimport { video_file as videoFileIcon } from '../VIcon/icons/video_file'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { fileKind, type FileKind } from './fileKind'\n\n/** Where the files taken are listed — under the zone, beside it, or nowhere. */\nexport type FilePickerPreview = false | 'bottom' | 'end'\n\n/**\n * Everything known about one row of the list. The same object is handed to both slots\n * that can replace part of a row, so the two can never be given different information.\n */\nexport interface FilePickerRow {\n  /** The file itself. */\n  file: File\n  /** Its position in the list. */\n  index: number\n  /** What kind of file it is, as worked out from its type or its extension. */\n  kind: FileKind\n  /**\n   * The address of its image thumbnail, when there is one.\n   *\n   * It is absent on the server AND on the browser's first render — those addresses only\n   * exist in a browser, and creating them during the first render would make the two\n   * markups differ — and absent as well for anything the browser fails to decode. Fall\n   * back to the icon in that case.\n   */\n  thumbnail: string | undefined\n  /** The icon standing for that kind of file, a consumer's override included. */\n  icon: IconSource\n  /** Its size, already written out in the reader's conventions. */\n  sizeText: string\n  /** Takes this file out of the list. */\n  remove: () => void\n}\n\ninterface FilePickerProps {\n  /**\n   * What the reader is being asked to drop, in one line. It is REQUIRED: a drop zone\n   * with no instruction is just a rectangle.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component\n   * itself, an accepted trade-off — a tooltip on a drop zone would be redundant anyway.\n   */\n  title: string\n  /** A second line under it, for the constraints in plain words: kinds, sizes, how many. */\n  subtitle?: string\n  /** The large icon at the top of the zone. */\n  icon?: IconSource\n  /**\n   * Hides the separator and the browse button under the instruction. That changes the\n   * zone's nature: it then becomes the control ITSELF, a real button, so Enter, Space\n   * and the focus come from the platform rather than from a container that merely\n   * reacts to clicks.\n   */\n  hideBrowse?: boolean\n  /** The wording of the browse button. It falls back to the design system dictionary. */\n  browseLabel?: string\n  /**\n   * Where the files taken are listed: under the zone, or beside it — beside folds back\n   * underneath when the COMPONENT is narrow, following the width it was given rather\n   * than the width of the window.\n   *\n   * By default nothing is listed at all: the value is there for a parent that wants to\n   * present it its own way.\n   */\n  preview?: FilePickerPreview\n  /**\n   * Shows the kind icon for every file in that list, images included — the way out when\n   * a list holds many images, or very large ones.\n   *\n   * Left out, an image is shown as a thumbnail: it is given a temporary address, created\n   * in the browser only and released as soon as the file leaves the list or the\n   * component goes away.\n   */\n  hideThumbnails?: boolean\n  /** Replaces the icon of one or more kinds of file. */\n  typeIcons?: Partial<Record<FileKind, IconSource>>\n  /** The icon of the button removing a file from the list. */\n  removeIcon?: IconSource\n  /** Allows several files to be taken. 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   * DROPPED file — the attribute has no say over a drop.\n   */\n  accept?: string\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 taken at most. */\n  maxFiles?: number\n  /** Makes the zone unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows what was taken without allowing it to change: no dialog, no drop, no removal. */\n  readonly?: boolean\n  /**\n   * Marks the zone as invalid, which colours its outline. It is for a rule of your own:\n   * nothing here is checked by the browser, the real input being hidden.\n   */\n  invalid?: boolean\n  /**\n   * Shows a spinner in place of the zone icon — while an upload is under way, typically.\n   * It says that something is happening and changes nothing else: files can still be\n   * dropped and the dialog still opens. `disabled` and `readonly` are the props that cut\n   * those off.\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\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilePickerProps>(), {\n  subtitle: undefined,\n  icon: () => cloudUploadIcon,\n  hideBrowse: false,\n  browseLabel: undefined,\n  preview: false,\n  hideThumbnails: false,\n  typeIcons: undefined,\n  removeIcon: () => closeIcon,\n  multiple: false,\n  accept: undefined,\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  loading: false,\n  loadingLabel: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection, by adding or removing something. */\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, and which one. It exists alongside `change`, which only says\n   * what is LEFT: an upload already in flight is aborted from here, without having to\n   * compare two lists to find out what went.\n   */\n  remove: [file: File, index: number]\n}>()\n\ndefineSlots<{\n  /**\n   * The large icon, for an illustration the icon props cannot express.\n   *\n   * It must stay non-interactive, and so must the two below: with the browse button\n   * hidden, the zone IS a button, and nothing interactive may sit inside one.\n   */\n  icon?(): unknown\n  /** The instruction. Text and inline elements only, for the same reason. */\n  title?(): unknown\n  /** The second line. Same contract as the instruction. */\n  subtitle?(): unknown\n  /**\n   * The browse button. Call the `open` it receives: without it a button of your own\n   * could no longer open the file dialog at all.\n   */\n  browse?(props: { open: () => void; disabled: boolean }): unknown\n  /**\n   * A WHOLE row of the list — the way out for a row showing its own upload progress. It\n   * receives everything the standard row was given, so nothing has to be worked out\n   * again.\n   */\n  item?(props: FilePickerRow): unknown\n  /**\n   * The square at the start of a row alone: for a thumbnail produced by your server, a\n   * video's poster frame, or a format the browser cannot decode.\n   */\n  thumbnail?(props: FilePickerRow): unknown\n  /**\n   * The control that removes a row. Two of the values it receives are not optional in\n   * practice: `remove` is the only thing that can take the file out, and `removeLabel` is\n   * the ready-made accessible name — including the file's own — without which the button\n   * would be announced as nothing at all.\n   */\n  remove?(props: { file: File; index: number; remove: () => void; removeLabel: 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\nconst m = useMessages()\nconst locale = useLocale()\n\n/*\n * The hidden input, the sorting of the consumer's attributes, the single entry point into\n * the value and the removal of a file live in `useFileField`, shared with VFileInput.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the ZONE: that is\n * what they see, and what takes the focus once the browse button is hidden. Nothing is\n * pulled out of it, unlike in VFileInput — this component assembles no description of\n * its own.\n *\n * The zone becomes the control exactly when there is no browse button inside to be one,\n * which is what `hideBrowse` decides.\n */\nconst {\n  fileEl,\n  enabled: interactive,\n  nativeInputAttrs,\n  controlAttrs: zoneAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt: removeFile,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  // @a11y @devwarn — the name a consumer gives a plain container is ignored by assistive\n  // technology, and axe reports it, so this one fails SILENTLY at runtime too. Behind\n  // `isDev`, which a production build folds to false, so the message is dropped.\n  warnings: isDev\n    ? () => [\n        !props.hideBrowse &&\n          (attrs['aria-label'] !== undefined || attrs['aria-labelledby'] !== undefined) &&\n          'an aria-label on the zone is inert while the browse button is shown: the zone is a plain container then, and axe reports aria-prohibited-attr. Name the zone through `title`, or set `hide-browse` to make the zone itself the control.',\n      ]\n    : undefined,\n})\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLUListElement | null>(null)\nconst showList = computed(() => props.preview !== false && model.value.length > 0)\n\n/**\n * Which icon stands for which kind of file. A consumer overrides it entry by entry, so\n * replacing one icon does not mean restating the other seven.\n */\nconst KIND_ICONS: Record<FileKind, IconSource> = {\n  image: imageIcon,\n  pdf: pictureAsPdfIcon,\n  audio: audioFileIcon,\n  video: videoFileIcon,\n  archive: folderZipIcon,\n  spreadsheet: tableChartIcon,\n  code: codeIcon,\n  file: descriptionIcon,\n}\n\nconst iconForKind = (kind: FileKind): IconSource => props.typeIcons?.[kind] ?? KIND_ICONS[kind]\n\nfunction onZoneClick(event: MouseEvent) {\n  // The browse button already handles its own click, and that click also reaches the\n  // zone: without this guard it would open the dialog twice. The test is inert when the\n  // zone IS the button, there being nothing inside it to match.\n  if (!props.hideBrowse && (event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => interactive.value,\n  acceptFiles,\n)\n\n// @a11y\n/**\n * What can be focused in the zone, whichever shape it has taken: the zone itself when it\n * is the button, and otherwise the first button inside it.\n *\n * It is found by searching the DOM rather than kept as a reference, because a consumer\n * may have replaced the browse button entirely — theirs is not ours to hold a reference\n * to, and it still has to be reachable.\n */\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focusTarget(): HTMLElement | null {\n  const zone = zoneEl.value\n  if (!zone) return null\n  return zone.matches('button') ? zone : zone.querySelector('button')\n}\n\n// @a11y @core\n/**\n * Takes a file out of the list, and catches the focus that was on its remove button.\n *\n * That button disappears with its row, so the focus would fall back to the page body.\n * It is moved instead to the row that takes its place, or to the browse control once\n * the list is empty. Waiting for the next tick is what makes the new row findable: the\n * page still shows the old one at the moment the value is written.\n */\nasync function removeAt(index: number) {\n  if (!removeFile(index)) return\n\n  await nextTick()\n  const items = listEl.value?.querySelectorAll<HTMLElement>('.v-file-picker-item') ?? []\n  const next = items[Math.min(index, items.length - 1)]?.querySelector('button')\n  ;(next ?? focusTarget())?.focus()\n}\n\n/**\n * One temporary address per image, kept against THE FILE OBJECT ITSELF.\n *\n * Using the file as the key is safe, and that is worth knowing: Vue's reactivity only\n * wraps plain objects, arrays and collections, so a File travelling through the value\n * comes back with its identity intact — the exact opposite of VCombobox's option cache,\n * where comparing identities IS the bug. Keying by name would be wrong here: two files\n * picked from different folders can share one.\n *\n * The map is made reactive rather than held in a plain reference, which is what lets a\n * single row re-render when its address is ready, instead of replacing the whole map.\n */\nconst thumbUrls = reactive(new Map<File, string>())\n\n/**\n * Whether a thumbnail can be drawn at all, decided on the type the BROWSER reports and\n * not on the kind derived from the extension. A `.heic` file counts as an image and\n * deserves the image icon, but no engine will decode it.\n */\nconst isThumbable = (file: File) => file.type.startsWith('image/')\n\n// @ssr @core\n/**\n * Brings the map into line with the list: releases the addresses of files that have\n * gone, and creates them for files that have arrived.\n *\n * TRAP — it is never called from setup, from a derived value or during rendering, only\n * once mounted, from a watcher and from handlers. That is what keeps the component\n * renderable on a server: the server draws the kind icon, and so does the browser's\n * first render, the map being empty until then — the same reasoning as today's date in\n * VDatePicker.\n */\nfunction syncThumbnails() {\n  // With no list rendered there is nothing to draw a thumbnail in, so no address is\n  // created at all. This gate — and not a warning — is what makes the default\n  // configuration cost strictly nothing.\n  const wanted = new Set(\n    !props.hideThumbnails && props.preview !== false ? model.value.filter(isThumbable) : [],\n  )\n\n  for (const [file, url] of thumbUrls) {\n    if (wanted.has(file)) continue\n    URL.revokeObjectURL(url)\n    thumbUrls.delete(file)\n  }\n  for (const file of wanted) {\n    if (!thumbUrls.has(file)) thumbUrls.set(file, URL.createObjectURL(file))\n  }\n}\n\n// @fallback\n/**\n * The image failed to decode — a format the browser does not read, a corrupt file, a\n * type that lied about itself. The address is released and the kind icon takes over: a\n * failure to draw must never leave an empty square in the list.\n */\nfunction dropThumbnail(file: File) {\n  const url = thumbUrls.get(file)\n  if (!url) return\n  URL.revokeObjectURL(url)\n  thumbUrls.delete(file)\n}\n\n// @ssr — the addresses are created in the browser only; the server and the browser's\n// first render both show the kind icon, so the two markups agree.\nonMounted(syncThumbnails)\n/*\n * Watching deeply costs nothing here and covers a consumer who ADDS to the list rather\n * than replacing it: the walk stops at a File, which is neither a plain object nor a\n * collection, so it never descends past the array itself.\n */\nwatch([model, () => props.hideThumbnails, () => props.preview], syncThumbnails, { deep: true })\n// Released BEFORE the component is torn down and never after — the same rule `useTimer`\n// and VHotkeys follow.\nonBeforeUnmount(() => {\n  for (const url of thumbUrls.values()) URL.revokeObjectURL(url)\n  thumbUrls.clear()\n})\n\n/**\n * Everything each row of the list needs, assembled in one place and once per change of the\n * list, the language, the icons or a thumbnail — not once per render. A drag over the zone\n * re-renders the component at the pointer's rate, and the rows would otherwise work out\n * their kind and their size again every time, for every slot that reads them.\n *\n * A Vue template has no way of declaring a reusable fragment, so this is also what keeps\n * the slots that can replace part of a row fed from a single source.\n */\nconst rows = computed<{ key: number; row: FilePickerRow; removeLabel: string }[]>(() =>\n  showList.value\n    ? model.value.map((file, index) => {\n        const kind = fileKind(file)\n        return {\n          key: fileKey(file),\n          row: {\n            file,\n            index,\n            kind,\n            thumbnail: thumbUrls.get(file),\n            icon: iconForKind(kind),\n            sizeText: formatBytes(file.size, locale.value),\n            remove: () => removeAt(index),\n          },\n          removeLabel: m.value.common.remove(file.name),\n        }\n      })\n    : [],\n)\n\ndefineExpose({\n  /** Moves the focus to the browse control — the button, or the zone when it is one. */\n  focus: (options?: FocusOptions) => focusTarget()?.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 zone's own box, for what neither of the two above covers. It is the wrapper and\n   * 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-picker\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-preview=\"preview || undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"invalid ? '' : 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-picker-native v-hidden-input\" />\n\n    <!-- TRAP — this wrapper is not decoration. The root is what the layout asks about\n         its own width, and an element cannot ask about ITSELF: whatever flips has to be\n         a descendant of it. Deleting this element makes the side-by-side layout\n         silently stop folding, with no error anywhere. -->\n    <div class=\"v-file-picker-body\">\n      <!-- A real button as soon as the zone IS the control: the role, Enter, Space, the\n           focus and the complete inertness of a disabled control then come from the\n           platform. A plain container otherwise — a button inside a button is invalid\n           markup, and unreachable by keyboard. -->\n      <component\n        :is=\"hideBrowse ? 'button' : 'div'\"\n        v-bind=\"zoneAttrs\"\n        ref=\"zoneEl\"\n        class=\"v-file-picker-zone\"\n        :type=\"hideBrowse ? 'button' : undefined\"\n        :disabled=\"hideBrowse && !interactive ? true : undefined\"\n        @click=\"onZoneClick\"\n      >\n        <span class=\"v-file-picker-icon\">\n          <slot name=\"icon\">\n            <VSpinner v-if=\"loading\" :label=\"loadingLabel\" />\n            <VIcon v-else v-bind=\"iconProps(icon)\" />\n          </slot>\n        </span>\n\n        <!-- Rendered as a span in BOTH shapes: a paragraph is not allowed inside a\n             button, and the markup must not change form between the two — one shape\n             means one set of CSS rules. -->\n        <VTypography as=\"span\" variant=\"subtitle\" class=\"v-file-picker-title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </VTypography>\n\n        <VTypography\n          v-if=\"subtitle || $slots.subtitle\"\n          as=\"span\"\n          variant=\"body-sm\"\n          class=\"v-file-picker-subtitle\"\n        >\n          <slot name=\"subtitle\">{{ subtitle }}</slot>\n        </VTypography>\n\n        <template v-if=\"!hideBrowse\">\n          <!-- Deliberately not hidden from screen readers: \"or\" is real text, and it\n               reads naturally between the instruction and the button. The two rules on\n               either side of it are pseudo-elements, and therefore decorative by\n               construction. -->\n          <span class=\"v-file-picker-separator\">{{ m.filePicker.or }}</span>\n\n          <slot name=\"browse\" :open=\"openPicker\" :disabled=\"!interactive\">\n            <VButton\n              class=\"v-file-picker-browse\"\n              variant=\"outline\"\n              tone=\"neutral\"\n              :disabled=\"!interactive\"\n              @click=\"openPicker\"\n            >\n              {{ browseLabel ?? m.filePicker.browse }}\n            </VButton>\n          </slot>\n        </template>\n      </component>\n\n      <ul v-if=\"showList\" ref=\"listEl\" class=\"v-file-picker-list\" :aria-label=\"m.filePicker.list\">\n        <li v-for=\"{ key, row, removeLabel } in rows\" :key=\"key\" class=\"v-file-picker-item\">\n          <slot name=\"item\" v-bind=\"row\">\n            <span class=\"v-file-picker-thumb\">\n              <slot name=\"thumbnail\" v-bind=\"row\">\n                <img\n                  v-if=\"row.thumbnail\"\n                  class=\"v-file-picker-image\"\n                  :src=\"row.thumbnail\"\n                  alt=\"\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  @error=\"dropThumbnail(row.file)\"\n                />\n                <VIcon v-else v-bind=\"iconProps(row.icon)\" />\n              </slot>\n            </span>\n\n            <span class=\"v-file-picker-info\">\n              <span class=\"v-file-picker-name\" :title=\"row.file.name\">{{ row.file.name }}</span>\n              <span class=\"v-file-picker-size\">{{ row.sizeText }}</span>\n            </span>\n\n            <slot\n              name=\"remove\"\n              :file=\"row.file\"\n              :index=\"row.index\"\n              :remove=\"row.remove\"\n              :remove-label=\"removeLabel\"\n            >\n              <VIconButton\n                class=\"v-file-picker-remove\"\n                size=\"sm\"\n                :icon=\"removeIcon\"\n                :label=\"removeLabel\"\n                :disabled=\"!interactive\"\n                @click=\"row.remove\"\n              />\n            </slot>\n          </slot>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* These variables carry the component's name for a reason: they INHERIT, so a bare\n     `--bg` or `--border-color` set by the host application on any ancestor would be\n     picked up here instead — and nothing would catch it, since the unit tests evaluate\n     no styles at all.\n\n     They are declared on the ROOT so that the drag, disabled and read-only states each\n     redefine them in ONE place, which is what makes those states structurally incapable\n     of disagreeing with hover or focus. */\n  .v-file-picker {\n    --file-picker-border-color: var(--vectis-color-border-strong);\n    --file-picker-bg: var(--vectis-color-surface-sunken);\n    --file-picker-text: var(--vectis-color-text);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-raised);\n    --file-picker-thumb-bg: var(--vectis-color-surface-muted);\n\n    /* Positioned so the hidden file input, which has no size at all, has something to be\n       placed against. */\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-file-picker-body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n  }\n\n  /* One set of rules serves both shapes the zone can take. All that has to be undone is\n     what the browser gives a button — its own appearance, font and margin — since\n     everything else is declared here regardless. The full width is part of that: a\n     button shrinks to fit its content, where a container does not. */\n  .v-file-picker-zone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    inline-size: 100%;\n    min-block-size: var(--vectis-control-size-file-picker-min-block);\n    margin: 0;\n    padding: var(--vectis-space-6) var(--vectis-space-4);\n    appearance: none;\n    border: 1px dashed var(--file-picker-border-color);\n    border-radius: var(--vectis-radius-surface);\n    background: var(--file-picker-bg);\n    color: var(--file-picker-text);\n    font: inherit;\n    text-align: center;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone {\n    cursor: pointer;\n  }\n\n  .v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone:hover {\n    --file-picker-border-color: var(--vectis-color-accent);\n  }\n\n  /* Invalid redefines the variable the zone paints its outline with, the way the drag\n     highlight does: the states can then never disagree about what colour the border is. */\n  .v-file-picker[data-invalid] .v-file-picker-zone {\n    --file-picker-border-color: var(--vectis-color-danger);\n  }\n\n  .v-file-picker-zone:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* While a file is being dragged over it, the zone is highlighted by redefining the\n     very variables it paints itself with — so the highlight cannot disagree with the\n     hover and focus states. */\n  .v-file-picker[data-dragging] {\n    --file-picker-border-color: var(--vectis-color-accent);\n    --file-picker-bg: var(--vectis-color-accent-surface);\n  }\n\n  /* The large icon's size is set HERE, on its own wrapper, and never on the zone: set\n     there it would inherit down and enlarge the browse button's icons as well. */\n  .v-file-picker-icon {\n    --vectis-icon-size: var(--vectis-control-size-file-picker-icon);\n\n    /* The wrapper is floored at the icon's own size, whatever it holds. An illustration of\n       your own in the `#icon` slot may be drawn smaller than the icon, and without that\n       floor the zone would change height with it — the box has to be the icon's even when\n       its content is not. A floor and not a fixed size, so a taller one still grows it\n       rather than spilling out of it; the centring is what keeps a smaller content in the\n       middle of the box instead of at its start. */\n    min-inline-size: var(--vectis-control-size-file-picker-icon);\n    min-block-size: var(--vectis-control-size-file-picker-icon);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--file-picker-text-muted);\n  }\n\n  /* The spinner standing in for the icon while loading takes the icon's box, the way it\n     does in every field: a spinner's size is the box it occupies, and the icon size is\n     set on this wrapper. */\n  .v-file-picker-icon > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  .v-file-picker-subtitle {\n    /* Set through VTypography's own colour variable rather than with a plain colour:\n       there is then a single source, and the disabled state below overrides that same\n       one instead of introducing a second. */\n    --typography-color: var(--file-picker-text-muted);\n  }\n\n  /* The word set between two rules, entirely in CSS: the two lines are pseudo-elements\n     sharing the row with the text between them. No extra element is added to the markup,\n     and nothing decorative reaches the accessibility tree. */\n  .v-file-picker-separator {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    inline-size: 100%;\n    margin-block-start: var(--vectis-space-2);\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n  }\n\n  .v-file-picker-separator::before,\n  .v-file-picker-separator::after {\n    content: '';\n    flex: 1 1 0;\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-file-picker-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .v-file-picker-item {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-2);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-row-bg);\n  }\n\n  .v-file-picker-thumb {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-file-picker-thumb);\n    block-size: var(--vectis-control-size-file-picker-thumb);\n    overflow: hidden;\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-thumb-bg);\n    color: var(--file-picker-text-muted);\n  }\n\n  .v-file-picker-image {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  /* The zero minimum is what makes the ellipsis below possible at all: a flex item\n     refuses by default to shrink below its own content, so without it a long file name\n     would widen the row instead of being cut short. */\n  .v-file-picker-info {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-inline-size: 0;\n    color: var(--file-picker-text);\n  }\n\n  .v-file-picker-name {\n    overflow: hidden;\n    font-size: var(--vectis-text-body-sm-size);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* Figures of equal width, so the sizes line up down the column instead of wobbling.\n     That is not a typographic role, so it stays a local rule — the same reasoning as\n     VFileInput's counter. */\n  .v-file-picker-size {\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Making the component a query container is reserved for the side-by-side layout,\n   * since only its rule below depends on it — and it is not free.\n   *\n   * A container of this kind computes its width WITHOUT looking at its content, so the\n   * component would lose its natural width inside an automatically sized grid column or\n   * an inline box. In the two other layouts it keeps it.\n   */\n  .v-file-picker[data-preview='end'] {\n    container-type: inline-size;\n    container-name: v-file-picker;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-body {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-zone,\n  .v-file-picker[data-preview='end'] .v-file-picker-list {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The threshold is written as a literal length, a container query accepting no\n   * variables. It is the width NEEDED to hold the two columns side by side, and not what\n   * is left once they fold: the zone stops being readable below about 18rem — its\n   * instruction wraps onto two lines and the button follows — a row needs about 15rem to\n   * show a thumbnail, a name worth reading and its remove button, and there is a gutter\n   * between them.\n   */\n  @container v-file-picker (max-width: 34rem) {\n    .v-file-picker[data-preview='end'] .v-file-picker-body {\n      flex-direction: column;\n    }\n  }\n\n  /* A disabled zone greys out through the colour tokens and never through opacity.\n\n     The pairing used is the design system's own for a disabled surface, exactly as\n     VInput sets it: a lighter text would look more convincingly disabled, and would fall\n     below the required contrast against that background — which the accessibility checks\n     refuse.\n\n     Both text variables take the SAME value here, so that the secondary line does not\n     sink below the title on a surface that is already dimmed. */\n  .v-file-picker[data-disabled] {\n    --file-picker-border-color: var(--vectis-color-border);\n    --file-picker-bg: var(--vectis-color-surface-muted);\n    --file-picker-text: var(--vectis-color-text-muted);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-muted);\n  }\n\n  .v-file-picker[data-readonly] {\n    --file-picker-border-color: var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-file-picker-zone {\n      transition: none;\n    }\n  }\n\n  /*\n   * Under Windows forced colours the backgrounds are dropped and every border colour is\n   * replaced, so the drag highlight — which is nothing but colour — would disappear\n   * entirely. A change of border STYLE survives that: the dashed outline becomes solid\n   * for as long as a file hovers over the zone.\n   */\n  @media (forced-colors: active) {\n    .v-file-picker[data-dragging] .v-file-picker-zone {\n      border-style: solid;\n    }\n\n    .v-file-picker-thumb {\n      border: 1px solid;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VFilePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VFilePicker/VFilePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A drop zone: a dashed rectangle taking files dragged onto it or chosen from a dialog, with\n * an optional list of what it holds. The v-model is a plain `File[]`, and the division of\n * labour matters — this component SHOWS and SCREENS, uploading is the parent's business.\n *\n * Four things need JS, each forced by the platform. A dialog opens ONLY from a real click on\n * a file input, and a `FileList` cannot be written from a template, so the input is a SOURCE\n * of files rather than a mirror of the value. `accept` has no say over a DROP. The input has\n * to be reset after every change, or the same file cannot be chosen twice running. And a\n * thumbnail needs an object URL, which then has to be released.\n *\n * The KEYBOARD is deliberately not among them: with the browse button hidden the zone\n * becomes a real `<button>`, so Enter, Space, focus, role and a disabled control's inertness\n * all come from the browser. The other incarnation, a plain container, exists for one reason\n * — a button inside a button is invalid markup and unusable by keyboard. The drag highlight,\n * the \"or\" separator and the side-by-side layout are CSS too.\n */\nimport { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { audio_file as audioFileIcon } from '../VIcon/icons/audio_file'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { cloud_upload as cloudUploadIcon } from '../VIcon/icons/cloud_upload'\nimport { code as codeIcon } from '../VIcon/icons/code'\nimport { description as descriptionIcon } from '../VIcon/icons/description'\nimport { folder_zip as folderZipIcon } from '../VIcon/icons/folder_zip'\nimport { image as imageIcon } from '../VIcon/icons/image'\nimport { picture_as_pdf as pictureAsPdfIcon } from '../VIcon/icons/picture_as_pdf'\nimport { table_chart as tableChartIcon } from '../VIcon/icons/table_chart'\nimport { video_file as videoFileIcon } from '../VIcon/icons/video_file'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { isDev } from '../../utils/env'\nimport { fileKey, formatBytes, type FileRejection } from '../../utils/file'\nimport { fileKind, type FilePickerKind } from './fileKind'\n\n/** What the `#browse` slot receives. */\nexport interface FilePickerBrowseSlotProps {\n  /** Opens the file dialog; a button of your own has no other way to. */\n  open: () => void\n  /** Whether the picker is disabled, for your button to follow. */\n  disabled: boolean\n}\n\n/** What the `#remove` slot receives. */\nexport interface FilePickerRemoveSlotProps {\n  /** The file the row stands for. */\n  file: File\n  /** Its position in the selection. */\n  index: number\n  /** Takes the file out of the selection, the only way to. */\n  remove: () => void\n  /** The ready-made accessible name of the control, the file's name included. */\n  removeLabel: string\n}\n\n/** Where the files taken are listed: under the zone, beside it, or nowhere. */\nexport type FilePickerPreview = false | 'bottom' | 'end'\n\n/**\n * Everything known about one row of the list. The same object is handed to both slots\n * that can replace part of a row, so the two can never be given different information.\n */\nexport interface FilePickerRow {\n  /** The file itself. */\n  file: File\n  /** Its position in the list. */\n  index: number\n  /** What kind of file it is, as worked out from its type or its extension. */\n  kind: FilePickerKind\n  /**\n   * The address of its image thumbnail, when there is one.\n   *\n   * It is absent on the server AND on the browser's first render, since those addresses\n   * only exist in a browser and creating them during the first render would make the two\n   * markups differ. It is absent as well for anything the browser fails to decode. Fall\n   * back to the icon in that case.\n   */\n  thumbnail: string | undefined\n  /** The icon standing for that kind of file, a consumer's override included. */\n  icon: IconSource\n  /** Its size, already written out in the reader's conventions. */\n  sizeText: string\n  /** Takes this file out of the list. */\n  remove: () => void\n}\n\ninterface FilePickerProps {\n  /**\n   * What the reader is being asked to drop, in one line. It is REQUIRED: a drop zone\n   * with no instruction is just a rectangle.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component\n   * itself, an accepted trade-off: a tooltip on a drop zone would be redundant anyway.\n   */\n  title: string\n  /** A second line under it, for the constraints in plain words: kinds, sizes, how many. */\n  subtitle?: string\n  /** The large icon at the top of the zone. */\n  icon?: IconSource\n  /**\n   * Hides the separator and the browse button under the instruction. That changes the\n   * zone's nature: it then becomes the control ITSELF, a real button, so Enter, Space\n   * and the focus come from the platform rather than from a container that merely\n   * reacts to clicks.\n   */\n  hideBrowse?: boolean\n  /**\n   * The wording drawn on the browse button, which is also its accessible name. It falls\n   * back to the design system dictionary.\n   */\n  browseText?: string\n  /**\n   * Where the files taken are listed: under the zone, or beside it. Beside folds back\n   * underneath when the COMPONENT is narrow, following the width it was given rather\n   * than the width of the window.\n   *\n   * By default nothing is listed at all: the value is there for a parent that wants to\n   * present it its own way.\n   */\n  preview?: FilePickerPreview\n  /**\n   * Shows the kind icon for every file in that list, images included: the way out when\n   * a list holds many images, or very large ones.\n   *\n   * Left out, an image is shown as a thumbnail: it is given a temporary address, created\n   * in the browser only and released as soon as the file leaves the list or the\n   * component goes away.\n   */\n  hideThumbnails?: boolean\n  /** Replaces the icon of one or more kinds of file. */\n  typeIcons?: Partial<Record<FilePickerKind, IconSource>>\n  /** The icon of the button removing a file from the list. */\n  removeIcon?: IconSource\n  /** Allows several files to be taken. 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   * DROPPED file, the attribute having no say over a drop.\n   */\n  accept?: string\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 taken at most. */\n  maxFiles?: number\n  /** Makes the zone unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was taken without allowing it to change: no dialog, no drop, no removal. Its\n   * buttons stay reachable from the keyboard, announced as unavailable.\n   */\n  readonly?: boolean\n  /**\n   * Marks the zone as invalid, which colours its outline and is announced on the control\n   * the reader reaches. It is for a rule of your own: nothing here is checked by the browser,\n   * the real input being hidden.\n   */\n  invalid?: boolean\n  /**\n   * Shows a spinner in place of the zone icon, typically while an upload is under way.\n   * It says that something is happening and changes nothing else: files can still be\n   * dropped and the dialog still opens. `disabled` and `readonly` are the props that cut\n   * those off.\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\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilePickerProps>(), {\n  subtitle: undefined,\n  icon: () => cloudUploadIcon,\n  hideBrowse: false,\n  browseText: undefined,\n  preview: false,\n  hideThumbnails: false,\n  typeIcons: undefined,\n  removeIcon: () => closeIcon,\n  multiple: false,\n  accept: undefined,\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  loading: false,\n  loadingText: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection, by adding or removing something. */\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, and which one. It exists alongside `change`, which only says\n   * what is LEFT: an upload already in flight is aborted from here, without having to\n   * compare two lists to find out what went.\n   */\n  remove: [file: File, index: number]\n}>()\n\ndefineSlots<{\n  /**\n   * The large icon, for an illustration the icon props cannot express.\n   *\n   * It must stay non-interactive, and so must the two below: with the browse button\n   * hidden, the zone IS a button, and nothing interactive may sit inside one.\n   */\n  icon?(): unknown\n  /** The instruction. Text and inline elements only, for the same reason. */\n  title?(): unknown\n  /** The second line. Same contract as the instruction. */\n  subtitle?(): unknown\n  /**\n   * The browse button. Call the `open` it receives: without it a button of your own\n   * could no longer open the file dialog at all.\n   */\n  browse?(props: FilePickerBrowseSlotProps): unknown\n  /**\n   * A WHOLE row of the list, the way out for a row showing its own upload progress. It\n   * receives everything the standard row was given, so nothing has to be worked out\n   * again.\n   */\n  item?(props: FilePickerRow): unknown\n  /**\n   * The square at the start of a row alone: for a thumbnail produced by your server, a\n   * video's poster frame, or a format the browser cannot decode.\n   */\n  thumbnail?(props: FilePickerRow): unknown\n  /**\n   * The control that removes a row. Two of the values it receives are not optional in\n   * practice: `remove` is the only thing that can take the file out, and `removeLabel` is\n   * the ready-made accessible name, the file's own included, without which the button\n   * would be announced as nothing at all.\n   */\n  remove?(props: FilePickerRemoveSlotProps): 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\nconst m = useMessages()\nconst locale = useLocale()\n\n/*\n * The hidden input, the sorting of the consumer's attributes, the single entry point into\n * the value and the removal of a file live in `useFileField`, shared with VFileInput.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the ZONE: that is\n * what they see, and what takes the focus once the browse button is hidden. Nothing is\n * pulled out of it, unlike in VFileInput — this component assembles no description of\n * its own.\n *\n * The zone becomes the control exactly when there is no browse button inside to be one,\n * which is what `hideBrowse` decides.\n */\nconst {\n  fileEl,\n  enabled: interactive,\n  nativeInputAttrs,\n  controlAttrs: zoneAttrs,\n  acceptFiles,\n  openPicker,\n  removeAt: removeFile,\n} = useFileField({\n  model,\n  props,\n  emit,\n  forwardedAttrs,\n  // @a11y @devwarn\n  // The name a consumer gives a plain container is ignored by assistive\n  // technology, and axe reports it, so this one fails SILENTLY at runtime too. Behind\n  // `isDev`, which a production build folds to false, so the message is dropped.\n  warnings: isDev\n    ? () => [\n        !props.hideBrowse &&\n          (attrs['aria-label'] !== undefined || attrs['aria-labelledby'] !== undefined) &&\n          'an aria-label on the zone is inert while the browse button is shown: the zone is a plain container then, and axe reports aria-prohibited-attr. Name the zone through `title`, or set `hide-browse` to make the zone itself the control.',\n      ]\n    : undefined,\n})\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLUListElement | null>(null)\nconst showList = computed(() => props.preview !== false && model.value.length > 0)\n\n/**\n * Which icon stands for which kind of file. A consumer overrides it entry by entry, so\n * replacing one icon does not mean restating the other seven.\n */\nconst KIND_ICONS: Record<FilePickerKind, IconSource> = {\n  image: imageIcon,\n  pdf: pictureAsPdfIcon,\n  audio: audioFileIcon,\n  video: videoFileIcon,\n  archive: folderZipIcon,\n  spreadsheet: tableChartIcon,\n  code: codeIcon,\n  file: descriptionIcon,\n}\n\nconst iconForKind = (kind: FilePickerKind): IconSource =>\n  props.typeIcons?.[kind] ?? KIND_ICONS[kind]\n\nfunction onZoneClick(event: MouseEvent) {\n  // The browse button already handles its own click, and that click also reaches the\n  // zone: without this guard it would open the dialog twice. The test is inert when the\n  // zone IS the button, there being nothing inside it to match.\n  if (!props.hideBrowse && (event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => interactive.value,\n  acceptFiles,\n)\n\n// @a11y\n/**\n * What can be focused in the zone, whichever shape it has taken: the zone itself when it\n * is the button, and otherwise the first button inside it.\n *\n * It is found by searching the DOM rather than kept as a reference, because a consumer\n * may have replaced the browse button entirely — theirs is not ours to hold a reference\n * to, and it still has to be reachable.\n */\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focusTarget(): HTMLElement | null {\n  const zone = zoneEl.value\n  if (!zone) return null\n  return zone.matches('button') ? zone : zone.querySelector('button')\n}\n\n// @a11y @core\n/**\n * Takes a file out of the list, and catches the focus that was on its remove button.\n *\n * That button disappears with its row, so the focus would fall back to the page body.\n * It is moved instead to the row that takes its place, or to the browse control once\n * the list is empty. Waiting for the next tick is what makes the new row findable: the\n * page still shows the old one at the moment the value is written.\n */\nasync function removeAt(index: number) {\n  if (!removeFile(index)) return\n\n  await nextTick()\n  const items = listEl.value?.querySelectorAll<HTMLElement>('.v-file-picker-item') ?? []\n  const next = items[Math.min(index, items.length - 1)]?.querySelector('button')\n  ;(next ?? focusTarget())?.focus()\n}\n\n/**\n * One temporary address per image, kept against THE FILE OBJECT ITSELF.\n *\n * Using the file as the key is safe, and that is worth knowing: Vue's reactivity only\n * wraps plain objects, arrays and collections, so a File travelling through the value\n * comes back with its identity intact — the exact opposite of VCombobox's option cache,\n * where comparing identities IS the bug. Keying by name would be wrong here: two files\n * picked from different folders can share one.\n *\n * The map is made reactive rather than held in a plain reference, which is what lets a\n * single row re-render when its address is ready, instead of replacing the whole map.\n */\nconst thumbUrls = reactive(new Map<File, string>())\n\n/**\n * Whether a thumbnail can be drawn at all, decided on the type the BROWSER reports and\n * not on the kind derived from the extension. A `.heic` file counts as an image and\n * deserves the image icon, but no engine will decode it.\n */\nconst isThumbable = (file: File) => file.type.startsWith('image/')\n\n// @ssr @core\n/**\n * Brings the map into line with the list: releases the addresses of files that have\n * gone, and creates them for files that have arrived.\n *\n * TRAP — it is never called from setup, from a derived value or during rendering, only\n * once mounted, from a watcher and from handlers. That is what keeps the component\n * renderable on a server: the server draws the kind icon, and so does the browser's\n * first render, the map being empty until then — the same reasoning as today's date in\n * VDatePicker.\n */\nfunction syncThumbnails() {\n  // With no list rendered there is nothing to draw a thumbnail in, so no address is\n  // created at all. This gate — and not a warning — is what makes the default\n  // configuration cost strictly nothing.\n  const wanted = new Set(\n    !props.hideThumbnails && props.preview !== false\n      ? model.value.filter((file) => isThumbable(file) && !undecodable.has(file))\n      : [],\n  )\n\n  for (const [file, url] of thumbUrls) {\n    if (wanted.has(file)) continue\n    URL.revokeObjectURL(url)\n    thumbUrls.delete(file)\n  }\n  for (const file of wanted) {\n    if (!thumbUrls.has(file)) thumbUrls.set(file, URL.createObjectURL(file))\n  }\n}\n\n// @fallback\n/**\n * The image failed to decode — a format the browser does not read, a corrupt file, a\n * type that lied about itself. The address is released and the kind icon takes over: a\n * failure to draw must never leave an empty square in the list.\n */\nfunction dropThumbnail(file: File) {\n  const url = thumbUrls.get(file)\n  if (!url) return\n  URL.revokeObjectURL(url)\n  thumbUrls.delete(file)\n  undecodable.add(file)\n}\n\n/**\n * The files whose image failed once. They are still in the selection, so without this\n * `syncThumbnails` would hand each of them a new address on every change of the list, only\n * for the `<img>` to fail again. Weak, so a file that leaves takes its entry with it.\n */\nconst undecodable = new WeakSet<File>()\n\n// @ssr\n// The addresses are created in the browser only; the server and the browser's\n// first render both show the kind icon, so the two markups agree.\nonMounted(syncThumbnails)\n/*\n * Watching deeply costs nothing here and covers a consumer who ADDS to the list rather\n * than replacing it: the walk stops at a File, which is neither a plain object nor a\n * collection, so it never descends past the array itself.\n */\nwatch([model, () => props.hideThumbnails, () => props.preview], syncThumbnails, { deep: true })\n// Released BEFORE the component is torn down and never after — the same rule `useTimer`\n// and VHotkeys follow.\nonBeforeUnmount(() => {\n  for (const url of thumbUrls.values()) URL.revokeObjectURL(url)\n  thumbUrls.clear()\n})\n\n/**\n * Everything each row of the list needs, assembled in one place and once per change of the\n * list, the language, the icons or a thumbnail — not once per render. A drag over the zone\n * re-renders the component at the pointer's rate, and the rows would otherwise work out\n * their kind and their size again every time, for every slot that reads them.\n *\n * A Vue template has no way of declaring a reusable fragment, so this is also what keeps\n * the slots that can replace part of a row fed from a single source.\n */\nconst rows = computed<{ key: number; row: FilePickerRow; removeLabel: string }[]>(() =>\n  showList.value\n    ? model.value.map((file, index) => {\n        const kind = fileKind(file)\n        return {\n          key: fileKey(file),\n          row: {\n            file,\n            index,\n            kind,\n            thumbnail: thumbUrls.get(file),\n            icon: iconForKind(kind),\n            sizeText: formatBytes(file.size, locale.value),\n            remove: () => removeAt(index),\n          },\n          removeLabel: m.value.common.remove(file.name),\n        }\n      })\n    : [],\n)\n\ndefineExpose({\n  /** Moves the focus to the browse control: the button, or the zone when it is one. */\n  focus: (options?: FocusOptions) => focusTarget()?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did, a\n   * click or a key press: browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n  /**\n   * The zone's own box, for what neither of the two above covers. It is the wrapper and\n   * 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-picker\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-preview=\"preview || undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"invalid ? '' : 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-picker-native v-hidden-input\" />\n\n    <!-- TRAP — this wrapper is not decoration. The root is what the layout asks about\n         its own width, and an element cannot ask about ITSELF: whatever flips has to be\n         a descendant of it. Deleting this element makes the side-by-side layout\n         silently stop folding, with no error anywhere. -->\n    <div class=\"v-file-picker-body\">\n      <!-- A real button as soon as the zone IS the control: the role, Enter, Space, the\n           focus and the complete inertness of a disabled control then come from the\n           platform. A plain container otherwise — a button inside a button is invalid\n           markup, and unreachable by keyboard. -->\n      <component\n        :is=\"hideBrowse ? 'button' : 'div'\"\n        ref=\"zoneEl\"\n        :aria-invalid=\"hideBrowse && invalid ? 'true' : undefined\"\n        :aria-disabled=\"hideBrowse && readonly ? 'true' : undefined\"\n        v-bind=\"zoneAttrs\"\n        class=\"v-file-picker-zone\"\n        :type=\"hideBrowse ? 'button' : undefined\"\n        :disabled=\"hideBrowse && disabled ? true : undefined\"\n        @click=\"onZoneClick\"\n      >\n        <span class=\"v-file-picker-icon\">\n          <slot name=\"icon\">\n            <VSpinner v-if=\"loading\" :label=\"loadingText\" />\n            <VIcon v-else v-bind=\"iconProps(icon)\" />\n          </slot>\n        </span>\n\n        <!-- Rendered as a span in BOTH shapes: a paragraph is not allowed inside a\n             button, and the markup must not change form between the two — one shape\n             means one set of CSS rules. -->\n        <VTypography as=\"span\" variant=\"subtitle\" class=\"v-file-picker-title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </VTypography>\n\n        <VTypography\n          v-if=\"subtitle || $slots.subtitle\"\n          as=\"span\"\n          variant=\"body-sm\"\n          class=\"v-file-picker-subtitle\"\n        >\n          <slot name=\"subtitle\">{{ subtitle }}</slot>\n        </VTypography>\n\n        <template v-if=\"!hideBrowse\">\n          <!-- Deliberately not hidden from screen readers: \"or\" is real text, and it\n               reads naturally between the instruction and the button. The two rules on\n               either side of it are pseudo-elements, and therefore decorative by\n               construction. -->\n          <span class=\"v-file-picker-separator\">{{ m.filePicker.or }}</span>\n\n          <slot name=\"browse\" :open=\"openPicker\" :disabled=\"!interactive\">\n            <!-- Read-only leaves it reachable, as every read-only control of the design\n                 system is: unavailable rather than disabled. The invalid state is said on\n                 it, the control the reader reaches, the zone being a plain container. -->\n            <VButton\n              class=\"v-file-picker-browse\"\n              variant=\"outline\"\n              tone=\"neutral\"\n              :disabled=\"disabled\"\n              :aria-disabled=\"readonly ? 'true' : undefined\"\n              :aria-invalid=\"invalid ? 'true' : undefined\"\n              @click=\"openPicker\"\n            >\n              {{ browseText ?? m.filePicker.browse }}\n            </VButton>\n          </slot>\n        </template>\n      </component>\n\n      <ul v-if=\"showList\" ref=\"listEl\" class=\"v-file-picker-list\" :aria-label=\"m.filePicker.list\">\n        <li v-for=\"{ key, row, removeLabel } in rows\" :key=\"key\" class=\"v-file-picker-item\">\n          <slot name=\"item\" v-bind=\"row\">\n            <span class=\"v-file-picker-thumb\">\n              <slot name=\"thumbnail\" v-bind=\"row\">\n                <img\n                  v-if=\"row.thumbnail\"\n                  class=\"v-file-picker-image\"\n                  :src=\"row.thumbnail\"\n                  alt=\"\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  @error=\"dropThumbnail(row.file)\"\n                />\n                <VIcon v-else v-bind=\"iconProps(row.icon)\" />\n              </slot>\n            </span>\n\n            <span class=\"v-file-picker-info\">\n              <span class=\"v-file-picker-name\" :title=\"row.file.name\">{{ row.file.name }}</span>\n              <span class=\"v-file-picker-size\">{{ row.sizeText }}</span>\n            </span>\n\n            <slot\n              name=\"remove\"\n              :file=\"row.file\"\n              :index=\"row.index\"\n              :remove=\"row.remove\"\n              :remove-label=\"removeLabel\"\n            >\n              <VIconButton\n                class=\"v-file-picker-remove\"\n                size=\"sm\"\n                :icon=\"removeIcon\"\n                :label=\"removeLabel\"\n                :disabled=\"!interactive\"\n                @click=\"row.remove\"\n              />\n            </slot>\n          </slot>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* These variables carry the component's name for a reason: they INHERIT, so a bare\n     `--bg` or `--border-color` set by the host application on any ancestor would be\n     picked up here instead — and nothing would catch it, since the unit tests evaluate\n     no styles at all.\n\n     They are declared on the ROOT so that the drag, disabled and read-only states each\n     redefine them in ONE place, which is what makes those states structurally incapable\n     of disagreeing with hover or focus. */\n  .v-file-picker {\n    --file-picker-border-color: var(--vectis-color-border-strong);\n    --file-picker-bg: var(--vectis-color-surface-sunken);\n    --file-picker-text: var(--vectis-color-text);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-raised);\n    --file-picker-thumb-bg: var(--vectis-color-surface-muted);\n\n    /* Positioned so the hidden file input, which has no size at all, has something to be\n       placed against. */\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-file-picker-body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n  }\n\n  /* One set of rules serves both shapes the zone can take. All that has to be undone is\n     what the browser gives a button — its own appearance, font and margin — since\n     everything else is declared here regardless. The full width is part of that: a\n     button shrinks to fit its content, where a container does not. */\n  .v-file-picker-zone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    inline-size: 100%;\n    min-block-size: var(--vectis-control-size-file-picker-min-block);\n    margin: 0;\n    padding: var(--vectis-space-6) var(--vectis-space-4);\n    appearance: none;\n    border: 1px dashed var(--file-picker-border-color);\n    border-radius: var(--vectis-radius-surface);\n    background: var(--file-picker-bg);\n    color: var(--file-picker-text);\n    font: inherit;\n    text-align: center;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone {\n    cursor: pointer;\n  }\n\n  /* Not over an invalid zone: at (0,5,0) this rule outranks the invalid one below, and the\n     pointer would paint the accent over the one cue that says something is wrong. */\n  .v-file-picker:not([data-disabled]):not([data-readonly]):not([data-invalid])\n    .v-file-picker-zone:hover {\n    --file-picker-border-color: var(--vectis-color-accent);\n  }\n\n  /* Invalid redefines the variable the zone paints its outline with, the way the drag\n     highlight does: the states can then never disagree about what colour the border is. */\n  .v-file-picker[data-invalid] .v-file-picker-zone {\n    --file-picker-border-color: var(--vectis-color-danger);\n  }\n\n  .v-file-picker-zone:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* While a file is being dragged over it, the zone is highlighted by redefining the\n     very variables it paints itself with — so the highlight cannot disagree with the\n     hover and focus states. */\n  .v-file-picker[data-dragging] {\n    --file-picker-border-color: var(--vectis-color-accent);\n    --file-picker-bg: var(--vectis-color-accent-surface);\n  }\n\n  /* The large icon's size is set HERE, on its own wrapper, and never on the zone: set\n     there it would inherit down and enlarge the browse button's icons as well. */\n  .v-file-picker-icon {\n    --vectis-icon-size: var(--vectis-control-size-file-picker-icon);\n\n    /* The wrapper is floored at the icon's own size, whatever it holds. An illustration of\n       your own in the `#icon` slot may be drawn smaller than the icon, and without that\n       floor the zone would change height with it — the box has to be the icon's even when\n       its content is not. A floor and not a fixed size, so a taller one still grows it\n       rather than spilling out of it; the centring is what keeps a smaller content in the\n       middle of the box instead of at its start. */\n    min-inline-size: var(--vectis-control-size-file-picker-icon);\n    min-block-size: var(--vectis-control-size-file-picker-icon);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--file-picker-text-muted);\n  }\n\n  /* The spinner standing in for the icon while loading takes the icon's box, the way it\n     does in every field: a spinner's size is the box it occupies, and the icon size is\n     set on this wrapper. */\n  .v-file-picker-icon > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  .v-file-picker-subtitle {\n    /* Set through VTypography's own colour variable rather than with a plain colour:\n       there is then a single source, and the disabled state below overrides that same\n       one instead of introducing a second. */\n    --typography-color: var(--file-picker-text-muted);\n  }\n\n  /* The word set between two rules, entirely in CSS: the two lines are pseudo-elements\n     sharing the row with the text between them. No extra element is added to the markup,\n     and nothing decorative reaches the accessibility tree. */\n  .v-file-picker-separator {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    inline-size: 100%;\n    margin-block-start: var(--vectis-space-2);\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n  }\n\n  .v-file-picker-separator::before,\n  .v-file-picker-separator::after {\n    content: '';\n    flex: 1 1 0;\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-file-picker-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .v-file-picker-item {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-2);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-row-bg);\n  }\n\n  .v-file-picker-thumb {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-file-picker-thumb);\n    block-size: var(--vectis-control-size-file-picker-thumb);\n    overflow: hidden;\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-thumb-bg);\n    color: var(--file-picker-text-muted);\n  }\n\n  .v-file-picker-image {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  /* The zero minimum is what makes the ellipsis below possible at all: a flex item\n     refuses by default to shrink below its own content, so without it a long file name\n     would widen the row instead of being cut short. */\n  .v-file-picker-info {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-inline-size: 0;\n    color: var(--file-picker-text);\n  }\n\n  .v-file-picker-name {\n    overflow: hidden;\n    font-size: var(--vectis-text-body-sm-size);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* Figures of equal width, so the sizes line up down the column instead of wobbling.\n     That is not a typographic role, so it stays a local rule — the same reasoning as\n     VFileInput's counter. */\n  .v-file-picker-size {\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Making the component a query container is reserved for the side-by-side layout,\n   * since only its rule below depends on it — and it is not free.\n   *\n   * A container of this kind computes its width WITHOUT looking at its content, so the\n   * component would lose its natural width inside an automatically sized grid column or\n   * an inline box. In the two other layouts it keeps it.\n   */\n  .v-file-picker[data-preview='end'] {\n    container-type: inline-size;\n    container-name: v-file-picker;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-body {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-zone,\n  .v-file-picker[data-preview='end'] .v-file-picker-list {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The threshold is written as a literal length, a container query accepting no\n   * variables. It is the width NEEDED to hold the two columns side by side, and not what\n   * is left once they fold: the zone stops being readable below about 18rem — its\n   * instruction wraps onto two lines and the button follows — a row needs about 15rem to\n   * show a thumbnail, a name worth reading and its remove button, and there is a gutter\n   * between them.\n   */\n  @container v-file-picker (max-width: 34rem) {\n    .v-file-picker[data-preview='end'] .v-file-picker-body {\n      flex-direction: column;\n    }\n  }\n\n  /* A disabled zone greys out through the colour tokens and never through opacity.\n\n     The pairing used is the design system's own for a disabled surface, exactly as\n     VInput sets it: a lighter text would look more convincingly disabled, and would fall\n     below the required contrast against that background — which the accessibility checks\n     refuse.\n\n     Both text variables take the SAME value here, so that the secondary line does not\n     sink below the title on a surface that is already dimmed. */\n  .v-file-picker[data-disabled] {\n    --file-picker-border-color: var(--vectis-color-border);\n    --file-picker-bg: var(--vectis-color-surface-muted);\n    --file-picker-text: var(--vectis-color-text-muted);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-muted);\n  }\n\n  .v-file-picker[data-readonly] {\n    --file-picker-border-color: var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-file-picker-zone {\n      transition: none;\n    }\n  }\n\n  /*\n   * Under Windows forced colours the backgrounds are dropped and every border colour is\n   * replaced, so the drag highlight — which is nothing but colour — would disappear\n   * entirely. A change of border STYLE survives that: the dashed outline becomes solid\n   * for as long as a file hovers over the zone.\n   */\n  @media (forced-colors: active) {\n    .v-file-picker[data-dragging] .v-file-picker-zone {\n      border-style: solid;\n    }\n\n    .v-file-picker-thumb {\n      border: 1px solid;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}