@waveso/ui 0.17.0 → 0.18.0

package/dist/menu.js

@@ -3,6 +3,7 @@ import { cn } from "./lib/utils.js";
 import { CheckIcon, ChevronRightIcon } from "./lib/internal-icons.js";
 import { resolveFinalFocus } from "./lib/focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
 //#region src/menu.tsx
 function Menu(props) {
@@ -23,19 +24,35 @@ function MenuTrigger(props) {
 		...props
 	});
 }
-function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, restoreFocusOnClose, finalFocus, ...props }) {
+function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, restoreFocusOnClose, finalFocus, onKeyDown, children, ...props }) {
+	const listRef = React.useRef(null);
 	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 		"data-slot": "menu-positioner",
-		className: "isolate z-50 outline-hidden",
+		className: "isolate z-50",
 		align,
 		alignOffset,
 		side,
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 			"data-slot": "menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
+			className: cn("motion-pop-md border-edge bg-elevated text-contrast z-50 flex max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 flex-col overflow-hidden rounded-md shadow-md border focus-visible:outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
-			...props
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				const list = listRef.current;
+				if (list && !event.defaultPrevented && event.target === event.currentTarget && (event.key === "PageDown" || event.key === "PageUp")) {
+					event.preventDefault();
+					const direction = event.key === "PageDown" ? 1 : -1;
+					list.scrollBy({ top: direction * list.clientHeight * .875 });
+				}
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				"data-slot": "menu-list",
+				className: "scroll-fade supports-[animation-timeline:scroll()]:scrollbar-none min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1",
+				children
+			})
 		})
 	}) });
 }
@@ -58,7 +75,7 @@ function MenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-highlight data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -72,12 +89,12 @@ function MenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
 		"data-slot": "menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight data-popup-open:bg-highlight flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted data-popup-open:bg-highlighted flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm focus:outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
 }
-function MenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
+function MenuSubContent({ align = "start", alignOffset = -5, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuContent, {
 		"data-slot": "menu-sub-content",
 		className: cn("w-auto min-w-24 shadow-md", className),
@@ -92,7 +109,7 @@ function MenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
 		"data-slot": "menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -112,7 +129,7 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
 		"data-slot": "menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "menu-radio-item-indicator",
@@ -124,7 +141,7 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 function MenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu$1.Separator, {
 		"data-slot": "menu-separator",
-		className: cn("bg-contour -mx-1 my-1 h-px", className),
+		className: cn("bg-line -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/menubar.js

@@ -7,7 +7,7 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 function Menubar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1, {
 		"data-slot": "menubar",
-		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-shade p-1", className),
+		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-contour p-1", className),
 		...props
 	});
 }
@@ -35,7 +35,7 @@ function MenubarTrigger({ ...props }) {
 		...props
 	});
 }
-function MenubarContent({ align = "start", alignOffset = -4, sideOffset = 8, className, ...props }) {
+function MenubarContent({ align = "start", alignOffset = -5, sideOffset = 8, className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuContent, {
 		"data-slot": "menubar-content",
 		className: cn("w-auto", className),

package/dist/popover.js

@@ -46,7 +46,7 @@ function PopoverContent({ className, positionerClassName, align = "center", alig
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
 			"data-slot": "popover-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 flex w-72 flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast border-edge z-50 flex w-72 flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md border focus-visible:outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})

package/dist/preview-card.js

@@ -38,7 +38,7 @@ function PreviewCardContent({ className, positionerClassName, side = "bottom", s
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
 			"data-slot": "preview-card-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 w-64 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast border-edge z-50 w-64 rounded-md p-2.5 text-sm shadow-md border focus-visible:outline-hidden", className),
 			...props
 		})
 	}) });

package/dist/radio.js

@@ -6,7 +6,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 function Radio({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		"data-slot": "radio",
-		className: cn("cursor-clickable bg-shade border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioIndicator, {})
 	});

package/dist/resizable.js

@@ -41,11 +41,11 @@ function ResizableHandle({ className, grip = false, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "resizable-handle",
 		elementRef: ref,
-		className: cn("group/resizable-handle bg-contour z-10 flex items-center justify-center motion-color outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 data-[separator=active]:bg-focus data-[separator=hover]:bg-focus data-[separator=disabled]:pointer-events-none aria-[orientation=horizontal]:h-px aria-[orientation=vertical]:w-px", className),
+		className: cn("group/resizable-handle bg-line z-10 flex items-center justify-center motion-color focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 data-[separator=active]:bg-focus data-[separator=hover]:bg-focus data-[separator=disabled]:pointer-events-none aria-[orientation=horizontal]:h-px aria-[orientation=vertical]:w-px", className),
 		...props,
 		children: grip && /* @__PURE__ */ jsx("div", {
 			"data-slot": "resizable-handle-grip",
-			className: "bg-shade h-6 w-1 shrink-0 rounded-full motion-color group-data-[separator=active]/resizable-handle:bg-focus group-data-[separator=hover]/resizable-handle:bg-focus group-data-[separator=disabled]/resizable-handle:opacity-30 group-aria-[orientation=horizontal]/resizable-handle:h-1 group-aria-[orientation=horizontal]/resizable-handle:w-6"
+			className: "bg-neutral h-6 w-1 shrink-0 rounded-full motion-color group-data-[separator=active]/resizable-handle:bg-focus group-data-[separator=hover]/resizable-handle:bg-focus group-data-[separator=disabled]/resizable-handle:opacity-30 group-aria-[orientation=horizontal]/resizable-handle:h-1 group-aria-[orientation=horizontal]/resizable-handle:w-6"
 		})
 	});
 }

package/dist/scroll-area.js

@@ -4,16 +4,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/scroll-area.tsx
 /**
-* The edge fade is a mask, so the content itself turns transparent and
-* whatever is behind it shows through: no shadow color to match, in any
-* theme. Each edge has a fixed fade (`--scroll-area-fade`) that switches on
-* when Base UI marks that edge as having more content (`data-overflow-*`):
-* its edge opacity goes from 1 (none) to 0 (fully faded).
-* The two axes are intersected; the horizontal one flips in right-to-left
-* layouts, where Base UI's "start" is the right edge.
-*/
-const FADE_MASK = "[--scroll-area-fade-x:to_right] rtl:[--scroll-area-fade-x:to_left] data-overflow-y-start:[--scroll-area-fade-top:0] data-overflow-y-end:[--scroll-area-fade-bottom:0] data-overflow-x-start:[--scroll-area-fade-start:0] data-overflow-x-end:[--scroll-area-fade-end:0] [mask-composite:intersect] [mask-image:linear-gradient(to_bottom,rgb(0_0_0/var(--scroll-area-fade-top,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-bottom,1))),linear-gradient(var(--scroll-area-fade-x),rgb(0_0_0/var(--scroll-area-fade-start,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-end,1)))]";
-/**
 * A scrollable region with styled scrollbars. Both scrollbars are built in:
 * Base UI only mounts one when its axis overflows, so pass content and the
 * right bars appear. They fade in while the area is hovered or scrolling.
@@ -26,7 +16,7 @@ function ScrollArea({ className, children, fade = true, ...props }) {
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: cn("size-full rounded-[inherit] outline-hidden", fade && FADE_MASK),
+				className: cn("size-full rounded-[inherit] focus-visible:outline-hidden", fade && "scroll-fade"),
 				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
 					"data-slot": "scroll-area-content",
 					children
@@ -46,7 +36,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "bg-shade relative flex-1 rounded-full"
+			className: "bg-neutral relative flex-1 rounded-full"
 		})
 	});
 }

package/dist/select.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.tsx
-const selectTriggerVariants = cva("data-placeholder:text-soft bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const selectTriggerVariants = cva("data-placeholder:text-subtle bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color focus-visible:outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs",
 		sm: "h-8 px-3 text-sm",
@@ -36,7 +36,7 @@ function SelectPositioner({ className, ...props }) {
 function SelectList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.List, {
 		"data-slot": "select-list",
-		className,
+		className: cn("scroll-fade supports-[animation-timeline:scroll()]:scrollbar-none min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain [--scroll-fade-inset:1.5rem] in-data-[side=none]:scroll-py-0", className),
 		...props
 	});
 }
@@ -76,7 +76,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
+			className: cn("motion-pop-md bg-elevated text-contrast border-edge relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) flex flex-col overflow-hidden rounded-md shadow-md border", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -96,7 +96,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
-		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: cn("data-highlighted:bg-highlighted relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm data-highlighted:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
 			"data-slot": "select-item-text",
@@ -114,7 +114,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		"data-slot": "select-separator",
-		className: cn("bg-contour pointer-events-none -mx-1 my-1 h-px", className),
+		className: cn("bg-line pointer-events-none -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/separator.js

@@ -7,7 +7,7 @@ function Separator({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "separator",
 		orientation,
-		className: cn("bg-contour shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
+		className: cn("bg-line shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
 		...props
 	});
 }

package/dist/sidebar.js

@@ -163,14 +163,14 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-contour" + (side === "left" ? " after:right-0" : " after:left-0"), className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-line" + (side === "left" ? " after:right-0" : " after:left-0"), className),
 			...props,
 			children: /* @__PURE__ */ jsx(TooltipProvider, {
 				delay: 0,
 				closeDelay: 300,
 				children: /* @__PURE__ */ jsx("div", {
 					"data-slot": "sidebar-inner",
-					className: "bg-surface group-data-[variant=floating]:ring-contour group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col",
+					className: "bg-surface group-data-[variant=floating]:border-edge group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:border flex size-full flex-col",
 					children
 				})
 			})
@@ -204,7 +204,7 @@ function SidebarRail({ className, ...props }) {
 		tabIndex: -1,
 		onClick: toggleSidebar,
 		title: "Toggle Sidebar",
-		className: cn("hover:after:bg-contour absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		className: cn("hover:after:bg-line absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
 		...props
 	});
 }
@@ -239,7 +239,7 @@ function SidebarFooter({ className, ...props }) {
 function SidebarSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "sidebar-separator",
-		className: cn("bg-contour mx-2 data-[orientation=horizontal]:w-auto", className),
+		className: cn("bg-line mx-2 data-[orientation=horizontal]:w-auto", className),
 		...props
 	});
 }
@@ -265,7 +265,7 @@ function SidebarGroup({ className, ...props }) {
 function SidebarGroupLabel({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("text-contrast/70 ring-focus/50 h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-3 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast/70 ring-focus/50 h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-3 [&>svg]:size-4 flex shrink-0 items-center focus-visible:outline-hidden [&>svg]:shrink-0", className) }, props),
 		render,
 		state: { slot: "sidebar-group-label" }
 	});
@@ -273,7 +273,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
 function SidebarGroupAction({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlighted absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center focus-visible:outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
 		render,
 		state: { slot: "sidebar-group-action" }
 	});
@@ -299,11 +299,11 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-primary data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden focus-visible:outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "",
-			outline: "bg-foundation hover:bg-highlight ring-1 ring-contour hover:ring-focus"
+			outline: "bg-foundation hover:bg-highlighted border border-contour hover:border-focus"
 		},
 		size: {
 			default: "h-11 text-sm",
@@ -344,7 +344,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight peer-data-active/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlighted peer-data-active/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center focus-visible:outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
 		render,
 		state: { slot: "sidebar-menu-action" }
 	});
@@ -373,7 +373,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "sidebar-menu-sub",
-		className: cn("border-contour ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
+		className: cn("border-line ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
 		...props
 	});
 }
@@ -387,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
 function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 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-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden focus-visible:outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
 		render,
 		state: {
 			slot: "sidebar-menu-sub-button",

package/dist/slider.js

@@ -26,7 +26,7 @@ function Slider({ className, controlClassName, defaultValue, value, min = 0, max
 			className: cn("relative flex w-full touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
 			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
 				"data-slot": "slider-track",
-				className: "bg-shade relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
+				className: "bg-neutral relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
 				children: /* @__PURE__ */ jsx(Slider$1.Indicator, {
 					"data-slot": "slider-range",
 					className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
@@ -34,7 +34,7 @@ function Slider({ className, controlClassName, defaultValue, value, min = 0, max
 			}), Array.from({ length: resolvedValues.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				"data-slot": "slider-thumb",
 				"aria-label": getThumbAriaLabel ? getThumbAriaLabel(index) : ariaLabel,
-				className: "ring-focus/50 relative block data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-6 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-4 shrink-0 rounded-full border border-shade bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
+				className: "ring-focus/50 relative block data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-6 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-4 shrink-0 rounded-full border border-contour bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
 			}, index))]
 		})
 	});