@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/.nuxt/b24ui/separator.ts

@@ -1,12 +1,7 @@
-const color = [
+const accent = [
   "default",
-  "danger",
-  "success",
-  "warning",
-  "primary",
-  "secondary",
-  "collab",
-  "ai"
+  "accent",
+  "less"
 ] as const
 
 const orientation = [
@@ -15,54 +10,40 @@ const orientation = [
 ] as const
 
 const size = [
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl"
+  "thin",
+  "thick"
 ] as const
 
 const type = [
   "solid",
   "dashed",
-  "dotted"
+  "dotted",
+  "double"
 ] as const
 
 export default {
   "slots": {
     "root": "flex items-center align-center text-center",
     "border": "",
-    "container": "font-b24-primary font-normal text-base-500 flex",
+    "container": "font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-normal) flex",
     "icon": "shrink-0 size-7",
     "avatar": "shrink-0",
     "avatarSize": "sm",
-    "label": "text-sm"
+    "label": ""
   },
   "variants": {
-    "color": {
+    "accent": {
       "default": {
-        "border": "border-base-master/10 dark:border-base-100/20"
+        "container": "text-(--ui-color-design-plain-na-content-secondary) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)",
+        "border": "border-(--ui-color-divider-vibrant-default)"
       },
-      "danger": {
-        "border": "border-red-500 dark:border-red-600"
+      "accent": {
+        "container": "text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)",
+        "border": "border-(--ui-color-divider-vibrant-accent-more)"
       },
-      "success": {
-        "border": "border-green-500 dark:border-green-600"
-      },
-      "warning": {
-        "border": "border-orange-500 dark:border-orange-600"
-      },
-      "primary": {
-        "border": "border-blue-500 dark:border-blue-600"
-      },
-      "secondary": {
-        "border": "border-cyan-350 dark:border-cyan-500"
-      },
-      "collab": {
-        "border": "border-collab-500 dark:border-collab-600"
-      },
-      "ai": {
-        "border": "border-ai-500 dark:border-ai-600"
+      "less": {
+        "container": "text-(--ui-color-base-6) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)",
+        "border": "border-(--ui-color-divider-vibrant-less)"
       }
     },
     "orientation": {
@@ -78,11 +59,8 @@ export default {
       }
     },
     "size": {
-      "xs": "",
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
+      "thin": "",
+      "thick": ""
     },
     "type": {
       "solid": {
@@ -93,84 +71,61 @@ export default {
       },
       "dotted": {
         "border": "border-dotted"
+      },
+      "double": {
+        "border": "border-double"
       }
     }
   },
   "compoundVariants": [
     {
       "orientation": "horizontal" as typeof orientation[number],
-      "size": "xs" as typeof size[number],
-      "class": {
-        "border": "border-t"
-      }
-    },
-    {
-      "orientation": "horizontal" as typeof orientation[number],
-      "size": "sm" as typeof size[number],
-      "class": {
-        "border": "border-t-[2px]"
-      }
-    },
-    {
-      "orientation": "horizontal" as typeof orientation[number],
-      "size": "md" as typeof size[number],
-      "class": {
-        "border": "border-t-[3px]"
-      }
-    },
-    {
-      "orientation": "horizontal" as typeof orientation[number],
-      "size": "lg" as typeof size[number],
+      "size": "thin" as typeof size[number],
       "class": {
-        "border": "border-t-[4px]"
+        "border": "border-t-(length:--ui-border-width-thin)"
       }
     },
     {
       "orientation": "horizontal" as typeof orientation[number],
-      "size": "xl" as typeof size[number],
+      "size": "thick" as typeof size[number],
       "class": {
-        "border": "border-t-[5px]"
+        "border": "border-t-(length:--ui-border-width-thick)"
       }
     },
     {
       "orientation": "vertical" as typeof orientation[number],
-      "size": "xs" as typeof size[number],
+      "size": "thin" as typeof size[number],
       "class": {
-        "border": "border-s"
+        "border": "border-s-(length:--ui-border-width-thin)"
       }
     },
     {
       "orientation": "vertical" as typeof orientation[number],
-      "size": "sm" as typeof size[number],
+      "size": "thick" as typeof size[number],
       "class": {
-        "border": "border-s-[2px]"
+        "border": "border-s-(length:--ui-border-width-thick)"
       }
     },
     {
-      "orientation": "vertical" as typeof orientation[number],
-      "size": "md" as typeof size[number],
-      "class": {
-        "border": "border-s-[3px]"
-      }
-    },
-    {
-      "orientation": "vertical" as typeof orientation[number],
-      "size": "lg" as typeof size[number],
+      "type": "double" as typeof type[number],
+      "size": "thick" as typeof size[number],
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "border": "border-s-[4px]"
+        "border": "border-t-[length:calc(var(--ui-border-width-thick)_+_1px)]"
       }
     },
     {
+      "type": "double" as typeof type[number],
+      "size": "thick" as typeof size[number],
       "orientation": "vertical" as typeof orientation[number],
-      "size": "xl" as typeof size[number],
       "class": {
-        "border": "border-s-[5px]"
+        "border": "border-s-[length:calc(var(--ui-border-width-thick)_+_1px)]"
       }
     }
   ],
   "defaultVariants": {
-    "color": "default" as typeof color[number],
-    "size": "xs" as typeof size[number],
+    "accent": "default" as typeof accent[number],
+    "size": "thin" as typeof size[number],
     "type": "solid" as typeof type[number]
   }
 }

package/.nuxt/b24ui/sidebar-header.ts

@@ -1,5 +1,5 @@
 export default {
   "slots": {
-    "root": "py-4 flex flex-col [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
+    "root": "min-h-(--topbar-height) flex flex-col text-(--ui-color-base-1) border-b border-(--leftmenu-bg-divider) [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
   }
 }

package/.nuxt/b24ui/sidebar-heading.ts

@@ -1,5 +1,5 @@
 export default {
   "slots": {
-    "root": "mb-1 text-xs/6 font-medium  text-base-500 dark:text-base-400"
+    "root": "mb-1 text-(length:--ui-font-size-xs)/[normal] font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color)"
   }
 }

package/.nuxt/b24ui/sidebar-layout.ts

@@ -1,40 +1,151 @@
 export default {
   "slots": {
-    "root": "min-h-svh w-full flex max-lg:flex-col relative isolate",
-    "sidebar": "w-[240px] pr-[3px] fixed inset-y-0 left-0 max-lg:hidden",
-    "sidebarSlideoverContainer": "max-w-80 p-2 bg-transparent dark:bg-transparent sm:shadow-none",
-    "sidebarSlideover": "h-full overflow-hidden flex flex-col bg-white dark:bg-base-dark ring-1 ring-base-950/5 dark:ring-white/10 shadow-xs rounded-lg",
+    "root": "sidebar-layout text-(--b24ui-typography-label-color) w-full flex",
+    "sidebar": "air-sidebar before:absolute before:inset-0 before:z-[-1] before:bg-(--leftmenu-bg-expanded) w-[240px] pe-[3px] rtl:me-[14px] inset-y-0 left-0 max-lg:hidden",
+    "sidebarSlideoverContainer": "w-full sm:max-w-80",
+    "sidebarSlideover": "h-full overflow-hidden flex flex-col text-(--b24ui-typography-label-color) bg-(--ui-color-base-white-fixed) dark:bg-(--ui-color-bg-content-primary) edge-dark:bg-[#21334cf0] ring-1 ring-(--ui-color-divider-vibrant-less) shadow-xs rounded-none",
     "sidebarSlideoverBtnClose": "-mb-3 px-4 pt-3",
-    "header": "px-4 flex items-center lg:hidden",
-    "headerMenuIcon": "",
-    "headerPaddings": "py-2.5",
-    "headerWrapper": "min-w-0 flex-1",
-    "container": "flex-1 flex flex-col lg:min-w-0",
-    "containerWrapper": "grow",
-    "containerWrapperInner": ""
+    "contentWrapper": "flex-1 flex flex-col ",
+    "header": "air-header px-(--content-area-shift) min-h-(--topbar-height) flex items-center gap-x-1",
+    "headerMenuIcon": "lg:hidden",
+    "headerWrapper": "min-w-0 flex-1 h-full",
+    "container": "flex-1 flex flex-col gap-[22px] lg:min-w-0",
+    "containerWrapper": "grow group/layout-content",
+    "pageTopWrapper": "text-(--ui-color-base-1) flex items-center gap-[12px]",
+    "pageActionsWrapper": "flex flex-col md:flex-row items-start md:items-center justify-start gap-[12px]",
+    "containerWrapperInner": "size-full",
+    "pageBottomWrapper": "",
+    "loadingWrapper": "cursor-wait isolate absolute z-1000 inset-0 w-full h-dvh flex flex-row flex-nowrap items-center justify-center",
+    "loadingIcon": "text-(--ui-color-design-plain-content-icon-secondary) size-[110px] animate-spin-slow"
   },
   "variants": {
-    "useSidebar": {
+    "inner": {
       "true": {
-        "container": "lg:pl-[240px]"
+        "root": "--inner light relative isolate h-full overflow-hidden",
+        "sidebar": "relative z-[0]",
+        "header": "relative",
+        "container": "mt-0",
+        "containerWrapper": "",
+        "pageBottomWrapper": "flex-0"
       },
       "false": {
-        "container": "pb-2 lg:pt-2 lg:px-2"
+        "root": "--app h-screen min-h-screen max-lg:flex-col",
+        "sidebar": "fixed",
+        "header": "relative",
+        "container": "relative mt-[22px]"
       }
     },
+    "offContentScrollbar": {
+      "false": "",
+      "true": ""
+    },
+    "useSidebar": {
+      "true": "",
+      "false": ""
+    },
     "useLightContent": {
       "true": {
-        "root": "bg-white dark:bg-white/10 lg:bg-base-50 dark:lg:bg-base-dark edge-dark:lg:bg-transparent",
-        "container": "pb-2 lg:pt-2 lg:pr-2",
-        "containerWrapper": "p-6 lg:p-10 lg:bg-white dark:lg:bg-white/10 lg:ring-1 lg:ring-base-950/5 dark:lg:ring-white/10 lg:shadow-xs lg:rounded-lg"
+        "containerWrapper": "text-(--ui-color-text-primary) bg-(--ui-color-bg-content-primary) "
+      },
+      "false": {
+        "container": "px-(--content-area-shift)"
+      }
+    },
+    "loading": {
+      "true": ""
+    },
+    "useNavbar": {
+      "true": {
+        "container": ""
       },
       "false": {
-        "container": "px-4"
+        "loadingWrapper": "h-full",
+        "container": ""
       }
     }
   },
-  "compoundVariants": [],
+  "compoundVariants": [
+    {
+      "inner": true,
+      "useLightContent": true,
+      "class": {
+        "container": "",
+        "pageTopWrapper": "px-0 lg:px-0",
+        "pageActionsWrapper": "px-0 lg:px-0",
+        "containerWrapper": "p-[20px] rounded-(--ui-border-radius-md)"
+      }
+    },
+    {
+      "inner": false,
+      "useLightContent": true,
+      "class": {
+        "container": "lg:pb-2",
+        "pageTopWrapper": "px-6 lg:px-0",
+        "pageActionsWrapper": "px-6 lg:px-0",
+        "containerWrapper": "p-6 lg:p-[15px] lg:rounded-(--ui-border-radius-md)"
+      }
+    },
+    {
+      "inner": true,
+      "offContentScrollbar": false,
+      "class": {
+        "container": "scrollbar-thin scrollbar-transparent overflow-y-scroll"
+      }
+    },
+    {
+      "inner": true,
+      "useSidebar": [
+        true,
+        false
+      ],
+      "class": {
+        "container": "px-[20px] ps-[20px] pe-[10px] pb-[20px] lg:pt-0 lg:px-[20px] lg:ps-[20px] lg:pe-[10px]"
+      }
+    },
+    {
+      "inner": false,
+      "useSidebar": true,
+      "class": {
+        "container": "lg:px-(--content-area-shift)",
+        "contentWrapper": "lg:pl-[240px] "
+      }
+    },
+    {
+      "inner": false,
+      "useSidebar": false,
+      "class": {
+        "container": "px-(--content-area-shift) pb-2 lg:pt-2 lg:px-2",
+        "contentWrapper": "lg:pl-0"
+      }
+    },
+    {
+      "inner": true,
+      "useNavbar": [
+        true,
+        false
+      ],
+      "class": {
+        "container": "h-full"
+      }
+    },
+    {
+      "inner": false,
+      "useNavbar": true,
+      "class": {
+        "container": "h-[calc(100dvh-var(--topbar-height))]"
+      }
+    },
+    {
+      "inner": false,
+      "useNavbar": false,
+      "class": {
+        "container": "h-full"
+      }
+    }
+  ],
   "defaultVariants": {
+    "inner": false,
+    "noContentScrollbar": false,
     "useLightContent": true
   }
 }

package/.nuxt/b24ui/sidebar-section.ts

@@ -1,5 +1,5 @@
 export default {
   "slots": {
-    "root": "ps-2xl pe-xs flex flex-col gap-0.5"
+    "root": "ps-(--menu-items-block-padding-x) rtl:pe-(--menu-items-block-padding-x) pe-xs rtl:ps-xs flex flex-col gap-0.5"
   }
 }

package/.nuxt/b24ui/skeleton.ts

@@ -1,3 +1,21 @@
+const accent = [
+  "default",
+  "accent",
+  "less"
+] as const
+
 export default {
-  "base": "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
+  "slots": {
+    "base": "animate-pulse rounded-(--ui-border-radius-md) "
+  },
+  "variants": {
+    "accent": {
+      "default": "bg-(--ui-color-g-glass-grey-bg-1)",
+      "accent": "bg-(--ui-color-g-glass-grey-bg-2)" as typeof accent[number],
+      "less": "bg-(--ui-color-g-glass-grey-bg-3)"
+    }
+  },
+  "defaultVariants": {
+    "accent": "default" as typeof accent[number]
+  }
 }

package/.nuxt/b24ui/slideover.ts

@@ -5,23 +5,26 @@ const overlayBlur = [
 ] as const
 
 const side = [
-  "top",
   "right",
-  "bottom",
-  "left"
+  "left",
+  "top",
+  "bottom"
 ] as const
 
 export default {
   "slots": {
-    "overlay": "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
-    "content": "fixed bg-base-50 dark:bg-base-950 sm:shadow-lg flex flex-col focus:outline-none",
-    "header": "mt-4 px-5 flex items-center gap-1.5",
-    "wrapper": "min-h-2xl",
-    "body": "mx-0 mt-2 flex-1 overflow-y-auto",
-    "footer": "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
-    "title": "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
-    "description": "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
+    "overlay": "fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]",
+    "content": "fixed sm:shadow-lg flex flex-col focus:outline-none h-full",
+    "sidebarLayoutRoot": "",
+    "sidebarLayoutHeaderWrapper": "",
+    "sidebarLayoutPageBottomWrapper": "",
+    "header": "pt-[24px] flex-1 flex items-center gap-x-[12px] gap-y-1.5",
+    "wrapper": "min-h-[30px]",
+    "title": "font-[family-name:var(--ui-font-family-primary)] text-(--b24ui-typography-label-color) font-(--ui-font-weight-semi-bold) mb-0 text-(length:--ui-font-size-4xl)/[calc(var(--ui-font-size-4xl)+2px)]",
+    "description": "mt-1 text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)",
     "close": "absolute",
+    "body": "size-full flex-1",
+    "footer": "light bg-(--popup-window-background-color) flex items-center justify-center gap-3 border-t border-t-1 border-t-(--ui-color-divider-less) shadow-top-md py-[9px] px-2 pr-(--scrollbar-width)",
     "safeList": "group-hover:rounded-full group-hover:border-1 group-hover:border-current"
   },
   "variants": {
@@ -37,48 +40,47 @@ export default {
       }
     },
     "side": {
-      "top": {
-        "content": "inset-x-0 top-0 max-h-full"
-      },
       "right": {
-        "content": "right-0 inset-y-0 w-full max-w-[28rem]"
-      },
-      "bottom": {
-        "content": "inset-x-0 bottom-0 max-h-full"
+        "content": "right-0 inset-y-0 w-[calc(100%-60px)] sm:w-[calc(100%-150px)]",
+        "sidebarLayoutRoot": "sm:rounded-t-none"
       },
       "left": {
-        "content": "left-0 inset-y-0 w-full max-w-[28rem]"
+        "content": "left-0 inset-y-0 w-[calc(100%-60px)] sm:w-[calc(100%-150px)]",
+        "sidebarLayoutRoot": "sm:rounded-t-none"
+      },
+      "top": {
+        "content": "inset-x-0 top-0 max-h-full",
+        "sidebarLayoutRoot": "sm:rounded-t-none"
+      },
+      "bottom": {
+        "content": "right-[5px] sm:right-[70px] top-0 sm:top-[18px] bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:max-h-[calc(100%-18px)]",
+        "sidebarLayoutRoot": "sm:rounded-t-[18px]"
       }
     },
     "transition": {
       "true": {
         "overlay": "motion-safe:data-[state=open]:animate-[fade-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[fade-out_200ms_ease-in]"
       }
-    },
-    "scrollbarThin": {
-      "true": {
-        "body": "scrollbar-thin"
-      }
     }
   },
   "compoundVariants": [
     {
-      "side": "right" as typeof side[number],
+      "side": [
+        "right" as typeof side[number],
+        "bottom" as typeof side[number]
+      ],
       "class": {
-        "close": "pl-1.5 pr-2.5 top-3 -translate-x-full left-0 rounded-l-full"
+        "close": "pl-1.5 pr-[4px] top-[17px] -translate-x-full left-[1px] rounded-l-full"
       }
     },
     {
       "side": "left" as typeof side[number],
       "class": {
-        "close": "pr-1.5 pl-2.5 top-3 translate-x-full right-0 rounded-r-full"
+        "close": "pr-1.5 pl-[4px] top-[17px] translate-x-full right-[1px] rounded-r-full [&>div]:flex-row-reverse"
       }
     },
     {
-      "side": [
-        "top" as typeof side[number],
-        "bottom" as typeof side[number]
-      ],
+      "side": "top" as typeof side[number],
       "class": {
         "close": "top-4 end-4"
       }
@@ -113,8 +115,7 @@ export default {
     }
   ],
   "defaultVariants": {
-    "side": "right" as typeof side[number],
-    "scrollbarThin": true,
-    "overlayBlur": "auto" as typeof overlayBlur[number]
+    "side": "bottom" as typeof side[number],
+    "overlayBlur": "off" as typeof overlayBlur[number]
   }
 }