@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/shared/{b24ui-nuxt.DEyBXBFe.mjs → b24ui-nuxt.C0de-Y4w.mjs}

@@ -8,7 +8,7 @@ import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.3.0";
+const version = "2.4.1";
 
 function getDefaultConfig(theme) {
   return {
@@ -22,7 +22,9 @@ function getDefaultConfig(theme) {
 }
 const defaultOptions = {
   colorMode: true,
+  colorModeInitialValue: "light",
   colorModeTypeLight: "light",
+  colorModeStorageKey: "vueuse-color-scheme",
   version,
   mdc: true,
   content: false
@@ -1806,7 +1808,8 @@ const chatPrompt = {
     header: "flex items-center gap-[8px]",
     body: "py-[4px] items-start",
     footer: "flex items-center justify-end gap-[8px]",
-    base: "pt-[1px] pb-[0px] text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs)"
+    base: "pt-[1px] pb-[0px]"
+    // text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs)
   },
   variants: {
     variant: {
@@ -2846,8 +2849,51 @@ const countdown = {
 };
 
 const dashboardGroup = {
-  base: ""
-  // 'fixed inset-0 flex overflow-hidden'
+  base: "fixed inset-0 flex overflow-hidden"
+};
+
+const dashboardNavbar = {
+  slots: {
+    root: "h-(--b24ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 gap-1.5",
+    left: "flex items-center gap-1.5 min-w-0",
+    icon: "shrink-0 size-5 self-center me-1.5",
+    title: "flex items-center gap-1.5 font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color) truncate",
+    center: "hidden lg:flex",
+    right: "flex items-center shrink-0 gap-1.5",
+    toggle: ""
+  },
+  variants: {
+    toggleSide: {
+      left: {
+        toggle: ""
+      },
+      right: {
+        toggle: ""
+      }
+    }
+  }
+};
+
+const dashboardPanel = {
+  slots: {
+    root: "relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-(--ui-color-divider-default) shrink-0",
+    body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto pt-2.5 lg:p-4 scrollbar-thin",
+    handle: ""
+  },
+  variants: {
+    size: {
+      true: {
+        root: "w-full lg:w-(--width)"
+      },
+      false: {
+        root: "flex-1"
+      }
+    }
+  }
+};
+
+const dashboardResizeHandle = {
+  base: "hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"
 };
 
 const dashboardSearch = {
@@ -2862,24 +2908,12 @@ const dashboardSearch = {
       }
     },
     size: {
-      xss: {
-        input: "[&>input]:text-(length:--ui-font-size-4xs)/[normal]"
-      },
-      xs: {
-        input: "[&>input]:text-(length:--ui-font-size-xs)/[normal]"
-      },
-      sm: {
-        input: "[&>input]:text-(length:--ui-font-size-sm)/[normal]"
-      },
-      md: {
-        input: "[&>input]:text-(length:--ui-font-size-md)/[normal]"
-      },
-      lg: {
-        input: "[&>input]:text-(length:--ui-font-size-lg)/[normal]"
-      },
-      xl: {
-        input: "[&>input]:text-(length:--ui-font-size-2xl)/[normal]"
-      }
+      xss: {},
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
     }
   },
   defaultVariants: {
@@ -2905,6 +2939,72 @@ const dashboardSearchButton = {
   }
 };
 
+const dashboardSidebar = {
+  slots: {
+    root: "relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0",
+    header: "h-(--b24ui-header-height) shrink-0 flex items-center gap-1.5 px-4",
+    body: "flex flex-col gap-4 flex-1 overflow-y-auto py-2 scrollbar-thin scrollbar-transparent",
+    footer: "shrink-0 flex items-center gap-1.5 px-4 py-2",
+    toggle: "",
+    handle: "",
+    content: "lg:hidden",
+    overlay: "lg:hidden"
+  },
+  variants: {
+    menu: {
+      true: {
+        header: "sm:px-6",
+        body: "sm:px-6",
+        footer: "sm:px-6"
+      }
+    },
+    side: {
+      left: {
+        root: "border-e border-(--ui-color-divider-default)"
+      },
+      right: {
+        root: ""
+      }
+    },
+    toggleSide: {
+      left: {
+        toggle: ""
+      },
+      right: {
+        toggle: "ms-auto"
+      }
+    }
+  }
+};
+
+const dashboardSidebarCollapse = {
+  base: "hidden lg:flex",
+  variants: {
+    side: {
+      left: "",
+      right: ""
+    }
+  }
+};
+
+const dashboardSidebarToggle = {
+  base: "lg:hidden",
+  variants: {
+    side: {
+      left: "",
+      right: ""
+    }
+  }
+};
+
+const dashboardToolbar = {
+  slots: {
+    root: "shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
+    left: "flex items-center gap-1.5",
+    right: "flex items-center gap-1.5"
+  }
+};
+
 const descriptionList = {
   slots: {
     root: "w-full shrink-0",
@@ -2987,6 +3087,166 @@ const descriptionList = {
   }
 };
 
+const drawer = {
+  slots: {
+    overlay: "fixed inset-0",
+    content: [
+      "fixed",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
+      "flex",
+      "focus:outline-none",
+      "ring ring-(--ui-color-divider-default)"
+    ].join(" "),
+    handle: "shrink-0 !bg-(--ui-color-divider-default) transition-opacity",
+    container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
+    header: "",
+    title: [
+      "font-[family-name:var(--ui-font-family-primary)]",
+      "text-(--b24ui-typography-label-color)",
+      "font-(--ui-font-weight-medium)",
+      "mb-0",
+      "text-[calc(var(--ui-font-size-2xl)+2px)]/(--ui-font-size-2xl)"
+    ].join(" "),
+    description: [
+      "mt-1",
+      "text-(--b24ui-typography-description-color)",
+      "text-(length:--ui-font-size-sm)"
+    ].join(" "),
+    body: "flex-1",
+    footer: "flex flex-col gap-1.5"
+  },
+  variants: {
+    overlayBlur: {
+      auto: { overlay: "motion-safe:backdrop-blur-[2px]" },
+      on: { overlay: "backdrop-blur-[2px]" },
+      off: { overlay: "" }
+    },
+    scrollbarThin: {
+      true: {
+        body: "scrollbar-thin"
+      }
+    },
+    overlay: {
+      true: {
+        overlay: "bg-[#003366]/20"
+      }
+    },
+    direction: {
+      top: {
+        content: "mb-24 flex-col-reverse",
+        handle: "mb-4"
+      },
+      right: {
+        content: "flex-row",
+        handle: "!ml-4"
+      },
+      bottom: {
+        content: "mt-24 flex-col",
+        handle: "mt-4"
+      },
+      left: {
+        content: "flex-row-reverse",
+        handle: "!mr-4"
+      }
+    },
+    inset: {
+      true: {
+        content: "rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]"
+      }
+    },
+    snapPoints: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      direction: ["top", "bottom"],
+      class: {
+        content: "h-auto max-h-[96%]",
+        handle: "!w-12 !h-1.5 mx-auto"
+      }
+    },
+    {
+      direction: ["top", "bottom"],
+      snapPoints: true,
+      class: {
+        content: "h-full"
+      }
+    },
+    {
+      direction: ["right", "left"],
+      class: {
+        content: "w-auto max-w-[calc(100%-2rem)]",
+        handle: "!h-12 !w-1.5 mt-auto mb-auto"
+      }
+    },
+    {
+      direction: ["right", "left"],
+      snapPoints: true,
+      class: {
+        content: "w-full"
+      }
+    },
+    {
+      direction: "top",
+      inset: true,
+      class: {
+        content: "inset-x-4 top-4"
+      }
+    },
+    {
+      direction: "top",
+      inset: false,
+      class: {
+        content: "inset-x-0 top-0 rounded-b-lg"
+      }
+    },
+    {
+      direction: "bottom",
+      inset: true,
+      class: {
+        content: "inset-x-4 bottom-4"
+      }
+    },
+    {
+      direction: "bottom",
+      inset: false,
+      class: {
+        content: "inset-x-0 bottom-0 rounded-t-lg"
+      }
+    },
+    {
+      direction: "left",
+      inset: true,
+      class: {
+        content: "inset-y-4 left-4"
+      }
+    },
+    {
+      direction: "left",
+      inset: false,
+      class: {
+        content: "inset-y-0 left-0 rounded-r-lg"
+      }
+    },
+    {
+      direction: "right",
+      inset: true,
+      class: {
+        content: "inset-y-4 right-4"
+      }
+    },
+    {
+      direction: "right",
+      inset: false,
+      class: {
+        content: "inset-y-0 right-0 rounded-l-lg"
+      }
+    }
+  ]
+};
+
 const dropdownMenu = {
   slots: {
     content: [
@@ -2994,6 +3254,7 @@ const dropdownMenu = {
       "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
       "rounded-(--ui-border-radius-xl) will-change-[opacity]",
+      // 'ring ring-(--ui-color-divider-default)',
       "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       "origin-(--reka-dropdown-menu-content-transform-origin)",
       "font-[family-name:var(--ui-font-family-primary)]",
@@ -3009,7 +3270,7 @@ const dropdownMenu = {
       // scrollbar-transparent
     ].join(" "),
     arrow: "fill-(--ui-color-bg-content-primary)",
-    // for content bottom|top::start -> ml-[12px]
+    // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
     group: "grid",
     // p-1 isolate
     label: [
@@ -3762,6 +4023,47 @@ const fileUpload = {
   }
 };
 
+const footer = {
+  slots: {
+    root: "",
+    top: "py-8 lg:py-12",
+    bottom: "py-8 lg:py-12",
+    container: "py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",
+    left: "flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",
+    center: "mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",
+    right: "lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"
+  }
+};
+
+const footerColumns = {
+  slots: {
+    root: "xl:grid xl:grid-cols-3 xl:gap-8",
+    left: "mb-10 xl:mb-0",
+    center: "flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2",
+    right: "mt-10 xl:mt-0",
+    label: "text-(length:--ui-font-size-lg)/[normal] font-(--ui-font-weight-semi-bold)",
+    list: "mt-6 space-y-4",
+    item: "relative",
+    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    linkLeadingIcon: "size-5 shrink-0",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "inline-block size-[14px] text-(--ui-color-design-plain-content-icon-secondary)"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary font-medium"
+      },
+      false: {
+        link: [
+          "text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color)",
+          "transition-colors"
+        ].join(" ")
+      }
+    }
+  }
+};
+
 const form = {
   base: ""
 };
@@ -3837,6 +4139,32 @@ const formField = {
   }
 };
 
+const header = {
+  slots: {
+    root: "bg-(--ui-color-bg-content-primary)/75 backdrop-blur border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50",
+    container: "flex items-center justify-between gap-3 h-full",
+    left: "lg:flex-1 flex items-center gap-1.5",
+    center: "hidden lg:flex",
+    right: "flex items-center justify-end lg:flex-1 gap-1.5",
+    title: "shrink-0 font-bold text-xl text-(--b24ui-typography-label-color) flex items-end gap-1.5",
+    toggle: "lg:hidden",
+    content: "lg:hidden",
+    overlay: "lg:hidden",
+    header: "px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3",
+    body: "p-4 sm:p-6 overflow-y-auto"
+  },
+  variants: {
+    toggleSide: {
+      left: {
+        toggle: "-ms-1.5"
+      },
+      right: {
+        toggle: "-me-1.5"
+      }
+    }
+  }
+};
+
 const input = {
   slots: {
     root: "isolate relative inline-flex items-center",
@@ -3968,6 +4296,9 @@ const input = {
     trailing: { true: "" },
     loading: { true: "" },
     highlight: { true: "ring ring-inset ring-(--b24ui-border-color)" },
+    fixed: {
+      false: ""
+    },
     type: {
       file: [
         "file:me-1.5",
@@ -4192,6 +4523,33 @@ const input = {
       size: "xss",
       rounded: false,
       class: "rounded-[5px]"
+    },
+    // endregion ////
+    // region fixed ////
+    {
+      fixed: false,
+      size: "xss",
+      class: "md:text-(length:--ui-font-size-4xs)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "xs",
+      class: "md:text-(length:--ui-font-size-xs)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "sm",
+      class: "md:text-(length:--ui-font-size-sm)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "md",
+      class: "md:text-(length:--ui-font-size-lg)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "lg",
+      class: "md:text-(length:--ui-font-size-lg)/[normal]"
     }
     // endregion ////
   ],
@@ -4303,6 +4661,7 @@ const inputMenu = () => {
         "bg-(--ui-color-bg-content-primary)",
         "shadow-(--popup-window-box-shadow)",
         "rounded-(--ui-border-radius-xl) will-change-[opacity]",
+        // 'ring ring-(--ui-color-divider-default)',
         "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
         "origin-(--reka-dropdown-menu-content-transform-origin)",
         "font-[family-name:var(--ui-font-family-primary)]",
@@ -4319,7 +4678,7 @@ const inputMenu = () => {
         // scrollbar-transparent
       ].join(" "),
       arrow: "fill-(--ui-color-bg-content-primary)",
-      // for content bottom|top::start -> ml-[12px]
+      // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
       group: "grid",
       empty: [
         "h-(--popup-window-delimiter-section-height)",
@@ -4766,6 +5125,9 @@ const inputNumber = () => {
       highlight: {
         true: ""
       },
+      fixed: {
+        false: ""
+      },
       increment: {
         false: ""
       },
@@ -5071,6 +5433,33 @@ const inputNumber = () => {
         size: "xss",
         rounded: false,
         class: "rounded-[5px]"
+      },
+      // endregion ////
+      // region fixed ////
+      {
+        fixed: false,
+        size: "xss",
+        class: "md:text-(length:--ui-font-size-4xs)/[normal]"
+      },
+      {
+        fixed: false,
+        size: "xs",
+        class: "md:text-(length:--ui-font-size-xs)/[normal]"
+      },
+      {
+        fixed: false,
+        size: "sm",
+        class: "md:text-(length:--ui-font-size-sm)/[normal]"
+      },
+      {
+        fixed: false,
+        size: "md",
+        class: "md:text-(length:--ui-font-size-lg)/[normal]"
+      },
+      {
+        fixed: false,
+        size: "lg",
+        class: "md:text-(length:--ui-font-size-lg)/[normal]"
       }
       // endregion ////
     ],
@@ -5401,6 +5790,10 @@ const link = (options) => ({
   ]
 });
 
+const main = {
+  base: "min-h-[calc(100vh-var(--b24ui-header-height))]"
+};
+
 const modal = {
   slots: {
     overlay: "fixed inset-0",
@@ -5539,6 +5932,7 @@ const navigationMenu = {
     linkLeadingIcon: "shrink-0 size-[26px]",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "xs",
+    linkLeadingChipSize: "sm",
     linkLeadingHint: [
       "inline-flex m-0 absolute -top-[5px] left-[8px]",
       "text-(length:--ui-font-size-4xs)",
@@ -5732,6 +6126,7 @@ const navigationMenu = {
       class: {
         childList: "grid px-0 py-(--menu-popup-padding)",
         linkLabel: "hidden",
+        linkLabelExternalIcon: "hidden",
         linkTrailing: "hidden"
       }
     },
@@ -5781,6 +6176,54 @@ const navigationMenu = {
   defaultVariants: {}
 };
 
+const page = {
+  slots: {
+    root: "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10",
+    left: "lg:col-span-2",
+    center: "lg:col-span-8",
+    right: "lg:col-span-2 order-first lg:order-last"
+  },
+  variants: {
+    left: {
+      true: ""
+    },
+    right: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      left: true,
+      right: true,
+      class: {
+        center: "lg:col-span-6"
+      }
+    },
+    {
+      left: false,
+      right: false,
+      class: {
+        center: "lg:col-span-10"
+      }
+    }
+  ]
+};
+
+const pageAside = {
+  slots: {
+    root: "hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--b24ui-header-height))] lg:sticky lg:top-(--b24ui-header-height)",
+    container: "relative",
+    top: "sticky -top-8 -mt-8 pointer-events-none z-[1]",
+    topHeader: "h-8 bg-(--ui-color-bg-content-primary) -mx-4 px-4",
+    topBody: "bg-(--ui-color-bg-content-primary) relative pointer-events-auto flex flex-col -mx-4 px-4",
+    topFooter: "h-8 bg-gradient-to-b from-(--ui-color-bg-content-primary) -mx-4 px-4"
+  }
+};
+
+const pageBody = {
+  base: "mt-8 pb-24 space-y-12"
+};
+
 const pageCard = {
   slots: {
     root: "relative flex rounded-lg",
@@ -5791,8 +6234,8 @@ const pageCard = {
     footer: "pt-4 mt-auto",
     leading: "inline-flex items-center mb-2.5",
     leadingIcon: "size-5 shrink-0",
-    title: "text-2xl text-pretty font-(--ui-font-weight-semi-bold)",
-    description: "text-lg text-pretty"
+    title: "text-(length:--ui-font-size-2xl)/[normal] text-pretty font-(--ui-font-weight-semi-bold)",
+    description: "text-(length:--ui-font-size-lg)/[normal] text-pretty"
   },
   variants: {
     orientation: {
@@ -6327,10 +6770,61 @@ const pageColumns = {
   base: "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
 };
 
+const pageFeature = {
+  slots: {
+    root: "relative rounded-sm",
+    wrapper: "",
+    leading: "inline-flex items-center justify-center",
+    leadingIcon: "size-5 shrink-0 text-(--ui-color-accent-main-primary)",
+    title: "text-(length:--ui-font-size-md) text-pretty font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)",
+    description: "text-(length:--ui-font-size-sm) text-pretty text-(--b24ui-typography-description-color)"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex items-start gap-2.5",
+        leading: "p-0.5"
+      },
+      vertical: {
+        leading: "mb-2.5"
+      }
+    },
+    to: {
+      true: {
+        root: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-accent-soft-element-blue) transition"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
+      }
+    }
+  }
+};
+
 const pageGrid = {
   base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
 };
 
+const pageHeader = {
+  slots: {
+    root: "relative border-b border-(--ui-color-divider-default) py-8",
+    container: "",
+    wrapper: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4",
+    headline: "mb-2.5 text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-primary) flex items-center gap-1.5",
+    title: "text-(length:--ui-font-size-3xl) sm:text-(length:--ui-font-size-4xl) text-pretty font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color)",
+    description: "text-(length:--ui-font-size-lg) text-pretty text-(--b24ui-typography-description-color)",
+    links: "flex flex-wrap items-center gap-1.5"
+  },
+  variants: {
+    title: {
+      true: {
+        description: "mt-4"
+      }
+    }
+  }
+};
+
 const pageLinks = {
   slots: {
     root: "flex flex-col gap-[12px]",
@@ -6385,6 +6879,82 @@ const pageList = {
   }
 };
 
+const pageSection = {
+  slots: {
+    root: "relative isolate",
+    container: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+    wrapper: "",
+    header: "",
+    leading: "flex items-center mb-6",
+    leadingIcon: "size-10 shrink-0 text-(--ui-color-accent-main-primary)",
+    headline: "mb-3",
+    title: "text-(length:--ui-font-size-3xl) sm:text-(length:--ui-font-size-4xl) lg:text-(length:--ui-font-size-5xl) text-pretty tracking-tight font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color)",
+    description: "text-(length:--ui-font-size-md) sm:text-(length:--ui-font-size-lg) text-(--b24ui-typography-description-color)",
+    body: "mt-8",
+    features: "grid",
+    footer: "mt-8",
+    links: "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty",
+        features: "gap-4"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center",
+        features: "sm:grid-cols-2 lg:grid-cols-3 gap-8"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "order-last"
+      }
+    },
+    headline: {
+      true: {
+        headline: "font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-primary) flex items-center gap-1.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    },
+    description: {
+      true: ""
+    },
+    body: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    orientation: "vertical",
+    title: true,
+    class: {
+      body: "mt-16"
+    }
+  }, {
+    orientation: "vertical",
+    description: true,
+    class: {
+      body: "mt-16"
+    }
+  }, {
+    orientation: "vertical",
+    body: true,
+    class: {
+      footer: "mt-16"
+    }
+  }]
+};
+
 const pagination = {
   slots: {
     root: "",
@@ -6476,7 +7046,10 @@ const pinInput = () => ({
         "border-b-(--ui-color-design-outline-stroke)"
       ].join(" ")
     },
-    highlight: { true: "ring ring-inset ring-(--b24ui-border-color)" }
+    highlight: { true: "ring ring-inset ring-(--b24ui-border-color)" },
+    fixed: {
+      false: ""
+    }
   },
   compoundVariants: [
     // region ring for focus and highlight ////
@@ -6541,6 +7114,33 @@ const pinInput = () => ({
           "ring-0"
         ].join(" ")
       }
+    },
+    // endregion ////
+    // region fixed ////
+    {
+      fixed: false,
+      size: "xss",
+      class: "md:text-(length:--ui-font-size-4xs)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "xs",
+      class: "md:text-(length:--ui-font-size-xs)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "sm",
+      class: "md:text-(length:--ui-font-size-sm)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "md",
+      class: "md:text-(length:--ui-font-size-lg)/[normal]"
+    },
+    {
+      fixed: false,
+      size: "lg",
+      class: "md:text-(length:--ui-font-size-lg)/[normal]"
     }
     // endregion ////
   ],
@@ -6557,11 +7157,13 @@ const popover = {
       "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
       "rounded-(--ui-border-radius-xl) will-change-[opacity]",
+      // 'ring ring-(--ui-color-divider-default)',
       "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       "origin-(--reka-popover-content-transform-origin)",
       "focus:outline-none pointer-events-auto"
     ].join(" "),
     arrow: "fill-(--ui-color-bg-content-primary)"
+    // stroke-(--ui-color-divider-default)
   }
 };
 
@@ -7252,6 +7854,7 @@ const select = () => {
           "bg-(--ui-color-bg-content-primary)",
           "shadow-(--popup-window-box-shadow)",
           "rounded-(--ui-border-radius-xl) will-change-[opacity]",
+          // 'ring ring-(--ui-color-divider-default)',
           "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
           "origin-(--reka-dropdown-menu-content-transform-origin)",
           "font-[family-name:var(--ui-font-family-primary)]",
@@ -7268,7 +7871,7 @@ const select = () => {
           // scrollbar-transparent
         ].join(" "),
         arrow: "fill-(--ui-color-bg-content-primary)",
-        // for content bottom|top::start -> ml-[12px]
+        // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
         group: "grid",
         empty: [
           "h-(--popup-window-delimiter-section-height)",
@@ -8714,10 +9317,6 @@ const textarea = {
       "collab": { base: "style-old-collab" },
       "ai": { base: "style-old-ai" }
     },
-    /**
-     * @memo now get from Badge
-     */
-    // tagColor: {},
     rounded: {
       true: "rounded-(--ui-border-radius-3xl)",
       false: "rounded-(--ui-border-radius-sm)"
@@ -8736,6 +9335,9 @@ const textarea = {
     leading: { true: "" },
     trailing: { true: "" },
     loading: { true: "" },
+    fixed: {
+      false: ""
+    },
     highlight: { true: "ring ring-inset ring-(--b24ui-border-color)" }
   },
   compoundVariants: [
@@ -9089,7 +9691,7 @@ const toast = {
 const toaster = {
   slots: {
     viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-[384px] z-[100] data-[expanded=true]:h-(--height) focus:outline-none mr-(--scrollbar-width)",
-    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]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 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"
+    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]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 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-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_300ms_ease-out] data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_300ms_ease-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
     position: {
@@ -9128,7 +9730,7 @@ const toaster = {
       ],
       class: {
         viewport: "top-4",
-        base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+        base: "top-0 data-[state=open]:animate-[toast-slide-in-from-top_200ms_ease-in-out]"
       }
     },
     {
@@ -9139,7 +9741,7 @@ const toaster = {
       ],
       class: {
         viewport: "bottom-4",
-        base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+        base: "bottom-0 data-[state=open]:animate-[toast-slide-in-from-bottom_200ms_ease-in-out]"
       }
     },
     {
@@ -9165,24 +9767,23 @@ const toaster = {
 const tooltip = {
   slots: {
     content: [
-      "dark",
+      "light",
       "flex flex-row items-center justify-between gap-[5px] will-change-[opacity]",
       "min-h-[37px]",
       "shadow-xl/20",
       "select-none",
       "motion-safe:data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      "p-[10px]",
-      "text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) font-[family-name:var(--ui-font-family-primary)]",
-      "bg-(--ui-color-bg-content-primary)/80",
-      "text-(--ui-color-design-plain-na-focused-content)",
-      "rounded-[calc(var(--ui-border-radius-xl)-2px)]",
-      // @memo see components/popup.css
-      // 'border border-(--popup-window-border)'
+      "p-[13px] ps-[26px]",
+      "text-(length:--ui-font-size-lg)/[normal] font-[family-name:var(--ui-font-family-system)]",
+      "bg-(--ui-color-bg-content-inapp)",
+      "text-(--ui-color-base-8)",
+      "rounded-[calc(var(--ui-border-radius-3xl)-2px)]",
+      "ring ring-(--ui-color-bg-content-inapp)",
       "origin-(--reka-tooltip-content-transform-origin)",
       "pointer-events-auto"
     ].join(" "),
-    arrow: "fill-(--ui-color-bg-content-primary)/80",
-    text: "text-pretty max-w-[200px] min-w-[100px]",
+    arrow: "fill-(--ui-color-bg-content-inapp) stroke-(--ui-color-bg-content-inapp)",
+    text: "text-pretty max-w-[344px] min-w-[100px]",
     // truncate
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-[''] not-first-of-type:before:me-0.5`,
     kbdsSize: "sm",
@@ -9708,9 +10309,17 @@ const theme = {
   contextMenu: contextMenu,
   countdown: countdown,
   dashboardGroup: dashboardGroup,
+  dashboardNavbar: dashboardNavbar,
+  dashboardPanel: dashboardPanel,
+  dashboardResizeHandle: dashboardResizeHandle,
   dashboardSearch: dashboardSearch,
   dashboardSearchButton: dashboardSearchButton,
+  dashboardSidebar: dashboardSidebar,
+  dashboardSidebarCollapse: dashboardSidebarCollapse,
+  dashboardSidebarToggle: dashboardSidebarToggle,
+  dashboardToolbar: dashboardToolbar,
   descriptionList: descriptionList,
+  drawer: drawer,
   dropdownMenu: dropdownMenu,
   editor: editor,
   editorDragHandle: editorDragHandle,
@@ -9722,8 +10331,11 @@ const theme = {
   error: error,
   fieldGroup: fieldGroup$1,
   fileUpload: fileUpload,
+  footer: footer,
+  footerColumns: footerColumns,
   form: form,
   formField: formField,
+  header: header,
   input: input,
   inputDate: inputDate,
   inputMenu: inputMenu,
@@ -9732,17 +10344,24 @@ const theme = {
   inputTime: inputTime,
   kbd: kbd$1,
   link: link,
+  main: main,
   modal: modal,
   navbar: navbar,
   navbarDivider: navbarDivider,
   navbarSection: navbarSection,
   navbarSpacer: navbarSpacer,
   navigationMenu: navigationMenu,
+  page: page,
+  pageAside: pageAside,
+  pageBody: pageBody,
   pageCard: pageCard,
   pageColumns: pageColumns,
+  pageFeature: pageFeature,
   pageGrid: pageGrid,
+  pageHeader: pageHeader,
   pageLinks: pageLinks,
   pageList: pageList,
+  pageSection: pageSection,
   pagination: pagination,
   pinInput: pinInput,
   popover: popover,
@@ -10165,7 +10784,7 @@ const card = {
       "transition-colors"
     ].join(" "),
     icon: "size-6 mb-2 block text-(--b24ui-icon)",
-    title: "text-(--b24ui-color) font-semibold",
+    title: "text-(--b24ui-color) font-(--ui-font-weight-semi-bold)",
     description: "text-[15px] text-(--b24ui-color) [&_p]:text-(--b24ui-color) *:first:mt-0 *:last:mb-0 *:my-1",
     externalIcon: [
       "size-4",
@@ -10724,24 +11343,12 @@ const contentSearch = {
       }
     },
     size: {
-      xss: {
-        input: "[&>input]:text-(length:--ui-font-size-4xs)/[normal]"
-      },
-      xs: {
-        input: "[&>input]:text-(length:--ui-font-size-xs)/[normal]"
-      },
-      sm: {
-        input: "[&>input]:text-(length:--ui-font-size-sm)/[normal]"
-      },
-      md: {
-        input: "[&>input]:text-(length:--ui-font-size-md)/[normal]"
-      },
-      lg: {
-        input: "[&>input]:text-(length:--ui-font-size-lg)/[normal]"
-      },
-      xl: {
-        input: "[&>input]:text-(length:--ui-font-size-2xl)/[normal]"
-      }
+      xss: {},
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
     }
   },
   defaultVariants: {
@@ -10860,6 +11467,7 @@ const contentToc = {
       "lg:hidden"
     ].join(" "),
     content: [
+      "relative",
       "motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out]",
       "motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out]",
       "overflow-hidden",