@olympusoss/canvas 2.15.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olympusoss/canvas",
-	"version": "2.15.0",
+	"version": "2.17.0",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",

package/src/components/atoms/input.tsx

@@ -76,6 +76,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 		return (
 			<input
 				type={type}
+				data-slot="input"
 				className={cn(
 					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 					className,

package/src/components/molecules/alert.tsx

@@ -40,7 +40,13 @@ export interface AlertProps
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 	({ className, variant, ...props }, ref) => (
-		<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+		<div
+			ref={ref}
+			role="alert"
+			data-slot="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
 	),
 );
 Alert.displayName = "Alert";

package/src/components/molecules/calendar.tsx

@@ -44,6 +44,7 @@ function Calendar({
 	return (
 		<DayPicker
 			showOutsideDays={showOutsideDays}
+			data-slot="calendar"
 			className={cn(
 				"bg-background group/calendar p-4 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,

package/src/components/molecules/card.tsx

@@ -15,6 +15,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
+		data-slot="card"
 		className={cn("rounded-xl border border-border bg-card text-card-foreground shadow", className)}
 		{...props}
 	/>

package/src/components/molecules/code-block.tsx

@@ -32,6 +32,7 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
 		return (
 			<div
 				ref={ref}
+				data-slot="code-block"
 				className={cn(
 					"relative overflow-hidden rounded-md",
 					isDark ? "border border-border" : "bg-muted",

package/src/components/molecules/empty-state.tsx

@@ -28,6 +28,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
 		return (
 			<div
 				ref={ref}
+				data-slot="empty-state"
 				className={cn(
 					"flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground",
 					className,

package/src/components/molecules/section-card.tsx

@@ -61,7 +61,7 @@ export function SectionCard({
 						</div>
 						{resolvedActions && <div className="flex items-center gap-2">{resolvedActions}</div>}
 					</CardHeader>
-					<div className="mx-5 mb-3.5 h-px bg-border" />
+					<div data-slot="card-divider" className="mx-5 mb-3.5 h-px bg-border" />
 				</>
 			)}
 			<CardContent className={cn(padding ? "px-5 pb-[18px] pt-0" : "p-0")}>

package/src/components/molecules/terminal.tsx

@@ -23,6 +23,7 @@ const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
 	({ title, children, className, ...props }, ref) => (
 		<div
 			ref={ref}
+			data-slot="terminal"
 			className={cn(
 				"overflow-hidden rounded-xl border border-border shadow-[0_30px_60px_-20px_rgb(0_0_0/0.35)]",
 				className,

package/src/components/molecules/tooltip.tsx

@@ -136,6 +136,7 @@ const TooltipContent = React.forwardRef<
 		<TooltipPrimitive.Portal container={container ?? undefined}>
 			<TooltipPrimitive.Content
 				ref={ref}
+				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
 					"z-50 max-w-xs overflow-hidden rounded-md border border-border/50 bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 origin-[var(--radix-tooltip-content-transform-origin)]",

package/src/components/organisms/accordion.tsx

@@ -79,7 +79,12 @@ const AccordionItem = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Item>,
 	AccordionItemProps
 >(({ className, ...props }, ref) => (
-	<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+	<AccordionPrimitive.Item
+		ref={ref}
+		data-slot="accordion-item"
+		className={cn("border-b", className)}
+		{...props}
+	/>
 ));
 AccordionItem.displayName = "AccordionItem";
 

package/src/components/organisms/alert-dialog.tsx

@@ -123,6 +123,7 @@ const AlertDialogContent = React.forwardRef<
 			<AlertDialogOverlay />
 			<AlertDialogPrimitive.Content
 				ref={ref}
+				data-slot="alert-dialog-content"
 				className={cn(
 					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
 					className,

package/src/components/organisms/command.tsx

@@ -14,6 +14,7 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive
 		ref={ref}
+		data-slot="command"
 		className={cn(
 			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 			className,

package/src/components/organisms/context-menu.tsx

@@ -127,6 +127,7 @@ const ContextMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<ContextMenuPrimitive.SubContent
 		ref={ref}
+		data-slot="context-menu-sub-content"
 		className={cn(
 			"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
 			className,
@@ -161,6 +162,7 @@ const ContextMenuContent = React.forwardRef<
 		<ContextMenuPrimitive.Portal container={container ?? undefined}>
 			<ContextMenuPrimitive.Content
 				ref={ref}
+				data-slot="context-menu-content"
 				className={cn(
 					"z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
 					className,

package/src/components/organisms/data-table.tsx

@@ -237,7 +237,7 @@ function DataTable<TData>({
 				</div>
 			)}
 
-			<div className="rounded-md border border-border">
+			<div data-slot="data-table" className="rounded-md border border-border">
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (

package/src/components/organisms/dialog.tsx

@@ -191,6 +191,7 @@ const DialogContent = React.forwardRef<
 			<DialogOverlay />
 			<DialogPrimitive.Content
 				ref={ref}
+				data-slot="dialog-content"
 				className={cn(
 					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
 					className,

package/src/components/organisms/drawer.tsx

@@ -60,6 +60,7 @@ const DrawerContent = React.forwardRef<
 		<DrawerOverlay />
 		<DrawerPrimitive.Content
 			ref={ref}
+			data-slot="drawer-content"
 			className={cn(
 				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-border bg-background",
 				className,

package/src/components/organisms/dropdown-menu.tsx

@@ -163,6 +163,7 @@ const DropdownMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
+		data-slot="dropdown-menu-sub-content"
 		className={cn(
 			"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
 			className,
@@ -227,6 +228,7 @@ const DropdownMenuContent = React.forwardRef<
 		<DropdownMenuPrimitive.Portal container={container ?? undefined}>
 			<DropdownMenuPrimitive.Content
 				ref={ref}
+				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				className={cn(
 					"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",

package/src/components/organisms/hover-card.tsx

@@ -100,6 +100,7 @@ const HoverCardContent = React.forwardRef<
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
 	<HoverCardPrimitive.Content
 		ref={ref}
+		data-slot="hover-card-content"
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(

package/src/components/organisms/menubar.tsx

@@ -33,6 +33,7 @@ const Menubar = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Root>,
 	({ className, ...props }, ref) => (
 		<MenubarPrimitive.Root
 			ref={ref}
+			data-slot="menubar"
 			className={cn(
 				"flex h-9 items-center space-x-1 rounded-md border border-border bg-background p-1 shadow-sm",
 				className,
@@ -216,6 +217,7 @@ const MenubarSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<MenubarPrimitive.SubContent
 		ref={ref}
+		data-slot="menubar-sub-content"
 		className={cn(
 			"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
 			className,
@@ -279,6 +281,7 @@ const MenubarContent = React.forwardRef<
 		<MenubarPrimitive.Portal container={container ?? undefined}>
 			<MenubarPrimitive.Content
 				ref={ref}
+				data-slot="menubar-content"
 				align={align}
 				alignOffset={alignOffset}
 				sideOffset={sideOffset}

package/src/components/organisms/navigation-menu.tsx

@@ -185,6 +185,7 @@ const NavigationMenuViewport = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<div className={cn("absolute left-0 top-full flex justify-center")}>
 		<NavigationMenuPrimitive.Viewport
+			data-slot="navigation-menu-viewport"
 			className={cn(
 				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 				className,

package/src/components/organisms/popover.tsx

@@ -132,6 +132,7 @@ const PopoverContent = React.forwardRef<
 		<PopoverPrimitive.Portal container={container ?? undefined}>
 			<PopoverPrimitive.Content
 				ref={ref}
+				data-slot="popover-content"
 				align={align}
 				sideOffset={sideOffset}
 				className={cn(

package/src/components/organisms/select.tsx

@@ -187,6 +187,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Portal container={container ?? undefined}>
 			<SelectPrimitive.Content
 				ref={ref}
+				data-slot="select-content"
 				className={cn(
 					"relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-select-content-transform-origin)]",
 					position === "popper" &&

package/src/components/organisms/sheet.tsx

@@ -166,6 +166,7 @@ const SheetContent = React.forwardRef<
 			<SheetOverlay />
 			<SheetPrimitive.Content
 				ref={ref}
+				data-slot="sheet-content"
 				className={cn(sheetVariants({ side }), className)}
 				{...props}
 			>

package/src/components/organisms/sidebar.tsx

@@ -209,6 +209,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
 		if (collapsible === "none") {
 			return (
 				<div
+					data-slot="sidebar"
 					className={cn(
 						"flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground",
 						className,
@@ -281,6 +282,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
 				>
 					<div
 						data-sidebar="sidebar"
+						data-slot="sidebar"
 						className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
 					>
 						{children}

package/src/components/organisms/tabs.tsx

@@ -53,6 +53,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
 	({ className, ...props }, ref) => (
 		<TabsPrimitive.List
 			ref={ref}
+			data-slot="tabs-list"
 			className={cn(
 				"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
 				className,

package/styles/glass.css

@@ -0,0 +1,177 @@
+/* ---------- Glass surface mode ----------
+ *
+ * Activated by `html[data-surface="glass"]`. The conceit: an aurora-tinted
+ * backdrop shows through every chrome surface (sidebar, topbar, cards,
+ * tables) via `backdrop-filter: blur(...)`. Surfaces become tinted glass,
+ * with a low-alpha card color so the page palette bleeds through, plus a
+ * 1-px inner highlight on the top edge to suggest a refractive lip.
+ * Borders drop to white/black at low alpha so the layout reads as layered
+ * panes rather than rectangles drawn on flat paint.
+ *
+ * Two palettes:
+ *   - Light: pastel peach + sky + lavender washes on near-white
+ *   - Dark : deep indigo + violet + teal washes on near-black
+ *
+ * Surfaces opt in via `data-slot` attributes already present on Canvas
+ * components (`card`, `sidebar`, `data-table`, `input`, `popover-content`,
+ * `sheet-content`, `drawer-content`, `empty-state`, `code-block`). Consumer
+ * apps activate the mode by toggling the `data-surface` attribute on
+ * `<html>` (e.g. `document.documentElement.dataset.surface = "glass"`).
+ *
+ * Mirrors the Athena design handoff's `app.css` glass block; do not
+ * tighten these values without checking against the handoff bundle.
+ */
+
+@layer base {
+	html[data-surface="glass"] {
+		--glass-tint: 0 0% 100%; /* card tint base */
+		--glass-tint-alpha: 0.55;
+		--glass-border: 0 0% 100%;
+		--glass-border-alpha: 0.45;
+		--glass-highlight: 0 0% 100%;
+		--glass-highlight-alpha: 0.55;
+		--glass-shadow: 220 30% 20%;
+		--glass-blur: 18px;
+		--glass-saturate: 140%;
+	}
+
+	html[data-surface="glass"].dark {
+		--glass-tint: 222 22% 18%;
+		--glass-tint-alpha: 0.55;
+		--glass-border: 0 0% 100%;
+		--glass-border-alpha: 0.1;
+		--glass-highlight: 0 0% 100%;
+		--glass-highlight-alpha: 0.1;
+		--glass-shadow: 222 60% 4%;
+	}
+
+	/* ──────────────────────────────────────────────────────────────
+	 * Aurora backdrop — three soft radial washes anchored to body so
+	 * they remain stable across route changes and ignore the inner
+	 * shell's flat fill. The surfaces above are translucent so this
+	 * is what users actually see "through" the glass.
+	 * ──────────────────────────────────────────────────────────── */
+	html[data-surface="glass"] body {
+		background:
+			radial-gradient(60% 50% at 12% 10%, hsl(28 100% 80% / 0.55), transparent 60%),
+			radial-gradient(55% 55% at 88% 8%, hsl(210 100% 78% / 0.55), transparent 60%),
+			radial-gradient(70% 60% at 50% 100%, hsl(270 90% 82% / 0.45), transparent 65%),
+			hsl(220 30% 97%);
+		background-attachment: fixed;
+	}
+
+	html[data-surface="glass"].dark body {
+		background:
+			radial-gradient(55% 50% at 10% 8%, hsl(245 90% 60% / 0.4), transparent 60%),
+			radial-gradient(50% 55% at 92% 12%, hsl(280 85% 55% / 0.35), transparent 60%),
+			radial-gradient(70% 60% at 50% 100%, hsl(190 90% 45% / 0.28), transparent 70%),
+			hsl(222 30% 6%);
+		background-attachment: fixed;
+	}
+
+	/* ──────────────────────────────────────────────────────────────
+	 * Frosted-pane mixin. Same translucent fill, blur, and refractive
+	 * highlight on every load-bearing surface so the whole layout
+	 * reads as one stack of glass panes. Includes cards, chrome,
+	 * dialogs, dropdown panels, popovers, tooltips, alerts, calendar,
+	 * terminal, menubar, navigation-menu, tabs list.
+	 * ──────────────────────────────────────────────────────────── */
+	html[data-surface="glass"] [data-slot="card"],
+	html[data-surface="glass"] [data-slot="sidebar"],
+	html[data-surface="glass"] [data-slot="topbar"],
+	html[data-surface="glass"] [data-slot="data-table"],
+	html[data-surface="glass"] [data-slot="empty-state"],
+	html[data-surface="glass"] [data-slot="popover-content"],
+	html[data-surface="glass"] [data-slot="sheet-content"],
+	html[data-surface="glass"] [data-slot="drawer-content"],
+	html[data-surface="glass"] [data-slot="alert"],
+	html[data-surface="glass"] [data-slot="alert-dialog-content"],
+	html[data-surface="glass"] [data-slot="dialog-content"],
+	html[data-surface="glass"] [data-slot="dropdown-menu-content"],
+	html[data-surface="glass"] [data-slot="dropdown-menu-sub-content"],
+	html[data-surface="glass"] [data-slot="context-menu-content"],
+	html[data-surface="glass"] [data-slot="context-menu-sub-content"],
+	html[data-surface="glass"] [data-slot="hover-card-content"],
+	html[data-surface="glass"] [data-slot="select-content"],
+	html[data-surface="glass"] [data-slot="menubar"],
+	html[data-surface="glass"] [data-slot="menubar-content"],
+	html[data-surface="glass"] [data-slot="menubar-sub-content"],
+	html[data-surface="glass"] [data-slot="navigation-menu-viewport"],
+	html[data-surface="glass"] [data-slot="tooltip-content"],
+	html[data-surface="glass"] [data-slot="command"],
+	html[data-surface="glass"] [data-slot="calendar"],
+	html[data-surface="glass"] [data-slot="terminal"] {
+		background: hsl(var(--glass-tint) / var(--glass-tint-alpha));
+		backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+		box-shadow:
+			inset 0 1px 0 hsl(var(--glass-highlight) / var(--glass-highlight-alpha)),
+			0 1px 2px hsl(var(--glass-shadow) / 0.06),
+			0 8px 24px -12px hsl(var(--glass-shadow) / 0.18);
+	}
+
+	/* Sidebar and topbar take a slightly less-opaque tint so they
+	 * read as chrome rather than content cards. */
+	html[data-surface="glass"] [data-slot="sidebar"],
+	html[data-surface="glass"] [data-slot="topbar"] {
+		background: hsl(var(--glass-tint) / calc(var(--glass-tint-alpha) - 0.1));
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+
+	/* DataTable internal rules — header tint, row separators, hover. */
+	html[data-surface="glass"] [data-slot="data-table"] thead tr {
+		background: hsl(var(--glass-highlight) / 0.1);
+		border-bottom: 1px solid hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+	html[data-surface="glass"] [data-slot="data-table"] tbody tr {
+		border-bottom: 1px solid hsl(var(--glass-border) / calc(var(--glass-border-alpha) - 0.2));
+	}
+	html[data-surface="glass"] [data-slot="data-table"] tbody tr:hover {
+		background: hsl(var(--glass-highlight) / 0.1);
+	}
+
+	/* SectionCard divider matches the border tone. */
+	html[data-surface="glass"] [data-slot="card"] [data-slot="card-divider"] {
+		background: hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+
+	/* Inputs, kbd, codeblock, tabs list — frosted to match. Less blur
+	 * than full panes so dense form rows stay readable. */
+	html[data-surface="glass"] [data-slot="input"],
+	html[data-surface="glass"] [data-slot="code-block"],
+	html[data-surface="glass"] [data-slot="tabs-list"] {
+		background: hsl(var(--glass-tint) / 0.35);
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+	}
+
+	/* Accordion items use only a bottom border — re-tint that border so it
+	 * tracks the glass palette instead of the solid border token. */
+	html[data-surface="glass"] [data-slot="accordion-item"] {
+		border-bottom-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+
+	/* Popovers / sheets / drawers / dialog-like panels — slightly more
+	 * opaque so the content stays legible against the body aurora.
+	 * Overrides the base translucent fill from the frosted-pane block. */
+	html[data-surface="glass"] [data-slot="popover-content"],
+	html[data-surface="glass"] [data-slot="sheet-content"],
+	html[data-surface="glass"] [data-slot="drawer-content"],
+	html[data-surface="glass"] [data-slot="alert-dialog-content"],
+	html[data-surface="glass"] [data-slot="dialog-content"],
+	html[data-surface="glass"] [data-slot="dropdown-menu-content"],
+	html[data-surface="glass"] [data-slot="dropdown-menu-sub-content"],
+	html[data-surface="glass"] [data-slot="context-menu-content"],
+	html[data-surface="glass"] [data-slot="context-menu-sub-content"],
+	html[data-surface="glass"] [data-slot="hover-card-content"],
+	html[data-surface="glass"] [data-slot="select-content"],
+	html[data-surface="glass"] [data-slot="menubar-content"],
+	html[data-surface="glass"] [data-slot="menubar-sub-content"],
+	html[data-surface="glass"] [data-slot="navigation-menu-viewport"],
+	html[data-surface="glass"] [data-slot="tooltip-content"],
+	html[data-surface="glass"] [data-slot="command"] {
+		background: hsl(var(--glass-tint) / 0.85);
+	}
+}