@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/layouts/TabBar.svelte

@@ -8,6 +8,7 @@
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 	import { formatCount, hasCount } from '../../count';
+	import { playSound } from '../../sound';
 
 	export interface TabBarItem {
 		id: string;
@@ -27,6 +28,7 @@
 		onselect,
 		label = 'Primary',
 		placement = 'bar',
+		sound = true,
 		class: klass = '',
 		...rest
 	}: {
@@ -38,6 +40,8 @@
 		label?: string;
 		/** 'bar' = fixed to the bottom edge; 'inline' = flows with its parent. */
 		placement?: 'bar' | 'inline';
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -60,6 +64,7 @@
 	function select(item: TabBarItem) {
 		if (item.id === value) return;
 		value = item.id;
+		playSound('click', sound);
 		onselect?.(item.id, item);
 	}
 
@@ -82,7 +87,7 @@
 {#snippet glyph(item: TabBarItem)}
 	<span class="tabbar-glyph">
 		{#if item.icon}
-			<Icon name={item.icon} size={22} />
+			<Icon name={item.icon} />
 		{/if}
 		{#if badgeText(item.badge)}
 			<Badge class="tabbar-badge" tone="accent" size="xs" border={false} active numeric={typeof item.badge === 'number'}>
@@ -167,7 +172,7 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		padding: var(--sp-1) var(--sp-2);
 		border: none;
 		border-radius: 0;
@@ -179,15 +184,17 @@
 		text-decoration: none;
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
-		transition: color 0.12s var(--ease);
+		transition: color var(--dur-fast) var(--ease);
 	}
-	.tabbar-item:hover {
-		color: var(--text);
-		text-decoration: none;
+	@media (hover: hover) and (pointer: fine) {
+		.tabbar-item:hover {
+			color: var(--text);
+			text-decoration: none;
+		}
 	}
 	.tabbar-item:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	.tabbar-item.current {
 		color: var(--accent);
@@ -197,6 +204,13 @@
 		display: inline-flex;
 		flex: none;
 		align-items: center;
+		font-size: var(--icon-xl);
+		--icon-size: var(--icon-xl);
+		transition: scale var(--dur-fast) var(--ease-out);
+	}
+	.tabbar-item:active .tabbar-glyph {
+		scale: var(--press-scale-sm);
+		transition-duration: var(--dur-press);
 	}
 	.tabbar-label {
 		max-width: 100%;
@@ -209,11 +223,7 @@
 		top: -0.4rem;
 		left: calc(100% - 2px);
 		max-width: none;
-		padding-inline: 0.3rem;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.tabbar-item {
-			transition: none;
-		}
+		padding-inline: var(--sp-1-5);
+		font-size: var(--fs-xs);
 	}
 </style>

package/dist/components/layouts/TabBar.svelte.d.ts

@@ -19,6 +19,8 @@ type $$ComponentProps = {
     label?: string;
     /** 'bar' = fixed to the bottom edge; 'inline' = flows with its parent. */
     placement?: 'bar' | 'inline';
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/molecules/Accordion.svelte

@@ -37,6 +37,7 @@
 		variant = 'default',
 		size = 'default',
 		onchange,
+		sound = true,
 		class: klass = '',
 		style: styleProp = '',
 		...rest
@@ -52,6 +53,8 @@
 		/** Header/panel density of every item; forwarded to `Disclosure`. */
 		size?: DisclosureSize;
 		onchange?: (id: string, open: boolean) => void;
+		/** Play UI sounds when enabled globally; false silences every item. */
+		sound?: boolean;
 		class?: string;
 		style?: string;
 	};
@@ -105,6 +108,7 @@
 			disabled={item.disabled}
 			{chevron}
 			{size}
+			{sound}
 		>
 			{#snippet header(ctx)}
 				{#if item.summary}

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

@@ -31,6 +31,8 @@ type Own = {
     /** Header/panel density of every item; forwarded to `Disclosure`. */
     size?: DisclosureSize;
     onchange?: (id: string, open: boolean) => void;
+    /** Play UI sounds when enabled globally; false silences every item. */
+    sound?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/AttachmentList.svelte

@@ -128,7 +128,7 @@
 								{#if src}
 									<img class="thumb" {src} alt="" />
 								{:else}
-									<Icon name={isImage(f) ? 'image' : 'file'} size={18} />
+									<Icon name={isImage(f) ? 'image' : 'file'} style="font-size: var(--icon-lg)" />
 								{/if}
 								{#if numbered}<span class="num tile-num">{i + 1}</span>{/if}
 							</span>
@@ -149,7 +149,7 @@
 												onremove?.(i);
 											}}
 										>
-											<Icon name="trash" size={16} />
+											<Icon name="trash" style="font-size: var(--control-icon-sm)" />
 										</Button>
 									{/if}
 								</div>
@@ -223,7 +223,7 @@
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		border-radius: calc(var(--r-md) - 1px);
+		border-radius: calc(var(--r-md) - var(--sp-px));
 	}
 	.detail {
 		display: flex;
@@ -247,7 +247,7 @@
 		overflow-wrap: anywhere;
 	}
 	.chip :global(.action) {
-		font-size: 1.4em;
+		font-size: var(--fs-md);
 	}
 	.chip :global(.clip) {
 		display: inline-flex;
@@ -278,13 +278,16 @@
 		color: inherit;
 		cursor: pointer;
 	}
-	.open:hover {
-		text-decoration: underline;
+	@media (hover: hover) and (pointer: fine) {
+		.open:hover {
+			text-decoration: underline;
+		}
 	}
+	/* The clip span hides overflow, so the ring sits inside the name. */
 	.open:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: var(--focus-ring-offset);
-		border-radius: var(--r-sm);
+		outline-offset: var(--focus-ring-offset-inset);
+		border-radius: var(--r-xs);
 	}
 	.mini {
 		flex: none;
@@ -295,9 +298,9 @@
 	}
 	.num {
 		flex: none;
-		font-size: 0.8em;
-		font-weight: 600;
-		line-height: 1;
+		font-size: var(--fs-2xs);
+		font-weight: var(--fw-semibold);
+		line-height: var(--lh-none);
 		color: var(--text-muted);
 	}
 	.face {

package/dist/components/molecules/Breadcrumb.svelte

@@ -72,10 +72,7 @@
 				{/if}
 				{#if i < shown.length - 1}
 					<span class="sep" aria-hidden="true">
-						{#if separator}{@render separator()}{:else if char}{char}{:else}<Icon
-								name="chevron-right"
-								size={size === 'md' ? 16 : 14}
-							/>{/if}
+						{#if separator}{@render separator()}{:else if char}{char}{:else}<Icon name="chevron-right" />{/if}
 					</span>
 				{/if}
 			</li>
@@ -127,11 +124,14 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: 16ch;
-		transition: color 0.12s var(--ease);
+		transition: color var(--dur-fast) ease;
 	}
-	.link:hover {
-		color: var(--text);
-		text-decoration: underline;
+	@media (hover: hover) and (pointer: fine) {
+		.link:hover {
+			color: var(--text);
+			text-decoration: underline;
+			transition-duration: var(--dur-instant);
+		}
 	}
 	.current {
 		color: var(--text);
@@ -143,7 +143,7 @@
 	}
 	@media (hover: none) and (pointer: coarse) {
 		.link {
-			min-height: 40px;
+			min-height: var(--control-md);
 			align-content: center;
 		}
 	}
@@ -154,5 +154,9 @@
 		display: inline-flex;
 		align-items: center;
 		color: var(--text-subtle, var(--text-muted));
+		font-size: var(--icon-sm);
+	}
+	.crumbs--md .sep {
+		font-size: var(--icon-md);
 	}
 </style>

package/dist/components/molecules/Callout.svelte

@@ -111,8 +111,8 @@
 		flex: none;
 		align-items: center;
 		color: var(--callout-tone);
-		font-size: 1.125rem;
-		line-height: 1;
+		font-size: var(--fs-lg);
+		line-height: var(--lh-none);
 		min-height: 1.4em;
 	}
 	.callout-body {
@@ -122,7 +122,7 @@
 		flex-direction: column;
 		gap: var(--sp-1);
 		font-size: var(--fs-sm);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 		color: var(--text);
 	}
 	.callout-title {

package/dist/components/molecules/CapBar.svelte

@@ -207,7 +207,7 @@
 		onpointerup={pointerUp}
 		onpointercancel={pointerUp}
 	>
-		<div class="fill"></div>
+		<div class="fill-clip"><div class="fill"></div></div>
 		{#if markerPct !== null}
 			<div class="marker marker-{markerTone}" title={markerLabel} aria-hidden="true"></div>
 			{#if markerLabel}
@@ -287,14 +287,20 @@
 		box-shadow: inset 0 0 0 1px var(--border);
 		pointer-events: none;
 	}
+	.fill-clip {
+		position: absolute;
+		inset: 0;
+		border-radius: var(--r-pill);
+		overflow: hidden;
+		z-index: 1;
+	}
 	.fill {
 		position: absolute;
-		inset: 0 auto 0 0;
-		width: var(--pct);
+		inset: 0;
 		border-radius: var(--r-pill);
 		background: var(--fill);
-		transition: width 0.2s var(--ease);
-		z-index: 1;
+		translate: calc(var(--pct) - 100%) 0;
+		transition: translate var(--dur-base) var(--ease-out);
 	}
 	.uncapped .track::after {
 		display: none;
@@ -306,7 +312,7 @@
 		width: 2px;
 		height: calc(var(--track-h) + 6px);
 		transform: translate(-50%, -50%);
-		border-radius: 1px;
+		border-radius: var(--r-xs);
 		background: var(--marker-color, var(--text-muted));
 		pointer-events: none;
 		z-index: 2;
@@ -338,7 +344,7 @@
 		width: 3px;
 		height: 16px;
 		transform: translate(-50%, -50%);
-		border-radius: 2px;
+		border-radius: var(--r-xs);
 		background: var(--text);
 		box-shadow: 0 0 0 2px var(--surface);
 		cursor: ew-resize;
@@ -348,36 +354,37 @@
 		opacity: 0.4;
 	}
 	.handle:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.bubble {
 		position: absolute;
-		bottom: calc(100% + 8px);
-		left: var(--cap);
-		transform: translateX(-50%);
-		padding: 1px var(--sp-1);
+		bottom: calc(100% + var(--sp-2));
+		left: clamp(0%, var(--cap), 100%);
+		translate: calc(-1 * clamp(0%, var(--cap), 100%)) 0;
+		padding: var(--sp-px) var(--sp-1);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-sm);
 		background: var(--bg-elevated-2);
 		box-shadow: var(--shadow-sm);
 		color: var(--text);
 		font-size: var(--fs-xs);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		font-variant-numeric: tabular-nums;
 		white-space: nowrap;
 		pointer-events: none;
 		opacity: 0;
 		visibility: hidden;
 		transition:
-			opacity 0.12s var(--ease),
-			visibility 0.12s;
+			opacity var(--dur-exit) var(--ease),
+			visibility var(--dur-exit);
 		z-index: 3;
 	}
 	.dragging .bubble,
 	.keying .bubble {
 		opacity: 1;
 		visibility: visible;
+		transition-duration: var(--dur-fast);
 	}
 	.readonly .track,
 	.readonly .handle {
@@ -419,10 +426,4 @@
 	.cap-bar.stacked .caption {
 		grid-column: 1 / -1;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.fill,
-		.bubble {
-			transition: none;
-		}
-	}
 </style>

package/dist/components/molecules/Carousel.svelte

@@ -143,7 +143,7 @@
 		{onpointerup}
 		{onpointercancel}
 	>
-		<div class="track" style:transform="translateX(-{index * 100}%)">
+		<div class="track" style:translate="{-index * 100}% 0">
 			{#each slides as item, i (i)}
 				<div
 					class="slide {slideClass}"
@@ -222,7 +222,7 @@
 	.track {
 		display: flex;
 		width: 100%;
-		transition: transform 0.35s var(--ease);
+		transition: translate var(--dur-sheet) var(--ease-in-out);
 	}
 	.slide {
 		flex: 0 0 100%;
@@ -240,37 +240,47 @@
 		gap: var(--sp-2);
 	}
 	.dot {
-		width: 0.5rem;
-		height: 0.5rem;
+		position: relative;
+		width: var(--sp-2);
+		height: var(--sp-2);
 		padding: 0;
 		border: 0;
 		border-radius: var(--r-pill);
 		background: var(--border);
 		cursor: pointer;
 		transition:
-			background 0.12s var(--ease),
-			transform 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease);
 	}
-	.dot:hover {
-		background: var(--text-faint);
+	@media (hover: hover) and (pointer: fine) {
+		.dot:hover {
+			background: var(--text-faint);
+		}
+	}
+	.dot:active {
+		scale: var(--press-scale-sm);
 	}
 	.dot.active {
 		background: var(--accent);
-		transform: scale(1.25);
+		scale: 1.25;
 	}
 	.dot:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	@media (pointer: coarse) {
+		.dots {
+			gap: var(--sp-4);
+		}
+		.dot::before {
+			content: '';
+			position: absolute;
+			inset: calc((100% - var(--sp-6)) / 2);
+		}
 	}
 	.counter {
 		color: var(--text-muted);
 		font-size: var(--fs-sm);
 		font-variant-numeric: tabular-nums;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.track,
-		.dot {
-			transition: none;
-		}
-	}
 </style>

package/dist/components/molecules/ChatBubble.svelte

@@ -134,8 +134,8 @@
 		align-self: flex-start;
 	}
 	.selected {
-		outline: 2px solid var(--accent);
-		outline-offset: 1px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.bubble[data-state='sending'] {
 		opacity: 0.7;

package/dist/components/molecules/CodeBlock.svelte

@@ -118,7 +118,7 @@
 		user-select: none;
 		font-family: var(--font-mono);
 		font-size: var(--fs-sm);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 	}
 	.cb-pre {
 		margin: 0;
@@ -126,7 +126,7 @@
 		flex: 1;
 		font-family: var(--font-mono);
 		font-size: var(--fs-sm);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 		color: var(--md-text, var(--text));
 		tab-size: 2;
 	}

package/dist/components/molecules/Combobox.svelte

@@ -7,6 +7,7 @@
 	import { tick, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { type AnchorRect, placeAt } from '../../floating';
+	import { playSound } from '../../sound';
 	import { caretRect, comboboxAction } from './combobox-keyboard.js';
 
 	type FieldEl = HTMLInputElement | HTMLTextAreaElement;
@@ -46,6 +47,8 @@
 		option?: Snippet<[T, { active: boolean; index: number }]>;
 		/** Shown instead of rows when `options` is empty; without it the listbox hides. */
 		empty?: string | Snippet;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		children: Snippet;
 		class?: string;
 		style?: string;
@@ -73,6 +76,7 @@
 		onclose,
 		option,
 		empty,
+		sound = true,
 		children,
 		class: klass = '',
 		style: styleProp = '',
@@ -136,6 +140,13 @@
 		placeAt(r, panelEl, placement, gap);
 	}
 
+	let wasVisible: boolean | null = null;
+	$effect(() => {
+		const v = visible;
+		if (wasVisible !== null && v !== wasVisible) playSound(v ? 'open' : 'close', sound);
+		wasVisible = v;
+	});
+
 	$effect(() => {
 		const p = panelEl;
 		if (!visible || !p) return;
@@ -264,7 +275,7 @@
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
-		gap: 1px;
+		gap: var(--sp-px);
 		min-width: var(--cb-min-width, 10rem);
 		max-width: calc(100vw - 2 * var(--sp-3));
 		max-height: var(--cb-max-height, min(16rem, 40vh));
@@ -275,6 +286,21 @@
 		border: 1px solid var(--cb-border, var(--border-strong));
 		border-radius: var(--cb-radius, var(--r-md));
 		box-shadow: var(--shadow-md);
+		transform-origin: var(--tsu-origin, top left);
+		opacity: 1;
+		scale: 1;
+		translate: 0;
+		transition:
+			opacity var(--dur-fast) var(--ease-out),
+			scale var(--dur-fast) var(--ease-out),
+			translate var(--dur-fast) var(--ease-out);
+	}
+	@starting-style {
+		.cb-panel:popover-open {
+			opacity: 0;
+			scale: var(--enter-scale);
+			translate: var(--tsu-shift, 0 calc(-1 * var(--shift-sm)));
+		}
 	}
 	.cb-panel.cb-caret {
 		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
@@ -287,9 +313,12 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		transition: background-color var(--dur-fast) ease;
 	}
+	/* Highlight lands instantly and fades out: list navigation is high frequency. */
 	.cb-option.active {
 		background: var(--cb-active-bg, var(--bg-elevated-2));
+		transition-duration: var(--dur-instant);
 	}
 	.cb-empty {
 		padding: var(--sp-1) var(--sp-2);

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

@@ -37,6 +37,8 @@ declare function $$render<T>(): {
         }]>;
         /** Shown instead of rows when `options` is empty; without it the listbox hides. */
         empty?: string | Snippet;
+        /** Play UI sounds when enabled globally; false silences this instance. */
+        sound?: boolean;
         children: Snippet;
         class?: string;
         style?: string;
@@ -78,6 +80,8 @@ declare function $$render<T>(): {
         }]>;
         /** Shown instead of rows when `options` is empty; without it the listbox hides. */
         empty?: string | Snippet;
+        /** Play UI sounds when enabled globally; false silences this instance. */
+        sound?: boolean;
         children: Snippet;
         class?: string;
         style?: string;

package/dist/components/molecules/Composer.svelte

@@ -229,8 +229,8 @@
 		border-radius: var(--r-lg);
 	}
 	.composer.dragging {
-		outline: 2px dashed var(--accent);
-		outline-offset: var(--sp-1);
+		outline: var(--focus-ring-width) dashed var(--accent);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.toolbar {
 		display: flex;

package/dist/components/molecules/ConfirmModal.svelte

@@ -21,6 +21,7 @@
 		oncancel,
 		class: klass = '',
 		style: styleProp = '',
+		sound = true,
 	}: {
 		open?: boolean;
 		title: string;
@@ -35,6 +36,8 @@
 		oncancel?: () => void;
 		class?: string;
 		style?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	} = $props();
 	const t = $derived(canonicalTone(tone));
 	const modalTone = $derived(t === 'danger' || t === 'warn' || t === 'info' ? t : 'neutral');
@@ -80,6 +83,7 @@
 	size="sm"
 	class={klass}
 	style={styleProp}
+	{sound}
 >
 	{#snippet body()}
 		<div class="confirm-body" data-tsu="ConfirmModal">

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

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