@bitrix24/b24ui-nuxt 0.5.1 → 0.5.3

package/dist/shared/{b24ui-nuxt.CBnBA3PE.mjs → b24ui-nuxt.BIuy4yic.mjs}

@@ -3565,12 +3565,11 @@ const navigationMenu = {
       "relative overflow-hidden",
       "w-full",
       "bg-white dark:bg-base-dark",
-      "shadow-lg",
-      "rounded-2xs",
-      "ring ring-base-300 dark:ring-base-800",
+      "shadow-[0_15px_21px_rgba(83,92,105,.15)]",
       "h-(--reka-navigation-menu-viewport-height)",
-      "transition-[width,height,left] duration-200 origin-[top_center]",
-      "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+      "transition-[width,height] duration-200 origin-[top_center]"
+      // left
+      // 'motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]'
     ].join(" "),
     content: "absolute top-0 left-0 w-full",
     indicator: [
@@ -3642,6 +3641,10 @@ const navigationMenu = {
       pill: {
         link: [
           "hover:before:bg-base-250/80 dark:hover:before:bg-white/10"
+        ].join(" "),
+        viewport: [
+          "rounded-md",
+          "ring ring-base-300 dark:ring-base-800"
         ].join(" ")
       },
       link: ""
@@ -3649,8 +3652,8 @@ const navigationMenu = {
     orientation: {
       horizontal: {
         root: "items-center justify-between",
-        list: "flex items-center",
-        item: "py-2",
+        list: "flex items-center gap-x-1",
+        item: "py-2 empty:hidden",
         link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
         childList: "grid p-2"
       },
@@ -3667,29 +3670,42 @@ const navigationMenu = {
       horizontal: {
         viewport: "",
         viewportWrapper: "justify-center",
-        content: "motion-safe:data-[motion=from-start]:animate-[enter-from-left_200ms_ease] motion-safe:data-[motion=from-end]:animate-[enter-from-right_200ms_ease] motion-safe:data-[motion=to-start]:animate-[exit-to-left_200ms_ease] motion-safe:data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
+        content: "motion-safe:data-[motion=from-start]:animate-[enter-from-left_200ms_ease] motion-safe:data-[motion=from-end]:animate-[enter-from-right_200ms_ease] motion-safe:data-[motion=to-start]:animate-[exit-to-left_200ms_ease] motion-safe:data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
+        childLinkLabelExternalIcon: [
+          "h-4"
+        ].join(" ")
       },
       vertical: {
-        viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
-        content: ""
+        viewport: [
+          "w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
+          "[&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))]"
+        ].join(" "),
+        content: "",
+        childLinkLabel: [
+          "text-md",
+          "text-base-950 dark:text-base-50"
+        ].join(" "),
+        childLinkLabelExternalIcon: [
+          "h-4"
+        ].join(" ")
       }
     },
     active: {
       true: {
         childLink: [
-          "bg-base-250/80 dark:bg-white/10",
+          "bg-base-20 dark:bg-base-900",
           "text-base-950 dark:text-base-50",
           "font-semibold"
         ].join(" "),
-        childLinkIcon: "text-base-950 dark:text-base-50"
+        childLinkIcon: "text-base-950 dark:text-base-200"
       },
       false: {
         link: "text-base-900 dark:text-base-200",
         linkLeadingIcon: "text-base-500 dark:text-base-700",
         childLink: [
-          "hover:bg-base-250/80 dark:hover:bg-white/10",
+          "hover:bg-base-20 dark:hover:bg-base-900",
           "text-base-500 dark:text-base-700",
-          "hover:text-base-950 dark:hover:dark:text-base-50",
+          "hover:text-base-950 dark:hover:dark:text-base-200",
           "transition-colors"
         ].join(" "),
         childLinkIcon: [
@@ -3750,6 +3766,16 @@ const navigationMenu = {
     },
     // endregion ////
     // region pill ////
+    {
+      disabled: true,
+      orientation: "horizontal",
+      variant: "pill",
+      class: {
+        link: [
+          "hover:before:rounded-md"
+        ].join(" ")
+      }
+    },
     {
       disabled: false,
       active: false,
@@ -3812,6 +3838,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "default",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-base-800 dark:before:bg-white/35",
+          "hover:before:bg-base-800 hover:dark:before:bg-white/35",
+          "data-[state=open]:before:bg-base-800 dark:data-[state=open]:before:bg-white/35"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "danger",
       variant: "pill",
@@ -3831,6 +3877,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "danger",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-red-800 dark:before:bg-red-800",
+          "hover:before:bg-red-800 hover:dark:before:bg-red-800",
+          "data-[state=open]:before:bg-red-800 dark:data-[state=open]:before:bg-red-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "success",
       variant: "pill",
@@ -3850,6 +3916,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "success",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-green-800 dark:before:bg-green-800",
+          "hover:before:bg-green-800 hover:dark:before:bg-green-800",
+          "data-[state=open]:before:bg-green-800 dark:data-[state=open]:before:bg-green-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "warning",
       variant: "pill",
@@ -3869,6 +3955,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "warning",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-orange-800 dark:before:bg-orange-800",
+          "hover:before:bg-orange-800 hover:dark:before:bg-orange-800",
+          "data-[state=open]:before:bg-orange-800 dark:data-[state=open]:before:bg-orange-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "primary",
       variant: "pill",
@@ -3888,6 +3994,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "primary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-blue-800 dark:before:bg-blue-800",
+          "hover:before:bg-blue-800 hover:dark:before:bg-blue-800",
+          "data-[state=open]:before:bg-blue-800 dark:data-[state=open]:before:bg-blue-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "secondary",
       variant: "pill",
@@ -3907,6 +4033,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "secondary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-cyan-800 dark:before:bg-cyan-800",
+          "hover:before:bg-cyan-800 hover:dark:before:bg-cyan-800",
+          "data-[state=open]:before:bg-cyan-800 dark:data-[state=open]:before:bg-cyan-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "collab",
       variant: "pill",
@@ -3926,6 +4072,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "collab",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-collab-800 dark:before:bg-collab-800",
+          "hover:before:bg-collab-800 hover:dark:before:bg-collab-800",
+          "data-[state=open]:before:bg-collab-800 dark:data-[state=open]:before:bg-collab-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "ai",
       variant: "pill",
@@ -3945,6 +4111,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "ai",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-ai-800 dark:before:bg-ai-800",
+          "hover:before:bg-ai-800 hover:dark:before:bg-ai-800",
+          "data-[state=open]:before:bg-ai-800 dark:data-[state=open]:before:bg-ai-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       variant: "pill",
       active: true,
@@ -3966,6 +4152,17 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      variant: "pill",
+      orientation: "horizontal",
+      active: true,
+      highlight: false,
+      class: {
+        linkLabelWrapper: [
+          "bg-inherit dark:bg-inherit"
+        ].join(" ")
+      }
+    },
     {
       variant: "pill",
       active: true,
@@ -3974,11 +4171,133 @@ const navigationMenu = {
         link: [
           "hover:before:bg-base-250/80 dark:hover:before:bg-white/10",
           "before:transition-colors"
-        ]
+        ].join(" ")
+      }
+    },
+    {
+      color: "default",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-base-800 hover:dark:before:bg-white/35",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-red-800 hover:dark:before:bg-red-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-green-800 hover:dark:before:bg-green-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-orange-800 hover:dark:before:bg-orange-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-blue-800 hover:dark:before:bg-blue-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-cyan-800 hover:dark:before:bg-cyan-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-collab-800 hover:dark:before:bg-collab-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-ai-800 hover:dark:before:bg-ai-800",
+          "before:transition-colors"
+        ].join(" ")
       }
     },
     // endregion ////
     // region link ////
+    {
+      orientation: "horizontal",
+      variant: "link",
+      class: {
+        viewportWrapper: [
+          "top-[calc(100%+0.4rem)]"
+        ].join(" "),
+        viewport: [
+          "rounded-b-md",
+          "[&:has(>[data-viewport=ltr])]:rounded-tr-md [&:has(>[data-viewport=rtl])]:rounded-tl-md",
+          "clip-path-viewport-wrapper"
+        ].join(" "),
+        link: [
+          "before:inset-x-[0px] before:-inset-y-[6px] before:h-[70px]",
+          "before:rounded-t-md"
+        ].join(" ")
+      }
+    },
     {
       disabled: false,
       active: false,
@@ -3994,13 +4313,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      disabled: false,
+      variant: "link",
+      orientation: "horizontal",
+      class: {
+        link: [
+          "data-[state=open]:before:shadow-[0_6px_21px_rgba(83,92,105,.15)]",
+          "data-[state=open]:before:bg-white dark:data-[state=open]:before:bg-base-dark"
+        ].join(" ")
+      }
+    },
     {
       disabled: false,
       active: false,
       variant: "link",
       orientation: "horizontal",
       class: {
-        link: "data-[state=open]:text-base-950 dark:data-[state=open]:text-base-50",
+        link: [
+          "data-[state=open]:text-base-950 dark:data-[state=open]:text-base-50"
+        ].join(" "),
         linkLeadingIcon: "group-data-[state=open]:text-base-950 dark:group-data-[state=open]:text-base-50"
       }
     },
@@ -4045,8 +4377,8 @@ const navigationMenu = {
       variant: "link",
       active: true,
       class: {
-        link: "font-semibold text-blue-800 dark:text-blue-600",
-        linkLeadingIcon: "text-blue-800 group-data-[state=open]:text-blue-600 dark:text-blue-600 dark:group-data-[state=open]:text-blue-600"
+        link: "font-semibold text-blue-850 dark:text-blue-600",
+        linkLeadingIcon: "text-blue-850 group-data-[state=open]:text-blue-600 dark:text-blue-600 dark:group-data-[state=open]:text-blue-600"
       }
     },
     {
@@ -4079,6 +4411,7 @@ const navigationMenu = {
     // endregion ////
     // region highlight.Color ////
     {
+      orientation: "vertical",
       highlightColor: "default",
       highlight: true,
       level: true,
@@ -4088,6 +4421,18 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "default",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-base-500"
+      }
+    },
+    {
+      orientation: "vertical",
       highlightColor: "danger",
       highlight: true,
       level: true,
@@ -4097,15 +4442,46 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "danger",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-red-500 dark:after:bg-red-600"
+      }
+    },
+    {
+      orientation: "vertical",
       highlightColor: "success",
       highlight: true,
       level: true,
       active: true,
+      class: { link: "after:bg-green-500 dark:after:bg-green-600" }
+    },
+    {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "success",
+      highlight: true,
+      level: true,
+      active: true,
+      class: { link: "after:bg-green-500 dark:after:bg-green-600" }
+    },
+    {
+      orientation: "vertical",
+      highlightColor: "warning",
+      highlight: true,
+      level: true,
+      active: true,
       class: {
-        link: "after:bg-green-500 dark:after:bg-green-600"
+        link: "after:bg-orange-500 dark:after:bg-orange-600"
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
       highlightColor: "warning",
       highlight: true,
       level: true,
@@ -4115,6 +4491,7 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "vertical",
       highlightColor: "primary",
       highlight: true,
       level: true,
@@ -4124,6 +4501,18 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "primary",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-blue-850 dark:after:bg-blue-600"
+      }
+    },
+    {
+      orientation: "vertical",
       highlightColor: "secondary",
       highlight: true,
       level: true,
@@ -4133,6 +4522,18 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "secondary",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-cyan-500 dark:after:bg-cyan-600"
+      }
+    },
+    {
+      orientation: "vertical",
       highlightColor: "collab",
       highlight: true,
       level: true,
@@ -4142,6 +4543,29 @@ const navigationMenu = {
       }
     },
     {
+      orientation: "horizontal",
+      variant: "link",
+      highlightColor: "collab",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-collab-500 dark:after:bg-collab-600"
+      }
+    },
+    {
+      orientation: "vertical",
+      highlightColor: "ai",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-ai-500 dark:after:bg-ai-600"
+      }
+    },
+    {
+      orientation: "horizontal",
+      variant: "link",
       highlightColor: "ai",
       highlight: true,
       level: true,
@@ -4172,7 +4596,8 @@ const navigationMenu = {
   defaultVariants: {
     color: "default",
     highlightColor: "default",
-    variant: "pill"
+    contentOrientation: "vertical",
+    variant: "link"
   }
 };