@poodle64/ui 2026.10.10 → 2026.10.12

package/dist/components/ui/app-dialog/app-dialog.svelte

@@ -81,7 +81,7 @@
 				</span>
 			{/if}
 			<div class="min-w-0 flex-1">
-				<Dialog.Title class="font-display text-lg leading-tight font-semibold tracking-tight"
+				<Dialog.Title class="font-display text-lg leading-tight font-semibold tracking-[var(--ds-font-display-tracking,-0.025em)]"
 					>{title}</Dialog.Title
 				>
 				{#if subtitle}

package/dist/components/ui/app-shell/app-shell.svelte

@@ -457,7 +457,7 @@
 					slot to re-earn a behaviour the shell could give everyone is the shell
 					failing to ship something good.
 				-->
-				<span class="font-display text-body hidden font-semibold tracking-tight sm:inline"
+				<span class="font-display text-body hidden font-semibold tracking-[var(--ds-font-display-tracking,-0.025em)] sm:inline"
 					>{brandTitle}</span
 				>
 			{/if}
@@ -701,8 +701,11 @@
 					data-testid="ds-shell-location"
 				>
 					{#if location}
-						<span class="text-shell-muted-foreground max-w-48 flex-none truncate text-sm"
-							>{location}</span
+						<span
+							class={cn(
+								'text-shell-muted-foreground max-w-48 flex-none truncate text-sm',
+								controls.content && 'max-sm:hidden'
+							)}>{location}</span
 						>
 					{/if}
 					{#if controls.content}{@render controls.content()}{/if}

package/dist/components/ui/list-shell/list-shell.svelte

@@ -62,7 +62,7 @@
 		{...restProps}
 	>
 		<div class="flex flex-none items-center gap-2 px-5 pt-5 pb-3">
-			<h2 class="font-display text-display flex-1 truncate font-semibold tracking-tight">
+			<h2 class="font-display text-display flex-1 truncate font-semibold tracking-[var(--ds-font-display-tracking,-0.025em)]">
 				{title}
 			</h2>
 			{#if actions}{@render actions()}{/if}

package/dist/components/ui/page-canvas/page-canvas.svelte

@@ -332,7 +332,7 @@
 						<ChevronLeft class="size-4" />
 					</Button>
 					<span class="text-foreground min-w-16 text-center text-xs font-medium tabular-nums">
-						{currentPage} / {pageCount}
+						{currentPage} of {pageCount}
 					</span>
 					<Button
 						variant="outline"
@@ -355,7 +355,7 @@
 				<Minus class="size-4" />
 			</Button>
 			<span class="text-foreground min-w-11 text-center text-xs font-medium tabular-nums">
-				{Math.round(zoom * 100)}%
+				{zoom === 1 ? 'Fit' : `${Math.round(zoom * 100)}%`}
 			</span>
 			<Button variant="outline" size="icon" class="size-8" onclick={zoomIn} aria-label="Zoom in">
 				<Plus class="size-4" />

package/dist/components/ui/page-header/page-header.svelte

@@ -95,7 +95,7 @@
 			{/if}
 			{#if title}
 				<div class="flex items-center gap-2">
-					<h1 class="font-display text-display leading-tight font-semibold tracking-[-0.02em]">
+					<h1 class="font-display text-display leading-tight font-semibold tracking-[var(--ds-font-display-tracking,-0.02em)]">
 						{title}
 					</h1>
 					{#if info}

package/dist/components/ui/record-switcher/record-switcher.svelte

@@ -4,7 +4,9 @@
 	 * with its chevron inside, after the section's name. Its menu finds a
 	 * record by name, lists them under their headings (owned, then sold) with
 	 * a thumbnail each, and ends with the way to all of them, so it still
-	 * works at fifty. The record's own pages follow as tabs.
+	 * works at fifty. The record's own pages follow as tabs. On a phone the
+	 * breadcrumb (the section's name and the "/") gives way, and the tabs scroll
+	 * sideways inside the row, so every page stays reachable.
 	 *
 	 * It places nothing itself: put it inside `ShellControls` with whatever
 	 * else the page sets in the bar.
@@ -81,7 +83,7 @@
 </script>
 
 <div class={cn('flex min-w-0 items-center gap-2 sm:gap-3', className)} data-slot="record-switcher">
-	{#if separator}<span class="text-shell-muted-foreground flex-none" aria-hidden="true">/</span>{/if}
+	{#if separator}<span class="text-shell-muted-foreground flex-none max-sm:hidden" aria-hidden="true">/</span>{/if}
 	<Popover.Root bind:open onOpenChange={(o) => o && (highlighted = here())}>
 		<Popover.Trigger
 			class={cn(
@@ -147,13 +149,16 @@
 	</Popover.Root>
 
 	{#if pages.length}
-		<nav aria-label="Pages of {name}" class="ml-1 flex items-stretch gap-1 self-stretch sm:ml-3">
+		<nav
+			aria-label="Pages of {name}"
+			class="ml-1 flex min-w-0 items-stretch gap-1 self-stretch overflow-x-auto sm:ml-3"
+		>
 			{#each pages as p (p.href)}
 				<a
 					href={p.href}
 					aria-current={p.current ? 'page' : undefined}
 					class={cn(
-						'flex items-center border-b-2 px-2 text-sm transition-colors sm:px-3',
+						'flex flex-none items-center border-b-2 px-2 text-sm transition-colors sm:px-3',
 						p.current
 							? 'border-primary text-foreground font-semibold'
 							: 'text-muted-foreground hover:text-foreground border-transparent'

package/dist/components/ui/stat-list/stat-list.svelte

@@ -67,7 +67,7 @@
 					{/if}
 					<span
 						class="ds-tabular text-stat font-mono leading-none font-semibold {item.muted
-							? 'text-muted-foreground/60'
+							? 'text-muted-foreground'
 							: ''}">{item.value}</span
 					>
 					{#if item.sub}

package/dist/styles.css

@@ -446,6 +446,19 @@
 			var(--ds-shadow-sm);
 	}
 
+	/**
+	 * How the display face is set. An app says it once in its palette
+	 * (`--ds-font-display-transform: uppercase; --ds-font-display-tracking:
+	 * 0.04em`) and every place the factory sets --ds-font-display follows: this
+	 * rule for `.font-display`, the components' own tracking, .ds-prose and the
+	 * librarian's markdown. Unset, each falls back to `inherit`, which is what the
+	 * property did before, so an app that sets neither renders as it always did.
+	 */
+	.font-display {
+		text-transform: var(--ds-font-display-transform, inherit);
+		letter-spacing: var(--ds-font-display-tracking, inherit);
+	}
+
 	/** Tabular figures, so a column of numbers aligns. */
 	.ds-tabular {
 		font-variant-numeric: tabular-nums;
@@ -737,7 +750,7 @@
 		   form. The literal keeps this rule correct on its own; the var keeps an
 		   app's override flowing through. */
 		letter-spacing: var(--tracking-eyebrow, 0.06em);
-		color: color-mix(in oklch, var(--ds-nav-ink-muted) 70%, transparent);
+		color: var(--ds-nav-ink-muted);
 	}
 
 	/* A count badge is small text on a tint, so it carries the 4.5:1 text floor
@@ -1144,6 +1157,8 @@
 	.ds-prose h3,
 	.ds-prose h4 {
 		font-family: var(--ds-font-display);
+		text-transform: var(--ds-font-display-transform, inherit);
+		letter-spacing: var(--ds-font-display-tracking, inherit);
 		font-weight: 600;
 		line-height: 1.25;
 		margin-block: var(--ds-spacing-lg) var(--ds-spacing-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.10.10",
+	"version": "2026.10.12",
 	"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

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

package/registry/component-map.md

@@ -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.10.10`. 68 components, 19 situations.
+Generated from `@poodle64/ui@2026.10.12`. 68 components, 19 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.