@nuxt/ui 3.0.0-alpha.6 → 3.0.0-alpha.7

package/dist/module.mjs

@@ -7,9 +7,9 @@ import { pick } from '../dist/runtime/utils/index.js';
 const accordion = {
   slots: {
     root: "w-full",
-    item: "border-b border-[--ui-border] last:border-b-0",
+    item: "border-b border-[var(--ui-border)] last:border-b-0",
     header: "flex",
-    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0",
     content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
@@ -63,49 +63,49 @@ const alert = (options) => ({
     color,
     variant: "solid",
     class: {
-      root: `bg-[--ui-${color}] text-[--ui-bg]`
+      root: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: {
-      root: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
+      root: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: {
-      root: `bg-[--ui-${color}]/10 text-[--ui-${color}]`
+      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: {
-      root: `bg-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
+      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
     }
   })), {
     color: "neutral",
     variant: "solid",
     class: {
-      root: "text-[--ui-bg] bg-[--ui-bg-inverted]"
+      root: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
     }
   }, {
     color: "neutral",
     variant: "outline",
     class: {
-      root: "text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border]"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]"
     }
   }, {
     color: "neutral",
     variant: "soft",
     class: {
-      root: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50"
     }
   }, {
     color: "neutral",
     variant: "subtle",
     class: {
-      root: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 ring ring-inset ring-[--ui-border-accented]"
+      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]"
     }
   }],
   defaultVariants: {
@@ -116,10 +116,10 @@ const alert = (options) => ({
 
 const avatar = {
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated]",
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]",
     image: "h-full w-full rounded-[inherit] object-cover",
-    fallback: "font-medium leading-none text-[--ui-text-muted] truncate",
-    icon: "text-[--ui-text-muted] shrink-0"
+    fallback: "font-medium leading-none text-[var(--ui-text-muted)] truncate",
+    icon: "text-[var(--ui-text-muted)] shrink-0"
   },
   variants: {
     size: {
@@ -160,18 +160,18 @@ const avatar = {
 const avatarGroup = {
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
-    base: "relative rounded-full ring-[--ui-bg] first:me-0"
+    base: "relative rounded-full ring-[var(--ui-bg)] first:me-0"
   },
   variants: {
     size: {
       "3xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "2xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "xs": {
-        base: "ring-1 -me-0.5"
+        base: "ring -me-0.5"
       },
       "sm": {
         base: "ring-2 -me-1.5"
@@ -183,13 +183,13 @@ const avatarGroup = {
         base: "ring-2 -me-1.5"
       },
       "xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       },
       "2xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       },
       "3xl": {
-        base: "ring-2.5 -me-2"
+        base: "ring-3 -me-2"
       }
     }
   },
@@ -220,35 +220,35 @@ const badge = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `bg-[--ui-${color}] text-[--ui-bg]`
+    class: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/50`
+    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/50`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `bg-[--ui-${color}]/10 text-[--ui-${color}]`
+    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `bg-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
+    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-[--ui-bg] bg-[--ui-bg-inverted]"
+    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg]"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-[--ui-text] bg-[--ui-bg-elevated]"
+    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated]"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
   }],
   defaultVariants: {
     color: "primary",
@@ -262,21 +262,21 @@ const breadcrumb = (options) => ({
     root: "relative min-w-0",
     list: "flex items-center gap-1.5",
     item: "flex min-w-0",
-    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary]",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)]",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
     linkLabel: "truncate",
     separator: "flex",
-    separatorIcon: "shrink-0 size-5 text-[--ui-text-muted]"
+    separatorIcon: "shrink-0 size-5 text-[var(--ui-text-muted)]"
   },
   variants: {
     active: {
       true: {
-        link: "text-[--ui-primary] font-semibold"
+        link: "text-[var(--ui-primary)] font-semibold"
       },
       false: {
-        link: "text-[--ui-text-muted] font-medium"
+        link: "text-[var(--ui-text-muted)] font-medium"
       }
     },
     disabled: {
@@ -293,7 +293,7 @@ const breadcrumb = (options) => ({
     active: false,
     to: true,
     class: {
-      link: ["hover:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     }
   }]
 });
@@ -339,6 +339,7 @@ const button = (options) => ({
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
     trailingIcon: "shrink-0"
   },
   variants: {
@@ -359,32 +360,38 @@ const button = (options) => ({
       xs: {
         base: "px-2 py-1 text-xs gap-1",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       sm: {
         base: "px-2.5 py-1.5 text-xs gap-1.5",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       md: {
         base: "px-2.5 py-1.5 text-sm gap-1.5",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       lg: {
         base: "px-3 py-2 text-sm gap-2",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
         base: "px-3 py-2 text-base gap-2",
         leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
         trailingIcon: "size-6"
       }
     },
     block: {
       true: {
         base: "w-full justify-center",
+        leadingAvatarSize: "xs",
         trailingIcon: "ms-auto"
       }
     },
@@ -404,51 +411,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-[--ui-bg] bg-[--ui-${color}] hover:bg-[--ui-${color}]/75 disabled:bg-[--ui-${color}] aria-disabled:bg-[--ui-${color}] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-${color}]`
+    class: `text-[var(--ui-bg)] bg-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/75 disabled:bg-[var(--ui-${color})] aria-disabled:bg-[var(--ui-${color})] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-[--ui-${color}]/50 text-[--ui-${color}] hover:bg-[--ui-${color}]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--ui-${color}]`
+    class: `ring ring-inset ring-[var(--ui-${color})]/50 text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-[--ui-${color}] bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 focus-visible:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--ui-${color}]/10`
+    class: `text-[var(--ui-${color})] bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 focus-visible:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25 bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--ui-${color}]/10 focus-visible:ring-2 focus-visible:ring-[--ui-${color}]`
+    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25 bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-[--ui-${color}] hover:bg-[--ui-${color}]/10 focus-visible:bg-[--ui-${color}]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 focus-visible:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-[--ui-${color}] hover:text-[--ui-${color}] disabled:text-[--ui-${color}] aria-disabled:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
+    class: `text-[var(--ui-${color})] hover:text-[var(--ui-${color})]/75 disabled:text-[var(--ui-${color})] aria-disabled:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-[--ui-bg] bg-[--ui-bg-inverted] hover:bg-[--ui-bg-inverted]/80 disabled:bg-[--ui-bg-inverted] aria-disabled:bg-[--ui-bg-inverted] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted]"
+    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg] hover:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg] aria-disabled:bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 focus-visible:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated]"
+    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]"
+    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
     color: "neutral",
     variant: "ghost",
-    class: "text-[--ui-text] hover:bg-[--ui-bg-elevated] focus-visible:bg-[--ui-bg-elevated] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+    class: "text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "neutral",
     variant: "link",
-    class: "text-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]"
+    class: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
     size: "xs",
     square: true,
@@ -492,7 +499,7 @@ const button = (options) => ({
 
 const card = {
   slots: {
-    root: "bg-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--ui-border] rounded-[calc(var(--ui-radius)*2)] shadow",
+    root: "bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
@@ -510,7 +517,7 @@ const carousel = (options) => ({
     prev: "absolute rounded-full",
     next: "absolute rounded-full",
     dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
-    dot: ["cursor-pointer size-3 bg-[--ui-border-accented] rounded-full", options.theme.transitions && "transition"]
+    dot: ["cursor-pointer size-3 bg-[var(--ui-border-accented)] rounded-full", options.theme.transitions && "transition"]
   },
   variants: {
     orientation: {
@@ -529,7 +536,7 @@ const carousel = (options) => ({
     },
     active: {
       true: {
-        dot: "bg-[--ui-border-inverted]"
+        dot: "bg-[var(--ui-border-inverted)]"
       }
     }
   },
@@ -541,17 +548,17 @@ const carousel = (options) => ({
 const checkbox = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: "shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: "shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
     container: "flex items-center",
     wrapper: "ms-2",
     icon: "shrink-0 size-full",
-    label: "block font-medium text-[--ui-text]",
-    description: "text-[--ui-text-muted]"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-[--ui-${color}]`])),
-      neutral: "focus-visible:outline-[--ui-border-inverted]"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-[var(--ui-${color})]`])),
+      neutral: "focus-visible:outline-[var(--ui-border-inverted)]"
     },
     size: {
       xs: {
@@ -582,7 +589,7 @@ const checkbox = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-[--ui-error]"
+        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     },
     disabled: {
@@ -599,11 +606,11 @@ const checkbox = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     checked: true,
-    class: `ring-2 ring-[--ui-${color}] bg-[--ui-${color}]`
+    class: `ring-2 ring-[var(--ui-${color})] bg-[var(--ui-${color})]`
   })), {
     color: "neutral",
     checked: true,
-    class: "ring-2 ring-[--ui-border-inverted] bg-[--ui-bg-inverted]"
+    class: "ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]"
   }],
   defaultVariants: {
     size: "md",
@@ -614,12 +621,12 @@ const checkbox = (options) => ({
 const chip = (options) => ({
   slots: {
     root: "relative inline-flex items-center justify-center shrink-0",
-    base: "rounded-full ring ring-[--ui-bg] flex items-center justify-center text-[--ui-bg] font-medium whitespace-nowrap"
+    base: "rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-[--ui-${color}]`])),
-      neutral: "bg-[--ui-text-muted]"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-[var(--ui-${color})]`])),
+      neutral: "bg-[var(--ui-text-muted)]"
     },
     size: {
       "3xs": "h-[4px] min-w-[4px] text-[4px]",
@@ -671,36 +678,43 @@ const chip = (options) => ({
 
 const collapsible = {
   slots: {
-    root: "flex flex-col gap-2",
+    root: "",
     content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
   }
 };
 
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 min-w-0 divide-y divide-[--ui-border]",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]",
     input: "[&>input]:h-12",
     close: "",
     content: "relative overflow-hidden",
-    viewport: "divide-y divide-[--ui-border] scroll-py-1",
+    viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
     group: "p-1 isolate",
-    empty: "py-6 text-center text-sm",
-    label: "px-2 py-1.5 text-xs font-semibold text-[--ui-text-highlighted]",
-    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-    itemLeadingIcon: ["shrink-0 size-5 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]", options.theme.transitions && "transition-colors"],
+    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]",
+    label: "px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]",
+    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+    itemLeadingIcon: ["shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
     itemLeadingChip: "shrink-0 size-5",
     itemLeadingChipSize: "md",
     itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0 size-5",
-    itemTrailingHighlightedIcon: "shrink-0 size-5 text-[--ui-text-dimmed] hidden group-data-highlighted:inline-flex",
+    itemTrailingHighlightedIcon: "shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
     itemTrailingKbdsSize: "md",
     itemLabel: "truncate space-x-1",
-    itemLabelBase: "text-[--ui-text-highlighted] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]",
-    itemLabelPrefix: "text-[--ui-text]",
-    itemLabelSuffix: "text-[--ui-text-dimmed] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]"
+    itemLabelBase: "text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]",
+    itemLabelPrefix: "text-[var(--ui-text)]",
+    itemLabelSuffix: "text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"
+  },
+  variants: {
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
+      }
+    }
   }
 });
 
@@ -710,10 +724,10 @@ const container = {
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-[--ui-text-highlighted]",
-    separator: "-mx-1 my-1 h-px bg-[--ui-border]",
+    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
     item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
@@ -723,17 +737,22 @@ const contextMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "size-3 align-top text-[--ui-text-dimmed]"
+    itemLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]"
   },
   variants: {
     active: {
       true: {
-        item: "text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]",
-        itemLeadingIcon: "text-[--ui-text]"
+        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        itemLeadingIcon: "text-[var(--ui-text)]"
       },
       false: {
-        item: ["text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
       }
     },
     size: {
@@ -791,13 +810,13 @@ const contextMenu = (options) => ({
 
 const drawer = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-[--ui-bg-elevated]/75",
-    content: "fixed z-50 bg-[--ui-bg] ring ring-[--ui-border] flex focus:outline-none",
-    handle: "shrink-0 rounded-full bg-[--ui-bg-accented]",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-[var(--ui-bg-accented)]",
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
-    title: "text-[--ui-text-highlighted] font-semibold",
-    description: "mt-1 text-[--ui-text-muted] text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
   },
@@ -838,11 +857,11 @@ const drawer = {
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-[--ui-border]",
+    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-[var(--ui-border)]",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-[--ui-text-highlighted]",
-    separator: "-mx-1 my-1 h-px bg-[--ui-border]",
+    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
     item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
@@ -852,17 +871,22 @@ const dropdownMenu = (options) => ({
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "size-3 align-top text-[--ui-text-dimmed]"
+    itemLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]"
   },
   variants: {
     active: {
       true: {
-        item: "text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]",
-        itemLeadingIcon: "text-[--ui-text]"
+        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        itemLeadingIcon: "text-[var(--ui-text)]"
       },
       false: {
-        item: ["text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
       }
     },
     size: {
@@ -927,12 +951,12 @@ const formField = {
     root: "",
     wrapper: "",
     labelWrapper: "flex content-center items-center justify-between",
-    label: "block font-medium text-[--ui-text]",
+    label: "block font-medium text-[var(--ui-text)]",
     container: "mt-1 relative",
-    description: "text-[--ui-text-muted]",
-    error: "mt-2 text-[--ui-error]",
-    hint: "text-[--ui-text-muted]",
-    help: "mt-2 text-[--ui-text-muted]"
+    description: "text-[var(--ui-text-muted)]",
+    error: "mt-2 text-[var(--ui-error)]",
+    hint: "text-[var(--ui-text-muted)]",
+    help: "mt-2 text-[var(--ui-text-muted)]"
   },
   variants: {
     size: {
@@ -944,7 +968,7 @@ const formField = {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-[--ui-error]`
+        label: `after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]`
       }
     }
   },
@@ -956,12 +980,13 @@ const formField = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
-    leadingIcon: "shrink-0 text-[--ui-text-dimmed]",
+    leadingIcon: "shrink-0 text-[var(--ui-text-dimmed)]",
     leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
     trailing: "absolute inset-y-0 end-0 flex items-center",
-    trailingIcon: "shrink-0 text-[--ui-text-dimmed]"
+    trailingIcon: "shrink-0 text-[var(--ui-text-dimmed)]"
   },
   variants: {
     ...buttonGroupVariantWithRoot,
@@ -971,6 +996,7 @@ const input = (options) => ({
         leading: "pl-2",
         trailing: "pr-2",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       sm: {
@@ -978,6 +1004,7 @@ const input = (options) => ({
         leading: "pl-2.5",
         trailing: "pr-2.5",
         leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       md: {
@@ -985,6 +1012,7 @@ const input = (options) => ({
         leading: "pl-2.5",
         trailing: "pr-2.5",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       lg: {
@@ -992,6 +1020,7 @@ const input = (options) => ({
         leading: "pl-3",
         trailing: "pr-3",
         leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
@@ -999,15 +1028,16 @@ const input = (options) => ({
         leading: "pl-3",
         trailing: "pr-3",
         leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
         trailingIcon: "size-6"
       }
     },
     variant: {
-      outline: "text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented]",
-      soft: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg-elevated]/50",
-      subtle: "text-[--ui-text-highlighted] bg-[--ui-bg-elevated] ring ring-inset ring-[--ui-border-accented]",
-      ghost: "text-[--ui-text-highlighted] hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-[--ui-text-highlighted]"
+      outline: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
+      soft: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
+      subtle: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
+      ghost: "text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-[var(--ui-text-highlighted)]"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -1026,25 +1056,25 @@ const input = (options) => ({
       true: ""
     },
     type: {
-      file: "file:mr-1.5 file:font-medium file:text-[--ui-text-muted] file:outline-none"
+      file: "file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none"
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-[--ui-${color}]`
+    class: `ring ring-inset ring-[var(--ui-${color})]`
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
   }, {
     color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-[--ui-border-inverted]"
+    class: "ring ring-inset ring-[var(--ui-border-inverted)]"
   }, {
     leading: true,
     size: "xs",
@@ -1111,15 +1141,15 @@ const inputMenu = (options) => {
     slots: {
       base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
-      arrow: "fill-[--ui-border]",
-      content: "max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-[--ui-border] scroll-py-1",
+      arrow: "fill-[var(--ui-border)]",
+      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-[--ui-text-muted]",
-      label: "font-semibold text-[--ui-text-highlighted]",
-      separator: "-mx-1 my-1 h-px bg-[--ui-border]",
-      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
+      label: "font-semibold text-[var(--ui-text-highlighted)]",
+      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1127,20 +1157,21 @@ const inputMenu = (options) => {
       itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
       itemTrailingIcon: "shrink-0",
       itemLabel: "truncate",
-      tagsItem: "px-1.5 py-0.5 rounded-[--ui-radius] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[--ui-border-accented] bg-[--ui-bg-elevated] text-[--ui-text] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      tagsItem: "px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
-      tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[--ui-text-dimmed] hover:text-[--ui-text] hover:bg-[--ui-bg-accented]/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
+      tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
       tagsItemDeleteIcon: "",
-      tagsInput: "border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+      tagsInput: ""
     },
     variants: {
       multiple: {
         true: {
           root: "flex-wrap",
-          base: ""
+          base: "",
+          tagsInput: "border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         },
         false: {
-          base: "w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -1205,23 +1236,23 @@ const inputMenu = (options) => {
       color,
       multiple: true,
       variant: ["outline", "subtle"],
-      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[--${color}]`
+      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--${color})]`
     })), {
       color: "neutral",
       multiple: true,
       variant: ["outline", "subtle"],
-      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[--ui-border-inverted]"
+      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]"
     }]
   }, input(options));
 };
 
 const kbd = {
-  base: "inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans",
+  base: "inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans",
   variants: {
     variant: {
-      solid: "bg-[--ui-bg-inverted] text-[--ui-bg]",
-      outline: "bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented]",
-      subtle: "bg-[--ui-bg-elevated] text-[--ui-text] ring ring-inset ring-[--ui-border-accented]"
+      solid: "bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]",
+      outline: "bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]",
+      subtle: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]"
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1236,11 +1267,11 @@ const kbd = {
 };
 
 const link = (options) => ({
-  base: "focus-visible:outline-[--ui-primary]",
+  base: "focus-visible:outline-[var(--ui-primary)]",
   variants: {
     active: {
-      true: "text-[--ui-primary]",
-      false: ["text-[--ui-text-muted] hover:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+      true: "text-[var(--ui-primary)]",
+      false: ["text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1250,13 +1281,13 @@ const link = (options) => ({
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-[--ui-bg-elevated]/75",
-    content: "fixed z-50 w-full h-dvh bg-[--ui-bg] divide-y divide-[--ui-border] flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none",
     header: "px-4 py-5 sm:px-6",
     body: "flex-1 p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-[--ui-text-highlighted] font-semibold",
-    description: "mt-1 text-[--ui-text-muted] text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
@@ -1271,7 +1302,7 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[--ui-border]"
+        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]"
       }
     }
   }
@@ -1291,32 +1322,32 @@ const navigationMenu = (options) => ({
     linkTrailingBadgeSize: "sm",
     linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     linkLabel: "truncate",
-    linkLabelExternalIcon: "size-3 align-top text-[--ui-text-dimmed]",
-    childList: "grid grid-cols-2 gap-2 p-2",
+    linkLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]",
+    childList: "",
     childItem: "",
     childLink: "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left",
     childLinkWrapper: "flex flex-col items-start",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "font-semibold text-sm relative inline-flex",
-    childLinkLabelExternalIcon: "size-3 align-top text-[--ui-text-dimmed]",
-    childLinkDescription: "text-sm text-[--ui-text-muted]",
-    separator: "px-2 h-px bg-[--ui-border]",
+    childLinkLabelExternalIcon: "size-3 align-top text-[var(--ui-text-dimmed)]",
+    childLinkDescription: "text-sm text-[var(--ui-text-muted)]",
+    separator: "px-2 h-px bg-[var(--ui-border)]",
     viewportWrapper: "absolute top-full inset-x-0 flex w-full",
     // FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
-    viewport: "relative overflow-hidden bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    viewport: "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     content: "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
     indicator: "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
-    arrow: "relative top-[50%] size-2.5 rotate-45 border border-[--ui-border] bg-[--ui-bg] z-[1] rounded-[calc(var(--ui-radius)/2)]"
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-[--ui-${color}]`,
-        childLink: `focus-visible:outline-[--ui-${color}]`
+        link: `focus-visible:before:ring-[var(--ui-${color})]`,
+        childLink: `focus-visible:outline-[var(--ui-${color})]`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-[--ui-border-inverted]",
-        childLink: "focus-visible:outline-[--ui-border-inverted]"
+        link: "focus-visible:before:ring-[var(--ui-border-inverted)]",
+        childLink: "focus-visible:outline-[var(--ui-border-inverted)]"
       }
     },
     highlightColor: {
@@ -1332,23 +1363,26 @@ const navigationMenu = (options) => ({
         root: "w-full items-center justify-between",
         list: "flex items-center",
         item: "py-2",
-        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0"
+        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
+        childList: "grid grid-cols-2 gap-2 p-2"
       },
       vertical: {
         root: "flex-col",
-        link: "px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
+        childList: "ml-5 border-l border-[var(--ui-border)]",
+        childItem: "pl-1.5 -ml-px"
       }
     },
     active: {
       true: {
-        childLink: "bg-[--ui-bg-elevated] text-[--ui-text-highlighted]",
-        childLinkIcon: "text-[--ui-text]"
+        childLink: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]",
+        childLinkIcon: "text-[var(--ui-text)]"
       },
       false: {
-        link: "text-[--ui-text-muted]",
-        linkLeadingIcon: "text-[--ui-text-dimmed]",
-        childLink: ["hover:bg-[--ui-bg-elevated]/50 text-[--ui-text] hover:text-[--ui-text-highlighted]", options.theme.transitions && "transition-colors"],
-        childLinkIcon: ["text-[--ui-text-dimmed] group-hover:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+        link: "text-[var(--ui-text-muted)]",
+        linkLeadingIcon: "text-[var(--ui-text-dimmed)]",
+        childLink: ["hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1379,76 +1413,93 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "pill",
     class: {
-      link: ["hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+    }
+  }, {
+    disabled: false,
+    variant: "pill",
+    highlight: true,
+    orientation: "horizontal",
+    class: {
+      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+    }
+  }, {
+    disabled: false,
+    variant: "pill",
+    highlight: false,
+    active: false,
+    orientation: "horizontal",
+    class: {
+      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     active: true,
     class: {
-      link: `text-[--ui-${color}]`,
-      linkLeadingIcon: `text-[--ui-${color}]`
+      link: `text-[var(--ui-${color})]`,
+      linkLeadingIcon: `text-[var(--ui-${color})]`
     }
   })), {
     color: "neutral",
     variant: "pill",
     active: true,
     class: {
-      link: "text-[--ui-text-highlighted]",
-      linkLeadingIcon: "text-[--ui-text-highlighted]"
+      link: "text-[var(--ui-text-highlighted)]",
+      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: false,
     class: {
-      link: "before:bg-[--ui-bg-elevated]"
+      link: "before:bg-[var(--ui-bg-elevated)]"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: true,
     class: {
-      link: ["hover:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "before:transition-colors"]
+      link: ["hover:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "before:transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "link",
     class: {
-      link: ["hover:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted]", options.theme.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     active: true,
     class: {
-      link: `text-[--ui-${color}]`,
-      linkLeadingIcon: `text-[--ui-${color}]`
+      link: `text-[var(--ui-${color})]`,
+      linkLeadingIcon: `text-[var(--ui-${color})]`
     }
   })), {
     color: "neutral",
     variant: "link",
     active: true,
     class: {
-      link: "text-[--ui-text-highlighted]",
-      linkLeadingIcon: "text-[--ui-text-highlighted]"
+      link: "text-[var(--ui-text-highlighted)]",
+      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
     }
   }, ...(options.theme.colors || []).map((highlightColor) => ({
     highlightColor,
     highlight: true,
     active: true,
     class: {
-      link: `after:bg-[--ui-${highlightColor}]`
+      link: `after:bg-[var(--ui-${highlightColor})]`
     }
   })), {
     highlightColor: "neutral",
     highlight: true,
     active: true,
     class: {
-      link: "after:bg-[--ui-bg-inverted]"
+      link: "after:bg-[var(--ui-bg-inverted)]"
     }
   }],
   defaultVariants: {
@@ -1469,17 +1520,17 @@ const pagination = {
 
 const popover = {
   slots: {
-    content: "bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
-    arrow: "fill-[--ui-border]"
+    content: "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
+    arrow: "fill-[var(--ui-border)]"
   }
 };
 
 const progress = (options) => ({
   slots: {
     root: "gap-2",
-    base: "relative overflow-hidden rounded-full bg-[--ui-bg-accented]",
+    base: "relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-[--ui-text-dimmed] transition-[width] duration-200",
+    status: "flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -1492,12 +1543,12 @@ const progress = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        indicator: `bg-[--ui-${color}]`,
-        steps: `text-[--ui-${color}]`
+        indicator: `bg-[var(--ui-${color})]`,
+        steps: `text-[var(--ui-${color})]`
       }])),
       neutral: {
-        indicator: "bg-[--ui-bg-inverted]",
-        steps: "text-[--ui-bg]"
+        indicator: "bg-[var(--ui-bg-inverted)]",
+        steps: "text-[var(--ui-bg)]"
       }
     },
     size: {
@@ -1535,7 +1586,7 @@ const progress = (options) => ({
         step: "opacity-100"
       },
       first: {
-        step: "opacity-100 text-[--ui-text-muted]"
+        step: "opacity-100 text-[var(--ui-text-muted)]"
       },
       other: {
         step: "opacity-0"
@@ -1692,24 +1743,24 @@ const radioGroup = (options) => ({
   slots: {
     root: "relative",
     fieldset: "flex",
-    legend: "mb-1 block font-medium text-[--ui-text]",
+    legend: "mb-1 block font-medium text-[var(--ui-text)]",
     item: "flex items-start",
-    base: "rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[--ui-bg]",
-    indicator: "flex items-center justify-center size-full rounded-full after:bg-[--ui-bg] after:rounded-full",
+    base: "rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]",
+    indicator: "flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full",
     container: "flex items-center",
     wrapper: "ms-2",
-    label: "block font-medium text-[--ui-text]",
-    description: "text-[--ui-text-muted]"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-[--ui-${color}]`,
-        indicator: `bg-[--ui-${color}]`
+        base: `focus-visible:outline-[var(--ui-${color})]`,
+        indicator: `bg-[var(--ui-${color})]`
       }])),
       neutral: {
-        base: "focus-visible:outline-[--ui-border-inverted]",
-        indicator: "bg-[--ui-bg-inverted]"
+        base: "focus-visible:outline-[var(--ui-border-inverted)]",
+        indicator: "bg-[var(--ui-bg-inverted)]"
       }
     },
     orientation: {
@@ -1771,7 +1822,7 @@ const radioGroup = (options) => ({
     },
     required: {
       true: {
-        legend: "after:content-['*'] after:ms-0.5 after:text-[--ui-error]"
+        legend: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     }
   },
@@ -1786,16 +1837,16 @@ const select = (options) => {
     slots: {
       root: () => void 0,
       base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
-      value: "truncate group-data-placeholder:text-current/50",
-      arrow: "fill-[--ui-border]",
-      content: "max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-[--ui-border] scroll-py-1",
+      value: "truncate group-data-placeholder:text-[var(--ui-text-dimmed)]",
+      arrow: "fill-[var(--ui-border)]",
+      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-[--ui-text-muted]",
-      label: "font-semibold text-[--ui-text-highlighted]",
-      separator: "-mx-1 my-1 h-px bg-[--ui-border]",
-      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
+      label: "font-semibold text-[var(--ui-text-highlighted)]",
+      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1861,8 +1912,8 @@ const selectMenu = (options) => {
   return defu({
     slots: {
       value: "truncate",
-      placeholder: "truncate text-current/50",
-      input: "placeholder-[--ui-text-dimmed] border-0 border-b border-[--ui-border] focus:outline-none"
+      placeholder: "truncate text-[var(--ui-text-dimmed)]",
+      input: "placeholder:text-[var(--ui-text-dimmed)] border-0 border-b border-[var(--ui-border)] focus:outline-none"
     },
     variants: {
       size: {
@@ -1890,7 +1941,7 @@ const separator = (options) => ({
   slots: {
     root: "flex items-center align-center text-center",
     border: "",
-    container: "font-medium text-[--ui-text] flex",
+    container: "font-medium text-[var(--ui-text)] flex",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xs",
@@ -1898,8 +1949,8 @@ const separator = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-[--ui-${color}]` }])),
-      neutral: { border: "border-[--ui-border]" }
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-[var(--ui-${color})]` }])),
+      neutral: { border: "border-[var(--ui-border)]" }
     },
     orientation: {
       horizontal: {
@@ -1981,30 +2032,30 @@ const separator = (options) => ({
 });
 
 const skeleton = {
-  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[--ui-bg-elevated]"
+  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"
 };
 
 const slideover = {
   slots: {
-    overlay: "fixed inset-0 z-50 bg-[--ui-bg-elevated]/75",
-    content: "fixed z-50 bg-[--ui-bg] divide-y divide-[--ui-border] sm:ring ring-[--ui-border] sm:shadow-lg flex flex-col focus:outline-none",
+    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    content: "fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none",
     header: "px-4 py-5 sm:px-6",
     body: "flex-1 overflow-y-auto p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-[--ui-text-highlighted] font-semibold",
-    description: "mt-1 text-[--ui-text-muted] text-sm",
+    title: "text-[var(--ui-text-highlighted)] font-semibold",
+    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
     close: "absolute top-4 right-4"
   },
   variants: {
     side: {
       top: {
-        content: "inset-x-0 top-0"
+        content: "inset-x-0 top-0 max-h-full"
       },
       right: {
         content: "right-0 inset-y-0 w-full max-w-md"
       },
       bottom: {
-        content: "inset-x-0 bottom-0"
+        content: "inset-x-0 bottom-0 max-h-full"
       },
       left: {
         content: "left-0 inset-y-0 w-full max-w-md"
@@ -2046,19 +2097,19 @@ const slideover = {
 const slider = (options) => ({
   slots: {
     root: "relative flex items-center select-none touch-none",
-    track: "relative bg-[--ui-bg-accented] overflow-hidden rounded-full grow",
+    track: "relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-[--ui-bg] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: "rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        range: `bg-[--ui-${color}]`,
-        thumb: `ring-[--ui-${color}] focus-visible:outline-[--ui-${color}]`
+        range: `bg-[var(--ui-${color})]`,
+        thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
       }])),
       neutral: {
-        range: "bg-[--ui-bg-inverted]",
-        thumb: "ring-[--ui-border-inverted] focus-visible:outline-[--ui-border-inverted]/50"
+        range: "bg-[var(--ui-bg-inverted)]",
+        thumb: "ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50"
       }
     },
     size: {
@@ -2164,23 +2215,23 @@ const slider = (options) => ({
 const _switch = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[--ui-bg] data-[state=unchecked]:bg-[--ui-bg-accented]", options.theme.transitions && "transition-colors duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]", options.theme.transitions && "transition-colors duration-200"],
     container: "flex items-center",
-    thumb: "group pointer-events-none block rounded-full bg-[--ui-bg] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
-    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-[--ui-text-dimmed] opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
+    thumb: "group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
     wrapper: "ms-2",
-    label: "block font-medium text-[--ui-text]",
-    description: "text-[--ui-text-muted]"
+    label: "block font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `data-[state=checked]:bg-[--ui-${color}] focus-visible:ring-[--ui-${color}]`,
-        icon: `group-data-[state=checked]:text-[--ui-${color}]`
+        base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
+        icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
       }])),
       neutral: {
-        base: "data-[state=checked]:bg-[--ui-bg-inverted] focus-visible:ring-[--ui-border-inverted]",
-        icon: "group-data-[state=checked]:text-[--ui-text-highlighted]"
+        base: "data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]",
+        icon: "group-data-[state=checked]:text-[var(--ui-text-highlighted)]"
       }
     },
     size: {
@@ -2232,7 +2283,7 @@ const _switch = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-[--ui-error]"
+        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
       }
     },
     disabled: {
@@ -2249,12 +2300,94 @@ const _switch = (options) => ({
   }
 });
 
+const table = (options) => ({
+  slots: {
+    root: "relative overflow-auto",
+    base: "min-w-full overflow-clip",
+    thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]",
+    tbody: "divide-y divide-[var(--ui-border)]",
+    tr: "data-[selected=true]:bg-[var(--ui-bg-elevated)]/50",
+    th: "px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0",
+    td: "p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]"
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        td: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+      }
+    },
+    sticky: {
+      true: {
+        thead: "sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur"
+      }
+    },
+    loading: {
+      true: {
+        thead: "after:absolute after:bottom-0 after:inset-x-0 after:h-px"
+      }
+    },
+    loadingAnimation: {
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    loadingColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((loadingColor) => ({
+    loading: true,
+    loadingColor,
+    class: {
+      thead: `after:bg-[var(--ui-${loadingColor})]`
+    }
+  })), {
+    loading: true,
+    loadingColor: "neutral",
+    class: {
+      thead: "after:bg-[var(--ui-bg-inverted)]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "carousel",
+    class: {
+      thead: "after:animate-[carousel_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "carousel-inverse",
+    class: {
+      thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "swing",
+    class: {
+      thead: "after:animate-[swing_2s_ease-in-out_infinite]"
+    }
+  }, {
+    loading: true,
+    loadingAnimation: "elastic",
+    class: {
+      thead: "after:animate-[elastic_2s_ease-in-out_infinite]"
+    }
+  }],
+  defaultVariants: {
+    loadingColor: "primary",
+    loadingAnimation: "carousel"
+  }
+});
+
 const tabs = (options) => ({
   slots: {
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
+    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
     content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -2268,12 +2401,12 @@ const tabs = (options) => ({
     },
     variant: {
       pill: {
-        list: "bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)]",
+        list: "bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]",
         trigger: "flex-1",
         indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-sm"
       },
       link: {
-        list: "border-[--ui-border]",
+        list: "border-[var(--ui-border)]",
         indicator: "rounded-full"
       }
     },
@@ -2281,12 +2414,12 @@ const tabs = (options) => ({
       horizontal: {
         root: "flex-col",
         list: "w-full",
-        indicator: "left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]",
+        indicator: "left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]",
         trigger: "justify-center"
       },
       vertical: {
         list: "flex-col",
-        indicator: "top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]"
+        indicator: "top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]"
       }
     },
     size: {
@@ -2348,29 +2481,29 @@ const tabs = (options) => ({
     color,
     variant: "pill",
     class: {
-      indicator: `bg-[--ui-${color}]`,
-      trigger: `data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-${color}]`
+      indicator: `bg-[var(--ui-${color})]`,
+      trigger: `data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
     }
   })), {
     color: "neutral",
     variant: "pill",
     class: {
-      indicator: "bg-[--ui-bg-inverted]",
-      trigger: "data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted]"
+      indicator: "bg-[var(--ui-bg-inverted)]",
+      trigger: "data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
-      indicator: `bg-[--ui-${color}]`,
-      trigger: `data-[state=active]:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
+      indicator: `bg-[var(--ui-${color})]`,
+      trigger: `data-[state=active]:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
     }
   })), {
     color: "neutral",
     variant: "link",
     class: {
-      indicator: "bg-[--ui-bg-inverted]",
-      trigger: "data-[state=active]:text-[--ui-text-highlighted] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]"
+      indicator: "bg-[var(--ui-bg-inverted)]",
+      trigger: "data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
     }
   }],
   defaultVariants: {
@@ -2386,10 +2519,10 @@ const textarea = (options) => {
 
 const toast = (options) => ({
   slots: {
-    root: "relative group overflow-hidden bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[--ui-border] p-4 flex gap-2.5 focus:outline-none",
+    root: "relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none",
     wrapper: "w-0 flex-1 flex flex-col gap-1",
-    title: "text-sm font-medium text-[--ui-text-highlighted]",
-    description: "text-sm text-[--ui-text-muted]",
+    title: "text-sm font-medium text-[var(--ui-text-highlighted)]",
+    description: "text-sm text-[var(--ui-text-muted)]",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
@@ -2400,14 +2533,14 @@ const toast = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`,
-        icon: `text-[--ui-${color}]`,
-        progress: `bg-[--ui-${color}]`
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`,
+        icon: `text-[var(--ui-${color})]`,
+        progress: `bg-[var(--ui-${color})]`
       }])),
       neutral: {
-        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]",
-        icon: "text-[--ui-text-highlighted]",
-        progress: "bg-[--ui-bg-inverted]"
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]",
+        icon: "text-[var(--ui-text-highlighted)]",
+        progress: "bg-[var(--ui-bg-inverted)]"
       }
     },
     multiline: {
@@ -2428,8 +2561,8 @@ const toast = (options) => ({
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none",
-    base: "absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
+    base: "absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
     position: {
@@ -2473,10 +2606,10 @@ const toaster = {
     }
   }, {
     swipeDirection: ["left", "right"],
-    class: "data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=cancel]:translate-x-0"
+    class: "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
   }, {
     swipeDirection: ["up", "down"],
-    class: "data-[swipe=move]:translate-y-[--radix-toast-swipe-move-y] data-[swipe=end]:translate-y-[--radix-toast-swipe-end-y] data-[swipe=cancel]:translate-y-0"
+    class: "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
   }],
   defaultVariants: {
     position: "bottom-right"
@@ -2485,8 +2618,8 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-[--ui-bg] text-[--ui-text-highlighted] shadow rounded-[--ui-radius] ring ring-[--ui-border] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-[--ui-border]",
+    content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-[var(--ui-border)]",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:mr-0.5`,
     kbdsSize: "sm"
@@ -2532,6 +2665,7 @@ const theme = {
   slideover: slideover,
   slider: slider,
   switch: _switch,
+  table: table,
   tabs: tabs,
   textarea: textarea,
   toast: toast,