@dorsk/tsumikit 0.2.16 → 0.4.0

package/dist/components/layouts/NavItem.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-	// Sidebar navigation item: icon + label. When the surrounding `sidebar`
-	// query container gets narrow (≤ 8rem — e.g. the user drags AppShell's
-	// resizable sidebar down to a rail) the label hides and the icon centers,
-	// purely in CSS. `title`/`aria-label` carry the name so the icon-only state
-	// stays accessible and shows a tooltip. Renders an <a> when `href` is set,
-	// else a <button>.
+	// Sidebar navigation item: icon + label, with an optional trailing count
+	// `badge`. When the surrounding `sidebar` query container gets narrow
+	// (≤ 8rem — e.g. the user drags AppShell's resizable sidebar down to a rail)
+	// the label hides and the icon centers, purely in CSS; a non-empty badge then
+	// collapses to a small dot indicator so the count cue survives the rail.
+	// `title`/`aria-label` carry the name so the icon-only state stays accessible
+	// and shows a tooltip. Renders an <a> when `href` is set, else a <button>.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
+	import Badge from '../atoms/Badge.svelte';
+
+	type BadgeTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 
 	let {
 		icon,
@@ -15,6 +19,8 @@
 		href,
 		active = false,
 		onclick,
+		badge,
+		badgeTone = 'neutral',
 		children,
 		...rest
 	}: {
@@ -23,9 +29,17 @@
 		href?: string;
 		active?: boolean;
 		onclick?: (e: MouseEvent) => void;
+		/** Optional trailing count pill (e.g. unread / missing items). When the
+		 *  item is `active` it adopts the accent fill; otherwise it uses `badgeTone`. */
+		badge?: string | number;
+		/** Tone for the trailing badge when the item is not active. */
+		badgeTone?: BadgeTone;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	// Treat 0 / '' as "no badge" so callers can pass a raw count without guarding.
+	const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '' && badge !== 0);
 </script>
 
 <svelte:element
@@ -42,11 +56,21 @@
 >
 	<Icon name={icon} size={18} />
 	<span class="nav-label">{label}</span>
-	{#if children}<span class="nav-trail">{@render children()}</span>{/if}
+	{#if hasBadge}
+		<span class="nav-trail">
+			<Badge size="sm" tone={active ? 'neutral' : badgeTone} active={active}>{badge}</Badge>
+		</span>
+		<!-- Rail fallback: the pill is hidden by the container query below, this dot
+		     takes over so the "has items" cue still reads in the icon rail. -->
+		<span class="nav-dot" class:active aria-hidden="true"></span>
+	{:else if children}
+		<span class="nav-trail">{@render children()}</span>
+	{/if}
 </svelte:element>
 
 <style>
 	.nav-item {
+		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
@@ -74,14 +98,36 @@
 		background: color-mix(in srgb, var(--accent) 14%, transparent);
 		color: var(--accent);
 	}
+	/* Active-route accent inset: a left rail marker that survives the icon-rail
+	   collapse (the tint background does too, but the marker reads at a glance). */
+	.nav-item.active::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 3px;
+		height: 60%;
+		border-radius: var(--r-pill);
+		background: var(--accent);
+	}
 	.nav-label {
 		flex: 1;
 		min-width: 0; /* allow the label to shrink/ellipsis instead of overflowing */
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.nav-trail {
+		flex: none;
+	}
+	/* Dot is the rail-width stand-in for the badge: hidden at full width. */
+	.nav-dot {
+		display: none;
+	}
+
 	/* Icon-rail: when the sidebar container is narrow, drop the label + trailing
-	   slot and center the icon. Driven by the sidebar's width, not the viewport. */
+	   pill and center the icon. Driven by the sidebar's width, not the viewport.
+	   A badge collapses to a dot pinned to the icon's top-right corner. */
 	@container sidebar (max-width: 8rem) {
 		.nav-item {
 			justify-content: center;
@@ -91,5 +137,18 @@
 		.nav-trail {
 			display: none;
 		}
+		.nav-dot {
+			display: block;
+			position: absolute;
+			top: 0.4rem;
+			right: 0.9rem;
+			width: 6px;
+			height: 6px;
+			border-radius: 50%;
+			background: var(--warn);
+		}
+		.nav-dot.active {
+			background: var(--accent);
+		}
 	}
 </style>

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

@@ -1,11 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { IconName } from '../atoms/Icon.svelte';
+type BadgeTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     icon: IconName;
     label: string;
     href?: string;
     active?: boolean;
     onclick?: (e: MouseEvent) => void;
+    /** Optional trailing count pill (e.g. unread / missing items). When the
+     *  item is `active` it adopts the accent fill; otherwise it uses `badgeTone`. */
+    badge?: string | number;
+    /** Tone for the trailing badge when the item is not active. */
+    badgeTone?: BadgeTone;
     children?: Snippet;
     [key: string]: unknown;
 };

package/dist/components/layouts/NavSection.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	// A grouped block of sidebar nav items: an optional uppercase mono section
+	// `label` (eyebrow) plus consistent tight spacing between the NavItems passed
+	// as children. Saves consumers from re-implementing the label + gap inline for
+	// every group. At icon-rail width (sidebar container ≤ 8rem) the label hides
+	// and the group spacing tightens so the rail stays compact; a thin top divider
+	// then stands in for the dropped label to keep the groups visually separated.
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		children,
+		...rest
+	}: {
+		/** Optional section heading; rendered uppercase + mono. Omit for an
+		 *  unlabeled group (still gets the group spacing + rail divider). */
+		label?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<div class="nav-section" {...rest}>
+	{#if label}
+		<div class="nav-section-label">{label}</div>
+	{/if}
+	<div class="nav-section-items">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.nav-section {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+	}
+	/* Groups separate themselves with breathing room; the first one sits flush. */
+	.nav-section + :global(.nav-section),
+	.nav-section:not(:first-child) {
+		margin-top: var(--sp-3);
+	}
+	.nav-section-label {
+		padding: 0 var(--sp-3);
+		margin-bottom: var(--sp-1);
+		color: var(--text-faint);
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-semibold);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.nav-section-items {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	/* Icon-rail: drop the textual label and use a hairline divider to keep groups
+	   distinct when the sidebar collapses to a rail. */
+	@container sidebar (max-width: 8rem) {
+		.nav-section-label {
+			display: none;
+		}
+		.nav-section:not(:first-child) {
+			margin-top: var(--sp-2);
+			padding-top: var(--sp-2);
+			border-top: 1px solid var(--border);
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Optional section heading; rendered uppercase + mono. Omit for an
+     *  unlabeled group (still gets the group spacing + rail divider). */
+    label?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const NavSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavSection = ReturnType<typeof NavSection>;
+export default NavSection;

package/dist/components/molecules/SelectButton.svelte

@@ -7,12 +7,15 @@
 	import Button from '../atoms/Button.svelte';
 	import Select from '../atoms/Select.svelte';
 
+	type Option = { value: string; label: string };
+
 	let {
 		glyph,
 		label,
 		title,
 		value,
 		options,
+		groups,
 		onchange,
 		class: klass = ''
 	}: {
@@ -21,7 +24,11 @@
 		label: string;
 		title?: string;
 		value: string;
-		options: { value: string; label: string }[];
+		// Flat option list. Ignored when `groups` is given.
+		options?: Option[];
+		// Sectioned options, rendered as native <optgroup> blocks (TSU-1). Used by
+		// the theme picker to split light/dark; falls back to `options` otherwise.
+		groups?: { label: string; options: Option[] }[];
 		onchange: (value: string) => void;
 		class?: string;
 	} = $props();
@@ -38,9 +45,19 @@
 			{value}
 			onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
 		>
-			{#each options as o (o.value)}
-				<option value={o.value}>{o.label}</option>
-			{/each}
+			{#if groups}
+				{#each groups as g (g.label)}
+					<optgroup label={g.label}>
+						{#each g.options as o (o.value)}
+							<option value={o.value}>{o.label}</option>
+						{/each}
+					</optgroup>
+				{/each}
+			{:else}
+				{#each options ?? [] as o (o.value)}
+					<option value={o.value}>{o.label}</option>
+				{/each}
+			{/if}
 		</Select>
 	</Button>
 </span>

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

@@ -1,11 +1,16 @@
+type Option = {
+    value: string;
+    label: string;
+};
 type $$ComponentProps = {
     glyph: string;
     label: string;
     title?: string;
     value: string;
-    options: {
-        value: string;
+    options?: Option[];
+    groups?: {
         label: string;
+        options: Option[];
     }[];
     onchange: (value: string) => void;
     class?: string;

package/dist/components/molecules/ThemePicker.svelte

@@ -8,7 +8,16 @@
 
 	let { class: klass = '' }: { class?: string } = $props();
 
-	const options = THEMES.map((t) => ({ value: t.id, label: `${t.icon}  ${t.label}` }));
+	// Split the registry into light/dark sections (TSU-1) so the long list is
+	// scannable. `<optgroup>` keeps native popup/keyboard behaviour for free.
+	const toOption = (t: (typeof THEMES)[number]) => ({
+		value: t.id,
+		label: `${t.icon}  ${t.label}`
+	});
+	const groups = [
+		{ label: '— light', options: THEMES.filter((t) => t.mode === 'light').map(toOption) },
+		{ label: '— dark', options: THEMES.filter((t) => t.mode === 'dark').map(toOption) }
+	];
 </script>
 
 <SelectButton
@@ -17,6 +26,6 @@
 	label="Theme"
 	title={`Theme: ${theme.label}`}
 	value={theme.current}
-	{options}
+	{groups}
 	onchange={(v) => theme.set(v as (typeof THEMES)[number]['id'])}
 />

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
+export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';

package/dist/index.js

@@ -28,6 +28,7 @@ export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
+export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';

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

@@ -1,88 +1,153 @@
 export declare const THEMES: readonly [{
-    readonly id: "dark";
-    readonly label: "Dark";
-    readonly icon: "☾";
-    readonly themeColor: "#0f1115";
-}, {
     readonly id: "light";
     readonly label: "Light";
     readonly icon: "☀";
     readonly themeColor: "#f6f7f9";
+    readonly mode: "light";
+}, {
+    readonly id: "highcontrast";
+    readonly label: "High Contrast Light";
+    readonly icon: "◻";
+    readonly themeColor: "#ffffff";
+    readonly mode: "light";
+}, {
+    readonly id: "gruvboxlight";
+    readonly label: "Gruvbox Light";
+    readonly icon: "◇";
+    readonly themeColor: "#fbf1c7";
+    readonly mode: "light";
+}, {
+    readonly id: "solarizedlight";
+    readonly label: "Solarized Light";
+    readonly icon: "◑";
+    readonly themeColor: "#fdf6e3";
+    readonly mode: "light";
+}, {
+    readonly id: "everforestlight";
+    readonly label: "Everforest Light";
+    readonly icon: "✾";
+    readonly themeColor: "#fdf6e3";
+    readonly mode: "light";
+}, {
+    readonly id: "rosepinedawn";
+    readonly label: "Rosé Pine Dawn";
+    readonly icon: "✿";
+    readonly themeColor: "#faf4ed";
+    readonly mode: "light";
+}, {
+    readonly id: "latte";
+    readonly label: "Catppuccin Latte";
+    readonly icon: "L";
+    readonly themeColor: "#eff1f5";
+    readonly mode: "light";
+}, {
+    readonly id: "nordlight";
+    readonly label: "Nord Light";
+    readonly icon: "n";
+    readonly themeColor: "#eceff4";
+    readonly mode: "light";
+}, {
+    readonly id: "tokyoday";
+    readonly label: "Tokyo Night Day";
+    readonly icon: "✧";
+    readonly themeColor: "#e1e2e7";
+    readonly mode: "light";
+}, {
+    readonly id: "kanagawalotus";
+    readonly label: "Kanagawa Lotus";
+    readonly icon: "❁";
+    readonly themeColor: "#f2ecbc";
+    readonly mode: "light";
 }, {
     readonly id: "sepia";
     readonly label: "Sepia";
     readonly icon: "✶";
     readonly themeColor: "#f4ecd8";
+    readonly mode: "light";
+}, {
+    readonly id: "dark";
+    readonly label: "Dark";
+    readonly icon: "☾";
+    readonly themeColor: "#0f1115";
+    readonly mode: "dark";
 }, {
     readonly id: "colorblind";
     readonly label: "Color-blind safe";
-    readonly icon: "◑";
+    readonly icon: "◐";
     readonly themeColor: "#16181d";
+    readonly mode: "dark";
 }, {
     readonly id: "mocha";
     readonly label: "Catppuccin Mocha";
     readonly icon: "M";
     readonly themeColor: "#1e1e2e";
+    readonly mode: "dark";
 }, {
     readonly id: "dracula";
     readonly label: "Dracula";
     readonly icon: "D";
     readonly themeColor: "#282a36";
+    readonly mode: "dark";
 }, {
     readonly id: "nord";
     readonly label: "Nord";
     readonly icon: "N";
     readonly themeColor: "#2e3440";
+    readonly mode: "dark";
 }, {
     readonly id: "tokyonight";
     readonly label: "Tokyo Night";
     readonly icon: "✦";
     readonly themeColor: "#1a1b26";
+    readonly mode: "dark";
 }, {
     readonly id: "gruvbox";
     readonly label: "Gruvbox";
     readonly icon: "◆";
     readonly themeColor: "#282828";
+    readonly mode: "dark";
 }, {
     readonly id: "solarized";
     readonly label: "Solarized Dark";
-    readonly icon: "◐";
+    readonly icon: "◒";
     readonly themeColor: "#002b36";
+    readonly mode: "dark";
 }, {
     readonly id: "rosepine";
     readonly label: "Rosé Pine";
     readonly icon: "❀";
     readonly themeColor: "#191724";
+    readonly mode: "dark";
 }, {
     readonly id: "onedark";
     readonly label: "One Dark";
     readonly icon: "①";
     readonly themeColor: "#282c34";
+    readonly mode: "dark";
 }, {
     readonly id: "everforest";
     readonly label: "Everforest";
     readonly icon: "☘";
     readonly themeColor: "#2d353b";
+    readonly mode: "dark";
 }, {
     readonly id: "monokai";
     readonly label: "Monokai";
     readonly icon: "✸";
     readonly themeColor: "#272822";
+    readonly mode: "dark";
 }, {
     readonly id: "amoled";
     readonly label: "AMOLED (high contrast)";
     readonly icon: "◼";
     readonly themeColor: "#000000";
-}, {
-    readonly id: "highcontrast";
-    readonly label: "High Contrast Light";
-    readonly icon: "◻";
-    readonly themeColor: "#ffffff";
+    readonly mode: "dark";
 }];
 export type Mode = (typeof THEMES)[number]['id'];
+export type ThemeMode = (typeof THEMES)[number]['mode'];
 type ThemeOption = (typeof THEMES)[number];
 declare class Theme {
-    current: "dark" | "light" | "sepia" | "colorblind" | "mocha" | "dracula" | "nord" | "tokyonight" | "gruvbox" | "solarized" | "rosepine" | "onedark" | "everforest" | "monokai" | "amoled" | "highcontrast";
+    current: "light" | "highcontrast" | "gruvboxlight" | "solarizedlight" | "everforestlight" | "rosepinedawn" | "latte" | "nordlight" | "tokyoday" | "kanagawalotus" | "sepia" | "dark" | "colorblind" | "mocha" | "dracula" | "nord" | "tokyonight" | "gruvbox" | "solarized" | "rosepine" | "onedark" | "everforest" | "monokai" | "amoled";
     constructor();
     private apply;
     get option(): ThemeOption;

package/dist/stores/theme.svelte.js

@@ -1,25 +1,55 @@
 import { browser } from '../env';
 // Theme registry — the single list the picker and the store both read. Adding a
 // theme = one entry here + one [data-theme="id"] block in variables.css. Nothing
-// else changes. `themeColor` drives the mobile browser-chrome <meta theme-color>.
+// else changes. `themeColor` drives the mobile browser-chrome <meta theme-color>;
+// `mode` groups the theme into the picker's light/dark sections (TSU-1).
 const KEY = 'tsumikit-theme';
 export const THEMES = [
-    { id: 'dark', label: 'Dark', icon: '☾', themeColor: '#0f1115' },
-    { id: 'light', label: 'Light', icon: '☀', themeColor: '#f6f7f9' },
-    { id: 'sepia', label: 'Sepia', icon: '✶', themeColor: '#f4ecd8' },
-    { id: 'colorblind', label: 'Color-blind safe', icon: '◑', themeColor: '#16181d' },
-    { id: 'mocha', label: 'Catppuccin Mocha', icon: 'M', themeColor: '#1e1e2e' },
-    { id: 'dracula', label: 'Dracula', icon: 'D', themeColor: '#282a36' },
-    { id: 'nord', label: 'Nord', icon: 'N', themeColor: '#2e3440' },
-    { id: 'tokyonight', label: 'Tokyo Night', icon: '✦', themeColor: '#1a1b26' },
-    { id: 'gruvbox', label: 'Gruvbox', icon: '◆', themeColor: '#282828' },
-    { id: 'solarized', label: 'Solarized Dark', icon: '◐', themeColor: '#002b36' },
-    { id: 'rosepine', label: 'Rosé Pine', icon: '❀', themeColor: '#191724' },
-    { id: 'onedark', label: 'One Dark', icon: '①', themeColor: '#282c34' },
-    { id: 'everforest', label: 'Everforest', icon: '☘', themeColor: '#2d353b' },
-    { id: 'monokai', label: 'Monokai', icon: '✸', themeColor: '#272822' },
-    { id: 'amoled', label: 'AMOLED (high contrast)', icon: '◼', themeColor: '#000000' },
-    { id: 'highcontrast', label: 'High Contrast Light', icon: '◻', themeColor: '#ffffff' },
+    // ── Light ── bright, paper-white surfaces
+    { id: 'light', label: 'Light', icon: '☀', themeColor: '#f6f7f9', mode: 'light' },
+    {
+        id: 'highcontrast',
+        label: 'High Contrast Light',
+        icon: '◻',
+        themeColor: '#ffffff',
+        mode: 'light',
+    },
+    // ── Medium-light (TSU-1) ── easy on the eyes, not blinding, distinct bases
+    { id: 'gruvboxlight', label: 'Gruvbox Light', icon: '◇', themeColor: '#fbf1c7', mode: 'light' },
+    {
+        id: 'solarizedlight',
+        label: 'Solarized Light',
+        icon: '◑',
+        themeColor: '#fdf6e3',
+        mode: 'light',
+    },
+    {
+        id: 'everforestlight',
+        label: 'Everforest Light',
+        icon: '✾',
+        themeColor: '#fdf6e3',
+        mode: 'light',
+    },
+    { id: 'rosepinedawn', label: 'Rosé Pine Dawn', icon: '✿', themeColor: '#faf4ed', mode: 'light' },
+    { id: 'latte', label: 'Catppuccin Latte', icon: 'L', themeColor: '#eff1f5', mode: 'light' },
+    { id: 'nordlight', label: 'Nord Light', icon: 'n', themeColor: '#eceff4', mode: 'light' },
+    { 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' },
+    // ── Dark ──
+    { id: 'dark', label: 'Dark', icon: '☾', themeColor: '#0f1115', mode: 'dark' },
+    { id: 'colorblind', label: 'Color-blind safe', icon: '◐', themeColor: '#16181d', mode: 'dark' },
+    { id: 'mocha', label: 'Catppuccin Mocha', icon: 'M', themeColor: '#1e1e2e', mode: 'dark' },
+    { id: 'dracula', label: 'Dracula', icon: 'D', themeColor: '#282a36', mode: 'dark' },
+    { id: 'nord', label: 'Nord', icon: 'N', themeColor: '#2e3440', mode: 'dark' },
+    { id: 'tokyonight', label: 'Tokyo Night', icon: '✦', themeColor: '#1a1b26', mode: 'dark' },
+    { id: 'gruvbox', label: 'Gruvbox', icon: '◆', themeColor: '#282828', mode: 'dark' },
+    { id: 'solarized', label: 'Solarized Dark', icon: '◒', themeColor: '#002b36', mode: 'dark' },
+    { id: 'rosepine', label: 'Rosé Pine', icon: '❀', themeColor: '#191724', mode: 'dark' },
+    { id: 'onedark', label: 'One Dark', icon: '①', themeColor: '#282c34', mode: 'dark' },
+    { 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' },
 ];
 const ORDER = THEMES.map((t) => t.id);
 function isMode(value) {

package/dist/styles/variables.css

@@ -649,3 +649,262 @@
   --mach-fg-sl: 70% 82%;
   --mach-border-sl: 45% 40%;
 }
+
+/* ===================================================================
+   Medium-light tier (TSU-1) — light but not blinding. Cream/paper or
+   soft-tinted backgrounds (never pure white) with dark, saturated
+   accents so body text clears WCAG AA. Each ports a famous palette in a
+   distinct color base. They share the light-theme contract: color-scheme
+   light, soft shadows, pale-tint/dark-ink machine badges.
+   =================================================================== */
+
+/* ---- Gruvbox Light (medium) — warm wood/cream, faded orange accent. */
+[data-theme="gruvboxlight"] {
+  color-scheme: light;
+  --c-bg: #fbf1c7;
+  --c-bg-elev: #f9f5d7;
+  --c-bg-elev-2: #ebdbb2;
+  --c-surface: #f9f5d7;
+  --c-border: #d5c4a1;
+  --c-border-strong: #bdae93;
+  --c-text: #3c3836;
+  --c-text-muted: #504945;
+  --c-text-faint: #7c6f64;
+  --c-accent: #af3a03;
+  --c-accent-ink: #fbf1c7;
+  --c-accent-dim: #d65d0e;
+  --c-blue: #076678;
+  --c-amber: #b57614;
+  --c-red: #9d0006;
+  --c-green: #79740e;
+  --c-violet: #8f3f71;
+  --c-gold: #b57614;
+  --c-teal: #427b58;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(80, 60, 30, 0.2);
+  --mach-bg-sl: 45% 86%;
+  --mach-fg-sl: 55% 30%;
+  --mach-border-sl: 40% 68%;
+}
+
+/* ---- Solarized Light — Ethan Schoonover's base3 paper with 16-color accents. */
+[data-theme="solarizedlight"] {
+  color-scheme: light;
+  --c-bg: #fdf6e3;
+  --c-bg-elev: #fbf3e0;
+  --c-bg-elev-2: #eee8d5;
+  --c-surface: #fbf3e0;
+  --c-border: #ddd6c1;
+  --c-border-strong: #cbc4ad;
+  --c-text: #073642;
+  --c-text-muted: #586e75;
+  --c-text-faint: #839496;
+  --c-accent: #2aa198;
+  --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;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(88, 110, 117, 0.22);
+  --mach-bg-sl: 45% 86%;
+  --mach-fg-sl: 50% 30%;
+  --mach-border-sl: 40% 68%;
+}
+
+/* ---- Everforest Light (medium) — soft sage/green paper, low-contrast calm. */
+[data-theme="everforestlight"] {
+  color-scheme: light;
+  --c-bg: #fdf6e3;
+  --c-bg-elev: #f4f0d9;
+  --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-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;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(92, 106, 114, 0.22);
+  --mach-bg-sl: 35% 86%;
+  --mach-fg-sl: 45% 32%;
+  --mach-border-sl: 30% 68%;
+}
+
+/* ---- Rosé Pine Dawn — official light variant: muted rose, iris, foam. */
+[data-theme="rosepinedawn"] {
+  color-scheme: light;
+  --c-bg: #faf4ed;
+  --c-bg-elev: #fffaf3;
+  --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-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;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(87, 82, 121, 0.2);
+  --mach-bg-sl: 35% 88%;
+  --mach-fg-sl: 30% 38%;
+  --mach-border-sl: 28% 72%;
+}
+
+/* ---- Catppuccin Latte — the official light flavour: neutral with mauve accent. */
+[data-theme="latte"] {
+  color-scheme: light;
+  --c-bg: #eff1f5;
+  --c-bg-elev: #e6e9ef;
+  --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-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;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(76, 79, 105, 0.2);
+  --mach-bg-sl: 45% 88%;
+  --mach-fg-sl: 45% 34%;
+  --mach-border-sl: 35% 72%;
+}
+
+/* ---- Nord Light — Snow Storm base, Polar Night ink, darkened Frost/Aurora
+   accents so they read against the pale blue-gray paper. */
+[data-theme="nordlight"] {
+  color-scheme: light;
+  --c-bg: #eceff4;
+  --c-bg-elev: #f4f6f9;
+  --c-bg-elev-2: #e5e9f0;
+  --c-surface: #f4f6f9;
+  --c-border: #d8dee9;
+  --c-border-strong: #c2cad6;
+  --c-text: #2e3440;
+  --c-text-muted: #434c5e;
+  --c-text-faint: #6b7689;
+  --c-accent: #5e81ac;
+  --c-accent-ink: #eceff4;
+  --c-accent-dim: #5e81ac;
+  --c-blue: #5e81ac;
+  --c-amber: #9a6f12;
+  --c-red: #bf616a;
+  --c-green: #5a7444;
+  --c-violet: #9a6c93;
+  --c-gold: #9a6f12;
+  --c-teal: #3a8a87;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(46, 52, 64, 0.2);
+  --mach-bg-sl: 30% 88%;
+  --mach-fg-sl: 35% 34%;
+  --mach-border-sl: 28% 72%;
+}
+
+/* ---- Tokyo Night Day — the official light variant: muted blue paper, the
+   signature blue ink, saturated day accents. */
+[data-theme="tokyoday"] {
+  color-scheme: light;
+  --c-bg: #e1e2e7;
+  --c-bg-elev: #eaeaee;
+  --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-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;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(55, 96, 191, 0.2);
+  --mach-bg-sl: 40% 88%;
+  --mach-fg-sl: 45% 34%;
+  --mach-border-sl: 32% 72%;
+}
+
+/* ---- Kanagawa Lotus — the official light variant: warm woodblock paper,
+   ink-violet accent, muted earthen hues (brownish base). */
+[data-theme="kanagawalotus"] {
+  color-scheme: light;
+  --c-bg: #f2ecbc;
+  --c-bg-elev: #ebe3b0;
+  --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-accent: #624c83;
+  --c-accent-ink: #f2ecbc;
+  --c-accent-dim: #624c83;
+  --c-blue: #4d699b;
+  --c-amber: #cc6d00;
+  --c-red: #c84053;
+  --c-green: #6f894e;
+  --c-violet: #624c83;
+  --c-gold: #836f4a;
+  --c-teal: #597b75;
+  --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);
+  --shadow-lg: 0 12px 40px rgba(84, 84, 100, 0.22);
+  --mach-bg-sl: 35% 84%;
+  --mach-fg-sl: 35% 34%;
+  --mach-border-sl: 30% 66%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.16",
+  "version": "0.4.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",