@olympusoss/canvas 2.16.0 → 2.18.0

package/package.json

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

package/src/components/atoms/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				destructive: "bg-destructive text-destructive-foreground shadow hover:bg-destructive/90",
 				outline:
 					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
 				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",

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/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/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/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/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/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

@@ -72,7 +72,9 @@
 	/* ──────────────────────────────────────────────────────────────
 	 * 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.
+	 * 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"],
@@ -81,7 +83,24 @@
 	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="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));
@@ -117,21 +136,42 @@
 		background: hsl(var(--glass-border) / var(--glass-border-alpha));
 	}
 
-	/* Inputs, kbd, codeblock — frosted to match. Less blur than full panes
-	 * so dense form rows stay readable. */
+	/* 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="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);
 	}
 
-	/* Popovers/sheets/drawers — slightly more opaque so the content stays
-	 * legible against the body aurora. */
+	/* 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="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);
 	}
 }

package/styles/tokens.css

@@ -259,6 +259,32 @@
 	--color-stat-purple: hsl(var(--stat-purple));
 	--color-stat-destructive: hsl(var(--stat-destructive));
 	--color-stat-amber: hsl(var(--stat-amber));
+
+	/* ── Shadow scale (per handoff canvas.css) ──────────────────
+	 * Two base tones, both single-layer at the small end:
+	 *   - `2xs` / `xs` / `sm`: 0 1px 2px / 5% — inputs, outline /
+	 *     secondary buttons (matches handoff `.input` and
+	 *     `.btn-outline` / `.btn-secondary`).
+	 *   - DEFAULT (`shadow`): 0 1px 3px / 8% — cards and primary /
+	 *     destructive buttons (matches handoff `.card`,
+	 *     `.btn-default`, `.btn-destructive`).
+	 *   - `md` / `lg` / `xl`: two-layer stacks softened to 8% / 6%
+	 *     opacity so popovers, dialogs, and drawers sit on the same
+	 *     depth ramp as cards instead of feeling heavier (Tailwind
+	 *     defaults use 10%).
+	 *   - `inner`: keeps Tailwind default (no handoff override).
+	 *
+	 * Overriding the @theme tokens propagates through every Canvas
+	 * component class (`shadow-sm`, `shadow-md`, etc.) without
+	 * touching component sources.
+	 */
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
+	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
+	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.06);
 }
 
 @keyframes orb-float-1 {