@heyramzi/ui 2.20.0 → 2.21.0

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-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.svelte

@@ -2,7 +2,9 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	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",
+		// 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.

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>

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

@@ -31,13 +31,20 @@
 	<DialogPrimitive.Content
 		bind:ref
 		data-slot="dialog-content"
+		data-close={showCloseButton || undefined}
 		class={cn(
-			"t-modal bg-background ring-foreground/10 shadow-overlay fixed z-50 grid w-full gap-4 text-sm ring-1 outline-none",
+			// The popover surface, white on light: `bg-background` is the grey canvas now. The edge
+			// and the depth both come from `shadow-edge-overlay`, so no ring draws a second line.
+			"t-modal bg-popover text-popover-foreground shadow-edge-overlay fixed z-50 grid w-full gap-4 text-sm outline-none",
 			// WHY: on a phone a centered card puts its controls at the top of the reach arc and leaves the on-screen keyboard fighting it for the middle of the screen.
 
 			// Below sm the dialog docks to the bottom edge instead, scrolls inside itself, and clears the home indicator.
-			"right-0 bottom-0 left-0 max-h-[88svh] overflow-y-auto overscroll-contain rounded-t-xl rounded-b-none p-4 pb-[max(1rem,env(safe-area-inset-bottom))]",
-			"sm:top-1/2 sm:right-auto sm:bottom-auto sm:left-1/2 sm:max-h-[calc(100svh-4rem)] sm:max-w-md sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
+			"right-0 bottom-0 left-0 max-h-[88svh] overflow-y-auto overscroll-contain rounded-t-2xl rounded-b-none",
+			// One padding for every part, held in `--dialog-pad` so the header, the close button and a
+			// banded footer all read the same number. A single `p-` class, not `p-4 sm:p-6`: a caller's
+			// `p-0` used to cancel only the phone padding and leave 24px on desktop.
+			"[--dialog-pad:1rem] sm:[--dialog-pad:1.5rem] p-(--dialog-pad) pb-[max(var(--dialog-pad),env(safe-area-inset-bottom))]",
+			"sm:top-1/2 sm:right-auto sm:bottom-auto sm:left-1/2 sm:max-h-[calc(100svh-4rem)] sm:max-w-md sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl",
 			className,
 		)}
 		{...restProps}
@@ -46,7 +53,15 @@
 		{#if showCloseButton}
 			<DialogPrimitive.Close data-slot="dialog-close">
 				{#snippet child({ props })}
-					<Button variant="ghost" class="absolute top-4 right-4" size="sm" icon {...props}>
+					<!-- Centred on the title's 24px line, the glyph's right edge on the content edge:
+				     a 32px button sits 4px above and 8px past the padding. -->
+					<Button
+						variant="ghost"
+						class="absolute top-[calc(var(--dialog-pad)-0.25rem)] right-[calc(var(--dialog-pad)-0.5rem)]"
+						size="sm"
+						icon
+						{...props}
+					>
 						<X size={16} />
 						<span class="sr-only">Close</span>
 					</Button>

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

@@ -9,16 +9,34 @@
 		class: className,
 		children,
 		showCloseButton = false,
+		band = false,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		showCloseButton?: boolean;
+		/**
+		 * Draw the footer as a band: a hairline on top and a quiet surface out to both edges
+		 * and the bottom corners. It cancels the content's `--dialog-pad` with a negative
+		 * margin, so it only works as the content's last child. A bare `data-band` attribute
+		 * does the same, for callers on a release that predates this prop.
+		 */
+		band?: boolean;
 	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn("gap-2 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",
+		// The band. The bottom margin matches the content's bottom padding, safe area included,
+		// so the surface reaches the edge on a phone docked over the home indicator too.
+		"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:px-(--dialog-pad) data-band:py-4",
+		"data-band:mb-[calc(-1*max(var(--dialog-pad),env(safe-area-inset-bottom)))]",
+		"data-band:pb-[max(1rem,env(safe-area-inset-bottom))] sm:data-band:pb-4",
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,10 +10,15 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
+<!-- The content pads it. With a close button the title stops 32px short of it,
+     so a long title wraps instead of running under the X. -->
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn("gap-2 flex flex-col", className)}
+	class={cn(
+		"flex flex-col gap-1.5 in-data-close:pe-8",
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -9,9 +9,10 @@
 	}: DialogPrimitive.TitleProps = $props();
 </script>
 
+<!-- 16px on a 24px line: the close button centres on that line. -->
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("leading-none font-medium", className)}
+	class={cn("text-base leading-6 font-semibold tracking-tight", className)}
 	{...restProps}
 />

package/src/shadcn/dialog/index.ts

@@ -8,6 +8,7 @@ import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.svelte";
+import Body from "./dialog-body.svelte";
 
 export {
   Root,
@@ -20,6 +21,7 @@ export {
   Content,
   Description,
   Close,
+  Body,
   //
   Root as Dialog,
   Title as DialogTitle,
@@ -31,4 +33,5 @@ export {
   Content as DialogContent,
   Description as DialogDescription,
   Close as DialogClose,
+  Body as DialogBody,
 };

package/src/shadcn/dropdown-menu/dropdown-menu-content.svelte

@@ -8,6 +8,8 @@
 		ref = $bindable(null),
 		sideOffset = 4,
 		align = "start",
+		// Keeps 8px between the menu and the viewport edge, matching the `100vw-1rem` width cap.
+		collisionPadding = 8,
 		portalProps,
 		class: className,
 		...restProps
@@ -22,8 +24,10 @@
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		{align}
+		{collisionPadding}
 		class={cn(
-			"t-dropdown ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-xl p-1 shadow-raised ring-1 z-50 w-(--bits-dropdown-menu-anchor-width) max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto overscroll-contain outline-none data-closed:overflow-hidden",
+			// 14px around 10px rows inside a 4px inset, so the corners run concentric.
+			"t-dropdown bg-popover text-popover-foreground min-w-32 rounded-xl p-1 shadow-edge-raised z-50 w-(--bits-dropdown-menu-anchor-width) max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto overscroll-contain outline-none data-closed:overflow-hidden",
 			className,
 		)}
 		{...restProps}

package/src/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		"t-dropdown ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-xl p-1 shadow-raised ring-1 z-50 w-auto",
+		"t-dropdown bg-popover text-popover-foreground min-w-[96px] rounded-xl p-1 shadow-edge-raised z-50 w-auto",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/dropdown-menu/menu-item.ts

@@ -24,7 +24,7 @@ import { tv, type VariantProps } from "tailwind-variants";
  * A row has to look the same either way, so it answers to both.
  */
 export const menuItemClass = tv({
-  base: "relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50",
+  base: "relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
       default:

package/src/shadcn/field/field-separator.svelte

@@ -26,7 +26,7 @@
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			class="bg-card text-muted-foreground relative mx-auto block w-fit px-2"
 			data-slot="field-separator-content"
 		>
 			{@render children()}

package/src/shadcn/hover-card/hover-card-content.svelte

@@ -23,7 +23,7 @@
 		{align}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-2xl p-4 shadow-edge-raised outline-hidden outline-none",
 			className,
 		)}
 		{...restProps}

package/src/shadcn/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		{type}

package/src/shadcn/input-otp/input-otp-slot.svelte

@@ -17,7 +17,7 @@
 	class={cn(
 		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-e text-sm transition-[border-color,box-shadow,background-color] outline-none first:rounded-s-md first:border-s last:rounded-e-md",
 		cell.isActive &&
-			"border-ring ring-ring/50 bg-accent/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
+			"border-ring ring-ring/50 bg-accent/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-card z-10 ring-[3px]",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -28,7 +28,7 @@
 	data-size={size}
 	{direction}
 	class={cn(
-		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-card text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
 		className
 	)}
 	{...restProps}

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

@@ -30,7 +30,7 @@
 		{align}
 		{collisionPadding}
 		class={cn(
-			"t-dropdown bg-popover text-popover-foreground ring-foreground/10 rounded-xl p-4 text-sm shadow-raised ring-1 z-50 w-72 max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-y-auto overscroll-contain outline-hidden",
+			"t-dropdown bg-popover text-popover-foreground rounded-2xl p-4 text-sm shadow-edge-raised z-50 w-72 max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-y-auto overscroll-contain outline-hidden",
 			className,
 		)}
 		{...restProps}

package/src/shadcn/radio-group/radio-group-item.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 relative after:absolute after:-inset-2 any-pointer-coarse:after:-inset-3.5 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input text-primary focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 relative after:absolute after:-inset-2 any-pointer-coarse:after:-inset-3.5 aspect-square size-4 shrink-0 rounded-full border shadow-field transition-[color,box-shadow] outline-none focus-visible:shadow-(--ring-focus) disabled:cursor-not-allowed disabled:opacity-50",
 		className,
 	)}
 	{...restProps}