@joewinke/jatui 0.41.1 → 0.43.0

package/dist/components/EventCalendar.svelte.d.ts

@@ -0,0 +1,101 @@
+/**
+     * EventCalendar — month / week / day / agenda event calendar.
+     *
+     * The engine is upstreamed from MOS `CalendarGrid` (jatui-lfxyy): one lane
+     * allocator (`monthPacking`) places every bar and chip in a month row so they
+     * can't collide, lane capacity is measured from the row height, and timed
+     * events in week/day view split concurrent blocks side by side (`dayOverlap`).
+     * The skin takes clean-room ideas from BoardUI Pro's public calendar page:
+     * per-hue event token triplets (`--jatui-event-N{,-bg,-fg}`), a "+N more" that
+     * expands the week in place instead of navigating, a month-switcher pill that
+     * reuses the date-picker panel, and an agenda list.
+     *
+     * The host owns the events. Callbacks are all optional; each one switches a
+     * behaviour on (click to create, drag to move, drag/Shift-select a range).
+     * `onRangeChange` reports the visible range so a host can load just that.
+     *
+     * Keyboard (month): one tab stop on the grid; arrows / Home / End move the day,
+     * PageUp/PageDown change month (Shift = year), Enter creates (or opens the
+     * day), Shift+arrows extend a range when `onRangeSelect` is set. Event chips
+     * are buttons; Escape closes the details popover.
+     */
+import type { Snippet } from 'svelte';
+import { type Weekday } from './calendar/calendarGrid';
+import { type CalendarEventItem, type EventCalendarView } from './calendar/eventCalendar';
+import { type HourCycle } from './calendar/timeSlots';
+declare function $$render<E extends CalendarEventItem = CalendarEventItem>(): {
+    props: {
+        events: E[];
+        /** Current view (bindable). */
+        view?: EventCalendarView;
+        /** The focus date — which month / week / day is shown (bindable). */
+        date?: Date;
+        /** Views offered in the toolbar switcher. */
+        views?: EventCalendarView[];
+        weekStart?: Weekday | "locale";
+        locale?: string;
+        hourCycle?: HourCycle;
+        /** First and last (exclusive) hour of the week/day time grid. */
+        dayStartHour?: number;
+        dayEndHour?: number;
+        /** Pixel height of one hour in week/day view. */
+        hourHeight?: number;
+        /** Hour the time grid scrolls to on first show. */
+        scrollToHour?: number;
+        /** CSS height of the calendar body. */
+        height?: string;
+        toolbar?: boolean;
+        /** Extra toolbar content (filters, a "New event" button). */
+        toolbarEnd?: Snippet;
+        /** Custom chip content. */
+        eventContent?: Snippet<[E, {
+            view: EventCalendarView;
+            time: string;
+        }]>;
+        /** Details popover content, opened by clicking a chip. Gets the event and a close fn. */
+        eventDetails?: Snippet<[E, () => void]>;
+        /** `expand` (default): "+N more" grows the week in place. `day`: open day view. */
+        moreAction?: "expand" | "day";
+        onEventClick?: (ev: E, e: MouseEvent) => void;
+        /** Day number clicked. Defaults to opening day view when it is offered. */
+        onDayClick?: (date: Date) => void;
+        /** Empty cell / hour slot activated — the host opens its create flow. */
+        onCreate?: (date: Date, hour: number | undefined, e: MouseEvent | KeyboardEvent) => void;
+        /** Chip dropped on a day (and hour, in week/day view). Turns drag-to-move on. */
+        onEventMove?: (ev: E, target: {
+            date: Date;
+            hour?: number;
+            allDay: boolean;
+        }) => void;
+        /** Month cells dragged (or Shift+arrowed) across. */
+        onRangeSelect?: (start: Date, end: Date) => void;
+        /** The visible range changed — load events for it. */
+        onRangeChange?: (range: {
+            start: Date;
+            end: Date;
+        }, view: EventCalendarView) => void;
+        ariaLabel?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "date" | "view";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends CalendarEventItem = CalendarEventItem> {
+    props(): ReturnType<typeof $$render<E>>['props'];
+    events(): ReturnType<typeof $$render<E>>['events'];
+    slots(): ReturnType<typeof $$render<E>>['slots'];
+    bindings(): "date" | "view";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends CalendarEventItem = CalendarEventItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E>['props']>, ReturnType<__sveltets_Render<E>['events']>, ReturnType<__sveltets_Render<E>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E>['bindings']>;
+    } & ReturnType<__sveltets_Render<E>['exports']>;
+    <E extends CalendarEventItem = CalendarEventItem>(internal: unknown, props: ReturnType<__sveltets_Render<E>['props']> & {}): ReturnType<__sveltets_Render<E>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const EventCalendar: $$IsomorphicComponent;
+type EventCalendar<E extends CalendarEventItem = CalendarEventItem> = InstanceType<typeof EventCalendar<E>>;
+export default EventCalendar;

package/dist/components/FileDropzone.svelte

@@ -17,6 +17,7 @@
 
 <script lang="ts">
   import FileThumbnail from "./FileThumbnail.svelte"
+  import { clampProgress, dashOffset, perimeterRect, progressPercent } from "./uploadProgress.js"
 
   // Lightweight extension→MIME map (avoids mime-types dependency)
   const EXT_TO_MIME: Record<string, string> = {
@@ -87,6 +88,15 @@
     dropSubtext?: string
     /** Called when the user selects or drops files (after validation) */
     onFilesSelected?: (files: File[], errors: string[]) => void
+    /**
+     * Upload progress, 0–100. When set, the zone's dashed border cross-fades
+     * into a primary stroke that fills clockwise around the perimeter, and a
+     * `%` badge slides in on the top edge — no layout shift. Leave it
+     * undefined/null for the plain (indeterminate) behaviour.
+     */
+    progress?: number | null
+    /** Accessible name for the progress indicator (default "Upload progress"). */
+    progressLabel?: string
   }
 
   let {
@@ -107,6 +117,8 @@
     dropLabel = "Upload files",
     dropSubtext,
     onFilesSelected,
+    progress = null,
+    progressLabel = "Upload progress",
   }: Props = $props()
 
   let isDragOver = $state(false)
@@ -114,6 +126,27 @@
   let dropzoneRef = $state<HTMLElement>(undefined!)
   let selectedFiles = $state<File[]>([])
 
+  // Upload progress perimeter (jatui-bns3w). The rect tracks the zone's
+  // border-box via ResizeObserver so the stroke lands exactly on the 2px border.
+  const ZONE_BORDER = 2
+  const ZONE_RADIUS = 8 // rounded-lg
+  let zoneW = $state(0)
+  let zoneH = $state(0)
+  const progressValue = $derived(clampProgress(progress))
+  const progressActive = $derived(progressValue !== null)
+  const progressDone = $derived(progressValue === 100)
+  const progressRect = $derived(perimeterRect(zoneW, zoneH, ZONE_BORDER, ZONE_RADIUS))
+
+  $effect(() => {
+    if (!dropzoneRef || typeof ResizeObserver === "undefined") return
+    const ro = new ResizeObserver(() => {
+      zoneW = dropzoneRef.offsetWidth
+      zoneH = dropzoneRef.offsetHeight
+    })
+    ro.observe(dropzoneRef)
+    return () => ro.disconnect()
+  })
+
   // Human-readable accepted extensions for display
   const acceptedExtensions = $derived(
     accept
@@ -305,14 +338,17 @@
   />
 
   <!-- Dropzone -->
+  <div class="relative">
   <div
     bind:this={dropzoneRef}
     class="relative border-2 border-dashed rounded-lg p-6 transition-all duration-200 cursor-pointer
            {isDragOver
       ? 'border-primary bg-primary/5 scale-[1.02]'
-      : disabled
-        ? 'border-base-300 bg-base-200 cursor-not-allowed'
-        : 'border-base-300 hover:border-primary hover:bg-primary/5'}"
+      : progressActive
+        ? 'jatui-dz-border-hidden'
+        : disabled
+          ? 'border-base-300 bg-base-200 cursor-not-allowed'
+          : 'border-base-300 hover:border-primary hover:bg-primary/5'}"
     onclick={openFileDialog}
     ondragenter={handleDragEnter}
     ondragleave={handleDragLeave}
@@ -398,6 +434,50 @@
     {/if}
   </div>
 
+  <!-- Upload progress: perimeter stroke + % badge. A sibling of the
+       role="button" zone (a progressbar inside a button is flattened by AT). -->
+  <div
+    class="jatui-dz-progress"
+    class:is-active={progressActive && !isDragOver}
+    class:is-done={progressDone}
+    role={progressActive ? "progressbar" : undefined}
+    aria-label={progressActive ? progressLabel : undefined}
+    aria-valuemin={progressActive ? 0 : undefined}
+    aria-valuemax={progressActive ? 100 : undefined}
+    aria-valuenow={progressActive ? progressPercent(progressValue) : undefined}
+    aria-hidden={progressActive ? undefined : "true"}
+  >
+    {#if zoneW > 0 && zoneH > 0}
+      <svg class="jatui-dz-ring" width={zoneW} height={zoneH} aria-hidden="true">
+        <rect
+          class="jatui-dz-track"
+          x={progressRect.x}
+          y={progressRect.y}
+          width={progressRect.width}
+          height={progressRect.height}
+          rx={progressRect.rx}
+          stroke-width={ZONE_BORDER}
+        />
+        <rect
+          class="jatui-dz-fill"
+          x={progressRect.x}
+          y={progressRect.y}
+          width={progressRect.width}
+          height={progressRect.height}
+          rx={progressRect.rx}
+          stroke-width={ZONE_BORDER}
+          pathLength="100"
+          stroke-dasharray="100"
+          stroke-dashoffset={dashOffset(progressValue, 100)}
+        />
+      </svg>
+    {/if}
+    <span class="jatui-dz-badge badge badge-sm badge-primary tabular-nums" aria-hidden="true">
+      {progressPercent(progressValue)}%
+    </span>
+  </div>
+  </div>
+
   <!-- Selected Files (before upload) -->
   {#if selectedFiles.length > 0 && !isUploading && uploadedFiles.length === 0}
     <div class="mt-4 space-y-2">
@@ -490,4 +570,86 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
   }
+
+  /* Upload progress perimeter (jatui-bns3w). The dashed border fades out and
+     an SVG stroke on the same 2px line fills clockwise; the % badge slides in
+     on the top edge. Opacity/transform only — the zone never changes size. */
+  .jatui-dz-border-hidden {
+    border-color: transparent;
+  }
+
+  .jatui-dz-progress {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .jatui-dz-ring {
+    position: absolute;
+    inset: 0;
+    overflow: visible;
+    opacity: 0;
+    transition: opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+  }
+
+  .jatui-dz-progress.is-active .jatui-dz-ring {
+    opacity: 1;
+  }
+
+  .jatui-dz-track {
+    fill: none;
+    stroke: var(--color-base-300);
+  }
+
+  .jatui-dz-fill {
+    fill: none;
+    stroke: var(--color-primary);
+    stroke-linecap: round;
+    transition:
+      stroke-dashoffset var(--motion-move, 300ms) var(--motion-glide, ease-out),
+      stroke var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+  }
+
+  .jatui-dz-progress.is-done .jatui-dz-fill {
+    stroke: var(--color-success);
+  }
+
+  .jatui-dz-badge {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    opacity: 0;
+    transform: translate(-50%, calc(-50% - var(--motion-travel, 16px)));
+    transition:
+      opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out),
+      transform var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+  }
+
+  .jatui-dz-progress.is-active .jatui-dz-badge {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  .jatui-dz-progress.is-done .jatui-dz-badge {
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  /* Calm: no slide, the badge just appears. */
+  :global([data-motion="calm"]) .jatui-dz-badge {
+    transform: translate(-50%, -50%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .jatui-dz-ring,
+    .jatui-dz-fill,
+    .jatui-dz-badge {
+      transition: none;
+    }
+
+    .jatui-dz-badge {
+      transform: translate(-50%, -50%);
+    }
+  }
 </style>

package/dist/components/FileDropzone.svelte.d.ts

@@ -34,6 +34,15 @@ interface Props {
     dropSubtext?: string;
     /** Called when the user selects or drops files (after validation) */
     onFilesSelected?: (files: File[], errors: string[]) => void;
+    /**
+     * Upload progress, 0–100. When set, the zone's dashed border cross-fades
+     * into a primary stroke that fills clockwise around the perimeter, and a
+     * `%` badge slides in on the top edge — no layout shift. Leave it
+     * undefined/null for the plain (indeterminate) behaviour.
+     */
+    progress?: number | null;
+    /** Accessible name for the progress indicator (default "Upload progress"). */
+    progressLabel?: string;
 }
 declare const FileDropzone: import("svelte").Component<Props, {}, "">;
 type FileDropzone = ReturnType<typeof FileDropzone>;

package/dist/components/TextInput.svelte

@@ -7,7 +7,10 @@
 	 * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
 	 */
 
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import FieldLabel from './field/FieldLabel.svelte';
+	import FieldHint from './field/FieldHint.svelte';
 
 	/**
 	 * Any other native attribute (aria-label, aria-labelledby, data-*, title,
@@ -56,6 +59,12 @@
 		 * consumers are unaffected when this prop is absent/false.
 		 */
 		floatingLabel?: boolean;
+		/** Leading icon / addon inside the field (e.g. a search glyph, "https://"). */
+		leading?: Snippet;
+		/** Trailing icon / addon inside the field (e.g. a unit, a clear button). */
+		trailing?: Snippet;
+		/** Info-icon hint after the label (shared `use:tooltip`). */
+		labelTooltip?: string;
 		class?: string;
 		id?: string;
 		name?: string;
@@ -78,6 +87,9 @@
 		pattern,
 		showCount = false,
 		floatingLabel = false,
+		leading,
+		trailing,
+		labelTooltip,
 		class: className = '',
 		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
 		name = '',
@@ -87,7 +99,10 @@
 
 	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
 
-	const inputClass = $derived(
+	// With a leading/trailing addon the DaisyUI `input` skin moves to a wrapper
+	// (DaisyUI 5's `<label class="input">` pattern) and the <input> goes bare.
+	const hasAddons = $derived(!!leading || !!trailing);
+	const shellClass = $derived(
 		[
 			'input input-bordered w-full transition-shadow duration-200',
 			sizeClass,
@@ -98,11 +113,13 @@
 			.filter(Boolean)
 			.join(' ')
 	);
+	const inputClass = $derived(hasAddons ? 'jatui-input-bare' : shellClass);
 
 	const characterCount = $derived(value?.length || 0);
 	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
 
 	let inputEl: HTMLInputElement | undefined = $state();
+	let shellEl: HTMLDivElement | undefined = $state();
 	let hadError = false;
 
 	// Error shake: embedded keyframe (jatui-shake-x), no host-app dependency.
@@ -110,14 +127,15 @@
 	// Self-contained reflow-restart so repeat errors re-shake.
 	$effect(() => {
 		const hasError = !!error;
-		if (hasError && !hadError && inputEl) {
+		const target = hasAddons ? shellEl : inputEl;
+		if (hasError && !hadError && target) {
 			const reduce =
 				typeof window !== 'undefined' &&
 				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 			if (!reduce) {
-				inputEl.classList.remove('jatui-input-shake');
-				void inputEl.offsetWidth;
-				inputEl.classList.add('jatui-input-shake');
+				target.classList.remove('jatui-input-shake');
+				void target.offsetWidth;
+				target.classList.add('jatui-input-shake');
 			}
 		}
 		hadError = hasError;
@@ -126,17 +144,10 @@
 
 <div class="form-control w-full" class:jatui-float-wrap={floatingLabel}>
 	{#if label && !floatingLabel}
-		<label for={id} class="label">
-			<span class="text-[0.8125rem] font-medium text-base-content/85">
-				{label}
-				{#if required}
-					<span class="text-error ml-1">*</span>
-				{/if}
-			</span>
-		</label>
+		<FieldLabel for={id} text={label} {required} tooltip={labelTooltip} />
 	{/if}
 
-	<div class:jatui-float-field={floatingLabel}>
+	{#snippet field()}
 		<input
 			{...rest}
 			bind:this={inputEl}
@@ -161,6 +172,18 @@
 			aria-invalid={error ? 'true' : 'false'}
 			onanimationend={() => inputEl?.classList.remove('jatui-input-shake')}
 		/>
+	{/snippet}
+
+	<div class:jatui-float-field={floatingLabel}>
+		{#if hasAddons}
+			<div class="{shellClass} jatui-input-shell" bind:this={shellEl} onanimationend={() => shellEl?.classList.remove('jatui-input-shake')}>
+				{#if leading}<span class="jatui-input-addon text-base-content/55">{@render leading()}</span>{/if}
+				{@render field()}
+				{#if trailing}<span class="jatui-input-addon text-base-content/55">{@render trailing()}</span>{/if}
+			</div>
+		{:else}
+			{@render field()}
+		{/if}
 
 		{#if label && floatingLabel}
 			<label for={id} class="jatui-float-label">
@@ -181,13 +204,9 @@
 	{/if}
 
 	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
-		</div>
+		<FieldHint id="{id}-error" text={error} error />
 	{:else if helpText}
-		<div class="label">
-			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
-		</div>
+		<FieldHint id="{id}-help" text={helpText} />
 	{/if}
 </div>
 
@@ -213,6 +232,38 @@
 		}
 	}
 
+	/* ── Leading / trailing addons ────────────────────────────────
+	   The shell carries the DaisyUI input skin; the inner input is bare and
+	   grows. Focus ring comes from the shell's :focus-within. */
+	.jatui-input-shell {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.jatui-input-shell:focus-within {
+		outline: 2px solid var(--color-base-content);
+		outline-offset: 2px;
+	}
+	.jatui-input-shell.input-error:focus-within {
+		outline-color: var(--color-error);
+	}
+	:global(.jatui-input-bare) {
+		flex: 1 1 auto;
+		min-width: 0;
+		height: 100%;
+		background: transparent;
+		border: 0;
+		outline: none;
+		font: inherit;
+		color: inherit;
+	}
+	.jatui-input-addon {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		white-space: nowrap;
+	}
+
 	/* ── Floating Label ───────────────────────────────────────────
 	   Label sits inside the field at rest, lifts + scales on focus or filled.
 	   Pure CSS: uses :placeholder-shown to detect empty state (input must have

package/dist/components/TextInput.svelte.d.ts

@@ -5,6 +5,7 @@
      * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
      * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
      */
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 /**
  * Any other native attribute (aria-label, aria-labelledby, data-*, title,
@@ -35,6 +36,12 @@ interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'size' | 'c
      * consumers are unaffected when this prop is absent/false.
      */
     floatingLabel?: boolean;
+    /** Leading icon / addon inside the field (e.g. a search glyph, "https://"). */
+    leading?: Snippet;
+    /** Trailing icon / addon inside the field (e.g. a unit, a clear button). */
+    trailing?: Snippet;
+    /** Info-icon hint after the label (shared `use:tooltip`). */
+    labelTooltip?: string;
     class?: string;
     id?: string;
     name?: string;

package/dist/components/ThumbnailGrid.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { clampProgress, dashOffset, isInFlight, progressPercent } from './uploadProgress.js';
 
 	/**
 	 * Generic thumbnail item — the decoupled chimaro shape. Unlike chimaro's
@@ -13,6 +14,13 @@
 		url?: string | null;
 		/** Alt text / display label. */
 		alt: string;
+		/**
+		 * Upload progress, 0–100. While below 100 a ring draws clockwise around
+		 * the tile and a tiny % sits in the remove-× corner; at 100 the %
+		 * cross-fades into the × (same slot, no layout shift). Omit for a
+		 * plain tile.
+		 */
+		progress?: number | null;
 	}
 
 	interface Props {
@@ -91,6 +99,8 @@
 			: 'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100'
 	);
 
+	const hiddenWhileUploading = 'pointer-events-none opacity-0';
+
 	function shortLabel(alt: string): string {
 		return alt.length > 14 ? `${alt.slice(0, 14)}…` : alt;
 	}
@@ -98,6 +108,8 @@
 
 <div class="{isGrid ? 'grid gap-2' : 'flex flex-wrap items-center gap-2'} {gridCols ?? ''} {className}">
 	{#each visible as item (item.id)}
+		{@const progressValue = clampProgress(item.progress)}
+		{@const uploading = isInFlight(item.progress)}
 		<div class="group relative">
 			<button
 				type="button"
@@ -120,10 +132,49 @@
 				{/if}
 			</button>
 
+			{#if progressValue !== null}
+				<!-- Upload ring: drawn ON the tile border (overflow visible, so the
+				     2px stroke straddles the edge); a sibling of the tile button so
+				     the progressbar role is not flattened by the button. -->
+				<span
+					class="jatui-thumb-progress pointer-events-none absolute inset-0"
+					class:is-uploading={uploading}
+					role={uploading ? 'progressbar' : undefined}
+					aria-label={uploading ? `Uploading ${item.alt}` : undefined}
+					aria-valuemin={uploading ? 0 : undefined}
+					aria-valuemax={uploading ? 100 : undefined}
+					aria-valuenow={uploading ? progressPercent(progressValue) : undefined}
+					aria-hidden={uploading ? undefined : 'true'}
+				>
+					<svg class="jatui-thumb-ring absolute inset-0 h-full w-full" aria-hidden="true">
+						<rect class="jatui-thumb-track" width="100%" height="100%" rx="4" />
+						<rect
+							class="jatui-thumb-fill"
+							width="100%"
+							height="100%"
+							rx="4"
+							pathLength="1"
+							stroke-dasharray="1"
+							stroke-dashoffset={dashOffset(progressValue, 1)}
+						/>
+					</svg>
+					<span
+						class="jatui-thumb-pct absolute -top-1 -right-1 z-20 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-0.5 text-primary-content tabular-nums"
+						aria-hidden="true"
+					>
+						{progressPercent(progressValue)}
+					</span>
+				</span>
+			{/if}
+
 			{#if removable && onRemove}
 				<button
 					type="button"
-					class="absolute -top-1 -right-1 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-error text-error-content {removeVisibility}"
+					class="jatui-thumb-remove absolute -top-1 -right-1 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-error text-error-content {uploading
+						? hiddenWhileUploading
+						: removeVisibility}"
+					tabindex={uploading ? -1 : undefined}
+					aria-hidden={uploading ? 'true' : undefined}
 					onclick={(e) => {
 						e.stopPropagation();
 						onRemove(item);
@@ -162,3 +213,57 @@
 		</button>
 	{/if}
 </div>
+
+<style>
+	/* Upload ring + % badge (jatui-bns3w). Opacity/stroke only, on motion
+	   tokens — under prefers-reduced-motion the tokens collapse to 0ms, so
+	   the % → × swap is instant. */
+	.jatui-thumb-ring {
+		overflow: visible;
+		transition: opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.jatui-thumb-progress:not(.is-uploading) .jatui-thumb-ring {
+		opacity: 0;
+	}
+
+	.jatui-thumb-track,
+	.jatui-thumb-fill {
+		fill: none;
+		stroke-width: 2;
+	}
+
+	.jatui-thumb-track {
+		stroke: color-mix(in oklch, var(--color-base-content) 15%, transparent);
+	}
+
+	.jatui-thumb-fill {
+		stroke: var(--color-primary);
+		stroke-linecap: round;
+		transition: stroke-dashoffset var(--motion-move, 300ms) var(--motion-glide, ease-out);
+	}
+
+	.jatui-thumb-pct {
+		font-size: 0.5rem;
+		line-height: 1;
+		font-weight: 600;
+		transition: opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.jatui-thumb-progress:not(.is-uploading) .jatui-thumb-pct {
+		opacity: 0;
+	}
+
+	.jatui-thumb-remove {
+		transition: opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-thumb-ring,
+		.jatui-thumb-fill,
+		.jatui-thumb-pct,
+		.jatui-thumb-remove {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/ThumbnailGrid.svelte.d.ts

@@ -11,6 +11,13 @@ export interface ThumbnailItem {
     url?: string | null;
     /** Alt text / display label. */
     alt: string;
+    /**
+     * Upload progress, 0–100. While below 100 a ring draws clockwise around
+     * the tile and a tiny % sits in the remove-× corner; at 100 the %
+     * cross-fades into the × (same slot, no layout shift). Omit for a
+     * plain tile.
+     */
+    progress?: number | null;
 }
 interface Props {
     items: ThumbnailItem[];