@heyramzi/ui 1.53.1 → 1.54.1

package/src/components/section-card/section-card.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "@heyramzi/utils";
+	import * as Card from "../../shadcn/card/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** Controls at the far end of the header. */
+		actions?: Snippet;
+		/** No padding in the body, so a table runs edge to edge under the header. */
+		flush?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { title, actions, flush = false, class: className, children }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- WHY a fixed header height: a card with an action in its header and one
+     without sat 12px apart on the same page. -->
+<!-- =========================== -->
+<Card.Root class={cn("gap-0 py-0", className)}>
+	<header class="flex min-h-14 items-center justify-between gap-3 border-b px-4 py-3 sm:px-6">
+		<Card.Title as="h3" class="text-base font-medium">{title}</Card.Title>
+		{#if actions}
+			<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+		{/if}
+	</header>
+	<div class={flush ? "" : "p-4 sm:p-6"}>
+		{@render children()}
+	</div>
+</Card.Root>

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

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

package/src/components/section-header/section-header.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../list-page/section-label.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** How many things the section holds. Drawn as a chip next to the title. */
+		count?: number;
+		/** What the count counts, for a screen reader: "lines". */
+		countLabel?: string;
+		/** One line under the title. */
+		description?: string;
+		/** A control at the far end of the row. */
+		actions?: Snippet;
+		/** The heading level. Sections under a page title are 2. */
+		level?: 2 | 3;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { title, count, countLabel = "items", description, actions, level = 2 }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<header class="flex items-end justify-between gap-3">
+	<div class="min-w-0 space-y-1">
+		<svelte:element this={`h${level}`} class="flex items-center gap-2">
+			<SectionLabel>{title}</SectionLabel>
+			{#if count !== undefined}
+				<span
+					class="rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
+					aria-label={`${count} ${countLabel}`}
+				>
+					{count}
+				</span>
+			{/if}
+		</svelte:element>
+		{#if description}
+			<p class="text-sm text-muted-foreground">{description}</p>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+	{/if}
+</header>

package/src/components/section-header/section-header.test.ts

@@ -0,0 +1,25 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import SectionHeader from "./section-header.svelte";
+
+function render(props: Record<string, unknown>) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(SectionHeader, { target, props: { title: "Lines", ...props } });
+  flushSync();
+  return { target, done: () => { void unmount(app); target.remove(); } };
+}
+
+describe("SectionHeader", () => {
+  it("draws the count as a chip a screen reader can name", () => {
+    const { target, done } = render({ count: 3, countLabel: "lines" });
+    expect(target.querySelector("[aria-label='3 lines']")).not.toBeNull();
+    done();
+  });
+
+  it("takes its heading level", () => {
+    const { target, done } = render({ level: 3 });
+    expect(target.querySelector("h3")).not.toBeNull();
+    done();
+  });
+});

package/src/components/segmented/collapse.test.ts

@@ -47,3 +47,13 @@ describe("splitSegments", () => {
     expect(splitSegments(items, 2, 5).hidden).toEqual([]);
   });
 });
+
+describe("resolveSegmentMax", () => {
+  it("turns none into a limit nothing reaches, so no tail folds", async () => {
+    const { resolveSegmentMax, splitSegments } = await import("./collapse.js");
+    const items = Array.from({ length: 20 }, (_, i) => i);
+    expect(resolveSegmentMax("none")).toBe(Number.POSITIVE_INFINITY);
+    expect(resolveSegmentMax(4)).toBe(4);
+    expect(splitSegments(items, resolveSegmentMax("none"), 15).hidden).toEqual([]);
+  });
+});

package/src/components/segmented/collapse.ts

@@ -37,3 +37,8 @@ export function splitSegments<S>(
     hidden: items.filter((_, i) => i >= slots - 1 && i !== activeIndex),
   };
 }
+
+/** `"none"` draws every segment: the row scrolls sideways instead of folding a tail into a menu. */
+export function resolveSegmentMax(max: number | "none"): number {
+  return max === "none" ? Number.POSITIVE_INFINITY : max;
+}

package/src/components/segmented/segmented-filter.svelte

@@ -7,7 +7,7 @@ import Segment from "./segment.svelte";
 import type { TabDef } from "./animated-tabs.svelte";
 import SegmentedTrack from "./segmented-track.svelte";
 import SegmentedOverflow from "./segmented-overflow.svelte";
-import { SEGMENT_MAX, splitSegments } from "./collapse.js";
+import { SEGMENT_MAX, resolveSegmentMax, splitSegments } from "./collapse.js";
 import { segmentedTriggerClass } from "./segmented.js";
 
 // =========================
@@ -33,8 +33,9 @@ interface Props {
 	/** Fill the row rather than sit at its natural width. On for the list-page
 	 *  filter strip, off for a segment sitting in a toolbar beside others. */
 	block?: boolean;
-	/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`. */
-	max?: number;
+	/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`.
+	 *  `"none"` never folds. */
+	max?: number | "none";
 	/** What the menu segment says. Translate at the call site. */
 	moreLabel?: string;
 	class?: string;
@@ -70,7 +71,7 @@ let merged = $derived(
 let split = $derived(
 	splitSegments(
 		merged,
-		max,
+		resolveSegmentMax(max),
 		merged.findIndex((option) => option.value === value),
 	),
 );

package/src/components/segmented/segmented-track.svelte

@@ -174,6 +174,26 @@ let {
 		box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
 	}
 
+	/* On a coarse pointer the well is 44px and its segments fill it, so the hit area is the strip.
+	   A clipped well can't hold a hit area that hangs outside it. The border becomes a ring drawn
+	   over the segments, and the pill keeps its 2px gap inside that ring. */
+	@media (any-pointer: coarse) {
+		.track[data-variant="pill"]::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			z-index: 2;
+			border: 1px solid var(--color-border);
+			border-radius: inherit;
+			pointer-events: none;
+		}
+
+		.track[data-variant="pill"] .pill {
+			top: 3px;
+			bottom: 3px;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.pill {
 			transition: opacity var(--duration-quick) var(--ease-smooth-out);

package/src/components/segmented/segmented.test.ts

@@ -7,7 +7,7 @@ describe("segmentedTrackClass", () => {
     for (const variant of ["pill", "underline"] as const) {
       const classes = segmentedTrackClass({ variant }).split(" ");
       expect(classes).toContain("h-7");
-      expect(classes).toContain("any-pointer-coarse:h-10");
+      expect(classes).toContain("any-pointer-coarse:h-11");
     }
   });
 

package/src/components/segmented/segmented.ts

@@ -15,12 +15,12 @@ export const segmentedTrackClass = tv({
   // drew 30px beside a 28px button. One toolbar row came out at five heights.
 
   // WHY no size variant: `sm` drew 24px, and every tab control must share one height.
-  base: "h-7 any-pointer-coarse:h-10 shrink-0 items-stretch",
+  base: "h-7 any-pointer-coarse:h-11 shrink-0 items-stretch",
   variants: {
     // `pill`: a bordered well with a travelling highlight. `underline`: bare
     // labels over one hairline, the active one marked by a rule that travels.
     variant: {
-      pill: "overflow-hidden rounded-lg border border-border p-0.5",
+      pill: "overflow-hidden rounded-lg border border-border p-0.5 any-pointer-coarse:border-0 any-pointer-coarse:px-[3px] any-pointer-coarse:py-0",
       underline: "gap-5 border-b border-border",
     },
     // Fill the row rather than sit at its natural width. For a narrow rail.

package/src/components/table-view/index.ts

@@ -0,0 +1,3 @@
+export { default as TableView } from "./table-view.svelte";
+export type { TableCell } from "./table-view.svelte";
+export type { TableColumn } from "./types.js";

package/src/components/table-view/table-view.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { TableColumn } from "./types.js";
+
+	export type TableCell<Row> = { row: Row; column: TableColumn<Row>; value: unknown; text: string };
+	export type { TableColumn };
+</script>
+
+<script lang="ts" generics="Row extends object">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+	import * as Table from "../../shadcn/table/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		columns: TableColumn<Row>[];
+		rows: Row[];
+		/** What names a row, so a filter keeps its rows in place. */
+		rowKey: (row: Row) => string;
+		/** What the table is, for a screen reader. */
+		label: string;
+		/** A totals row, drawn under the body in the same columns. */
+		footer?: Row;
+		/** Draws a cell its own way. Print `text` for the plain case. */
+		cell?: Snippet<[TableCell<Row>]>;
+		rowClass?: (row: Row) => string | undefined;
+		/** Below this width the table scrolls sideways inside its frame. */
+		minWidth?: string;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { columns, rows, rowKey, label, footer, cell, rowClass, minWidth = "0", class: className }: Props = $props();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	const key = (column: TableColumn<Row>) => column.key;
+
+	function textOf(column: TableColumn<Row>, row: Row): string {
+		const value = (row as Record<string, unknown>)[key(column)];
+		if (column.format) return column.format(value, row);
+		return value === null || value === undefined ? "" : String(value);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#snippet body(row: Row)}
+	{#each columns as column (column.key)}
+		<Table.Cell
+			class={cn(
+				"align-top",
+				column.numeric ? "text-end tabular-nums" : "whitespace-normal",
+				column.muted && "text-muted-foreground",
+			)}
+		>
+			{#if cell}
+				{@render cell({ row, column, value: (row as Record<string, unknown>)[column.key], text: textOf(column, row) })}
+			{:else}
+				{textOf(column, row)}
+			{/if}
+		</Table.Cell>
+	{/each}
+{/snippet}
+
+<div class={cn("overflow-hidden rounded-xl border", className)}>
+	<Table.Root aria-label={label} style={`min-width: ${minWidth}`} class="min-w-0">
+		<Table.Header>
+			<Table.Row>
+				{#each columns as column (column.key)}
+					<Table.Head
+						class={cn("whitespace-normal", column.numeric && "text-end")}
+						style={column.width ? `width: ${column.width}` : undefined}
+					>
+						{column.label}
+					</Table.Head>
+				{/each}
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each rows as row (rowKey(row))}
+				<Table.Row class={rowClass?.(row)}>
+					{@render body(row)}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+		{#if footer}
+			<Table.Footer>
+				<Table.Row>
+					{@render body(footer)}
+				</Table.Row>
+			</Table.Footer>
+		{/if}
+	</Table.Root>
+</div>

package/src/components/table-view/table-view.test.ts

@@ -0,0 +1,53 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TableView from "./table-view.svelte";
+
+type Row = { id: string; name: string; total: number };
+const rows: Row[] = [
+  { id: "a", name: "Audit", total: 1200 },
+  { id: "b", name: "Build", total: 4800 },
+];
+
+function render(extra: Record<string, unknown> = {}) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(TableView<Row>, {
+    target,
+    props: {
+      label: "Lines",
+      rows,
+      rowKey: (row: Row) => row.id,
+      columns: [
+        { key: "name", label: "Name" },
+        { key: "total", label: "Total", numeric: true, format: (v: unknown) => `$${v}` },
+      ],
+      ...extra,
+    },
+  });
+  flushSync();
+  return { target, done: () => { void unmount(app); target.remove(); } };
+}
+
+describe("TableView", () => {
+  it("names the table and prints each row through its column's format", () => {
+    const { target, done } = render();
+    expect(target.querySelector("table")?.getAttribute("aria-label")).toBe("Lines");
+    const cells = [...target.querySelectorAll("tbody td")].map((td) => td.textContent?.trim());
+    expect(cells).toEqual(["Audit", "$1200", "Build", "$4800"]);
+    done();
+  });
+
+  it("right-aligns a numeric column and draws a footer in the same columns", () => {
+    const { target, done } = render({ footer: { id: "t", name: "Total", total: 6000 } });
+    expect(target.querySelector("thead th:last-child")?.className).toContain("text-end");
+    expect(target.querySelector("tfoot")?.textContent).toContain("$6000");
+    done();
+  });
+
+  it("lets a caller draw a cell", () => {
+    const cell = createRawSnippet(() => ({ render: () => `<b>x</b>` }));
+    const { target, done } = render({ cell });
+    expect(target.querySelectorAll("tbody b").length).toBe(4);
+    done();
+  });
+});

package/src/components/table-view/types.ts

@@ -0,0 +1,14 @@
+/** One column of a `TableView`. */
+export interface TableColumn<Row> {
+	/** The key of the value in the row. */
+	key: string;
+	label: string;
+	/** A number or an amount: right-aligned, tabular figures, never wraps. */
+	numeric?: boolean;
+	/** Turns the raw value into the text shown. A string value that has no `format` prints as it is. A money column passes its own currency formatter. */
+	format?: (value: unknown, row: Row) => string;
+	/** A column width such as `"30%"` or `"8rem"`. Leave it out and the table shares the rest. */
+	width?: string;
+	/** Draws the column in the muted colour. */
+	muted?: boolean;
+}

package/src/components/theme/index.ts

@@ -0,0 +1,17 @@
+/**
+ * The one light and dark system: mode-watcher's store and no-flash script, behind one provider.
+ * Mount `ThemeProvider` once in the root layout, flip the mode with `toggleMode` or `setMode`, and
+ * read it from `mode.current` or `userPrefersMode.current`. `ThemeToggle` and `revealTheme`
+ * draw the control and the wipe.
+ */
+export { default as ThemeProvider } from "./theme-provider.svelte";
+export { revealTheme } from "../../lib/theme-transition.js";
+export {
+  mode,
+  resetMode,
+  setMode,
+  systemPrefersMode,
+  toggleMode,
+  userPrefersMode,
+  type UserPrefersMode,
+} from "mode-watcher";

package/src/components/theme/theme-provider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ModeWatcher, userPrefersMode, type UserPrefersMode } from "mode-watcher";
+	import type { ComponentProps } from "svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	type WatcherProps = ComponentProps<typeof ModeWatcher>;
+
+	interface Props extends Omit<WatcherProps, "defaultMode"> {
+		/**
+		 * The choice the server already knows, for a browser that has none stored. A stored
+		 * choice wins, so it seeds a first visit and never overrides a click.
+		 */
+		initial?: UserPrefersMode;
+		/**
+		 * Fires when the person changes the mode, never on load. An app that saves the choice
+		 * on its server posts it here.
+		 */
+		onChange?: (mode: UserPrefersMode) => void;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { initial = "system", onChange, synchronousModeChanges = true, ...watcher }: Props = $props();
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// The first run is the mode read from storage on mount, which nobody chose.
+	let seen: UserPrefersMode | null = null;
+	$effect(() => {
+		const next = userPrefersMode.current;
+		if (seen !== null && next !== seen) onChange?.(next);
+		seen = next;
+	});
+</script>
+
+<!-- WHY it renders ModeWatcher and nothing else: its inline head script sets the class and
+     colour-scheme before the first paint, so there is no flash and no cookie to read.
+     WHY synchronous: `revealTheme` snapshots the page the moment its callback returns, so the
+     class has to be on the root by then. -->
+<ModeWatcher defaultMode={initial} {synchronousModeChanges} {...watcher} />

package/src/components/theme/theme-provider.test.ts

@@ -0,0 +1,61 @@
+import { flushSync, mount, unmount } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { setMode, toggleMode } from "mode-watcher";
+import ThemeProvider from "./theme-provider.svelte";
+
+function render(props: Record<string, unknown>) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(ThemeProvider, { target, props });
+  flushSync();
+  return () => {
+    void unmount(app);
+    target.remove();
+  };
+}
+
+describe("ThemeProvider", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    // WHY: jsdom has no matchMedia, and the watcher asks it for the system mode on mount.
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener() {},
+        removeEventListener() {},
+      }),
+    });
+  });
+  afterEach(() => document.documentElement.classList.remove("dark"));
+
+  it("takes the server's choice when nothing is stored", () => {
+    const done = render({ initial: "dark", disableHeadScriptInjection: true });
+    flushSync();
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    done();
+  });
+
+  it("lets a stored choice beat the server's", () => {
+    localStorage.setItem("mode-watcher-mode", "light");
+    const done = render({ initial: "dark", disableHeadScriptInjection: true });
+    flushSync();
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    done();
+  });
+
+  it("reports a person's choice and not the load", () => {
+    const onChange = vi.fn();
+    const done = render({ initial: "light", onChange, disableHeadScriptInjection: true });
+    flushSync();
+    expect(onChange).not.toHaveBeenCalled();
+    setMode("dark");
+    flushSync();
+    expect(onChange).toHaveBeenLastCalledWith("dark");
+    toggleMode();
+    flushSync();
+    expect(onChange).toHaveBeenLastCalledWith("light");
+    done();
+  });
+});

package/src/effects/spotlight/Spotlight.svelte

@@ -22,7 +22,6 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<!-- no-inline-svg-ignore: static decorative blob, animated via the spotlight keyframe -->
 <svg
 	class={cn(
 		"hr-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] animate-spotlight opacity-0 lg:w-[84%]",

package/src/lib/tone.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vite-plus/test";
+import { TONE_CLASS } from "./tone.js";
+
+describe("TONE_CLASS", () => {
+  // Plain destructive text on its own 10% tint is 3.6:1. The ink mix clears 4.5:1.
+  it("sets destructive text in the ink, not the raw colour", () => {
+    expect(TONE_CLASS.destructive).toContain("text-destructive-ink");
+    expect(TONE_CLASS.destructive.split(" ")).not.toContain("text-destructive");
+  });
+});

package/src/lib/tone.ts

@@ -14,7 +14,7 @@ export const TONE_CLASS: Record<Tone, string> = {
   info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
   success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
   warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
-  destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+  destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink",
 };
 
 /** The same scale as text, for a verdict inside a line of muted facts. */

package/src/shadcn/badge/badge.svelte

@@ -11,7 +11,7 @@
 				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
 				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
 				// For a consumer that wants one "this is wrong" badge without a tone prop.
-				destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20",
+				destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20",
 			},
 		},
 		defaultVariants: {

package/src/shadcn/button/button.svelte

@@ -18,6 +18,9 @@
 					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				destructive:
 					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				// Quiet text that opens an editor or a menu: a ghost that wraps to as many lines as its
+				// label needs, aligned left, never a fixed-height square.
+				text: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				// WHY a variant and not a class every call site writes: "add another
 
 				// row", "add a step", "attach a call" is one affordance, and it was hand-drawn eleven times across the app with four radii, three text sizes and three different hover hues.
@@ -34,7 +37,7 @@
 
 			// WHY sm carries a hit area: 28px is under the 32px desktop floor and the 40px coarse height is under 44. The ::after box stays the same 32px (44 on coarse) square whatever the visual size, so a dense toolbar keeps its look.
 
-			// Icon buttons grow both axes because they have no label to widen them. any-pointer, not pointer: see the note in tokens.css.
+			// Icon buttons grow both axes because they have no label to widen them. any-pointer, not pointer: see the note in tokens/base.css.
 			size: {
 				sm: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 any-pointer-coarse:h-10 any-pointer-coarse:px-3",
 				default:
@@ -45,6 +48,12 @@
 			icon: { true: "", false: "" },
 		},
 		compoundVariants: [
+			// After `size` so its heights lose: a text button is as tall as its lines.
+			{
+				variant: "text",
+				class:
+					"h-auto min-h-7 justify-start py-1 text-left whitespace-normal any-pointer-coarse:h-auto any-pointer-coarse:min-h-11",
+			},
 			{
 				size: "sm",
 				icon: true,

package/src/shadcn/button/button.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vite-plus/test";
+import { buttonVariants } from "./button.svelte";
+
+describe("buttonVariants text", () => {
+  for (const size of ["sm", "default", "lg"] as const) {
+    it(`wraps and grows with its lines at size ${size}`, () => {
+      const classes = buttonVariants({ variant: "text", size }).split(" ");
+      expect(classes).toContain("h-auto");
+      expect(classes).toContain("whitespace-normal");
+      expect(classes).toContain("any-pointer-coarse:min-h-11");
+      expect(classes).not.toContain("whitespace-nowrap");
+      expect(classes).not.toContain("h-7");
+      expect(classes).not.toContain("h-8");
+    });
+  }
+  it("leaves the other variants fixed-height", () => {
+    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-8");
+  });
+});

package/src/shadcn/checkbox/checkbox.svelte

@@ -16,7 +16,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-y-3.5 any-pointer-coarse:after:-inset-3 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50",
 		className,
 	)}
 	bind:checked

package/src/shadcn/context-menu/context-menu-separator.svelte

@@ -12,6 +12,9 @@
 <ContextMenuPrimitive.Separator
 	bind:ref
 	data-slot="context-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn(
+		"bg-border -mx-1 my-1 h-px first:hidden last:hidden [[data-slot=context-menu-separator]+&]:hidden",
+		className,
+	)}
 	{...restProps}
 />