@heyramzi/ui 2.20.0 → 2.21.1

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}

package/src/shadcn/scroll-area/scroll-area.svelte

@@ -29,7 +29,7 @@
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+		class="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:shadow-(--ring-focus) focus-visible:outline-1"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>

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

@@ -11,6 +11,8 @@
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
+		// 8px between the list and the viewport edge, as the dropdown and popover keep.
+		collisionPadding = 8,
 		portalProps,
 		children,
 		preventScroll = true,
@@ -24,10 +26,12 @@
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		{collisionPadding}
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			"t-dropdown bg-popover text-popover-foreground ring-foreground/10 min-w-36 rounded-xl shadow-raised ring-1 relative isolate z-50 max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto overscroll-contain",
+			// 14px around 10px rows inside a 4px inset, so the corners run concentric.
+			"t-dropdown bg-popover text-popover-foreground min-w-36 rounded-xl shadow-edge-raised relative isolate z-50 max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto overscroll-contain",
 			className,
 		)}
 		{...restProps}
@@ -35,7 +39,7 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1",
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1",
 			)}
 		>
 			{@render children?.()}

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

@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className,
 	)}
 	{...restProps}

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

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-md border bg-transparent py-1 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[0.8rem] relative data-[size=sm]:after:absolute data-[size=sm]:after:top-1/2 data-[size=sm]:after:left-0 data-[size=sm]:after:h-[max(100%,2rem)] data-[size=sm]:after:w-full data-[size=sm]:after:-translate-y-1/2 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-1 pr-2 pl-2.5 text-sm shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[0.8rem] relative data-[size=sm]:after:absolute data-[size=sm]:after:top-1/2 data-[size=sm]:after:left-0 data-[size=sm]:after:h-[max(100%,2rem)] data-[size=sm]:after:w-full data-[size=sm]:after:-translate-y-1/2 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/sheet/index.ts

@@ -8,6 +8,7 @@ import Header from "./sheet-header.svelte";
 import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
+import Body from "./sheet-body.svelte";
 
 export {
   Root,
@@ -20,6 +21,7 @@ export {
   Footer,
   Title,
   Description,
+  Body,
   //
   Root as Sheet,
   Close as SheetClose,
@@ -31,4 +33,5 @@ export {
   Footer as SheetFooter,
   Title as SheetTitle,
   Description as SheetDescription,
+  Body as SheetBody,
 };

package/src/shadcn/sheet/sheet-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 scrolling middle of a sheet, padded like the header and footer so the three
+     share one left edge. It takes the height the header and footer leave. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-body"
+	class={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -19,6 +19,7 @@
 		class: className,
 		side = "right",
 		showCloseButton = true,
+		floating,
 		portalProps,
 		children,
 		...restProps
@@ -26,20 +27,38 @@
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
 		showCloseButton?: boolean;
+		/**
+		 * From `sm` up the sheet floats 8px off the viewport edge at the overlay radius, like
+		 * SidePanel. On by default for left and right sheets; `floating={false}` keeps one flush.
+		 * Under `sm` it stays full bleed, since a phone needs the width.
+		 */
+		floating?: boolean;
 		children: Snippet;
 	} = $props();
 
+	// Side sheets float unless a caller opts out; a bottom sheet stays docked.
+	const floats = $derived(floating ?? side !== "bottom");
+
 	// Plain side utilities, not `data-[side=x]:` variants, because the variant outranks a
 	// caller's `sm:max-w-xl` and tailwind-merge can't dedupe across modifier sets.
 	const SIDE_CLASS: Record<Side, string> = {
 		// h-dvh, not h-full: on iOS Safari a fixed panel sizes against the layout
 		// viewport, which is taller than the visible area, so h-full hides the footer.
-		right: "inset-y-0 right-0 h-dvh w-3/4 border-l sm:max-w-sm",
-		left: "inset-y-0 left-0 h-dvh w-3/4 border-r sm:max-w-sm",
+		// No side border: `shadow-edge-overlay` draws the hairline and the depth.
+		right: "inset-y-0 right-0 h-dvh w-3/4 sm:max-w-sm",
+		left: "inset-y-0 left-0 h-dvh w-3/4 sm:max-w-sm",
 		// Full width, capped at 80vh so the overlay stays visible. The safe-area
 		// padding keeps the last row clear of the home indicator.
 		bottom:
-			"inset-x-0 bottom-0 h-auto max-h-[80vh] w-full rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]",
+			"inset-x-0 bottom-0 h-auto max-h-[80vh] w-full rounded-t-2xl pb-[env(safe-area-inset-bottom)]",
+	};
+
+	// Floating: an 8px inset (`2`) on the sheet's own sides, the height cut by both gutters,
+	// and the overlay radius on every corner (DESIGN.md rule 2).
+	const FLOATING_CLASS: Record<Side, string> = {
+		right: "sm:inset-y-2 sm:right-2 sm:h-[calc(100dvh-1rem)] sm:rounded-2xl",
+		left: "sm:inset-y-2 sm:left-2 sm:h-[calc(100dvh-1rem)] sm:rounded-2xl",
+		bottom: "sm:inset-x-2 sm:bottom-2 sm:w-[calc(100%-1rem)] sm:rounded-2xl",
 	};
 </script>
 
@@ -49,9 +68,12 @@
 		bind:ref
 		data-slot="sheet-content"
 		data-side={side}
+		data-floating={floats || undefined}
+		data-close={showCloseButton || undefined}
 		class={cn(
-			"t-sheet bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-overlay",
+			"t-sheet bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-edge-overlay",
 			SIDE_CLASS[side],
+			floats && FLOATING_CLASS[side],
 			className,
 		)}
 		{...restProps}
@@ -60,7 +82,7 @@
 		{#if showCloseButton}
 			<SheetPrimitive.Close data-slot="sheet-close">
 				{#snippet child({ props })}
-					<Button variant="ghost" class="absolute top-3 right-3" size="sm" icon {...props}>
+					<Button variant="ghost" class="absolute top-3 right-2" size="sm" icon {...props}>
 						<X size={16} />
 						<span class="sr-only">Close</span>
 					</Button>

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

@@ -6,14 +6,26 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		band = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		/**
+		 * A hairline on top and a quiet surface edge to edge, following the sheet's bottom
+		 * corners when it floats. A bare `data-band` attribute does the same.
+		 */
+		band?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	data-band={band || undefined}
+	class={cn(
+		"mt-auto flex flex-col gap-2 p-4",
+		"data-band:border-border data-band:bg-muted/50 data-band:border-t data-band:rounded-b-[inherit] data-band:flex-col-reverse data-band:sm:flex-row data-band:sm:justify-end",
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn("gap-0.5 p-4 flex flex-col", className)}
+	class={cn("flex flex-col gap-1 p-4 in-data-close:pe-12", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

package/src/shadcn/sheet/sheet.css

@@ -1,10 +1,12 @@
 /* The sheet slide: transitions.dev panel reveal, owned by the sheet. */
 
+/* The same 300ms open and 250ms close as before, named. DESIGN.md hasn't decided
+   whether the sheet takes Vaul's 500ms drawer timing, so the values hold. */
 :root {
-  --sheet-open-dur: 300ms;
-  --sheet-close-dur: 250ms;
+  --sheet-open-dur: var(--duration-slow);
+  --sheet-close-dur: var(--duration-fast);
   --sheet-translate: 100%;
-  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --sheet-ease: var(--ease-smooth-out);
 }
 
 .t-sheet {
@@ -41,8 +43,12 @@
     opacity var(--sheet-open-dur) var(--sheet-ease);
 }
 
+/* Reduced motion keeps the fade and drops the slide (DESIGN.md rule 13). */
 @media (prefers-reduced-motion: reduce) {
-  .t-sheet {
-    transition: none !important;
+  .t-sheet,
+  .t-sheet[data-side],
+  .t-sheet[data-state] {
+    transform: none;
+    transition-property: opacity;
   }
 }

package/src/shadcn/sidebar/sidebar-group-action.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 lg:after:hidden [&>svg]:shrink-0",
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:shadow-(--ring-focus) [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 lg:after:hidden [&>svg]:shrink-0",
 			className,
 		),
 		"data-slot": "sidebar-group-action",

package/src/shadcn/sidebar/sidebar-group-label.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground/90 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:pointer-events-none focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+			"text-sidebar-foreground/90 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:pointer-events-none focus-visible:shadow-(--ring-focus) [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
 			className,
 		),
 		"data-slot": "sidebar-group-label",

package/src/shadcn/sidebar/sidebar-inset.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-inset"
 	class={cn(
-		"bg-background transition-[margin] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:ml-0 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:shadow-sm lg:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex min-h-0 w-full flex-1 flex-col",
+		"bg-background transition-[margin] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:ml-0 lg:peer-data-[variant=inset]:rounded-3xl lg:peer-data-[variant=inset]:bg-card lg:peer-data-[variant=inset]:shadow-card lg:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex min-h-0 w-full flex-1 flex-col",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/sidebar/sidebar-menu-action.svelte

@@ -17,7 +17,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 lg:after:hidden [&>svg]:shrink-0",
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-foreground/4 hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:shadow-(--ring-focus) [&>svg]:size-4 flex items-center justify-center outline-hidden transition-[background-color,color,transform] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 lg:after:hidden [&>svg]:shrink-0",
 			showOnHover &&
 				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 lg:opacity-0",
 			className,

package/src/shadcn/sidebar/sidebar-menu-button.svelte

@@ -2,10 +2,10 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const sidebarMenuButtonVariants = tv({
-		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding,background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+		base: "ring-sidebar-ring hover:bg-sidebar-foreground/4 hover:text-sidebar-accent-foreground active:bg-sidebar-foreground/8 active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding,background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:shadow-(--ring-focus) data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
 		variants: {
 			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				default: "hover:bg-sidebar-foreground/4 hover:text-sidebar-accent-foreground",
 				outline:
 					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
 			},

package/src/shadcn/sidebar/sidebar-menu-sub-button.svelte

@@ -19,7 +19,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 any-pointer-coarse:h-11 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-foreground/4 hover:text-sidebar-accent-foreground active:bg-sidebar-foreground/8 active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 transition-[background-color,color] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] any-pointer-coarse:h-11 focus-visible:shadow-(--ring-focus) data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
 			className,
 		),
 		"data-slot": "sidebar-menu-sub-button",

package/src/shadcn/sidebar/sidebar-menu.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu"
 	data-sidebar="menu"
-	class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
+	class={cn("gap-0.5 flex w-full min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/shadcn/sidebar/sidebar.svelte

@@ -100,7 +100,7 @@
 			<div
 				data-sidebar="sidebar"
 				data-slot="sidebar-inner"
-				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+				class="bg-sidebar group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:shadow-card flex size-full flex-col"
 			>
 				{@render children?.()}
 			</div>