Action button

<!--
	A labelled action button: primary, secondary, ghost or destructive, in three sizes. It renders
	a native <button>, or an <a> styled the same way when href is set. While pending the spinner
	takes the leading icon's place (or sits over a transparent label when there is none), so the
	button keeps its exact box and its focus, and the pending label is announced once.
-->
<script lang="ts" module>
	export type ActionButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
	export type ActionButtonSize = 'sm' | 'md' | 'lg';
</script>

<script lang="ts">
	import { onMount, type Snippet } from 'svelte';
	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';

	type Passthrough = Omit<
		HTMLButtonAttributes & HTMLAnchorAttributes,
		'type' | 'href' | 'disabled' | 'children' | 'onclick' | 'class' | 'aria-disabled' | 'aria-busy'
	>;

	interface Props extends Passthrough {
		/** Visual priority. One primary per view; destructive for actions that lose data. */
		variant?: ActionButtonVariant;
		/** sm 32 px, md 36 px, lg 40 px tall at rest; every size grows to 44 px on touch screens. */
		size?: ActionButtonSize;
		/** Native button type. 'button' by default, so it never submits a form by accident. */
		type?: 'button' | 'submit' | 'reset';
		/** Renders an <a> instead of a <button>. Removed while disabled. */
		href?: string;
		/** Native disabled on a button; aria-disabled and no href on a link. */
		disabled?: boolean;
		/** Shows the spinner, sets aria-busy and swallows clicks, without dropping focus. */
		pending?: boolean;
		/** Announced once, politely, when pending starts. */
		pendingLabel?: string;
		/** Fill the width of the parent instead of hugging the label. */
		block?: boolean;
		/** Leading icon, decorative. Size the SVG with the button: it is set to the size's icon box. */
		icon?: Snippet;
		/** Trailing icon, decorative: a chevron, an arrow, an external-link mark. */
		trailingIcon?: Snippet;
		/** The label. Name the action: "Delete project", not "OK". */
		children: Snippet;
		/** Not called while pending or disabled. */
		onclick?: (event: MouseEvent) => void;
		/** Extra classes for placement (margins, grid placement). */
		class?: string;
	}

	let {
		variant = 'primary',
		size = 'md',
		type = 'button',
		href,
		disabled = false,
		pending = false,
		pendingLabel = 'Working',
		block = false,
		icon,
		trailingIcon,
		children,
		onclick,
		class: className,
		...rest
	}: Props = $props();

	const isLink = $derived(href !== undefined);
	/** Without a leading icon to swap, the spinner and pending text sit over the whole label row. */
	const overlay = $derived(pending && !icon);
	/** A disabled or pending link has no destination, so no click of any button can follow it. */
	const inert = $derived(isLink && (disabled || pending));

	/*
	 * The live region is filled only after hydration, so a button that starts out pending still
	 * produces a change for assistive technology to announce.
	 */
	let hydrated = $state(false);
	onMount(() => {
		hydrated = true;
	});

	function handleClick(event: MouseEvent) {
		if (pending || (isLink && disabled)) {
			// Swallow the click (and a form's implicit submission) but keep focus where it is.
			event.preventDefault();
			event.stopImmediatePropagation();
			return;
		}
		onclick?.(event);
	}

	const iconBox = $derived(
		size === 'sm'
			? 'h-lh w-3.5 [&_svg]:size-3.5'
			: size === 'lg'
				? 'h-lh w-[18px] [&_svg]:size-[18px]'
				: 'h-lh w-4 [&_svg]:size-4'
	);
</script>

<svelte:element
	this={isLink ? 'a' : 'button'}
	{...rest}
	type={isLink ? undefined : type}
	href={inert ? undefined : href}
	role={inert ? 'link' : rest.role}
	tabindex={isLink && pending && !disabled ? 0 : rest.tabindex}
	disabled={!isLink && disabled ? true : undefined}
	aria-disabled={(isLink && disabled) || pending ? 'true' : undefined}
	aria-busy={pending ? 'true' : undefined}
	data-variant={variant}
	data-disabled={disabled ? '' : undefined}
	class={[
		'action-button relative max-w-full cursor-pointer items-center justify-center py-2 font-medium no-underline select-none',
		'bg-[var(--_fill)] text-[var(--_label)] shadow-[var(--_edge)] hover:bg-[var(--_fill-hover)]',
		'transition-[background-color,box-shadow,scale] duration-150 ease-[cubic-bezier(.2,0,0,1)] active:scale-(--_press) active:duration-[80ms] motion-reduce:transition-[background-color,box-shadow] motion-reduce:active:scale-100',
		'outline-offset-2 outline-[var(--_ring)] focus-visible:outline-2',
		'aria-busy:cursor-progress data-disabled:cursor-not-allowed data-disabled:opacity-50',
		'pointer-coarse:min-h-11',
		block ? 'flex w-full' : 'inline-flex',
		size === 'sm' && 'min-h-8 rounded-md px-3 text-[13px] leading-4',
		size === 'md' && 'min-h-9 rounded-lg px-4 text-sm leading-5',
		size === 'lg' && 'min-h-10 rounded-lg px-[18px] text-[15px] leading-6',
		className
	]}
	onclick={handleClick}
>
	<!-- One row that aligns to the label's first line, so a wrapped label keeps its icons level.
	     sm's 6 px gap and lg's 18 px padding are DESIGN §3.8's button table, which outranks the
	     4 px grid here. -->
	<span class={['flex min-w-0 items-start', size === 'sm' ? 'gap-1.5' : 'gap-2']}>
		{#if icon}
			<span
				class={['grid shrink-0 place-items-center text-[var(--_icon)]', iconBox]}
				aria-hidden="true"
			>
				{#if pending}
					{@render spinner()}
				{:else}
					{@render icon()}
				{/if}
			</span>
		{/if}
		<!-- While pending the label turns transparent but keeps its box and the button's name; the
		     visible text becomes pendingLabel, clipped to that box so the width never moves. -->
		<span class="relative min-w-0">
			<span class={['block text-start text-pretty break-words', pending && 'opacity-0']}>
				{@render children()}
			</span>
			{#if pending && !overlay}
				<span class="absolute inset-0 truncate text-center" aria-hidden="true">{pendingLabel}…</span
				>
			{/if}
		</span>
		{#if trailingIcon}
			<span
				class={[
					'grid shrink-0 place-items-center text-[var(--_icon)]',
					iconBox,
					overlay && 'opacity-0'
				]}
				aria-hidden="true"
			>
				{@render trailingIcon()}
			</span>
		{/if}
	</span>
	{#if overlay}
		<span
			class={[
				'absolute inset-0 flex items-center justify-center',
				size === 'sm' ? 'gap-1.5 px-3' : size === 'lg' ? 'gap-2 px-[18px]' : 'gap-2 px-4'
			]}
			aria-hidden="true"
		>
			<span class={['grid shrink-0 place-items-center', iconBox]}>{@render spinner()}</span>
			<span class="min-w-0 truncate">{pendingLabel}…</span>
		</span>
	{/if}
</svelte:element>
<!-- Outside the button, so the button's name stays its label; filled only while pending. -->
<span class="sr-only" role="status" aria-live="polite"
	>{hydrated && pending ? pendingLabel : ''}</span
>

{#snippet spinner()}
	<svg
		class="animate-spin motion-reduce:animate-pulse"
		viewBox="0 0 16 16"
		fill="none"
		aria-hidden="true"
	>
		<circle
			cx="8"
			cy="8"
			r="6.25"
			stroke="currentColor"
			stroke-opacity="0.25"
			stroke-width="1.75"
		/>
		<path
			d="M14.25 8A6.25 6.25 0 0 0 8 1.75"
			stroke="currentColor"
			stroke-width="1.75"
			stroke-linecap="round"
		/>
	</svg>
{/snippet}

<style>
	/* Public tokens: set --action-button-* on the button or any ancestor to retone it. */
	.action-button {
		--_accent: var(--action-button-accent, #1d4ed8);
		--_on-accent: var(--action-button-on-accent, #ffffff);
		--_danger: var(--action-button-danger, #b91c1c);
		--_on-danger: var(--action-button-on-danger, #ffffff);
		--_ink: var(--action-button-ink, #18181b);
		--_muted: var(--action-button-muted, #52525b);
		--_hairline: var(--action-button-hairline, rgb(0 0 0 / 0.12));
		--_surface: var(--action-button-surface, #ffffff);

		/* Each variant fills these in; the classes above only ever read them. */
		--_press: 0.98;
		--_ring: var(--_accent);
		--_icon: currentColor;
	}

	/* Hover moves the fill one step toward its own label colour, so it works for any accent. */
	.action-button[data-variant='primary'] {
		--_fill: var(--_accent);
		--_fill-hover: color-mix(in oklab, var(--_accent) 88%, var(--_on-accent));
		--_label: var(--_on-accent);
		--_edge: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08);
	}

	.action-button[data-variant='secondary'] {
		--_fill: var(--_surface);
		--_fill-hover: color-mix(in oklab, var(--_surface) 95%, var(--_ink));
		--_label: var(--_ink);
		--_icon: var(--_muted);
		/* The hairline is inset, so the secondary is exactly as large as a filled button beside it. */
		--_edge: inset 0 0 0 1px var(--_hairline), 0 1px 2px rgb(0 0 0 / 0.05);
	}

	.action-button[data-variant='ghost'] {
		--_fill: transparent;
		--_fill-hover: color-mix(in oklab, var(--_ink) 6%, transparent);
		--_label: var(--_ink);
		--_icon: var(--_muted);
		--_edge: 0 0 #0000;
	}

	.action-button[data-variant='destructive'] {
		--_fill: var(--_danger);
		--_fill-hover: color-mix(in oklab, var(--_danger) 88%, var(--_on-danger));
		--_label: var(--_on-danger);
		--_ring: var(--_danger);
		--_edge: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08);
	}

	/* Disabled and pending buttons neither change tone on hover nor press. */
	.action-button[data-disabled],
	.action-button[aria-busy='true'] {
		--_fill-hover: var(--_fill);
		--_press: 1;
	}
</style>

<!--
	A labelled action button: primary, secondary, ghost or destructive, in three sizes. It renders
	a native <button>, or an <a> styled the same way when href is set. While pending the spinner
	takes the leading icon's place (or sits over a transparent label when there is none), so the
	button keeps its exact box and its focus, and the pending label is announced once.
-->
<script lang="ts" module>
	export type ActionButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
	export type ActionButtonSize = 'sm' | 'md' | 'lg';
</script>

<script lang="ts">
	import { onMount, type Snippet } from 'svelte';
	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';

	type Passthrough = Omit<
		HTMLButtonAttributes & HTMLAnchorAttributes,
		'type' | 'href' | 'disabled' | 'children' | 'onclick' | 'class' | 'aria-disabled' | 'aria-busy'
	>;

	interface Props extends Passthrough {
		/** Visual priority. One primary per view; destructive for actions that lose data. */
		variant?: ActionButtonVariant;
		/** sm 32 px, md 36 px, lg 40 px tall at rest; every size grows to 44 px on touch screens. */
		size?: ActionButtonSize;
		/** Native button type. 'button' by default, so it never submits a form by accident. */
		type?: 'button' | 'submit' | 'reset';
		/** Renders an <a> instead of a <button>. Removed while disabled. */
		href?: string;
		/** Native disabled on a button; aria-disabled and no href on a link. */
		disabled?: boolean;
		/** Shows the spinner, sets aria-busy and swallows clicks, without dropping focus. */
		pending?: boolean;
		/** Announced once, politely, when pending starts. */
		pendingLabel?: string;
		/** Fill the width of the parent instead of hugging the label. */
		block?: boolean;
		/** Leading icon, decorative. Size the SVG with the button: it is set to the size's icon box. */
		icon?: Snippet;
		/** Trailing icon, decorative: a chevron, an arrow, an external-link mark. */
		trailingIcon?: Snippet;
		/** The label. Name the action: "Delete project", not "OK". */
		children: Snippet;
		/** Not called while pending or disabled. */
		onclick?: (event: MouseEvent) => void;
		/** Extra classes for placement (margins, grid placement). */
		class?: string;
	}

	let {
		variant = 'primary',
		size = 'md',
		type = 'button',
		href,
		disabled = false,
		pending = false,
		pendingLabel = 'Working',
		block = false,
		icon,
		trailingIcon,
		children,
		onclick,
		class: className,
		...rest
	}: Props = $props();

	const isLink = $derived(href !== undefined);
	/** Without a leading icon to swap, the spinner and pending text sit over the whole label row. */
	const overlay = $derived(pending && !icon);
	/** A disabled or pending link has no destination, so no click of any button can follow it. */
	const inert = $derived(isLink && (disabled || pending));

	/*
	 * The live region is filled only after hydration, so a button that starts out pending still
	 * produces a change for assistive technology to announce.
	 */
	let hydrated = $state(false);
	onMount(() => {
		hydrated = true;
	});

	function handleClick(event: MouseEvent) {
		if (pending || (isLink && disabled)) {
			// Swallow the click (and a form's implicit submission) but keep focus where it is.
			event.preventDefault();
			event.stopImmediatePropagation();
			return;
		}
		onclick?.(event);
	}

	const iconBox = $derived(
		size === 'sm'
			? 'h-lh w-3.5 [&_svg]:size-3.5'
			: size === 'lg'
				? 'h-lh w-[18px] [&_svg]:size-[18px]'
				: 'h-lh w-4 [&_svg]:size-4'
	);
</script>

<svelte:element
	this={isLink ? 'a' : 'button'}
	{...rest}
	type={isLink ? undefined : type}
	href={inert ? undefined : href}
	role={inert ? 'link' : rest.role}
	tabindex={isLink && pending && !disabled ? 0 : rest.tabindex}
	disabled={!isLink && disabled ? true : undefined}
	aria-disabled={(isLink && disabled) || pending ? 'true' : undefined}
	aria-busy={pending ? 'true' : undefined}
	data-variant={variant}
	data-disabled={disabled ? '' : undefined}
	class={[
		'action-button relative max-w-full cursor-pointer items-center justify-center py-2 font-medium no-underline select-none',
		'bg-[var(--_fill)] text-[var(--_label)] shadow-[var(--_edge)] hover:bg-[var(--_fill-hover)]',
		'transition-[background-color,box-shadow,scale] duration-150 ease-[cubic-bezier(.2,0,0,1)] active:scale-(--_press) active:duration-[80ms] motion-reduce:transition-[background-color,box-shadow] motion-reduce:active:scale-100',
		'outline-offset-2 outline-[var(--_ring)] focus-visible:outline-2',
		'aria-busy:cursor-progress data-disabled:cursor-not-allowed data-disabled:opacity-50',
		'pointer-coarse:min-h-11',
		block ? 'flex w-full' : 'inline-flex',
		size === 'sm' && 'min-h-8 rounded-md px-3 text-[13px] leading-4',
		size === 'md' && 'min-h-9 rounded-lg px-4 text-sm leading-5',
		size === 'lg' && 'min-h-10 rounded-lg px-[18px] text-[15px] leading-6',
		className
	]}
	onclick={handleClick}
>
	<!-- One row that aligns to the label's first line, so a wrapped label keeps its icons level.
	     sm's 6 px gap and lg's 18 px padding are DESIGN §3.8's button table, which outranks the
	     4 px grid here. -->
	<span class={['flex min-w-0 items-start', size === 'sm' ? 'gap-1.5' : 'gap-2']}>
		{#if icon}
			<span
				class={['grid shrink-0 place-items-center text-[var(--_icon)]', iconBox]}
				aria-hidden="true"
			>
				{#if pending}
					{@render spinner()}
				{:else}
					{@render icon()}
				{/if}
			</span>
		{/if}
		<!-- While pending the label turns transparent but keeps its box and the button's name; the
		     visible text becomes pendingLabel, clipped to that box so the width never moves. -->
		<span class="relative min-w-0">
			<span class={['block text-start text-pretty break-words', pending && 'opacity-0']}>
				{@render children()}
			</span>
			{#if pending && !overlay}
				<span class="absolute inset-0 truncate text-center" aria-hidden="true">{pendingLabel}…</span
				>
			{/if}
		</span>
		{#if trailingIcon}
			<span
				class={[
					'grid shrink-0 place-items-center text-[var(--_icon)]',
					iconBox,
					overlay && 'opacity-0'
				]}
				aria-hidden="true"
			>
				{@render trailingIcon()}
			</span>
		{/if}
	</span>
	{#if overlay}
		<span
			class={[
				'absolute inset-0 flex items-center justify-center',
				size === 'sm' ? 'gap-1.5 px-3' : size === 'lg' ? 'gap-2 px-[18px]' : 'gap-2 px-4'
			]}
			aria-hidden="true"
		>
			<span class={['grid shrink-0 place-items-center', iconBox]}>{@render spinner()}</span>
			<span class="min-w-0 truncate">{pendingLabel}…</span>
		</span>
	{/if}
</svelte:element>
<!-- Outside the button, so the button's name stays its label; filled only while pending. -->
<span class="sr-only" role="status" aria-live="polite"
	>{hydrated && pending ? pendingLabel : ''}</span
>

{#snippet spinner()}
	<svg
		class="animate-spin motion-reduce:animate-pulse"
		viewBox="0 0 16 16"
		fill="none"
		aria-hidden="true"
	>
		<circle
			cx="8"
			cy="8"
			r="6.25"
			stroke="currentColor"
			stroke-opacity="0.25"
			stroke-width="1.75"
		/>
		<path
			d="M14.25 8A6.25 6.25 0 0 0 8 1.75"
			stroke="currentColor"
			stroke-width="1.75"
			stroke-linecap="round"
		/>
	</svg>
{/snippet}

<style>
	/* Public tokens: set --action-button-* on the button or any ancestor to retone it. */
	.action-button {
		--_accent: var(--action-button-accent, #1d4ed8);
		--_on-accent: var(--action-button-on-accent, #ffffff);
		--_danger: var(--action-button-danger, #b91c1c);
		--_on-danger: var(--action-button-on-danger, #ffffff);
		--_ink: var(--action-button-ink, #18181b);
		--_muted: var(--action-button-muted, #52525b);
		--_hairline: var(--action-button-hairline, rgb(0 0 0 / 0.12));
		--_surface: var(--action-button-surface, #ffffff);

		/* Each variant fills these in; the classes above only ever read them. */
		--_press: 0.98;
		--_ring: var(--_accent);
		--_icon: currentColor;
	}

	/* Hover moves the fill one step toward its own label colour, so it works for any accent. */
	.action-button[data-variant='primary'] {
		--_fill: var(--_accent);
		--_fill-hover: color-mix(in oklab, var(--_accent) 88%, var(--_on-accent));
		--_label: var(--_on-accent);
		--_edge: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08);
	}

	.action-button[data-variant='secondary'] {
		--_fill: var(--_surface);
		--_fill-hover: color-mix(in oklab, var(--_surface) 95%, var(--_ink));
		--_label: var(--_ink);
		--_icon: var(--_muted);
		/* The hairline is inset, so the secondary is exactly as large as a filled button beside it. */
		--_edge: inset 0 0 0 1px var(--_hairline), 0 1px 2px rgb(0 0 0 / 0.05);
	}

	.action-button[data-variant='ghost'] {
		--_fill: transparent;
		--_fill-hover: color-mix(in oklab, var(--_ink) 6%, transparent);
		--_label: var(--_ink);
		--_icon: var(--_muted);
		--_edge: 0 0 #0000;
	}

	.action-button[data-variant='destructive'] {
		--_fill: var(--_danger);
		--_fill-hover: color-mix(in oklab, var(--_danger) 88%, var(--_on-danger));
		--_label: var(--_on-danger);
		--_ring: var(--_danger);
		--_edge: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08);
	}

	/* Disabled and pending buttons neither change tone on hover nor press. */
	.action-button[data-disabled],
	.action-button[aria-busy='true'] {
		--_fill-hover: var(--_fill);
		--_press: 1;
	}
</style>