@joewinke/jatui 0.39.0 → 0.41.0

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/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>

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

@@ -0,0 +1,46 @@
+export type IconButtonVariant = 'ghost' | 'outline' | 'soft' | 'primary' | 'secondary' | 'error' | 'overlay';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+     * 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 { 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;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/LinkButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	/**
+	 * LinkButton — a text action that looks like a link: no box, underline on
+	 * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+	 * pick by what it DOES (navigates vs acts), not by how it looks.
+	 *
+	 *   <LinkButton onclick={resend}>Resend code</LinkButton>
+	 *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+	 *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+	 *
+	 * `external` opens a new tab with rel="noopener noreferrer" and tells
+	 * screen-reader users so. Idea from BoardUI's link-button (MIT).
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		/** Ink: inherit the surrounding text, primary accent, muted, or error. */
+		tone?: 'inherit' | 'primary' | 'muted' | 'error';
+		size?: 'xs' | 'sm' | 'md';
+		/** Underline: on hover/focus only (default) or always. */
+		underline?: 'hover' | 'always';
+		/** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+		external?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	}
+
+	let {
+		href,
+		tone = 'primary',
+		size = 'sm',
+		underline = 'hover',
+		external = false,
+		type = 'button',
+		disabled = false,
+		class: className = '',
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const TONE = {
+		inherit: '',
+		primary: 'link-primary',
+		muted: 'jatui-link-btn--muted',
+		error: 'link-error'
+	} as const;
+	const SIZE = { xs: 'text-xs', sm: 'text-sm', md: 'text-base' } as const;
+
+	const classes = $derived(
+		[
+			'link jatui-link-btn',
+			underline === 'hover' ? 'link-hover' : '',
+			TONE[tone] ?? '',
+			SIZE[size] ?? '',
+			disabled ? 'jatui-link-btn--disabled' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+{#if href && !disabled}
+	<a
+		{...rest}
+		{href}
+		class={classes}
+		target={external ? '_blank' : rest.target as string | undefined}
+		rel={external ? 'noopener noreferrer' : rest.rel as string | undefined}
+		{onclick}
+	>
+		{#if children}{@render children()}{/if}
+		{#if external}<span class="sr-only"> (opens in a new tab)</span>{/if}
+	</a>
+{:else}
+	<button {...rest} {type} {disabled} class={classes} {onclick}>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}
+
+<style>
+	.jatui-link-btn {
+		display: inline;
+		padding: 0;
+		background: none;
+		border: 0;
+		font-weight: 500;
+		text-underline-offset: 0.2em;
+		cursor: pointer;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		transition: color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-link-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);
+		text-decoration-line: underline;
+	}
+	.jatui-link-btn--muted {
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+	}
+	.jatui-link-btn--muted:hover {
+		color: var(--color-base-content);
+	}
+	.jatui-link-btn--disabled,
+	.jatui-link-btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		text-decoration: none;
+	}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+     * LinkButton — a text action that looks like a link: no box, underline on
+     * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+     * pick by what it DOES (navigates vs acts), not by how it looks.
+     *
+     *   <LinkButton onclick={resend}>Resend code</LinkButton>
+     *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+     *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+     *
+     * `external` opens a new tab with rel="noopener noreferrer" and tells
+     * screen-reader users so. Idea from BoardUI's link-button (MIT).
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    /** Ink: inherit the surrounding text, primary accent, muted, or error. */
+    tone?: 'inherit' | 'primary' | 'muted' | 'error';
+    size?: 'xs' | 'sm' | 'md';
+    /** Underline: on hover/focus only (default) or always. */
+    underline?: 'hover' | 'always';
+    /** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+    external?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/MediaLightbox.svelte

@@ -24,6 +24,7 @@
 	 *   ]} initialIndex={0} onClose={close} />
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { fade } from 'svelte/transition';
 
 	export type MediaItem = {
@@ -175,9 +176,7 @@
 				>
 					Download
 				</a>
-				<button type="button" class="mlb-btn mlb-close" onclick={close} aria-label="Close">
-					×
-				</button>
+				<CloseButton label="Close" variant="overlay" shape="square" onclick={close} />
 			</div>
 		</div>
 
@@ -288,10 +287,6 @@
 	.mlb-btn:hover {
 		background: oklch(1 0 0 / 0.2);
 	}
-	.mlb-close {
-		font-size: 1.25rem;
-		line-height: 1;
-	}
 	.mlb-nav {
 		position: absolute;
 		top: 50%;

package/dist/components/Modal.svelte

@@ -6,6 +6,7 @@
 	 * Converted from Svelte 4 to Svelte 5 runes.
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { onMount, untrack } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import { fly, fade } from 'svelte/transition';
@@ -241,16 +242,7 @@
 						{/if}
 
 						{#if showCloseButton && dismissible}
-							<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={close} aria-label="Close modal">
-								<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 modal" onclick={close} />
 						{/if}
 					</div>
 				{/if}