@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/CopyButton.svelte

@@ -7,6 +7,7 @@
 	import Button from '../atoms/Button.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import { copyToClipboard } from '../../clipboard';
+	import { playSound } from '../../sound';
 
 	let {
 		text,
@@ -17,6 +18,7 @@
 		box,
 		hitArea = 'auto',
 		resetMs = 1500,
+		sound = true,
 		class: klass = ''
 	}: {
 		/** The string to copy. */
@@ -30,6 +32,8 @@
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		hitArea?: 'auto' | 'compact';
 		resetMs?: number;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 	} = $props();
 
@@ -40,6 +44,7 @@
 
 	async function copy() {
 		const ok = await copyToClipboard(text);
+		playSound(ok ? 'success' : 'error', sound);
 		copied = ok;
 		status = ok ? copiedLabel : 'Copy failed';
 		clearTimeout(timer);
@@ -55,12 +60,51 @@
 	{variant}
 	{box}
 	{hitArea}
-	class={klass}
+	class="copy-btn {klass}"
+	sound={false}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
-	<Icon name={copied ? 'check' : 'copy'} />
+	<span class="glyphs" class:copied aria-hidden="true">
+		<span class="glyph copy"><Icon name="copy" /></span>
+		<span class="glyph check"><Icon name="check" /></span>
+	</span>
 	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>
+
+<style>
+	/* Both glyphs share one grid cell so the swap never changes the width. The
+	   check springs in (the kit's one bounce: a rare confirmation); the copy
+	   glyph fades out fast and back in over the base duration on revert. */
+	.glyphs {
+		display: inline-grid;
+		place-items: center;
+	}
+	.glyph {
+		grid-area: 1 / 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition: opacity var(--dur-fast) ease;
+	}
+	.check {
+		opacity: 0;
+		scale: 0.6;
+		transition:
+			opacity var(--dur-fast) ease,
+			scale var(--dur-fast) var(--ease-out);
+	}
+	.copied .copy {
+		opacity: 0;
+		transition-duration: var(--dur-exit-fast);
+	}
+	.copied .check {
+		opacity: 1;
+		scale: 1;
+		transition:
+			opacity var(--dur-spring-bounce) ease,
+			scale var(--dur-spring-bounce) var(--ease-spring-bounce);
+	}
+</style>

package/dist/components/molecules/CopyButton.svelte.d.ts

@@ -10,6 +10,8 @@ type $$ComponentProps = {
     box?: 'xs' | 'sm' | 'md' | 'lg';
     hitArea?: 'auto' | 'compact';
     resetMs?: number;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
 };
 declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/Disclosure.svelte

@@ -13,6 +13,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from '../atoms/Icon.svelte';
+	import { playSound } from '../../sound';
 
 	let {
 		open = $bindable(false),
@@ -23,6 +24,7 @@
 		id,
 		onchange,
 		disabled = false,
+		sound = true,
 		class: klass = '',
 		style: styleProp = '',
 		buttonClass = '',
@@ -45,6 +47,8 @@
 		id?: string;
 		onchange?: (open: boolean) => void;
 		disabled?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		style?: string;
 		buttonClass?: string;
@@ -58,6 +62,7 @@
 
 	function toggle() {
 		open = !open;
+		playSound(open ? 'open' : 'close', sound);
 		onchange?.(open);
 	}
 </script>
@@ -119,16 +124,18 @@
 		cursor: pointer;
 		user-select: none;
 	}
-	.disclosure__button:hover:not(:disabled) {
-		background: var(--bg-elevated-2);
+	@media (hover: hover) and (pointer: fine) {
+		.disclosure__button:hover:not(:disabled) {
+			background: var(--bg-elevated-2);
+		}
 	}
 	.disclosure__button:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	.disclosure__button:disabled {
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--disabled-opacity);
 	}
 	.disclosure__header {
 		display: flex;
@@ -141,20 +148,24 @@
 		display: inline-flex;
 		flex: none;
 		color: var(--text-muted);
-		transition: transform 0.15s var(--ease);
+		transition: rotate var(--dur-base) var(--ease-out);
 	}
 	.disclosure--open .disclosure__chevron {
-		transform: rotate(180deg);
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.disclosure__chevron {
-			transition: none;
-		}
+		rotate: 180deg;
 	}
 	.disclosure__panel {
 		padding: var(--disclosure-panel-pad, 0 var(--sp-4) var(--sp-4));
 		font-size: var(--disclosure-fs, var(--fs-sm));
 		color: var(--text-muted);
+		transition:
+			opacity var(--dur-base) var(--ease-out),
+			translate var(--dur-base) var(--ease-out);
+	}
+	@starting-style {
+		.disclosure__panel:not([hidden]) {
+			opacity: 0;
+			translate: 0 calc(-1 * var(--shift-xs));
+		}
 	}
 	.disclosure--compact {
 		--disclosure-pad: var(--sp-1) var(--sp-2);

package/dist/components/molecules/Disclosure.svelte.d.ts

@@ -20,6 +20,8 @@ type Own = {
     id?: string;
     onchange?: (open: boolean) => void;
     disabled?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     style?: string;
     buttonClass?: string;

package/dist/components/molecules/Drawer.svelte

@@ -6,6 +6,7 @@
 	import { browser } from '../../env';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
+	import { playSound } from '../../sound';
 
 	let {
 		open = $bindable(),
@@ -23,7 +24,8 @@
 		children,
 		footer,
 		class: className,
-		style
+		style,
+		sound = true
 	}: {
 		/** Controlled visibility. When provided the `<dialog>` stays mounted and
 		 *  `showModal()`/`close()` follow the value; closing sets it back to false.
@@ -53,6 +55,8 @@
 		footer?: Snippet;
 		class?: string;
 		style?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	} = $props();
 
 	const titleId = `drawer-title-${Math.random().toString(36).slice(2, 8)}`;
@@ -61,14 +65,20 @@
 	const controlled = $derived(open !== undefined);
 	const shown = $derived(!controlled || open === true);
 
+	// Mounting (or mounting with `open` already true) is a sync, not a
+	// transition, so it stays silent.
+	let synced = false;
 	$effect(() => {
 		if (!dialogEl) return;
 		if (!controlled) {
 			dialogEl.showModal();
 			return;
 		}
-		if (open && !dialogEl.open) dialogEl.showModal();
-		else if (!open && dialogEl.open) dialogEl.close();
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+			if (synced) playSound('open', sound);
+		} else if (!open && dialogEl.open) dialogEl.close();
+		synced = true;
 	});
 
 	$effect(() => {
@@ -82,6 +92,7 @@
 
 	function requestClose() {
 		if (controlled) open = false;
+		else playSound('close', sound);
 		onclose?.();
 	}
 
@@ -111,6 +122,7 @@
 	}}
 	onclose={() => {
 		if (controlled) open = false;
+		playSound('close', sound);
 	}}
 	onpointerdown={onDialogPointerDown}
 	onclick={onDialogClick}
@@ -126,7 +138,7 @@
 			{@render header()}
 		{:else}
 			<div class="panel-head">
-				{#if icon}<span class="panel-icon"><Icon name={icon} size={18} /></span>{/if}
+				{#if icon}<span class="panel-icon"><Icon name={icon} /></span>{/if}
 				<span id={titleId} class="panel-title truncate">{title}</span>
 				{#if page}<span class="panel-page truncate">{page}</span>{/if}
 				<div class="spacer"></div>
@@ -163,6 +175,10 @@
 		color: var(--text);
 		display: flex;
 		justify-content: flex-end;
+		/* Exits run natively on close(): the box leaves the top layer once the panel is gone. */
+		transition:
+			display var(--dur-exit-slow) allow-discrete,
+			overlay var(--dur-exit-slow) allow-discrete;
 	}
 	.drawer:not([open]) {
 		display: none;
@@ -172,10 +188,18 @@
 	}
 	.drawer::backdrop {
 		background: rgba(0, 0, 0, 0.55);
-		animation: drawer-backdrop-in 0.18s var(--ease);
+		opacity: 0;
+		transition:
+			opacity var(--dur-exit) var(--ease-out),
+			display var(--dur-exit) allow-discrete,
+			overlay var(--dur-exit) allow-discrete;
+	}
+	.drawer[open]::backdrop {
+		opacity: 1;
+		transition-duration: var(--dur-base);
 	}
-	@keyframes drawer-backdrop-in {
-		from {
+	@starting-style {
+		.drawer[open]::backdrop {
 			opacity: 0;
 		}
 	}
@@ -192,28 +216,23 @@
 		width: 100%;
 		height: 100%;
 		background: var(--bg-elevated);
-		will-change: transform;
+		will-change: translate;
 		padding-top: var(--safe-top);
 		padding-bottom: var(--safe-bottom);
-		animation: drawer-slide-right 0.2s var(--ease);
+		--drawer-from: 100% 0;
+		translate: var(--drawer-from);
+		transition: translate var(--dur-exit-slow) var(--ease-drawer);
 	}
 	.drawer[data-side='left'] .panel {
-		animation-name: drawer-slide-left;
-	}
-	@keyframes drawer-slide-right {
-		from {
-			transform: translateX(100%);
-		}
+		--drawer-from: -100% 0;
 	}
-	@keyframes drawer-slide-left {
-		from {
-			transform: translateX(-100%);
-		}
+	.drawer[open] .panel {
+		translate: 0;
+		transition-duration: var(--dur-sheet);
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.drawer::backdrop,
-		.panel {
-			animation: none;
+	@starting-style {
+		.drawer[open] .panel {
+			translate: var(--drawer-from);
 		}
 	}
 
@@ -228,6 +247,7 @@
 	.panel-icon {
 		display: inline-flex;
 		flex: none;
+		font-size: var(--icon-lg);
 		color: var(--text-muted);
 	}
 	.panel-title {

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

@@ -29,6 +29,8 @@ type $$ComponentProps = {
     footer?: Snippet;
     class?: string;
     style?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/molecules/Dropzone.svelte

@@ -122,7 +122,7 @@
 		{@render children?.()}
 		{#if over}
 			<div class="dz-overlay" aria-hidden="true">
-				<Icon name="upload" size={28} />
+				<Icon name="upload" />
 				<span class="dz-label">{label}</span>
 			</div>
 		{/if}
@@ -163,7 +163,7 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			<Icon name="upload" size={28} />
+			<Icon name="upload" />
 			<span class="dz-label">{label}</span>
 			<span class="dz-hint">{hint}</span>
 		{/if}
@@ -185,15 +185,25 @@
 		border-radius: var(--r-lg);
 		cursor: pointer;
 		transition:
-			border-color 0.12s var(--ease),
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
+			border-color var(--dur-fast) ease,
+			background-color var(--dur-fast) ease,
+			color var(--dur-fast) ease;
+	}
+	.dz > :global(svg),
+	.dz-overlay > :global(svg) {
+		font-size: var(--icon-xl);
 	}
-	.dz:hover:not(.disabled),
 	.dz:focus-visible {
 		border-color: var(--accent);
 		color: var(--text);
-		outline: none;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.dz:hover:not(.disabled) {
+			border-color: var(--accent);
+			color: var(--text);
+		}
 	}
 	.dz.over {
 		border-color: var(--accent);
@@ -201,7 +211,7 @@
 		color: var(--text);
 	}
 	.dz.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -233,6 +243,12 @@
 		border-radius: var(--r-lg);
 		pointer-events: none;
 		backdrop-filter: blur(1px);
+		transition: opacity var(--dur-fast) ease;
+	}
+	@starting-style {
+		.dz-overlay {
+			opacity: 0;
+		}
 	}
 
 	.dz-label {

package/dist/components/molecules/EmojiPicker.svelte

@@ -5,6 +5,7 @@
 	import Input from '../atoms/Input.svelte';
 	import Popover from './Popover.svelte';
 	import { type EmojiGroup, EMOJI_GROUPS, searchEmoji } from '../../emoji';
+	import { playSound } from '../../sound';
 
 	let {
 		value = '',
@@ -17,6 +18,7 @@
 		placement = 'bottom-start',
 		triggerClass = '',
 		disabled = false,
+		sound = true,
 		class: klass = '',
 		style: styleProp = '',
 	}: {
@@ -33,6 +35,8 @@
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 		triggerClass?: string;
 		disabled?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -110,10 +114,13 @@
 	style={styleProp}
 	control
 	role="dialog"
+	{sound}
 	onopen={() => {
 		query = '';
 		cursor = 0;
+		playSound('open', sound);
 	}}
+	onclose={() => playSound('close', sound)}
 >
 	{#snippet trigger()}
 		<span class="emoji-trigger" aria-hidden="true">{picked || '🙂'}</span>
@@ -198,7 +205,7 @@
 <style>
 	.emoji-trigger {
 		font-size: var(--fs-md);
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.picker {
 		display: flex;
@@ -221,24 +228,36 @@
 		background: none;
 		color: inherit;
 		font-size: var(--fs-lg);
-		line-height: 1;
+		line-height: var(--lh-none);
 		cursor: pointer;
+		--cell-scale-dur: var(--dur-fast);
+		transition:
+			background-color var(--dur-fast) ease,
+			border-color var(--dur-fast) ease,
+			scale var(--cell-scale-dur) var(--ease-out);
 	}
 	.tab.on,
 	.cell.on {
 		border-color: var(--accent);
 		background: var(--bg-elevated-2);
 	}
-	.tab:hover,
-	.cell:hover,
 	.tab:focus-visible,
 	.cell:focus-visible {
 		background: var(--bg-elevated-2);
-	}
-	.tab:focus-visible,
-	.cell:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: var(--focus-ring-offset);
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	.tab:active,
+	.cell:active {
+		--cell-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.tab:hover,
+		.cell:hover {
+			background: var(--bg-elevated-2);
+			transition-duration: var(--dur-instant);
+		}
 	}
 	.grid {
 		display: grid;

package/dist/components/molecules/EmojiPicker.svelte.d.ts

@@ -13,6 +13,8 @@ type $$ComponentProps = {
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     triggerClass?: string;
     disabled?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/EmptyState.svelte

@@ -132,7 +132,7 @@
 		width: 3rem;
 		height: 3rem;
 		border-radius: var(--r-lg);
-		font-size: 1.5rem;
+		font-size: var(--fs-xl);
 		color: var(--empty-tone);
 		background: color-mix(in srgb, var(--empty-tone) 14%, transparent);
 		border: 1px solid color-mix(in srgb, var(--empty-tone) 30%, transparent);
@@ -140,7 +140,7 @@
 	.empty-compact .empty-chip {
 		width: 2.25rem;
 		height: 2.25rem;
-		font-size: 1.125rem;
+		font-size: var(--fs-lg);
 	}
 	.empty-inline {
 		flex-direction: row;
@@ -151,7 +151,7 @@
 	.empty-inline .empty-chip {
 		width: auto;
 		height: auto;
-		font-size: 1em;
+		font-size: var(--icon-md);
 		background: none;
 		border: none;
 	}
@@ -171,14 +171,14 @@
 		font-size: var(--fs-md);
 		font-weight: var(--fw-semibold);
 		color: var(--text);
-		line-height: 1.3;
+		line-height: var(--lh-snug);
 	}
 	.empty-desc {
 		margin: 0;
 		max-width: 32ch;
 		font-size: var(--fs-sm);
 		color: var(--text-muted);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 	}
 	.empty-action {
 		margin-top: var(--sp-1);

package/dist/components/molecules/Fieldset.svelte

@@ -129,8 +129,8 @@
 		border-radius: var(--r-lg);
 		background: var(--bg);
 		transition:
-			border-color 0.12s var(--ease),
-			background 0.12s var(--ease);
+			border-color var(--dur-fast) ease,
+			background-color var(--dur-fast) ease;
 	}
 	.fieldset.dashed {
 		border-style: dashed;
@@ -151,16 +151,16 @@
 	.fieldset-legend {
 		position: absolute;
 		top: -13px;
-		left: 16px;
+		left: var(--sp-4);
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-2);
-		max-width: calc(100% - 32px);
-		padding: 0 8px;
+		max-width: calc(100% - var(--sp-8));
+		padding: 0 var(--sp-2);
 		background: var(--bg);
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-semibold);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 		color: var(--text);
 	}
 
@@ -182,12 +182,7 @@
 		pointer-events: none;
 	}
 	.fieldset.disabled {
-		opacity: 0.6;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.fieldset {
-			transition: none;
-		}
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
 	}
 </style>