@marianmeres/stuic 3.183.0 → 3.186.0

package/dist/components/Input/FieldSingleAsset.svelte

@@ -102,7 +102,8 @@
 		 * The upload. Receives the optimistic asset (its `id` and every `url` are one
 		 * blob URL of the file) and the file itself; resolves with the stored asset,
 		 * which becomes the new `value`. A rejection keeps the previous `value`, shows
-		 * an error state on the tile with Retry / Discard, and reports `notifications`.
+		 * an error state on the tile with Retry / Discard, and reports `notifications`
+		 * (see `onUploadError` to take over that report).
 		 * Without it the field is display-only (no picker, no drop, no paste).
 		 */
 		processAsset?: (
@@ -111,6 +112,17 @@
 		) => Promise<FieldAsset>;
 		/** Render a progress ring driven by `ctx.onProgress` instead of a spinner. */
 		withOnProgress?: boolean;
+		/**
+		 * Called when `processAsset` rejects (with the raw rejection, so a status code or
+		 * a custom error class is still inspectable), after the tile has entered its
+		 * error state and before the default `notifications.error(...)` toast. Return
+		 * `false` to skip that toast — for a rejection the page already renders its own
+		 * way (a quota / plan-limit panel). The tile keeps Retry / Discard regardless.
+		 */
+		onUploadError?: (
+			error: unknown,
+			ctx: { asset: FieldAsset; file: File }
+		) => void | boolean;
 		/** Same tokens as the HTML `accept` attribute; also applied to drops and pastes. */
 		accept?: string;
 		/** Passed to the file input: on phones opens the camera directly. */
@@ -133,7 +145,12 @@
 		transformFile?: (
 			file: File
 		) => File | null | undefined | Promise<File | null | undefined>;
-		/** Return `false` (may be async) to keep the asset. */
+		/**
+		 * Return `false` (may be async) to keep the asset. While a returned promise is
+		 * pending the tile is busy: the Remove control shows a spinner, the tile and
+		 * its controls are inert, and a second Remove is a no-op — so the hook may do
+		 * the actual server-side delete and resolve with whether it succeeded.
+		 */
 		onBeforeRemove?: (asset: FieldAsset) => boolean | Promise<boolean>;
 		/** Return `false` (may be async) to keep the current asset instead of uploading `file`. */
 		onBeforeReplace?: (current: FieldAsset, file: File) => boolean | Promise<boolean>;
@@ -160,6 +177,14 @@
 		placeholder?: THC;
 		/** Hide the "Preview" action (the `AssetsPreview` lightbox). */
 		noPreview?: boolean;
+		/**
+		 * Never show the asset's `name` to the user — the tile's filename line, the
+		 * lightbox caption, the "… removed" / "… uploaded" announcements and toasts all
+		 * fall back to name-less wording (`replace_file_short`, `removed_short`, ...).
+		 * For stores that hand back a content-hash filename, which carries no meaning
+		 * worth reading. The type / size line (`metaText`) is unaffected.
+		 */
+		noFilename?: boolean;
 		/** Hide the lightbox's Download button. */
 		noDownload?: boolean;
 		/** See `AssetsPreview.onDownload`: replaces the default download of `url.original`. */
@@ -254,6 +279,7 @@
 		serializeValue = default_serialize,
 		processAsset,
 		withOnProgress = false,
+		onUploadError,
 		accept,
 		capture,
 		maxSize,
@@ -270,6 +296,7 @@
 		placeholder,
 		noPreview = false,
 		noDownload = false,
+		noFilename = false,
 		onDownload,
 		onChange,
 	}: Props = $props();
@@ -292,6 +319,9 @@
 	let pending = $state<Pending | null>(null);
 	// Bumped on every new upload / discard so a stale promise cannot land.
 	let uploadSeq = 0;
+	// `onBeforeRemove` in flight (it may be the real server-side delete): the tile
+	// is inert and the Remove control shows a spinner until it settles.
+	let removing = $state(false);
 	// The last removed asset while its Undo is still offered.
 	let removed = $state<FieldAsset | null>(null);
 	let undoTimer: ReturnType<typeof setTimeout> | undefined;
@@ -303,7 +333,9 @@
 	let descId = $derived(`${id}-action`);
 
 	let hasLabel = $derived(isTHCNotEmpty(label));
-	let canUpload = $derived(typeof processAsset === "function" && !disabled && !isLoading);
+	let canUpload = $derived(
+		typeof processAsset === "function" && !disabled && !isLoading && !removing
+	);
 	// what the tile shows: the upload in progress wins over the committed asset
 	let shown = $derived(pending?.asset ?? asset);
 	let shownIsImage = $derived(
@@ -312,13 +344,15 @@
 	let tileState = $derived(
 		isLoading
 			? "loading"
-			: pending
-				? pending.error
-					? "error"
-					: "uploading"
-				: asset
-					? "filled"
-					: "empty"
+			: removing
+				? "removing"
+				: pending
+					? pending.error
+						? "error"
+						: "uploading"
+					: asset
+						? "filled"
+						: "empty"
 	);
 	let sizePreset = $derived(SIZE_PRESETS.includes(size) ? size : undefined);
 	let sizeStyle = $derived(
@@ -331,12 +365,17 @@
 	let tileActionText = $derived(
 		canUpload
 			? shown
-				? t("replace_file", { name: shown.name })
+				? noFilename
+					? t("replace_file_short")
+					: t("replace_file", { name: shown.name })
 				: t("pick_file")
-			: (shown?.name ?? "")
+			: noFilename
+				? ""
+				: (shown?.name ?? "")
 	);
 	let metaText = $derived.by(() => {
 		if (!shown) return "";
+		if (removing) return t("removing_short");
 		if (pending) {
 			if (pending.error) return t("upload_failed");
 			const parts = [
@@ -514,7 +553,7 @@
 		assetsPreview?.close?.();
 		pending = { asset: optimistic, file, progress: 0, error: null };
 		const seq = ++uploadSeq;
-		announce(t("uploading", { name: file.name }));
+		announce(noFilename ? t("uploading_short") : t("uploading", { name: file.name }));
 
 		const onProgress = (p: number) => {
 			if (seq === uploadSeq && pending && !pending.error) {
@@ -538,16 +577,26 @@
 				}
 				pending = null;
 				commit(uploaded);
-				announce(t("uploaded", { name: uploaded.name ?? file.name }));
+				announce(
+					noFilename
+						? t("uploaded_short")
+						: t("uploaded", { name: uploaded.name ?? file.name })
+				);
 			})
 			.catch((e) => {
 				if (seq !== uploadSeq) return;
 				const error = `${e?.message ?? e}`;
 				clog.error(error);
 				if (pending) pending.error = error;
-				const msg = t("upload_failed_named", { name: file.name, error });
+				const msg = noFilename
+					? t("upload_failed_error", { error })
+					: t("upload_failed_named", { name: file.name, error });
 				announce(msg);
-				notifications?.error(msg);
+				// the consumer may own the report (a quota panel it already renders):
+				// `false` skips only the toast, the tile's Retry / Discard stay
+				if (onUploadError?.(e, { asset: optimistic, file }) !== false) {
+					notifications?.error(msg);
+				}
 			});
 	}
 
@@ -566,11 +615,20 @@
 
 	async function remove() {
 		const current = asset;
-		if (!current || disabled || isLoading) return;
-		if (typeof onBeforeRemove === "function" && !(await onBeforeRemove(current))) return;
+		if (!current || disabled || isLoading || removing) return;
+		if (typeof onBeforeRemove === "function") {
+			// busy for the whole round trip (the hook may be the real delete) — the
+			// `removing` guard above is what makes a second click a no-op meanwhile
+			removing = true;
+			try {
+				if (!(await onBeforeRemove(current))) return;
+			} finally {
+				removing = false;
+			}
+		}
 		assetsPreview?.close?.();
 		commit(null);
-		announce(t("removed", { name: current.name }));
+		announce(noFilename ? t("removed_short") : t("removed", { name: current.name }));
 		if (undoTtl > 0) {
 			removed = current;
 			undoTimer = setTimeout(() => clear_removed(), undoTtl);
@@ -583,7 +641,7 @@
 		if (!back) return;
 		clear_removed();
 		commit(back);
-		announce(t("restored", { name: back.name }));
+		announce(noFilename ? t("restored_short") : t("restored", { name: back.name }));
 		focus_tile();
 	}
 
@@ -632,20 +690,35 @@
 	});
 </script>
 
-{#snippet control(icon: string, labelText: string, onclick: () => void, action: string)}
+{#snippet control(
+	icon: string,
+	labelText: string,
+	onclick: () => void,
+	action: string,
+	opts: { busy?: boolean; inert?: boolean } = {}
+)}
+	<!-- `aria-disabled` (not `disabled`) so a busy control keeps focus for the
+	     round trip; the click is a no-op meanwhile (`remove()` guards on `removing`) -->
 	<button
 		type="button"
 		class={twMerge("stuic-field-single-asset-control", classControls)}
 		aria-label={labelText}
+		aria-disabled={opts.busy || opts.inert ? "true" : undefined}
+		aria-busy={opts.busy ? "true" : undefined}
 		data-action={action}
 		use:tooltip={() => ({ content: labelText })}
 		onclick={(e) => {
 			e.preventDefault();
 			e.stopPropagation();
+			if (opts.busy || opts.inert) return;
 			onclick();
 		}}
 	>
-		{@html icon}
+		{#if opts.busy}
+			<SpinnerCircleOscillate class="size-4" bgStrokeColor="rgba(255 255 255 / 0.3)" />
+		{:else}
+			{@html icon}
+		{/if}
 	</button>
 {/snippet}
 
@@ -740,7 +813,8 @@
 								iconZoomIn({ size: 16 }),
 								t("preview"),
 								() => assetsPreview.open(0),
-								"preview"
+								"preview",
+								{ inert: removing }
 							)}
 						{/if}
 						{#if pending || !disabled}
@@ -750,9 +824,12 @@
 									? pending.error
 										? t("discard")
 										: t("cancel_upload")
-									: t("remove"),
+									: removing
+										? t("removing_short")
+										: t("remove"),
 								on_x,
-								pending ? "discard" : "remove"
+								pending ? "discard" : "remove",
+								{ busy: removing }
 							)}
 						{/if}
 					</span>
@@ -765,13 +842,17 @@
 			{#if isLoading}
 				<Skeleton variant="text" lines={2} width="60%" />
 			{:else if shown}
-				<div class="truncate font-medium" title={shown.name}>{shown.name}</div>
+				{#if !noFilename}
+					<div class="truncate font-medium" title={shown.name}>{shown.name}</div>
+				{/if}
 				{#if metaText}
 					<div class="text-xs stuic-field-single-asset-meta">{metaText}</div>
 				{/if}
 			{:else if undoOffer}
 				<div class="stuic-field-single-asset-meta">
-					<span>{t("removed", { name: undoOffer.name })}</span>
+					<span>
+						{noFilename ? t("removed_short") : t("removed", { name: undoOffer.name })}
+					</span>
 					<button type="button" class="stuic-field-single-asset-undo" onclick={undo}>
 						{@html iconUndo({ size: 14 })}
 						<span>{t("undo")}</span>
@@ -867,6 +948,7 @@
 	noPrevNext
 	noDots
 	noCurrentOfTotal
+	noName={noFilename}
 	{noDownload}
 	onDelete={(_, _index, controls) => {
 		controls.close();

package/dist/components/Input/FieldSingleAsset.svelte.d.ts

@@ -65,12 +65,24 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
      * The upload. Receives the optimistic asset (its `id` and every `url` are one
      * blob URL of the file) and the file itself; resolves with the stored asset,
      * which becomes the new `value`. A rejection keeps the previous `value`, shows
-     * an error state on the tile with Retry / Discard, and reports `notifications`.
+     * an error state on the tile with Retry / Discard, and reports `notifications`
+     * (see `onUploadError` to take over that report).
      * Without it the field is display-only (no picker, no drop, no paste).
      */
     processAsset?: (asset: FieldAsset, ctx: FieldSingleAssetUploadContext) => Promise<FieldAsset>;
     /** Render a progress ring driven by `ctx.onProgress` instead of a spinner. */
     withOnProgress?: boolean;
+    /**
+     * Called when `processAsset` rejects (with the raw rejection, so a status code or
+     * a custom error class is still inspectable), after the tile has entered its
+     * error state and before the default `notifications.error(...)` toast. Return
+     * `false` to skip that toast — for a rejection the page already renders its own
+     * way (a quota / plan-limit panel). The tile keeps Retry / Discard regardless.
+     */
+    onUploadError?: (error: unknown, ctx: {
+        asset: FieldAsset;
+        file: File;
+    }) => void | boolean;
     /** Same tokens as the HTML `accept` attribute; also applied to drops and pastes. */
     accept?: string;
     /** Passed to the file input: on phones opens the camera directly. */
@@ -89,7 +101,12 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
      * cancels silently (the user closed the cropper).
      */
     transformFile?: (file: File) => File | null | undefined | Promise<File | null | undefined>;
-    /** Return `false` (may be async) to keep the asset. */
+    /**
+     * Return `false` (may be async) to keep the asset. While a returned promise is
+     * pending the tile is busy: the Remove control shows a spinner, the tile and
+     * its controls are inert, and a second Remove is a no-op — so the hook may do
+     * the actual server-side delete and resolve with whether it succeeded.
+     */
     onBeforeRemove?: (asset: FieldAsset) => boolean | Promise<boolean>;
     /** Return `false` (may be async) to keep the current asset instead of uploading `file`. */
     onBeforeReplace?: (current: FieldAsset, file: File) => boolean | Promise<boolean>;
@@ -116,6 +133,14 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     placeholder?: THC;
     /** Hide the "Preview" action (the `AssetsPreview` lightbox). */
     noPreview?: boolean;
+    /**
+     * Never show the asset's `name` to the user — the tile's filename line, the
+     * lightbox caption, the "… removed" / "… uploaded" announcements and toasts all
+     * fall back to name-less wording (`replace_file_short`, `removed_short`, ...).
+     * For stores that hand back a content-hash filename, which carries no meaning
+     * worth reading. The type / size line (`metaText`) is unaffected.
+     */
+    noFilename?: boolean;
     /** Hide the lightbox's Download button. */
     noDownload?: boolean;
     /** See `AssetsPreview.onDownload`: replaces the default download of `url.original`. */

package/dist/components/Input/README.md

@@ -768,7 +768,9 @@ built around a single tile instead:
 - **The tile is the picker and the drop target.** Click it, drop onto the field, or (opt-in)
   paste — every source _replaces_ what is there. Two files at once are refused.
 - **Remove inline**, with an **Undo** offered for `undoTtl` ms (the asset is only unlinked
-  from `value`, never deleted anywhere, so undo is lossless). Focus returns to the tile.
+  from `value`, never deleted anywhere, so undo is lossless). Focus returns to the tile. An
+  async `onBeforeRemove` gets a busy state for its round trip (spinner on the Remove
+  control, tile inert, second click ignored) — so it may be the real server-side delete.
 - **Shape / fit / size presets**: `shape="circle"` for avatars, `shape="wide"` (16:9) for
   banners, `fit="contain"` for logos that must never be cropped; `size` is `sm` / `md` / `lg`
   (5 / 8 / 12rem tall) or any CSS length.
@@ -776,7 +778,8 @@ built around a single tile instead:
   `withOnProgress`.
 - **Rollback on failure.** `value` is only rewritten when the upload _resolves_. A rejection
   keeps the previous asset, shows the error on the tile with **Retry** (same file) and
-  **Discard**, and reports through `notifications`. X during an upload cancels it (a late
+  **Discard**, and reports through `notifications` — unless `onUploadError` returns `false`
+  because the page shows that failure its own way. X during an upload cancels it (a late
   resolution is ignored).
 - **Client-side checks** before any bytes move: `accept` (also for drops and pastes),
   `maxSize`, a custom async `validateFile`, and a `transformFile` seam for downscaling a
@@ -852,6 +855,54 @@ or `alert` without one):
 one file only → `accept` → `onBeforeReplace` → `transformFile` → `maxSize` → `validateFile`
 → `processAsset`
 
+### When the failure is yours to show (`onUploadError`)
+
+Some rejections are not failures but product states — a 402 "plan limit reached" that the
+page already renders as an upgrade panel. Without a hook the field would stack its generic
+toast on top of that panel. `onUploadError(error, { asset, file })` gets the raw rejection
+first; return `false` to skip the toast. The tile still shows the error with Retry / Discard
+(the user may come back to it after upgrading), so the override is deliberately that narrow:
+
+```svelte
+<script lang="ts">
+	let gated = $state<string | null>(null);
+</script>
+
+{#if gated}
+	<UpgradeNotice message={gated} />
+{/if}
+
+<FieldSingleAsset
+	...
+	onUploadError={(e) => {
+		if ((e as any)?.status === 402) {
+			gated = (e as Error).message;
+			return false; // handled above — no toast
+		}
+	}}
+/>
+```
+
+### Removing the server copy too (`onBeforeRemove`)
+
+By default a remove only unlinks the asset from `value` (hence the lossless Undo). When the
+field owns a file that must go away on the server as well, do the `DELETE` inside
+`onBeforeRemove` and resolve with whether it succeeded — the field clears `value` only then.
+The round trip gets a busy state (spinner on the Remove control, `data-state="removing"`,
+tile and controls inert, a second Remove ignored). Pair it with `undoTtl={0}`: restoring the
+local value would lie about a file that is already gone.
+
+```svelte
+<FieldSingleAsset
+	...
+	undoTtl={0}
+	onBeforeRemove={async (asset) => {
+		const res = await fetch(`/api/logo/${asset.id}`, { method: "DELETE" });
+		return res.ok;
+	}}
+/>
+```
+
 ### Downscale or crop before upload (`transformFile`)
 
 ```svelte
@@ -871,12 +922,13 @@ a dialog and resolves with the cropped file.
 | `name`                                                     | `string`                                               | required           | The hidden input's name                                                 |
 | `processAsset`                                             | `(asset, { file, onProgress }) => Promise<FieldAsset>` | -                  | The upload. Without it the field is display-only                        |
 | `withOnProgress`                                           | `boolean`                                              | `false`            | Progress ring instead of a spinner                                      |
+| `onUploadError`                                            | `(error, { asset, file }) => void \| boolean`          | -                  | On a rejected upload, before the toast; `false` skips the toast         |
 | `accept`                                                   | `string`                                               | -                  | HTML `accept` tokens (MIME, `image/*`, `.pdf`); applied to drops/pastes |
 | `capture`                                                  | `"user" \| "environment"`                              | -                  | Passed to the file input: phones open the camera directly               |
 | `maxSize`                                                  | `number`                                               | -                  | Max bytes, checked after `transformFile`                                |
 | `validateFile`                                             | `(file) => string \| void \| Promise<...>`             | -                  | Non-empty string rejects with that message                              |
 | `transformFile`                                            | `(file) => File \| null \| Promise<...>`               | -                  | Pre-upload hook; `null` cancels                                         |
-| `onBeforeRemove`                                           | `(asset) => boolean \| Promise<boolean>`               | -                  | `false` keeps the asset                                                 |
+| `onBeforeRemove`                                           | `(asset) => boolean \| Promise<boolean>`               | -                  | `false` keeps the asset; busy state while a promise settles             |
 | `onBeforeReplace`                                          | `(current, file) => boolean \| Promise<boolean>`       | -                  | `false` keeps the current asset                                         |
 | `undoTtl`                                                  | `number`                                               | `6000`             | ms the inline Undo stays after a remove; `0` disables                   |
 | `pasteable`                                                | `boolean`                                              | `false`            | Accept Ctrl/Cmd-V (same routing as `FieldAssets`)                       |
@@ -885,6 +937,7 @@ a dialog and resolves with the cropped file.
 | `size`                                                     | `"sm" \| "md" \| "lg" \| string`                       | `"md"`             | Tile height: preset or CSS length                                       |
 | `placeholder`                                              | `THC`                                                  | -                  | Empty-tile content (e.g. an `Avatar` with initials)                     |
 | `noPreview`, `noDownload`                                  | `boolean`                                              | `false`            | Hide the Preview action / the lightbox's Download                       |
+| `noFilename`                                               | `boolean`                                              | `false`            | Never show the asset's name (hash filenames); name-less wording instead |
 | `onDownload`                                               | `(asset) => void \| Promise<void>`                     | -                  | Replaces the lightbox's default download (auth-gated bytes)             |
 | `onChange`                                                 | `(asset \| null) => void`                              | -                  | After every user-driven change of `value`                               |
 | `parseValue`, `serializeValue`                             | see Value                                              | JSON               | Custom `value` shape                                                    |

package/dist/components/Input/field-single-asset-i18n-sk.js

@@ -21,11 +21,15 @@ export const FIELD_SINGLE_ASSET_MESSAGES_SK = {
     field_req_att: "Toto pole vyžaduje pozornosť. Skontrolujte ho a skúste to znova.",
     pick_file: "Vybrať súbor",
     replace_file: "Nahradiť {{name}}",
+    replace_file_short: "Nahradiť súbor",
     empty_hint: "Presuňte sem súbor alebo kliknite a vyberte ho",
     remove: "Odstrániť",
+    removing_short: "Odstraňuje sa…",
     removed: "Súbor {{name}} bol odstránený",
+    removed_short: "Súbor bol odstránený",
     undo: "Vrátiť späť",
     restored: "Súbor {{name}} bol obnovený",
+    restored_short: "Súbor bol obnovený",
     preview: "Náhľad",
     retry: "Skúsiť nahrať znova",
     discard: "Zahodiť",
@@ -34,8 +38,10 @@ export const FIELD_SINGLE_ASSET_MESSAGES_SK = {
     uploading_short: "Nahráva sa…",
     uploading_progress: "Nahráva sa… {{percent}} %",
     uploaded: "Súbor {{name}} bol nahraný",
+    uploaded_short: "Súbor bol nahraný",
     upload_failed: "Nahrávanie zlyhalo",
     upload_failed_named: "Nahrávanie súboru {{name}} zlyhalo: {{error}}",
+    upload_failed_error: "Nahrávanie zlyhalo: {{error}}",
     invalid_type: "Tento typ súboru nie je podporovaný. Povolené: „{{accept}}“.",
     too_large: "Súbor je príliš veľký ({{size}}). Maximum je {{max}}.",
     single_only: "Sem je možné umiestniť iba jeden súbor. Presuňte alebo prilepte jeden súbor.",

package/dist/components/Input/field-single-asset-i18n.d.ts

@@ -10,11 +10,15 @@ export declare const FIELD_SINGLE_ASSET_MESSAGES_EN: {
     field_req_att: string;
     pick_file: string;
     replace_file: string;
+    replace_file_short: string;
     empty_hint: string;
     remove: string;
+    removing_short: string;
     removed: string;
+    removed_short: string;
     undo: string;
     restored: string;
+    restored_short: string;
     preview: string;
     retry: string;
     discard: string;
@@ -23,8 +27,10 @@ export declare const FIELD_SINGLE_ASSET_MESSAGES_EN: {
     uploading_short: string;
     uploading_progress: string;
     uploaded: string;
+    uploaded_short: string;
     upload_failed: string;
     upload_failed_named: string;
+    upload_failed_error: string;
     invalid_type: string;
     too_large: string;
     single_only: string;

package/dist/components/Input/field-single-asset-i18n.js

@@ -11,11 +11,15 @@ export const FIELD_SINGLE_ASSET_MESSAGES_EN = {
     field_req_att: "This field requires attention. Please review and try again.",
     pick_file: "Choose a file",
     replace_file: "Replace {{name}}",
+    replace_file_short: "Replace file",
     empty_hint: "Drop a file here or click to browse",
     remove: "Remove",
+    removing_short: "Removing…",
     removed: "{{name}} removed",
+    removed_short: "File removed",
     undo: "Undo",
     restored: "{{name}} restored",
+    restored_short: "File restored",
     preview: "Preview",
     retry: "Retry upload",
     discard: "Discard",
@@ -24,8 +28,10 @@ export const FIELD_SINGLE_ASSET_MESSAGES_EN = {
     uploading_short: "Uploading…",
     uploading_progress: "Uploading… {{percent}}%",
     uploaded: "{{name}} uploaded",
+    uploaded_short: "File uploaded",
     upload_failed: "Upload failed",
     upload_failed_named: "Upload of {{name}} failed: {{error}}",
+    upload_failed_error: "Upload failed: {{error}}",
     invalid_type: 'This file type is not supported. Allowed: "{{accept}}".',
     too_large: "The file is too large ({{size}}). The maximum is {{max}}.",
     single_only: "Only one file can be placed here. Drop or paste a single file.",

package/dist/components/Input/index.css

@@ -1645,8 +1645,11 @@
 		outline: 2px solid var(--stuic-color-ring);
 		outline-offset: 2px;
 	}
-	/* the tile is `disabled` while the field only displays — keep it legible */
+	/* the tile is `disabled` while the field only displays (or while an async
+	   `onBeforeRemove` is in flight) — keep it legible */
 	.stuic-field-single-asset[data-state="filled"]
+		.stuic-field-single-asset-preview:disabled,
+	.stuic-field-single-asset[data-state="removing"]
 		.stuic-field-single-asset-preview:disabled {
 		opacity: 1;
 	}
@@ -1699,9 +1702,12 @@
 		transition: opacity
 			var(--stuic-field-single-asset-transition, var(--stuic-transition));
 	}
+	/* pinned open on error (Retry / Discard must not depend on hover) and while a
+	   remove is in flight (the busy spinner lives in the Remove control) */
 	.stuic-field-single-asset-tile:hover .stuic-field-single-asset-actions,
 	.stuic-field-single-asset-tile:focus-within .stuic-field-single-asset-actions,
-	.stuic-field-single-asset[data-state="error"] .stuic-field-single-asset-actions {
+	.stuic-field-single-asset[data-state="error"] .stuic-field-single-asset-actions,
+	.stuic-field-single-asset[data-state="removing"] .stuic-field-single-asset-actions {
 		opacity: 1;
 		pointer-events: auto;
 	}
@@ -1725,9 +1731,16 @@
 		transition: background-color
 			var(--stuic-field-single-asset-transition, var(--stuic-transition));
 	}
-	.stuic-field-single-asset-control:hover {
+	.stuic-field-single-asset-control:hover:not([aria-disabled="true"]) {
 		background: var(--stuic-field-single-asset-control-bg-hover);
 	}
+	/* `aria-disabled`, not `disabled`: a busy control keeps focus for the round trip */
+	.stuic-field-single-asset-control[aria-disabled="true"] {
+		cursor: default;
+	}
+	.stuic-field-single-asset-control[aria-disabled="true"]:not([aria-busy="true"]) {
+		opacity: 0.5;
+	}
 	.stuic-field-single-asset-control:focus-visible {
 		outline: 2px solid var(--stuic-color-ring);
 		outline-offset: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.183.0",
+	"version": "3.186.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",