@marigold/theme-rui 5.0.1 → 5.2.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-//#region rolldown:runtime
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+//#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
-var __export = (all, symbols) => {
+var __exportAll = (all, no_symbols) => {
 	let target = {};
 	for (var name in all) {
 		__defProp(target, name, {
@@ -9,92 +9,106 @@ var __export = (all, symbols) => {
 			enumerable: true
 		});
 	}
-	if (symbols) {
+	if (!no_symbols) {
 		__defProp(target, Symbol.toStringTag, { value: "Module" });
 	}
 	return target;
 };
 
 //#endregion
-let __marigold_system = require("@marigold/system");
+let _marigold_system = require("@marigold/system");
 
 //#region src/components/Accordion.styles.ts
 const Accordion = {
-	container: (0, __marigold_system.cva)("flex-col", {
+	container: (0, _marigold_system.cva)({
+		base: "flex-col",
 		variants: { variant: {
 			default: "",
 			card: "space-y-2"
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	item: (0, __marigold_system.cva)("", {
+	item: (0, _marigold_system.cva)({
 		variants: { variant: {
 			default: ["bg-background border-b last:border-b-0 border-border"],
 			card: ["ui-surface shadow-elevation-raised py-1 outline-none", "has-[[slot=trigger]:focus-visible]:ui-state-focus outline-none"]
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	header: (0, __marigold_system.cva)([
-		"flex w-full items-center justify-between gap-4 py-2 rounded-md cursor-pointer text-foreground",
-		"text-left text-base font-semibold leading-6 transition-all",
-		"hover:no-underline",
-		"disabled:cursor-not-allowed disabled:text-disabled-foreground"
-	], {
+	header: (0, _marigold_system.cva)({
+		base: [
+			"flex w-full items-center justify-between gap-4 py-2 rounded-md cursor-pointer text-foreground",
+			"text-left text-base font-semibold leading-6 transition-all",
+			"hover:no-underline",
+			"disabled:cursor-not-allowed disabled:text-disabled-foreground"
+		],
 		variants: { variant: {
 			default: "focus-visible:ui-state-focus outline-none",
 			card: "px-4 outline-none"
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	panel: (0, __marigold_system.cva)("overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250"),
-	content: (0, __marigold_system.cva)("pb-2", { variants: { variant: {
-		default: "",
-		card: "px-4"
-	} } }),
-	icon: (0, __marigold_system.cva)("pointer-events-none shrink-0 opacity-60 transition-transform duration-250")
+	panel: (0, _marigold_system.cva)({ base: "overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250" }),
+	content: (0, _marigold_system.cva)({
+		base: "pb-2",
+		variants: { variant: {
+			default: "",
+			card: "px-4"
+		} }
+	}),
+	icon: (0, _marigold_system.cva)({ base: "pointer-events-none shrink-0 text-muted-foreground transition-transform duration-250" })
 };
 
 //#endregion
 //#region src/components/ActionBar.styles.ts
 const ActionBar = {
-	container: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: [
 		"relative w-fit",
-		"flex items-center justify-between justify-items-center gap-4",
+		"flex items-center justify-between justify-items-center gap-16",
 		"px-6 py-3",
-		"shadow-lg",
-		"bg-brand text-brand-foreground border-brand",
-		"rounded-lg font-medium transition-colors",
-		"focus-visible:util-focus-ring outline-none disabled:util-disabled",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0"
-	]),
-	count: (0, __marigold_system.cva)([
+		"shadow-elevation-overlay",
+		"ui-surface-contrast",
+		"rounded-full font-medium",
+		"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"entering:animate-slide-in",
+		"exiting:animate-slide-out"
+	] }),
+	selection: (0, _marigold_system.cva)({ base: "flex items-center gap-1" }),
+	count: (0, _marigold_system.cva)({ base: "flex items-center text-sm font-medium whitespace-nowrap" }),
+	toolbar: (0, _marigold_system.cva)({ base: [
 		"flex items-center",
-		"text-sm font-medium",
-		"whitespace-nowrap"
-	]),
-	actions: (0, __marigold_system.cva)([
-		"flex items-center gap-2",
 		"flex-1 justify-center",
-		"overflow-x-auto"
-	]),
-	clearButton: (0, __marigold_system.cva)([
-		"shrink-0",
-		"size-8",
-		"transition-colors"
-	])
+		"overflow-x-auto",
+		"p-1 -m-1"
+	] }),
+	clearButton: (0, _marigold_system.cva)({ base: [
+		"inline-flex items-center justify-center",
+		"shrink-0 size-8 rounded-full cursor-pointer transition-colors",
+		"hover:bg-current/10",
+		"focus-visible:ui-state-focus outline-none",
+		"disabled:ui-state-disabled",
+		"[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	] }),
+	actionButton: (0, _marigold_system.cva)({ base: [
+		"ui-button-base",
+		"hover:bg-current/10",
+		"text-sm h-button p-squish-relaxed [&_svg]:size-4"
+	] })
 };
 
 //#endregion
 //#region src/components/Autocomplete.styles.ts
-const Autocomplete = { mobileTrigger: (0, __marigold_system.cva)("group/input relative flex items-center") };
+const Autocomplete = { mobileTrigger: (0, _marigold_system.cva)({ base: "group/input relative flex items-center" }) };
 
 //#endregion
 //#region src/components/Badge.styles.ts
-const Badge = (0, __marigold_system.cva)([
-	"inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
-	"focus-visible:state-focus outline-none",
-	"has-[svg]:gap-1"
-], {
+const Badge = (0, _marigold_system.cva)({
+	base: [
+		"inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
+		"focus-visible:ui-state-focus outline-none",
+		"has-[svg]:gap-1"
+	],
 	variants: { variant: {
 		default: "bg-muted text-foreground border border-border",
 		primary: "bg-brand text-brand-foreground ",
@@ -110,31 +124,24 @@ const Badge = (0, __marigold_system.cva)([
 
 //#endregion
 //#region src/components/Button.styles.ts
-const buttonBase = [
-	"inline-flex items-center justify-center gap-2",
-	"whitespace-nowrap rounded-surface font-medium transition-[color,box-shadow,transform]",
-	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-	"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
-	"cursor-pointer"
-];
-const Button = (0, __marigold_system.cva)([
-	...buttonBase,
-	"duration-150 active:scale-[0.97] pressed:not-expanded:scale-[0.97]",
-	"pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none"
-], {
+const Button = (0, _marigold_system.cva)({
+	base: [
+		"ui-button-base gap-2",
+		"duration-150 active:scale-[0.97] pressed:not-aria-expanded:scale-[0.97]",
+		"pending:ui-state-disabled"
+	],
 	variants: {
 		variant: {
-			primary: "bg-brand text-brand-foreground hover:bg-brand/90",
+			primary: ["ui-surface-contrast", "hover:[--ui-background-color:oklch(from_var(--color-brand)_calc(l-0.05)_c_h)]"],
 			secondary: [
 				"ui-surface shadow-elevation-border",
 				"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
-				"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
 				"expanded:[--ui-background-color:var(--color-hover)]"
 			],
-			ghost: "hover:bg-hover hover:text-foreground",
+			ghost: "hover:bg-current/10",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			"destructive-ghost": "text-destructive hover:bg-destructive/10",
-			link: "text-link util-touch-hitbox"
+			"destructive-ghost": "text-destructive hover:bg-current/8",
+			link: "text-link ui-touch-hitbox"
 		},
 		size: {
 			default: "text-sm",
@@ -207,9 +214,10 @@ const Button = (0, __marigold_system.cva)([
 
 //#endregion
 //#region src/components/Card.styles.ts
-const Card = (0, __marigold_system.cva)(["p-4 rounded-md"], {
+const Card = (0, _marigold_system.cva)({
+	base: ["p-4 rounded-md shadow-elevation-raised"],
 	variants: { variant: {
-		default: "ui-surface shadow-elevation-raised",
+		default: "ui-surface",
 		master: "bg-access-master/30 border border-access-master",
 		admin: "bg-access-admin/30 border border-access-admin"
 	} },
@@ -219,34 +227,34 @@ const Card = (0, __marigold_system.cva)(["p-4 rounded-md"], {
 //#endregion
 //#region src/components/Checkbox.styles.ts
 const Checkbox = {
-	checkbox: (0, __marigold_system.cva)([
+	checkbox: (0, _marigold_system.cva)({ base: [
 		"grid size-4 shrink-0 place-content-center rounded",
 		"border border-input shadow-xs",
 		"group-focus-visible/checkbox:ui-state-focus group-focus-visible/checkbox:border-(--ui-border-color) outline-none",
 		"group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
 		"group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
 		"group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
-	]),
-	container: (0, __marigold_system.cva)("cursor-pointer read-only:cursor-default gap-2"),
-	label: (0, __marigold_system.cva)([
+	] }),
+	container: (0, _marigold_system.cva)({ base: "cursor-pointer read-only:cursor-default gap-2" }),
+	label: (0, _marigold_system.cva)({ base: [
 		"flex items-center gap-1",
 		"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foreground",
 		"group-disabled/checkbox:text-disabled-foreground"
-	]),
-	group: (0, __marigold_system.cva)("flex flex-col gap-1")
+	] }),
+	group: (0, _marigold_system.cva)({ base: "flex flex-col gap-1" })
 };
 
 //#endregion
 //#region src/components/Calendar.styles.ts
 const Calendar = {
-	calendar: (0, __marigold_system.cva)([
+	calendar: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border p-2",
 		"group-data-trigger/popover:shadow-elevation-overlay",
 		"group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:p-0 group-[[role=dialog]]/tray:place-self-center"
-	]),
-	calendarContainer: (0, __marigold_system.cva)("flex gap-4"),
-	calendarMonth: (0, __marigold_system.cva)("min-w-[250px] flex-1"),
-	calendarCell: (0, __marigold_system.cva)([
+	] }),
+	calendarContainer: (0, _marigold_system.cva)({ base: "flex gap-4" }),
+	calendarMonth: (0, _marigold_system.cva)({ base: "min-w-[250px] flex-1" }),
+	calendarCell: (0, _marigold_system.cva)({ base: [
 		"relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
 		"border border-transparent p-0 text-sm font-normal text-foreground",
 		"outline-offset-2 duration-150 transition-all",
@@ -256,67 +264,67 @@ const Calendar = {
 		"disabled:pointer-events-none disabled:opacity-30",
 		"unavailable:pointer-events-none unavailable:opacity-30 unavailable:line-through",
 		"outside-month:hidden"
-	]),
-	calendarControllers: (0, __marigold_system.cva)([
+	] }),
+	calendarControllers: (0, _marigold_system.cva)({ base: [
 		"size-9 rounded-lg",
-		"text-muted-foreground/80",
+		"text-muted-foreground",
 		"transition-colors",
 		"focus-visible:ui-state-focus outline-none"
-	]),
-	calendarHeader: (0, __marigold_system.cva)(["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"]),
-	calendarGrid: (0, __marigold_system.cva)("[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75"),
-	calendarListboxButton: (0, __marigold_system.cva)([
+	] }),
+	calendarHeader: (0, _marigold_system.cva)({ base: ["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground"] }),
+	calendarGrid: (0, _marigold_system.cva)({ base: "[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75" }),
+	calendarListboxButton: (0, _marigold_system.cva)({ base: [
 		"rounded-md text-sm font-medium transition-[color,box-shadow]",
 		"px-4 py-2",
 		"focus-visible:ui-state-focus outline-none",
 		"cursor-pointer",
 		"hover:bg-hover",
 		"aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
-	]),
-	select: (0, __marigold_system.cva)([
-		"[&svg]:text-muted-foreground/80",
+	] }),
+	select: (0, _marigold_system.cva)({ base: [
+		"[&svg]:text-muted-foreground",
 		"flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
 		"focus-visible:ui-state-focus outline-none",
 		"h-input",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
 		"cursor-pointer"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/CloseButton.styles.ts
-const CloseButton = (0, __marigold_system.cva)([
+const CloseButton = (0, _marigold_system.cva)({ base: [
 	"flex items-center justify-center whitespace-nowrap",
 	"cursor-pointer",
-	"transition-[color,box-shadow]",
+	"transition-[color,box-shadow,transform]",
 	"focus-visible:ui-state-focus outline-none",
 	"rounded-full",
-	"duration-150 active:scale-[0.97] pressed:scale-[0.97] transition-transform",
+	"ui-press",
 	"[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
-]);
+] });
 
 //#endregion
 //#region src/components/ComboBox.styles.ts
 const ComboBox = {
-	icon: (0, __marigold_system.cva)("text-muted-foreground/80 right-2"),
-	mobileTrigger: (0, __marigold_system.cva)("group/input relative flex items-center")
+	icon: (0, _marigold_system.cva)({ base: "text-muted-foreground/80 right-2" }),
+	mobileTrigger: (0, _marigold_system.cva)({ base: "group/input relative flex items-center" })
 };
 
 //#endregion
 //#region src/components/Collapsible.styles.ts
 const Collapsible = {
-	container: (0, __marigold_system.cva)(),
-	trigger: (0, __marigold_system.cva)([
-		"inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
-		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
-		"cursor-pointer"
-	], {
+	container: (0, _marigold_system.cva)({}),
+	trigger: (0, _marigold_system.cva)({
+		base: [
+			"inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
+			"ui-interactive",
+			"ui-press",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+		],
 		variants: {
 			variant: {
 				default: "",
-				link: "text-link util-touch-hitbox"
+				link: "text-link ui-touch-hitbox"
 			},
 			size: { default: "text-sm" }
 		},
@@ -325,19 +333,20 @@ const Collapsible = {
 			size: "default"
 		}
 	}),
-	content: (0, __marigold_system.cva)()
+	content: (0, _marigold_system.cva)({})
 };
 
 //#endregion
 //#region src/components/ContextualHelp.styles.ts
 const ContextualHelp = {
-	trigger: (0, __marigold_system.cva)([
-		"inline-flex items-center justify-center rounded-full transition-[color,box-shadow]",
-		"hover:util-focus-ring hover:text-foreground",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"focus-visible:ui-state-focus outline-none",
-		"cursor-pointer util-touch-hitbox"
-	], {
+	trigger: (0, _marigold_system.cva)({
+		base: [
+			"inline-flex items-center justify-center rounded-full transition-[color,box-shadow]",
+			"hover:ui-state-focus hover:text-foreground",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"focus-visible:ui-state-focus outline-none",
+			"cursor-pointer ui-touch-hitbox"
+		],
 		variants: {
 			variant: {
 				help: "",
@@ -347,73 +356,75 @@ const ContextualHelp = {
 		},
 		defaultVariants: { size: "default" }
 	}),
-	container: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: [
 		"outline-none",
-		"ui-surface shadow-elevation-overlay util-scrollbar",
+		"ui-surface shadow-elevation-overlay ui-scrollbar",
 		"p-5",
 		"data-small:max-w-3xs data-medium:max-w-xs data-large:max-w-md"
-	]),
-	title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
-	content: (0, __marigold_system.cva)("text-sm")
+	] }),
+	title: (0, _marigold_system.cva)({ base: "text-lg font-semibold mb-1" }),
+	content: (0, _marigold_system.cva)({ base: "text-sm" })
 };
 
 //#endregion
 //#region src/components/DateField.styles.ts
 const DateField = {
-	field: (0, __marigold_system.cva)([
+	field: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border h-input",
 		"flex items-center",
 		"disabled:ui-state-disabled",
 		"group-read-only/field:ui-state-readonly",
 		"has-focus:ui-state-focus",
 		"has-invalid:ui-state-error has-focus:has-invalid:ring-destructive/20"
-	]),
-	input: (0, __marigold_system.cva)(["ui-input", "cursor-text"]),
-	segment: (0, __marigold_system.cva)([
-		"inline rounded p-0.5 text-foreground caret-transparent outline-0 type-literal:px-0 data-focused:data-placeholder:text-foreground data-focused:text-foreground  type-literal:text-placeholder",
+	] }),
+	input: (0, _marigold_system.cva)({ base: ["ui-input", "cursor-text"] }),
+	segment: (0, _marigold_system.cva)({ base: [
+		"group/segment inline rounded leading-none whitespace-pre p-0.5 outline-0 caret-transparent",
+		"text-foreground",
+		"data-placeholder:text-placeholder type-literal:text-placeholder type-literal:px-0",
+		"data-focused:bg-stone-300 data-focused:text-foreground data-focused:data-placeholder:text-foreground",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
-		"data-focused:bg-focus",
 		"data-placeholder:disabled:text-disabled-foreground",
-		"invalid:data-focused:bg-destructive invalid:data-focused:data-placeholder:text-destructive-foreground invalid:data-focused:text-destructive-foreground invalid:placeholder:text-destructive invalid:text-destructive data-placeholder:text-placeholder",
-		"group/segment",
-		"outline-0",
-		"whitespace-pre",
-		"data-placeholder:text-placeholder text-foreground data-focused:bg-focus data-focused:text-foreground rounded leading-none"
-	]),
-	action: (0, __marigold_system.cva)("fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive")
+		"invalid:text-destructive invalid:data-focused:bg-destructive invalid:data-focused:text-destructive-foreground invalid:data-focused:data-placeholder:text-destructive-foreground"
+	] }),
+	action: (0, _marigold_system.cva)({ base: "fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive" })
 };
 
 //#endregion
 //#region src/components/DatePicker.styles.ts
-const DatePicker = (0, __marigold_system.cva)([
+const DatePicker = (0, _marigold_system.cva)({ base: [
 	"h-input pr-3",
-	"text-muted-foreground/80",
+	"text-muted-foreground",
 	"hover:text-brand",
 	"disabled:cursor-not-allowed",
-	"util-touch-hitbox"
-]);
+	"ui-touch-hitbox"
+] });
 
 //#endregion
 //#region src/components/Dialog.styles.ts
 const Dialog = {
-	closeButton: (0, __marigold_system.cva)(["absolute top-6 right-3", "size-7 "]),
-	container: (0, __marigold_system.cva)(["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "ui-surface shadow-elevation-overlay util-scrollbar"], { variants: {
-		variant: {},
-		size: {
-			xsmall: "",
-			small: "",
-			medium: ""
+	closeButton: (0, _marigold_system.cva)({ base: ["absolute top-6 right-3", "size-7 "] }),
+	container: (0, _marigold_system.cva)({
+		base: ["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "ui-surface shadow-elevation-overlay ui-scrollbar"],
+		variants: {
+			variant: {},
+			size: {
+				xsmall: "",
+				small: "",
+				medium: ""
+			}
 		}
-	} }),
-	header: (0, __marigold_system.cva)("flex flex-col gap-1 text-center sm:text-left"),
-	title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
-	content: (0, __marigold_system.cva)("text-muted-foreground text-sm"),
-	actions: (0, __marigold_system.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
+	}),
+	header: (0, _marigold_system.cva)({ base: "flex flex-col gap-1 text-center sm:text-left" }),
+	title: (0, _marigold_system.cva)({ base: "text-lg font-semibold mb-1" }),
+	content: (0, _marigold_system.cva)({ base: "text-muted-foreground text-sm" }),
+	actions: (0, _marigold_system.cva)({ base: "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4" })
 };
 
 //#endregion
 //#region src/components/Divider.styles.ts
-const Divider = (0, __marigold_system.cva)("bg-border h-px w-full", {
+const Divider = (0, _marigold_system.cva)({
+	base: "bg-border h-px w-full",
 	variants: { variant: {
 		default: "",
 		bold: "h-0.5"
@@ -424,47 +435,49 @@ const Divider = (0, __marigold_system.cva)("bg-border h-px w-full", {
 //#endregion
 //#region src/components/Drawer.styles.ts
 const Drawer = {
-	overlay: (0, __marigold_system.cva)([
+	overlay: (0, _marigold_system.cva)({ base: [
 		"group/overlay",
-		"placement-top:w-full placement-top:entering:animate-slide-in-top placement-top:exiting:animate-slide-out-top placement-top:top-0 placement-top:left-0",
-		"placement-bottom:w-full placement-bottom:entering:animate-slide-in-bottom placement-bottom:exiting:animate-slide-out-bottom placement-bottom:bottom-0 placement-bottom:left-0",
-		"placement-left:entering:animate-slide-in-left placement-left:exiting:animate-slide-out-left placement-left:top-0 placement-left:left-0",
-		"placement-right:entering:animate-slide-in-right placement-right:exiting:animate-slide-out-right placement-right:top-0 placement-right:right-0"
-	]),
-	container: (0, __marigold_system.cva)([
-		"w-full relative grid-rows-[auto_1fr_auto]",
-		"bg-surface border-surface-border shadow-elevation-overlay util-scrollbar",
-		"placement-right:border-l placement-left:border-r placement-top:border-b placement-bottom:border-t",
-		"placement-top:w-full placement-bottom:w-full"
-	], { variants: { size: {
-		xsmall: "w-64 placement-top:sm:h-48 placement-bottom:sm:h-48",
-		small: "w-72 placement-top:sm:h-64 placement-bottom:sm:h-64",
-		medium: "w-96 placement-top:sm:h-80 placement-bottom:sm:h-80"
-	} } }),
-	closeButton: (0, __marigold_system.cva)(["absolute top-3.5 right-3", "size-7"]),
-	header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
-	title: (0, __marigold_system.cva)("font-semibold text-base"),
-	content: (0, __marigold_system.cva)("px-6 py-4 overflow-y-auto outline-none"),
-	actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
+		"[--slide-offset:1rem]",
+		"inset-y-4 right-4 entering:animate-slide-in-right exiting:animate-slide-out-right"
+	] }),
+	container: (0, _marigold_system.cva)({
+		base: [
+			"w-full relative grid-rows-[auto_1fr_auto]",
+			"rounded-xl ui-surface util-scrollbar",
+			"shadow-[var(--shadow-elevation-overlay),0_0_3px_1px_oklch(0_0_0/0.06)]",
+			"[--ui-border-color:oklch(from_var(--color-surface-border)_calc(l-0.1)_c_h)]",
+			"h-full"
+		],
+		variants: { size: {
+			xsmall: "w-64",
+			small: "w-72",
+			medium: "w-96"
+		} }
+	}),
+	closeButton: (0, _marigold_system.cva)({ base: ["absolute top-3.5 right-3", "size-7"] }),
+	header: (0, _marigold_system.cva)({ base: "ui-panel-header" }),
+	title: (0, _marigold_system.cva)({ base: "font-semibold text-base" }),
+	content: (0, _marigold_system.cva)({ base: "px-6 py-4 overflow-y-auto outline-none" }),
+	actions: (0, _marigold_system.cva)({ base: "ui-panel-actions" })
 };
 
 //#endregion
 //#region src/components/EmptyState.styles.ts
 const EmptyState = {
-	container: (0, __marigold_system.cva)(["mx-auto flex max-w-sm flex-col items-center p-6"]),
-	title: (0, __marigold_system.cva)(["text-lg"]),
-	description: (0, __marigold_system.cva)(["text-muted-foreground text-sm text-center"]),
-	action: (0, __marigold_system.cva)(["mt-6"])
+	container: (0, _marigold_system.cva)({ base: ["mx-auto flex max-w-sm flex-col items-center p-6"] }),
+	title: (0, _marigold_system.cva)({ base: ["text-lg"] }),
+	description: (0, _marigold_system.cva)({ base: ["text-muted-foreground text-sm text-center"] }),
+	action: (0, _marigold_system.cva)({ base: ["mt-6"] })
 };
 
 //#endregion
 //#region src/components/IconButton.styles.ts
-const IconButton = (0, __marigold_system.cva)("", { variants: { variant: { navigation: "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-hover hover:text-hover-foreground h-9 py-2 gap-1 px-2.5" } } });
+const IconButton = (0, _marigold_system.cva)({ variants: { variant: { navigation: "ui-button-base text-sm hover:bg-current/8 h-9 py-2 px-2.5 disabled:pointer-events-none" } } });
 
 //#endregion
 //#region src/components/Input.styles.ts
 const Input = {
-	input: (0, __marigold_system.cva)([
+	input: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border ui-input",
 		"disabled:ui-state-disabled",
 		"group-read-only/field:ui-state-readonly",
@@ -473,29 +486,25 @@ const Input = {
 		"group-read-only/field:cursor-default",
 		"group-data-icon/input:pl-8",
 		"group-data-action/input:pr-7",
-		"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:h-[calc(var(--spacing-input)-2px)] [&[type=file]]:pl-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
+		"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:h-[calc(var(--spacing-input)-2px)] [&[type=file]]:pl-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground",
 		"file:cursor-pointer file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
 		"[&[type=color]]:h-input",
 		"[&::-webkit-color-swatch-wrapper]:p-0",
 		"[&::-webkit-color-swatch]:p-2 [&::-moz-color-swatch]:p-2",
 		"[&::-webkit-color-swatch]:rounded-[inherit] [&::-moz-color-swatch]:rounded-[inherit]",
 		"[&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:border-0"
-	]),
-	icon: (0, __marigold_system.cva)([
-		"pointer-events-none left-2.5",
-		"text-muted-foreground disabled:text-disabled-foreground",
-		"disabled:text-gray-50"
-	]),
-	action: (0, __marigold_system.cva)(["text-muted-foreground pr-1 right-2"])
+	] }),
+	icon: (0, _marigold_system.cva)({ base: ["pointer-events-none left-2.5", "text-muted-foreground disabled:text-disabled-foreground"] }),
+	action: (0, _marigold_system.cva)({ base: ["text-muted-foreground pr-1 right-2"] })
 };
 
 //#endregion
 //#region src/components/Field.styles.ts
-const Field = (0, __marigold_system.cva)("space-y-2");
+const Field = (0, _marigold_system.cva)({ base: "" });
 
 //#endregion
 //#region src/components/Headline.styles.ts
-const Headline = (0, __marigold_system.cva)("", { variants: { size: {
+const Headline = (0, _marigold_system.cva)({ variants: { size: {
 	"level-1": "text-3xl font-extrabold",
 	"level-2": "text-2xl font-bold",
 	"level-3": "text-xl font-semibold",
@@ -507,28 +516,29 @@ const Headline = (0, __marigold_system.cva)("", { variants: { size: {
 //#endregion
 //#region src/components/HelpText.styles.ts
 const HelpText = {
-	container: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: [
 		"text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
 		"group-invalid/field:text-destructive",
 		"has-[+_[aria-hidden=true]]:mb-0"
-	]),
-	icon: (0, __marigold_system.cva)("")
+	] }),
+	icon: (0, _marigold_system.cva)({ base: "" })
 };
 
 //#endregion
 //#region src/components/Label.styles.ts
-const Label = (0, __marigold_system.cva)([
+const Label = (0, _marigold_system.cva)({ base: [
 	"flex items-center gap-1",
 	"text-sm font-medium leading-none text-foreground",
 	"group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground",
 	"group-required/field:after:content-[\"*\"]",
 	"group-required/field:after:-ml-1",
 	"group-required/field:after:text-destructive"
-]);
+] });
 
 //#endregion
 //#region src/components/Link.styles.ts
-const Link = (0, __marigold_system.cva)("aria-[disabled]:cursor-not-allowed", {
+const Link = (0, _marigold_system.cva)({
+	base: "aria-[disabled]:cursor-not-allowed",
 	variants: {
 		variant: {
 			default: "text-link font-normal",
@@ -548,37 +558,39 @@ const Link = (0, __marigold_system.cva)("aria-[disabled]:cursor-not-allowed", {
 //#endregion
 //#region src/components/List.styles.ts
 const List = {
-	ul: (0, __marigold_system.cva)("ml-6 list-outside list-disc space-y-1 marker:text-foreground/50", {
+	ul: (0, _marigold_system.cva)({
+		base: "ml-6 list-outside list-disc space-y-1 marker:text-muted-foreground",
 		variants: { size: {
 			default: "",
 			small: "*:text-sm"
 		} },
 		defaultVariants: { size: "default" }
 	}),
-	ol: (0, __marigold_system.cva)("ml-6 list-outside list-decimal space-y-1 marker:text-foreground/50", {
+	ol: (0, _marigold_system.cva)({
+		base: "ml-6 list-outside list-decimal space-y-1 marker:text-muted-foreground",
 		variants: { size: {
 			default: "",
 			small: "*:text-sm"
 		} },
 		defaultVariants: { size: "default" }
 	}),
-	item: (0, __marigold_system.cva)("")
+	item: (0, _marigold_system.cva)({ base: "" })
 };
 
 //#endregion
 //#region src/components/ListBox.styles.ts
 const ListBox = {
-	container: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: [
 		"flex ui-surface",
 		"not-group-data-trigger/popover:",
 		"group-data-trigger/popover:shadow-elevation-overlay",
 		"group-data-trigger/popover:w-full",
 		"group-data-trigger/popover:overflow-hidden",
 		"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
-	]),
-	list: (0, __marigold_system.cva)(["p-1 text-sm outline-0 space-y-px overflow-y-auto w-full"]),
-	item: (0, __marigold_system.cva)([
-		"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground",
+	] }),
+	list: (0, _marigold_system.cva)({ base: ["p-1 text-sm outline-0 space-y-px overflow-y-auto w-full"] }),
+	item: (0, _marigold_system.cva)({ base: [
+		"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground max-sm:min-h-11",
 		"[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
 		"selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
 		"hover:bg-hover hover:text-hover-foreground",
@@ -586,63 +598,97 @@ const ListBox = {
 		"focus-visible:ui-state-focus outline-none focus-visible:z-1 transition-[border,color]",
 		"cursor-default data-selection-mode:cursor-pointer",
 		"[&_[slot=description]]:col-start-2 [&_[slot=description]]:row-start-2 [&_[slot=description]]:text-xs [&_[slot=description]]:text-muted-foreground"
-	]),
-	section: (0, __marigold_system.cva)(""),
-	header: (0, __marigold_system.cva)("[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground")
+	] }),
+	section: (0, _marigold_system.cva)({ base: "" }),
+	header: (0, _marigold_system.cva)({ base: "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground" })
 };
 
 //#endregion
 //#region src/components/Menu.styles.ts
 const Menu = {
-	container: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-overlay w-full",
-		"text-foreground overflow-hidden p-1 outline-none",
+		"text-foreground overflow-x-hidden p-1 outline-none overflow-y-auto",
 		"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
-	]),
-	item: (0, __marigold_system.cva)([
-		"relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-surface)-3px)] p-2 text-sm outline-hidden select-none text-nowrap",
-		"disabled:text-disabled-foreground",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
-	], {
+	] }),
+	item: (0, _marigold_system.cva)({
+		base: [
+			"relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-surface)-3px)] p-2 text-sm outline-hidden select-none text-nowrap max-sm:min-h-11",
+			"disabled:text-disabled-foreground",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
+		],
 		variants: { variant: {
-			default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
+			default: "text-foreground focus:bg-focus [&_svg]:text-muted-foreground:opacity-60",
 			destructive: "text-destructive focus:bg-destructive/10"
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	section: (0, __marigold_system.cva)("text-muted-foreground p-2 text-xs font-medium border-t border-t-border in-first:border-t-0"),
-	button: (0, __marigold_system.cva)([
-		"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium",
-		"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
-		"cursor-pointer",
-		"[&_svg]:shrink-0 [&_svg]:pointer-events-none"
-	], {
+	section: (0, _marigold_system.cva)({ base: "text-muted-foreground p-2 text-xs font-medium border-t border-t-border in-first:border-t-0" }),
+	button: (0, _marigold_system.cva)({
+		base: [
+			"ui-button-base gap-2",
+			"duration-150 active:scale-[0.97] pressed:not-aria-expanded:scale-[0.97]",
+			"pending:ui-state-disabled"
+		],
 		variants: {
 			variant: {
-				default: "ui-surface expanded:bg-hover",
-				ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover rounded-surface"
+				default: [
+					"ui-surface shadow-elevation-border",
+					"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
+					"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
+					"pending:[--ui-background-color:var(--color-disabled)] pending:border-0 pending:shadow-none",
+					"expanded:[--ui-background-color:var(--color-hover)]"
+				],
+				ghost: "hover:bg-hover hover:text-foreground"
 			},
 			size: {
-				default: "h-button px-4 py-2 [&_svg]:size-4",
-				small: "h-button-small px-3 text-xs [&_svg]:size-3.5",
-				large: "h-button-large px-8 [&_svg]:size-5",
-				icon: "size-button [&_svg]:size-4"
+				default: "text-sm",
+				small: "text-xs",
+				large: "",
+				icon: ""
 			}
 		},
 		defaultVariants: {
 			variant: "default",
 			size: "default"
-		}
+		},
+		compoundVariants: [
+			{
+				variant: ["default", "ghost"],
+				class: "items-center justify-center"
+			},
+			{
+				variant: ["default", "ghost"],
+				size: "default",
+				class: "h-button p-squish-relaxed [&_svg]:size-4"
+			},
+			{
+				variant: ["default", "ghost"],
+				size: "small",
+				class: "h-button-small px-3 [&_svg]:size-3.5"
+			},
+			{
+				variant: ["default", "ghost"],
+				size: "large",
+				class: "h-button-large px-8 [&_svg]:size-5"
+			},
+			{
+				variant: ["default", "ghost"],
+				size: "icon",
+				class: "size-button [&_svg]:size-4"
+			}
+		]
 	})
 };
 
 //#endregion
 //#region src/components/Modal.styles.ts
-const Modal = (0, __marigold_system.cva)([
-	"sm:max-h-[min(640px,80vh)]",
-	"[--dialog-spacing-x:1rem]",
-	"w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
-], {
+const Modal = (0, _marigold_system.cva)({
+	base: [
+		"sm:max-h-[min(640px,80vh)]",
+		"[--dialog-spacing-x:1rem]",
+		"w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
+	],
 	variants: { size: {
 		xsmall: "[--dialog-width:480px]",
 		small: "[--dialog-width:640px]",
@@ -654,9 +700,9 @@ const Modal = (0, __marigold_system.cva)([
 //#endregion
 //#region src/components/Multiselect.styles.ts
 const MultiSelect = {
-	field: (0, __marigold_system.cva)("space-y-2"),
-	container: (0, __marigold_system.cva)([
-		"ui-surface",
+	field: (0, _marigold_system.cva)({ base: "space-y-2" }),
+	container: (0, _marigold_system.cva)({ base: [
+		"ui-surface shadow-elevation-border",
 		"px-3 text-sm text-foreground transition-shadow",
 		"border border-input rounded-lg outline-hidden",
 		"aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
@@ -664,8 +710,8 @@ const MultiSelect = {
 		"has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
 		"has-[input[aria-readonly=true]]:bg-muted",
 		"min-h-input"
-	]),
-	input: (0, __marigold_system.cva)([
+	] }),
+	input: (0, _marigold_system.cva)({ base: [
 		"bg-transparent flex-1 h-full",
 		"leading-loose",
 		"data-[focused]:outline-hidden outline-hidden border-0",
@@ -673,112 +719,105 @@ const MultiSelect = {
 		"group-data-[icon]/input:pl-5",
 		"group-data-[action]/input:pr-8",
 		"placeholder:text-placeholder"
-	]),
-	tag: (0, __marigold_system.cva)([
+	] }),
+	tag: (0, _marigold_system.cva)({ base: [
 		"border border-solid border-input rounded-md",
 		"bg-background",
 		"font-medium text-xs",
 		"flex items-center gap-1 ",
 		"h-7 px-2 cursor-default"
-	]),
-	closeButton: (0, __marigold_system.cva)("size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"),
-	icon: (0, __marigold_system.cva)("left-1"),
-	listContainer: (0, __marigold_system.cva)(["ui-surface shadow-elevation-overlay mt-0.5 outline-0"]),
-	list: (0, __marigold_system.cva)("pointer-events-auto space-y-1 p-1"),
-	option: (0, __marigold_system.cva)([
+	] }),
+	closeButton: (0, _marigold_system.cva)({ base: "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0" }),
+	icon: (0, _marigold_system.cva)({ base: "left-1" }),
+	listContainer: (0, _marigold_system.cva)({ base: ["ui-surface shadow-elevation-overlay mt-0.5 outline-0"] }),
+	list: (0, _marigold_system.cva)({ base: "pointer-events-auto space-y-1 p-1" }),
+	option: (0, _marigold_system.cva)({ base: [
 		"text-sm text-foreground",
 		"flex flex-col",
 		"cursor-pointer p-2 outline-hidden",
 		"[&.isFocused:not([aria-disabled=true])]:text-foreground! [&.isFocused[aria-disabled=true]]:bg-transparent",
 		"aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
 		"[&.isFocused:not([aria-disabled=true])]:bg-hover!"
-	]),
-	valueContainer: (0, __marigold_system.cva)("gap-2")
+	] }),
+	valueContainer: (0, _marigold_system.cva)({ base: "gap-2" })
 };
 
 //#endregion
 //#region src/components/NumberField.styles.ts
 const NumberField = {
-	group: (0, __marigold_system.cva)([
+	group: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border h-input",
 		"has-invalid:ui-state-error",
-		"has-disabled:ui-state-disabled",
+		"group-data-disabled/field:ui-state-disabled",
 		"group-read-only/field:ui-state-readonly",
 		"has-focus:ui-state-focus outline-none"
-	]),
-	stepper: (0, __marigold_system.cva)([
+	] }),
+	stepper: (0, _marigold_system.cva)({ base: [
 		"w-8 h-full text-center shrink-0 grid palce-items-center",
 		"text-foreground",
 		"disabled:text-disabled-foreground disabled:bg-disabled",
 		"border-input!",
 		"first-of-type:border-r! first-of-type:rounded-l-[calc(var(--radius-lg)-1px)]",
 		"last-of-type:border-l! last-of-type:rounded-r-[calc(var(--radius-lg)-1px)]"
-	]),
-	input: (0, __marigold_system.cva)([
+	] }),
+	input: (0, _marigold_system.cva)({ base: [
 		"ui-input",
 		"flex-1",
 		"group-data-stepper/field:text-center",
 		"disabled:text-disabled-foreground disabled:bg-disabled"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/Popover.styles.ts
-const Popover = (0, __marigold_system.cva)([
+const Popover = (0, _marigold_system.cva)({ base: [
 	"group/popover",
 	"outline-0",
 	"placement-top:mb-1",
 	"placement-bottom:mt-1",
 	"placement-right:ml-1",
 	"placement-left:mr-1"
-]);
+] });
 
 //#endregion
 //#region src/components/Radio.styles.ts
 const Radio = {
-	container: (0, __marigold_system.cva)("group-disabled/radio:cursor-not-allowed"),
-	label: (0, __marigold_system.cva)(["text-sm font-normal cursor-pointer w-full", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
-	radio: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: "group-disabled/radio:cursor-not-allowed" }),
+	label: (0, _marigold_system.cva)({ base: ["text-sm font-normal cursor-pointer w-full", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"] }),
+	radio: (0, _marigold_system.cva)({ base: [
 		"aspect-square size-4 rounded-full",
 		"border border-input shadow-xs",
 		"group-focus-visible/radio:ui-state-focus outline-none",
 		"group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
 		"group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
-	]),
-	group: (0, __marigold_system.cva)()
+	] }),
+	group: (0, _marigold_system.cva)({})
 };
 
 //#endregion
 //#region src/components/Pagination.styles.ts
-const button = [
-	"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
-	"focus-visible:ui-state-focus outline-none",
-	"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-	"hover:bg-hover hover:text-hover-foreground",
-	"cursor-pointer"
-];
 const Pagination = {
-	container: (0, __marigold_system.cva)("flex items-center justify-center space-x-2"),
-	navigationButton: (0, __marigold_system.cva)([
-		...button,
-		"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
+	container: (0, _marigold_system.cva)({ base: "flex items-center justify-center space-x-2" }),
+	navigationButton: (0, _marigold_system.cva)({ base: [
+		"ui-button-base",
+		"text-sm hover:bg-current/10",
 		"h-9 py-2 gap-1 px-2.5",
 		"has-[+_[hidden]]:mr-0"
-	]),
-	pageButton: (0, __marigold_system.cva)([
-		...button,
-		"bg-background size-9",
+	] }),
+	pageButton: (0, _marigold_system.cva)({ base: [
+		"ui-button-base",
+		"text-sm bg-background size-9",
 		"data-[selected=true]:ui-surface data-[selected=true]:shadow-elevation-border"
-	]),
-	icon: (0, __marigold_system.cva)("h-4 w-4"),
-	ellipsis: (0, __marigold_system.cva)("text-foreground flex h-8 w-8 items-center justify-center")
+	] }),
+	icon: (0, _marigold_system.cva)({ base: "h-4 w-4" }),
+	ellipsis: (0, _marigold_system.cva)({ base: "text-foreground flex h-8 w-8 items-center justify-center" })
 };
 
 //#endregion
 //#region src/components/ProgressCircle.styles.ts
 const ProgressCircle = {
-	container: (0, __marigold_system.cva)("stroke-foreground", {
+	container: (0, _marigold_system.cva)({
+		base: "stroke-foreground",
 		variants: {
 			variant: {
 				default: "",
@@ -795,7 +834,7 @@ const ProgressCircle = {
 			size: "default"
 		}
 	}),
-	loader: (0, __marigold_system.cva)("", {
+	loader: (0, _marigold_system.cva)({
 		variants: {
 			variant: {
 				default: "",
@@ -812,13 +851,14 @@ const ProgressCircle = {
 			size: "default"
 		}
 	}),
-	label: (0, __marigold_system.cva)("text-current text-sm")
+	label: (0, _marigold_system.cva)({ base: "text-current text-sm" })
 };
 
 //#endregion
 //#region src/components/SectionMessage.styles.ts
 const SectionMessage = {
-	container: (0, __marigold_system.cva)(["grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:'icon_title_close''icon_content_content']", "bg-background rounded-md border px-3 py-4"], {
+	container: (0, _marigold_system.cva)({
+		base: ["grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:'icon_title_close''icon_content_content']", "bg-background rounded-md border px-3 py-4"],
 		variants: { variant: {
 			success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
 			warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
@@ -827,8 +867,9 @@ const SectionMessage = {
 		} },
 		defaultVariants: { variant: "info" }
 	}),
-	title: (0, __marigold_system.cva)("text-sm font-medium"),
-	content: (0, __marigold_system.cva)("text-muted-foreground text-sm leading-5 font-normal", {
+	title: (0, _marigold_system.cva)({ base: "text-sm font-medium" }),
+	content: (0, _marigold_system.cva)({
+		base: "text-muted-foreground text-sm leading-5 font-normal",
 		variants: { variant: {
 			success: "text-success-muted-foreground",
 			warning: "text-warning-muted-foreground",
@@ -837,7 +878,8 @@ const SectionMessage = {
 		} },
 		defaultVariants: { variant: "info" }
 	}),
-	icon: (0, __marigold_system.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
+	icon: (0, _marigold_system.cva)({
+		base: "h-6 w-6 align-baseline leading-none -mt-0.5",
 		variants: { variant: {
 			success: "text-success-muted-accent",
 			warning: "text-warning-muted-accent",
@@ -846,18 +888,18 @@ const SectionMessage = {
 		} },
 		defaultVariants: { variant: "info" }
 	}),
-	close: (0, __marigold_system.cva)([
+	close: (0, _marigold_system.cva)({ base: [
 		"size-8 text-foreground",
 		"[&_svg]:size-6",
 		"-my-1.5 -me-2"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/Select.styles.ts
 const Select = {
-	icon: (0, __marigold_system.cva)("text-muted-foreground/80"),
-	select: (0, __marigold_system.cva)([
+	icon: (0, _marigold_system.cva)({ base: "text-muted-foreground/80" }),
+	select: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border ui-input h-input ",
 		"cursor-pointer",
 		"group-invalid/field:ui-state-error",
@@ -865,46 +907,110 @@ const Select = {
 		"focus-visible:ui-state-focus outline-none",
 		"*:data-placeholder:text-placeholder",
 		"has-[+_[aria-hidden=true]]:mb-0"
-	])
+	] })
+};
+
+//#endregion
+//#region src/components/Sidebar.styles.ts
+const Sidebar = {
+	overlay: (0, _marigold_system.cva)({}),
+	modal: (0, _marigold_system.cva)({ base: [
+		"flex h-full *:flex-1",
+		"justify-start",
+		"entering:animate-slide-in-left",
+		"exiting:animate-slide-out-left exiting:[--slide-out-duration:0.1s]",
+		"motion-reduce:entering:animate-none motion-reduce:exiting:animate-none"
+	] }),
+	root: (0, _marigold_system.cva)({ base: [
+		"relative h-full overflow-hidden",
+		"bg-surface border-surface-border ui-elevation-overlay util-scrollbar",
+		"sm:data-[state=expanded]:w-64",
+		"sm:data-[state=collapsed]:w-0",
+		"sm:transition-[width] sm:duration-200 sm:ease-in-out",
+		"motion-reduce:sm:transition-none",
+		"border-r"
+	] }),
+	closeButton: (0, _marigold_system.cva)({ base: ["absolute top-3.5 right-3", "size-7"] }),
+	content: (0, _marigold_system.cva)({ base: "sm:w-64" }),
+	header: (0, _marigold_system.cva)({ base: "ui-panel-header" }),
+	nav: (0, _marigold_system.cva)({ base: ["flex flex-col px-3 py-1 overflow-y-auto outline-none", "ui-scrollbar"] }),
+	footer: (0, _marigold_system.cva)({ base: "ui-panel-actions" }),
+	toggle: (0, _marigold_system.cva)({ base: [
+		"ui-button-base ui-press",
+		"hover:bg-current/10",
+		"size-button [&_svg]:size-6"
+	] }),
+	separator: (0, _marigold_system.cva)({ base: "bg-border my-1 h-px border-0" }),
+	groupLabel: (0, _marigold_system.cva)({ base: "px-2 h-7.5 pt-3 pb-0.5 mb-1 text-xs font-medium text-muted-foreground uppercase tracking-wider" }),
+	navPanel: (0, _marigold_system.cva)({ base: [
+		"flex flex-col gap-0.5 p-1",
+		"transition-[opacity,translate,filter] duration-300 ease-out sm:duration-200",
+		"data-[position=before]:absolute data-[position=before]:inset-x-0 data-[position=before]:top-0",
+		"data-[position=before]:invisible data-[position=before]:opacity-0",
+		"data-[position=before]:-translate-x-1/3 data-[position=before]:sm:-translate-x-2",
+		"data-[position=before]:sm:blur-[2px]",
+		"data-[position=before]:pointer-events-none",
+		"data-[position=after]:absolute data-[position=after]:inset-x-0 data-[position=after]:top-0",
+		"data-[position=after]:invisible data-[position=after]:opacity-0",
+		"data-[position=after]:translate-x-1/3 data-[position=after]:sm:translate-x-2",
+		"data-[position=after]:sm:blur-[2px]",
+		"data-[position=after]:pointer-events-none",
+		"motion-reduce:transition-none"
+	] }),
+	navLink: (0, _marigold_system.cva)({ base: [
+		"flex items-center gap-2 w-full px-2 h-9 text-sm rounded-md",
+		"text-foreground/80 hover:text-foreground hover:bg-hover transition-colors",
+		"data-active:bg-selected data-active:text-foreground data-active:font-medium",
+		"motion-reduce:transition-none",
+		"outline-none focus-visible:ui-state-focus"
+	] }),
+	backButton: (0, _marigold_system.cva)({ base: [
+		"flex items-center gap-2 w-full pl-0.5 pr-2 h-9 text-sm rounded-md",
+		"text-foreground/80 hover:text-foreground hover:bg-hover transition-colors",
+		"motion-reduce:transition-none",
+		"outline-none focus-visible:ui-state-focus",
+		"cursor-pointer mb-1"
+	] })
 };
 
 //#endregion
 //#region src/components/Slider.styles.ts
 const Slider = {
-	container: (0, __marigold_system.cva)("*:aria-hidden:hidden"),
-	track: (0, __marigold_system.cva)(["relative bg-muted rounded-lg flex w-full touch-none select-none items-center", "orientation-vertical:h-full orientation-vertical:w-auto orientation-vertical:flex-col disabled:opacity-50"]),
-	selectedTrack: (0, __marigold_system.cva)(["absolute bg-black orientation-horizontal:h-full orientation-vertical:w-full rounded-lg"]),
-	thumb: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: "*:aria-hidden:hidden" }),
+	track: (0, _marigold_system.cva)({ base: ["relative bg-muted rounded-lg flex w-full touch-none select-none items-center", "orientation-vertical:h-full orientation-vertical:w-auto orientation-vertical:flex-col disabled:opacity-50"] }),
+	selectedTrack: (0, _marigold_system.cva)({ base: ["absolute bg-black orientation-horizontal:h-full orientation-vertical:w-full rounded-lg"] }),
+	thumb: (0, _marigold_system.cva)({ base: [
 		"block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
 		"focus-visible:ui-state-focus outline-none",
 		"disabled:cursor-not-allowed"
-	]),
-	output: (0, __marigold_system.cva)("text-foreground text-sm")
+	] }),
+	output: (0, _marigold_system.cva)({ base: "text-foreground text-sm" })
 };
 
 //#endregion
 //#region src/components/Switch.styles.ts
 const Switch = {
-	container: (0, __marigold_system.cva)("disabled:cursor-not-allowed disabled:text-disabled-foreground"),
-	track: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: "disabled:cursor-not-allowed disabled:text-disabled-foreground" }),
+	track: (0, _marigold_system.cva)({ base: [
 		"flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
 		"border-2 border-transparent",
 		"group-disabled/switch:bg-disabled group-disabled/switch:text-disabled-foreground group-selected/switch:group-disabled/switch:bg-disabled group-selected/switch:group-disabled/switch:text-disabled-foreground",
 		"group-selected/switch:bg-brand bg-input",
 		"group-focus-visible/switch:ui-state-focus outline-none"
-	]),
-	thumb: (0, __marigold_system.cva)([
+	] }),
+	thumb: (0, _marigold_system.cva)({ base: [
 		"pointer-events-none block size-5 rounded-full",
 		"bg-background shadow-xs",
 		"ring-0 transition-transform duration-150 ease-out-quint",
 		"group-selected/switch:translate-x-4 translate-x-0"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/Table.styles.ts
 const Table = {
-	table: (0, __marigold_system.cva)(["text-sm bg-background"], {
+	table: (0, _marigold_system.cva)({
+		base: ["text-sm bg-background"],
 		variants: {
 			variant: {
 				default: "",
@@ -934,14 +1040,15 @@ const Table = {
 			size: "default"
 		}
 	}),
-	row: (0, __marigold_system.cva)([
-		"border-border not-last:border-b",
-		"transition-[background-color]",
-		"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
-		"disabled:cursor-not-allowed",
-		"data-selection-mode:cursor-pointer data-selection-mode:hover:bg-muted",
-		"dragging:opacity-50 dragging:transform-gpu"
-	], {
+	row: (0, _marigold_system.cva)({
+		base: [
+			"border-border not-last:border-b",
+			"transition-[background-color]",
+			"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
+			"disabled:cursor-not-allowed",
+			"data-selection-mode:cursor-pointer data-selection-mode:hover:bg-muted",
+			"dragging:opacity-50 dragging:transform-gpu"
+		],
 		variants: { variant: {
 			default: "",
 			grid: ["**:not-last:[[role=rowheader]]:border-r **:not-last:[[role=rowheader]]:border-border", "**:not-last:[[role=gridcell]]:border-r **:not-last:[[role=gridcell]]:border-border"],
@@ -950,14 +1057,15 @@ const Table = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	head: (0, __marigold_system.cva)(["bg-background/90", "border-border border-b"]),
-	column: (0, __marigold_system.cva)([
-		"h-(--header-height) px-(--cell-x-padding) align-middle",
-		"font-medium text-muted-foreground",
-		"not-has-[[type=checkbox]]:has-focus-visible:outline-2 not-has-[[type=checkbox]]:has-focus-visible:-outline-offset-2 not-has-[[type=checkbox]]:has-focus-visible:outline-ring/50",
-		"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
-		"aria-[sort]:hover:bg-muted aria-[sort]:hover:cursor-pointer aria-[sort]:hover:text-foreground"
-	], {
+	head: (0, _marigold_system.cva)({ base: ["bg-background/90", "border-border border-b"] }),
+	column: (0, _marigold_system.cva)({
+		base: [
+			"h-(--header-height) px-(--cell-x-padding) py-0 align-middle",
+			"font-medium text-muted-foreground",
+			"not-has-[[type=checkbox]]:has-focus-visible:outline-2 not-has-[[type=checkbox]]:has-focus-visible:-outline-offset-2 not-has-[[type=checkbox]]:has-focus-visible:outline-ring/50",
+			"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
+			"aria-[sort]:hover:bg-muted aria-[sort]:hover:cursor-pointer aria-[sort]:hover:text-foreground"
+		],
 		variants: { variant: {
 			default: "",
 			grid: "not-last:border-r border-border",
@@ -965,75 +1073,81 @@ const Table = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	body: (0, __marigold_system.cva)(["bg-background"]),
-	cell: (0, __marigold_system.cva)([
+	body: (0, _marigold_system.cva)({ base: ["bg-background"] }),
+	cell: (0, _marigold_system.cva)({ base: [
 		"px-(--cell-x-padding) py-(--cell-y-padding)",
 		"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
 		"has-[[data-cell-content]:focus-visible]:outline-2 has-[[data-cell-content]:focus-visible]:-outline-offset-2 has-[[data-cell-content]:focus-visible]:outline-ring/50",
 		"**:data-cell-content:outline-none"
-	]),
-	dragHandle: (0, __marigold_system.cva)([
+	] }),
+	dragHandle: (0, _marigold_system.cva)({ base: [
 		"text-muted-foreground rounded size-4",
 		"[&_svg]:size-4",
-		"focus-visible:util-focus-ring outline-none"
-	]),
-	dragPreview: (0, __marigold_system.cva)(["px-4 py-3 bg-brand rounded-lg shadow-lg", "text-sm text-brand-foreground"]),
-	dragPreviewCounter: (0, __marigold_system.cva)([
+		"focus-visible:ui-state-focus outline-none"
+	] }),
+	dragPreview: (0, _marigold_system.cva)({ base: ["px-4 py-3 bg-brand rounded-lg shadow-lg", "text-sm text-brand-foreground"] }),
+	dragPreviewCounter: (0, _marigold_system.cva)({ base: [
 		"flex items-center justify-center rounded-full",
 		"bg-brand-foreground px-2",
 		"text-xs font-medium leading-normal text-brand"
-	]),
-	dropIndicator: (0, __marigold_system.cva)([
+	] }),
+	dropIndicator: (0, _marigold_system.cva)({ base: [
 		"relative",
-		"before:absolute before:inset-0 before:h-0.5 before:-translate-y-1/2 before:bg-stone-300",
-		"drop-target:before:z-10 drop-target:before:bg-stone-800"
-	]),
-	editablePopover: (0, __marigold_system.cva)(["ui-surface ui-elevation-overlay", "flex items-start justify-center gap-1 pl-1 pr-1 py-1"]),
-	editTrigger: (0, __marigold_system.cva)([
+		"before:absolute before:inset-0 before:h-0.5 before:-translate-y-1/2 before:bg-border",
+		"drop-target:before:z-10 drop-target:before:bg-brand"
+	] }),
+	editablePopover: (0, _marigold_system.cva)({ base: ["ui-surface shadow-elevation-overlay", "flex items-start justify-center gap-1 pl-1 pr-1 py-1"] }),
+	editTrigger: (0, _marigold_system.cva)({ base: [
 		"flex items-center justify-center",
-		"text-foreground/60",
+		"text-muted-foreground",
 		"size-button aspect-square rounded-surface transition-[color,background,transform]",
-		"cursor-pointer",
-		"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
-		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
-		"hover:bg-hover hover:text-foreground",
+		"ui-interactive",
+		"ui-press",
+		"hover:bg-current/10",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
-	]),
-	editCancel: (0, __marigold_system.cva)([
+	] }),
+	editCancel: (0, _marigold_system.cva)({ base: [
 		"inline-flex items-center justify-center",
-		"min-[600px]:text-foreground/60 font-medium",
-		"text-sm h-button-small min-[600px]:size-button min-[600px]:aspect-square rounded-surface transition-[color,background,transform]",
+		"sm:text-muted-foreground font-medium",
+		"text-sm h-button-small sm:size-button sm:aspect-square rounded-surface transition-[color,background,transform]",
 		"cursor-pointer",
 		"ml-1.5",
 		"focus-visible:ui-state-focus outline-none",
-		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
-		"hover:bg-hover hover:text-foreground",
+		"ui-press",
+		"hover:bg-current/10",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
-	]),
-	editSave: (0, __marigold_system.cva)([
+	] }),
+	editSave: (0, _marigold_system.cva)({ base: [
 		"inline-flex items-center justify-center",
-		"min-[600px]:text-foreground/60 font-medium",
-		"text-sm h-button-small min-[600px]:size-button min-[600px]:aspect-square rounded-surface transition-[color,background,transform]",
+		"sm:text-muted-foreground font-medium",
+		"text-sm h-button-small sm:size-button sm:aspect-square rounded-surface transition-[color,background,transform]",
 		"cursor-pointer",
 		"focus-visible:ui-state-focus outline-none",
-		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
-		"hover:bg-hover hover:text-foreground",
+		"ui-press",
+		"hover:bg-current/10",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4.5"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/LegacyTable.styles.ts
 const LegacyTable = {
-	table: (0, __marigold_system.cva)("text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b", { variants: { variant: {
-		default: "",
-		grid: ""
-	} } }),
-	thead: (0, __marigold_system.cva)("bg-background/90 top-0 z-1 backdrop-blur-xs ", { variants: { variant: {
-		default: "",
-		grid: ""
-	} } }),
-	headerRow: (0, __marigold_system.cva)(["border-border border-b"], {
+	table: (0, _marigold_system.cva)({
+		base: "text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b",
+		variants: { variant: {
+			default: "",
+			grid: ""
+		} }
+	}),
+	thead: (0, _marigold_system.cva)({
+		base: "bg-background/90 top-0 z-1 backdrop-blur-xs ",
+		variants: { variant: {
+			default: "",
+			grid: ""
+		} }
+	}),
+	headerRow: (0, _marigold_system.cva)({
+		base: ["border-border border-b"],
 		variants: { variant: {
 			default: "",
 			grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
@@ -1041,7 +1155,8 @@ const LegacyTable = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	header: (0, __marigold_system.cva)(["h-12 px-3 align-middle font-medium text-muted-foreground", "focus-visible:outline-2 outline-offset-2 outline-ring/70"], {
+	header: (0, _marigold_system.cva)({
+		base: ["h-12 px-3 align-middle font-medium text-muted-foreground", "focus-visible:outline-2 outline-offset-2 outline-ring/70"],
 		variants: { variant: {
 			default: "[&:has([type=checkbox])]:pr-0",
 			grid: "",
@@ -1049,12 +1164,13 @@ const LegacyTable = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	body: (0, __marigold_system.cva)("[&_tr:last-child]:border-0 bg-background"),
-	row: (0, __marigold_system.cva)([
-		"border-b border-border transition-colors",
-		"focus-visible:outline-2 outline-offset-2 outline-ring/70",
-		"data-disabled:cursor-not-allowed"
-	], {
+	body: (0, _marigold_system.cva)({ base: "[&_tr:last-child]:border-0 bg-background" }),
+	row: (0, _marigold_system.cva)({
+		base: [
+			"border-b border-border transition-colors",
+			"focus-visible:outline-2 outline-offset-2 outline-ring/70",
+			"data-disabled:cursor-not-allowed"
+		],
 		variants: { variant: {
 			default: "aria-selected:bg-muted",
 			grid: "aria-selected:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
@@ -1073,7 +1189,8 @@ const LegacyTable = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	cell: (0, __marigold_system.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
+	cell: (0, _marigold_system.cva)({
+		base: "p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70",
 		variants: { variant: {
 			default: "[&:has([type=checkbox])]:pr-0",
 			grid: ""
@@ -1085,25 +1202,25 @@ const LegacyTable = {
 //#endregion
 //#region src/components/Tabs.styles.ts
 const Tabs = {
-	container: (0, __marigold_system.cva)("flex flex-col gap-2"),
-	tabsList: (0, __marigold_system.cva)(["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"]),
-	tab: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: "flex flex-col gap-2" }),
+	tabsList: (0, _marigold_system.cva)({ base: ["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"] }),
+	tab: (0, _marigold_system.cva)({ base: [
 		"relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
 		"[&_svg]:shrink-0",
 		"focus-visible:ui-state-focus outline-none",
-		"hover:bg-hover hover:text-foreground",
-		"disabled:pointer-events-none disabled:opacity-50",
-		"selected:text-foreground selected:hover:bg-hover",
-		"data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
-	]),
-	tabpanel: (0, __marigold_system.cva)(["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"])
+		"hover:bg-current/10",
+		"disabled:pointer-events-none disabled:text-disabled-foreground",
+		"selected:text-foreground selected:hover:bg-current/10"
+	] }),
+	tabIndicator: (0, _marigold_system.cva)({ base: ["absolute inset-x-0 bottom-0 -mb-1 h-0.5 bg-foreground", "origin-left"] }),
+	tabpanel: (0, _marigold_system.cva)({ base: ["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"] })
 };
 
 //#endregion
 //#region src/components/Tag.styles.ts
 const Tag = {
-	container: (0, __marigold_system.cva)(["flex gap-3", "min-h-7"]),
-	tag: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: ["flex gap-3", "min-h-7"] }),
+	tag: (0, _marigold_system.cva)({ base: [
 		"relative inline-flex items-center gap-1.75",
 		"ui-surface shadow-elevation-border",
 		"font-medium text-xs",
@@ -1111,62 +1228,53 @@ const Tag = {
 		"selected:text-white selected:[--ui-background-color:var(--color-brand)]",
 		"data-disabled:cursor-not-allowed data-disabled:text-disabled-foreground data-disabled:bg-disabled",
 		"focus-visible:ui-state-focus outline-none"
-	]),
-	closeButton: (0, __marigold_system.cva)(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
-	listItems: (0, __marigold_system.cva)(["flex flex-wrap gap-1", "mb-0"]),
-	removeAll: (0, __marigold_system.cva)([
+	] }),
+	closeButton: (0, _marigold_system.cva)({ base: ["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"] }),
+	listItems: (0, _marigold_system.cva)({ base: ["flex flex-wrap gap-1", "mb-0"] }),
+	removeAll: (0, _marigold_system.cva)({ base: [
 		"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform] rounded-md",
-		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
+		"ui-press",
 		"focus-visible:ui-state-focus outline-none",
 		"cursor-pointer",
-		"text-link text-xs util-touch-hitbox"
-	])
+		"text-link text-xs ui-touch-hitbox"
+	] })
 };
 
 //#endregion
 //#region src/components/TagField.styles.ts
 const TagField = {
-	trigger: (0, __marigold_system.cva)([
-		"flex w-full items-center justify-between gap-1",
+	trigger: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border ui-input h-fit min-h-input",
 		"cursor-pointer py-1",
 		"group-disabled/field:ui-state-disabled",
-		"has-focus:ui-state-focus",
+		"[&:has(>button[data-focus-visible])]:ui-state-focus",
 		"group-invalid/field:ui-state-error",
-		"has-focus:group-invalid/field:ring-destructive/20"
-	]),
-	tagGroup: (0, __marigold_system.cva)("flex flex-1 flex-wrap items-center gap-1"),
-	listItems: (0, __marigold_system.cva)("flex flex-wrap gap-1"),
-	button: (0, __marigold_system.cva)([
-		"util-touch-hitbox rounded-full [&_svg]:size-4",
-		"shrink-0 cursor-pointer outline-0",
-		"flex items-center justify-center",
-		"hover:bg-hover size-6",
-		"focus:ui-state-focus",
-		"disabled:ui-state-disabled"
-	]),
-	container: (0, __marigold_system.cva)([
+		"[&:has(>button[data-focus-visible])]:group-invalid/field:ring-destructive/20"
+	] }),
+	tagGroup: (0, _marigold_system.cva)({ base: "flex flex-1 flex-wrap items-center gap-1" }),
+	listItems: (0, _marigold_system.cva)({ base: "flex flex-wrap gap-1" }),
+	container: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-border group/tagfield",
 		"flex flex-col overflow-hidden gap-1.5 p-2",
 		"w-(--tagfield-trigger-width)",
 		"[&_div]:shadow-none! [&_div]:border-0!"
-	])
+	] })
 };
 
 //#endregion
 //#region src/components/TextArea.styles.ts
-const TextArea = (0, __marigold_system.cva)([
+const TextArea = (0, _marigold_system.cva)({ base: [
 	"inline-flex",
 	"ui-surface shadow-elevation-border ui-input h-[initial]",
 	"disabled:ui-state-disabled",
 	"group-read-only/field:ui-state-readonly",
 	"invalid:ui-state-error",
 	"focus:ui-state-focus outline-none"
-]);
+] });
 
 //#endregion
 //#region src/components/Text.styles.ts
-const Text = (0, __marigold_system.cva)("", {
+const Text = (0, _marigold_system.cva)({
 	variants: {
 		variant: {
 			default: "",
@@ -1198,31 +1306,32 @@ const Text = (0, __marigold_system.cva)("", {
 //#endregion
 //#region src/components/Toast.styles.ts
 const Toast = {
-	toast: (0, __marigold_system.cva)([
+	toast: (0, _marigold_system.cva)({ base: [
 		"ui-surface shadow-elevation-overlay",
 		"max-w-sm w-full pointer-events-auto overflow-hidden text-foreground",
 		"grid grid-cols-[auto_1fr_auto_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
-		"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:state-focus outline-none",
+		"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:ui-state-focus outline-none",
 		"p-4"
-	]),
-	title: (0, __marigold_system.cva)([
+	] }),
+	title: (0, _marigold_system.cva)({ base: [
 		"text-sm font-medium",
 		"[grid-area:title]",
 		"flex items-center mb-0"
-	]),
-	description: (0, __marigold_system.cva)(["text-muted-foreground text-sm", "[grid-area:description] mt-0"]),
-	closeButton: (0, __marigold_system.cva)([
+	] }),
+	description: (0, _marigold_system.cva)({ base: ["text-muted-foreground text-sm", "[grid-area:description] mt-0"] }),
+	closeButton: (0, _marigold_system.cva)({ base: [
 		"[grid-area:close] row-end-1",
 		"ml-2",
 		"flex items-center justify-center",
 		"size-5 rounded transition-[color,box-shadow] outline-none",
 		"focus-visible:ui-state-focus outline-none text-muted-foreground hover:text-hover-foreground"
-	]),
-	icon: (0, __marigold_system.cva)([
-		"[grid-area:icon]",
-		"flex items-center justify-center",
-		"h-5 w-5 leading-none"
-	], {
+	] }),
+	icon: (0, _marigold_system.cva)({
+		base: [
+			"[grid-area:icon]",
+			"flex items-center justify-center",
+			"h-5 w-5 leading-none"
+		],
 		variants: { variant: {
 			default: "",
 			success: "text-success-muted-accent",
@@ -1232,37 +1341,39 @@ const Toast = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	content: (0, __marigold_system.cva)(["contents"]),
-	"bottom-left": (0, __marigold_system.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
-	"bottom-right": (0, __marigold_system.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
-	"top-left": (0, __marigold_system.cva)(["fixed top-4 left-4 flex flex-col"]),
-	"top-right": (0, __marigold_system.cva)(["fixed top-4 right-4 flex flex-col"]),
-	top: (0, __marigold_system.cva)(["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"]),
-	bottom: (0, __marigold_system.cva)(["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"]),
-	action: (0, __marigold_system.cva)(["[grid-area:action] flex items-start pl-4"])
+	content: (0, _marigold_system.cva)({ base: ["contents"] }),
+	"bottom-left": (0, _marigold_system.cva)({ base: ["fixed bottom-4 left-4 flex flex-col-reverse"] }),
+	"bottom-right": (0, _marigold_system.cva)({ base: ["fixed bottom-4 right-4 flex flex-col-reverse"] }),
+	"top-left": (0, _marigold_system.cva)({ base: ["fixed top-4 left-4 flex flex-col"] }),
+	"top-right": (0, _marigold_system.cva)({ base: ["fixed top-4 right-4 flex flex-col"] }),
+	top: (0, _marigold_system.cva)({ base: ["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"] }),
+	bottom: (0, _marigold_system.cva)({ base: ["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"] }),
+	action: (0, _marigold_system.cva)({ base: ["[grid-area:action] flex items-start pl-4"] })
 };
 
 //#endregion
 //#region src/components/Tooltip.styles.ts
 const Tooltip = {
-	container: (0, __marigold_system.cva)([
-		"relative max-w-70 rounded-md border px-3 py-1.5 text-sm",
-		"placement-top:mb-2",
-		"placement-bottom:mt-2",
-		"placement-right:ml-2",
-		"placement-left:mr-2"
-	], {
+	container: (0, _marigold_system.cva)({
+		base: [
+			"relative max-w-70 rounded-md border px-3 py-1.5 text-sm",
+			"placement-top:mb-2",
+			"placement-bottom:mt-2",
+			"placement-right:ml-2",
+			"placement-left:mr-2"
+		],
 		variants: { variant: {
 			default: "text-brand-foreground bg-brand border-brand",
 			white: "text-secondary-foreground border-input bg-white"
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	arrow: (0, __marigold_system.cva)([
-		"placement-right:[&_svg]:rotate-90",
-		"placement-left:[&_svg]:-rotate-90",
-		"placement-bottom:[&_svg]:rotate-180"
-	], {
+	arrow: (0, _marigold_system.cva)({
+		base: [
+			"placement-right:[&_svg]:rotate-90",
+			"placement-left:[&_svg]:-rotate-90",
+			"placement-bottom:[&_svg]:rotate-180"
+		],
 		variants: { variant: {
 			default: "fill-brand  stroke-brand",
 			white: "fill-white  stroke-input "
@@ -1274,29 +1385,30 @@ const Tooltip = {
 //#endregion
 //#region src/components/Tray.styles.ts
 const Tray = {
-	overlay: (0, __marigold_system.cva)("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
-	container: (0, __marigold_system.cva)([
+	overlay: (0, _marigold_system.cva)({ base: "bg-black/50 fixed inset-0 z-40 flex items-end justify-center" }),
+	container: (0, _marigold_system.cva)({ base: [
 		"w-full border-0 inset-shadow-black inset-shadow-sm/20",
 		"relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-b-none",
-		"ui-surface ui-elevation-overlay",
+		"ui-surface shadow-elevation-overlay",
 		"outline-hidden grid",
 		"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-background after:content-['']"
-	]),
-	dragHandle: (0, __marigold_system.cva)("bg-surface-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
-	header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
-	title: (0, __marigold_system.cva)("font-semibold text-base"),
-	content: (0, __marigold_system.cva)("overflow-y-auto outline-none p-2"),
-	actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
+	] }),
+	dragHandle: (0, _marigold_system.cva)({ base: "bg-surface-border mx-auto mt-2 h-1.5 w-12 rounded-full" }),
+	header: (0, _marigold_system.cva)({ base: "ui-panel-header" }),
+	title: (0, _marigold_system.cva)({ base: "font-semibold text-base" }),
+	content: (0, _marigold_system.cva)({ base: "overflow-y-auto outline-none p-2" }),
+	actions: (0, _marigold_system.cva)({ base: "ui-panel-actions" })
 };
 
 //#endregion
 //#region src/components/Underlay.styles.ts
-const Underlay = (0, __marigold_system.cva)(["bg-black/80 px-4"]);
+const Underlay = (0, _marigold_system.cva)({ base: "bg-black/80 px-4" });
 
 //#endregion
 //#region src/components/Loader.styles.ts
 const Loader = {
-	container: (0, __marigold_system.cva)("grid place-items-center text-brand", {
+	container: (0, _marigold_system.cva)({
+		base: "grid place-items-center text-brand",
 		variants: {
 			variant: {
 				default: "",
@@ -1313,7 +1425,8 @@ const Loader = {
 			size: "default"
 		}
 	}),
-	loader: (0, __marigold_system.cva)("size-full", {
+	loader: (0, _marigold_system.cva)({
+		base: "size-full",
 		variants: {
 			variant: {
 				default: "",
@@ -1330,13 +1443,14 @@ const Loader = {
 			size: "default"
 		}
 	}),
-	label: (0, __marigold_system.cva)("text-current text-sm")
+	label: (0, _marigold_system.cva)({ base: "text-current text-sm" })
 };
 
 //#endregion
 //#region src/components/Breadcrumbs.styles.ts
 const Breadcrumbs = {
-	container: (0, __marigold_system.cva)(["flex flex-wrap items-center gap-1.5 wrap-break-word text-sm sm:gap-2.5 text-muted-foreground"], {
+	container: (0, _marigold_system.cva)({
+		base: ["flex flex-wrap items-center gap-1 wrap-break-word text-sm sm:gap-1.5 text-muted-foreground"],
 		variants: {
 			variant: { default: "" },
 			size: {
@@ -1350,38 +1464,39 @@ const Breadcrumbs = {
 			size: "default"
 		}
 	}),
-	item: (0, __marigold_system.cva)("inline-flex items-center  gap-1.5 sm:gap-2.5"),
-	link: (0, __marigold_system.cva)("transition-colors hover:text-foreground cursor-pointer"),
-	current: (0, __marigold_system.cva)("font-normal text-foreground")
+	item: (0, _marigold_system.cva)({ base: "inline-flex items-center gap-1.5 sm:gap-2.5" }),
+	link: (0, _marigold_system.cva)({ base: "transition-colors hover:text-foreground cursor-pointer" }),
+	current: (0, _marigold_system.cva)({ base: "font-normal text-foreground" })
 };
 
 //#endregion
 //#region src/components/FileField.styles.ts
 const FileField = {
-	container: (0, __marigold_system.cva)("space-y-2 "),
-	dropZone: (0, __marigold_system.cva)([
+	container: (0, _marigold_system.cva)({ base: "space-y-2 " }),
+	dropZone: (0, _marigold_system.cva)({ base: [
 		"relative flex min-h-52 flex-col items-center overflow-hidden",
 		"rounded-xl border border-dashed border-surface-border",
 		"p-4 transition-[color,background] not-data-files:justify-center",
 		"data-[drop-target=true]:bg-muted",
 		"focus-visible:bg-focus/50"
-	]),
-	dropZoneContent: (0, __marigold_system.cva)("flex flex-col items-center justify-center gap-2 px-4 py-3 text-center"),
-	dropZoneLabel: (0, __marigold_system.cva)("text-sm font-medium"),
-	item: (0, __marigold_system.cva)([
+	] }),
+	dropZoneContent: (0, _marigold_system.cva)({ base: "flex flex-col items-center justify-center gap-2 px-4 py-3 text-center" }),
+	dropZoneLabel: (0, _marigold_system.cva)({ base: "text-sm font-medium" }),
+	item: (0, _marigold_system.cva)({ base: [
 		"[grid-template-areas:'label_remove'_'description_remove'] grid-cols-[1fr_auto] gap-y-0.5 gap-x-2",
 		"p-2",
 		"ui-surface shadow-elevation-border"
-	]),
-	itemLabel: (0, __marigold_system.cva)(["truncate text-[13px] font-medium"]),
-	itemDescription: (0, __marigold_system.cva)(["text-muted-foreground text-xs"]),
-	itemRemove: (0, __marigold_system.cva)(["flex items-center"])
+	] }),
+	itemLabel: (0, _marigold_system.cva)({ base: ["truncate text-[13px] font-medium"] }),
+	itemDescription: (0, _marigold_system.cva)({ base: ["text-muted-foreground text-xs"] }),
+	itemRemove: (0, _marigold_system.cva)({ base: ["flex items-center"] })
 };
 
 //#endregion
 //#region src/components/ToggleButton.styles.ts
 const ToggleButton = {
-	group: (0, __marigold_system.cva)("group inline-flex ui-surface shadow-elevation-border", {
+	group: (0, _marigold_system.cva)({
+		base: "group inline-flex ui-surface shadow-elevation-border",
 		variants: { size: {
 			default: "text-sm",
 			small: "text-xs",
@@ -1389,16 +1504,17 @@ const ToggleButton = {
 		} },
 		defaultVariants: { size: "default" }
 	}),
-	button: (0, __marigold_system.cva)([
-		...buttonBase,
-		"ui-surface shadow-elevation-border",
-		"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
-		"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
-		"selected:[--ui-background-color:var(--color-input)] selected:shadow-none",
-		"in-[.group]:rounded-none in-[.group]:shadow-none in-[.group]:border-y-0 in-[.group]:border-l-0",
-		"in-[.group]:first:rounded-l-surface",
-		"in-[.group]:last:rounded-r-surface in-[.group]:last:border-r-0"
-	], {
+	button: (0, _marigold_system.cva)({
+		base: [
+			"ui-button-base gap-2",
+			"ui-surface shadow-elevation-border",
+			"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
+			"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
+			"selected:[--ui-background-color:var(--color-input)] selected:shadow-none",
+			"in-[.group]:rounded-none in-[.group]:shadow-none in-[.group]:border-y-0 in-[.group]:border-l-0",
+			"in-[.group]:first:rounded-l-surface",
+			"in-[.group]:last:rounded-r-surface in-[.group]:last:border-r-0"
+		],
 		variants: { size: {
 			default: "text-sm",
 			small: "text-xs",
@@ -1422,9 +1538,22 @@ const ToggleButton = {
 	})
 };
 
+//#endregion
+//#region src/components/TopNavigation.styles.ts
+const TopNavigation = {
+	container: (0, _marigold_system.cva)({ base: [
+		"w-full min-h-14",
+		"bg-background border-b border-border shadow-elevation-border",
+		"gap-4 px-3 pt-2 sm:gap-6 md:gap-8 lg:gap-12"
+	] }),
+	start: (0, _marigold_system.cva)({ base: "flex justify-start gap-4" }),
+	middle: (0, _marigold_system.cva)({ base: ["flex items-end", "p-1 -m-1"] }),
+	end: (0, _marigold_system.cva)({ base: "flex justify-end gap-4" })
+};
+
 //#endregion
 //#region src/components/index.ts
-var components_exports = /* @__PURE__ */ __export({
+var components_exports = /* @__PURE__ */ __exportAll({
 	Accordion: () => Accordion,
 	ActionBar: () => ActionBar,
 	Autocomplete: () => Autocomplete,
@@ -1466,6 +1595,7 @@ var components_exports = /* @__PURE__ */ __export({
 	Radio: () => Radio,
 	SectionMessage: () => SectionMessage,
 	Select: () => Select,
+	Sidebar: () => Sidebar,
 	Slider: () => Slider,
 	Switch: () => Switch,
 	Table: () => Table,
@@ -1477,6 +1607,7 @@ var components_exports = /* @__PURE__ */ __export({
 	Toast: () => Toast,
 	ToggleButton: () => ToggleButton,
 	Tooltip: () => Tooltip,
+	TopNavigation: () => TopNavigation,
 	Tray: () => Tray,
 	Underlay: () => Underlay
 });