@nuxt/ui 3.0.0-alpha.12 → 3.0.0-alpha.13

package/.nuxt/ui/navigation-menu.ts

@@ -37,7 +37,7 @@ export default {
   "slots": {
     "root": "relative flex gap-1.5 [&>div]:min-w-0",
     "list": "isolate min-w-0",
-    "label": "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5",
+    "label": "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5",
     "item": "min-w-0",
     "link": "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     "linkLeadingIcon": "shrink-0 size-5",
@@ -48,51 +48,51 @@ export default {
     "linkTrailingBadgeSize": "sm",
     "linkTrailingIcon": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     "linkLabel": "truncate",
-    "linkLabelExternalIcon": "inline-block size-3 align-top text-[var(--ui-text-dimmed)]",
+    "linkLabelExternalIcon": "inline-block size-3 align-top text-(--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-start",
     "childLinkWrapper": "flex flex-col items-start",
     "childLinkIcon": "size-5 shrink-0",
     "childLinkLabel": "font-semibold text-sm relative inline-flex",
-    "childLinkLabelExternalIcon": "inline-block 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)]",
+    "childLinkLabelExternalIcon": "inline-block size-3 align-top text-(--ui-text-dimmed)",
+    "childLinkDescription": "text-sm text-(--ui-text-muted)",
+    "separator": "px-2 h-px bg-(--ui-border)",
     "viewportWrapper": "absolute top-full left-0 flex w-full",
-    "viewport": "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    "viewport": "relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] 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",
-    "indicator": "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-[var(--reka-navigation-menu-indicator-size)] translate-x-[var(--reka-navigation-menu-indicator-position)] flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
-    "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)]"
+    "indicator": "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
+    "arrow": "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"
   },
   "variants": {
     "color": {
       "primary": {
-        "link": "focus-visible:before:ring-[var(--ui-primary)]",
-        "childLink": "focus-visible:outline-[var(--ui-primary)]"
+        "link": "focus-visible:before:ring-(--ui-primary)",
+        "childLink": "focus-visible:outline-(--ui-primary)"
       },
       "secondary": {
-        "link": "focus-visible:before:ring-[var(--ui-secondary)]",
-        "childLink": "focus-visible:outline-[var(--ui-secondary)]"
+        "link": "focus-visible:before:ring-(--ui-secondary)",
+        "childLink": "focus-visible:outline-(--ui-secondary)"
       },
       "success": {
-        "link": "focus-visible:before:ring-[var(--ui-success)]",
-        "childLink": "focus-visible:outline-[var(--ui-success)]"
+        "link": "focus-visible:before:ring-(--ui-success)",
+        "childLink": "focus-visible:outline-(--ui-success)"
       },
       "info": {
-        "link": "focus-visible:before:ring-[var(--ui-info)]",
-        "childLink": "focus-visible:outline-[var(--ui-info)]"
+        "link": "focus-visible:before:ring-(--ui-info)",
+        "childLink": "focus-visible:outline-(--ui-info)"
       },
       "warning": {
-        "link": "focus-visible:before:ring-[var(--ui-warning)]",
-        "childLink": "focus-visible:outline-[var(--ui-warning)]"
+        "link": "focus-visible:before:ring-(--ui-warning)",
+        "childLink": "focus-visible:outline-(--ui-warning)"
       },
       "error": {
-        "link": "focus-visible:before:ring-[var(--ui-error)]",
-        "childLink": "focus-visible:outline-[var(--ui-error)]"
+        "link": "focus-visible:before:ring-(--ui-error)",
+        "childLink": "focus-visible:outline-(--ui-error)"
       },
       "neutral": {
-        "link": "focus-visible:before:ring-[var(--ui-border-inverted)]",
-        "childLink": "focus-visible:outline-[var(--ui-border-inverted)]"
+        "link": "focus-visible:before:ring-(--ui-border-inverted)",
+        "childLink": "focus-visible:outline-(--ui-border-inverted)"
       }
     },
     "highlightColor": {
@@ -128,24 +128,24 @@ export default {
         "content": "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]"
       },
       "vertical": {
-        "viewport": "sm:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]",
+        "viewport": "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
         "content": ""
       }
     },
     "active": {
       "true": {
-        "childLink": "bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]",
-        "childLinkIcon": "text-[var(--ui-text)]"
+        "childLink": "bg-(--ui-bg-elevated) text-(--ui-text-highlighted)",
+        "childLinkIcon": "text-(--ui-text)"
       },
       "false": {
-        "link": "text-[var(--ui-text-muted)]",
-        "linkLeadingIcon": "text-[var(--ui-text-dimmed)]",
+        "link": "text-(--ui-text-muted)",
+        "linkLeadingIcon": "text-(--ui-text-dimmed)",
         "childLink": [
-          "hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]",
+          "hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted)",
           "transition-colors"
         ],
         "childLinkIcon": [
-          "text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]",
+          "text-(--ui-text-dimmed) group-hover:text-(--ui-text)",
           "transition-colors"
         ]
       }
@@ -185,7 +185,6 @@ export default {
       "orientation": "horizontal" as typeof orientation[number],
       "highlight": true,
       "class": {
-        "item": "-mb-px",
         "link": [
           "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full",
           "after:transition-colors"
@@ -209,11 +208,11 @@ export default {
       "variant": "pill" as typeof variant[number],
       "class": {
         "link": [
-          "hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50",
+          "hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50",
           "transition-colors before:transition-colors"
         ],
         "linkLeadingIcon": [
-          "group-hover:text-[var(--ui-text)]",
+          "group-hover:text-(--ui-text)",
           "transition-colors"
         ]
       }
@@ -224,8 +223,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "link": "data-[state=open]:text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "group-data-[state=open]:text-[var(--ui-text)]"
+        "link": "data-[state=open]:text-(--ui-text-highlighted)",
+        "linkLeadingIcon": "group-data-[state=open]:text-(--ui-text)"
       }
     },
     {
@@ -234,7 +233,7 @@ export default {
       "highlight": true,
       "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "link": "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+        "link": "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
       }
     },
     {
@@ -244,7 +243,7 @@ export default {
       "active": false,
       "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "link": "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+        "link": "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
       }
     },
     {
@@ -252,8 +251,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-primary)]",
-        "linkLeadingIcon": "text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
+        "link": "text-(--ui-primary)",
+        "linkLeadingIcon": "text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)"
       }
     },
     {
@@ -261,8 +260,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-secondary)]",
-        "linkLeadingIcon": "text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
+        "link": "text-(--ui-secondary)",
+        "linkLeadingIcon": "text-(--ui-secondary) group-data-[state=open]:text-(--ui-secondary)"
       }
     },
     {
@@ -270,8 +269,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-success)]",
-        "linkLeadingIcon": "text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
+        "link": "text-(--ui-success)",
+        "linkLeadingIcon": "text-(--ui-success) group-data-[state=open]:text-(--ui-success)"
       }
     },
     {
@@ -279,8 +278,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-info)]",
-        "linkLeadingIcon": "text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
+        "link": "text-(--ui-info)",
+        "linkLeadingIcon": "text-(--ui-info) group-data-[state=open]:text-(--ui-info)"
       }
     },
     {
@@ -288,8 +287,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-warning)]",
-        "linkLeadingIcon": "text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
+        "link": "text-(--ui-warning)",
+        "linkLeadingIcon": "text-(--ui-warning) group-data-[state=open]:text-(--ui-warning)"
       }
     },
     {
@@ -297,8 +296,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-error)]",
-        "linkLeadingIcon": "text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
+        "link": "text-(--ui-error)",
+        "linkLeadingIcon": "text-(--ui-error) group-data-[state=open]:text-(--ui-error)"
       }
     },
     {
@@ -306,8 +305,8 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
+        "link": "text-(--ui-text-highlighted)",
+        "linkLeadingIcon": "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
       }
     },
     {
@@ -315,7 +314,7 @@ export default {
       "active": true,
       "highlight": false,
       "class": {
-        "link": "before:bg-[var(--ui-bg-elevated)]"
+        "link": "before:bg-(--ui-bg-elevated)"
       }
     },
     {
@@ -324,7 +323,7 @@ export default {
       "highlight": true,
       "class": {
         "link": [
-          "hover:before:bg-[var(--ui-bg-elevated)]/50",
+          "hover:before:bg-(--ui-bg-elevated)/50",
           "before:transition-colors"
         ]
       }
@@ -335,11 +334,11 @@ export default {
       "variant": "link" as typeof variant[number],
       "class": {
         "link": [
-          "hover:text-[var(--ui-text-highlighted)]",
+          "hover:text-(--ui-text-highlighted)",
           "transition-colors"
         ],
         "linkLeadingIcon": [
-          "group-hover:text-[var(--ui-text)]",
+          "group-hover:text-(--ui-text)",
           "transition-colors"
         ]
       }
@@ -350,8 +349,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "link": "data-[state=open]:text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "group-data-[state=open]:text-[var(--ui-text)]"
+        "link": "data-[state=open]:text-(--ui-text-highlighted)",
+        "linkLeadingIcon": "group-data-[state=open]:text-(--ui-text)"
       }
     },
     {
@@ -359,8 +358,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-primary)]",
-        "linkLeadingIcon": "text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
+        "link": "text-(--ui-primary)",
+        "linkLeadingIcon": "text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)"
       }
     },
     {
@@ -368,8 +367,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-secondary)]",
-        "linkLeadingIcon": "text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
+        "link": "text-(--ui-secondary)",
+        "linkLeadingIcon": "text-(--ui-secondary) group-data-[state=open]:text-(--ui-secondary)"
       }
     },
     {
@@ -377,8 +376,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-success)]",
-        "linkLeadingIcon": "text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
+        "link": "text-(--ui-success)",
+        "linkLeadingIcon": "text-(--ui-success) group-data-[state=open]:text-(--ui-success)"
       }
     },
     {
@@ -386,8 +385,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-info)]",
-        "linkLeadingIcon": "text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
+        "link": "text-(--ui-info)",
+        "linkLeadingIcon": "text-(--ui-info) group-data-[state=open]:text-(--ui-info)"
       }
     },
     {
@@ -395,8 +394,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-warning)]",
-        "linkLeadingIcon": "text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
+        "link": "text-(--ui-warning)",
+        "linkLeadingIcon": "text-(--ui-warning) group-data-[state=open]:text-(--ui-warning)"
       }
     },
     {
@@ -404,8 +403,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-error)]",
-        "linkLeadingIcon": "text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
+        "link": "text-(--ui-error)",
+        "linkLeadingIcon": "text-(--ui-error) group-data-[state=open]:text-(--ui-error)"
       }
     },
     {
@@ -413,8 +412,8 @@ export default {
       "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
-        "link": "text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
+        "link": "text-(--ui-text-highlighted)",
+        "linkLeadingIcon": "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
       }
     },
     {
@@ -423,7 +422,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-primary)]"
+        "link": "after:bg-(--ui-primary)"
       }
     },
     {
@@ -432,7 +431,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-secondary)]"
+        "link": "after:bg-(--ui-secondary)"
       }
     },
     {
@@ -441,7 +440,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-success)]"
+        "link": "after:bg-(--ui-success)"
       }
     },
     {
@@ -450,7 +449,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-info)]"
+        "link": "after:bg-(--ui-info)"
       }
     },
     {
@@ -459,7 +458,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-warning)]"
+        "link": "after:bg-(--ui-warning)"
       }
     },
     {
@@ -468,7 +467,7 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-error)]"
+        "link": "after:bg-(--ui-error)"
       }
     },
     {
@@ -477,14 +476,14 @@ export default {
       "level": true,
       "active": true,
       "class": {
-        "link": "after:bg-[var(--ui-bg-inverted)]"
+        "link": "after:bg-(--ui-bg-inverted)"
       }
     },
     {
       "orientation": "vertical" as typeof orientation[number],
       "collapsed": false,
       "class": {
-        "childList": "ms-5 border-s border-[var(--ui-border)]",
+        "childList": "ms-5 border-s border-(--ui-border)",
         "childItem": "ps-1.5 -ms-px"
       }
     },

package/.nuxt/ui/pin-input.ts

@@ -28,7 +28,7 @@ export default {
   "slots": {
     "root": "relative inline-flex items-center gap-1.5",
     "base": [
-      "rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ]
   },
@@ -51,11 +51,11 @@ export default {
       }
     },
     "variant": {
-      "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)] bg-transparent 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)] bg-transparent"
+      "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) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      "none": "text-(--ui-text-highlighted) bg-transparent"
     },
     "color": {
       "primary": "",
@@ -77,7 +77,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -85,7 +85,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
     },
     {
       "color": "success" as typeof color[number],
@@ -93,7 +93,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
     },
     {
       "color": "info" as typeof color[number],
@@ -101,7 +101,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
     },
     {
       "color": "warning" as typeof color[number],
@@ -109,7 +109,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
     },
     {
       "color": "error" as typeof color[number],
@@ -117,37 +117,37 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
     },
     {
       "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-primary)]"
+      "class": "ring ring-inset ring-(--ui-primary)"
     },
     {
       "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-secondary)]"
+      "class": "ring ring-inset ring-(--ui-secondary)"
     },
     {
       "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-success)]"
+      "class": "ring ring-inset ring-(--ui-success)"
     },
     {
       "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-info)]"
+      "class": "ring ring-inset ring-(--ui-info)"
     },
     {
       "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-warning)]"
+      "class": "ring ring-inset ring-(--ui-warning)"
     },
     {
       "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-error)]"
+      "class": "ring ring-inset ring-(--ui-error)"
     },
     {
       "color": "neutral" as typeof color[number],
@@ -155,12 +155,12 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
     },
     {
       "color": "neutral" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-border-inverted)]"
+      "class": "ring ring-inset ring-(--ui-border-inverted)"
     }
   ],
   "defaultVariants": {

package/.nuxt/ui/popover.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "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 pointer-events-auto",
-    "arrow": "fill-[var(--ui-border)]"
+    "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 pointer-events-auto",
+    "arrow": "fill-(--ui-border)"
   }
 }

package/.nuxt/ui/progress.ts

@@ -40,9 +40,9 @@ const orientation = [
 export default {
   "slots": {
     "root": "gap-2",
-    "base": "relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]",
+    "base": "relative overflow-hidden rounded-full bg-(--ui-bg-accented)",
     "indicator": "rounded-full size-full transition-transform duration-200 ease-out",
-    "status": "flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200",
+    "status": "flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200",
     "steps": "grid items-end",
     "step": "truncate text-end row-start-1 col-start-1 transition-opacity" as typeof step[number]
   },
@@ -55,32 +55,32 @@ export default {
     },
     "color": {
       "primary": {
-        "indicator": "bg-[var(--ui-primary)]",
-        "steps": "text-[var(--ui-primary)]"
+        "indicator": "bg-(--ui-primary)",
+        "steps": "text-(--ui-primary)"
       },
       "secondary": {
-        "indicator": "bg-[var(--ui-secondary)]",
-        "steps": "text-[var(--ui-secondary)]"
+        "indicator": "bg-(--ui-secondary)",
+        "steps": "text-(--ui-secondary)"
       },
       "success": {
-        "indicator": "bg-[var(--ui-success)]",
-        "steps": "text-[var(--ui-success)]"
+        "indicator": "bg-(--ui-success)",
+        "steps": "text-(--ui-success)"
       },
       "info": {
-        "indicator": "bg-[var(--ui-info)]",
-        "steps": "text-[var(--ui-info)]"
+        "indicator": "bg-(--ui-info)",
+        "steps": "text-(--ui-info)"
       },
       "warning": {
-        "indicator": "bg-[var(--ui-warning)]",
-        "steps": "text-[var(--ui-warning)]"
+        "indicator": "bg-(--ui-warning)",
+        "steps": "text-(--ui-warning)"
       },
       "error": {
-        "indicator": "bg-[var(--ui-error)]",
-        "steps": "text-[var(--ui-error)]"
+        "indicator": "bg-(--ui-error)",
+        "steps": "text-(--ui-error)"
       },
       "neutral": {
-        "indicator": "bg-[var(--ui-bg-inverted)]",
-        "steps": "text-[var(--ui-bg)]"
+        "indicator": "bg-(--ui-bg-inverted)",
+        "steps": "text-(--ui-bg)"
       }
     },
     "size": {
@@ -118,7 +118,7 @@ export default {
         "step": "opacity-100" as typeof step[number]
       },
       "first": {
-        "step": "opacity-100 text-[var(--ui-text-muted)]" as typeof step[number]
+        "step": "opacity-100 text-(--ui-text-muted)" as typeof step[number]
       },
       "other": {
         "step": "opacity-0" as typeof step[number]