@heyramzi/ui 1.53.1 → 1.54.1

package/COMPONENTS.md

@@ -71,7 +71,13 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `mark` — Mark, a logo or photo glyph with an initial fallback
 - `open-in` — OpenIn, a link out to a tool that takes the tool's name, label and mark as a prop
 - `picker` — Picker, MarkPicker, pickerTriggerClass, a command palette at popover scale
+- `docs` — DocPage, OnThisPage, ScrollSpy: one page anatomy for documentation, an icon, title and summary header, a reading column and a contents rail that becomes a bar on a narrow pane
+- `section-card` — SectionCard, a card with a fixed-height header, an h3 title, optional actions and a line under it
+- `section-header` — SectionHeader, a section label with a count chip, a line of description and actions
+- `field-row` — FieldRow, a labelled control with its action button at the control's height
+- `table-view` — TableView, a read-only table from columns and rows: numeric columns, footer row, custom cell
 - `segmented` — AnimatedTabs (pill or underline), SegmentedFilter, SegmentedNav, SectionRuns, one bordered track with a sliding pill, a badge note and an overflow menu
+- `theme` — ThemeProvider, mode, userPrefersMode, setMode, toggleMode, resetMode: the one light and dark system (mode-watcher, optional peer). Mount `<ThemeProvider initial onChange themeColors modeStorageKey />` once; flip with `toggleMode()`, read `mode.current`. Pair with `theme-toggle`'s `revealTheme(event, toggleMode)` for the wipe
 - `star-rating-input` — StarRatingInput
 - `svg` — Svg, an SVG file imported with `?raw`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "1.53.1",
+  "version": "1.54.1",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
-    "./tokens.css": "./src/tokens.css",
+    "./tokens.css": "./src/tokens/index.css",
     "./lib/*.js": {
       "svelte": "./src/lib/*.ts",
       "types": "./src/lib/*.ts",

package/src/agents/agent-avatar.svelte

@@ -8,7 +8,7 @@
   import type { AgentAvatarProps } from './types.js';
   import { botAvatarPresets, stateLabels } from './vendor/presets.js';
   import { SHAPE_PATHS, SHAPE_PARTS } from './vendor/shapes.js';
-  import { autoInk, richer, shade } from './vendor/color.js';
+  import { richer, shade } from './vendor/color.js';
   import { Sim, restPose } from './vendor/engine.js';
   import { draw, LIGHT_DEFAULTS, OVERSCAN, RISE, type DrawConfig } from './vendor/draw.js';
   import { bakesPending, hurry, onLanded, takeMissed, warmPlastic, type FurStyle } from './vendor/plastic.js';
@@ -27,6 +27,7 @@
     clampOpt,
     deviceDpr,
     hashSeed,
+    inkFor,
     lightsFor,
     pointerStrength,
     q,
@@ -138,7 +139,7 @@
       vivid,
     ),
   );
-  const inkColor = $derived(ink ?? autoInk(body));
+  const inkColor = $derived(ink ?? inkFor(body));
   const seedValue = $derived(Math.min(1, Math.max(0, seed ?? hashSeed(uid))));
   const stateKey = $derived((botState in stateLabels ? botState : 'default') as BotAvatarState);
   const frozen = $derived(paused || !(speed > 0));

package/src/agents/helpers.ts

@@ -1,6 +1,15 @@
 /* Pure helpers for the avatar: numbers, theme, lights, idle scheduling. */
+import { DARK_INK, LIGHT_INK, luminance } from './vendor/color.js';
 import { stockLights } from './vendor/plastic.js';
 
+const contrast = (a: number, b: number) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+
+/** Off-black or off-white eyes, whichever reads stronger on the body: the vendor's fixed cutoff left 2:1 eyes on mid blues. */
+export function inkFor(body: string): string {
+  const l = luminance(body);
+  return contrast(l, luminance(DARK_INK)) >= contrast(l, luminance(LIGHT_INK)) ? DARK_INK : LIGHT_INK;
+}
+
 export const clamp = (v: number, lo: number, hi: number) =>
   Math.min(hi, Math.max(lo, Number.isFinite(v) ? v : 1));
 export const q = (v: number, lo: number, hi: number) => Math.round(clamp(v, lo, hi) * 20) / 20;

package/src/components/data-table/sortable-head.svelte

@@ -50,7 +50,7 @@ function handleKeydown(e: KeyboardEvent) {
 		{:else if direction === "desc"}
 			<CaretDown class="size-3.5 text-foreground" weight="bold" />
 		{:else}
-			<CaretUpDown class="size-3.5 text-muted-foreground/50" />
+			<CaretUpDown class="size-3.5 text-muted-foreground/75" />
 		{/if}
 	</span>
 </th>

package/src/components/docs/doc-page.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Component, Snippet } from "svelte";
+	import OnThisPage from "./on-this-page.svelte";
+	import {
+		ScrollSpy,
+		type DocHeading,
+		type LocateHeading,
+	} from "./scroll-spy.svelte.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** One line under the title. Optional: a page with nothing to add leaves it out. */
+		summary?: string;
+		icon?: Component<{ class?: string; weight?: "bold" }>;
+		/** Where the page lives, as a reader would say it: "Marketing / Reports". */
+		section?: string;
+		/** Already worded and localised: "Updated 30 Jul 2026". */
+		updated?: string;
+		/** Room at the right of the title for a page's own controls. */
+		actions?: Snippet;
+		/** The document's h2s, which the contents rail walks. Under two, there's no rail. */
+		headings?: DocHeading[];
+		/** The rail's name: "On this page". */
+		contentsLabel: string;
+		/** Supplied by a document that lives in a frame; the default reads the DOM by id. */
+		locate?: LocateHeading;
+		/** Changes when the page is swapped without navigation, so the pane returns to the top. */
+		resetKey?: string;
+		/** The reading column's width. `wide` is for a document that brings tables and boards. */
+		measure?: "prose" | "wide";
+		/** The scroll box, for a document that has to place things inside it. */
+		scroller?: HTMLElement | null;
+		children: Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title,
+		summary,
+		icon: Icon,
+		section,
+		updated,
+		actions,
+		headings = [],
+		contentsLabel,
+		locate,
+		resetKey,
+		measure = "prose",
+		scroller = $bindable(null),
+		children,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	const spy = new ScrollSpy();
+
+	// DERIVED
+	let hasRail = $derived(headings.length > 1);
+	let meta = $derived([section, updated].filter(Boolean) as string[]);
+
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => spy.attach(scroller, headings, locate));
+
+	$effect(() => {
+		void resetKey;
+		scroller?.scrollTo({ top: 0 });
+	});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- The anatomy, once: header, then the reading column with its contents rail.
+     A surface supplies content and never lays this out, so two pages can't
+     arrive with different layouts. The pane is its own container, since the
+     room left after the map is what decides the rail, not the window. -->
+<div
+	bind:this={scroller}
+	class="doc-page @container/page thin-scrollbar relative min-h-0 flex-1 overflow-y-auto"
+>
+	{#if hasRail}
+		<!-- Below the rail's width the contents sit on a strip that stays put. -->
+		<div class="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur @3xl/page:hidden">
+			<OnThisPage
+				variant="bar"
+				items={headings}
+				active={spy.active}
+				label={contentsLabel}
+				onselect={(id) => spy.jump(id)}
+			/>
+		</div>
+	{/if}
+
+	<div
+		class="mx-auto flex w-full gap-10 px-5 @2xl/page:px-8 {measure === 'wide'
+			? 'max-w-[84rem]'
+			: 'max-w-[68rem]'}"
+	>
+		<article class="min-w-0 flex-1 pb-20 pt-8 @2xl/page:pt-10">
+			<header class="mb-8 border-b border-border pb-6">
+				<div class="flex items-start gap-4">
+					{#if Icon}
+						<span
+							class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-brand-indigo dark:bg-indigo-800/30 dark:text-brand-indigo-light"
+						>
+							<Icon class="size-5" weight="bold" />
+						</span>
+					{/if}
+					<div class="min-w-0 flex-1">
+						<h1
+							class="font-heading text-2xl font-semibold leading-tight tracking-tight text-balance text-foreground @2xl/page:text-[1.75rem]"
+						>
+							{title}
+						</h1>
+						{#if summary}
+							<p class="mt-1.5 max-w-[60ch] text-[15px] leading-relaxed text-muted-foreground text-pretty">
+								{summary}
+							</p>
+						{/if}
+						{#if meta.length > 0}
+							<p class="mt-3 flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground">
+								{#each meta as item, i (item)}
+									{#if i > 0}<span aria-hidden="true" class="size-0.5 rounded-full bg-current opacity-50"></span>{/if}
+									<span>{item}</span>
+								{/each}
+							</p>
+						{/if}
+					</div>
+					{#if actions}
+						<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+					{/if}
+				</div>
+			</header>
+
+			{@render children()}
+		</article>
+
+		{#if hasRail}
+			<!-- `self-start`, since a sticky child only travels inside its own box. -->
+			<aside class="hidden w-48 shrink-0 self-start pt-10 @3xl/page:sticky @3xl/page:top-0 @3xl/page:block">
+				<OnThisPage
+					items={headings}
+					active={spy.active}
+					label={contentsLabel}
+					onselect={(id) => spy.jump(id)}
+				/>
+			</aside>
+		{/if}
+	</div>
+</div>

package/src/components/docs/index.ts

@@ -0,0 +1,12 @@
+/**
+ * The documentation anatomy: one page component and the contents rail inside it.
+ * A surface supplies a title and a body, and never lays a document out itself.
+ */
+export { default as DocPage } from "./doc-page.svelte";
+export { default as OnThisPage } from "./on-this-page.svelte";
+export {
+  ScrollSpy,
+  READ_LINE,
+  type DocHeading,
+  type LocateHeading,
+} from "./scroll-spy.svelte.js";

package/src/components/docs/on-this-page.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { tick } from "svelte";
+	import { CaretDown, List } from "phosphor-svelte";
+	import type { DocHeading } from "./scroll-spy.svelte.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		items: DocHeading[];
+		/** The id the reader is in. */
+		active: string;
+		/** What the rail is called: "On this page". Passed in so the library holds no copy. */
+		label: string;
+		onselect: (id: string) => void;
+		/**
+		 * `rail` is the column beside the document. `bar` is the strip that takes
+		 * its place on a narrow pane: it names where you are and opens the list.
+		 */
+		variant?: "rail" | "bar";
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { items, active, label, onselect, variant = "rail" }: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let list = $state<HTMLElement | null>(null);
+	let open = $state(false);
+	let marker = $state({ y: 0, h: 0, ready: false });
+	// Plain, not state: the effect below writes `marker`, so it can't also read it.
+	let placed = false;
+	let scrollBox = $state<HTMLElement | null>(null);
+	let overflowing = $state(false);
+
+	// =========================
+	// DERIVED
+	// =========================
+	let activeIndex = $derived(Math.max(0, items.findIndex((item) => item.id === active)));
+	let activeLabel = $derived(items.find((item) => item.id === active)?.label ?? items[0]?.label ?? "");
+	// How far through the document: the bar's hairline, and the number a reader
+	// reads at a glance.
+	let progress = $derived(items.length > 1 ? activeIndex / (items.length - 1) : 0);
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// One marker that slides to the active row, rather than a border that blinks
+	// from one row to the next.
+	$effect(() => {
+		void active;
+		void items;
+		if (variant !== "rail" || !list) return;
+		overflowing = !!scrollBox && scrollBox.scrollHeight > scrollBox.clientHeight + 1;
+		const row = list.querySelector<HTMLElement>("[data-current='true']");
+		if (!row) return;
+		const y = row.offsetTop;
+		const h = row.offsetHeight;
+		// First placement lands with no slide, or it would glide in from the top.
+		const wasPlaced = placed;
+		placed = true;
+		marker = { y, h, ready: wasPlaced };
+		if (!wasPlaced) return;
+		// A long list scrolls inside the rail, so keep the current row in view.
+		const box = list.parentElement;
+		if (box && (y < box.scrollTop || y + h > box.scrollTop + box.clientHeight)) {
+			box.scrollTo({ top: y - box.clientHeight / 2, behavior: "auto" });
+		}
+	});
+
+	function pick(id: string) {
+		open = false;
+		onselect(id);
+		void tick();
+	}
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.key === "Escape") open = false;
+	}}
+	onpointerdown={(event) => {
+		if (!open) return;
+		if (!(event.target as HTMLElement).closest("[data-otp-bar]")) open = false;
+	}}
+/>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if variant === "rail"}
+	<nav aria-label={label} class="flex max-h-[calc(100svh-8rem)] flex-col gap-3">
+		<!-- Set like the map's own headings on the left, so the two rails read as one. -->
+		<p class="font-heading text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+			{label}
+		</p>
+		<div
+			bind:this={scrollBox}
+			class="thin-scrollbar -mr-2 min-h-0 overflow-y-auto pr-2"
+			class:otp-fade={overflowing}
+		>
+			<div bind:this={list} class="relative border-l border-border">
+				<!-- The marker sits on the track's own line, so the active row reads as
+				     the part of the line you're standing on. -->
+				<span
+					aria-hidden="true"
+					class="otp-marker absolute -left-px top-0 w-0.5 rounded-full bg-brand-indigo dark:bg-brand-indigo-light"
+					class:is-ready={marker.ready}
+					style="transform: translateY({marker.y}px); height: {marker.h}px;"
+				></span>
+				<ul class="flex flex-col">
+					{#each items as item (item.id)}
+						{@const current = item.id === active}
+						<li>
+							<button
+								type="button"
+								data-current={current}
+								aria-current={current ? "location" : undefined}
+								onclick={() => pick(item.id)}
+								class="otp-row block w-full py-1.5 pl-3 pr-1 text-left text-[13px] leading-snug transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] any-pointer-coarse:py-2.5 {current
+									? 'font-medium text-foreground'
+									: 'text-muted-foreground hover:text-foreground'}"
+							>
+								{item.label}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+	</nav>
+{:else}
+	<div data-otp-bar class="relative">
+		<button
+			type="button"
+			aria-expanded={open}
+			aria-label={label}
+			onclick={() => (open = !open)}
+			class="flex h-11 w-full items-center gap-2.5 px-4 text-left transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-muted/50"
+		>
+			<List size={16} class="shrink-0 text-muted-foreground" aria-hidden="true" />
+			<span class="shrink-0 text-xs font-medium text-muted-foreground">{label}</span>
+			<span class="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{activeLabel}</span>
+			<CaretDown
+				size={14}
+				class="shrink-0 text-muted-foreground transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] {open
+					? 'rotate-180'
+					: ''}"
+			/>
+		</button>
+		<!-- How far through the reader is. The only motion here, and it is the state. -->
+		<span aria-hidden="true" class="absolute inset-x-0 bottom-0 h-px bg-border">
+			<span
+				class="otp-progress block h-full origin-left bg-brand-indigo dark:bg-brand-indigo-light"
+				style="transform: scaleX({progress});"
+			></span>
+		</span>
+
+		{#if open}
+			<nav
+				aria-label={label}
+				class="thin-scrollbar absolute inset-x-2 top-full z-20 mt-1 max-h-[60svh] overflow-y-auto rounded-xl border border-border bg-popover p-1.5 shadow-lg"
+			>
+				<ul class="flex flex-col">
+					{#each items as item (item.id)}
+						{@const current = item.id === active}
+						<li>
+							<button
+								type="button"
+								aria-current={current ? "location" : undefined}
+								onclick={() => pick(item.id)}
+								class="block w-full rounded-lg px-3 py-2.5 text-left text-sm leading-snug transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] {current
+									? 'bg-muted font-medium text-foreground'
+									: 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'}"
+							>
+								{item.label}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+		{/if}
+	</div>
+{/if}
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	.otp-marker.is-ready {
+		transition:
+			transform var(--duration-medium) var(--ease-smooth-out),
+			height var(--duration-medium) var(--ease-smooth-out);
+	}
+
+	.otp-progress {
+		transition: transform var(--duration-medium) var(--ease-smooth-out);
+	}
+
+	/* A long list fades into its edges instead of ending on a hard cut. */
+	.otp-fade {
+		mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 1.5rem), transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.otp-marker.is-ready,
+		.otp-progress {
+			transition: none;
+		}
+	}
+</style>

package/src/components/docs/scroll-spy.svelte.ts

@@ -0,0 +1,97 @@
+/**
+ * Which heading the reader is in, for a box that scrolls. One spy feeds the
+ * side rail and the compact bar, so the two can never disagree.
+ */
+
+export type DocHeading = { id: string; label: string };
+
+/**
+ * Where a heading sits inside the scroller, in scroller content coordinates.
+ * The default reads the live DOM by id. A framed document supplies its own,
+ * since its headings live in another document.
+ */
+export type LocateHeading = (id: string) => number | null;
+
+/** How far below the scroller's top edge a heading counts as "reached" and lands. */
+export const READ_LINE = 80;
+
+export class ScrollSpy {
+  active = $state("");
+
+  #scroller: HTMLElement | null = null;
+  #items: DocHeading[] = [];
+  #locate: LocateHeading | undefined;
+  #frame = 0;
+
+  /** Point the spy at a scroller and a list. Returns the cleanup. */
+  attach(scroller: HTMLElement | null, items: DocHeading[], locate?: LocateHeading) {
+    this.#scroller = scroller;
+    this.#items = items;
+    this.#locate = locate;
+    if (!scroller || items.length === 0) {
+      this.active = "";
+      return () => {};
+    }
+
+    const schedule = () => {
+      this.#frame ||= requestAnimationFrame(() => {
+        this.#frame = 0;
+        this.update();
+      });
+    };
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    const observer = new ResizeObserver(schedule);
+    observer.observe(scroller);
+    // A document that grows after load (a diagram, a chart) moves every
+    // heading below it, so watch the content too.
+    for (const child of scroller.children) observer.observe(child);
+    this.update();
+
+    return () => {
+      scroller.removeEventListener("scroll", schedule);
+      observer.disconnect();
+      if (this.#frame) cancelAnimationFrame(this.#frame);
+      this.#frame = 0;
+    };
+  }
+
+  topOf(id: string): number | null {
+    const scroller = this.#scroller;
+    if (!scroller) return null;
+    if (this.#locate) return this.#locate(id);
+    const el = scroller.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+    if (!el) return null;
+    return (
+      el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
+    );
+  }
+
+  update() {
+    const scroller = this.#scroller;
+    if (!scroller || this.#items.length === 0) return;
+    // At the very bottom the last heading wins, or a short final section could
+    // never be the current one.
+    const atEnd = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
+    if (atEnd && scroller.scrollTop > 0) {
+      this.active = this.#items[this.#items.length - 1].id;
+      return;
+    }
+    const line = scroller.scrollTop + READ_LINE + 1;
+    let current = this.#items[0].id;
+    for (const item of this.#items) {
+      const top = this.topOf(item.id);
+      if (top !== null && top <= line) current = item.id;
+    }
+    this.active = current;
+  }
+
+  /** Scroll so the heading lands on the read line, instant under reduced motion. */
+  jump(id: string) {
+    const scroller = this.#scroller;
+    const top = this.topOf(id);
+    if (!scroller || top === null) return;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    this.active = id;
+    scroller.scrollTo({ top: Math.max(0, top - READ_LINE), behavior: reduced ? "auto" : "smooth" });
+  }
+}

package/src/components/field-row/field-row.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "@heyramzi/utils";
+	import * as Field from "../../shadcn/field/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		label: string;
+		/** Id of the control, so the label focuses it. */
+		for: string;
+		description?: string;
+		error?: string;
+		class?: string;
+		/** The control: an Input, a Select trigger. It takes the width the action leaves. */
+		children: Snippet;
+		/** The button that acts on the control. Same height as the control, bottom of the row. */
+		action?: Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { label, for: htmlFor, description, error, class: className, children, action }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- WHY a measure of its own: a settings card fills the page, but a text field
+     stretched over 1200px is hard to read and to aim at. 36rem, left aligned. -->
+<!-- WHY the coarse-pointer height: Button grows to 44px on touch and Input
+     does not, so a row built from the two drew a 12px step. -->
+<!-- =========================== -->
+<Field.Simple
+	{label}
+	{description}
+	{error}
+	for={htmlFor}
+	class={cn("max-w-xl", className)}
+>
+	<div
+		class="flex items-start gap-2 any-pointer-coarse:[&_[data-slot=input]]:h-11"
+		data-slot="field-row"
+	>
+		<div class="min-w-0 flex-1">{@render children()}</div>
+		{#if action}
+			<!-- A disabled action reads as a muted button, not a half-faded one. -->
+			<div
+				class="shrink-0 [&_button:disabled]:bg-muted [&_button:disabled]:text-muted-foreground [&_button:disabled]:opacity-100 [&_button:disabled]:shadow-none"
+			>
+				{@render action()}
+			</div>
+		{/if}
+	</div>
+</Field.Simple>

package/src/components/field-row/index.ts

@@ -0,0 +1 @@
+export { default as FieldRow } from "./field-row.svelte";

package/src/components/list-page/toolbar-search.svelte

@@ -57,7 +57,7 @@ let {
 		class={cn(
 			"w-full",
 			size === "sm" ? "h-7 pl-7 pr-2.5 text-xs" : "h-7 pl-7 pr-2.5 text-xs",
-			"any-pointer-coarse:h-10 any-pointer-coarse:text-base",
+			"any-pointer-coarse:h-11 any-pointer-coarse:text-base",
 		)}
 	/>
 </div>

package/src/components/list-page/toolbar-trigger.ts

@@ -16,7 +16,7 @@ export function toolbarTriggerClass({
 }: ToolbarTriggerOpts = {}): string {
   return cn(
     "inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium transition-colors active:translate-y-px",
-    "h-7 px-2.5 text-xs any-pointer-coarse:h-10 any-pointer-coarse:px-3",
+    "h-7 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3",
     active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
     className,
   );

package/src/components/picker/trigger.ts

@@ -25,8 +25,8 @@ export const pickerTriggerClass = tv({
     // Heights match `segmentedTrackClass`, so a strip and a picker line up.
     // Padding is 6px leading, 10px trailing: an even 8px shunted icon rows right.
     size: {
-      sm: "h-6 ps-1.5 pe-2 any-pointer-coarse:h-9 any-pointer-coarse:pe-2.5",
-      default: "h-7 ps-1.5 pe-2.5 any-pointer-coarse:h-10",
+      sm: "h-6 ps-1.5 pe-2 any-pointer-coarse:h-11 any-pointer-coarse:pe-2.5",
+      default: "h-7 ps-1.5 pe-2.5 any-pointer-coarse:h-11",
     },
     /**
      * Fill the row. Off by default: Linear's property rows sit at natural width

package/src/components/section-card/index.ts

@@ -0,0 +1 @@
+export { default as SectionCard } from "./section-card.svelte";