@dorsk/tsumikit 0.64.1 → 0.66.0

package/README.md

@@ -57,10 +57,17 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 
 ## Theming
 
-- 23 themes ship (light, highcontrast, gruvboxlight, solarizedlight,
+- 31 themes ship (light, highcontrast, gruvboxlight, solarizedlight,
   everforestlight, rosepinedawn, latte, nordlight, tokyoday, kanagawalotus,
   sepia, dark, **colorblind** — Okabe-Ito —, mocha, dracula, nord, tokyonight,
-  gruvbox, solarized, rosepine, onedark, everforest, monokai, amoled).
+  gruvbox, solarized, rosepine, onedark, everforest, monokai, amoled), plus a
+  **dim** tier between the bright and dark extremes: stone, fog, sage (light)
+  and slate, moss, espresso, zenburn (dark).
+- Every built-in clears WCAG AA on `bg`, `bg-elev` and `surface`: text 7:1,
+  muted 5.5:1, faint and every accent/status hue 4.5:1, `accent-ink` on
+  `accent` 4.5:1, and `--c-border-strong` (the outline of every control) 3:1.
+  `tests/theme-contrast.mjs` holds the floors; the test suite fails on any
+  breach.
 - `<ThemePicker />` and `<FontScalePicker />` wire the stores to the UI. Theme
   is persisted to `localStorage` and applied with no flash (head snippet in
   `app.html`) and updates the mobile `<meta name="theme-color">`.
@@ -276,7 +283,8 @@ and an `attrs` object for `data-*`/test ids on the row; a checkable `pressed` it
 its icon leading and shows its check trailing, or uses the leading check slot when it has
 no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
 rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
-sizes the panel),
+sizes the panel; an item with a `control` snippet renders as a non-button row hosting a native
+`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),

package/dist/components/molecules/Menu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
 	export interface MenuItem {
 		label: string;
-		onselect: () => void;
+		/** Required for button rows; a `control` row's hosted control acts on its own. */
+		onselect?: () => void;
 		icon?: import('../atoms/Icon.svelte').IconName;
 		danger?: boolean;
 		disabled?: boolean;
@@ -18,6 +19,13 @@
 		keepOpen?: boolean;
 		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
 		content?: import('svelte').Snippet<[MenuItem]>;
+		/**
+		 * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+		 * rendered as a non-button row with the menu's icon column and row height, its
+		 * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+		 * `pressed` and `keepOpen` do not apply.
+		 */
+		control?: import('svelte').Snippet<[MenuItem, { close: () => void }]>;
 		/**
 		 * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
 		 * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)
@@ -117,18 +125,27 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
-	function buttons(): HTMLButtonElement[] {
-		return listEl
-			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
-			: [];
+	const ROW_TARGET = ':is(select, input, textarea, button):not(:disabled), a[href], [tabindex]:not([tabindex="-1"])';
+
+	function targets(): HTMLElement[] {
+		if (!listEl) return [];
+		const rows = listEl.querySelectorAll<HTMLElement>(
+			':scope > [role="menuitem"]:not(:disabled), :scope > [role="menuitemcheckbox"]:not(:disabled), :scope > .menu-row:not([inert])'
+		);
+		return Array.from(rows).flatMap((row) => {
+			if (!row.classList.contains('menu-row')) return [row];
+			const control = row.querySelector<HTMLElement>(ROW_TARGET);
+			return control ? [control] : [];
+		});
 	}
 	function focusAt(i: number) {
-		const b = buttons();
+		const b = targets();
 		if (b.length) b[(i + b.length) % b.length].focus();
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const b = buttons();
-		const i = b.indexOf(document.activeElement as HTMLButtonElement);
+		if ((e.target as Element).closest('[popover]') !== listEl?.closest('[popover]')) return;
+		const b = targets();
+		const i = b.indexOf(document.activeElement as HTMLElement);
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			focusAt(i + 1);
@@ -146,7 +163,7 @@
 	function select(item: MenuItem, close: () => void) {
 		if (item.disabled) return;
 		if (menuItemCloses(item, closeOnSelect)) close();
-		item.onselect();
+		item.onselect?.();
 	}
 </script>
 
@@ -186,6 +203,12 @@
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
+			{#if item.control}
+			<div {...item.attrs as HTMLAttributes<HTMLDivElement>} role="none" class="menu-item menu-row" class:danger={item.danger} inert={item.disabled}>
+				{#if item.icon}<Icon name={item.icon} />{/if}
+				{@render item.control(item, { close })}
+			</div>
+			{:else}
 			<button
 				type="button"
 				{...item.attrs}
@@ -216,6 +239,7 @@
 				{#if glyphs.trailingCheck}<span class="menu-check menu-check-trailing"><Icon name="check" /></span>{/if}
 				{/if}
 			</button>
+			{/if}
 		{/each}
 	</div>
 	{/snippet}
@@ -241,8 +265,12 @@
 		font-size: var(--fs-sm);
 		white-space: nowrap;
 	}
+	.menu-row {
+		position: relative;
+	}
 	.menu-item:hover:not(:disabled),
-	.menu-item:focus-visible {
+	.menu-item:focus-visible,
+	.menu-row:focus-within {
 		background: var(--bg-elevated-2);
 		outline: none;
 	}
@@ -273,7 +301,8 @@
 		margin-inline-start: 0;
 		padding-inline-start: 0;
 	}
-	.menu-item:disabled {
+	.menu-item:disabled,
+	.menu-row[inert] {
 		opacity: 0.45;
 		cursor: not-allowed;
 	}

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

@@ -1,6 +1,7 @@
 export interface MenuItem {
     label: string;
-    onselect: () => void;
+    /** Required for button rows; a `control` row's hosted control acts on its own. */
+    onselect?: () => void;
     icon?: import('../atoms/Icon.svelte').IconName;
     danger?: boolean;
     disabled?: boolean;
@@ -17,6 +18,15 @@ export interface MenuItem {
     keepOpen?: boolean;
     /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
     content?: import('svelte').Snippet<[MenuItem]>;
+    /**
+     * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+     * rendered as a non-button row with the menu's icon column and row height, its
+     * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+     * `pressed` and `keepOpen` do not apply.
+     */
+    control?: import('svelte').Snippet<[MenuItem, {
+        close: () => void;
+    }]>;
     /**
      * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
      * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)

package/dist/stores/theme.svelte.d.ts

@@ -65,6 +65,24 @@ export declare const THEMES: readonly [{
     readonly icon: "✶";
     readonly themeColor: "#f4ecd8";
     readonly mode: "light";
+}, {
+    readonly id: "stone";
+    readonly label: "Stone";
+    readonly icon: "◌";
+    readonly themeColor: "#d6d1c7";
+    readonly mode: "light";
+}, {
+    readonly id: "fog";
+    readonly label: "Fog";
+    readonly icon: "≋";
+    readonly themeColor: "#cdd4dc";
+    readonly mode: "light";
+}, {
+    readonly id: "sage";
+    readonly label: "Sage";
+    readonly icon: "❧";
+    readonly themeColor: "#cfd6c9";
+    readonly mode: "light";
 }, {
     readonly id: "dark";
     readonly label: "Dark";
@@ -143,6 +161,30 @@ export declare const THEMES: readonly [{
     readonly icon: "◼";
     readonly themeColor: "#000000";
     readonly mode: "dark";
+}, {
+    readonly id: "slate";
+    readonly label: "Slate";
+    readonly icon: "▤";
+    readonly themeColor: "#3a414b";
+    readonly mode: "dark";
+}, {
+    readonly id: "moss";
+    readonly label: "Moss";
+    readonly icon: "❦";
+    readonly themeColor: "#383f36";
+    readonly mode: "dark";
+}, {
+    readonly id: "espresso";
+    readonly label: "Espresso";
+    readonly icon: "◉";
+    readonly themeColor: "#463a31";
+    readonly mode: "dark";
+}, {
+    readonly id: "zenburn";
+    readonly label: "Zenburn";
+    readonly icon: "Z";
+    readonly themeColor: "#3f3f3f";
+    readonly mode: "dark";
 }];
 export type Mode = (typeof THEMES)[number]['id'];
 export type ThemeMode = (typeof THEMES)[number]['mode'];

package/dist/stores/theme.svelte.js

@@ -42,6 +42,10 @@ export const THEMES = [
     { id: 'tokyoday', label: 'Tokyo Night Day', icon: '✧', themeColor: '#e1e2e7', mode: 'light' },
     { id: 'kanagawalotus', label: 'Kanagawa Lotus', icon: '❁', themeColor: '#f2ecbc', mode: 'light' },
     { id: 'sepia', label: 'Sepia', icon: '✶', themeColor: '#f4ecd8', mode: 'light' },
+    // ── Dim light ── muted gray bases, well below paper-white
+    { id: 'stone', label: 'Stone', icon: '◌', themeColor: '#d6d1c7', mode: 'light' },
+    { id: 'fog', label: 'Fog', icon: '≋', themeColor: '#cdd4dc', mode: 'light' },
+    { id: 'sage', label: 'Sage', icon: '❧', themeColor: '#cfd6c9', mode: 'light' },
     // ── Dark ──
     { id: 'dark', label: 'Dark', icon: '☾', themeColor: '#0f1115', mode: 'dark' },
     { id: 'colorblind', label: 'Color-blind safe', icon: '◐', themeColor: '#16181d', mode: 'dark' },
@@ -56,6 +60,11 @@ export const THEMES = [
     { id: 'everforest', label: 'Everforest', icon: '☘', themeColor: '#2d353b', mode: 'dark' },
     { id: 'monokai', label: 'Monokai', icon: '✸', themeColor: '#272822', mode: 'dark' },
     { id: 'amoled', label: 'AMOLED (high contrast)', icon: '◼', themeColor: '#000000', mode: 'dark' },
+    // ── Dim dark ── lifted gray bases, well above near-black
+    { id: 'slate', label: 'Slate', icon: '▤', themeColor: '#3a414b', mode: 'dark' },
+    { id: 'moss', label: 'Moss', icon: '❦', themeColor: '#383f36', mode: 'dark' },
+    { id: 'espresso', label: 'Espresso', icon: '◉', themeColor: '#463a31', mode: 'dark' },
+    { id: 'zenburn', label: 'Zenburn', icon: 'Z', themeColor: '#3f3f3f', mode: 'dark' },
 ];
 const FALLBACK_ICON = '◈';
 class Theme {

package/dist/styles/themes.css

@@ -6,6 +6,8 @@
  * Consumer theme contract: a `[data-theme="x"]` block must set `color-scheme`
  * (light themes; :root defaults to dark), every --c-* palette token, the three
  * --shadow-* tokens and the three --mach-*-sl pairs. --md-code-bg is optional.
+ *
+ * Built-ins must clear the contrast floors in tests/theme-contrast.mjs.
  */
 
 [data-theme="light"] {
@@ -15,20 +17,20 @@
   --c-bg-elev-2: #eef0f3;
   --c-surface: #ffffff;
   --c-border: #d9dde3;
-  --c-border-strong: #c2c8d1;
+  --c-border-strong: #8a9098;
   --c-text: #1a1d23;
   --c-text-muted: #5b6472;
-  --c-text-faint: #8a93a3;
-  --c-accent: #1f9d6b;
+  --c-text-faint: #6a7282;
+  --c-accent: #008256;
   --c-accent-ink: #ffffff;
   --c-accent-dim: #9bd9c2;
-  --c-blue: #2f7ddb;
-  --c-amber: #c98a1d;
-  --c-red: #d6463f;
-  --c-green: #1f9d6b;
+  --c-blue: #1165c1;
+  --c-amber: #9b6700;
+  --c-red: #cd3e38;
+  --c-green: #008256;
   --c-violet: #7c3aed;
-  --c-gold: #c98a1d;
-  --c-teal: #0d9488;
+  --c-gold: #9b6700;
+  --c-teal: #008076;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
   --shadow-md: 0 6px 20px rgba(20, 24, 31, 0.12);
@@ -48,20 +50,20 @@
   --c-bg-elev-2: #ece1c6;
   --c-surface: #faf3e3;
   --c-border: #ddccab;
-  --c-border-strong: #c8b48c;
+  --c-border-strong: #998660;
   --c-text: #3b2f1e;
-  --c-text-muted: #6f5d42;
-  --c-text-faint: #9a8868;
-  --c-accent: #5a8250;
+  --c-text-muted: #6d5b40;
+  --c-text-faint: #7b694a;
+  --c-accent: #4e7544;
   --c-accent-ink: #faf3e3;
   --c-accent-dim: #aec79f;
-  --c-blue: #2c6f9b;
-  --c-amber: #b07a18;
+  --c-blue: #1e638f;
+  --c-amber: #916200;
   --c-red: #b5403a;
-  --c-green: #5a8250;
-  --c-violet: #8a5fa8;
-  --c-gold: #a87d1f;
-  --c-teal: #2a8f86;
+  --c-green: #4e7544;
+  --c-violet: #8459a2;
+  --c-gold: #8b6400;
+  --c-teal: #007870;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 14%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.1);
   --shadow-md: 0 6px 20px rgba(80, 60, 30, 0.14);
@@ -79,10 +81,10 @@
   --c-bg-elev-2: #313244;
   --c-surface: #313244;
   --c-border: #45475a;
-  --c-border-strong: #585b70;
+  --c-border-strong: #777b91;
   --c-text: #cdd6f4;
   --c-text-muted: #bac2de;
-  --c-text-faint: #7f849c;
+  --c-text-faint: #959ab2;
   --c-accent: #cba6f7;
   --c-accent-ink: #1e1e2e;
   --c-accent-dim: #6c7086;
@@ -109,16 +111,16 @@
   --c-bg-elev-2: #44475a;
   --c-surface: #343746;
   --c-border: #44475a;
-  --c-border-strong: #6272a4;
+  --c-border-strong: #6f7fb2;
   --c-text: #f8f8f2;
   --c-text-muted: #c7c9d1;
-  --c-text-faint: #6272a4;
+  --c-text-faint: #8d9fd4;
   --c-accent: #bd93f9;
   --c-accent-ink: #1d1726;
   --c-accent-dim: #6f558f;
   --c-blue: #8be9fd;
   --c-amber: #ffb86c;
-  --c-red: #ff5555;
+  --c-red: #ff7570;
   --c-green: #50fa7b;
   --c-violet: #bd93f9;
   --c-gold: #f1fa8c;
@@ -139,18 +141,18 @@
   --c-bg-elev-2: #434c5e;
   --c-surface: #3b4252;
   --c-border: #4c566a;
-  --c-border-strong: #5e81ac;
+  --c-border-strong: #6b8fbb;
   --c-text: #eceff4;
   --c-text-muted: #d8dee9;
   --c-text-faint: #8fbcbb;
   --c-accent: #88c0d0;
   --c-accent-ink: #1f242d;
   --c-accent-dim: #5e81ac;
-  --c-blue: #81a1c1;
+  --c-blue: #95b6d6;
   --c-amber: #ebcb8b;
-  --c-red: #bf616a;
+  --c-red: #f59199;
   --c-green: #a3be8c;
-  --c-violet: #b48ead;
+  --c-violet: #c9a2c1;
   --c-gold: #ebcb8b;
   --c-teal: #8fbcbb;
   --shadow-sm: 0 1px 2px rgba(20, 25, 34, 0.34);
@@ -169,10 +171,10 @@
   --c-bg-elev-2: #24283b;
   --c-surface: #1f2233;
   --c-border: #2f344d;
-  --c-border-strong: #414868;
+  --c-border-strong: #636b8d;
   --c-text: #c0caf5;
   --c-text-muted: #9aa5ce;
-  --c-text-faint: #565f89;
+  --c-text-faint: #7e88b5;
   --c-accent: #7aa2f7;
   --c-accent-ink: #11121d;
   --c-accent-dim: #3d59a1;
@@ -198,16 +200,16 @@
   --c-bg-elev-2: #3c3836;
   --c-surface: #32302f;
   --c-border: #504945;
-  --c-border-strong: #665c54;
+  --c-border-strong: #81776f;
   --c-text: #ebdbb2;
   --c-text-muted: #d5c4a1;
   --c-text-faint: #a89984;
   --c-accent: #fe8019;
   --c-accent-ink: #1d1a14;
   --c-accent-dim: #af3a03;
-  --c-blue: #83a598;
+  --c-blue: #87a99c;
   --c-amber: #fabd2f;
-  --c-red: #fb4934;
+  --c-red: #ff6550;
   --c-green: #b8bb26;
   --c-violet: #d3869b;
   --c-gold: #fabd2f;
@@ -227,20 +229,20 @@
   --c-bg-elev-2: #0a4350;
   --c-surface: #073642;
   --c-border: #0f4d5c;
-  --c-border-strong: #586e75;
+  --c-border-strong: #677e85;
   --c-text: #eee8d5;
-  --c-text-muted: #93a1a1;
-  --c-text-faint: #657b83;
-  --c-accent: #2aa198;
+  --c-text-muted: #9dacac;
+  --c-text-faint: #859ca4;
+  --c-accent: #35a99f;
   --c-accent-ink: #002b36;
   --c-accent-dim: #1a6b66;
-  --c-blue: #268bd2;
-  --c-amber: #b58900;
-  --c-red: #dc322f;
-  --c-green: #859900;
-  --c-violet: #6c71c4;
-  --c-gold: #b58900;
-  --c-teal: #2aa198;
+  --c-blue: #47a7f0;
+  --c-amber: #be9218;
+  --c-red: #ff665b;
+  --c-green: #8da218;
+  --c-violet: #8a91e7;
+  --c-gold: #be9218;
+  --c-teal: #35a99f;
   --shadow-sm: 0 1px 2px rgba(0, 17, 22, 0.42);
   --shadow-md: 0 6px 20px rgba(0, 17, 22, 0.5);
   --shadow-lg: 0 12px 40px rgba(0, 17, 22, 0.58);
@@ -256,10 +258,10 @@
   --c-bg-elev-2: #26233a;
   --c-surface: #1f1d2e;
   --c-border: #2a2839;
-  --c-border-strong: #403d52;
+  --c-border-strong: #6a677e;
   --c-text: #e0def4;
-  --c-text-muted: #908caa;
-  --c-text-faint: #6e6a86;
+  --c-text-muted: #9692b0;
+  --c-text-faint: #8783a0;
   --c-accent: #c4a7e7;
   --c-accent-ink: #14121d;
   --c-accent-dim: #6c5d8a;
@@ -285,18 +287,18 @@
   --c-bg-elev-2: #353b45;
   --c-surface: #2f343f;
   --c-border: #3e4451;
-  --c-border-strong: #4b5263;
-  --c-text: #abb2bf;
-  --c-text-muted: #9da5b4;
-  --c-text-faint: #5c6370;
+  --c-border-strong: #757d8f;
+  --c-text: #bcc3d0;
+  --c-text-muted: #a5adbc;
+  --c-text-faint: #949caa;
   --c-accent: #61afef;
   --c-accent-ink: #11151c;
   --c-accent-dim: #2c6da3;
   --c-blue: #61afef;
   --c-amber: #e5c07b;
-  --c-red: #e06c75;
+  --c-red: #ed7880;
   --c-green: #98c379;
-  --c-violet: #c678dd;
+  --c-violet: #cc7ee3;
   --c-gold: #e5c07b;
   --c-teal: #56b6c2;
   --shadow-sm: 0 1px 2px rgba(17, 19, 25, 0.4);
@@ -314,16 +316,16 @@
   --c-bg-elev-2: #3d484d;
   --c-surface: #343f44;
   --c-border: #475258;
-  --c-border-strong: #4f585e;
-  --c-text: #d3c6aa;
-  --c-text-muted: #a7b0a3;
-  --c-text-faint: #859289;
+  --c-border-strong: #7f898f;
+  --c-text: #dccfb3;
+  --c-text-muted: #b3bcaf;
+  --c-text-faint: #9daba1;
   --c-accent: #a7c080;
   --c-accent-ink: #1c2226;
   --c-accent-dim: #5c6f49;
-  --c-blue: #7fbbb3;
+  --c-blue: #81beb6;
   --c-amber: #dbbc7f;
-  --c-red: #e67e80;
+  --c-red: #f38a8b;
   --c-green: #a7c080;
   --c-violet: #d699b6;
   --c-gold: #dbbc7f;
@@ -343,16 +345,16 @@
   --c-bg-elev-2: #383830;
   --c-surface: #2f302a;
   --c-border: #49483e;
-  --c-border-strong: #5b5a4e;
+  --c-border-strong: #7a796c;
   --c-text: #f8f8f2;
   --c-text-muted: #cfcfc2;
-  --c-text-faint: #75715e;
+  --c-text-faint: #9b9783;
   --c-accent: #a6e22e;
   --c-accent-ink: #14160f;
   --c-accent-dim: #5f7d18;
   --c-blue: #66d9ef;
   --c-amber: #fd971f;
-  --c-red: #f92672;
+  --c-red: #ff5c88;
   --c-green: #a6e22e;
   --c-violet: #ae81ff;
   --c-gold: #e6db74;
@@ -447,7 +449,7 @@
   --c-bg-elev-2: #262a33;
   --c-surface: #1d2027;
   --c-border: #353a44;
-  --c-border-strong: #4a505c;
+  --c-border-strong: #646a77;
   --c-text: #f2f4f8;
   --c-text-muted: #b6bdc9;
   --c-text-faint: #828b99;
@@ -456,7 +458,7 @@
   --c-accent-dim: #2c6f93;
   --c-blue: #56b4e9; /* sky blue */
   --c-amber: #e69f00; /* orange */
-  --c-red: #d55e00; /* vermillion */
+  --c-red: #db630e; /* vermillion */
   --c-green: #009e73; /* bluish green */
   --c-violet: #cc79a7; /* reddish purple */
   --c-gold: #f0e442; /* yellow */
@@ -485,20 +487,20 @@
   --c-bg-elev-2: #ebdbb2;
   --c-surface: #f9f5d7;
   --c-border: #d5c4a1;
-  --c-border-strong: #bdae93;
+  --c-border-strong: #98896f;
   --c-text: #3c3836;
   --c-text-muted: #504945;
-  --c-text-faint: #7c6f64;
+  --c-text-faint: #786b60;
   --c-accent: #af3a03;
   --c-accent-ink: #fbf1c7;
   --c-accent-dim: #d65d0e;
   --c-blue: #076678;
-  --c-amber: #b57614;
+  --c-amber: #996100;
   --c-red: #9d0006;
-  --c-green: #79740e;
+  --c-green: #767006;
   --c-violet: #8f3f71;
-  --c-gold: #b57614;
-  --c-teal: #427b58;
+  --c-gold: #996100;
+  --c-teal: #407956;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.1);
   --shadow-md: 0 6px 20px rgba(80, 60, 30, 0.14);
@@ -516,20 +518,20 @@
   --c-bg-elev-2: #eee8d5;
   --c-surface: #fbf3e0;
   --c-border: #ddd6c1;
-  --c-border-strong: #cbc4ad;
+  --c-border-strong: #938d77;
   --c-text: #073642;
-  --c-text-muted: #586e75;
-  --c-text-faint: #839496;
-  --c-accent: #2aa198;
+  --c-text-muted: #50656c;
+  --c-text-faint: #627274;
+  --c-accent: #007d76;
   --c-accent-ink: #fdf6e3;
   --c-accent-dim: #2aa198;
-  --c-blue: #268bd2;
-  --c-amber: #b58900;
-  --c-red: #dc322f;
-  --c-green: #859900;
-  --c-violet: #6c71c4;
-  --c-gold: #b58900;
-  --c-teal: #2aa198;
+  --c-blue: #006aa9;
+  --c-amber: #8d6a00;
+  --c-red: #d52a29;
+  --c-green: #677700;
+  --c-violet: #6367b9;
+  --c-gold: #8d6a00;
+  --c-teal: #007d76;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(88, 110, 117, 0.12);
   --shadow-md: 0 6px 20px rgba(88, 110, 117, 0.16);
@@ -547,20 +549,20 @@
   --c-bg-elev-2: #efebd4;
   --c-surface: #f4f0d9;
   --c-border: #e0dcc7;
-  --c-border-strong: #bdc3af;
-  --c-text: #5c6a72;
-  --c-text-muted: #708089;
-  --c-text-faint: #939f91;
-  --c-accent: #8da101;
+  --c-border-strong: #878c79;
+  --c-text: #45525a;
+  --c-text-muted: #53626b;
+  --c-text-faint: #657063;
+  --c-accent: #657400;
   --c-accent-ink: #fdf6e3;
   --c-accent-dim: #8da101;
-  --c-blue: #3a94c5;
-  --c-amber: #dfa000;
-  --c-red: #f85552;
-  --c-green: #8da101;
-  --c-violet: #df69ba;
-  --c-gold: #dfa000;
-  --c-teal: #35a77c;
+  --c-blue: #006c9b;
+  --c-amber: #8f6500;
+  --c-red: #cf2b30;
+  --c-green: #657400;
+  --c-violet: #b34091;
+  --c-gold: #8f6500;
+  --c-teal: #007c57;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(92, 106, 114, 0.12);
   --shadow-md: 0 6px 20px rgba(92, 106, 114, 0.16);
@@ -578,20 +580,20 @@
   --c-bg-elev-2: #f2e9e1;
   --c-surface: #fffaf3;
   --c-border: #dfdad9;
-  --c-border-strong: #cecacd;
-  --c-text: #575279;
-  --c-text-muted: #797593;
-  --c-text-faint: #9893a5;
-  --c-accent: #907aa9;
+  --c-border-strong: #908c8f;
+  --c-text: #534e75;
+  --c-text-muted: #635f7c;
+  --c-text-faint: #736e7f;
+  --c-accent: #7d6795;
   --c-accent-ink: #faf4ed;
   --c-accent-dim: #907aa9;
   --c-blue: #286983;
-  --c-amber: #ea9d34;
-  --c-red: #b4637a;
-  --c-green: #56949f;
-  --c-violet: #907aa9;
-  --c-gold: #ea9d34;
-  --c-teal: #56949f;
+  --c-amber: #9e6300;
+  --c-red: #a7576e;
+  --c-green: #3b7984;
+  --c-violet: #7d6795;
+  --c-gold: #9e6300;
+  --c-teal: #3b7984;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(87, 82, 121, 0.1);
   --shadow-md: 0 6px 20px rgba(87, 82, 121, 0.14);
@@ -609,20 +611,20 @@
   --c-bg-elev-2: #dce0e8;
   --c-surface: #e6e9ef;
   --c-border: #ccd0da;
-  --c-border-strong: #bcc0cc;
-  --c-text: #4c4f69;
-  --c-text-muted: #5c5f77;
-  --c-text-faint: #8c8fa1;
-  --c-accent: #8839ef;
+  --c-border-strong: #828591;
+  --c-text: #484b64;
+  --c-text-muted: #575a72;
+  --c-text-faint: #656879;
+  --c-accent: #8738ee;
   --c-accent-ink: #eff1f5;
   --c-accent-dim: #8839ef;
-  --c-blue: #1e66f5;
-  --c-amber: #df8e1d;
-  --c-red: #d20f39;
-  --c-green: #40a02b;
-  --c-violet: #8839ef;
-  --c-gold: #df8e1d;
-  --c-teal: #179299;
+  --c-blue: #0f58e7;
+  --c-amber: #965c00;
+  --c-red: #d10d38;
+  --c-green: #1e7900;
+  --c-violet: #8738ee;
+  --c-gold: #965c00;
+  --c-teal: #00757b;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 10%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.1);
   --shadow-md: 0 6px 20px rgba(76, 79, 105, 0.14);
@@ -641,20 +643,20 @@
   --c-bg-elev-2: #e5e9f0;
   --c-surface: #f4f6f9;
   --c-border: #d8dee9;
-  --c-border-strong: #c2cad6;
+  --c-border-strong: #838a96;
   --c-text: #2e3440;
   --c-text-muted: #434c5e;
-  --c-text-faint: #6b7689;
-  --c-accent: #5e81ac;
+  --c-text-faint: #626d80;
+  --c-accent: #4c6f99;
   --c-accent-ink: #eceff4;
   --c-accent-dim: #5e81ac;
-  --c-blue: #5e81ac;
-  --c-amber: #9a6f12;
-  --c-red: #bf616a;
+  --c-blue: #41648d;
+  --c-amber: #8f6500;
+  --c-red: #ab4f59;
   --c-green: #5a7444;
-  --c-violet: #9a6c93;
-  --c-gold: #9a6f12;
-  --c-teal: #3a8a87;
+  --c-violet: #8b5e84;
+  --c-gold: #8f6500;
+  --c-teal: #257875;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.1);
   --shadow-md: 0 6px 20px rgba(46, 52, 64, 0.14);
@@ -673,20 +675,20 @@
   --c-bg-elev-2: #d5d6db;
   --c-surface: #eaeaee;
   --c-border: #c4c8da;
-  --c-border-strong: #a8acc4;
-  --c-text: #3760bf;
-  --c-text-muted: #6172b0;
-  --c-text-faint: #848cb5;
-  --c-accent: #2e7de9;
+  --c-border-strong: #7c8097;
+  --c-text: #1c419d;
+  --c-text-muted: #455490;
+  --c-text-faint: #5c638a;
+  --c-accent: #0961cb;
   --c-accent-ink: #ffffff;
   --c-accent-dim: #2e7de9;
-  --c-blue: #2e7de9;
-  --c-amber: #8c6c3e;
-  --c-red: #f52a65;
-  --c-green: #587539;
-  --c-violet: #9854f1;
-  --c-gold: #8c6c3e;
-  --c-teal: #118c74;
+  --c-blue: #0055b8;
+  --c-amber: #7f5f31;
+  --c-red: #c9004c;
+  --c-green: #516d32;
+  --c-violet: #833bd8;
+  --c-gold: #7f5f31;
+  --c-teal: #00725e;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(55, 96, 191, 0.1);
   --shadow-md: 0 6px 20px rgba(55, 96, 191, 0.14);
@@ -705,20 +707,20 @@
   --c-bg-elev-2: #e5ddb0;
   --c-surface: #ebe3b0;
   --c-border: #d5cea3;
-  --c-border-strong: #c9c193;
-  --c-text: #545464;
-  --c-text-muted: #766b90;
-  --c-text-faint: #a09cac;
+  --c-border-strong: #898156;
+  --c-text: #464656;
+  --c-text-muted: #5d5276;
+  --c-text-faint: #666371;
   --c-accent: #624c83;
   --c-accent-ink: #f2ecbc;
   --c-accent-dim: #624c83;
-  --c-blue: #4d699b;
-  --c-amber: #cc6d00;
-  --c-red: #c84053;
-  --c-green: #6f894e;
+  --c-blue: #455f91;
+  --c-amber: #9b5100;
+  --c-red: #b83046;
+  --c-green: #536c32;
   --c-violet: #624c83;
-  --c-gold: #836f4a;
-  --c-teal: #597b75;
+  --c-gold: #76623e;
+  --c-teal: #4a6b65;
   --md-code-bg: color-mix(in srgb, var(--c-blue) 12%, var(--c-bg));
   --shadow-sm: 0 1px 2px rgba(84, 84, 100, 0.12);
   --shadow-md: 0 6px 20px rgba(84, 84, 100, 0.16);
@@ -727,3 +729,215 @@
   --mach-fg-sl: 35% 34%;
   --mach-border-sl: 30% 66%;
 }
+
+/* ===================================================================
+   Dim tier — between the bright and dark extremes. Dim-dark bases sit
+   around OKLCH L 0.37 and dim-light around 0.86: true mid-tones (L 0.5–0.7)
+   cap text contrast near 4.5:1 and cannot hold a muted/faint hierarchy.
+   =================================================================== */
+
+/* ---- Slate — dim gray-blue. */
+[data-theme="slate"] {
+  --c-bg: #3a414b;
+  --c-bg-elev: #424a55;
+  --c-bg-elev-2: #4a535f;
+  --c-surface: #444c57;
+  --c-border: #535c69;
+  --c-border-strong: #8e99a9;
+  --c-text: #e6eaf0;
+  --c-text-muted: #c7cfd9;
+  --c-text-faint: #b3bcc9;
+  --c-accent: #8fc1ff;
+  --c-accent-ink: #1d232b;
+  --c-accent-dim: #4f6680;
+  --c-blue: #9bcaff;
+  --c-amber: #f2c879;
+  --c-red: #ffa3a3;
+  --c-green: #9fdcae;
+  --c-violet: #c9b3ff;
+  --c-gold: #e8cf86;
+  --c-teal: #8edcd4;
+  --shadow-sm: 0 1px 2px rgba(15, 18, 24, 0.3);
+  --shadow-md: 0 6px 20px rgba(15, 18, 24, 0.36);
+  --shadow-lg: 0 12px 40px rgba(15, 18, 24, 0.44);
+  --mach-bg-sl: 35% 30%;
+  --mach-fg-sl: 60% 86%;
+  --mach-border-sl: 35% 48%;
+}
+
+/* ---- Moss — dim gray-green. */
+[data-theme="moss"] {
+  --c-bg: #383f36;
+  --c-bg-elev: #40483e;
+  --c-bg-elev-2: #485146;
+  --c-surface: #424a40;
+  --c-border: #525b4f;
+  --c-border-strong: #8d9788;
+  --c-text: #e4e8dc;
+  --c-text-muted: #c5cbbd;
+  --c-text-faint: #b1b8a8;
+  --c-accent: #b5d68c;
+  --c-accent-ink: #1f251c;
+  --c-accent-dim: #5d7146;
+  --c-blue: #9cc7e6;
+  --c-amber: #e9c77e;
+  --c-red: #f0a39a;
+  --c-green: #b5d68c;
+  --c-violet: #cdb4e0;
+  --c-gold: #dcc97f;
+  --c-teal: #93d3c0;
+  --shadow-sm: 0 1px 2px rgba(16, 20, 15, 0.3);
+  --shadow-md: 0 6px 20px rgba(16, 20, 15, 0.36);
+  --shadow-lg: 0 12px 40px rgba(16, 20, 15, 0.44);
+  --mach-bg-sl: 30% 30%;
+  --mach-fg-sl: 50% 86%;
+  --mach-border-sl: 30% 48%;
+}
+
+/* ---- Espresso — dim warm brown. */
+[data-theme="espresso"] {
+  --c-bg: #463a31;
+  --c-bg-elev: #4e4138;
+  --c-bg-elev-2: #57493f;
+  --c-surface: #50433a;
+  --c-border: #625347;
+  --c-border-strong: #a18e7e;
+  --c-text: #f0e6da;
+  --c-text-muted: #d4c6b6;
+  --c-text-faint: #c0b09d;
+  --c-accent: #e6b980;
+  --c-accent-ink: #2a2019;
+  --c-accent-dim: #7a5d3e;
+  --c-blue: #a8c8e0;
+  --c-amber: #f0c27a;
+  --c-red: #f2a08e;
+  --c-green: #b9d29a;
+  --c-violet: #d7b5d8;
+  --c-gold: #e6c977;
+  --c-teal: #9ed2c4;
+  --shadow-sm: 0 1px 2px rgba(24, 17, 12, 0.32);
+  --shadow-md: 0 6px 20px rgba(24, 17, 12, 0.38);
+  --shadow-lg: 0 12px 40px rgba(24, 17, 12, 0.46);
+  --mach-bg-sl: 30% 30%;
+  --mach-fg-sl: 55% 86%;
+  --mach-border-sl: 30% 48%;
+}
+
+/* ---- Zenburn — the classic low-contrast-on-gray palette. */
+[data-theme="zenburn"] {
+  --c-bg: #3f3f3f;
+  --c-bg-elev: #474747;
+  --c-bg-elev-2: #4f4f4f;
+  --c-surface: #494949;
+  --c-border: #5b5b5b;
+  --c-border-strong: #959595;
+  --c-text: #e4e4d4;
+  --c-text-muted: #ccccbb;
+  --c-text-faint: #b9b9a9;
+  --c-accent: #8cd0d3;
+  --c-accent-ink: #2b2b2b;
+  --c-accent-dim: #5f7f7f;
+  --c-blue: #8cd0d3;
+  --c-amber: #dfaf8f;
+  --c-red: #e3a9a9;
+  --c-green: #9fc59f;
+  --c-violet: #f09ed6;
+  --c-gold: #f0dfaf;
+  --c-teal: #93e0e3;
+  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.3);
+  --shadow-md: 0 6px 20px rgba(20, 20, 20, 0.36);
+  --shadow-lg: 0 12px 40px rgba(20, 20, 20, 0.44);
+  --mach-bg-sl: 25% 30%;
+  --mach-fg-sl: 45% 85%;
+  --mach-border-sl: 25% 48%;
+}
+
+/* ---- Stone — dim warm light gray. */
+[data-theme="stone"] {
+  color-scheme: light;
+  --c-bg: #d6d1c7;
+  --c-bg-elev: #ddd9d0;
+  --c-bg-elev-2: #cdc7bc;
+  --c-surface: #dfdbd3;
+  --c-border: #bdb6a9;
+  --c-border-strong: #7c7467;
+  --c-text: #2a2620;
+  --c-text-muted: #4d473e;
+  --c-text-faint: #60594e;
+  --c-accent: #376252;
+  --c-accent-ink: #f3f0ea;
+  --c-accent-dim: #9db3a7;
+  --c-blue: #1f507a;
+  --c-amber: #775408;
+  --c-red: #9a3b30;
+  --c-green: #386433;
+  --c-violet: #6a4a8a;
+  --c-gold: #705705;
+  --c-teal: #24645f;
+  --shadow-sm: 0 1px 2px rgba(50, 42, 30, 0.1);
+  --shadow-md: 0 6px 20px rgba(50, 42, 30, 0.14);
+  --shadow-lg: 0 12px 40px rgba(50, 42, 30, 0.2);
+  --mach-bg-sl: 30% 80%;
+  --mach-fg-sl: 45% 26%;
+  --mach-border-sl: 25% 60%;
+}
+
+/* ---- Fog — dim cool light gray-blue. */
+[data-theme="fog"] {
+  color-scheme: light;
+  --c-bg: #cdd4dc;
+  --c-bg-elev: #d5dbe2;
+  --c-bg-elev-2: #c3cbd4;
+  --c-surface: #d8dee5;
+  --c-border: #b2bcc8;
+  --c-border-strong: #6d7886;
+  --c-text: #1f252c;
+  --c-text-muted: #3e4753;
+  --c-text-faint: #525c69;
+  --c-accent: #2a5c99;
+  --c-accent-ink: #f2f5f8;
+  --c-accent-dim: #9bb2cf;
+  --c-blue: #1d4f8b;
+  --c-amber: #79540f;
+  --c-red: #9b3434;
+  --c-green: #2b6741;
+  --c-violet: #5f4a99;
+  --c-gold: #6e590b;
+  --c-teal: #1d646e;
+  --shadow-sm: 0 1px 2px rgba(25, 32, 42, 0.1);
+  --shadow-md: 0 6px 20px rgba(25, 32, 42, 0.14);
+  --shadow-lg: 0 12px 40px rgba(25, 32, 42, 0.2);
+  --mach-bg-sl: 35% 80%;
+  --mach-fg-sl: 50% 26%;
+  --mach-border-sl: 30% 60%;
+}
+
+/* ---- Sage — dim light gray-green. */
+[data-theme="sage"] {
+  color-scheme: light;
+  --c-bg: #cfd6c9;
+  --c-bg-elev: #d7ddd2;
+  --c-bg-elev-2: #c5cdbe;
+  --c-surface: #dae0d5;
+  --c-border: #b4bdac;
+  --c-border-strong: #6f7a66;
+  --c-text: #232a20;
+  --c-text-muted: #424b3e;
+  --c-text-faint: #545e50;
+  --c-accent: #396631;
+  --c-accent-ink: #f1f4ee;
+  --c-accent-dim: #a5bb9c;
+  --c-blue: #245373;
+  --c-amber: #7a5512;
+  --c-red: #983a33;
+  --c-green: #396631;
+  --c-violet: #644b85;
+  --c-gold: #6b5b0e;
+  --c-teal: #24655d;
+  --shadow-sm: 0 1px 2px rgba(30, 38, 26, 0.1);
+  --shadow-md: 0 6px 20px rgba(30, 38, 26, 0.14);
+  --shadow-lg: 0 12px 40px rgba(30, 38, 26, 0.2);
+  --mach-bg-sl: 30% 80%;
+  --mach-fg-sl: 45% 26%;
+  --mach-border-sl: 25% 60%;
+}

package/dist/styles/tokens.css

@@ -19,10 +19,10 @@
   --c-bg-elev-2: #1f232c;
   --c-surface: #21262f;
   --c-border: #2c323d;
-  --c-border-strong: #3a414e;
+  --c-border-strong: #68707e;
   --c-text: #e6e9ef;
   --c-text-muted: #9aa3b2;
-  --c-text-faint: #6b7384;
+  --c-text-faint: #848c9e;
 
   --c-accent: #5ad6a0;
   --c-accent-ink: #04130c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.64.1",
+  "version": "0.66.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",