@dorsk/tsumikit 0.73.2 → 0.75.0

package/dist/components/atoms/Swatch.svelte

@@ -76,7 +76,7 @@
 		color: var(--text);
 		font: inherit;
 		font-size: calc(var(--swatch-size) * 0.6);
-		line-height: 1;
+		line-height: var(--lh-none);
 		vertical-align: middle;
 		box-sizing: border-box;
 	}
@@ -90,7 +90,7 @@
 		border-radius: var(--r-sm);
 	}
 	.sm.square {
-		border-radius: 3px;
+		border-radius: var(--r-xs);
 	}
 	.selected {
 		border-color: var(--text);
@@ -100,16 +100,27 @@
 	}
 	.interactive {
 		cursor: pointer;
+		--swatch-scale-dur: var(--dur-fast);
 		transition:
-			transform 0.1s var(--ease),
-			box-shadow 0.12s var(--ease);
+			scale var(--swatch-scale-dur) var(--ease-out),
+			border-color var(--dur-fast) ease,
+			box-shadow var(--dur-fast) ease;
 	}
-	.interactive:hover {
-		transform: scale(1.15);
+	.interactive:active {
+		--swatch-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
 	}
 	.interactive:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 3px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.interactive:hover {
+			scale: 1.15;
+		}
+		.interactive:hover:active {
+			scale: calc(1.15 * var(--press-scale-sm));
+		}
 	}
 	@media (pointer: coarse) {
 		.interactive {

package/dist/components/atoms/Switch.svelte

@@ -5,6 +5,7 @@
 	// `label` is the accessible name; `labelVisible` renders it beside the track.
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { getFieldContext } from '../../field-context';
+	import { playSound } from '../../sound';
 
 	let {
 		checked = $bindable(false),
@@ -12,6 +13,7 @@
 		label,
 		labelVisible = false,
 		size = 'md',
+		sound = true,
 		onclick,
 		id,
 		'aria-describedby': ariaDescribedby,
@@ -25,6 +27,8 @@
 		/** Render `label` as visible text beside the track. */
 		labelVisible?: boolean;
 		size?: ControlSize;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];
@@ -37,6 +41,7 @@
 		onclick?.(e);
 		if (e.defaultPrevented) return;
 		checked = !checked;
+		playSound(checked ? 'toggle-on' : 'toggle-off', sound);
 	}
 </script>
 
@@ -70,59 +75,67 @@
 {/if}
 
 <style>
+	/* Track and knob sit on the 4px grid: md 24 / sm 20 tall, knob = track minus
+	   border and padding, travel = track width minus the knob and insets. */
 	.switch {
+		--sw-h: var(--chip-md);
+		--sw-w: 2.75rem;
+		--sw-inset: calc(var(--sp-0-5) + 1px);
+		--sw-knob: calc(var(--sw-h) - 2 * var(--sw-inset));
 		flex: none;
-		width: 2.75rem;
-		height: 1.6rem;
+		width: var(--sw-w);
+		height: var(--sw-h);
 		border-radius: var(--r-pill);
 		border: 1px solid var(--border-strong);
 		background: var(--bg-elevated-2);
-		padding: 2px;
+		padding: var(--sp-0-5);
 		display: flex;
 		align-items: center;
 		cursor: pointer;
 		transition:
-			background 0.14s var(--ease),
-			border-color 0.14s var(--ease);
+			background var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease);
 	}
 	.switch .knob {
-		width: 1.25rem;
-		height: 1.25rem;
-		border-radius: 50%;
+		width: var(--sw-knob);
+		height: var(--sw-knob);
+		border-radius: var(--r-pill);
 		background: var(--text-muted);
+		transform-origin: left center;
 		transition:
-			transform 0.14s var(--ease),
-			background 0.14s var(--ease);
+			translate var(--dur-spring) var(--ease-spring),
+			scale var(--dur-fast) var(--ease-out),
+			background var(--dur-fast) var(--ease);
 	}
 	.switch.on {
 		background: var(--accent);
 		border-color: var(--accent);
 	}
 	.switch.on .knob {
-		transform: translateX(1.15rem);
+		translate: calc(var(--sw-w) - var(--sw-knob) - 2 * var(--sw-inset)) 0;
 		background: var(--text-on-accent);
+		transform-origin: right center;
+	}
+	/* 1.12 stretch toward the travel side; derived from the press tokens so the
+	   reduced-motion root (press scales = 1) flattens it to 1. */
+	.switch:active:not(:disabled) .knob {
+		scale: calc(1 + (var(--press-scale) - var(--press-scale-sm)) * 2.4) 1;
+		transition-duration: var(--dur-press);
 	}
 	.switch:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
 	.switch:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.switch[aria-invalid='true']:not(.on) {
 		border-color: var(--danger);
 	}
 	.switch-sm {
-		width: 2rem;
-		height: 1.2rem;
-	}
-	.switch-sm .knob {
-		width: 0.9rem;
-		height: 0.9rem;
-	}
-	.switch-sm.on .knob {
-		transform: translateX(0.8rem);
+		--sw-h: var(--chip-sm);
+		--sw-w: 2rem;
 	}
 	@media (pointer: coarse) {
 		.switch {

package/dist/components/atoms/Switch.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = HTMLButtonAttributes & {
     /** Render `label` as visible text beside the track. */
     labelVisible?: boolean;
     size?: ControlSize;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];

package/dist/components/atoms/Text.svelte

@@ -232,7 +232,7 @@
 		line-height: var(--lh-normal);
 	}
 	.lh-none {
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.grow {
 		flex: 1 1 0;

package/dist/components/atoms/Textarea.svelte

@@ -266,23 +266,29 @@
 		position: relative;
 		display: flex;
 	}
+	/* The wrap dims as one so the resize grip fades with the field; inside an
+	   InputGroup the group dims instead. */
+	.textarea-wrap:has(.textarea:disabled):not(.grouped) {
+		opacity: var(--disabled-opacity);
+	}
 	.textarea {
 		width: 100%;
 		/* Horizontal padding matches Input/Button; vertical padding is tighter
 		   (--sp-2) so a single line-box + border actually fits the 2.5rem floor —
 		   --sp-3 top+bottom would overshoot it and a `rows={1}` textarea would
 		   render taller than the buttons it sits beside. */
-		padding: var(--sp-2) var(--sp-3);
+		padding: var(--sp-2) var(--control-px-md);
 		background: var(--textarea-bg, var(--bg));
 		border: 1px solid var(--textarea-border, var(--border-strong));
 		border-radius: var(--textarea-radius, var(--r-md));
 		color: var(--textarea-fg, var(--text));
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 		/* Custom handle replaces the native grip; never show the native one. */
 		resize: none;
 		/* Match the single-row height of Button/Input so a `rows={1}` textarea
 		   lines up with them; the native `rows` attribute grows it from here. */
-		min-height: var(--textarea-size, 2.5rem);
+		min-height: var(--textarea-size, var(--control-height-default));
+		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		font-family: inherit;
 	}
@@ -294,24 +300,33 @@
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
+	.textarea:disabled {
+		cursor: not-allowed;
+	}
 	.textarea.capped {
 		overflow-y: auto;
 	}
 	.textarea-sm {
-		padding: var(--sp-1) var(--sp-2);
-		font-size: var(--fs-sm);
-		min-height: var(--textarea-size, 2rem);
+		padding: var(--sp-1) var(--control-px-sm);
+		font-size: var(--control-fs-sm);
+		min-height: var(--textarea-size, var(--control-height-compact));
 	}
 	.textarea-lg {
-		padding: var(--sp-3) var(--sp-4);
-		font-size: max(16px, var(--fs-md));
+		padding: var(--sp-3) var(--control-px-lg);
+		font-size: var(--control-fs-lg);
 		min-height: var(--textarea-size, var(--control-height-large));
 	}
 	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
 	   carry their difference through padding and height alone. */
 	@media (pointer: coarse) {
+		.textarea {
+			font-size: max(16px, var(--control-fs-md));
+		}
 		.textarea-sm {
-			font-size: max(16px, var(--fs-sm));
+			font-size: max(16px, var(--control-fs-sm));
+		}
+		.textarea-lg {
+			font-size: max(16px, var(--control-fs-lg));
 		}
 	}
 	.textarea[aria-invalid='true'],
@@ -378,9 +393,9 @@
 		transform: translateX(-50%);
 		width: 28px;
 		height: 3px;
-		border-radius: 999px;
+		border-radius: var(--r-pill);
 		background: var(--border-strong);
-		transition: background 0.12s var(--ease);
+		transition: background-color var(--dur-fast) ease;
 	}
 	.resize-bottom::after {
 		bottom: 3px;
@@ -388,8 +403,15 @@
 	.resize-top::after {
 		top: 3px;
 	}
-	.resize-handle:hover::after,
 	.dragging .resize-handle::after {
 		background: var(--accent);
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.textarea:hover:not(:disabled, :focus, [aria-invalid='true']) {
+			border-color: var(--text-faint);
+		}
+		.resize-handle:hover::after {
+			background: var(--accent);
+		}
+	}
 </style>

package/dist/components/atoms/TimeDisplay.svelte

@@ -84,8 +84,10 @@
 		cursor: pointer;
 		border-radius: var(--r-sm);
 	}
-	.td--button:hover {
-		color: var(--text);
+	@media (hover: hover) and (pointer: fine) {
+		.td--button:hover {
+			color: var(--text);
+		}
 	}
 	.td--button:focus-visible {
 		outline: var(--focus-ring);

package/dist/components/layouts/AppShell.svelte

@@ -326,8 +326,8 @@
 		/* A query container named `sidebar` so nav items collapse to an icon rail
 		   based on the sidebar's own width (see NavItem). */
 		container: sidebar / inline-size;
-		transform: translateX(-100%);
-		transition: transform 0.2s var(--ease);
+		translate: -100% 0;
+		transition: translate var(--dur-exit-slow) var(--ease-drawer);
 	}
 	.shell-sidebar[data-padding='sm'] {
 		--shell-sidebar-pad: var(--sp-2);
@@ -336,8 +336,9 @@
 		--shell-sidebar-pad: 0px;
 	}
 	.shell-sidebar.open {
-		transform: translateX(0);
+		translate: 0 0;
 		box-shadow: var(--shadow-lg);
+		transition-duration: var(--dur-sheet);
 	}
 	.shell-scrim {
 		display: none;
@@ -347,9 +348,20 @@
 		background: rgba(0, 0, 0, 0.5);
 		border: 0;
 		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity var(--dur-exit) var(--ease-out),
+			display var(--dur-exit) allow-discrete;
 	}
 	.shell-scrim.show {
 		display: block;
+		opacity: 1;
+		transition-duration: var(--dur-base);
+	}
+	@starting-style {
+		.shell-scrim.show {
+			opacity: 0;
+		}
 	}
 
 	/* Resize handle lives only on the desktop persistent column. */
@@ -379,7 +391,8 @@
 		.shell-sidebar {
 			position: relative; /* anchor the absolute resize handle */
 			grid-area: sidebar;
-			transform: none;
+			translate: none;
+			transition: none;
 			z-index: auto;
 			box-shadow: none;
 			border-right: 1px solid var(--border);
@@ -415,18 +428,22 @@
 			transform: translateY(-50%);
 			width: 3px;
 			height: 28px;
-			border-radius: 999px;
+			border-radius: var(--r-pill);
 			background: var(--border-strong);
-			transition: background 0.12s var(--ease);
+			transition: background var(--dur-fast) var(--ease);
 		}
-		.shell-sidebar-resize:hover::after,
 		.shell-sidebar-resize:focus-visible::after,
 		.shell.dragging .shell-sidebar-resize::after {
 			background: var(--accent);
 		}
 		.shell-sidebar-resize:focus-visible {
-			outline: 2px solid var(--accent);
-			outline-offset: -2px;
+			outline: var(--focus-ring);
+			outline-offset: var(--focus-ring-offset-inset);
+		}
+	}
+	@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
+		.shell-sidebar-resize:hover::after {
+			background: var(--accent);
 		}
 	}
 
@@ -443,10 +460,4 @@
 			display: none;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.shell-sidebar {
-			transition: none;
-		}
-	}
 </style>

package/dist/components/layouts/MasterDetail.svelte

@@ -208,12 +208,14 @@
 		cursor: pointer;
 		flex-shrink: 0;
 	}
-	.md-back:hover {
-		background: color-mix(in srgb, var(--accent) 12%, transparent);
+	@media (hover: hover) and (pointer: fine) {
+		.md-back:hover {
+			background: color-mix(in srgb, var(--accent) 12%, transparent);
+		}
 	}
 	.md-back:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 
 	.md.mobile {
@@ -228,7 +230,23 @@
 	}
 	.md.mobile .md-detail {
 		width: 100%;
-		animation: md-slide-in 0.2s var(--ease);
+		translate: 0 0;
+		opacity: 1;
+		transition:
+			translate var(--dur-base) var(--ease-out),
+			opacity var(--dur-base) var(--ease-out),
+			display var(--dur-base) allow-discrete;
+	}
+	@starting-style {
+		.md.mobile .md-detail {
+			translate: var(--shift-md) 0;
+			opacity: 0;
+		}
+	}
+	.md.mobile .md-detail[hidden] {
+		translate: var(--shift-md) 0;
+		opacity: 0;
+		transition-duration: var(--dur-exit);
 	}
 	.md.mobile .md-detail-header {
 		padding-inline: max(var(--sp-3), var(--safe-left)) max(var(--sp-3), var(--safe-right));
@@ -237,20 +255,4 @@
 		padding-inline: var(--safe-left) var(--safe-right);
 		padding-bottom: var(--safe-bottom);
 	}
-
-	@keyframes md-slide-in {
-		from {
-			transform: translateX(8%);
-			opacity: 0;
-		}
-		to {
-			transform: none;
-			opacity: 1;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.md.mobile .md-detail {
-			animation: none;
-		}
-	}
 </style>

package/dist/components/layouts/NavBar.svelte

@@ -275,18 +275,21 @@
 		text-decoration: none;
 		cursor: pointer;
 		transition:
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease);
 	}
 	.stacked .navbar-link {
 		flex-direction: column;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		font-size: var(--fs-xs);
 	}
-	.navbar-link:hover {
-		background: var(--bg-elevated-2);
-		color: var(--text);
-		text-decoration: none;
+	@media (hover: hover) and (pointer: fine) {
+		.navbar-link:hover {
+			background: var(--bg-elevated-2);
+			color: var(--text);
+			text-decoration: none;
+			transition-duration: var(--dur-instant);
+		}
 	}
 	.navbar-link.current {
 		color: var(--accent);
@@ -300,7 +303,7 @@
 	}
 	.navbar-emoji {
 		font-size: 1.15em;
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.navbar-label {
 		min-width: 0;

package/dist/components/layouts/NavItem.svelte

@@ -115,13 +115,21 @@
 		text-decoration: none;
 		white-space: nowrap;
 		transition:
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease);
 	}
-	.nav-item:hover {
-		background: var(--bg-elevated-2);
-		color: var(--text);
-		text-decoration: none;
+	@media (hover: hover) and (pointer: fine) {
+		.nav-item:hover {
+			background: var(--bg-elevated-2);
+			color: var(--text);
+			text-decoration: none;
+			transition-duration: var(--dur-instant);
+		}
+	}
+	/* Nav items live in scrolling sidebars and lists; the ring stays inside. */
+	.nav-item:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	.nav-item.active {
 		background: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -158,7 +166,7 @@
 	.nav-item.vertical {
 		flex-direction: column;
 		justify-content: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		padding: var(--sp-1) var(--sp-2);
 		font-size: var(--fs-xs);
 		text-align: center;

package/dist/components/layouts/NavSection.svelte

@@ -62,7 +62,7 @@
 	.nav-section-items {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: var(--sp-0-5);
 	}
 
 	/* Icon-rail: drop the textual label and use a hairline divider to keep groups

package/dist/components/layouts/ResizablePanel.svelte

@@ -364,7 +364,7 @@
 				style="transform: translateY({stickyShift}px)"
 				onclick={toggle}
 			>
-				<Icon name={toggleIcon} size={14} />
+				<Icon name={toggleIcon} />
 			</button>
 			{/if}
 		</svelte:element>
@@ -403,7 +403,12 @@
 		width: var(--panel-current-width);
 		background: var(--bg-elevated);
 		border-right: 1px solid var(--border);
-		transition: width 0.18s var(--ease), box-shadow 0.18s var(--ease);
+		transition:
+			width var(--dur-base) var(--ease),
+			box-shadow var(--dur-base) var(--ease);
+	}
+	.resizing .panel {
+		transition: none;
 	}
 	.right .panel {
 		grid-column: 2;
@@ -442,14 +447,19 @@
 		padding: 0;
 		color: var(--text-faint);
 		font: inherit;
+		font-size: var(--icon-sm);
 		background: transparent;
 		border: 1px solid transparent;
 		border-radius: var(--r-sm);
 		cursor: pointer;
 		transition:
-			color 0.12s var(--ease),
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease);
+			color var(--dur-fast) var(--ease),
+			background var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			scale var(--dur-press) var(--ease-out);
+	}
+	.collapse-control:active {
+		scale: var(--press-scale-sm);
 	}
 	.collapse-control.top {
 		top: var(--sp-2);
@@ -461,15 +471,17 @@
 		left: auto;
 		right: var(--sp-1);
 	}
-	.collapse-control:hover {
-		color: var(--text);
-		background: var(--bg-elevated-2);
-		border-color: var(--border);
+	@media (hover: hover) and (pointer: fine) {
+		.collapse-control:hover {
+			color: var(--text);
+			background: var(--bg-elevated-2);
+			border-color: var(--border);
+		}
 	}
 	.collapse-control:focus-visible,
 	.resize-handle:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	/* The handle overhangs the panel edge by 6px, but never past the host
 	   container: when the panel fills it (edge at the window border), the
@@ -503,12 +515,19 @@
 		border-radius: var(--r-pill);
 		background: var(--border-strong);
 		transform: translate(-50%, -50%);
-		transition: background 0.12s var(--ease), height 0.12s var(--ease);
+		transition:
+			background var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.resize-handle:hover::after {
+			scale: 1 1.5;
+			background: var(--accent);
+		}
 	}
-	.resize-handle:hover::after,
 	.resize-handle:focus-visible::after,
 	.resizing .resize-handle::after {
-		height: var(--sp-12);
+		scale: 1 1.5;
 		background: var(--accent);
 	}
 	.resizing {
@@ -564,7 +583,7 @@
 		width: min(var(--panel-current-width), 100%);
 		box-shadow: var(--shadow-md);
 		outline: none;
-		animation: panel-slide-left 0.18s var(--ease);
+		animation: panel-slide-left var(--dur-base) var(--ease);
 	}
 	.overlay.right .panel {
 		right: 0;
@@ -597,6 +616,9 @@
 
 	/* Coarse pointers: an invisible slab grows the chevron towards --touch-target. */
 	@media (pointer: coarse) {
+		.collapse-control {
+			min-inline-size: var(--sp-6);
+		}
 		.collapse-control::before {
 			content: '';
 			position: absolute;
@@ -607,7 +629,6 @@
 
 	@media (prefers-reduced-motion: reduce) {
 		.panel {
-			transition: none;
 			animation: none;
 		}
 		.overlay .panel,