@bitrix24/b24ui-nuxt 0.2.1 → 0.2.3

package/dist/shared/{b24ui-nuxt.D5cXbZSx.cjs → b24ui-nuxt.Ce3hzs_q.cjs}

@@ -720,7 +720,8 @@ const button = {
   slots: {
     base: [
       "select-none cursor-pointer inline-flex items-center",
-      "relative focus:outline-hidden",
+      "relative",
+      "outline-transparent focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
       "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
       "transition duration-150 ease-linear"
       // transition-colors
@@ -737,7 +738,6 @@ const button = {
   variants: {
     ...buttonGroupVariant,
     color: {
-      // DEFAULT ////
       default: [
         "text-white dark:text-base-100 bg-base-650 border border-base-650",
         "hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0",
@@ -754,7 +754,6 @@ const button = {
         "focus-visible:outline-red-720",
         "ring-red-800 focus-visible:ring-red-800"
       ].join(" "),
-      // SUCCESS ////
       success: [
         "text-base-900 bg-green-450 border border-green-450",
         "hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0",
@@ -763,7 +762,6 @@ const button = {
         "focus-visible:outline-green-450",
         "ring-green-500 focus-visible:ring-green-500"
       ].join(" "),
-      // new WARNING ////
       warning: [
         "text-white dark:text-orange-100 bg-orange-500 border border-orange-500",
         "hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0",
@@ -772,7 +770,6 @@ const button = {
         "focus-visible:outline-orange-500",
         "ring-orange-800 focus-visible:ring-orange-800"
       ].join(" "),
-      // PRIMARY ////
       primary: [
         "text-white dark:text-blue-100 bg-blue-530 border border-blue-530",
         "hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0",
@@ -781,7 +778,6 @@ const button = {
         "focus-visible:outline-blue-530",
         "ring-blue-800 focus-visible:ring-blue-800"
       ].join(" "),
-      // SECONDARY ////
       secondary: [
         "text-base-900 bg-cyan-160 border border-cyan-230",
         "hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0",
@@ -790,7 +786,6 @@ const button = {
         "focus-visible:outline-cyan-160",
         "ring-cyan-500 focus-visible:ring-cyan-500"
       ].join(" "),
-      // COLLAB ////
       collab: [
         "text-white dark:text-collab-100 bg-collab-600 border border-collab-600",
         "hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0",
@@ -799,7 +794,6 @@ const button = {
         "focus-visible:outline-collab-600",
         "ring-collab-900 focus-visible:ring-collab-900"
       ].join(" "),
-      // AI ////
       ai: [
         "text-white dark:text-ai-100 bg-ai-450 border border-ai-450",
         "hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0",
@@ -808,7 +802,6 @@ const button = {
         "focus-visible:outline-ai-450",
         "ring-ai-900 focus-visible:ring-ai-900"
       ].join(" "),
-      // LINK ////
       link: [
         "no-underline decoration-solid decoration-auto",
         "text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300",
@@ -896,7 +889,6 @@ const button = {
   compoundVariants: [
     // region default ////
     {
-      // BASE_LIGHT ////
       color: "default",
       depth: "light",
       class: [
@@ -904,7 +896,8 @@ const button = {
         "hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0",
         "active:bg-base-250 active:border-base-250 active:focus-visible:ring-0",
         "disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300",
-        "focus-visible:outline-base-200"
+        "focus-visible:outline-base-200",
+        "ring-base-320 focus-visible:ring-base-320"
       ].join(" ")
     },
     {
@@ -1125,12 +1118,18 @@ const button = {
       ].join(" ")
     },
     {
-      // LIGHT_BORDER ////
+      // LINK ////
       color: "link",
       depth: "light",
       useLabel: true,
       class: "ps-1.5 pe-1.5"
     },
+    {
+      color: "link",
+      depth: "normal",
+      useLabel: true,
+      class: "ps-0 pe-0"
+    },
     {
       // LIGHT_BORDER ////
       color: "link",
@@ -1266,7 +1265,11 @@ const button = {
 const checkbox = {
   slots: {
     root: "relative flex items-start",
-    base: "cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150 ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: [
+      "cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150",
+      "ring ring-inset ring-base-300 dark:ring-base-700",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" "),
     container: "flex items-center",
     wrapper: "font-b24-primary ms-2",
     icon: "shrink-0 size-full",
@@ -1599,6 +1602,359 @@ const countdown = {
   }
 };
 
+const dropdownMenu = {
+  slots: {
+    content: [
+      "min-w-32",
+      "bg-white dark:bg-base-dark",
+      "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
+      "overflow-y-auto",
+      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
+      "pointer-events-auto"
+    ].join(" "),
+    arrow: "fill-base-master/10 dark:fill-base-100/20",
+    group: "p-1 isolate",
+    label: [
+      "w-full flex items-center",
+      "font-semibold text-base-900 dark:text-base-200"
+    ].join(" "),
+    separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
+    item: [
+      "group relative w-full flex items-center select-none outline-none",
+      "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
+      "cursor-pointer",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      "text-base-master dark:text-base-150",
+      "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+      // 'data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900',
+      "transition-colors before:transition-colors"
+    ].join(" "),
+    itemLeadingIcon: [
+      "shrink-0 text-base-500 dark:text-base-700",
+      "group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+      "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
+      "transition-colors"
+    ].join(" "),
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemLabel: "truncate",
+    itemLabelExternalIcon: "inline-block size-3 align-top text-base-500 dark:text-base-700"
+  },
+  variants: {
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    active: {
+      false: {
+        item: [
+          "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
+          "dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900",
+          "transition-colors before:transition-colors"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150",
+          "transition-colors"
+        ].join(" ")
+      },
+      true: {
+        item: [
+          "text-base-900 before:bg-base-100/50",
+          "dark:text-base-200 dark:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700"
+        ].join(" ")
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
+      }
+    },
+    size: {
+      xs: {
+        label: "p-1 text-xs gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        label: "h-9 ps-2 pe-3 text-sm gap-2",
+        item: "h-9 ps-3 pe-3 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-3",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "md"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "default",
+      active: false,
+      class: {
+        item: [
+          "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
+          "dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "default",
+      active: true,
+      class: {
+        item: [
+          "text-base-900 before:bg-base-100/50",
+          "dark:text-base-200 dark:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      active: false,
+      class: {
+        item: [
+          "text-red-950 data-highlighted:text-red-900 data-highlighted:before:bg-red-100 data-[state=open]:text-red-900 data-[state=open]:before:bg-red-100",
+          "dark:text-red-150 dark:data-highlighted:text-red-200 dark:data-highlighted:before:bg-red-900 dark:data-[state=open]:text-red-200 dark:data-[state=open]:before:bg-red-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-red-500 group-data-highlighted:text-red-950 group-data-[state=open]:text-red-950",
+          "dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      active: true,
+      class: {
+        item: [
+          "text-red-900 before:bg-red-100",
+          "dark:text-red-200 dark:before:bg-red-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-red-950 group-data-[state=open]:text-red-950",
+          "dark:text-red-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      active: false,
+      class: {
+        item: [
+          "text-green-950 data-highlighted:text-green-900 data-highlighted:before:bg-green-100 data-[state=open]:text-green-900 data-[state=open]:before:bg-green-100",
+          "dark:text-green-150 dark:data-highlighted:text-green-200 dark:data-highlighted:before:bg-green-900 dark:data-[state=open]:text-green-200 dark:data-[state=open]:before:bg-green-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-green-500 group-data-highlighted:text-green-950 group-data-[state=open]:text-green-950",
+          "dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      active: true,
+      class: {
+        item: [
+          "text-green-900 before:bg-green-100",
+          "dark:text-green-200 dark:before:bg-green-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-green-950 group-data-[state=open]:text-green-950",
+          "dark:text-green-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      active: false,
+      class: {
+        item: [
+          "text-orange-950 data-highlighted:text-orange-900 data-highlighted:before:bg-orange-100 data-[state=open]:text-orange-900 data-[state=open]:before:bg-orange-100",
+          "dark:text-orange-150 dark:data-highlighted:text-orange-200 dark:data-highlighted:before:bg-orange-900 dark:data-[state=open]:text-orange-200 dark:data-[state=open]:before:bg-orange-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-orange-500 group-data-highlighted:text-orange-950 group-data-[state=open]:text-orange-950",
+          "dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      active: true,
+      class: {
+        item: [
+          "text-orange-900 before:bg-orange-100",
+          "dark:text-orange-200 dark:before:bg-orange-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-orange-950 group-data-[state=open]:text-orange-950",
+          "dark:text-orange-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      active: false,
+      class: {
+        item: [
+          "text-blue-950 data-highlighted:text-blue-900 data-highlighted:before:bg-blue-100 data-[state=open]:text-blue-900 data-[state=open]:before:bg-blue-100",
+          "dark:text-blue-150 dark:data-highlighted:text-blue-200 dark:data-highlighted:before:bg-blue-900 dark:data-[state=open]:text-blue-200 dark:data-[state=open]:before:bg-blue-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-blue-500 group-data-highlighted:text-blue-950 group-data-[state=open]:text-blue-950",
+          "dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      active: true,
+      class: {
+        item: [
+          "text-blue-900 before:bg-blue-100",
+          "dark:text-blue-200 dark:before:bg-blue-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-blue-950 group-data-[state=open]:text-blue-950",
+          "dark:text-blue-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      active: false,
+      class: {
+        item: [
+          "text-cyan-950 data-highlighted:text-cyan-900 data-highlighted:before:bg-cyan-100/50 data-[state=open]:text-cyan-900 data-[state=open]:before:bg-cyan-100/50",
+          "dark:text-cyan-150 dark:data-highlighted:text-cyan-200 dark:data-highlighted:before:bg-cyan-900 dark:data-[state=open]:text-cyan-200 dark:data-[state=open]:before:bg-cyan-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-cyan-500 group-data-highlighted:text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      active: true,
+      class: {
+        item: [
+          "text-cyan-900 before:bg-cyan-100/50",
+          "dark:text-cyan-200 dark:before:bg-cyan-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "dark:text-cyan-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      active: false,
+      class: {
+        item: [
+          "text-collab-950 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100",
+          "dark:text-collab-150 dark:data-highlighted:text-collab-200 dark:data-highlighted:before:bg-collab-900 dark:data-[state=open]:text-collab-200 dark:data-[state=open]:before:bg-collab-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-collab-500 group-data-highlighted:text-collab-950 group-data-[state=open]:text-collab-950",
+          "dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      active: true,
+      class: {
+        item: [
+          "text-collab-900 before:bg-collab-100",
+          "dark:text-collab-200 dark:before:bg-collab-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-collab-950 group-data-[state=open]:text-collab-950",
+          "dark:text-collab-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      active: false,
+      class: {
+        item: [
+          "text-ai-950 data-highlighted:text-ai-900 data-highlighted:before:bg-ai-100/50 data-[state=open]:text-ai-900 data-[state=open]:before:bg-ai-100/50",
+          "dark:text-ai-150 dark:data-highlighted:text-ai-200 dark:data-highlighted:before:bg-ai-900 dark:data-[state=open]:text-ai-200 dark:data-[state=open]:before:bg-ai-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-ai-500 group-data-highlighted:text-ai-950 group-data-[state=open]:text-ai-950",
+          "dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      active: true,
+      class: {
+        item: [
+          "text-ai-900 before:bg-ai-100/50",
+          "dark:text-ai-200 dark:before:bg-ai-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-ai-950 group-data-[state=open]:text-ai-950",
+          "dark:text-ai-700"
+        ].join(" ")
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
 const form = {
   base: ""
 };
@@ -2124,9 +2480,9 @@ const inputMenu = () => {
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
       arrow: "fill-base-master/10 dark:fill-base-100/20",
       content: [
-        "w-[var(--reka-popper-anchor-width)]",
+        "w-(--reka-popper-anchor-width)",
         // 'max-h-60',
-        // 'h-[var(--reka-popper-available-height)]',
+        // 'h-(--reka-popper-available-height)',
         "bg-white dark:bg-base-dark",
         "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
         "overflow-hidden",
@@ -2399,6 +2755,46 @@ const link = (options) => ({
   }
 });
 
+const modal = {
+  slots: {
+    overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    content: [
+      "py-md2 px-5",
+      "fixed w-full h-dvh bg-white dark:bg-base-950",
+      // 'divide-y divide-base-900/10 dark:divide-white/20',
+      "flex flex-col focus:outline-none"
+    ].join(" "),
+    header: "pe-5 pt-0",
+    body: "flex-1 overflow-y-auto my-2.5 text-md leading-normal",
+    footer: "flex items-center justify-center gap-3 mt-2.5 pt-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20",
+    title: "font-bold text-md leading-normal text-base-900 dark:text-base-150",
+    description: "mt-0.5 mb-1 text-base-500 dark:text-base-400 text-sm",
+    close: "absolute top-2 end-1.5 p-0.5"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    fullscreen: {
+      true: {
+        content: "inset-0"
+      },
+      false: {
+        content: [
+          "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",
+          "sm:min-w-[400px]",
+          "sm:max-w-[420px] sm:h-auto sm:max-h-[calc(100vh-4rem)]",
+          "sm:rounded-md sm:shadow-lg",
+          "sm:ring ring-base-300 dark:ring-base-800"
+        ].join(" ")
+      }
+    }
+  }
+};
+
 const progress = {
   slots: {
     root: "gap-2",
@@ -2679,7 +3075,11 @@ const radioGroup = {
     fieldset: "flex",
     legend: "mb-1.5 block font-medium text-base-master dark:text-base-400",
     item: "flex items-start",
-    base: "cursor-pointer rounded-full ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: [
+      "cursor-pointer rounded-full",
+      "ring ring-inset ring-base-300 dark:ring-base-700",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" "),
     indicator: " flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-base-dark after:rounded-full",
     container: "flex items-center",
     wrapper: "font-b24-primary font-regular ms-2",
@@ -2791,7 +3191,11 @@ const range = {
     root: "relative flex items-center select-none touch-none",
     track: "relative bg-base-200 dark:bg-base-800 overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-white dark:bg-base-100 ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: [
+      "rounded-full bg-white dark:bg-base-100",
+      "ring-2",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" ")
   },
   variants: {
     color: {
@@ -2977,9 +3381,9 @@ const select = () => {
         placeholder: "truncate text-base-400 dark:text-base-300",
         arrow: "fill-base-master/10 dark:fill-base-100/20",
         content: [
-          "w-[var(--reka-popper-anchor-width)]",
+          "w-(--reka-popper-anchor-width)",
           // 'max-h-60',
-          // 'h-[var(--reka-popper-available-height)]',
+          // 'h-(--reka-popper-available-height)',
           "bg-white dark:bg-base-dark",
           "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
           "overflow-hidden",
@@ -3189,7 +3593,8 @@ const _switch = {
   slots: {
     root: "relative flex items-start",
     base: [
-      "cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800",
+      "cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
       "transition-colors duration-200"
     ].join(" "),
     container: "flex items-center",
@@ -3347,12 +3752,12 @@ const tabs = {
       horizontal: {
         root: "flex-col",
         list: "w-full",
-        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+        indicator: "left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
         trigger: "justify-center"
       },
       vertical: {
         list: "flex-col",
-        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]"
+        indicator: "top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
       }
     },
     size: {
@@ -4042,8 +4447,8 @@ const toast = {
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
-    base: "pointer-events-auto 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"
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    base: "pointer-events-auto 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"
   },
   variants: {
     position: {
@@ -4101,14 +4506,14 @@ const toaster = {
         "left",
         "right"
       ],
-      class: "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+      class: "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
     },
     {
       swipeDirection: [
         "up",
         "down"
       ],
-      class: "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+      class: "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
     }
   ],
   defaultVariants: {
@@ -4147,12 +4552,14 @@ const theme = {
   chip: chip,
   container: container,
   countdown: countdown,
+  dropdownMenu: dropdownMenu,
   form: form,
   formField: formField,
   input: input,
   inputMenu: inputMenu,
   kbd: kbd,
   link: link,
+  modal: modal,
   progress: progress,
   radioGroup: radioGroup,
   range: range,
@@ -4334,6 +4741,13 @@ function getTemplates(options) {
       }
     });
   }
+  templates.push({
+    filename: "b24ui.css",
+    write: true,
+    getContents: () => `@theme default {
+}
+`
+  });
   templates.push({
     filename: "b24ui/index.ts",
     write: true,