@vielzeug/refine 1.5.3 → 1.7.0

package/dist/inputs/file-input/file-input-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-upload.d.ts","sourceRoot":"","sources":["../../../src/inputs/file-input/file-input-upload.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAMhE,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,KAAG,MAQ3C,CAAC;AAUF;gEACgE;AAChE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC;AAE1E;iGACiG;AACjG,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAcF;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,YAAY,GAAG,CACzB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE;IAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,KAClG,OAAO,CAAC,IAAI,CAAC,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACrE,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACxD,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,eAAe,CAAC;IACvC,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpD;;;;yCAIqC;IACrC,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC1E,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAC9B,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CAwNpE"}

package/dist/inputs/file-input/file-input-upload.js

@@ -0,0 +1,145 @@
+import { announce as e } from "../../headless/announcer.js";
+import { signal as t, watch as n } from "@vielzeug/ripple";
+import { matchesAccept as r } from "@vielzeug/dnd";
+//#region src/inputs/file-input/file-input-upload.ts
+var i = (e) => {
+	if (e === 0) return "0 B";
+	let t = 1024, n = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	], r = Math.floor(Math.log(e) / Math.log(t));
+	return `${parseFloat((e / t ** r).toFixed(1))} ${n[r]}`;
+}, a = (e, t) => !t || e.size <= t, o = (e) => e > 0 ? `${i(e)}/s` : "", s = (e) => e ? e.split(",").map((e) => e.trim()) : [], c = {
+	error: null,
+	loaded: 0,
+	speedBps: 0,
+	status: "idle"
+}, l = (e) => {
+	if (e.speedBps <= 0 || e.status !== "uploading") return "";
+	let t = Math.max(0, Math.round((e.total - e.loaded) / e.speedBps));
+	return t < 60 ? `${t}s left` : `${Math.round(t / 60)}m left`;
+};
+function u(i) {
+	let u = t([]), d = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+	function p(e) {
+		let n = d.get(e);
+		return n || (n = t({
+			...c,
+			total: e.size
+		}), d.set(e, n)), n;
+	}
+	function m(e) {
+		return p(e).value;
+	}
+	function h(e, t) {
+		let n = p(e);
+		n.value = {
+			...n.value,
+			...t
+		};
+	}
+	function g(t, n = 0) {
+		if (i.disabled.value) return;
+		let r = i.upload.value;
+		if (!r) return;
+		f.get(t)?.abort();
+		let a = new AbortController();
+		f.set(t, a), h(t, {
+			error: null,
+			loaded: n,
+			speedBps: 0,
+			status: "uploading",
+			total: t.size
+		});
+		let o = performance.now(), s = n;
+		r(t, {
+			onProgress: (e, n) => {
+				if (a.signal.aborted) return;
+				let r = performance.now(), c = (r - o) / 1e3, l = c > 0 ? Math.max(0, (e - s) / c) : 0, u = m(t).speedBps, d = u > 0 ? u * .7 + l * .3 : l;
+				o = r, s = e, h(t, {
+					loaded: e,
+					speedBps: d,
+					total: n || t.size
+				}), i.onUploadProgress(t, e, n || t.size);
+			},
+			resumeFrom: n,
+			signal: a.signal
+		}).then(() => {
+			a.signal.aborted || (h(t, {
+				loaded: t.size,
+				speedBps: 0,
+				status: "success"
+			}), e(`${t.name} uploaded successfully.`), i.onUploadSuccess(t));
+		}).catch((n) => {
+			if (a.signal.aborted) return;
+			let r = n instanceof Error ? n.message : String(n);
+			h(t, {
+				error: r,
+				speedBps: 0,
+				status: "error"
+			}), e(`${t.name} failed to upload: ${r}`, { politeness: "assertive" }), i.onUploadError(t, n);
+		});
+	}
+	function _(e) {
+		i.disabled.value || g(e, m(e).loaded);
+	}
+	function v(e) {
+		let t = new Set(e);
+		for (let e of d.keys()) t.has(e) || (f.get(e)?.abort(), f.delete(e), d.delete(e));
+	}
+	let y = n(u, v);
+	function b(e, t) {
+		if (i.disabled.value) return;
+		let n = i.multiple.value, o = Array.from(e);
+		n || (o = o.slice(0, 1));
+		let c = s(i.accept.value), l = i.maxSize.value;
+		o = o.filter((e) => r(e, c) && a(e, l));
+		let d = n ? [...u.value] : [], f = [];
+		for (let e of o) d.includes(e) || (d.push(e), f.push(e));
+		let p = i.maxFiles.value;
+		p > 0 && d.length > p && (d = d.slice(0, p)), u.value = d, i.onChange(u.value, t);
+		for (let e of f) u.value.includes(e) && g(e);
+	}
+	function x(e, t) {
+		i.disabled.value || (u.value = u.value.filter((t) => t !== e), i.onRemove(e, u.value, t), i.onChange(u.value, t));
+	}
+	function S(e, t, n) {
+		return i.disabled.value || !r(t, s(i.accept.value)) || !a(t, i.maxSize.value) ? !1 : (u.value = u.value.map((n) => n === e ? t : n), i.onRemove(e, u.value, n), i.onChange(u.value, n), g(t), !0);
+	}
+	function C(e) {
+		let t = m(e);
+		return t.total <= 0 ? 0 : Math.min(100, Math.round(t.loaded / t.total * 100));
+	}
+	function w(e) {
+		let t = m(e);
+		return [o(t.speedBps), l(t)].filter(Boolean).join(" · ");
+	}
+	function T(e) {
+		let t = m(e).status;
+		return t === "success" ? "check" : t === "error" ? "alert-circle" : "file";
+	}
+	function E() {
+		y.dispose();
+		for (let e of f.values()) e.abort();
+		f.clear(), d.clear();
+	}
+	return {
+		addFiles: b,
+		dispose: E,
+		files: u,
+		fileState: m,
+		removeFile: x,
+		replaceFile: S,
+		retryUpload: _,
+		statusIconName: T,
+		uploadMetaText: w,
+		uploadPercent: C
+	};
+}
+//#endregion
+export { u as createFileQueue, i as formatBytes };
+
+//# sourceMappingURL=file-input-upload.js.map

package/dist/inputs/file-input/file-input-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-upload.js","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../headless';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n  error: string | null;\n  loaded: number;\n  speedBps: number;\n  status: FileUploadStatus;\n  total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n  if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n  const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n  if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n  return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n  file: File,\n  ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n  accept: Readable<string | undefined>;\n  disabled: Readable<boolean>;\n  maxFiles: Readable<number>;\n  maxSize: Readable<number>;\n  multiple: Readable<boolean>;\n  onChange: (files: File[], originalEvent?: Event) => void;\n  onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n  onUploadError: (file: File, error: unknown) => void;\n  onUploadProgress: (file: File, loaded: number, total: number) => void;\n  onUploadSuccess: (file: File) => void;\n  upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n  addFiles(newFiles: File[], originalEvent?: Event): void;\n  dispose(): void;\n  readonly files: Readable<File[]>;\n  fileState(file: File): FileUploadState;\n  removeFile(file: File, originalEvent?: Event): void;\n  /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n   * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n   * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n   * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n   * hear that the old file is gone. */\n  replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n  retryUpload(file: File): void;\n  statusIconName(file: File): string;\n  uploadMetaText(file: File): string;\n  uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n  const files = signal<File[]>([]);\n  const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n  const controllers = new Map<File, AbortController>();\n\n  function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n    let s = stateSignals.get(file);\n\n    if (!s) {\n      s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n      stateSignals.set(file, s);\n    }\n\n    return s;\n  }\n\n  function fileState(file: File): FileUploadState {\n    return stateSignal(file).value;\n  }\n\n  function patchState(file: File, patch: Partial<FileUploadState>): void {\n    const s = stateSignal(file);\n\n    s.value = { ...s.value, ...patch };\n  }\n\n  // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n  // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n  function startUpload(file: File, resumeFrom = 0): void {\n    if (options.disabled.value) return;\n\n    const uploadFn = options.upload.value;\n\n    if (!uploadFn) return;\n\n    controllers.get(file)?.abort();\n\n    const controller = new AbortController();\n\n    controllers.set(file, controller);\n    patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n    // Rolling (exponential-moving-average) speed estimate rather than a naive\n    // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n    // *current* rate right after a slow start or a mid-transfer stall.\n    let lastSampleAt = performance.now();\n    let lastSampleLoaded = resumeFrom;\n\n    uploadFn(file, {\n      onProgress: (loaded, total) => {\n        if (controller.signal.aborted) return;\n\n        const now = performance.now();\n        const elapsedSeconds = (now - lastSampleAt) / 1000;\n        const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n        const previousBps = fileState(file).speedBps;\n        const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n        lastSampleAt = now;\n        lastSampleLoaded = loaded;\n        patchState(file, { loaded, speedBps, total: total || file.size });\n        options.onUploadProgress(file, loaded, total || file.size);\n      },\n      resumeFrom,\n      signal: controller.signal,\n    })\n      .then(() => {\n        if (controller.signal.aborted) return;\n\n        patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n        announce(`${file.name} uploaded successfully.`);\n        options.onUploadSuccess(file);\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n\n        const message = error instanceof Error ? error.message : String(error);\n\n        patchState(file, { error: message, speedBps: 0, status: 'error' });\n        announce(`${file.name} failed to upload: ${message}`, { politeness: 'assertive' });\n        options.onUploadError(file, error);\n      });\n  }\n\n  // Resumes from the last byte offset this file actually reached, not from 0 — see\n  // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n  // consumer-supplied.\n  function retryUpload(file: File): void {\n    if (options.disabled.value) return;\n\n    startUpload(file, fileState(file).loaded);\n  }\n\n  // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n  // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n  // for another. One cleanup path instead of duplicating it at every call site that can shrink\n  // `files`.\n  function dropOrphanedState(activeFiles: File[]): void {\n    const keep = new Set(activeFiles);\n\n    for (const file of stateSignals.keys()) {\n      if (keep.has(file)) continue;\n\n      controllers.get(file)?.abort();\n      controllers.delete(file);\n      stateSignals.delete(file);\n    }\n  }\n\n  const filesWatch = watch(files, dropOrphanedState);\n\n  function addFiles(newFiles: File[], originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    const isMultiple = options.multiple.value;\n    let incoming = Array.from(newFiles);\n\n    if (!isMultiple) incoming = incoming.slice(0, 1);\n\n    const acceptList = parseAccept(options.accept.value);\n    const maxSize = options.maxSize.value;\n\n    incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n    let updated: File[] = isMultiple ? [...files.value] : [];\n    const added: File[] = [];\n\n    for (const f of incoming) {\n      if (!updated.includes(f)) {\n        updated.push(f);\n        added.push(f);\n      }\n    }\n\n    const maxFiles = options.maxFiles.value;\n\n    if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n    files.value = updated;\n    options.onChange(files.value, originalEvent);\n\n    for (const f of added) {\n      if (files.value.includes(f)) startUpload(f);\n    }\n  }\n\n  function removeFile(file: File, originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    files.value = files.value.filter((f) => f !== file);\n    options.onRemove(file, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n  }\n\n  function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n    if (options.disabled.value) return false;\n\n    const acceptList = parseAccept(options.accept.value);\n\n    if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n    files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n    options.onRemove(oldFile, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n    startUpload(newFile);\n\n    return true;\n  }\n\n  function uploadPercent(file: File): number {\n    const state = fileState(file);\n\n    if (state.total <= 0) return 0;\n\n    return Math.min(100, Math.round((state.loaded / state.total) * 100));\n  }\n\n  // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n  // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n  function uploadMetaText(file: File): string {\n    const state = fileState(file);\n\n    return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n  }\n\n  function statusIconName(file: File): string {\n    const status = fileState(file).status;\n\n    if (status === 'success') return 'check';\n\n    if (status === 'error') return 'alert-circle';\n\n    return 'file';\n  }\n\n  function dispose(): void {\n    filesWatch.dispose();\n\n    for (const controller of controllers.values()) controller.abort();\n\n    controllers.clear();\n    stateSignals.clear();\n  }\n\n  return {\n    addFiles,\n    dispose,\n    files,\n    fileState,\n    removeFile,\n    replaceFile,\n    retryUpload,\n    statusIconName,\n    uploadMetaText,\n    uploadPercent,\n  };\n}\n"],"mappings":";;;;AAOA,IAAa,KAAe,MAA0B;CACpD,IAAI,MAAU,GAAG,OAAO;CAExB,IAAM,IAAI,MACJ,IAAQ;EAAC;EAAK;EAAM;EAAM;EAAM;CAAI,GACpC,IAAI,KAAK,MAAM,KAAK,IAAI,CAAK,IAAI,KAAK,IAAI,CAAC,CAAC;CAElD,OAAO,GAAG,YAAY,IAAiB,KAAG,EAAC,CAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAM;AACrE,GAEM,KAAqB,GAAY,MAA6B,CAAC,KAAW,EAAK,QAAQ,GAEvF,KAAe,MAAoC,IAAiB,IAAI,GAAG,EAAY,CAAc,EAAE,MAAM,IAE7G,KAAe,MAA0C,IAAS,EAAO,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,GAkB5G,IAAoD;CAAE,OAAO;CAAM,QAAQ;CAAG,UAAU;CAAG,QAAQ;AAAO,GAE1G,KAAa,MAAmC;CACpD,IAAI,EAAM,YAAY,KAAK,EAAM,WAAW,aAAa,OAAO;CAEhE,IAAM,IAAmB,KAAK,IAAI,GAAG,KAAK,OAAO,EAAM,QAAQ,EAAM,UAAU,EAAM,QAAQ,CAAC;CAI9F,OAFI,IAAmB,KAAW,GAAG,EAAiB,UAE/C,GAAG,KAAK,MAAM,IAAmB,EAAE,EAAE;AAC9C;AAkEA,SAAgB,EAAgB,GAAsC;CACpE,IAAM,IAAQ,EAAe,CAAC,CAAC,GACzB,oBAAe,IAAI,IAAsD,GACzE,oBAAc,IAAI,IAA2B;CAEnD,SAAS,EAAY,GAAwD;EAC3E,IAAI,IAAI,EAAa,IAAI,CAAI;EAO7B,OALK,MACH,IAAI,EAAwB;GAAE,GAAG;GAAmB,OAAO,EAAK;EAAK,CAAC,GACtE,EAAa,IAAI,GAAM,CAAC,IAGnB;CACT;CAEA,SAAS,EAAU,GAA6B;EAC9C,OAAO,EAAY,CAAI,CAAC,CAAC;CAC3B;CAEA,SAAS,EAAW,GAAY,GAAuC;EACrE,IAAM,IAAI,EAAY,CAAI;EAE1B,EAAE,QAAQ;GAAE,GAAG,EAAE;GAAO,GAAG;EAAM;CACnC;CAIA,SAAS,EAAY,GAAY,IAAa,GAAS;EACrD,IAAI,EAAQ,SAAS,OAAO;EAE5B,IAAM,IAAW,EAAQ,OAAO;EAEhC,IAAI,CAAC,GAAU;EAEf,EAAY,IAAI,CAAI,CAAC,EAAE,MAAM;EAE7B,IAAM,IAAa,IAAI,gBAAgB;EAGvC,AADA,EAAY,IAAI,GAAM,CAAU,GAChC,EAAW,GAAM;GAAE,OAAO;GAAM,QAAQ;GAAY,UAAU;GAAG,QAAQ;GAAa,OAAO,EAAK;EAAK,CAAC;EAKxG,IAAI,IAAe,YAAY,IAAI,GAC/B,IAAmB;EAEvB,EAAS,GAAM;GACb,aAAa,GAAQ,MAAU;IAC7B,IAAI,EAAW,OAAO,SAAS;IAE/B,IAAM,IAAM,YAAY,IAAI,GACtB,KAAkB,IAAM,KAAgB,KACxC,IAAa,IAAiB,IAAI,KAAK,IAAI,IAAI,IAAS,KAAoB,CAAc,IAAI,GAC9F,IAAc,EAAU,CAAI,CAAC,CAAC,UAC9B,IAAW,IAAc,IAAI,IAAc,KAAM,IAAa,KAAM;IAK1E,AAHA,IAAe,GACf,IAAmB,GACnB,EAAW,GAAM;KAAE;KAAQ;KAAU,OAAO,KAAS,EAAK;IAAK,CAAC,GAChE,EAAQ,iBAAiB,GAAM,GAAQ,KAAS,EAAK,IAAI;GAC3D;GACA;GACA,QAAQ,EAAW;EACrB,CAAC,CAAC,CACC,WAAW;GACN,EAAW,OAAO,YAEtB,EAAW,GAAM;IAAE,QAAQ,EAAK;IAAM,UAAU;IAAG,QAAQ;GAAU,CAAC,GACtE,EAAS,GAAG,EAAK,KAAK,wBAAwB,GAC9C,EAAQ,gBAAgB,CAAI;EAC9B,CAAC,CAAC,CACD,OAAO,MAAmB;GACzB,IAAI,EAAW,OAAO,SAAS;GAE/B,IAAM,IAAU,aAAiB,QAAQ,EAAM,UAAU,OAAO,CAAK;GAIrE,AAFA,EAAW,GAAM;IAAE,OAAO;IAAS,UAAU;IAAG,QAAQ;GAAQ,CAAC,GACjE,EAAS,GAAG,EAAK,KAAK,qBAAqB,KAAW,EAAE,YAAY,YAAY,CAAC,GACjF,EAAQ,cAAc,GAAM,CAAK;EACnC,CAAC;CACL;CAKA,SAAS,EAAY,GAAkB;EACjC,EAAQ,SAAS,SAErB,EAAY,GAAM,EAAU,CAAI,CAAC,CAAC,MAAM;CAC1C;CAMA,SAAS,EAAkB,GAA2B;EACpD,IAAM,IAAO,IAAI,IAAI,CAAW;EAEhC,KAAK,IAAM,KAAQ,EAAa,KAAK,GAC/B,EAAK,IAAI,CAAI,MAEjB,EAAY,IAAI,CAAI,CAAC,EAAE,MAAM,GAC7B,EAAY,OAAO,CAAI,GACvB,EAAa,OAAO,CAAI;CAE5B;CAEA,IAAM,IAAa,EAAM,GAAO,CAAiB;CAEjD,SAAS,EAAS,GAAkB,GAA6B;EAC/D,IAAI,EAAQ,SAAS,OAAO;EAE5B,IAAM,IAAa,EAAQ,SAAS,OAChC,IAAW,MAAM,KAAK,CAAQ;EAElC,AAAK,MAAY,IAAW,EAAS,MAAM,GAAG,CAAC;EAE/C,IAAM,IAAa,EAAY,EAAQ,OAAO,KAAK,GAC7C,IAAU,EAAQ,QAAQ;EAEhC,IAAW,EAAS,QAAQ,MAAM,EAAc,GAAG,CAAU,KAAK,EAAkB,GAAG,CAAO,CAAC;EAE/F,IAAI,IAAkB,IAAa,CAAC,GAAG,EAAM,KAAK,IAAI,CAAC,GACjD,IAAgB,CAAC;EAEvB,KAAK,IAAM,KAAK,GACd,AAAK,EAAQ,SAAS,CAAC,MACrB,EAAQ,KAAK,CAAC,GACd,EAAM,KAAK,CAAC;EAIhB,IAAM,IAAW,EAAQ,SAAS;EAKlC,AAHI,IAAW,KAAK,EAAQ,SAAS,MAAU,IAAU,EAAQ,MAAM,GAAG,CAAQ,IAElF,EAAM,QAAQ,GACd,EAAQ,SAAS,EAAM,OAAO,CAAa;EAE3C,KAAK,IAAM,KAAK,GACd,AAAI,EAAM,MAAM,SAAS,CAAC,KAAG,EAAY,CAAC;CAE9C;CAEA,SAAS,EAAW,GAAY,GAA6B;EACvD,EAAQ,SAAS,UAErB,EAAM,QAAQ,EAAM,MAAM,QAAQ,MAAM,MAAM,CAAI,GAClD,EAAQ,SAAS,GAAM,EAAM,OAAO,CAAa,GACjD,EAAQ,SAAS,EAAM,OAAO,CAAa;CAC7C;CAEA,SAAS,EAAY,GAAe,GAAe,GAAgC;EAYjF,OAXI,EAAQ,SAAS,SAIjB,CAAC,EAAc,GAFA,EAAY,EAAQ,OAAO,KAElB,CAAU,KAAK,CAAC,EAAkB,GAAS,EAAQ,QAAQ,KAAK,IAAU,MAEtG,EAAM,QAAQ,EAAM,MAAM,KAAK,MAAO,MAAM,IAAU,IAAU,CAAE,GAClE,EAAQ,SAAS,GAAS,EAAM,OAAO,CAAa,GACpD,EAAQ,SAAS,EAAM,OAAO,CAAa,GAC3C,EAAY,CAAO,GAEZ;CACT;CAEA,SAAS,EAAc,GAAoB;EACzC,IAAM,IAAQ,EAAU,CAAI;EAI5B,OAFI,EAAM,SAAS,IAAU,IAEtB,KAAK,IAAI,KAAK,KAAK,MAAO,EAAM,SAAS,EAAM,QAAS,GAAG,CAAC;CACrE;CAIA,SAAS,EAAe,GAAoB;EAC1C,IAAM,IAAQ,EAAU,CAAI;EAE5B,OAAO,CAAC,EAAY,EAAM,QAAQ,GAAG,EAAU,CAAK,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;CACnF;CAEA,SAAS,EAAe,GAAoB;EAC1C,IAAM,IAAS,EAAU,CAAI,CAAC,CAAC;EAM/B,OAJI,MAAW,YAAkB,UAE7B,MAAW,UAAgB,iBAExB;CACT;CAEA,SAAS,IAAgB;EACvB,EAAW,QAAQ;EAEnB,KAAK,IAAM,KAAc,EAAY,OAAO,GAAG,EAAW,MAAM;EAGhE,AADA,EAAY,MAAM,GAClB,EAAa,MAAM;CACrB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/inputs/file-input/file-input.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-remove{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in oklch, var(--color-error) 12%, transparent))}.file-grid{--_thumb-size:var(--file-input-thumb-size,var(--size-24));grid-template-columns:repeat(auto-fill, minmax(var(--_thumb-size), 1fr));gap:var(--size-2);margin:0;padding:0;list-style:none;display:grid}.file-card{box-sizing:border-box;gap:var(--size-1);flex-direction:column;display:flex;position:relative}.file-thumb{box-sizing:border-box;aspect-ratio:1;object-fit:cover;background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);width:100%;display:block}.file-thumb-generic{color:var(--color-contrast-400);justify-content:center;align-items:center;display:flex}.file-card-name{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);text-align:center;white-space:nowrap;overflow:hidden}.file-card-remove{top:var(--size-1);right:var(--size-1);width:var(--size-5);height:var(--size-5);color:var(--color-contrast-50);cursor:pointer;background:color-mix(in oklch, var(--color-contrast-900) 55%, transparent);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast);border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.file-card-remove:hover{color:var(--color-canvas);background:var(--color-error)}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-1px)}:host([drag-over]) .dropzone{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 8%, transparent);border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)scale(1.05)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.helper-text-error{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--file-input-bg,var(--color-contrast-50));--_border-color:var(--file-input-border-color,var(--color-contrast-300))}:host([variant=flat]){--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .dropzone:hover{background:var(--file-input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--file-input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat][drag-over]) .dropzone,:host([variant=flat]) .dropzone:focus-visible{background:var(--file-input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--file-input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--file-input-bg,var(--_theme-backdrop));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .dropzone:hover{border-color:var(--file-input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--file-input-bg,transparent)}:host([variant=ghost]){--_bg:var(--file-input-bg,transparent);--_border-color:var(--file-input-border-color,var(--color-contrast-200))}:host([variant=ghost]) .dropzone:hover{background:var(--file-input-hover-bg,var(--color-contrast-100))}}@layer refine.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-title-active{color:var(--_theme-focus,var(--color-primary))}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-actions{gap:var(--size-0-5);flex-shrink:0;display:flex}.file-remove,.file-action{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in oklch, var(--color-error) 12%, transparent))}.file-action:hover{color:var(--_theme-focus,var(--color-primary));background:var(--_theme-backdrop,color-mix(in oklch, var(--color-primary) 12%, transparent))}.file-progress-meta{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-error-text{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-error);white-space:nowrap;overflow:hidden}.file-item[data-status=success] .file-icon{color:var(--color-success)}.file-item[data-status=error] .file-icon{color:var(--color-error)}.file-item[data-status=error]{border-color:color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200))}.file-grid{--_thumb-size:var(--file-input-thumb-size,var(--size-24));grid-template-columns:repeat(auto-fill, minmax(var(--_thumb-size), 1fr));gap:var(--size-2);margin:0;padding:0;list-style:none;display:grid}.file-card{box-sizing:border-box;gap:var(--size-1);flex-direction:column;display:flex}.file-thumb-frame{display:block;position:relative}.file-thumb{box-sizing:border-box;aspect-ratio:1;object-fit:cover;background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);width:100%;display:block}.file-thumb-generic{color:var(--color-contrast-400);justify-content:center;align-items:center;display:flex}.file-card[data-status=uploading] .file-thumb{opacity:.6}.file-card[data-status=error] .file-thumb{border-color:color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200))}.file-card-name{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);text-align:center;white-space:nowrap;overflow:hidden}.file-status-badge{top:var(--size-1);left:var(--size-1);width:var(--size-5);height:var(--size-5);color:var(--color-canvas);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}.file-status-badge-success{background:var(--color-success)}.file-status-badge-error{background:var(--color-error)}.file-card-actions{top:var(--size-1);right:var(--size-1);gap:var(--size-0-5);display:flex;position:absolute}.file-card-action{width:var(--size-5);height:var(--size-5);color:var(--color-contrast-50);cursor:pointer;background:color-mix(in oklch, var(--color-contrast-900) 55%, transparent);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-card-remove:hover{color:var(--color-canvas);background:var(--color-error)}.file-card-action:not(.file-card-remove):hover{color:var(--color-canvas);background:var(--color-primary)}.file-card .file-progress-meta,.file-card .file-error-text{text-align:center;white-space:normal}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-1px)}:host([drag-over]) .dropzone{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 8%, transparent);border-color:var(--_theme-focus,var(--color-primary));box-shadow:0 0 0 3px color-mix(in oklch, var(--_theme-focus,var(--color-primary)) 25%, transparent), 0 0 20px 2px color-mix(in oklch, var(--_theme-focus,var(--color-primary)) 45%, transparent);border-style:solid}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)scale(1.05)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.dropzone-icon[data-status=error],.helper-text-error{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--file-input-bg,var(--color-contrast-50));--_border-color:var(--file-input-border-color,var(--color-contrast-300))}:host([variant=flat]){--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .dropzone:hover{background:var(--file-input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--file-input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat][drag-over]) .dropzone,:host([variant=flat]) .dropzone:focus-visible{background:var(--file-input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--file-input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--file-input-bg,var(--_theme-backdrop));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .dropzone:hover{border-color:var(--file-input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--file-input-bg,transparent)}:host([variant=ghost]){--_bg:var(--file-input-bg,transparent);--_border-color:var(--file-input-border-color,transparent)}:host(:not([disabled])[variant=ghost]) .dropzone:hover{background:var(--file-input-hover-bg,var(--color-contrast-100));border-color:var(--file-input-hover-border-color,var(--color-contrast-200))}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .dropzone{background:var(--color-contrast-100);border-color:var(--color-contrast-200)}:host([disabled]) .dropzone-icon,:host([disabled]) .dropzone-title,:host([disabled]) .dropzone-hint,:host([disabled]) .dropzone-title u,:host([disabled]) .label-outside{color:var(--color-contrast-400)}`;exports.default=e;
 //# sourceMappingURL=file-input.css.cjs.map

package/dist/inputs/file-input/file-input.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.css.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .file-card-remove {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, var(--color-contrast-200));\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"file-input.css.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  /* Signal 01: the copy itself during an active drag, not just the border/glow. */\n  .dropzone-title-active {\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n  }\n\n  .file-remove,\n  .file-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* Signal 03/04: retry and replace share one neutral-hover treatment — distinct from remove's\n     error-red hover so the destructive action doesn't blend in with the recovery ones. */\n  .file-action:hover {\n    color: var(--_theme-focus, var(--color-primary));\n    background: var(--_theme-backdrop, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  /* ========================================\n       Upload Status (Signals 02, 03, 04)\n       ======================================== */\n\n  .file-progress-meta {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-error-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-error);\n    white-space: nowrap;\n  }\n\n  .file-item[data-status='success'] .file-icon {\n    color: var(--color-success);\n  }\n\n  .file-item[data-status='error'] .file-icon {\n    color: var(--color-error);\n  }\n\n  .file-item[data-status='error'] {\n    border-color: color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb-frame {\n    position: relative;\n    display: block;\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card[data-status='uploading'] .file-thumb {\n    opacity: 0.6;\n  }\n\n  .file-card[data-status='error'] .file-thumb {\n    border-color: color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200));\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  /* Signal 04: a small badge over the thumbnail corner — an explicit success/error indicator\n     next to the visual proof itself, not just a caption line below it. */\n  .file-status-badge {\n    position: absolute;\n    top: var(--size-1);\n    left: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    color: var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n\n  .file-status-badge-success {\n    background: var(--color-success);\n  }\n\n  .file-status-badge-error {\n    background: var(--color-error);\n  }\n\n  .file-card-actions {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    gap: var(--size-0-5);\n  }\n\n  .file-card-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  .file-card-action:not(.file-card-remove):hover {\n    color: var(--color-canvas);\n    background: var(--color-primary);\n  }\n\n  .file-card .file-progress-meta,\n  .file-card .file-error-text {\n    text-align: center;\n    white-space: normal;\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    border-style: solid;\n\n    /* A genuine glow (not the same subtle ring `:focus-visible` uses above) — a soft inner\n       ring plus a wider, brighter halo, so an active drag reads unmistakably differently from\n       a merely-focused, idle dropzone. */\n    box-shadow:\n      0 0 0 3px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 25%, transparent),\n      0 0 20px 2px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 45%, transparent);\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* Signal 03: an in-field icon alongside the border shift — never color alone. */\n  .dropzone-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n\n  /* Borderless at rest — only reveals a border on hover (the border-*width* stays reserved via\n     a transparent color, not `none`, so revealing it on hover never shifts layout). Focus\n     already gets its own themed border + glow from the generic `:focus-visible` rule above,\n     regardless of variant, so it needs no ghost-specific override here. */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, transparent);\n  }\n\n  :host(:not([disabled])[variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n    border-color: var(--file-input-hover-border-color, var(--color-contrast-200));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .dropzone {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n}\n\n:host([disabled]) .dropzone-icon,\n:host([disabled]) .dropzone-title,\n:host([disabled]) .dropzone-hint,\n:host([disabled]) .dropzone-title u {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .label-outside {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/file-input/file-input.css?inline
-var e = "@layer refine.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-remove{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in oklch, var(--color-error) 12%, transparent))}.file-grid{--_thumb-size:var(--file-input-thumb-size,var(--size-24));grid-template-columns:repeat(auto-fill, minmax(var(--_thumb-size), 1fr));gap:var(--size-2);margin:0;padding:0;list-style:none;display:grid}.file-card{box-sizing:border-box;gap:var(--size-1);flex-direction:column;display:flex;position:relative}.file-thumb{box-sizing:border-box;aspect-ratio:1;object-fit:cover;background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);width:100%;display:block}.file-thumb-generic{color:var(--color-contrast-400);justify-content:center;align-items:center;display:flex}.file-card-name{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);text-align:center;white-space:nowrap;overflow:hidden}.file-card-remove{top:var(--size-1);right:var(--size-1);width:var(--size-5);height:var(--size-5);color:var(--color-contrast-50);cursor:pointer;background:color-mix(in oklch, var(--color-contrast-900) 55%, transparent);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast);border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.file-card-remove:hover{color:var(--color-canvas);background:var(--color-error)}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-1px)}:host([drag-over]) .dropzone{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 8%, transparent);border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)scale(1.05)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.helper-text-error{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--file-input-bg,var(--color-contrast-50));--_border-color:var(--file-input-border-color,var(--color-contrast-300))}:host([variant=flat]){--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .dropzone:hover{background:var(--file-input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--file-input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat][drag-over]) .dropzone,:host([variant=flat]) .dropzone:focus-visible{background:var(--file-input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--file-input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--file-input-bg,var(--_theme-backdrop));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .dropzone:hover{border-color:var(--file-input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--file-input-bg,transparent)}:host([variant=ghost]){--_bg:var(--file-input-bg,transparent);--_border-color:var(--file-input-border-color,var(--color-contrast-200))}:host([variant=ghost]) .dropzone:hover{background:var(--file-input-hover-bg,var(--color-contrast-100))}}@layer refine.utilities{:host([fullwidth]){width:100%}}";
+var e = "@layer refine.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-title-active{color:var(--_theme-focus,var(--color-primary))}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-actions{gap:var(--size-0-5);flex-shrink:0;display:flex}.file-remove,.file-action{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in oklch, var(--color-error) 12%, transparent))}.file-action:hover{color:var(--_theme-focus,var(--color-primary));background:var(--_theme-backdrop,color-mix(in oklch, var(--color-primary) 12%, transparent))}.file-progress-meta{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-error-text{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-error);white-space:nowrap;overflow:hidden}.file-item[data-status=success] .file-icon{color:var(--color-success)}.file-item[data-status=error] .file-icon{color:var(--color-error)}.file-item[data-status=error]{border-color:color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200))}.file-grid{--_thumb-size:var(--file-input-thumb-size,var(--size-24));grid-template-columns:repeat(auto-fill, minmax(var(--_thumb-size), 1fr));gap:var(--size-2);margin:0;padding:0;list-style:none;display:grid}.file-card{box-sizing:border-box;gap:var(--size-1);flex-direction:column;display:flex}.file-thumb-frame{display:block;position:relative}.file-thumb{box-sizing:border-box;aspect-ratio:1;object-fit:cover;background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);width:100%;display:block}.file-thumb-generic{color:var(--color-contrast-400);justify-content:center;align-items:center;display:flex}.file-card[data-status=uploading] .file-thumb{opacity:.6}.file-card[data-status=error] .file-thumb{border-color:color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200))}.file-card-name{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);text-align:center;white-space:nowrap;overflow:hidden}.file-status-badge{top:var(--size-1);left:var(--size-1);width:var(--size-5);height:var(--size-5);color:var(--color-canvas);border-radius:var(--rounded-full);justify-content:center;align-items:center;display:flex;position:absolute}.file-status-badge-success{background:var(--color-success)}.file-status-badge-error{background:var(--color-error)}.file-card-actions{top:var(--size-1);right:var(--size-1);gap:var(--size-0-5);display:flex;position:absolute}.file-card-action{width:var(--size-5);height:var(--size-5);color:var(--color-contrast-50);cursor:pointer;background:color-mix(in oklch, var(--color-contrast-900) 55%, transparent);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-card-remove:hover{color:var(--color-canvas);background:var(--color-error)}.file-card-action:not(.file-card-remove):hover{color:var(--color-canvas);background:var(--color-primary)}.file-card .file-progress-meta,.file-card .file-error-text{text-align:center;white-space:normal}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-1px)}:host([drag-over]) .dropzone{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 8%, transparent);border-color:var(--_theme-focus,var(--color-primary));box-shadow:0 0 0 3px color-mix(in oklch, var(--_theme-focus,var(--color-primary)) 25%, transparent), 0 0 20px 2px color-mix(in oklch, var(--_theme-focus,var(--color-primary)) 45%, transparent);border-style:solid}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)scale(1.05)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.dropzone-icon[data-status=error],.helper-text-error{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--file-input-bg,var(--color-contrast-50));--_border-color:var(--file-input-border-color,var(--color-contrast-300))}:host([variant=flat]){--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .dropzone:hover{background:var(--file-input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--file-input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat][drag-over]) .dropzone,:host([variant=flat]) .dropzone:focus-visible{background:var(--file-input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--file-input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--file-input-bg,var(--_theme-backdrop));--_border-color:var(--file-input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .dropzone:hover{border-color:var(--file-input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--file-input-bg,transparent)}:host([variant=ghost]){--_bg:var(--file-input-bg,transparent);--_border-color:var(--file-input-border-color,transparent)}:host(:not([disabled])[variant=ghost]) .dropzone:hover{background:var(--file-input-hover-bg,var(--color-contrast-100));border-color:var(--file-input-hover-border-color,var(--color-contrast-200))}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .dropzone{background:var(--color-contrast-100);border-color:var(--color-contrast-200)}:host([disabled]) .dropzone-icon,:host([disabled]) .dropzone-title,:host([disabled]) .dropzone-hint,:host([disabled]) .dropzone-title u,:host([disabled]) .label-outside{color:var(--color-contrast-400)}";
 //#endregion
 export { e as default };
 

package/dist/inputs/file-input/file-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.css.js","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .file-card-remove {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, var(--color-contrast-200));\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"file-input.css.js","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  /* Signal 01: the copy itself during an active drag, not just the border/glow. */\n  .dropzone-title-active {\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n  }\n\n  .file-remove,\n  .file-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* Signal 03/04: retry and replace share one neutral-hover treatment — distinct from remove's\n     error-red hover so the destructive action doesn't blend in with the recovery ones. */\n  .file-action:hover {\n    color: var(--_theme-focus, var(--color-primary));\n    background: var(--_theme-backdrop, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  /* ========================================\n       Upload Status (Signals 02, 03, 04)\n       ======================================== */\n\n  .file-progress-meta {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-error-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-error);\n    white-space: nowrap;\n  }\n\n  .file-item[data-status='success'] .file-icon {\n    color: var(--color-success);\n  }\n\n  .file-item[data-status='error'] .file-icon {\n    color: var(--color-error);\n  }\n\n  .file-item[data-status='error'] {\n    border-color: color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb-frame {\n    position: relative;\n    display: block;\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card[data-status='uploading'] .file-thumb {\n    opacity: 0.6;\n  }\n\n  .file-card[data-status='error'] .file-thumb {\n    border-color: color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200));\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  /* Signal 04: a small badge over the thumbnail corner — an explicit success/error indicator\n     next to the visual proof itself, not just a caption line below it. */\n  .file-status-badge {\n    position: absolute;\n    top: var(--size-1);\n    left: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    color: var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n\n  .file-status-badge-success {\n    background: var(--color-success);\n  }\n\n  .file-status-badge-error {\n    background: var(--color-error);\n  }\n\n  .file-card-actions {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    gap: var(--size-0-5);\n  }\n\n  .file-card-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  .file-card-action:not(.file-card-remove):hover {\n    color: var(--color-canvas);\n    background: var(--color-primary);\n  }\n\n  .file-card .file-progress-meta,\n  .file-card .file-error-text {\n    text-align: center;\n    white-space: normal;\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    border-style: solid;\n\n    /* A genuine glow (not the same subtle ring `:focus-visible` uses above) — a soft inner\n       ring plus a wider, brighter halo, so an active drag reads unmistakably differently from\n       a merely-focused, idle dropzone. */\n    box-shadow:\n      0 0 0 3px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 25%, transparent),\n      0 0 20px 2px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 45%, transparent);\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* Signal 03: an in-field icon alongside the border shift — never color alone. */\n  .dropzone-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n\n  /* Borderless at rest — only reveals a border on hover (the border-*width* stays reserved via\n     a transparent color, not `none`, so revealing it on hover never shifts layout). Focus\n     already gets its own themed border + glow from the generic `:focus-visible` rule above,\n     regardless of variant, so it needs no ghost-specific override here. */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, transparent);\n  }\n\n  :host(:not([disabled])[variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n    border-color: var(--file-input-hover-border-color, var(--color-contrast-200));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .dropzone {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n}\n\n:host([disabled]) .dropzone-icon,\n:host([disabled]) .dropzone-title,\n:host([disabled]) .dropzone-hint,\n:host([disabled]) .dropzone-title u {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .label-outside {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.d.ts

@@ -1,3 +1,7 @@
+import '../../content/icon/icon';
+import '../../feedback/progress/progress';
+import { type FileUploadFn } from './file-input-upload';
+export type { FileUploadFn, FileUploadState, FileUploadStatus } from './file-input-upload';
 /** File input component properties */
 export type OreFileInputProps = {
     /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */
@@ -36,6 +40,14 @@ export type OreFileInputProps = {
     required?: boolean;
     /** Field size preset */
     size?: string;
+    /**
+     * JS-only upload transport (see `FileUploadFn`). When set, every newly added file starts
+     * uploading immediately and independently — progress/speed/ETA, retry-on-failure, and a
+     * success confirmation card are all driven from here. Omit it to keep the component in its
+     * original picker-only mode (select files, no upload lifecycle).
+     * Set as a JS property: `fileInput.upload = async (file, { onProgress, signal }) => { ... }`.
+     */
+    upload?: FileUploadFn | null;
 };
 /** Events emitted by the file-input component */
 export type OreFileInputEvents = {
@@ -52,9 +64,28 @@ export type OreFileInputEvents = {
         originalEvent?: Event;
         value: File[];
     };
+    /** Emitted when `upload` rejects for a file (after a fresh attempt or a retry) */
+    'upload-error': {
+        error: unknown;
+        file: File;
+    };
+    /** Emitted whenever `upload`'s `onProgress` reports new bytes for a file */
+    'upload-progress': {
+        file: File;
+        loaded: number;
+        total: number;
+    };
+    /** Emitted when `upload` resolves for a file */
+    'upload-success': {
+        file: File;
+    };
 };
 /**
- * A file upload field with drag-and-drop support and built-in validation messaging.
+ * A file upload field with drag-and-drop support, built-in validation messaging, and — once a
+ * `upload` transport is wired up — a full per-file upload lifecycle: live progress/speed/ETA,
+ * retry-on-failure, a success confirmation card, and fully independent handling of concurrent
+ * files (one failing never blocks or cancels the others). Picking files with no `upload` set
+ * keeps the original, upload-free selection-only behavior.
  *
  * @element ore-file-input
  *
@@ -69,6 +100,9 @@ export type OreFileInputEvents = {
  *
  * @fires change - detail: { files: File[], value: File[] }
  * @fires remove - detail: { file: File, files: File[] }
+ * @fires upload-progress - detail: { file: File, loaded: number, total: number }
+ * @fires upload-success - detail: { file: File }
+ * @fires upload-error - detail: { file: File, error: unknown }
  *
  * @cssprop --file-input-bg - Dropzone background color
  * @cssprop --file-input-border-color - Dropzone border color
@@ -94,6 +128,25 @@ export type OreFileInputEvents = {
  * <ore-file-input label="Resume" accept=".pdf,.doc,.docx" max-size="5242880" />
  * <ore-file-input variant="bordered" color="primary" />
  * ```
+ * ```ts
+ * // Wire up a real upload transport — progress/retry/success are then handled automatically.
+ * // `XMLHttpRequest` is used here (not `fetch`) because it's the only browser API that reports
+ * // upload progress; swap in whatever transport the app already uses.
+ * const input = document.querySelector('ore-file-input');
+ * input.upload = (file, { onProgress, signal, resumeFrom }) =>
+ *   new Promise((resolve, reject) => {
+ *     const xhr = new XMLHttpRequest();
+ *
+ *     xhr.upload.addEventListener('progress', (e) => onProgress(resumeFrom + e.loaded, file.size));
+ *     xhr.addEventListener('load', () => (xhr.status < 400 ? resolve() : reject(new Error(xhr.statusText))));
+ *     xhr.addEventListener('error', () => reject(new Error('Network error')));
+ *     signal.addEventListener('abort', () => xhr.abort());
+ *
+ *     xhr.open('PUT', '/uploads');
+ *     if (resumeFrom > 0) xhr.setRequestHeader('Content-Range', `bytes ${resumeFrom}-/${file.size}`);
+ *     xhr.send(file);
+ *   });
+ * ```
  */
 export declare const FILE_INPUT_TAG: "ore-file-input";
 //# sourceMappingURL=file-input.d.ts.map

package/dist/inputs/file-input/file-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/file-input/file-input.ts"],"names":[],"mappings":"AAsCA,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iDAAiD;AACjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8CAA8C;IAC9C,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAChE,8CAA8C;IAC9C,MAAM,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;CAC7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC"}
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/file-input/file-input.ts"],"names":[],"mappings":"AAmBA,OAAO,yBAAyB,CAAC;AACjC,OAAO,kCAAkC,CAAC;AAK1C,OAAO,EAAgC,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGtF,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI3F,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,iDAAiD;AACjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8CAA8C;IAC9C,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAChE,8CAA8C;IAC9C,MAAM,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAC5E,kFAAkF;IAClF,cAAc,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC;IAC/C,4EAA4E;IAC5E,iBAAiB,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACjE,gDAAgD;IAChD,gBAAgB,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC"}

package/dist/inputs/input/input.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow,var(--shadow-2xs));transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);order:-1;margin-bottom:0}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label-inset,:host([error]:not([error=""])) .label-outside,.helper-text[role=alert]{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--input-bg,var(--color-contrast-50));--_border-color:var(--input-border-color,var(--color-contrast-300))}:host(:not([variant])) .field,:host([variant=solid]) .field{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .field{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:var(--input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--input-bg,var(--_theme-backdrop));--_border-color:var(--input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--input-bg,transparent)}:host([variant=outline]) .field{box-shadow:none}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--input-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}}@layer refine.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`;exports.default=e;
 //# sourceMappingURL=input.css.cjs.map