npm - @poodle64/ui - Versions diffs - 2026.8.17 → 2026.9.1 - Mend

@poodle64/ui 2026.8.17 → 2026.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +103 -3
package/bin/check-colour-surface.mjs +262 -0
package/dist/components/ui/button/button.svelte +13 -8
package/dist/components/ui/checkbox/checkbox.svelte +23 -1
package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
package/dist/components/ui/switch/index.d.ts +2 -2
package/dist/components/ui/switch/index.js +1 -1
package/dist/components/ui/switch/switch.svelte +38 -5
package/dist/components/ui/switch/switch.svelte.d.ts +7 -1
package/dist/components/ui/tabs/tabs-trigger.svelte +1 -1
package/dist/styles.css +131 -10
package/package.json +5 -1
package/registry/component-map.json +1 -1
package/registry/component-map.md +1 -1

package/README.md CHANGED Viewed

@@ -940,15 +940,25 @@ unnoticed through a full app migration (#3).
 Second, what the variable layer does not cover: the `text-display` / `text-body` /
 `text-stat` / `tracking-eyebrow` scale keys, the `.ds-edge` card treatment, the
 `.ds-dialog-section` divider rule, the `.ds-chip` / `.ds-dot` / `.ds-ink` status
-classes, and the two things that make this package's overlays animate at all —
-`@custom-variant data-open` / `data-closed` (bits-ui emits `data-state="open"`,
-so a bare `data-open:` utility matches nothing without them) and an import of
+classes, the `--ds-control-*` geometry the density option turns (below), and the
+two things that make this package's overlays animate at all — a
+`@custom-variant` per `data-state` value (bits-ui emits `data-state="open"`, so
+a bare `data-open:` utility matches nothing without one) and an import of
 `tw-animate-css`, which defines `animate-in`, `fade-in-0`, `zoom-in-95` and
 `slide-in-from-*`. Both used to be the app's job, and an app that never did the
 job got dialogues, dropdowns, popovers and selects that opened with no
 transition, silently. A consuming app now declares neither; one that already
 declares them loses nothing, since the definitions are identical.
+The `data-state` set covers `open`/`closed`, `checked`/`unchecked`/
+`indeterminate` and `active`/`inactive`, so `data-checked:` and `data-active:`
+are usable shorthands in an app's own components too. Only `open`/`closed` were
+declared until 2026.9.0, and the gap was not theoretical: in one app every
+checked checkbox painted no primary fill and every tab strip rendered its
+selected trigger identically to the rest, on eleven routes, for months. Nothing
+fails when a variant is missing — the class is in the DOM, and only the rule is
+absent.
 It holds no palette. Every value resolves through a `--ds-*` token, so choosing a
 palette stays a matter of overriding `--ds-color-*` in your own `app.css`, and
 `.dark` flows through untouched. Any single name can still be overridden by
@@ -964,6 +974,60 @@ differ on. An app using them registers them itself.
 source scan misses them. Without it the components render unstyled (no build
 error, no lint hit; the classes just never reach the compiled CSS).
+### Control density
+An app that runs its controls denser than 40px used to have exactly one move
+available: fork `Button`. Its heights were hard-coded Tailwind classes, so no
+token could reach them — and forking Button takes `dialog`, `alert-dialog`,
+`command`, `input-group` and `form` with it, because each of those imports it.
+One app carried all six for that reason, five of them otherwise identical to
+this package's, and pinned a height on 75 call sites across 20 files.
+The knob is one attribute, on any ancestor — ordinarily `<html>`, in
+`app.html`:
+```html
+<html lang="en-AU" data-ds-density="compact"></html>
+```
+Two named values, `comfortable` (the default) and `compact`:
+| Size      | comfortable | compact |
+| --------- | ----------- | ------- |
+| `xs`      | 28px        | 24px    |
+| `sm`      | 36px        | 28px    |
+| `default` | 40px        | 32px    |
+| `lg`      | 44px        | 36px    |
+Inline padding and the trim beside an icon move with the height; the `icon-*`
+sizes stay squares of the same heights.
+`compact` is not a picked scale. This package's `Input` already renders at 32px
+and its `Select` trigger at 32/28px, so a default-size `Button` beside an
+`Input` has always been 8px taller than it. At `compact` they are the same
+height, which is the alignment the forking app was hand-pinning.
+The attribute is honoured wherever it appears, so a dense toolbar can carry it
+without the page doing so — and `data-ds-density="comfortable"` on a subtree
+returns that subtree to the default inside a compact page.
+Nothing moves for an app that names no density: the `--ds-control-*` defaults
+reproduce the previous hard-coded classes exactly, measured in a real browser
+(`harness/drive.md` §"The control density ramp") rather than asserted here.
+Hand-tuning an individual rung remains possible and remains a deviation — the
+sanctioned move is choosing a named density, as choosing a palette rather than a
+hex value is the sanctioned move for colour.
+### Checkbox and Switch
+Both carry a transparent `::after` skirt that lifts the pointer target over WCAG
+2.5.8's 24px minimum without moving a painted pixel — a 16px checkbox has a 29px
+target, a 36x20px switch track a 35x31px one. Both take `aria-invalid`, which
+paints the destructive ring the inputs already use, so a Formsnap-wired field
+marks itself. `Checkbox` binds `indeterminate` and now paints the same fill as a
+checked box for it, rather than a dash on a transparent ground. `Switch` takes
+`size="sm"`, a 28x16px track that lines up with a `size="sm"` control row.
 ## Australian value formatters
 ```ts
@@ -1025,6 +1089,42 @@ one is bound to Xero tax codes besides. Relative time ("2 hours ago") is out
 too — it rides on `date-fns` in the one app that has it, and a display formatter
 is not worth making that a dependency of every consumer.
+## The gate: `ds-check-colour-surface`
+The package ships the gate that proves its own surface actually resolves in the
+consuming app:
+```bash
+pnpm exec ds-check-colour-surface                          # entry: src/app.css
+pnpm exec ds-check-colour-surface --entry frontend/src/app.css   # from a repo root
+```
+Tailwind and this package are both resolved from the STYLESHEET's directory, not
+the working directory, so the second form works from a repo root — which is where
+a pre-commit hook runs, and how the vendored copies this replaces were invoked.
+An app's `app.css` carries two load-bearing lines, and dropping either breaks
+nothing any other gate can see — `build`, `lint`, `lint:css` and `check` all
+still pass while `bg-card`, `bg-muted`, `bg-accent`, `bg-popover` and
+`border-input` compile to no rule at all:
+```css
+@import '@poodle64/ui/styles.css';            /* registers the surface */
+@source '../node_modules/@poodle64/ui/dist';  /* puts it in the scan   */
+```
+They fail differently, so the gate asserts them differently: it compiles the
+semantic utilities and requires each to emit a real declaration (the `@import`),
+then asks the compiler which sources it resolved and requires this package's own
+classes to appear and compile (the `@source`). Tailwind comes from the app, not
+from this package's tree, so what it compiles is what the app ships.
+It was vendored into nine apps as a byte-identical `scripts/check-colour-surface.mjs`
+and absent from three. If an app still carries that copy, delete it and the
+`lint:colour` script that calls it once the app is on this version or later —
+the estate's shared frontend-CI workflow prefers the shipped bin and keeps the
+vendored path only as a fallback.
 ## Verifying a change
 ```bash

package/bin/check-colour-surface.mjs ADDED Viewed

@@ -0,0 +1,262 @@
+#!/usr/bin/env node
+/**
+ * The shadcn colour surface must actually resolve. Nothing else notices if it does not.
+ *
+ * The consuming app's `src/app.css` carries two load-bearing lines:
+ *
+ *   @import '@poodle64/ui/styles.css'   the shadcn semantic surface AND its
+ *                                       Tailwind v4 `@theme inline` registration
+ *   @source '.../@poodle64/ui/dist'     puts the package inside Tailwind's scan
+ *
+ * Delete either and every gate an app has still passes: `pnpm build`, `lint`,
+ * `lint:css` and `check` all succeed, and the app ships with `bg-card`,
+ * `bg-muted`, `bg-accent`, `bg-popover` and `border-input` compiling to no rule
+ * at all — no build error, no lint hit, no failing test, just classes in the DOM
+ * with nothing behind them. That is poodle64/design-system#3, which reached every
+ * app in the estate before anyone saw it: dropdowns with no hover, inputs with no
+ * border, cards and popovers with no surface.
+ *
+ * The two lines fail differently, so this asserts them differently:
+ *
+ *   registration  compile a fixed set of semantic utilities and require each to
+ *                 emit a real declaration. Losing the @import kills all of them.
+ *   scanning      ask the compiler which sources it resolved, read the package's
+ *                 own dist through them, and require that its classes both appear
+ *                 and compile. Losing the @source leaves registration intact — the
+ *                 utilities still compile when named explicitly — and silently
+ *                 stops generating everything the shared components themselves use.
+ *
+ * It ships from the package because nine apps carried a byte-identical copy of it
+ * under `frontend/scripts/`, and three carried none: a gate that guards THIS
+ * package's surface, maintained in nine places, is the divergence it exists to
+ * stop. The only substantive change from that vendored form is where it looks —
+ * the app root comes from the working directory or `--entry`, not from the
+ * script's own location, because the script no longer lives in the app.
+ *
+ * Usage: ds-check-colour-surface [--entry <path to app.css>]   (default: src/app.css)
+ */
+import { existsSync, readFileSync, realpathSync, statSync } from 'node:fs';
+import { readFile, readdir } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import process from 'node:process';
+/** Semantic names the package registers; each must emit a real declaration. */
+const REGISTERED = ['bg-card', 'bg-muted', 'bg-accent', 'bg-popover', 'border-input'];
+const PACKAGE = '@poodle64/ui';
+/**
+ * Resolve a stylesheet the way the bundler does.
+ *
+ * `require.resolve` cannot be used: a CSS-only package exports neither a JS main
+ * nor `./package.json`. Walk `node_modules` on disk instead, from the REAL path —
+ * pnpm links each dependency into a store directory and a package's own siblings
+ * live beside it there, not under this app's symlink.
+ */
+function resolveStylesheet(id, base) {
+	if (id.startsWith('.') || id.startsWith('/')) return resolve(base, id);
+	const scoped = id.startsWith('@');
+	const pkgName = id
+		.split('/')
+		.slice(0, scoped ? 2 : 1)
+		.join('/');
+	const sub = id
+		.split('/')
+		.slice(scoped ? 2 : 1)
+		.join('/');
+	for (let dir = realpathSync(base); ; dir = dirname(dir)) {
+		const root = resolve(dir, 'node_modules', pkgName);
+		if (existsSync(root)) {
+			const pkg = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8'));
+			const pick = (e) =>
+				typeof e === 'string' ? e : (e?.style ?? e?.default ?? e?.import ?? e?.require);
+			const key = sub ? `./${sub}` : '.';
+			let entry = pick(pkg.exports?.[key]) ?? pick(pkg.exports?.[`${key}.css`]);
+			if (!entry && sub) {
+				const direct = resolve(root, sub.endsWith('.css') ? sub : `${sub}.css`);
+				if (existsSync(direct)) return direct;
+			}
+			entry ??= pkg.style ?? pick(pkg.exports?.['.']) ?? pkg.main;
+			if (!entry) throw new Error(`no stylesheet entry for ${id}`);
+			return resolve(root, entry);
+		}
+		if (dirname(dir) === dir) throw new Error(`cannot resolve stylesheet ${id} from ${base}`);
+	}
+}
+/**
+ * Tailwind comes from the APP, never from this package's own tree.
+ *
+ * Under pnpm a bin runs from inside the store, where only what @poodle64/ui
+ * itself declares is reachable; the compiler that matters is the one the app
+ * builds with, and compiling against a different copy would prove nothing about
+ * the app's own output.
+ *
+ * Resolution starts at the STYLESHEET, not the working directory, so
+ * `--entry frontend/src/app.css` works from a repo root — which is where a
+ * pre-commit hook runs, and where the nine vendored copies this replaces were
+ * invoked from.
+ */
+async function loadCompiler(from) {
+	const require = createRequire(resolve(from, '_'));
+	let manifestPath;
+	try {
+		manifestPath = require.resolve('tailwindcss/package.json');
+	} catch {
+		throw new Error(
+			`tailwindcss is not resolvable from ${from} — this gate compiles the app's own ` +
+				'stylesheet, so it needs the compiler the app builds with'
+		);
+	}
+	// Resolve the ESM condition explicitly. `require.resolve('tailwindcss')`
+	// picks the `require` condition — Tailwind's CJS bundle — from which
+	// `compile` is not an ESM named export, so the import succeeds and hands
+	// back undefined. That reads as "compile is not a function" several frames
+	// later, which is a long way from the actual cause.
+	const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+	const map = manifest.exports?.['.'] ?? {};
+	const relative_ = typeof map === 'string' ? map : (map.import ?? map.default ?? map.require);
+	if (!relative_) throw new Error('tailwindcss declares no importable entry point');
+	const entry = resolve(dirname(manifestPath), relative_);
+	const module = await import(pathToFileURL(entry).href);
+	const compile = module.compile ?? module.default?.compile;
+	if (typeof compile !== 'function') {
+		throw new Error(`tailwindcss at ${entry} exports no compile(): is it v4?`);
+	}
+	return compile;
+}
+async function buildCompiler(compile, entryPath) {
+	return compile(await readFile(entryPath, 'utf8'), {
+		base: dirname(entryPath),
+		loadStylesheet: async (id, base) => {
+			const path = resolveStylesheet(id, base);
+			return { path, base: dirname(path), content: await readFile(path, 'utf8') };
+		},
+		loadModule: async (id, base) => {
+			const req = createRequire(resolve(base, '_'));
+			const path = id.startsWith('.') ? resolve(base, id) : req.resolve(id);
+			return { path, base: dirname(path), module: (await import(pathToFileURL(path).href)).default };
+		}
+	});
+}
+async function filesUnder(dir, acc = []) {
+	for (const e of await readdir(dir, { withFileTypes: true })) {
+		const p = join(dir, e.name);
+		if (e.isDirectory()) await filesUnder(p, acc);
+		else if (/\.(svelte|js|ts)$/.test(e.name)) acc.push(p);
+	}
+	return acc;
+}
+/** Class-ish tokens, deliberately loose: a superset is fine, we only need some to compile. */
+function candidatesIn(text) {
+	return new Set(
+		(text.match(/[a-z][a-z0-9]*(?:-[a-z0-9]+)+/g) ?? []).filter(
+			(c) => c.length < 40 && !c.includes('--')
+		)
+	);
+}
+export async function checkColourSurface({ cwd = process.cwd(), entry } = {}) {
+	const entryPath = resolve(cwd, entry ?? join('src', 'app.css'));
+	if (!existsSync(entryPath)) {
+		throw new Error(
+			`no stylesheet at ${relative(cwd, entryPath) || entryPath} — run this from the app ` +
+				'directory, or pass --entry'
+		);
+	}
+	const failures = [];
+	const compiler = await buildCompiler(await loadCompiler(dirname(entryPath)), entryPath);
+	// 1. Registration — the @import.
+	const registeredCss = compiler.build(REGISTERED);
+	for (const utility of REGISTERED) {
+		const rule = registeredCss.match(new RegExp(`\\.${utility}\\s*\\{([^}]*)\\}`));
+		if (!rule) {
+			failures.push(`${utility}: no rule at all — the shadcn surface is not registered`);
+		} else if (!/var\(--/.test(rule[1])) {
+			failures.push(`${utility}: emits ${rule[1].trim()} — not resolving to a token`);
+		}
+	}
+	// 2. Scanning — the @source.
+	// Each entry is { base, pattern, negated }; the pattern is the @source argument,
+	// relative to the file that declared it. Removing the @source line empties this
+	// list entirely, which is the signal.
+	const scanned = (compiler.sources ?? [])
+		.filter((s) => !s.negated)
+		.map((s) => (typeof s === 'string' ? s : resolve(s.base, s.pattern)));
+	const packageSource = scanned.find((s) => s.includes(PACKAGE));
+	if (!packageSource) {
+		failures.push(
+			`no @source covers ${PACKAGE}: Tailwind never scans the shared components, so every ` +
+				`utility they use and this app does not compiles to nothing`
+		);
+	} else if (!existsSync(packageSource) || !statSync(packageSource).isDirectory()) {
+		failures.push(`the @source for ${PACKAGE} points at ${packageSource}, which is not a directory`);
+	} else {
+		const candidates = new Set();
+		for (const file of await filesUnder(packageSource)) {
+			for (const c of candidatesIn(await readFile(file, 'utf8'))) candidates.add(c);
+		}
+		const produced = compiler.build([...candidates]);
+		const emitted = [...candidates].filter((c) => produced.includes(`.${c}`));
+		if (emitted.length === 0) {
+			failures.push(
+				`${PACKAGE}'s own sources produced no utilities: the package is in the scan but ` +
+					`nothing it uses compiles`
+			);
+		}
+	}
+	return { entryPath, failures };
+}
+async function main(argv) {
+	const at = argv.indexOf('--entry');
+	const entry = at === -1 ? undefined : argv[at + 1];
+	if (at !== -1 && !entry) {
+		console.error('ds-check-colour-surface: --entry needs a path');
+		return 1;
+	}
+	let result;
+	try {
+		result = await checkColourSurface({ entry });
+	} catch (error) {
+		// A gate that could not run has not passed. Say which, and where it looked.
+		console.error(`ds-check-colour-surface: ${error.message}`);
+		console.error(`  cwd: ${process.cwd()}`);
+		return 1;
+	}
+	if (result.failures.length > 0) {
+		console.error('\nThe shadcn colour surface does not resolve:\n');
+		for (const f of result.failures) console.error(`  - ${f}`);
+		console.error(
+			`\n${relative(process.cwd(), result.entryPath)} must keep BOTH ` +
+				`\`@import '${PACKAGE}/styles.css'\` and \`@source '../node_modules/${PACKAGE}/dist'\`,\n` +
+				`and must not re-declare the shadcn names (--card, --muted, --accent, --popover,\n` +
+				`--input) as plain custom properties: that makes the variable exist without\n` +
+				`registering it as a theme colour.\n`
+		);
+		return 1;
+	}
+	console.log(
+		`colour surface: ${REGISTERED.length} semantic utilities resolve, ${PACKAGE} is scanned`
+	);
+	return 0;
+}
+// Importable for the test suite; only a direct CLI invocation exits.
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) {
+	process.exit(await main(process.argv.slice(2)));
+}

package/dist/components/ui/button/button.svelte CHANGED Viewed

@@ -18,18 +18,23 @@
 					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
+			// Every geometry value here is a `--ds-control-*` token whose default is
+			// the class it replaced (`h-10` is 2.5rem, `px-4` is 1rem, …), so a
+			// consumer that names no density renders unchanged. The tokens, the two
+			// named densities and why the ramp is a table rather than a ratio are in
+			// styles.css §"Control geometry".
 			size: {
 				default:
-					'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-				xs: "h-7 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: "h-9 gap-1.5 rounded-[min(var(--radius-md),12px)] px-3.5 text-[0.85rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
-				lg: 'h-11 gap-1.5 px-5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-				icon: 'size-10',
+					'h-(--ds-control-height-md) gap-1.5 px-(--ds-control-pad-md) has-data-[icon=inline-end]:pr-(--ds-control-pad-icon-md) has-data-[icon=inline-start]:pl-(--ds-control-pad-icon-md)',
+				xs: "h-(--ds-control-height-xs) gap-1 rounded-[min(var(--radius-md),10px)] px-(--ds-control-pad-xs) text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-(--ds-control-pad-icon-xs) has-data-[icon=inline-start]:pl-(--ds-control-pad-icon-xs) [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-(--ds-control-height-sm) gap-1.5 rounded-[min(var(--radius-md),12px)] px-(--ds-control-pad-sm) text-[0.85rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-(--ds-control-pad-icon-sm) has-data-[icon=inline-start]:pl-(--ds-control-pad-icon-sm) [&_svg:not([class*='size-'])]:size-4",
+				lg: 'h-(--ds-control-height-lg) gap-1.5 px-(--ds-control-pad-lg) has-data-[icon=inline-end]:pr-(--ds-control-pad-icon-lg) has-data-[icon=inline-start]:pl-(--ds-control-pad-icon-lg)',
+				icon: 'size-(--ds-control-height-md)',
 				'icon-xs':
-					"size-7 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+					"size-(--ds-control-height-xs) rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
 				'icon-sm':
-					'size-9 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-				'icon-lg': 'size-11'
+					'size-(--ds-control-height-sm) rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-(--ds-control-height-lg)'
 			}
 		},
 		defaultVariants: {

package/dist/components/ui/checkbox/checkbox.svelte CHANGED Viewed

@@ -13,13 +13,35 @@
 	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & { class?: string } = $props();
 </script>
+<!--
+  The box is 16px, which is what a checkbox has always looked like and is also
+  well under WCAG 2.5.8's 24px minimum target. The `::after` overlay is the
+  standard answer: a transparent skirt on every side takes the POINTER target to
+  a measured 29px without moving a pixel of the control, so the tick still sits where a
+  reader expects it and the row's rhythm is unchanged. `harness/drive.mjs`
+  measures that by walking outward from the centre until the hit test stops
+  returning this element, rather than by trusting the arithmetic here.
+  The inset is 2 rather than 1.5 for margin, not neatness: 1.5 measured 25px,
+  which clears the 24px floor at a 16px root and misses it at a 14px one — and
+  the floor is in absolute CSS pixels while the skirt is in rem. It stops 1px
+  short of a `gap-2` label, and a click that lands on the label toggles the box
+  through the label's own `for` anyway, so the enlarged area can never steal an
+  interaction from something else.
+  `data-indeterminate` paints the same fill as `data-checked`. It carried none
+  until now, so a tri-state checkbox rendered its dash in the FOREGROUND ink on
+  a transparent ground — the identical defect the `data-checked` mapping was
+  fixed for, one value along, and invisible for the same reason. See styles.css
+  §"The bits-ui `data-state` variants".
+-->
 <CheckboxPrimitive.Root
 	bind:ref
 	bind:checked
 	bind:indeterminate
 	data-slot="checkbox"
 	class={cn(
-		'peer border-border focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary size-4 shrink-0 rounded-sm border shadow-none transition-shadow focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		'peer border-border focus-visible:ring-ring data-checked:bg-primary data-checked:text-primary-foreground data-checked:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:border-primary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative size-4 shrink-0 rounded-sm border shadow-none transition-shadow after:absolute after:-inset-2 focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte CHANGED Viewed

@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-44 overflow-x-hidden overflow-y-auto rounded-lg border border-[--border-strong] p-1 whitespace-nowrap shadow-lg duration-100 outline-none data-closed:overflow-hidden',
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-44 overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong p-1 whitespace-nowrap shadow-lg duration-100 outline-none data-closed:overflow-hidden',
 			className
 		)}
 		{...restProps}

package/dist/components/ui/switch/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import Root from './switch.svelte';
-export { Root, Root as Switch };
+import Root, { type SwitchSize } from './switch.svelte';
+export { Root, Root as Switch, type SwitchSize };

package/dist/components/ui/switch/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import Root from './switch.svelte';
+import Root, {} from './switch.svelte';
 export { Root,
 //
 Root as Switch };

package/dist/components/ui/switch/switch.svelte CHANGED Viewed

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	/** The two track sizes. `sm` lines up with a `size="sm"` control row. */
+	export type SwitchSize = 'default' | 'sm';
+</script>
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
 	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
@@ -5,9 +10,23 @@
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
+		size = 'default',
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & { size?: SwitchSize } = $props();
+	// Track, thumb and travel are one decision, so they are one table rather
+	// than three prop reads at three call sites. The travel is not a picked
+	// number: the track carries a 2px transparent border, so the thumb's run is
+	// (width - 4) - thumb, which is 16px on the default and 12px on `sm`.
+	const TRACK = {
+		default: 'h-5 w-9',
+		sm: 'h-4 w-7'
+	} as const;
+	const THUMB = {
+		default: 'size-4 data-checked:translate-x-4',
+		sm: 'size-3 data-checked:translate-x-3'
+	} as const;
 </script>
 <!--
@@ -17,23 +36,37 @@
   ball stays light on the dark-first theme. The track colour comes from the
   project tokens. An app with a non-standard root font-size (a dense console
   running an 18px root, say) compensates in its own override layer, not here.
+  The track is 20px tall (16px at `sm`), under WCAG 2.5.8's 24px minimum, so a
+  transparent `::after` skirt lifts the pointer target over it. It grows the
+  BLOCK axis only: the track is already 36px wide, so there is nothing to win
+  horizontally and an inline skirt would reach into the label beside it.
+  The skirt is inset from the PADDING box, and this track carries a 2px
+  transparent border, so its real reach is the inset minus 2 on each side —
+  which is why the number here is not the number in the target. The target is
+  measured in `harness/drive.mjs`, not calculated.
 -->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	class={cn(
-		'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+		'peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+		'after:absolute after:inset-x-0 after:-inset-y-2',
 		'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+		'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-3',
 		'disabled:cursor-not-allowed disabled:opacity-50',
-		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+		'data-checked:bg-primary data-unchecked:bg-input',
+		TRACK[size],
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			'bg-background dark:bg-foreground pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform',
-			'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+			'bg-background dark:bg-foreground pointer-events-none block rounded-full shadow-lg ring-0 transition-transform',
+			'data-unchecked:translate-x-0',
+			THUMB[size]
 		)}
 	/>
 </SwitchPrimitive.Root>

package/dist/components/ui/switch/switch.svelte.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
+/** The two track sizes. `sm` lines up with a `size="sm"` control row. */
+export type SwitchSize = 'default' | 'sm';
 import { Switch as SwitchPrimitive } from 'bits-ui';
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+    size?: SwitchSize;
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/ui/tabs/tabs-trigger.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-active:bg-background dark:data-active:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:data-active:border-input dark:data-active:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/styles.css CHANGED Viewed

@@ -63,7 +63,7 @@
 @custom-variant dark (&:is(.dark *));
 /* ─────────────────────────────────────────────────────────────────────────────
-   The bits-ui open/closed variants.
+   The bits-ui `data-state` variants.
    Same defect as `dark` above, one attribute along. This package writes ~47
    `data-open:` / `data-closed:` utilities across the dialogue, alert-dialogue,
@@ -76,18 +76,58 @@
    matches — which is why four of the five adopting apps shipped with dead
    overlay transitions and none of them noticed.
-   Only these two need declaring. The other five shorthand data-variants this
-   package writes — `data-selected`, `data-highlighted`, `data-disabled`,
-   `data-placeholder` (bits-ui, all emitted as empty-string-or-undefined) and
-   `data-inset` (set by this package's own menu items) — are BARE attributes, so
-   Tailwind's default `&[data-x]` already matches them and a declaration here
-   would only restate it. `src/test/data-state-variants.test.ts` is what keeps
-   that distinction honest: it enumerates every shorthand data-variant the built
-   package ships and fails on any one whose compiled selector is not the
-   attribute the DOM actually carries, so a new unowned variant cannot ship.
+   `data-state` is ONE attribute carrying a dozen-odd values, and declaring two
+   of them left every other value as the same trap one value along.
+   `data-checked:` and `data-active:` compile to `&[data-checked]` /
+   `&[data-active]`, and bits-ui emits `data-state="checked"` and
+   `data-state="active"` — so a checked checkbox painted no fill and a selected
+   tab was indistinguishable from its neighbours, in exactly the silence
+   described above. Both were found in a consuming app, in a browser, months
+   after they shipped.
+   So the whole value set is declared, not the two that had already been
+   caught: `open`/`closed` (dialogue, menu, popover, tooltip, select),
+   `checked`/`unchecked`/`indeterminate` (checkbox, switch, menu checkbox item)
+   and `active`/`inactive` (tabs). That is a table with one rule — one
+   declaration per value bits-ui can put in `data-state` on a component this
+   package ships — rather than a growing list of exceptions, and it is the
+   whole point of fixing this at the mapping: the NEXT component to reach for
+   `data-checked:` gets a rule that matches instead of rediscovering this.
+   `data-active` is the one union, and it is not defensiveness. bits-ui emits
+   BOTH forms under that name: `data-state="active"` on a tabs trigger, and a
+   bare `data-active` on a navigation-menu link, a slider thumb and a pin-input
+   cell — and this package's own AppNav writes `data-active="true"` on every
+   nav row. A single-selector declaration would therefore have fixed tabs by
+   breaking the four surfaces that were already working. The other values have
+   no bare form in bits-ui 2.18.x, so they get one selector each.
+   `data-state="delayed-open"` (tooltip) and `data-state="selected"` (this
+   package's own table rows) keep the bracketed long form at their call sites
+   and get NO shorthand. `delayed-open` has no plausible shorthand spelling,
+   and `data-selected` is ALREADY a bare bits-ui attribute on menu and calendar
+   items — pointing that name at `[data-state='selected']` would take those
+   with it. Where a name means two things, the long form is what says which.
+   The remaining five shorthand data-variants this package writes —
+   `data-selected`, `data-highlighted`, `data-disabled`, `data-placeholder`
+   (bits-ui, all emitted as empty-string-or-undefined) and `data-inset` (set by
+   this package's own menu items) — are BARE attributes, so Tailwind's default
+   `&[data-x]` already matches them and a declaration here would only restate
+   it. `src/test/data-state-variants.test.ts` is what keeps that distinction
+   honest: it enumerates every shorthand data-variant the built package ships
+   and fails on any one whose compiled selector is not the attribute the DOM
+   actually carries, so a new unowned variant cannot ship. It also mounts a
+   real checkbox, switch and tab strip and reads the attributes back, so the
+   table above is pinned to bits-ui rather than to this paragraph.
    ───────────────────────────────────────────────────────────────────────────── */
 @custom-variant data-open (&[data-state='open']);
 @custom-variant data-closed (&[data-state='closed']);
+@custom-variant data-checked (&[data-state='checked']);
+@custom-variant data-unchecked (&[data-state='unchecked']);
+@custom-variant data-indeterminate (&[data-state='indeterminate']);
+@custom-variant data-active (&[data-state='active'], &[data-active]);
+@custom-variant data-inactive (&[data-state='inactive']);
 /* ─────────────────────────────────────────────────────────────────────────────
    The shadcn semantic surface.
@@ -312,6 +352,87 @@
 	--ds-shell-measure-wide: 120rem;
 }
+/* ─────────────────────────────────────────────────────────────────────────────
+   Control geometry — the density option.
+   Button's height and inline padding, as tokens rather than the hard-coded
+   `h-10` / `px-4` they were. No token could reach those classes, so an app
+   wanting a denser control scale had exactly one move available: fork the
+   component. One did, and it cost six directories — `button`, `dialog`,
+   `alert-dialog`, `command`, `input-group` and `form` all stayed vendored
+   there, five of them byte-identical to this package's but for which Button
+   they import. That is the whole defect: a geometry decision with no knob
+   turns into a fork of everything downstream of it.
+   The values below reproduce the previous hard-coded classes EXACTLY (2.5rem
+   is h-10, 1rem is px-4, and so on down the ramp), so a consumer that names
+   nothing renders to the same pixel. `harness/additivity.mjs` is what proves
+   that rather than this sentence.
+   An app does not set these by hand. It names a density on any ancestor —
+   ordinarily `<html>` — and the preset moves the whole ramp:
+       <html data-ds-density="compact">
+   Two named values, `comfortable` (the default) and `compact`, and the
+   attribute is honoured wherever it appears, so a single dense toolbar can
+   carry it without the page doing so. Hand-tuning a rung stays possible for
+   the app that must, but it is a deviation rather than the affordance: the
+   sanctioned move is choosing a named density, exactly as choosing a palette
+   rather than a hex value is the sanctioned move for colour.
+   `compact` is not a picked number. This package's Input already renders at
+   `h-8` and its Select trigger at `h-8`/`h-7`, so a default-size Button next
+   to an Input has been 8px taller than it for as long as both have shipped.
+   The compact ramp lands `md` on 2rem and `sm` on 1.75rem — the input and the
+   select trigger exactly — so the density an app was hand-pinning on 75 call
+   sites is the one that makes a form row line up.
+   `comfortable` shares the `:root` selector rather than restating the ramp;
+   it is there so a subtree can opt back OUT of a compact page. Both density
+   rules carry the same specificity as `:root` and are declared after it, so a
+   page-level attribute wins, and they declare on the element that carries the
+   attribute rather than at `:root`, so a scoped one reaches only its subtree.
+   ───────────────────────────────────────────────────────────────────────────── */
+:root,
+[data-ds-density='comfortable'] {
+	--ds-control-height-xs: 1.75rem;
+	--ds-control-height-sm: 2.25rem;
+	--ds-control-height-md: 2.5rem;
+	--ds-control-height-lg: 2.75rem;
+	--ds-control-pad-xs: 0.625rem;
+	--ds-control-pad-sm: 0.875rem;
+	--ds-control-pad-md: 1rem;
+	--ds-control-pad-lg: 1.25rem;
+	/* The inline padding on an edge an icon sits against: an icon is already
+	   optical whitespace, so it needs less room beside it than a glyph does. A
+	   separate rung rather than a subtraction from the pad above, because the
+	   trim is not one ratio — sm gives back 0.375rem where md gives back
+	   0.25rem — and folding it into a calc would have changed sm for every
+	   consumer to buy a shorter table. */
+	--ds-control-pad-icon-xs: 0.375rem;
+	--ds-control-pad-icon-sm: 0.5rem;
+	--ds-control-pad-icon-md: 0.75rem;
+	--ds-control-pad-icon-lg: 0.75rem;
+}
+[data-ds-density='compact'] {
+	--ds-control-height-xs: 1.5rem;
+	--ds-control-height-sm: 1.75rem;
+	--ds-control-height-md: 2rem;
+	--ds-control-height-lg: 2.25rem;
+	--ds-control-pad-xs: 0.5rem;
+	--ds-control-pad-sm: 0.625rem;
+	--ds-control-pad-md: 0.75rem;
+	--ds-control-pad-lg: 1rem;
+	--ds-control-pad-icon-xs: 0.25rem;
+	--ds-control-pad-icon-sm: 0.375rem;
+	--ds-control-pad-icon-md: 0.5rem;
+	--ds-control-pad-icon-lg: 0.625rem;
+}
 @layer base {
 	/**
 	 * The milled edge. Cards read as having depth from a hairline border plus a

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@poodle64/ui",
-  "version": "2026.8.17",
+  "version": "2026.9.1",
   "description": "Household shared component layer: shadcn-svelte primitives (bits-ui) plus the composed page chrome every app builds its routes from, restyled by each app's @poodle64/design-tokens alias layer. One fix reaches every app.",
   "type": "module",
   "license": "MIT",
@@ -10,6 +10,7 @@
     "access": "public"
   },
   "files": [
+    "bin",
     "dist",
     "registry"
   ],
@@ -29,6 +30,9 @@
       "svelte": "./dist/components/ui/*/index.js"
     }
   },
+  "bin": {
+    "ds-check-colour-surface": "./bin/check-colour-surface.mjs"
+  },
   "peerDependencies": {
     "bits-ui": "^2.18.1",
     "formsnap": "^2.0.1",

package/registry/component-map.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.8.17",
+		"version": "2026.9.1",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 55,

package/registry/component-map.md CHANGED Viewed

@@ -1,7 +1,7 @@
 # @poodle64/ui — situation → component map
 <!-- GENERATED by scripts/generate-registry.mjs from scripts/situations.json + package source. DO NOT EDIT. -->
-Generated from `@poodle64/ui@2026.8.17`. 55 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.1`. 55 components, 15 situations.
 **Read this before writing a `<div>`.** Find the SITUATION you are in below, then compose the component named for it — do not hand-build it from raw `Card` or utility classes. Import is `import { Name } from '<import path>'`. Props marked `?` are optional. This map is the retrieval step the [`frontend-design` skill] makes mandatory; the [CHI 2026 study] measured composing-from-a-registry at 95% design-system compliance against 71% for writing the CSS from a prose style guide.