@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/CloseButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	/**
+	 * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+	 * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+	 * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+	 * cross never turns hairline at xs or chunky at lg.
+	 *
+	 *   <CloseButton onclick={close} />
+	 *   <CloseButton label="Close drawer" size="md" onclick={close} />
+	 *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+	 *
+	 * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+	 */
+	import IconButton, { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+
+	interface Props {
+		/** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+		label?: string;
+		size?: IconButtonSize;
+		variant?: IconButtonVariant;
+		shape?: 'square' | 'circle';
+		disabled?: boolean;
+		/** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+		tooltip?: boolean | string;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		label = 'Close',
+		size = 'sm',
+		variant = 'ghost',
+		shape = 'circle',
+		disabled = false,
+		tooltip = false,
+		class: className = '',
+		onclick,
+		...rest
+	}: Props = $props();
+
+	/** Glyph box per size — the X itself is inset to ~58% of it. */
+	const GLYPH: Record<IconButtonSize, number> = { xs: 12, sm: 16, md: 18, lg: 22 };
+	const STROKE: Record<IconButtonSize, number> = { xs: 1.5, sm: 1.75, md: 2, lg: 2 };
+	const px = $derived(GLYPH[size] ?? 16);
+</script>
+
+<IconButton
+	{...rest}
+	{label}
+	{size}
+	{variant}
+	{shape}
+	{disabled}
+	{tooltip}
+	{onclick}
+	class="jatui-close-btn {className}"
+>
+	<svg
+		width={px}
+		height={px}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-linecap="round"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path
+			d="M17 7L7 17M7 7l10 10"
+			stroke-width={STROKE[size] ?? 1.75}
+			vector-effect="non-scaling-stroke"
+		/>
+	</svg>
+</IconButton>

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

@@ -0,0 +1,29 @@
+/**
+     * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+     * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+     * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+     * cross never turns hairline at xs or chunky at lg.
+     *
+     *   <CloseButton onclick={close} />
+     *   <CloseButton label="Close drawer" size="md" onclick={close} />
+     *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+     *
+     * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+     */
+import { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+interface Props {
+    /** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+    label?: string;
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    shape?: 'square' | 'circle';
+    disabled?: boolean;
+    /** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+    tooltip?: boolean | string;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/components/Drawer.svelte

@@ -8,6 +8,8 @@
 	 * class (e.g. `'w-[42rem]'`) which takes precedence over `size`.
 	 */
 
+	import CloseButton from './CloseButton.svelte';
+	import { scrollEdge as scrollEdgeAction } from '../actions/scrollEdge';
 	import { untrack, type Snippet } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
@@ -22,6 +24,8 @@
 		width?: string;
 		showCloseButton?: boolean;
 		contentClass?: string;
+		/** Soft progressive-blur fade at the top of the body once it scrolls (`use:scrollEdge`). Default true. */
+		scrollEdge?: boolean;
 		/**
 		 * When true (default), keydown events fired inside the drawer panel are
 		 * stopped from propagating to window — preventing page-level list/keyboard
@@ -59,6 +63,7 @@
 		width,
 		showCloseButton = true,
 		contentClass = '',
+		scrollEdge = true,
 		trapKeys = true,
 		shortcutRegistry,
 		shortcutContext = 'drawer',
@@ -150,22 +155,16 @@
 					{@render headerActions()}
 				{/if}
 				{#if showCloseButton}
-					<button
-						type="button"
-						class="btn btn-sm btn-circle btn-ghost"
-						onclick={handleClose}
-						aria-label="Close drawer"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
+					<CloseButton label="Close drawer" onclick={handleClose} />
 				{/if}
 			</div>
 		</div>
 	{/if}
 
-	<div class="flex-1 overflow-y-auto {contentClass}">
+	<div
+		class="flex-1 overflow-y-auto {contentClass}"
+		use:scrollEdgeAction={{ enabled: scrollEdge, surface: 'var(--color-base-200)' }}
+	>
 		{#if open && children}
 			{@render children()}
 		{/if}

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

@@ -1,11 +1,3 @@
-/**
-     * Drawer Component
-     *
-     * Sliding panel overlay with backdrop, escape key, and header actions.
-     * Supports a `footer` snippet (pinned below the scrollable body —
-     * matches mardukos DrawerShell) and an arbitrary Tailwind `width`
-     * class (e.g. `'w-[42rem]'`) which takes precedence over `size`.
-     */
 import { type Snippet } from 'svelte';
 import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 interface Props {
@@ -19,6 +11,8 @@ interface Props {
     width?: string;
     showCloseButton?: boolean;
     contentClass?: string;
+    /** Soft progressive-blur fade at the top of the body once it scrolls (`use:scrollEdge`). Default true. */
+    scrollEdge?: boolean;
     /**
      * When true (default), keydown events fired inside the drawer panel are
      * stopped from propagating to window — preventing page-level list/keyboard

package/dist/components/FloatingActionBar.svelte

@@ -20,6 +20,22 @@
 	 * Per-action `disabled` renders the button dimmed and non-interactive;
 	 * per-action `loadingText` disables it and swaps the label for a
 	 * spinner + that text (mardukos fork) while other actions stay active.
+	 *
+	 * `placement="inline"` puts the bar in the normal flow at its container's
+	 * full width (for a host with its own sticky bar); the default floats
+	 * bottom-centre. Either way it wraps rather than run off a narrow screen.
+	 *
+	 * The root class is `fab-bar`, not `fab`: daisyUI 5 ships a `.fab`
+	 * (speed-dial) component whose rules hid every button of this bar in a
+	 * daisyUI 5 host (qimg-x9ifp.1).
+	 *
+	 * Theming: every colour is a custom property with the original dark value
+	 * as its fallback, so a host can map the bar onto its theme without
+	 * overriding internals: --fab-bg, --fab-fg, --fab-muted, --fab-border,
+	 * --fab-shadow, --fab-radius, --fab-btn-bg/-fg/-border/-hover/-radius,
+	 * --fab-primary-bg/-fg/-border/-hover, --fab-danger-bg/-fg/-border/-hover,
+	 * --fab-menu-bg/-radius/-shadow, --fab-focus, --fab-spinner. Set them on
+	 * any ancestor (the bar inherits them).
 	 */
 
 	import { fade } from 'svelte/transition';
@@ -49,6 +65,8 @@
 		label: string;
 		/** Optional colored dot (oklch string) */
 		dotColor?: string;
+		/** Optional key hint shown at the item's right edge (display only; the host binds it). */
+		hint?: string;
 		/** Optional SVG snippet rendered before the label */
 		iconSnippet?: import('svelte').Snippet;
 		/** Called when this item is clicked */
@@ -86,6 +104,13 @@
 		onClear?: () => void;
 		/** Label for the selection count (default: "selected") */
 		countLabel?: string;
+		/**
+		 * 'floating' (default): fixed, bottom-centre over the page.
+		 * 'inline': in the normal flow, full width of its container — for a
+		 * host that already has a sticky bar to put it in. Both wrap onto more
+		 * lines rather than run off a narrow screen.
+		 */
+		placement?: 'floating' | 'inline';
 	}
 
 	let {
@@ -96,6 +121,7 @@
 		loadingMessage = null,
 		onClear,
 		countLabel = 'selected',
+		placement = 'floating',
 	}: Props = $props();
 
 	let openDropdownId = $state<string | null>(null);
@@ -129,7 +155,7 @@
 </script>
 
 {#if count > 0}
-	<div class="fab" transition:fade={{ duration: 150 }}>
+	<div class="fab-bar" class:fab-inline={placement === 'inline'} role="group" aria-label="{count} {countLabel}" transition:fade={{ duration: 150 }}>
 		<span class="fab-count">{count} {countLabel}</span>
 
 		{#if loadingMessage}
@@ -176,13 +202,22 @@
 					class="fab-dropdown-wrapper"
 					role="group"
 					onclick={(e) => e.stopPropagation()}
-					onkeydown={(e) => e.stopPropagation()}
+					onkeydown={(e) => {
+						e.stopPropagation();
+						if (e.key === 'Escape' && openDropdownId === dropdown.id) {
+							e.preventDefault();
+							openDropdownId = null;
+							(e.currentTarget.querySelector('.fab-btn') as HTMLElement | null)?.focus();
+						}
+					}}
 				>
 					<button
 						type="button"
 						class="fab-btn {variantClass(dropdown.variant)}"
 						onclick={() => openDropdownId = openDropdownId === dropdown.id ? null : dropdown.id}
 						disabled={loading}
+						aria-haspopup="true"
+						aria-expanded={openDropdownId === dropdown.id}
 					>
 						{#if dropdown.icon}
 							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
@@ -205,7 +240,10 @@
 									{#if item.iconSnippet}
 										{@render item.iconSnippet()}
 									{/if}
-									{item.label}
+									<span class="fab-item-label">{item.label}</span>
+									{#if item.hint}
+										<kbd class="fab-key fab-item-hint">{item.hint}</kbd>
+									{/if}
 								</button>
 							{/each}
 						</div>
@@ -229,8 +267,11 @@
 {/if}
 
 <style>
-	.fab {
+	.fab-bar {
 		position: fixed;
+		max-width: calc(100vw - 1rem);
+		flex-wrap: wrap;
+		justify-content: center;
 		bottom: 1.5rem;
 		left: 50%;
 		transform: translateX(-50%);
@@ -239,23 +280,35 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
-		background: oklch(0.16 0.02 250);
-		border: 1px solid oklch(0.30 0.02 250);
-		border-radius: 0.75rem;
-		box-shadow: 0 8px 32px oklch(0.05 0 0 / 0.6), 0 2px 8px oklch(0.05 0 0 / 0.3);
+		background: var(--fab-bg, oklch(0.16 0.02 250));
+		border: 1px solid var(--fab-border, oklch(0.30 0.02 250));
+		border-radius: var(--fab-radius, 0.75rem);
+		box-shadow: var(--fab-shadow, 0 8px 32px oklch(0.05 0 0 / 0.6), 0 2px 8px oklch(0.05 0 0 / 0.3));
+		color: var(--fab-fg, oklch(0.85 0.02 250));
+	}
+	/* Inline: in the host's own bar, so no float, no shadow, its full width. */
+	.fab-bar.fab-inline {
+		position: static;
+		left: auto;
+		bottom: auto;
+		transform: none;
+		max-width: none;
+		width: 100%;
+		justify-content: flex-start;
+		box-shadow: var(--fab-shadow-inline, none);
 	}
 
 	.fab-count {
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: oklch(0.85 0.02 250);
+		color: var(--fab-fg, oklch(0.85 0.02 250));
 		white-space: nowrap;
 	}
 
 	.fab-divider {
 		width: 1px;
 		height: 1.25rem;
-		background: oklch(0.30 0.02 250);
+		background: var(--fab-border, oklch(0.30 0.02 250));
 	}
 
 	.fab-btn {
@@ -264,7 +317,7 @@
 		gap: 0.375rem;
 		padding: 0.375rem 0.625rem;
 		border: 1px solid transparent;
-		border-radius: 0.375rem;
+		border-radius: var(--fab-btn-radius, 0.375rem);
 		font-size: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
@@ -278,25 +331,25 @@
 
 	/* Variants */
 	.fab-btn-default {
-		background: oklch(0.25 0.02 250 / 0.5);
-		color: oklch(0.75 0.02 250);
-		border-color: oklch(0.35 0.02 250);
+		background: var(--fab-btn-bg, oklch(0.25 0.02 250 / 0.5));
+		color: var(--fab-btn-fg, oklch(0.75 0.02 250));
+		border-color: var(--fab-btn-border, oklch(0.35 0.02 250));
 	}
-	.fab-btn-default:hover { background: oklch(0.30 0.02 250); }
+	.fab-btn-default:hover { background: var(--fab-btn-hover, oklch(0.30 0.02 250)); }
 
 	.fab-btn-primary {
-		background: oklch(0.65 0.18 250 / 0.15);
-		color: oklch(0.82 0.14 250);
-		border-color: oklch(0.65 0.18 250 / 0.3);
+		background: var(--fab-primary-bg, oklch(0.65 0.18 250 / 0.15));
+		color: var(--fab-primary-fg, oklch(0.82 0.14 250));
+		border-color: var(--fab-primary-border, oklch(0.65 0.18 250 / 0.3));
 	}
-	.fab-btn-primary:hover { background: oklch(0.65 0.18 250 / 0.25); }
+	.fab-btn-primary:hover { background: var(--fab-primary-hover, oklch(0.65 0.18 250 / 0.25)); }
 
 	.fab-btn-danger {
-		background: oklch(0.55 0.18 30 / 0.15);
-		color: oklch(0.80 0.15 30);
-		border-color: oklch(0.55 0.18 30 / 0.3);
+		background: var(--fab-danger-bg, oklch(0.55 0.18 30 / 0.15));
+		color: var(--fab-danger-fg, oklch(0.80 0.15 30));
+		border-color: var(--fab-danger-border, oklch(0.55 0.18 30 / 0.3));
 	}
-	.fab-btn-danger:hover { background: oklch(0.55 0.18 30 / 0.25); }
+	.fab-btn-danger:hover { background: var(--fab-danger-hover, oklch(0.55 0.18 30 / 0.25)); }
 
 	.fab-btn-warning {
 		background: oklch(0.75 0.15 85 / 0.12);
@@ -328,19 +381,23 @@
 
 	.fab-btn-clear {
 		background: transparent;
-		color: oklch(0.65 0.02 250);
+		color: var(--fab-muted, oklch(0.65 0.02 250));
 		border-color: transparent;
 	}
 	.fab-btn-clear:hover {
-		background: oklch(0.25 0.02 250);
-		color: oklch(0.80 0.02 250);
+		background: var(--fab-btn-hover, oklch(0.25 0.02 250));
+		color: var(--fab-fg, oklch(0.80 0.02 250));
+	}
+	.fab-btn:focus-visible {
+		outline: 2px solid var(--fab-focus, currentColor);
+		outline-offset: 1px;
 	}
 
 	.fab-spinner {
 		width: 14px;
 		height: 14px;
-		border: 2px solid oklch(0.35 0.02 250);
-		border-top-color: oklch(0.70 0.15 240);
+		border: 2px solid var(--fab-border, oklch(0.35 0.02 250));
+		border-top-color: var(--fab-spinner, oklch(0.70 0.15 240));
 		border-radius: 50%;
 		animation: fab-spin 0.6s linear infinite;
 		flex-shrink: 0;
@@ -389,13 +446,17 @@
 		left: 50%;
 		transform: translateX(-50%);
 		min-width: 160px;
-		background: oklch(0.18 0.02 250);
-		border: 1px solid oklch(0.30 0.02 250);
-		border-radius: 0.5rem;
+		background: var(--fab-menu-bg, oklch(0.18 0.02 250));
+		border: 1px solid var(--fab-border, oklch(0.30 0.02 250));
+		border-radius: var(--fab-menu-radius, 0.5rem);
 		padding: 0.375rem;
-		box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.5);
+		box-shadow: var(--fab-menu-shadow, 0 8px 24px oklch(0.05 0 0 / 0.5));
 		z-index: 60;
 	}
+	.fab-inline .fab-dropdown {
+		left: 0;
+		transform: none;
+	}
 	.fab-dropdown-item {
 		display: flex;
 		align-items: center;
@@ -404,7 +465,7 @@
 		padding: 0.375rem 0.625rem;
 		border: none;
 		background: transparent;
-		color: oklch(0.80 0.02 250);
+		color: var(--fab-fg, oklch(0.80 0.02 250));
 		font-size: 0.75rem;
 		text-align: left;
 		border-radius: 0.375rem;
@@ -412,8 +473,15 @@
 		transition: background 0.1s;
 		white-space: nowrap;
 	}
-	.fab-dropdown-item:hover { background: oklch(0.25 0.02 250); }
+	.fab-dropdown-item:hover,
+	.fab-dropdown-item:focus-visible { background: var(--fab-btn-hover, oklch(0.25 0.02 250)); outline: none; }
 
+	.fab-item-label {
+		flex: 1;
+	}
+	.fab-item-hint {
+		margin-left: 1rem;
+	}
 	.fab-dot {
 		width: 8px;
 		height: 8px;

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

@@ -22,6 +22,8 @@ export interface DropdownItem {
     label: string;
     /** Optional colored dot (oklch string) */
     dotColor?: string;
+    /** Optional key hint shown at the item's right edge (display only; the host binds it). */
+    hint?: string;
     /** Optional SVG snippet rendered before the label */
     iconSnippet?: import('svelte').Snippet;
     /** Called when this item is clicked */
@@ -57,6 +59,13 @@ interface Props {
     onClear?: () => void;
     /** Label for the selection count (default: "selected") */
     countLabel?: string;
+    /**
+     * 'floating' (default): fixed, bottom-centre over the page.
+     * 'inline': in the normal flow, full width of its container — for a
+     * host that already has a sticky bar to put it in. Both wrap onto more
+     * lines rather than run off a narrow screen.
+     */
+    placement?: 'floating' | 'inline';
 }
 declare const FloatingActionBar: import("svelte").Component<Props, {}, "">;
 type FloatingActionBar = ReturnType<typeof FloatingActionBar>;

package/dist/components/IconButton.svelte

@@ -0,0 +1,200 @@
+<script module lang="ts">
+	export type IconButtonVariant =
+		| 'ghost'
+		| 'outline'
+		| 'soft'
+		| 'primary'
+		| 'secondary'
+		| 'error'
+		| 'overlay';
+	export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+</script>
+
+<script lang="ts">
+	/**
+	 * IconButton — an icon-only button with a REQUIRED accessible name.
+	 *
+	 * The square/circle `btn` that consumers hand-write hundreds of times
+	 * (`btn btn-sm btn-circle btn-ghost` + an inline svg + an aria-label that is
+	 * sometimes forgotten). `label` is required by the types, becomes the
+	 * aria-label, and — with `tooltip` — the hover/focus hint too.
+	 *
+	 *   <IconButton label="Edit" onclick={edit}><PencilIcon size={16} /></IconButton>
+	 *   <IconButton label="Pin" pressed={pinned} tooltip onclick={toggle}>…</IconButton>
+	 *   <IconButton label="Open" href="/x" shape="circle" variant="outline">…</IconButton>
+	 *
+	 * `variant="overlay"` is light-on-dark translucent chrome for controls that
+	 * sit over media (lightboxes, video stages) where a ghost button vanishes.
+	 *
+	 * Idea from BoardUI's icon-button (MIT); written fresh for Svelte 5 + jatui
+	 * tokens.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction, type TooltipOptions } from '../actions/tooltip';
+
+	interface Props
+		extends Omit<
+			HTMLButtonAttributes,
+			'type' | 'disabled' | 'class' | 'onclick' | 'children' | 'aria-label'
+		> {
+		/** Accessible name — required. Rendered as aria-label (and the tooltip text). */
+		label: string;
+		variant?: IconButtonVariant;
+		size?: IconButtonSize;
+		shape?: 'square' | 'circle';
+		/** Render an `<a>` instead of a `<button>`. */
+		href?: string;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		/** Toggle semantics — renders aria-pressed and the pressed surface. */
+		pressed?: boolean;
+		/** Show a tooltip: `true` uses `label`; a string shows that text instead (e.g. with a shortcut). */
+		tooltip?: boolean | string;
+		tooltipPlacement?: TooltipOptions['placement'];
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		/** The icon. Size it to the button (16px for sm/md is the house default). */
+		children?: Snippet;
+	}
+
+	let {
+		label,
+		variant = 'ghost',
+		size = 'md',
+		shape = 'square',
+		href,
+		type = 'button',
+		disabled = false,
+		pressed,
+		tooltip = false,
+		tooltipPlacement = 'top',
+		class: className = '',
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const VARIANT: Record<IconButtonVariant, string> = {
+		ghost: 'btn-ghost',
+		outline: 'btn-outline',
+		soft: 'btn-soft',
+		primary: 'btn-primary',
+		secondary: 'btn-secondary',
+		error: 'btn-error',
+		overlay: 'jatui-icon-btn--overlay'
+	};
+	const SIZE: Record<IconButtonSize, string> = {
+		xs: 'btn-xs',
+		sm: 'btn-sm',
+		md: '',
+		lg: 'btn-lg'
+	};
+
+	const classes = $derived(
+		[
+			'btn jatui-icon-btn',
+			shape === 'circle' ? 'btn-circle' : 'btn-square',
+			VARIANT[variant] ?? 'btn-ghost',
+			SIZE[size],
+			pressed ? 'jatui-icon-btn--pressed' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const ariaPressed = $derived(pressed === undefined ? undefined : pressed ? 'true' : 'false');
+	const tipText = $derived(typeof tooltip === 'string' ? tooltip : tooltip ? label : '');
+
+	/** use:tooltip only when asked for — no aria-describedby noise otherwise. */
+	function maybeTooltip(node: HTMLElement, text: string) {
+		let handle: ReturnType<typeof tooltipAction> | undefined;
+		const apply = (t: string) => {
+			if (t && !handle) handle = tooltipAction(node, { text: t, placement: tooltipPlacement });
+			else if (t && handle) handle.update?.({ text: t, placement: tooltipPlacement });
+			else if (!t && handle) {
+				handle.destroy?.();
+				handle = undefined;
+			}
+		};
+		apply(text);
+		return { update: apply, destroy: () => handle?.destroy?.() };
+	}
+</script>
+
+{#if href && !disabled}
+	<a
+		{...rest as Record<string, unknown>}
+		{href}
+		class={classes}
+		aria-label={label}
+		aria-pressed={ariaPressed}
+		{onclick}
+		use:maybeTooltip={tipText}
+	>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else}
+	<button
+		{...rest}
+		{type}
+		{disabled}
+		class={classes}
+		aria-label={label}
+		aria-pressed={ariaPressed}
+		{onclick}
+		use:maybeTooltip={tipText}
+	>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}
+
+<style>
+	/* Flat (no DaisyUI v5 variant shadow), press squish, token focus ring. */
+	.jatui-icon-btn {
+		--btn-shadow: 0 0 0 0 transparent;
+		transition:
+			transform 500ms var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-icon-btn:active:not(:disabled) {
+		transform: scale(0.92);
+		transition: transform var(--motion-instant, 80ms) ease-out;
+	}
+	.jatui-icon-btn:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+	}
+	.jatui-icon-btn--pressed:not(.btn-primary):not(.btn-secondary):not(.btn-error) {
+		background-color: var(
+			--jatui-selection-bg,
+			color-mix(in oklab, var(--color-primary) 14%, transparent)
+		);
+		color: var(--color-primary);
+	}
+
+	/* Over media: translucent light chrome that reads on any image or video. */
+	.jatui-icon-btn--overlay {
+		--btn-color: color-mix(in oklab, white 10%, transparent);
+		--btn-fg: color-mix(in oklab, white 95%, transparent);
+		--btn-border: color-mix(in oklab, white 15%, transparent);
+		--btn-noise: none;
+		background-color: color-mix(in oklab, white 10%, transparent);
+		border: 1px solid color-mix(in oklab, white 15%, transparent);
+		color: color-mix(in oklab, white 95%, transparent);
+	}
+	.jatui-icon-btn--overlay:hover {
+		background-color: color-mix(in oklab, white 20%, transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-icon-btn,
+		.jatui-icon-btn:active:not(:disabled) {
+			transform: none;
+			transition: none;
+		}
+	}
+</style>