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

@poodle64/ui 2026.8.17 → 2026.9.0

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 (13) hide show

package/README.md +67 -3
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 +1 -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

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.0",
   "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",

package/registry/component-map.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.8.17",
+		"version": "2026.9.0",
 		"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.0`. 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.