@joewinke/jatui 0.42.0 → 0.44.0

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[];

package/dist/components/basic/Alert.svelte

@@ -1,12 +1,42 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { motionScale } from '../../motion/transitions';
+	import CloseButton from '../CloseButton.svelte';
+
 	interface Props {
 		type?: 'info' | 'success' | 'warning' | 'error';
 		title?: string;
 		class?: string;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
+		/** Show a Dismiss (×) button. The alert exits, then `onClose` fires. */
+		dismissible?: boolean;
+		/** Fired after the dismiss exit transition has finished. */
+		onClose?: () => void;
+		/** Call-to-action area (buttons/links). Full-width in `variant="card"`. */
+		action?: Snippet;
+		/**
+		 * Delay (ms) before the alert enters — lets surrounding UI settle first.
+		 * Reduced motion: it still waits, then appears without animating.
+		 */
+		introDelay?: number;
+		/** 'card' = vertical, sidebar-density layout: icon on top, title, text, CTA. */
+		variant?: 'default' | 'card';
+		/** Accessible label for the dismiss button. */
+		dismissLabel?: string;
 	}
 
-	let { type = 'info', title, class: className = '', children }: Props = $props();
+	let {
+		type = 'info',
+		title,
+		class: className = '',
+		children,
+		dismissible = false,
+		onClose,
+		action,
+		introDelay = 0,
+		variant = 'default',
+		dismissLabel = 'Dismiss'
+	}: Props = $props();
 
 	const typeClass = $derived(
 		{ info: 'alert-info', success: 'alert-success', warning: 'alert-warning', error: 'alert-error' }[type]
@@ -18,19 +48,86 @@
 		warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
 		error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
 	};
+
+	// introDelay: start hidden, enter after the delay (the `in:` transition only
+	// plays on a toggle, never on first render — so no delay means no intro).
+	let visible = $state(introDelay <= 0);
+	$effect(() => {
+		if (visible || introDelay <= 0) return;
+		const t = setTimeout(() => (visible = true), introDelay);
+		return () => clearTimeout(t);
+	});
+
+	function dismiss() {
+		visible = false;
+	}
 </script>
 
-<div
-	class="alert {typeClass} {className}"
-	role={type === 'error' ? 'alert' : 'status'}
->
-	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
-	</svg>
-	<div>
-		{#if title}
-			<h3 class="font-bold">{title}</h3>
-		{/if}
-		{#if children}{@render children()}{/if}
-	</div>
-</div>
+{#snippet closeButton(extra: string)}
+	<CloseButton
+		label={dismissLabel}
+		size="xs"
+		shape="square"
+		class="jatui-alert-close {extra}"
+		onclick={dismiss}
+	/>
+{/snippet}
+
+<!-- `{#if visible}` wraps each element directly: transitions are local, so
+     they only play when their IMMEDIATE block toggles. -->
+{#if variant === 'card'}
+	{#if visible}
+		<div
+			class="alert {typeClass} jatui-alert-card relative flex flex-col items-start gap-2 text-start {dismissible ? 'pe-10' : ''} {className}"
+			role={type === 'error' ? 'alert' : 'status'}
+			in:motionScale={{ start: 0.95 }}
+			out:motionScale={{ start: 0.85 }}
+			onoutroend={() => onClose?.()}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
+			</svg>
+			<div class="w-full min-w-0">
+				{#if title}
+					<h3 class="font-bold">{title}</h3>
+				{/if}
+				{#if children}<div class="text-sm opacity-80">{@render children()}</div>{/if}
+			</div>
+			{#if action}
+				<div class="jatui-alert-action jatui-alert-action--full w-full">{@render action()}</div>
+			{/if}
+			{#if dismissible}{@render closeButton('absolute top-2 end-2')}{/if}
+		</div>
+	{/if}
+{:else}
+	{#if visible}
+		<div
+			class="alert {typeClass} {className}"
+			role={type === 'error' ? 'alert' : 'status'}
+			in:motionScale={{ start: 0.95 }}
+			out:motionScale={{ start: 0.85 }}
+			onoutroend={() => onClose?.()}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
+			</svg>
+			<div>
+				{#if title}
+					<h3 class="font-bold">{title}</h3>
+				{/if}
+				{#if children}{@render children()}{/if}
+			</div>
+			{#if action}
+				<div class="jatui-alert-action flex flex-wrap items-center gap-2">{@render action()}</div>
+			{/if}
+			{#if dismissible}{@render closeButton('')}{/if}
+		</div>
+	{/if}
+{/if}
+
+<style>
+	/* Full-width CTA in the card layout: stretch any direct button/link child. */
+	.jatui-alert-action--full > :global(*) {
+		width: 100%;
+	}
+</style>

package/dist/components/basic/Alert.svelte.d.ts

@@ -1,8 +1,24 @@
+import type { Snippet } from 'svelte';
 interface Props {
     type?: 'info' | 'success' | 'warning' | 'error';
     title?: string;
     class?: string;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
+    /** Show a Dismiss (×) button. The alert exits, then `onClose` fires. */
+    dismissible?: boolean;
+    /** Fired after the dismiss exit transition has finished. */
+    onClose?: () => void;
+    /** Call-to-action area (buttons/links). Full-width in `variant="card"`. */
+    action?: Snippet;
+    /**
+     * Delay (ms) before the alert enters — lets surrounding UI settle first.
+     * Reduced motion: it still waits, then appears without animating.
+     */
+    introDelay?: number;
+    /** 'card' = vertical, sidebar-density layout: icon on top, title, text, CTA. */
+    variant?: 'default' | 'card';
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
 }
 declare const Alert: import("svelte").Component<Props, {}, "">;
 type Alert = ReturnType<typeof Alert>;

package/dist/components/basic/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import CheckGlyph from '../form-cards/CheckGlyph.svelte';
 
 	/**
 	 * Any other native attribute (aria-label, aria-describedby, data-*, title,
@@ -25,6 +26,12 @@
 		id?: string;
 		onchange?: (checked: boolean) => void;
 		class?: string;
+		/**
+		 * Draw the box with the shared `CheckGlyph` (the same one `CheckboxCard`
+		 * uses) and draw the tick on when the user checks it. The native input
+		 * stays in the DOM, visually hidden, so keys, forms and AT are unchanged.
+		 */
+		animated?: boolean;
 	}
 
 	let {
@@ -38,9 +45,14 @@
 		id,
 		onchange,
 		class: className = '',
+		animated = false,
 		...rest
 	}: Props = $props();
 
+	// Only animate the tick after the user has changed the box, so a box that
+	// renders pre-checked shows its tick at rest instead of drawing it on load.
+	let interacted = $state(false);
+
 	const sizeClass = $derived({ xs: 'checkbox-xs', sm: 'checkbox-sm', md: '', lg: 'checkbox-lg' }[size]);
 	const variantClass = $derived(
 		{
@@ -68,11 +80,32 @@
 
 	function handleChange(e: Event) {
 		checked = (e.target as HTMLInputElement).checked;
+		interacted = true;
 		onchange?.(checked);
 	}
 </script>
 
-{#if label}
+{#if animated}
+	<label
+		class="jatui-checkbox-target jatui-checkbox-animated {label ? 'jatui-checkbox-row' : 'jatui-checkbox-bare'} {className}"
+		class:jatui-checkbox-disabled={disabled}
+		for={inputId}
+	>
+		<input
+			{...rest}
+			bind:this={inputEl}
+			type="checkbox"
+			{name}
+			id={inputId}
+			class="jatui-checkbox-native"
+			checked={checked}
+			{disabled}
+			onchange={handleChange}
+		/>
+		<CheckGlyph {checked} {indeterminate} {disabled} {size} {variant} animate={interacted} />
+		{#if label}<span class="label-text">{label}</span>{/if}
+	</label>
+{:else if label}
 	<label class="jatui-checkbox-target jatui-checkbox-row" for={inputId}>
 		<input
 			{...rest}
@@ -114,6 +147,25 @@
 		display: flex;
 		gap: 0.5rem;
 	}
+	/* animated: the native input is visually hidden but stays focusable */
+	.jatui-checkbox-animated {
+		position: relative;
+	}
+	.jatui-checkbox-native {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+	.jatui-checkbox-animated:has(.jatui-checkbox-native:focus-visible) :global(.jatui-check-glyph) {
+		outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent);
+		outline-offset: 2px;
+	}
+	.jatui-checkbox-disabled {
+		cursor: not-allowed;
+	}
 	.jatui-checkbox-bare {
 		display: inline-flex;
 		justify-content: center;

package/dist/components/basic/Checkbox.svelte.d.ts

@@ -19,6 +19,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | 'size' |
     id?: string;
     onchange?: (checked: boolean) => void;
     class?: string;
+    /**
+     * Draw the box with the shared `CheckGlyph` (the same one `CheckboxCard`
+     * uses) and draw the tick on when the user checks it. The native input
+     * stays in the DOM, visually hidden, so keys, forms and AT are unchanged.
+     */
+    animated?: boolean;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/basic/RadioGroup.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChoiceCard from '../form-cards/ChoiceCard.svelte';
+
 	export interface RadioOption {
 		value: string;
 		label: string;
 		disabled?: boolean;
+		/** Secondary line — shown by `variant="card"`. */
+		description?: string;
+		/** Leading icon — shown by `variant="card"`. */
+		icon?: Snippet;
 	}
 
 	interface Props {
@@ -14,6 +21,16 @@
 		orientation?: 'horizontal' | 'vertical';
 		onchange?: (value: string) => void;
 		class?: string;
+		/**
+		 * `card` renders each option as a ChoiceCard (title + description +
+		 * icon, whole card clickable). The radios stay native, so arrow keys
+		 * still rove inside the group.
+		 */
+		display?: 'default' | 'card';
+		/** Accessible name for the group (`aria-label`). */
+		label?: string;
+		/** Where the radio dot sits on a card. Default `start`. */
+		controlPosition?: 'start' | 'end';
 	}
 
 	let {
@@ -24,7 +41,10 @@
 		variant = 'primary',
 		orientation = 'vertical',
 		onchange,
-		class: className = ''
+		class: className = '',
+		display = 'default',
+		label,
+		controlPosition = 'start'
 	}: Props = $props();
 
 	const sizeClass = $derived({ xs: 'radio-xs', sm: 'radio-sm', md: '', lg: 'radio-lg' }[size]);
@@ -42,7 +62,15 @@
 	);
 	const radioClass = $derived(['radio', sizeClass, variantClass].filter(Boolean).join(' '));
 	const groupClass = $derived(
-		['flex', orientation === 'horizontal' ? 'flex-row flex-wrap gap-4' : 'flex-col gap-2', className].join(' ')
+		[
+			'flex',
+			orientation === 'horizontal'
+				? display === 'card'
+					? 'flex-row flex-wrap gap-3'
+					: 'flex-row flex-wrap gap-4'
+				: 'flex-col gap-2',
+			className
+		].join(' ')
 	);
 
 	function handleChange(e: Event, optValue: string) {
@@ -51,9 +79,36 @@
 	}
 </script>
 
-<div class={groupClass} role="radiogroup">
+<div class={groupClass} role="radiogroup" aria-label={label}>
 	{#each options as opt}
 		{@const inputId = `${name}-${opt.value}`}
+		{#if display === 'card'}
+			<ChoiceCard
+				title={opt.label}
+				description={opt.description}
+				icon={opt.icon}
+				disabled={opt.disabled}
+				size={size === 'xs' || size === 'sm' ? 'sm' : 'md'}
+				{controlPosition}
+				for={inputId}
+				descriptionId={opt.description ? `${inputId}-desc` : undefined}
+				class={orientation === 'horizontal' ? 'min-w-48 flex-1' : ''}
+			>
+				{#snippet control()}
+					<input
+						type="radio"
+						id={inputId}
+						{name}
+						value={opt.value}
+						class={radioClass}
+						checked={value === opt.value}
+						disabled={opt.disabled}
+						aria-describedby={opt.description ? `${inputId}-desc` : undefined}
+						onchange={(e) => handleChange(e, opt.value)}
+					/>
+				{/snippet}
+			</ChoiceCard>
+		{:else}
 		<label class="flex cursor-pointer items-center gap-2" for={inputId}>
 			<input
 				type="radio"
@@ -67,5 +122,6 @@
 			/>
 			<span class="label-text">{opt.label}</span>
 		</label>
+		{/if}
 	{/each}
 </div>

package/dist/components/basic/RadioGroup.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from 'svelte';
 export interface RadioOption {
     value: string;
     label: string;
     disabled?: boolean;
+    /** Secondary line — shown by `variant="card"`. */
+    description?: string;
+    /** Leading icon — shown by `variant="card"`. */
+    icon?: Snippet;
 }
 interface Props {
     value?: string;
@@ -12,6 +17,16 @@ interface Props {
     orientation?: 'horizontal' | 'vertical';
     onchange?: (value: string) => void;
     class?: string;
+    /**
+     * `card` renders each option as a ChoiceCard (title + description +
+     * icon, whole card clickable). The radios stay native, so arrow keys
+     * still rove inside the group.
+     */
+    display?: 'default' | 'card';
+    /** Accessible name for the group (`aria-label`). */
+    label?: string;
+    /** Where the radio dot sits on a card. Default `start`. */
+    controlPosition?: 'start' | 'end';
 }
 declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;