@marigold/theme-rui 4.0.2 → 5.0.0

package/dist/index.cjs

@@ -27,10 +27,10 @@ const Accordion = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	item: (0, __marigold_system.cva)("bg-background border-b last:border-b-0 border-border", {
+	item: (0, __marigold_system.cva)("", {
 		variants: { variant: {
-			default: "",
-			card: ["rounded-md border px-4 py-1 outline-none last:border-b", "has-focus-visible:util-focus-ring outline-none"]
+			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" }
 	}),
@@ -41,19 +41,60 @@ const Accordion = {
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground"
 	], {
 		variants: { variant: {
-			default: "focus-visible:util-focus-ring outline-none",
-			card: "outline-none"
+			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"),
+	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")
 };
 
+//#endregion
+//#region src/components/ActionBar.styles.ts
+const ActionBar = {
+	container: (0, __marigold_system.cva)([
+		"relative w-fit",
+		"flex items-center justify-between justify-items-center gap-4",
+		"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)([
+		"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"
+	])
+};
+
+//#endregion
+//#region src/components/Autocomplete.styles.ts
+const Autocomplete = { mobileTrigger: (0, __marigold_system.cva)("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:util-focus-ring outline-none"], {
+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"
+], {
 	variants: { variant: {
 		default: "bg-muted text-foreground border border-border",
 		primary: "bg-brand text-brand-foreground ",
@@ -69,22 +110,30 @@ const Badge = (0, __marigold_system.cva)(["inline-flex items-center justify-cent
 
 //#endregion
 //#region src/components/Button.styles.ts
-const Button = (0, __marigold_system.cva)([
+const buttonBase = [
 	"inline-flex items-center justify-center gap-2",
-	"whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
-	"duration-150 active:scale-[0.98] pressed:scale-[0.98]",
+	"whitespace-nowrap rounded-surface font-medium transition-[color,box-shadow,transform]",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-	"focus-visible:util-focus-ring outline-none disabled:util-disabled",
-	"pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
+	"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"
 ], {
 	variants: {
 		variant: {
-			primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
-			secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
-			destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
-			"destructive-ghost": "text-destructive hover:bg-destructive/10",
+			primary: "bg-brand text-brand-foreground hover:bg-brand/90",
+			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",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			"destructive-ghost": "text-destructive hover:bg-destructive/10",
 			link: "text-link util-touch-hitbox"
 		},
 		size: {
@@ -118,7 +167,7 @@ const Button = (0, __marigold_system.cva)([
 				"destructive-ghost"
 			],
 			size: "default",
-			class: "h-button px-4 py-2 [&_svg]:size-4"
+			class: "h-button p-squish-relaxed [&_svg]:size-4"
 		},
 		{
 			variant: [
@@ -159,21 +208,12 @@ const Button = (0, __marigold_system.cva)([
 //#endregion
 //#region src/components/Card.styles.ts
 const Card = (0, __marigold_system.cva)(["p-4 rounded-md"], {
-	variants: {
-		variant: {
-			default: "util-surface-raised",
-			master: "rounded-md bg-access-master/30 p-4 border border-access-master",
-			admin: "rounded-md bg-access-admin/30 p-4 border border-access-admin"
-		},
-		size: {
-			default: "",
-			full: "w-full"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
+	variants: { variant: {
+		default: "ui-surface shadow-elevation-raised",
+		master: "bg-access-master/30 border border-access-master",
+		admin: "bg-access-admin/30 border border-access-admin"
+	} },
+	defaultVariants: { variant: "default" }
 });
 
 //#endregion
@@ -182,7 +222,7 @@ const Checkbox = {
 	checkbox: (0, __marigold_system.cva)([
 		"grid size-4 shrink-0 place-content-center rounded",
 		"border border-input shadow-xs",
-		"group-focus-visible/checkbox:util-focus-ring outline-none",
+		"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"
@@ -190,36 +230,45 @@ const Checkbox = {
 	container: (0, __marigold_system.cva)("cursor-pointer read-only:cursor-default gap-2"),
 	label: (0, __marigold_system.cva)([
 		"flex items-center gap-1",
-		"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foregroun",
+		"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foreground",
 		"group-disabled/checkbox:text-disabled-foreground"
 	]),
-	group: (0, __marigold_system.cva)()
+	group: (0, __marigold_system.cva)("flex flex-col gap-1")
 };
 
 //#endregion
 //#region src/components/Calendar.styles.ts
 const Calendar = {
-	calendar: (0, __marigold_system.cva)("rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"),
+	calendar: (0, __marigold_system.cva)([
+		"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)([
 		"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-property:color,background-color,border-radius,box-shadow]",
-		"disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
-		"disabled:opacity-30 data-[unavailable]:opacity-30",
-		"focus-visible:util-focus-borderless-ring outline-none"
+		"outline-offset-2 duration-150 transition-all",
+		"selected:bg-brand selected:text-brand-foreground",
+		"data-hovered:bg-hover data-hovered:text-foreground",
+		"data-focus-visible:z-10 focus-visible:ui-state-focus outline-none",
+		"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)([
 		"size-9 rounded-lg",
 		"text-muted-foreground/80",
 		"transition-colors",
-		"focus-visible:util-focus-ring outline-none"
+		"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"),
+	calendarGrid: (0, __marigold_system.cva)("[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75"),
 	calendarListboxButton: (0, __marigold_system.cva)([
 		"rounded-md text-sm font-medium transition-[color,box-shadow]",
 		"px-4 py-2",
-		"focus-visible:util-focus-ring outline-none",
+		"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"
@@ -227,7 +276,7 @@ const Calendar = {
 	select: (0, __marigold_system.cva)([
 		"[&svg]:text-muted-foreground/80",
 		"flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
-		"focus-visible:util-focus-ring outline-none",
+		"focus-visible:ui-state-focus outline-none",
 		"h-input",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
 		"cursor-pointer"
@@ -240,15 +289,18 @@ const CloseButton = (0, __marigold_system.cva)([
 	"flex items-center justify-center whitespace-nowrap",
 	"cursor-pointer",
 	"transition-[color,box-shadow]",
-	"focus-visible:util-focus-ring outline-none",
+	"focus-visible:ui-state-focus outline-none",
 	"rounded-full",
-	"duration-150 active:scale-[0.98] pressed:scale-[0.98] transition-transform",
+	"duration-150 active:scale-[0.97] pressed:scale-[0.97] transition-transform",
 	"[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
 ]);
 
 //#endregion
 //#region src/components/ComboBox.styles.ts
-const ComboBox = (0, __marigold_system.cva)("text-muted-foreground/80 right-2");
+const ComboBox = {
+	icon: (0, __marigold_system.cva)("text-muted-foreground/80 right-2"),
+	mobileTrigger: (0, __marigold_system.cva)("group/input relative flex items-center")
+};
 
 //#endregion
 //#region src/components/Collapsible.styles.ts
@@ -256,9 +308,9 @@ 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.98] pressed:scale-[0.98]",
+		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"focus-visible:util-focus-ring outline-none disabled:util-disabled",
+		"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
 		"cursor-pointer"
 	], {
 		variants: {
@@ -280,81 +332,53 @@ const Collapsible = {
 //#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:bg-hover hover:text-foreground",
+		"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:util-focus-ring outline-none",
-		"cursor-pointer"
+		"focus-visible:ui-state-focus outline-none",
+		"cursor-pointer util-touch-hitbox"
 	], {
 		variants: {
 			variant: {
 				help: "",
 				info: ""
 			},
-			size: {
-				default: "size-button [&_svg]:size-4",
-				small: "size-button-small [&_svg]:size-3.5",
-				large: "size-button-large [&_svg]:size-5"
-			}
+			size: { default: "[&_svg]:size-4" }
 		},
 		defaultVariants: { size: "default" }
 	}),
-	popover: (0, __marigold_system.cva)([
-		"flex flex-col gap-0 rounded-xl p-5 util-surface-overlay",
-		"data-[small]:max-w-3xs data-[medium]:max-w-xs data-[large]:max-w-md",
-		"overflow-y-auto util-scrollbar"
+	container: (0, __marigold_system.cva)([
+		"outline-none",
+		"ui-surface shadow-elevation-overlay util-scrollbar",
+		"p-5",
+		"data-small:max-w-3xs data-medium:max-w-xs data-large:max-w-md"
 	]),
-	container: (0, __marigold_system.cva)(""),
 	title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
 	content: (0, __marigold_system.cva)("text-sm")
 };
 
-//#endregion
-//#region src/components/Input.styles.ts
-const inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
-const inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
-const inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
-const inputReadOnly = "group-read-only/field:bg-muted";
-const Input = {
-	input: (0, __marigold_system.cva)([
-		inputContainer,
-		inputDisabled,
-		inputInvalid,
-		"focus:util-focus-ring outline-none",
-		inputReadOnly,
-		"h-input",
-		"placeholder:text-placeholder",
-		"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
-		"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",
-		"group-[[data-icon]]/input:pl-8",
-		"group-[[data-action]]/input:pr-7"
-	]),
-	icon: (0, __marigold_system.cva)(["pointer-events-none left-2", "text-muted-foreground disabled:text-disabled-foreground"]),
-	action: (0, __marigold_system.cva)(["text-muted-foreground pr-1"])
-};
-
 //#endregion
 //#region src/components/DateField.styles.ts
 const DateField = {
 	field: (0, __marigold_system.cva)([
-		"h-input",
-		inputContainer,
-		inputDisabled,
-		"has-focus-visible:util-focus-ring outline-none",
-		inputInvalid,
-		inputReadOnly,
-		"invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20",
-		"data-[focus-within]:util-focus-ring outline-0"
+		"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)([
-		inputDisabled,
-		"inline rounded p-0.5 text-foreground caret-transparent outline-0 data-[type=literal]:px-0 data-[focused]:data-[placeholder]:text-foreground data-[focused]:text-foreground  data-[type=literal]:text-placeholder ",
-		"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",
+		"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",
+		"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"
+		"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")
 };
@@ -362,17 +386,18 @@ const DateField = {
 //#endregion
 //#region src/components/DatePicker.styles.ts
 const DatePicker = (0, __marigold_system.cva)([
-	"relative h-input -top-2",
+	"h-input pr-3",
 	"text-muted-foreground/80",
 	"hover:text-brand",
-	"disabled:cursor-not-allowed"
+	"disabled:cursor-not-allowed",
+	"util-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", "util-surface-overlay"], { variants: {
+	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: "",
@@ -400,32 +425,70 @@ const Divider = (0, __marigold_system.cva)("bg-border h-px w-full", {
 //#region src/components/Drawer.styles.ts
 const Drawer = {
 	overlay: (0, __marigold_system.cva)([
-		"group/overlay z-40",
-		"data-[placement=top]:w-full data-[placement=top]:entering:animate-slide-in-top data-[placement=top]:exiting:animate-slide-out-top data-[placement=top]:top-0 data-[placement=top]:left-0",
-		"data-[placement=bottom]:w-full data-[placement=bottom]:entering:animate-slide-in-bottom data-[placement=bottom]:exiting:animate-slide-out-bottom data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0",
-		"data-[placement=left]:entering:animate-slide-in-left data-[placement=left]:exiting:animate-slide-out-left data-[placement=left]:top-0 data-[placement=left]:left-0",
-		"data-[placement=right]:entering:animate-slide-in-right data-[placement=right]:exiting:animate-slide-out-right data-[placement=right]:top-0 data-[placement=right]:right-0"
+		"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]",
-		"util-surface-overlay",
-		"data-[placement=top]:w-full data-[placement=bottom]:w-full"
+		"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 data-[placement=top]:h-48 data-[placement=bottom]:h-48",
-		small: "w-72 data-[placement=top]:h-64 data-[placement=bottom]:h-64",
-		medium: "w-96 data-[placement=top]:h-80 data-[placement=bottom]:h-80"
+		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 z-50", "size-7"]),
+	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")
 };
 
+//#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"])
+};
+
 //#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" } } });
 
+//#endregion
+//#region src/components/Input.styles.ts
+const Input = {
+	input: (0, __marigold_system.cva)([
+		"ui-surface shadow-elevation-border ui-input",
+		"disabled:ui-state-disabled",
+		"group-read-only/field:ui-state-readonly",
+		"invalid:ui-state-error",
+		"focus:ui-state-focus outline-none",
+		"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",
+		"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"])
+};
+
 //#endregion
 //#region src/components/Field.styles.ts
 const Field = (0, __marigold_system.cva)("space-y-2");
@@ -505,15 +568,22 @@ const List = {
 //#endregion
 //#region src/components/ListBox.styles.ts
 const ListBox = {
-	container: (0, __marigold_system.cva)(["overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"]),
-	list: (0, __marigold_system.cva)(["bg-background p-1 text-sm outline-0 space-y-px"]),
+	container: (0, __marigold_system.cva)([
+		"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",
 		"[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
 		"selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
 		"hover:bg-hover hover:text-hover-foreground",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground",
-		"focus-visible:util-focus-ring outline-none focus-visible:z-1",
+		"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"
 	]),
@@ -524,9 +594,13 @@ const ListBox = {
 //#endregion
 //#region src/components/Menu.styles.ts
 const Menu = {
-	container: (0, __marigold_system.cva)(["text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"]),
+	container: (0, __marigold_system.cva)([
+		"ui-surface shadow-elevation-overlay w-full",
+		"text-foreground overflow-hidden p-1 outline-none",
+		"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-sm px-2 py-1.5 text-sm outline-hidden select-none text-nowrap",
+		"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"
 	], {
@@ -536,17 +610,17 @@ const Menu = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	section: (0, __marigold_system.cva)("text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"),
+	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 rounded-md text-sm font-medium transition-[color,box-shadow]",
-		"[&_svg]:shrink-0 [&_svg]:pointer-events-none",
-		"focus-visible:util-focus-ring outline-none disabled:util-disabled",
-		"cursor-pointer"
+		"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"
 	], {
 		variants: {
 			variant: {
-				default: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
-				ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
+				default: "ui-surface expanded:bg-hover",
+				ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover rounded-surface"
 			},
 			size: {
 				default: "h-button px-4 py-2 [&_svg]:size-4",
@@ -582,7 +656,7 @@ const Modal = (0, __marigold_system.cva)([
 const MultiSelect = {
 	field: (0, __marigold_system.cva)("space-y-2"),
 	container: (0, __marigold_system.cva)([
-		"bg-background shadow-xs border",
+		"ui-surface",
 		"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",
@@ -609,15 +683,15 @@ const MultiSelect = {
 	]),
 	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)(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
+	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)([
 		"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",
+		"[&.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"
+		"[&.isFocused:not([aria-disabled=true])]:bg-hover!"
 	]),
 	valueContainer: (0, __marigold_system.cva)("gap-2")
 };
@@ -626,22 +700,24 @@ const MultiSelect = {
 //#region src/components/NumberField.styles.ts
 const NumberField = {
 	group: (0, __marigold_system.cva)([
-		"rounded-lg h-input bg-background",
-		"has-focus-visible:util-focus-ring outline-none",
-		inputInvalid,
-		inputReadOnly,
-		"border border-input text-sm shadow-xs transition-shadow",
-		"data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
+		"ui-surface shadow-elevation-border h-input",
+		"has-invalid:ui-state-error",
+		"has-disabled:ui-state-disabled",
+		"group-read-only/field:ui-state-readonly",
+		"has-focus:ui-state-focus outline-none"
 	]),
 	stepper: (0, __marigold_system.cva)([
-		"w-7 h-full text-center shrink-0",
+		"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! last-of-type:border-l!"
+		"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)([
-		"tabular-nums text-foreground px-3 py-2",
-		"min-w-0 flex-1 bg-transparent",
-		"group-[[data-stepper]]/field:text-center",
+		"ui-input",
+		"flex-1",
+		"group-data-stepper/field:text-center",
 		"disabled:text-disabled-foreground disabled:bg-disabled"
 	])
 };
@@ -650,12 +726,11 @@ const NumberField = {
 //#region src/components/Popover.styles.ts
 const Popover = (0, __marigold_system.cva)([
 	"group/popover",
-	"text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
+	"outline-0",
 	"placement-top:mb-1",
 	"placement-bottom:mt-1",
 	"placement-right:ml-1",
-	"placement-left:mr-1",
-	"util-surface-overlay"
+	"placement-left:mr-1"
 ]);
 
 //#endregion
@@ -666,7 +741,7 @@ const Radio = {
 	radio: (0, __marigold_system.cva)([
 		"aspect-square size-4 rounded-full",
 		"border border-input shadow-xs",
-		"group-focus-visible/radio:util-focus-ring outline-none",
+		"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"
 	]),
@@ -677,7 +752,7 @@ const Radio = {
 //#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:util-focus-ring outline-none",
+	"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",
@@ -694,7 +769,7 @@ const Pagination = {
 	pageButton: (0, __marigold_system.cva)([
 		...button,
 		"bg-background size-9",
-		"data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
+		"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")
@@ -783,12 +858,11 @@ const SectionMessage = {
 const Select = {
 	icon: (0, __marigold_system.cva)("text-muted-foreground/80"),
 	select: (0, __marigold_system.cva)([
-		inputContainer,
-		inputInvalid,
-		inputDisabled,
-		"focus-visible:util-focus-ring outline-none",
-		"h-input",
+		"ui-surface shadow-elevation-border ui-input h-input ",
 		"cursor-pointer",
+		"group-invalid/field:ui-state-error",
+		"disabled:ui-state-disabled",
+		"focus-visible:ui-state-focus outline-none",
 		"*:data-placeholder:text-placeholder",
 		"has-[+_[aria-hidden=true]]:mb-0"
 	])
@@ -798,11 +872,11 @@ const Select = {
 //#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 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"]),
-	selectedTrack: (0, __marigold_system.cva)(["absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"]),
+	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)([
 		"block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
-		"focus-visible:util-focus-borderless-ring outline-none",
+		"focus-visible:ui-state-focus outline-none",
 		"disabled:cursor-not-allowed"
 	]),
 	output: (0, __marigold_system.cva)("text-foreground text-sm")
@@ -817,7 +891,7 @@ const Switch = {
 		"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:util-focus-borderless-ring outline-none"
+		"group-focus-visible/switch:ui-state-focus outline-none"
 	]),
 	thumb: (0, __marigold_system.cva)([
 		"pointer-events-none block size-5 rounded-full",
@@ -830,6 +904,127 @@ const Switch = {
 //#endregion
 //#region src/components/Table.styles.ts
 const Table = {
+	table: (0, __marigold_system.cva)(["text-sm bg-background"], {
+		variants: {
+			variant: {
+				default: "",
+				grid: "border-hidden",
+				muted: ""
+			},
+			size: {
+				compact: [
+					"[--cell-y-padding:calc(var(--spacing)*1.5)]",
+					"[--cell-x-padding:calc(var(--spacing)*2)]",
+					"[--header-height:calc(var(--spacing)*8)]"
+				],
+				default: [
+					"[--cell-y-padding:calc(var(--spacing)*2.5)]",
+					"[--cell-x-padding:calc(var(--spacing)*2.5)]",
+					"[--header-height:calc(var(--spacing)*10)]"
+				],
+				spacious: [
+					"[--cell-y-padding:calc(var(--spacing)*4)]",
+					"[--cell-x-padding:calc(var(--spacing)*4)]",
+					"[--header-height:calc(var(--spacing)*12)]"
+				]
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			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"
+	], {
+		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"],
+			admin: ["bg-access-admin"],
+			master: ["bg-access-master"]
+		} },
+		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"
+	], {
+		variants: { variant: {
+			default: "",
+			grid: "not-last:border-r border-border",
+			muted: "bg-muted border-t border-border"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	body: (0, __marigold_system.cva)(["bg-background"]),
+	cell: (0, __marigold_system.cva)([
+		"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)([
+		"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)([
+		"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)([
+		"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)([
+		"flex items-center justify-center",
+		"text-foreground/60",
+		"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",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
+	]),
+	editCancel: (0, __marigold_system.cva)([
+		"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]",
+		"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",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
+	]),
+	editSave: (0, __marigold_system.cva)([
+		"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]",
+		"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",
+		"[&_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: ""
@@ -854,15 +1049,15 @@ const Table = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	body: (0, __marigold_system.cva)("[&_tr:last-child]:border-0"),
+	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"
 	], {
 		variants: { variant: {
-			default: "aria-[selected=true]:bg-muted",
-			grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
+			default: "aria-selected:bg-muted",
+			grid: "aria-selected:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
 			admin: [
 				"bg-access-admin",
 				"[&_td:first-child]:relative [&_td:first-child]:pl-4",
@@ -895,13 +1090,13 @@ const Tabs = {
 	tab: (0, __marigold_system.cva)([
 		"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:util-focus-ring outline-none",
+		"focus-visible:ui-state-focus outline-none",
 		"hover:bg-hover hover:text-foreground",
 		"disabled:pointer-events-none disabled:opacity-50",
-		"data-selected:text-foreground data-selected:hover:bg-hover",
+		"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:util-focus-ring outline-none"])
+	tabpanel: (0, __marigold_system.cva)(["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"])
 };
 
 //#endregion
@@ -909,35 +1104,64 @@ const Tabs = {
 const Tag = {
 	container: (0, __marigold_system.cva)(["flex gap-3", "min-h-7"]),
 	tag: (0, __marigold_system.cva)([
-		"relative inline-flex items-center gap-[7px]",
-		"border border-solid border-input rounded-lg",
+		"relative inline-flex items-center gap-1.75",
+		"ui-surface shadow-elevation-border",
 		"font-medium text-xs",
-		"h-7 px-2 cursor-default",
-		"bg-background",
-		"selected:text-white selected:bg-brand",
+		"h-6 px-2 cursor-default",
+		"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:util-focus-ring outline-none"
+		"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)([
 		"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform] rounded-md",
-		"duration-150 active:scale-[0.98] pressed:scale-[0.98]",
-		"focus-visible:util-focus-ring outline-none",
+		"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
+		"focus-visible:ui-state-focus outline-none",
 		"cursor-pointer",
 		"text-link text-xs util-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",
+		"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",
+		"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)([
+		"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)([
-	inputContainer,
-	inputInvalid,
-	"focus:util-focus-ring outline-none",
-	inputDisabled,
-	inputReadOnly,
-	"invalid:text-destructive"
+	"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
@@ -975,10 +1199,10 @@ const Text = (0, __marigold_system.cva)("", {
 //#region src/components/Toast.styles.ts
 const Toast = {
 	toast: (0, __marigold_system.cva)([
-		"z-50",
-		"max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
+		"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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+		"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:state-focus outline-none",
 		"p-4"
 	]),
 	title: (0, __marigold_system.cva)([
@@ -992,7 +1216,7 @@ const Toast = {
 		"ml-2",
 		"flex items-center justify-center",
 		"size-5 rounded transition-[color,box-shadow] outline-none",
-		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
+		"focus-visible:ui-state-focus outline-none text-muted-foreground hover:text-hover-foreground"
 	]),
 	icon: (0, __marigold_system.cva)([
 		"[grid-area:icon]",
@@ -1022,7 +1246,7 @@ const Toast = {
 //#region src/components/Tooltip.styles.ts
 const Tooltip = {
 	container: (0, __marigold_system.cva)([
-		"relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
+		"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",
@@ -1030,26 +1254,44 @@ const Tooltip = {
 	], {
 		variants: { variant: {
 			default: "text-brand-foreground bg-brand border-brand",
-			white: "text-secondary-foreground border-border bg-white"
+			white: "text-secondary-foreground border-input bg-white"
 		} },
 		defaultVariants: { variant: "default" }
 	}),
 	arrow: (0, __marigold_system.cva)([
-		"data-[placement=right]:[&_svg]:rotate-90",
-		"data-[placement=left]:[&_svg]:-rotate-90",
-		"data-[placement=bottom]:[&_svg]:rotate-180"
+		"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-border "
+			white: "fill-white  stroke-input "
 		} },
 		defaultVariants: { variant: "default" }
 	})
 };
 
+//#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)([
+		"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",
+		"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")
+};
+
 //#endregion
 //#region src/components/Underlay.styles.ts
-const Underlay = (0, __marigold_system.cva)("bg-black/80 px-4");
+const Underlay = (0, __marigold_system.cva)(["bg-black/80 px-4"]);
 
 //#endregion
 //#region src/components/Loader.styles.ts
@@ -1117,18 +1359,75 @@ const Breadcrumbs = {
 //#region src/components/FileField.styles.ts
 const FileField = {
 	container: (0, __marigold_system.cva)("space-y-2 "),
-	dropZone: (0, __marigold_system.cva)("data-[drop-target=true]:bg-muted border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"),
+	dropZone: (0, __marigold_system.cva)([
+		"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)("flex min-w-0 flex-col gap-0.5"),
-	itemLabel: (0, __marigold_system.cva)("truncate text-[13px] font-medium"),
-	itemDescription: (0, __marigold_system.cva)("text-muted-foreground text-xs")
+	item: (0, __marigold_system.cva)([
+		"[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"])
+};
+
+//#endregion
+//#region src/components/ToggleButton.styles.ts
+const ToggleButton = {
+	group: (0, __marigold_system.cva)("group inline-flex ui-surface shadow-elevation-border", {
+		variants: { size: {
+			default: "text-sm",
+			small: "text-xs",
+			icon: ""
+		} },
+		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"
+	], {
+		variants: { size: {
+			default: "text-sm",
+			small: "text-xs",
+			icon: ""
+		} },
+		defaultVariants: { size: "default" },
+		compoundVariants: [
+			{
+				size: "default",
+				class: "h-button px-4 py-2 [&_svg]:size-4"
+			},
+			{
+				size: "small",
+				class: "h-button-small px-3 [&_svg]:size-3.5"
+			},
+			{
+				size: "icon",
+				class: "size-button [&_svg]:size-4"
+			}
+		]
+	})
 };
 
 //#endregion
 //#region src/components/index.ts
 var components_exports = /* @__PURE__ */ __export({
 	Accordion: () => Accordion,
+	ActionBar: () => ActionBar,
+	Autocomplete: () => Autocomplete,
 	Badge: () => Badge,
 	Breadcrumbs: () => Breadcrumbs,
 	Button: () => Button,
@@ -1144,6 +1443,7 @@ var components_exports = /* @__PURE__ */ __export({
 	Dialog: () => Dialog,
 	Divider: () => Divider,
 	Drawer: () => Drawer,
+	EmptyState: () => EmptyState,
 	Field: () => Field,
 	FileField: () => FileField,
 	Headline: () => Headline,
@@ -1151,6 +1451,7 @@ var components_exports = /* @__PURE__ */ __export({
 	IconButton: () => IconButton,
 	Input: () => Input,
 	Label: () => Label,
+	LegacyTable: () => LegacyTable,
 	Link: () => Link,
 	List: () => List,
 	ListBox: () => ListBox,
@@ -1170,10 +1471,13 @@ var components_exports = /* @__PURE__ */ __export({
 	Table: () => Table,
 	Tabs: () => Tabs,
 	Tag: () => Tag,
+	TagField: () => TagField,
 	Text: () => Text,
 	TextArea: () => TextArea,
 	Toast: () => Toast,
+	ToggleButton: () => ToggleButton,
 	Tooltip: () => Tooltip,
+	Tray: () => Tray,
 	Underlay: () => Underlay
 });