@dorsk/tsumikit 0.73.2 → 0.75.0

package/dist/components/atoms/Input.svelte

@@ -136,15 +136,17 @@
 
 <style>
 	.input {
+		--input-icon: var(--control-icon-md);
 		width: 100%;
 		min-height: var(--input-size, var(--control-height-default));
-		padding: var(--sp-2) var(--sp-3);
+		padding: var(--sp-2) var(--control-px-md);
+		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		background: var(--input-bg, var(--bg));
 		border: 1px solid var(--input-border, var(--border-strong));
 		border-radius: var(--input-radius, var(--r-md));
 		color: var(--input-fg, var(--text));
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 	}
 	.input:focus {
 		outline: none;
@@ -154,21 +156,33 @@
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
+	.input:disabled {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
 	.input-sm {
 		min-height: var(--input-size, var(--control-height-compact));
-		padding: var(--sp-1) var(--sp-2);
-		font-size: var(--fs-sm);
+		padding: var(--sp-1) var(--control-px-sm);
+		font-size: var(--control-fs-sm);
+		--input-icon: var(--control-icon-sm);
 	}
 	.input-lg {
 		min-height: var(--input-size, var(--control-height-large));
-		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);
+		--input-icon: var(--control-icon-lg);
 	}
 	/* 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) {
+		.input {
+			font-size: max(16px, var(--control-fs-md));
+		}
 		.input-sm {
-			font-size: max(16px, var(--fs-sm));
+			font-size: max(16px, var(--control-fs-sm));
+		}
+		.input-lg {
+			font-size: max(16px, var(--control-fs-lg));
 		}
 		.input-sm:not(.grouped) {
 			min-height: max(var(--touch-target-compact), var(--input-size, var(--control-height-compact)));
@@ -192,8 +206,8 @@
 	.input[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
-	/* Inside an InputGroup the group draws the focus ring and the overlaid
-	   adornments report their widths; the text stays clear of them. */
+	/* Inside an InputGroup the group draws the focus ring, dims the whole group
+	   and the overlaid adornments report their widths; the text stays clear of them. */
 	.input.grouped {
 		width: 100%;
 		border-radius: var(--ig-radius);
@@ -203,6 +217,9 @@
 	.input.grouped:focus-visible {
 		outline: none;
 	}
+	.input.grouped:disabled {
+		opacity: 1;
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}
@@ -216,11 +233,18 @@
 	.input-wrap .input {
 		width: 100%;
 	}
+	/* The wrap dims as one so the icon and the clear button fade with the field. */
+	.input-wrap:has(.input:disabled) {
+		opacity: var(--disabled-opacity);
+	}
+	.input-wrap .input:disabled {
+		opacity: 1;
+	}
 	.has-icon {
-		padding-inline-start: calc(var(--sp-3) + 1em + var(--sp-2));
+		padding-inline-start: calc(var(--control-px-md) + var(--input-icon) + var(--sp-2));
 	}
 	.has-clear {
-		padding-inline-end: calc(var(--sp-3) + 1em + var(--sp-2));
+		padding-inline-end: calc(var(--control-px-md) + var(--input-icon) + var(--sp-2));
 	}
 	.input-icon,
 	.input-clear {
@@ -229,13 +253,21 @@
 		bottom: 0;
 		display: flex;
 		align-items: center;
+		font-size: var(--input-icon, var(--control-icon-md));
 		color: var(--text-faint);
 		pointer-events: none;
 	}
+	.input-wrap:has(.input-sm) {
+		--input-icon: var(--control-icon-sm);
+	}
+	.input-wrap:has(.input-lg) {
+		--input-icon: var(--control-icon-lg);
+	}
 	.input-icon {
-		left: var(--sp-3);
+		left: var(--control-px-md);
 	}
 	.input-clear {
+		--clear-scale-dur: var(--dur-fast);
 		right: var(--sp-2);
 		pointer-events: auto;
 		border: 0;
@@ -243,9 +275,31 @@
 		padding: 0 var(--sp-1);
 		cursor: pointer;
 		border-radius: var(--r-sm);
+		transition:
+			color var(--dur-fast) ease,
+			opacity var(--dur-fast) ease,
+			scale var(--clear-scale-dur) var(--ease-out);
+	}
+	@starting-style {
+		.input-clear {
+			opacity: 0;
+		}
 	}
-	.input-clear:hover,
 	.input-clear:focus-visible {
 		color: var(--text);
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	.input-clear:active {
+		--clear-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.input:hover:not(:disabled, :focus, [aria-invalid='true']) {
+			border-color: var(--text-faint);
+		}
+		.input-clear:hover {
+			color: var(--text);
+		}
 	}
 </style>

package/dist/components/atoms/Kbd.svelte

@@ -95,7 +95,7 @@
 	.kbd-group {
 		display: inline-flex;
 		align-items: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 		vertical-align: baseline;
@@ -106,7 +106,7 @@
 	.kbd {
 		font-family: var(--font-mono);
 		font-size: inherit;
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		padding: 0 var(--sp-1);
 		border: 1px solid var(--border-strong);
 		border-bottom-width: 2px;
@@ -124,7 +124,7 @@
 		white-space: nowrap;
 	}
 	.kbd-sep {
-		font-size: 0.85em;
+		font-size: var(--fs-2xs);
 		color: var(--text-faint);
 	}
 </style>

package/dist/components/atoms/Link.svelte

@@ -56,6 +56,9 @@
 		text-decoration: underline;
 		font: inherit;
 		text-align: start;
+		transition:
+			color var(--dur-fast) ease,
+			text-decoration-color var(--dur-fast) ease;
 	}
 	.tone-info {
 		color: var(--info);
@@ -70,8 +73,10 @@
 	.underline-none {
 		text-decoration: none;
 	}
-	.underline-hover:hover {
-		text-decoration: underline;
+	@media (hover: hover) and (pointer: fine) {
+		.underline-hover:hover {
+			text-decoration: underline;
+		}
 	}
 	.align-center {
 		text-align: center;

package/dist/components/atoms/Progress.svelte

@@ -95,7 +95,7 @@
 	aria-valuemax={indeterminate ? undefined : max}
 	aria-valuenow={indeterminate ? undefined : value}
 >
-	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
+	<div class="bar" style={indeterminate ? undefined : `--p: ${pct / 100}`}></div>
 	{#each markers as m, i (`${i}:${m.at}`)}
 		<span
 			class="marker tone-{m.tone ? canonicalTone(m.tone) : 'text'}"
@@ -154,10 +154,12 @@
 		height: 0.3125rem;
 	}
 	.bar {
+		width: 100%;
 		height: 100%;
 		background: var(--fill, var(--accent));
 		border-radius: inherit;
-		transition: width 0.2s var(--ease);
+		translate: calc((var(--p, 1) - 1) * 100%) 0;
+		transition: translate var(--dur-base) var(--ease-out);
 	}
 	.marker {
 		position: absolute;
@@ -233,22 +235,22 @@
 	}
 	.progress.indeterminate .bar {
 		width: 40%;
-		animation: kt-progress-slide 1.1s ease-in-out infinite;
+		animation: kt-progress-slide 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 	}
 	.progress.striped .bar {
 		animation: kt-stripe 0.6s linear infinite;
 	}
 	.progress.striped.indeterminate .bar {
 		animation:
-			kt-progress-slide 1.1s ease-in-out infinite,
+			kt-progress-slide 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite,
 			kt-stripe 0.6s linear infinite;
 	}
 	@keyframes kt-progress-slide {
 		0% {
-			transform: translateX(-110%);
+			transform: translateX(-100%);
 		}
 		100% {
-			transform: translateX(310%);
+			transform: translateX(250%);
 		}
 	}
 	@keyframes kt-stripe {
@@ -265,5 +267,9 @@
 		.progress.striped.indeterminate .bar {
 			animation: none;
 		}
+		.progress.indeterminate .bar {
+			width: 100%;
+			opacity: 0.35;
+		}
 	}
 </style>

package/dist/components/atoms/Scrim.svelte

@@ -88,16 +88,11 @@
 		border: 0;
 		background: color-mix(in srgb, var(--bg) 45%, transparent);
 		cursor: default;
-		animation: scrim-fade 0.18s var(--ease);
+		transition: opacity var(--dur-base) var(--ease-out);
 	}
-	@keyframes scrim-fade {
-		from {
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
+	@starting-style {
 		.scrim {
-			animation: none;
+			opacity: 0;
 		}
 	}
 </style>

package/dist/components/atoms/SegmentedProgress.svelte

@@ -103,7 +103,7 @@
 		>
 			{#each segments as seg, i (i)}
 				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
-					<div class="bar" style="width: {pct(seg)}%"></div>
+					<div class="bar" style="--p: {pct(seg) / 100}"></div>
 				</div>
 			{/each}
 			{#if remainder > 0}
@@ -124,7 +124,7 @@
 		>
 			{#each segments as seg, i (i)}
 				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
-					<div class="bar" style="width: {pct(seg)}%"></div>
+					<div class="bar" style="--p: {pct(seg) / 100}"></div>
 				</div>
 			{/each}
 		</div>
@@ -180,9 +180,11 @@
 		border-bottom-right-radius: var(--r-pill);
 	}
 	.bar {
+		width: 100%;
 		height: 100%;
 		background: var(--fill, var(--accent));
-		transition: width 0.2s var(--ease);
+		translate: calc((var(--p, 1) - 1) * 100%) 0;
+		transition: translate var(--dur-base) var(--ease-out);
 	}
 	.tone-success,
 	.tone-ok {
@@ -210,7 +212,6 @@
 		min-width: 0;
 		border-radius: 0;
 		background: transparent;
-		transition: flex-grow 0.2s var(--ease);
 	}
 
 	.segmented-progress-wrap {

package/dist/components/atoms/Select.svelte

@@ -171,7 +171,7 @@
 		{#if hasFace}
 			<span class="select-face" class:compact={small} aria-hidden="true">
 				{#if selected?.icon}
-					<Icon name={selected.icon} size={small ? 14 : 16} />
+					<Icon name={selected.icon} />
 				{:else if selected?.emoji}
 					<span class="select-emoji">{selected.emoji}</span>
 				{/if}
@@ -183,7 +183,7 @@
 		{/if}
 		{#if showChevron}
 			<span class="select-chevron" aria-hidden="true">
-				<Icon name="chevron-down" size={16} />
+				<Icon name="chevron-down" />
 			</span>
 		{/if}
 	</div>
@@ -191,6 +191,7 @@
 
 <style>
 	.select-wrap {
+		--select-icon: var(--control-icon-md);
 		position: relative;
 		display: block;
 		width: 100%;
@@ -203,39 +204,46 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.select-wrap:has(.select.compact) {
+		--select-icon: var(--control-icon-sm);
+	}
+	.select-wrap:has(.select.select-lg) {
+		--select-icon: var(--control-icon-lg);
+	}
 	.select {
 		width: 100%;
 		min-height: var(--select-size, var(--control-height-default));
-		padding: var(--sp-2) var(--sp-3);
+		padding: var(--sp-2) var(--control-px-md);
+		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		background: var(--select-bg, var(--bg));
 		border: 1px solid var(--select-border, var(--border-strong));
 		border-radius: var(--select-radius, var(--r-md));
 		color: var(--select-fg, var(--text));
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 	}
 	/* Default variant: drop the OS chevron, reserve room for our own. */
 	.select-wrap .select {
 		appearance: none;
 		-webkit-appearance: none;
-		padding-right: calc(var(--sp-3) + 1.25rem);
+		padding-right: calc(var(--control-px-md) + var(--select-icon) + var(--sp-1));
 	}
 	/* No custom chevron: reclaim the reserved right padding. */
 	.select-wrap.no-chevron .select {
-		padding-right: var(--sp-3);
+		padding-right: var(--control-px-md);
 	}
-	/* Compact inline form for dense headers/toolbars. */
 	.select.select-lg {
 		min-height: var(--select-size, var(--control-height-large));
-		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);
 	}
+	/* Compact inline form for dense headers/toolbars. */
 	.select.compact {
-		padding: var(--sp-1) var(--sp-2);
-		font-size: var(--fs-xs);
+		padding: var(--sp-1) var(--control-px-sm);
+		font-size: var(--control-fs-sm);
 	}
 	.select-wrap:not(.no-chevron) .select.compact {
-		padding-right: calc(var(--sp-2) + 1rem);
+		padding-right: calc(var(--control-px-sm) + var(--select-icon) + var(--sp-1));
 	}
 	/* Toolbar contract: size="sm" shares the compact control height so it lines up
 	   with Button size="sm", Popover size="sm" and SegmentedControl size="sm". */
@@ -263,6 +271,13 @@
 	.select[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.select:disabled {
+		cursor: not-allowed;
+	}
+	/* The wrap dims as one so the face and the chevron fade with the control. */
+	.select-wrap:has(.select:disabled) {
+		opacity: var(--disabled-opacity);
+	}
 	/* The face draws the trigger text; the native text underneath stays laid out
 	   (so `width="auto"` still sizes to it) but invisible. Popup options keep
 	   their own colour so the transparency does not inherit into the list. */
@@ -280,38 +295,45 @@
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
-		padding: 0 var(--sp-3);
-		padding-right: calc(var(--sp-3) + 1.25rem);
+		padding: 0 var(--control-px-md);
+		padding-right: calc(var(--control-px-md) + var(--select-icon) + var(--sp-1));
+		font-size: var(--control-fs-md);
 		color: var(--select-fg, var(--text));
 		pointer-events: none;
 		overflow: hidden;
 	}
+	.select-face > :global(svg) {
+		flex: none;
+		font-size: var(--select-icon);
+	}
 	.select-wrap.no-chevron .select-face {
-		padding-right: var(--sp-3);
+		padding-right: var(--control-px-md);
 	}
 	.select-face.compact {
-		padding: 0 var(--sp-2);
-		padding-right: calc(var(--sp-2) + 1rem);
-		font-size: var(--fs-xs);
+		padding: 0 var(--control-px-sm);
+		padding-right: calc(var(--control-px-sm) + var(--select-icon) + var(--sp-1));
+		font-size: var(--control-fs-sm);
 	}
 	.select-wrap.no-chevron .select-face.compact {
-		padding-right: var(--sp-2);
+		padding-right: var(--control-px-sm);
 	}
 	/* 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) {
-		.select.compact {
-			font-size: max(16px, var(--fs-xs));
+		.select,
+		.select-face {
+			font-size: max(16px, var(--control-fs-md));
 		}
+		.select.select-lg {
+			font-size: max(16px, var(--control-fs-lg));
+		}
+		.select.compact,
 		.select-face.compact {
-			font-size: max(16px, var(--fs-xs));
+			font-size: max(16px, var(--control-fs-sm));
 		}
 	}
-	.select:disabled ~ .select-face {
-		color: var(--text-muted);
-	}
 	.select-emoji {
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.select-label {
 		flex: 1 1 auto;
@@ -330,12 +352,21 @@
 	.select-chevron {
 		position: absolute;
 		top: 50%;
-		right: var(--sp-3);
+		right: var(--control-px-md);
 		transform: translateY(-50%);
 		display: inline-flex;
+		font-size: var(--select-icon);
 		color: var(--text-muted);
 		pointer-events: none; /* clicks fall through to the select */
 	}
+	.select-wrap:has(.select.compact) .select-chevron {
+		right: var(--control-px-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.select:hover:not(:disabled, :focus, [aria-invalid='true'], .ghost, .embedded) {
+			border-color: var(--text-faint);
+		}
+	}
 	/* Transparent overlay: fills the positioned parent, the trigger shows through. */
 	.select.ghost {
 		position: absolute;

package/dist/components/atoms/Skeleton.svelte

@@ -2,6 +2,8 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	// Shimmering placeholder bar(s) standing in for content that is still
 	// loading. Decorative only — the surrounding region should carry aria-busy.
+	// Bars are tinted from --text so they read on any surface; the sweep is
+	// viewport-anchored so every bar on screen shimmers in sync.
 	type Own = {
 		width?: string;
 		height?: string;
@@ -46,24 +48,28 @@
 		max-width: 100%;
 	}
 	.skeleton-bar {
+		--sk-base: var(--skeleton, color-mix(in srgb, var(--text) 7%, transparent));
+		--sk-hi: var(--skeleton-highlight, color-mix(in srgb, var(--text) 13%, transparent));
 		display: block;
 		width: 100%;
-		background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-elevated) 50%, var(--bg-elevated-2) 75%);
-		background-size: 200% 100%;
-		animation: tsu-shimmer 1.4s ease-in-out infinite;
+		background: linear-gradient(100deg, var(--sk-base) 42%, var(--sk-hi) 50%, var(--sk-base) 58%) var(--sk-base);
+		background-size: 200vw 100%;
+		background-attachment: fixed;
+		animation: tsu-shimmer 1.8s linear infinite;
 	}
 	@keyframes tsu-shimmer {
-		from {
-			background-position: 200% 0;
+		0% {
+			background-position: 100% 0;
 		}
-		to {
-			background-position: -200% 0;
+		75%,
+		100% {
+			background-position: 0% 0;
 		}
 	}
 	@media (prefers-reduced-motion: reduce) {
 		.skeleton-bar {
 			animation: none;
-			background: var(--bg-elevated-2);
+			background: var(--sk-base);
 		}
 	}
 </style>