@heyramzi/ui 2.20.0 → 2.21.1

package/src/panel/side-panel.svelte

@@ -14,6 +14,7 @@
 	import type { Tone } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import StatusBadge from "../status/status-badge.svelte";
+	import PopValue from "../charts/pop-value.svelte";
 
 	// =========================
 	// PROPS
@@ -113,7 +114,8 @@
 		side="right"
 		bind:ref={panel}
 		tabindex={-1}
-		class={cn("flex w-full flex-col gap-0 p-0", WIDTH[width], bare && "overflow-hidden")}
+		floating
+		class={cn("flex w-full flex-col gap-0 overflow-hidden p-0", WIDTH[width])}
 		{onOpenAutoFocus}
 	>
 		{#if bare}
@@ -165,11 +167,14 @@
 							<div class="min-w-0">
 								<dt class="text-xs text-muted-foreground">{stat.label}</dt>
 								<dd
-									class={cn("text-sm font-medium tabular-nums", STAT_TONE[stat.tone ?? "default"])}
+									class={cn(
+										"text-lg leading-tight font-semibold tabular-nums",
+										STAT_TONE[stat.tone ?? "default"],
+									)}
 								>
-									{stat.value}
+									<PopValue value={stat.value} />
 									{#if stat.sub}
-										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+										<span class="ms-1 text-xs font-normal text-muted-foreground">{stat.sub}</span>
 									{/if}
 								</dd>
 							</div>

package/src/record/info-list.svelte

@@ -171,15 +171,16 @@
 			{/each}
 		</span>
 	{:else if row.tone && row.value}
-		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full">{row.value}</StatusBadge>
+		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full"
+			>{row.value}</StatusBadge
+		>
 	{:else if row.href && row.value}
 		<a
 			href={row.href}
 			title={row.value}
 			class={cn(
 				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",
-				clamp &&
-					"rounded-xs focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+				clamp && "rounded-xs focus-visible:shadow-(--ring-focus) focus-visible:outline-none",
 			)}>{row.value}</a
 		>
 	{:else if row.value}
@@ -299,12 +300,10 @@
 {:else if shown.length > 0}
 	<div class={cn("flex flex-col gap-2", className)}>
 		{#if title}
-			<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h2>
+			<h2 class="text-xs font-medium text-muted-foreground">{title}</h2>
 		{/if}
 		<!-- Labels size to their text, capped at 45%; the dt's min-w-20 is the 5rem floor. min() can't take max-content, so a min() template is dropped whole. -->
-		<dl
-			class="grid grid-cols-[fit-content(45%)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
-		>
+		<dl class="grid grid-cols-[fit-content(45%)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5">
 			{#each shown as row, index (row.divider ? `divider-${index}` : keyOf(row))}
 				{#if row.divider}
 					<div class="col-span-2 -my-0.5 border-t border-border/50"></div>
@@ -355,7 +354,7 @@
 								<Select.Trigger
 									size="sm"
 									aria-label={t.edit(row.label)}
-									class="-ml-1.5 min-h-7 h-auto w-fit max-w-full gap-1.5 border-transparent bg-transparent px-1.5 shadow-none transition-colors hover:bg-muted/60 focus-visible:ring-3 data-[state=open]:bg-muted/60"
+									class="-ml-1.5 min-h-7 h-auto w-fit max-w-full gap-1.5 border-transparent bg-transparent px-1.5 shadow-none transition-colors hover:bg-muted/60 focus-visible:shadow-(--ring-focus) data-[state=open]:bg-muted/60"
 								>
 									<span data-slot="select-value" class="flex min-w-0 items-center gap-1.5">
 										{@render display(row)}

package/src/record/project-list.svelte

@@ -122,7 +122,7 @@
 						aria-current={active ? "page" : undefined}
 						class={cn(
 							"flex flex-col gap-1.5 rounded-lg px-2 py-2 transition-colors any-pointer-coarse:py-3",
-							"outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+							"outline-none focus-visible:shadow-(--ring-focus)",
 							active ? "bg-muted" : "hover:bg-muted/60",
 						)}
 					>

package/src/record/record-demo.svelte

@@ -183,7 +183,7 @@
 	</div>
 
 	<div class={narrow ? "mx-auto w-full max-w-[390px]" : "w-full"}>
-		<div class="overflow-hidden rounded-xl border border-border">
+		<div class="overflow-hidden rounded-xl shadow-card">
 			{#if fixture === "project"}
 				<RecordShell
 					bind:tab
@@ -320,9 +320,7 @@
 					{#snippet rail()}
 						<div class="flex flex-col gap-6">
 							<section class="flex flex-col gap-2">
-								<h2 class="px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
-									Projects
-								</h2>
+								<h2 class="px-2 text-xs font-medium text-muted-foreground">Projects</h2>
 								<ProjectList projects={summaries} {stages} today={DEMO_TODAY} {locale} />
 							</section>
 							<FieldSection

package/src/record/record-rail.svelte

@@ -51,7 +51,11 @@
 
 <!-- A record's side rail with tabs: the fields in one, a thread or a log in the next,
      so the thread sits beside the record and not a screen below it. One tab draws no strip. -->
-<Tabs.Root value={open} onValueChange={(next) => (value = next)} class={cn("min-w-0 gap-0", className)}>
+<Tabs.Root
+	value={open}
+	onValueChange={(next) => (value = next)}
+	class={cn("min-w-0 gap-0", className)}
+>
 	{#if tabs.length > 1}
 		<div class={cn("pb-3", listClass)}>
 			<Tabs.List size="sm" class="w-full" aria-label={label}>

package/src/record/record-shell.svelte

@@ -62,7 +62,7 @@
 <!-- =========================== -->
 <!-- WHY a container query: the record sits in a page with its own sidebar, so the
      viewport says nothing about how much room it has. -->
-<div class={cn("@container flex min-w-0 flex-col bg-background", className)}>
+<div class={cn("@container flex min-w-0 flex-col bg-card", className)}>
 	{@render header()}
 	{@render banner?.()}
 

package/src/record/record-stats.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../lib/utils.js";
+	import PopValue from "../charts/pop-value.svelte";
 	import type { PanelStat } from "../panel/side-panel-types.js";
 	import { gutterClass } from "./gutter.js";
 
@@ -36,10 +37,15 @@
 		{#each stats as stat (stat.label)}
 			<div class="min-w-0">
 				<dt class="text-xs text-muted-foreground">{stat.label}</dt>
-				<dd class={cn("text-sm font-medium tabular-nums", TONE[stat.tone ?? "default"])}>
-					{stat.value}
+				<dd
+					class={cn(
+						"text-lg leading-tight font-semibold tabular-nums",
+						TONE[stat.tone ?? "default"],
+					)}
+				>
+					<PopValue value={stat.value} />
 					{#if stat.sub}
-						<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+						<span class="ms-1 text-xs font-normal text-muted-foreground">{stat.sub}</span>
 					{/if}
 				</dd>
 			</div>

package/src/record/steps-rail.svelte

@@ -245,21 +245,21 @@
 			<Check class="size-2.5" weight="bold" />
 		</span>
 	{:else if kind === "current"}
-		<span class="rounded-full bg-background p-0.75">
+		<span class="rounded-full bg-card p-0.75">
 			<span
 				class="block size-2 rounded-full bg-[color:var(--tone-accent,var(--color-primary))] ring-3 ring-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_20%,transparent)]"
 			></span>
 		</span>
 	{:else if kind === "late"}
-		<span class="size-2 rounded-full border-2 border-warning bg-background"></span>
+		<span class="size-2 rounded-full border-2 border-warning bg-card"></span>
 	{:else}
-		<span class="size-2 rounded-full border border-muted-foreground/40 bg-background"></span>
+		<span class="size-2 rounded-full border border-muted-foreground/40 bg-card"></span>
 	{/if}
 {/snippet}
 
 <div class={cn("flex flex-col", className)}>
 	<div class="mb-2 flex min-h-7 items-center gap-2 px-2">
-		<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{t.steps}</h2>
+		<h2 class="text-xs font-medium text-muted-foreground">{t.steps}</h2>
 		{#if !loading}
 			<span class="text-xs tabular-nums text-muted-foreground">
 				{t.stepsCount(progress.done, progress.total)}
@@ -290,9 +290,7 @@
 				<Popover.Content align="end" class="w-64 p-1">
 					{#each menuBuckets as bucket (bucket.key)}
 						{#if bucket.label}
-							<p
-								class="px-2 pt-2 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase"
-							>
+							<p class="px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground">
 								{bucket.label}
 							</p>
 						{/if}
@@ -342,9 +340,7 @@
 			{#each buckets as bucket (bucket.key)}
 				<div class="flex flex-col">
 					{#if bucket.label}
-						<h3
-							class="mb-1 px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase select-none"
-						>
+						<h3 class="mb-1 px-2 text-xs font-medium text-muted-foreground select-none">
 							{bucket.label}
 						</h3>
 					{/if}
@@ -375,7 +371,7 @@
 										draggable={canReorder && !renaming}
 										class={cn(
 											"relative flex min-h-9 w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left transition-colors any-pointer-coarse:min-h-11 any-pointer-coarse:py-3",
-											"outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+											"outline-none focus-visible:shadow-(--ring-focus)",
 											canReorder && "active:cursor-grabbing",
 											active ? "bg-muted" : "hover:bg-muted/60",
 										)}

package/src/shadcn/accordion/accordion-trigger.svelte

@@ -24,7 +24,7 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50",
+			" focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:shadow-(--ring-focus) **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50",
 			className,
 		)}
 		{...restProps}

package/src/shadcn/alert/alert-variants.ts

@@ -0,0 +1,17 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+  base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive:
+        "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];

package/src/shadcn/alert/alert.svelte

@@ -1,21 +1,7 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { alertVariants, type AlertVariant } from "./alert-variants.js";
 
-	export const alertVariants = tv({
-		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-		variants: {
-			variant: {
-				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+	export { alertVariants, type AlertVariant };
 </script>
 
 <script lang="ts">

package/src/shadcn/alert/index.ts

@@ -1,7 +1,7 @@
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
-export { alertVariants, type AlertVariant } from "./alert.svelte";
+export { alertVariants, type AlertVariant } from "./alert-variants.js";
 
 export {
   Root,

package/src/shadcn/alert-dialog/alert-dialog-content.svelte

@@ -21,7 +21,11 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			"t-modal bg-background fixed inset-0 z-50 m-auto grid h-fit w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg",
+			// The dialog's surface: white popover, the edge and depth from `shadow-edge-overlay`,
+			// the overlay radius. `overflow-hidden` lets a banded footer follow the bottom corners.
+			"t-modal bg-popover text-popover-foreground shadow-edge-overlay fixed inset-0 z-50 m-auto grid h-fit w-full max-w-[calc(100%-2rem)] gap-4 overflow-hidden rounded-2xl text-sm outline-none sm:max-w-md",
+			// Same padding variable as the dialog, so `AlertDialog.Footer band` reads one number.
+			"[--dialog-pad:1.25rem] sm:[--dialog-pad:1.5rem] p-(--dialog-pad)",
 			className,
 		)}
 		{...restProps}

package/src/shadcn/alert-dialog/alert-dialog-footer.svelte

@@ -6,14 +6,24 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		band = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		/** A hairline and a quiet surface out to both edges and the bottom corners. Last child only. */
+		band?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	data-band={band || undefined}
+	class={cn(
+		"flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
+		"data-band:border-border data-band:bg-muted/50 data-band:mt-2 data-band:border-t",
+		"data-band:mx-[calc(-1*var(--dialog-pad))] data-band:mb-[calc(-1*var(--dialog-pad))] data-band:px-(--dialog-pad) data-band:py-4",
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/shadcn/alert-dialog/alert-dialog-header.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	class={cn("flex flex-col gap-1.5 text-center sm:text-start", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/shadcn/alert-dialog/alert-dialog-title.svelte

@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn("text-lg font-semibold", className)}
+	class={cn("text-base leading-6 font-semibold tracking-tight", className)}
 	{...restProps}
 />

package/src/shadcn/badge/badge-variants.ts

@@ -0,0 +1,23 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const badgeVariants = tv({
+  // The chip radius, not a pill: DESIGN.md keeps `rounded-full` for status and counts,
+  // which `StatusBadge` owns. Tabular figures so a count that ticks doesn't shift.
+  base: "h-5 gap-1 rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] [&>svg]:pointer-events-none",
+  variants: {
+    // Three weights a label can carry: filled, tinted, outlined. Severity is the
+    // `tone` prop, which reads `TONE_CLASS`, not a variant.
+    variant: {
+      default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+      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-ink [a]:hover:bg-destructive/20",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];

package/src/shadcn/badge/badge.svelte

@@ -1,25 +1,7 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 
-	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none",
-		variants: {
-			// Three weights a label can carry: filled, tinted, outlined. Severity is the
-			// `tone` prop, which reads `TONE_CLASS`, not a variant.
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				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-ink [a]:hover:bg-destructive/20",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export { badgeVariants, type BadgeVariant };
 </script>
 
 <script lang="ts">

package/src/shadcn/badge/index.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from "./badge.svelte";
-export { badgeVariants, type BadgeVariant } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge-variants.js";

package/src/shadcn/bubble/bubble-content.svelte

@@ -14,7 +14,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"cn-bubble-content w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-left [button,a]:transition-colors rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50 group-data-[align=end]/bubble:self-end",
+			"cn-bubble-content w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-left [button,a]:transition-colors rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:shadow-(--ring-focus) group-data-[align=end]/bubble:self-end",
 			className,
 		),
 		"data-slot": "bubble-content",

package/src/shadcn/bubble/bubble.svelte

@@ -14,7 +14,7 @@
 				tinted:
 					"cn-bubble-variant-tinted *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
 				outline:
-					"cn-bubble-variant-outline *:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+					"cn-bubble-variant-outline *:data-[slot=bubble-content]:bg-card *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
 				ghost:
 					"cn-bubble-variant-ghost *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
 				destructive:

package/src/shadcn/button/button.svelte

@@ -4,7 +4,9 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "t-press focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		// Focus is the kit's one ring, `--ring-focus`, written as a utility because the
+		// variant shadows (`shadow-key`, `shadow-btn`) would otherwise cover the base-layer rule.
+		base: "t-press focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			// Five roles: fill, outline, ghost, destructive, and dashed for an empty
 			// slot. `secondary` and `link` went on 4 Sep 2026, one real caller between
@@ -13,14 +15,18 @@
 				default:
 					"bg-primary text-primary-foreground shadow-key hover:bg-primary/90 active:shadow-none [a]:hover:bg-primary/80",
 				outline:
-					"border-border bg-background shadow-btn hover:bg-muted hover:text-foreground active:shadow-none dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+					// `bg-card`, not `bg-background`: the background is the grey canvas now, so an
+					// outline button on a white panel read as a grey slab.
+					"border-border bg-card shadow-btn hover:bg-muted hover:border-foreground/15 hover:text-foreground active:shadow-none dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				// A foreground wash, not `bg-muted`: muted is L 0.94 and the canvas 0.945, so a
+				// ghost hover on the page drew nothing. The wash reads on canvas and card alike.
 				ghost:
-					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+					"hover:bg-foreground/6 hover:text-foreground aria-expanded:bg-foreground/6 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",
+					"bg-destructive/10 hover:bg-destructive/20 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",
+				text: "hover:bg-foreground/6 hover:text-foreground aria-expanded:bg-foreground/6 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.

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -14,7 +14,7 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		"has-focus:border-ring border-input relative flex rounded-md border shadow-field has-focus:shadow-(--ring-focus)",
 		className,
 	)}
 >

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -13,7 +13,7 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		"has-focus:border-ring border-input relative flex rounded-md border shadow-field has-focus:shadow-(--ring-focus)",
 		className,
 	)}
 >

package/src/shadcn/calendar/calendar.svelte

@@ -59,7 +59,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekStartsOn}
 	{fixedWeeks}
 	class={cn(
-		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		"bg-card group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 		className,
 	)}
 	{locale}

package/src/shadcn/card/card.svelte

@@ -16,7 +16,8 @@
 	data-slot="card"
 	data-size={size}
 	class={cn(
-		"ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-card ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		// `shadow-card` draws its own hairline, so a ring on top made a 2px edge.
+		"bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-card has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
 		className,
 	)}
 	{...restProps}

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-[15px] 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 not-data-checked:enabled:hover:border-foreground/30 focus-visible:border-ring focus-visible:shadow-(--ring-focus) 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 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/code-block/code-block-actions.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="code-block-actions"
 	class={cn(
-		"-my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:top-3 [[data-slot=code-block]>&]:end-3 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100",
+		"-my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:top-3 [[data-slot=code-block]>&]:end-3 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:*:[button]:bg-card [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100",
 		className
 	)}
 	{...restProps}

package/src/shadcn/command/command-dialog.svelte

@@ -37,13 +37,13 @@
 			// WHY: search is the one dialog that must sit above the keyboard rather
 
 			// than under it, so it stays top-anchored on phones instead of taking the shared bottom-sheet position, and hugs the safe area at the top.
-			"rounded-xl! top-[max(0.5rem,env(safe-area-inset-top))] right-2 bottom-auto left-2 w-auto max-h-[70svh] translate-y-0 gap-0 overflow-hidden p-0 sm:p-0",
+			"rounded-2xl! top-[max(0.5rem,env(safe-area-inset-top))] right-2 bottom-auto left-2 w-auto max-h-[70svh] translate-y-0 gap-0 overflow-hidden p-0 sm:p-0",
 			// WHY no border and no card background here: the palette is a floating
 
 			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface itself belongs to the Command root beneath so its translucency
 
 			// can read the dimmed page through it.
-			"border-0 bg-transparent ring-1 ring-foreground/15 shadow-overlay",
+			"border-0 bg-transparent shadow-edge-overlay",
 			// WHY a third of the way down rather than centred: the eye is already at
 
 			// the top of the screen when the shortcut is pressed, and a list that grows downward should not push its first row past the fold.

package/src/shadcn/command/command-group.svelte

@@ -31,7 +31,7 @@
 >
 	{#if heading}
 		<CommandPrimitive.GroupHeading
-			class="text-muted-foreground px-2.5 pt-2.5 pb-1.5 text-xs font-medium tracking-[0.09em] uppercase"
+			class="text-muted-foreground px-2.5 pt-2.5 pb-1.5 text-xs font-medium"
 		>
 			{heading}
 		</CommandPrimitive.GroupHeading>

package/src/shadcn/command/command-input.svelte

@@ -49,7 +49,7 @@
 			"caret-brand placeholder:text-muted-foreground/70 w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
 			// A combobox popover's search line is 36px, measured; `lg` is the
 			// standalone palette header and keeps its own larger rhythm.
-			size === "lg" ? "py-3.5 text-[15px]" : "py-2 text-[13px]",
+			size === "lg" ? "py-3.5 text-[15px]" : "py-2 text-(length:--text-control)",
 			className,
 		)}
 		bind:ref

package/src/shadcn/command/command-item.svelte

@@ -22,7 +22,7 @@
 		// at half strength is a two-percent lightness step on the dark surface, so the one row the arrow keys are on was the hardest row to find.
 
 		// A foreground wash plus an inset hairline works in both modes from one rule.
-		"group/command-item data-selected:bg-foreground/6 data-selected:ring-foreground/10 data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-8 cursor-default items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] outline-hidden transition-colors duration-[var(--duration-fast)] select-none active:translate-y-px data-selected:ring-1 data-selected:ring-inset data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item data-selected:bg-foreground/6 data-selected:ring-foreground/10 data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-8 cursor-default items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-(length:--text-control) outline-hidden select-none active:translate-y-px data-selected:ring-1 data-selected:ring-inset data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/dialog/dialog-body.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<!-- The fields between the header and the footer. No padding of its own: the content's
+     `--dialog-pad` already lines it up with the title. -->
+<div
+	bind:this={ref}
+	data-slot="dialog-body"
+	class={cn("flex min-w-0 flex-col gap-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>