@dorsk/tsumikit 0.37.5 → 0.38.1

package/README.md

@@ -149,7 +149,7 @@ for a light theme (`:root` defaults to dark, so dark themes may omit it).
 `onenter(value)`; the bare `<input>` DOM is unchanged unless `icon`/`clearable`
 is used), Textarea, Select (`options` array with per-option `icon`/`emoji`/`hint`/`disabled`;
 the trigger overlays the selected option's glyph + muted hint on the native control), Switch, Checkbox,
-Slider, Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
+Slider (`ticks` draws a dot per step for a segmented slider), Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
 threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover image with seeded gradient + initials
 fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline banners), Badge
 (`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
@@ -164,7 +164,7 @@ Tabs, RadioGroup (`variant="rows"`: bordered rows, per-option `note`/`descriptio
 `action(option)` trailing control that never toggles, `below(option)` inline panel),
 Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
-ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore,
+ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
 CapBar (consumption track with a draggable, keyboard-steppable cap handle; `oninput` live, `onchange` on commit),

package/dist/components/atoms/Slider.svelte

@@ -20,6 +20,7 @@
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
 		invalid = false,
+		ticks = false,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
@@ -33,6 +34,9 @@
 		format?: (v: number) => string;
 		/** Error state: aria-invalid. */
 		invalid?: boolean;
+		/** Visible dots at each step (segmented slider). `true` = one per `step`;
+		 *  a number array places dots at those values. */
+		ticks?: boolean | number[];
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
@@ -46,13 +50,19 @@
 
 	$effect(() => warnUnlabelled(el, 'Slider'));
 
-	// Fill percentage for the track gradient.
-	const pct = $derived(
-		Math.max(0, Math.min(100, ((Number(value) - +min) / (+max - +min || 1)) * 100))
-	);
+	const frac = (v: number) => Math.max(0, Math.min(1, (v - +min) / (+max - +min || 1)));
+	const pct = $derived(frac(Number(value)) * 100);
+	const tickValues = $derived.by(() => {
+		if (!ticks) return [];
+		if (Array.isArray(ticks)) return ticks;
+		const n = Math.floor((+max - +min) / (+step || 1));
+		if (n > 200) return [];
+		return Array.from({ length: n + 1 }, (_, i) => +min + i * +step);
+	});
 </script>
 
-<div class="slider {klass}" style="--pct: {pct}%" data-tsu="Slider">
+<div class="slider {klass}" class:has-ticks={tickValues.length > 0} style="--pct: {pct}%" data-tsu="Slider">
+	<span class="range">
 	<input
 		bind:this={el}
 		{id}
@@ -66,6 +76,14 @@
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
+	{#if tickValues.length > 0}
+		<span class="ticks" aria-hidden="true">
+			{#each tickValues as t (t)}
+				<i class="tick" class:reached={t <= Number(value)} style="--f: {frac(t)}"></i>
+			{/each}
+		</span>
+	{/if}
+	</span>
 	{#if showValue}
 		<output for={id} class="slider-out">{format(Number(value))}</output>
 	{/if}
@@ -78,10 +96,18 @@
 		gap: var(--sp-3);
 		width: 100%;
 	}
+	.range {
+		position: relative;
+		display: flex;
+		flex: 1;
+		min-width: 0;
+	}
 	input[type='range'] {
 		appearance: none;
 		-webkit-appearance: none;
 		flex: 1;
+		position: relative;
+		z-index: 1;
 		height: 1.25rem;
 		background: none;
 		cursor: pointer;
@@ -145,6 +171,26 @@
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
+	.ticks {
+		position: absolute;
+		inset: 0;
+		z-index: 2;
+		pointer-events: none;
+	}
+	.tick {
+		position: absolute;
+		top: 50%;
+		left: calc(0.6rem + (100% - 1.2rem) * var(--f));
+		width: 0.35rem;
+		height: 0.35rem;
+		margin: -0.175rem 0 0 -0.175rem;
+		border-radius: 50%;
+		background: var(--border-strong);
+	}
+	.tick.reached {
+		background: var(--bg);
+		opacity: 0.6;
+	}
 	.slider-out {
 		min-width: 2.5rem;
 		text-align: right;

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

@@ -9,6 +9,9 @@ type $$ComponentProps = HTMLInputAttributes & {
     format?: (v: number) => string;
     /** Error state: aria-invalid. */
     invalid?: boolean;
+    /** Visible dots at each step (segmented slider). `true` = one per `step`;
+     *  a number array places dots at those values. */
+    ticks?: boolean | number[];
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLInputAttributes['aria-invalid'];

package/dist/components/molecules/FontScalePicker.svelte

@@ -1,22 +1,91 @@
 <script lang="ts">
-	// UI text-size switcher. Same compact native-select-over-button pattern as
-	// ThemePicker, wired to the font-scale store. Drives --fs-scale (text only) —
-	// chrome dimensions stay fixed. Glyph is the conventional "A".
-	import SelectButton from './SelectButton.svelte';
+	// Text-size control: the "A" trigger opens a popover with a stepped slider
+	// across SCALE_LEVELS. Drives --fs-scale (text only), chrome stays fixed.
+	// Everything inside the popover is sized in plain rem, never --fs-*: if the
+	// panel rescaled with the page the slider would move under the pointer
+	// mid-drag and oscillate between steps.
+	import Popover from './Popover.svelte';
+	import Slider from '../atoms/Slider.svelte';
 	import { fontScale, SCALE_LEVELS } from '../../stores/fontscale.svelte';
 
 	let { class: klass = '' }: { class?: string } = $props();
 
-	const options = SCALE_LEVELS.map((l) => ({ value: l.id, label: l.label }));
+	const index = $derived(Math.max(0, SCALE_LEVELS.findIndex((l) => l.id === fontScale.levelId)));
+	const level = $derived(SCALE_LEVELS[index]);
+	const set = (i: number) => fontScale.set(SCALE_LEVELS[Math.max(0, Math.min(SCALE_LEVELS.length - 1, i))].id);
 </script>
 
-<SelectButton
-	data-tsu="FontScalePicker"
-	class={klass}
-	glyph="A"
-	label="Text size"
-	title="Text size"
-	value={fontScale.levelId}
-	{options}
-	onchange={(v) => fontScale.set(v)}
-/>
+<Popover label="Text size" placement="bottom-end" triggerClass={klass} box="md">
+	{#snippet trigger()}<span class="glyph" data-tsu="FontScalePicker" title="Text size: {level.label}">A</span>{/snippet}
+	<div class="panel">
+		<div class="row">
+			<button type="button" class="end small" aria-label="Smaller text" onclick={() => set(index - 1)}>a</button>
+			<Slider
+				value={index}
+				min={0}
+				max={SCALE_LEVELS.length - 1}
+				step={1}
+				ticks
+				label="Text size"
+				aria-valuetext={level.label}
+				oninput={(e) => set(Number((e.currentTarget as HTMLInputElement).value))}
+			/>
+			<button type="button" class="end large" aria-label="Larger text" onclick={() => set(index + 1)}>A</button>
+		</div>
+		<div class="caption" aria-live="polite">{level.label} · {Math.round(level.value * 100)}%</div>
+	</div>
+</Popover>
+
+<style>
+	.glyph {
+		font-weight: var(--fw-bold);
+		font-size: 1rem;
+		line-height: 1;
+	}
+	.panel {
+		width: 15rem;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		padding: var(--sp-2) var(--sp-3);
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+	}
+	.end {
+		flex: none;
+		width: 1.75rem;
+		height: 1.75rem;
+		padding: 0;
+		border: 0;
+		border-radius: var(--r-sm);
+		background: none;
+		color: var(--text-muted);
+		font-family: inherit;
+		font-weight: var(--fw-bold);
+		line-height: 1;
+		cursor: pointer;
+	}
+	.end:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+	}
+	.end:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	.small {
+		font-size: 0.75rem;
+	}
+	.large {
+		font-size: 1.125rem;
+	}
+	.caption {
+		margin-top: var(--sp-1);
+		text-align: center;
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		font-variant-numeric: tabular-nums;
+	}
+</style>

package/dist/components/molecules/ThemePicker.svelte

@@ -1,30 +1,136 @@
 <script lang="ts">
-	// Theme switcher: a compact icon-button hosting a native <select> over the
-	// full theme registry (built-ins + theme.register()), wired to the global
-	// theme store. The native control gives correct mobile/keyboard behaviour and
-	// outside-click handling for free. The button glyph reflects the active theme.
-	import SelectButton from './SelectButton.svelte';
+	// Theme switcher: the trigger shows the active theme's palette swatch and
+	// opens a popover grid of swatches, light then dark. Each swatch is scoped
+	// with data-theme so its four quadrants resolve that theme's raw palette
+	// (--c-bg, --c-surface, --c-text, --c-accent; the derived --bg etc. are
+	// resolved once at :root and would not re-scope). The root default theme
+	// has no [data-theme] block, so its swatch carries the :root values.
+	import Popover from './Popover.svelte';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 
 	let { class: klass = '' }: { class?: string } = $props();
 
-	const toOption = (t: ThemeDef) => ({
-		value: t.id,
-		label: `${t.icon ?? theme.fallbackIcon}  ${t.label}`
-	});
-	const groups = $derived([
-		{ label: '— light', options: theme.all.filter((t) => t.mode === 'light').map(toOption) },
-		{ label: '— dark', options: theme.all.filter((t) => t.mode === 'dark').map(toOption) }
-	]);
+	let hovered = $state<ThemeDef | null>(null);
+	const shown = $derived(hovered ?? theme.option);
+	const groups = $derived(
+		(['light', 'dark'] as const).map((mode) => ({
+			mode,
+			themes: theme.all.filter((t) => t.mode === mode)
+		}))
+	);
 </script>
 
-<SelectButton
-	data-tsu="ThemePicker"
-	class={klass}
-	glyph={theme.icon}
-	label="Theme"
-	title={`Theme: ${theme.label}`}
-	value={theme.current}
-	{groups}
-	onchange={(v) => theme.set(v)}
-/>
+{#snippet swatch(id: string)}
+	<span class="swatch" data-theme={id} aria-hidden="true">
+		<i class="q bg"></i><i class="q surface"></i><i class="q text"></i><i class="q accent"></i>
+	</span>
+{/snippet}
+
+<Popover label="Theme: {theme.label}" placement="bottom-end" triggerClass={klass} box="md">
+	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" title="Theme: {theme.label}">{@render swatch(theme.current)}</span>{/snippet}
+	<div class="panel">
+		{#each groups as g (g.mode)}
+			<div class="group-label">{g.mode}</div>
+			<div class="grid" role="group" aria-label="{g.mode} themes">
+				{#each g.themes as t (t.id)}
+					<button
+						type="button"
+						class="cell"
+						class:current={t.id === theme.current}
+						aria-pressed={t.id === theme.current}
+						aria-label={t.label}
+						title="{t.icon ?? theme.fallbackIcon} {t.label}"
+						onclick={() => theme.set(t.id)}
+						onpointerenter={() => (hovered = t)}
+						onpointerleave={() => (hovered = null)}
+						onfocus={() => (hovered = t)}
+						onblur={() => (hovered = null)}
+					>
+						{@render swatch(t.id)}
+					</button>
+				{/each}
+			</div>
+		{/each}
+		<div class="caption" aria-live="polite">{shown.icon ?? theme.fallbackIcon} {shown.label}</div>
+	</div>
+</Popover>
+
+<style>
+	.trigger {
+		display: inline-flex;
+	}
+	.swatch {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		width: 1.25rem;
+		height: 1.25rem;
+		overflow: hidden;
+		border-radius: var(--r-sm);
+		box-shadow: inset 0 0 0 1px var(--border);
+	}
+	.swatch[data-theme='dark'] {
+		--c-bg: #0f1115;
+		--c-surface: #21262f;
+		--c-text: #e6e9ef;
+		--c-accent: #5ad6a0;
+	}
+	.q {
+		display: block;
+	}
+	.q.bg {
+		background: var(--c-bg);
+	}
+	.q.surface {
+		background: var(--c-surface);
+	}
+	.q.text {
+		background: var(--c-text);
+	}
+	.q.accent {
+		background: var(--c-accent);
+	}
+	.panel {
+		padding: var(--sp-2);
+		width: max-content;
+	}
+	.group-label {
+		margin: var(--sp-1) var(--sp-1) var(--sp-1);
+		font-size: var(--fs-xs);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-faint);
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(6, auto);
+		gap: var(--sp-1);
+	}
+	.cell {
+		display: inline-flex;
+		padding: 3px;
+		border: 2px solid transparent;
+		border-radius: var(--r-md);
+		background: none;
+		cursor: pointer;
+	}
+	.cell .swatch {
+		width: 1.6rem;
+		height: 1.6rem;
+	}
+	.cell:hover {
+		background: var(--bg-elevated-2);
+	}
+	.cell.current {
+		border-color: var(--accent);
+	}
+	.cell:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	.caption {
+		margin-top: var(--sp-2);
+		text-align: center;
+		font-size: var(--fs-sm);
+		color: var(--text-muted);
+	}
+</style>

package/package.json

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