@bitrix24/b24ui-nuxt 2.1.11 → 2.1.15

package/dist/shared/{b24ui-nuxt.Dh5A-7HA.mjs → b24ui-nuxt.BYDi-4ID.mjs}

@@ -1,14 +1,14 @@
 import 'node:url';
 import { pascalCase, kebabCase, camelCase } from 'scule';
 import { genExport } from 'knitwork';
-import { hasNuxtModule, addTypeTemplate, addTemplate, updateTemplates, logger } from '@nuxt/kit';
+import { hasNuxtModule, addTypeTemplate, addTemplate, updateTemplates, getLayerDirectories, logger } from '@nuxt/kit';
 import { readFile } from 'node:fs/promises';
 import { join } from 'pathe';
 import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.1.11";
+const version = "2.1.15";
 
 function getDefaultConfig(theme) {
   return {
@@ -2512,10 +2512,10 @@ const container = {
 const contextMenu = {
   slots: {
     content: [
-      "light",
-      "bg-(--popup-window-background-color)",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
-      "rounded-(--popup-window-border-radius) will-change-[opacity]",
+      "rounded-(--ui-border-radius-xl) will-change-[opacity]",
       "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       "origin-(--reka-context-menu-content-transform-origin)",
       "font-[family-name:var(--ui-font-family-primary)]",
@@ -2526,7 +2526,7 @@ const contextMenu = {
     ].join(" "),
     viewport: [
       "relative",
-      "w-full max-h-[40vh] min-w-[120px]",
+      "w-full max-h-[40vh] min-w-[192px]",
       "scroll-py-1",
       "overflow-x-hidden overflow-y-auto scrollbar-thin"
       // scrollbar-transparent
@@ -2538,12 +2538,12 @@ const contextMenu = {
       "flex flex-row rtl:flex-row-reverse items-center",
       "select-none outline-none whitespace-nowrap",
       "text-start",
-      "text-(length:--popup-window-delimiter-font-size)",
-      "text-(--popup-window-delimiter-text-color)",
-      "font-(--popup-window-delimiter-font-weight)",
-      "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)"
+      "text-(length:--ui-size-sm)",
+      "text-(--b24ui-typography-legend-color)",
+      "font-(--ui-font-weight-normal)",
+      "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
     ].join(" "),
-    separator: "my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)",
+    separator: "my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)",
     item: [
       "group",
       "w-full h-[36px]",
@@ -2554,13 +2554,13 @@ const contextMenu = {
       "cursor-pointer",
       "data-disabled:cursor-not-allowed data-disabled:opacity-30",
       "text-start",
-      "text-(length:--menu-popup-item-font-size)",
-      "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-      "data-highlighted:text-(--menu-popup-item-color-hover)",
-      "data-[state=open]:text-(--menu-popup-item-color-hover)",
-      "hover:bg-(--menu-popup-item-bg-color-hover)",
-      "data-highlighted:bg-(--menu-popup-item-bg-color-hover)",
-      "data-[state=open]:bg-(--menu-popup-item-bg-color-hover)",
+      "text-(length:--ui-font-size-md)",
+      "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+      "data-highlighted:text-(--b24ui-typography-label-color)",
+      "data-[state=open]:text-(--b24ui-typography-label-color)",
+      "hover:bg-(--ui-color-divider-optical-1-alt)",
+      "data-highlighted:bg-(--ui-color-divider-optical-1-alt)",
+      "data-[state=open]:bg-(--ui-color-divider-optical-1-alt)",
       "transition-colors"
     ].join(" "),
     itemLeadingIcon: [
@@ -2854,10 +2854,10 @@ const descriptionList = {
 const dropdownMenu = {
   slots: {
     content: [
-      "light",
-      "bg-(--popup-window-background-color)",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
-      "rounded-(--popup-window-border-radius) will-change-[opacity]",
+      "rounded-(--ui-border-radius-xl) will-change-[opacity]",
       "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)]",
@@ -2868,12 +2868,11 @@ const dropdownMenu = {
     ].join(" "),
     viewport: [
       "relative",
-      "w-full max-h-[40vh] min-w-[120px]",
-      //
+      "w-full max-h-[40vh] min-w-[192px]",
       "overflow-x-hidden overflow-y-auto scrollbar-thin"
       // scrollbar-transparent
     ].join(" "),
-    arrow: "fill-(--popup-window-background-color)",
+    arrow: "fill-(--ui-color-bg-content-primary)",
     // for content bottom|top::start -> ml-[12px]
     group: "grid",
     // p-1 isolate
@@ -2884,12 +2883,12 @@ const dropdownMenu = {
       "flex flex-row rtl:flex-row-reverse items-center",
       "select-none outline-none whitespace-nowrap",
       "text-start",
-      "text-(length:--popup-window-delimiter-font-size)",
-      "text-(--popup-window-delimiter-text-color)",
-      "font-(--popup-window-delimiter-font-weight)",
-      "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)"
+      "text-(length:--ui-size-sm)",
+      "text-(--b24ui-typography-legend-color)",
+      "font-(--ui-font-weight-normal)",
+      "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
     ].join(" "),
-    separator: "my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)",
+    separator: "my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)",
     item: [
       "group",
       "w-full h-[36px]",
@@ -2901,13 +2900,13 @@ const dropdownMenu = {
       "cursor-pointer",
       "data-disabled:cursor-not-allowed data-disabled:opacity-30",
       "text-start",
-      "text-(length:--menu-popup-item-font-size)",
-      "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-      "data-highlighted:text-(--menu-popup-item-color-hover)",
-      "data-[state=open]:text-(--menu-popup-item-color-hover)",
-      "hover:bg-(--menu-popup-item-bg-color-hover)",
-      "data-highlighted:bg-(--menu-popup-item-bg-color-hover)",
-      "data-[state=open]:bg-(--menu-popup-item-bg-color-hover)",
+      "text-(length:--ui-font-size-md)",
+      "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+      "data-highlighted:text-(--b24ui-typography-label-color)",
+      "data-[state=open]:text-(--b24ui-typography-label-color)",
+      "hover:bg-(--ui-color-divider-optical-1-alt)",
+      "data-highlighted:bg-(--ui-color-divider-optical-1-alt)",
+      "data-[state=open]:bg-(--ui-color-divider-optical-1-alt)",
       "transition-colors"
     ].join(" "),
     itemLeadingIcon: [
@@ -3035,6 +3034,182 @@ const dropdownMenu = {
   defaultVariants: {}
 };
 
+const editor = {
+  slots: {
+    root: "",
+    content: "relative size-full flex-1",
+    base: [
+      "text-(--b24ui-typography-label-color)",
+      "w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-(--ui-color-design-selection-bg)",
+      // Placeholder
+      "[&_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4).is-empty]:before:text-(--b24ui-typography-description-color) [&_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none",
+      "[&_li_.is-empty]:before:content-none",
+      // Paragraph
+      "[&_p]:leading-7",
+      // Links
+      "[&_a]:text-(--ui-color-accent-main-primary) [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-(--ui-color-accent-main-primary) [&_a]:font-(--ui-font-weight-medium)",
+      "[&_a]:transition-colors",
+      // Mentions
+      "[&_.mention]:text-(--ui-color-accent-main-primary) [&_.mention]:font-(--ui-font-weight-medium)",
+      // Headings - shared styles
+      "[&_:is(h1,h2,h3,h4)]:text-(--b24ui-typography-label-color) [&_:is(h1,h2,h3,h4)]:font-(--ui-font-weight-bold)",
+      // Headings - unique styles
+      "[&_h1]:text-3xl",
+      "[&_h2]:text-2xl",
+      "[&_h3]:text-xl",
+      "[&_h4]:text-lg",
+      // Code inside headings
+      "[&_:is(h1,h2,h3,h4)>code]:border-dashed [&_:is(h1,h2,h3,h4)>code]:font-(--ui-font-weight-bold)",
+      "[&_h2>code]:text-xl/6",
+      "[&_h3>code]:text-lg/5",
+      // Blockquote & HR
+      "[&_blockquote]:border-s-4 [&_blockquote]:border-(--ui-color-accent-soft-element-blue) [&_blockquote]:ps-4 [&_blockquote]:italic",
+      "[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2",
+      "[&_hr]:border-t [&_hr]:border-(--ui-color-divider-default)",
+      // Code blocks
+      "[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-(--ui-color-design-tinted-na-stroke) [&_pre]:bg-(--ui-color-design-tinted-na-bg) [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto",
+      "[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent",
+      // Inline code
+      "[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-[family-name:var(--ui-font-family-system-mono)] [&_code]:font-(--ui-font-weight-medium) [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-(--ui-color-design-tinted-na-stroke) [&_code]:text-(--b24ui-typography-label-color) [&_code]:bg-(--ui-color-design-tinted-na-bg)",
+      // Lists
+      "[&_:is(ul,ol)]:ps-6",
+      "[&_ul]:list-disc [&_ul]:marker:text-(--ui-color-accent-soft-element-blue)",
+      "[&_ol]:list-decimal [&_ol]:marker:text-(--b24ui-typography-label-color)",
+      "[&_li]:my-1.5 [&_li]:ps-1.5",
+      // Images
+      "[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-(--ui-color-accent-main-primary)",
+      // Selected nodes
+      "[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-(--ui-color-design-selection-bg)"
+    ].join(" ")
+  }
+};
+
+const editorDragHandle = {
+  slots: {
+    root: "hidden sm:flex items-center justify-center transition-all duration-200 ease-out",
+    handle: "cursor-grab px-1"
+  }
+};
+
+const editorSuggestionMenu = {
+  slots: {
+    content: [
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
+      "shadow-(--popup-window-box-shadow)",
+      "rounded-(--ui-border-radius-xl) will-change-[opacity]",
+      "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)]",
+      "relative",
+      "isolate",
+      "px-0 py-(--menu-popup-padding)",
+      "pointer-events-auto"
+    ].join(" "),
+    viewport: [
+      "relative",
+      "w-full max-h-[40vh] min-w-[192px] max-w-[240px]",
+      "overflow-x-hidden overflow-y-auto scrollbar-thin"
+      // scrollbar-transparent
+    ].join(" "),
+    group: "grid",
+    // p-1 isolate
+    label: [
+      "w-full h-(--popup-window-delimiter-section-height)",
+      "px-[18px] mt-(--menu-item-block-stack-space)",
+      "flex flex-row rtl:flex-row-reverse items-center",
+      "select-none outline-none whitespace-nowrap",
+      "text-start",
+      "text-(length:--ui-size-sm)",
+      "text-(--b24ui-typography-legend-color)",
+      "font-(--ui-font-weight-normal)",
+      "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
+    ].join(" "),
+    item: [
+      "group",
+      "w-full h-[36px]",
+      // min-w-[195px]
+      "px-[18px] mt-(--menu-item-block-stack-space)",
+      "relative",
+      "flex flex-row rtl:flex-row-reverse items-center",
+      "select-none outline-none whitespace-nowrap",
+      "cursor-pointer",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-30",
+      "text-start",
+      "text-(length:--ui-font-size-md)",
+      "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+      "data-highlighted:text-(--b24ui-typography-label-color)",
+      "data-[state=open]:text-(--b24ui-typography-label-color)",
+      "hover:bg-(--ui-color-divider-optical-1-alt)",
+      "data-highlighted:bg-(--ui-color-divider-optical-1-alt)",
+      "data-[state=open]:bg-(--ui-color-divider-optical-1-alt)",
+      "transition-colors"
+    ].join(" "),
+    itemLeadingIcon: [
+      "shrink-0",
+      "size-[18px]",
+      "text-(--ui-color-design-plain-content-icon-secondary)",
+      "group-data-highlighted:text-(--ui-color-accent-main-primary)",
+      "group-data-[state=open]:text-(--ui-color-accent-main-primary)",
+      "group-data-[state=checked]:text-(--ui-color-accent-main-primary)",
+      "transition-colors"
+    ].join(" "),
+    itemLeadingAvatar: "shrink-0 size-[16px] me-[8px]",
+    // @memo 18-2px
+    itemLeadingAvatarSize: "2xs",
+    // @memo this wrong
+    itemWrapper: "ms-[4px] flex-1 flex flex-col text-start min-w-0",
+    itemLabel: [
+      "max-w-[240px] truncate -mt-px",
+      "group-data-[state=checked]:text-(--ui-color-accent-main-primary)"
+    ].join(" "),
+    itemDescription: "max-w-[240px] truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)",
+    itemLabelExternalIcon: "inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)"
+  },
+  variants: {
+    active: {
+      true: {
+        item: [
+          "text-(--ui-color-accent-main-primary)",
+          "hover:text-(--ui-color-accent-main-primary)"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-(--ui-color-accent-main-primary)",
+          "hover:text-(--ui-color-accent-main-primary)",
+          "group-data-[state=open]:text-(--ui-color-accent-main-primary)"
+        ].join(" ")
+      },
+      false: {}
+    }
+  }
+};
+
+const editorEmojiMenu = () => editorSuggestionMenu;
+
+const editorMentionMenu = () => editorSuggestionMenu;
+
+const editorToolbar = {
+  slots: {
+    root: "focus:outline-none",
+    base: "flex items-stretch gap-1.5",
+    group: "flex items-center gap-0.5",
+    separator: "w-px self-stretch bg-(--ui-color-design-tinted-na-stroke)"
+  },
+  variants: {
+    layout: {
+      bubble: {
+        base: "backdrop-blur-3xl bg-(--ui-color-bg-content-primary) border border-(--ui-color-divider-default) rounded-md p-1"
+      },
+      floating: {
+        base: "backdrop-blur-3xl bg-(--ui-color-bg-content-primary) border border-(--ui-color-divider-default) rounded-md p-1"
+      },
+      fixed: {
+        base: ""
+      }
+    }
+  }
+};
+
 const empty = {
   slots: {
     root: [
@@ -3896,11 +4071,11 @@ const inputMenu = () => {
         "disabled:opacity-30"
       ].join(" "),
       content: [
-        "light",
+        "base-mode",
         // w-(--reka-combobox-trigger-width)
-        "bg-(--popup-window-background-color)",
+        "bg-(--ui-color-bg-content-primary)",
         "shadow-(--popup-window-box-shadow)",
-        "rounded-(--popup-window-border-radius) will-change-[opacity]",
+        "rounded-(--ui-border-radius-xl) will-change-[opacity]",
         "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)]",
@@ -3916,7 +4091,7 @@ const inputMenu = () => {
         "overflow-x-hidden overflow-y-auto scrollbar-thin"
         // scrollbar-transparent
       ].join(" "),
-      arrow: "fill-(--popup-window-background-color)",
+      arrow: "fill-(--ui-color-bg-content-primary)",
       // for content bottom|top::start -> ml-[12px]
       group: "grid",
       empty: [
@@ -3925,9 +4100,9 @@ const inputMenu = () => {
         "py-[8px]",
         "select-none outline-none whitespace-nowrap",
         "text-center",
-        "text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg)",
-        "text-(--popup-window-delimiter-text-color)",
-        "font-(--popup-window-delimiter-font-weight)"
+        "text-(length:--ui-size-sm)/(--ui-font-line-height-lg)",
+        "text-(--b24ui-typography-legend-color)",
+        "font-(--ui-font-weight-normal)"
       ].join(" "),
       label: [
         "w-full min-w-[195px] h-(--popup-window-delimiter-section-height)",
@@ -3935,12 +4110,12 @@ const inputMenu = () => {
         "flex flex-row rtl:flex-row-reverse items-center",
         "select-none outline-none whitespace-nowrap",
         "text-start",
-        "text-(length:--popup-window-delimiter-font-size)",
-        "text-(--popup-window-delimiter-text-color)",
-        "font-(--popup-window-delimiter-font-weight)",
-        "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)"
+        "text-(length:--ui-size-sm)",
+        "text-(--b24ui-typography-legend-color)",
+        "font-(--ui-font-weight-normal)",
+        "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
       ].join(" "),
-      separator: "my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)",
+      separator: "my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)",
       item: [
         "group",
         "w-full min-w-[195px] h-[36px]",
@@ -3952,14 +4127,14 @@ const inputMenu = () => {
         "data-disabled:cursor-not-allowed data-disabled:opacity-30",
         "data-disabled:select-none",
         "text-start",
-        "text-(length:--menu-popup-item-font-size)",
-        "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-        "data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover)",
-        "data-[state=open]:text-(--menu-popup-item-color-hover)",
-        "data-[state=checked]:text-(--menu-popup-item-color-hover)",
-        "hover:bg-(--menu-popup-item-bg-color-hover)",
-        "data-highlighted:bg-(--menu-popup-item-bg-color-hover)",
-        "data-[state=open]:bg-(--menu-popup-item-bg-color-hover)",
+        "text-(length:--ui-font-size-md)",
+        "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+        "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
+        "data-[state=open]:text-(--b24ui-typography-label-color)",
+        "data-[state=checked]:text-(--b24ui-typography-label-color)",
+        "hover:bg-(--ui-color-divider-optical-1-alt)",
+        "data-highlighted:bg-(--ui-color-divider-optical-1-alt)",
+        "data-[state=open]:bg-(--ui-color-divider-optical-1-alt)",
         "transition-colors"
       ].join(" "),
       itemLeadingIcon: [
@@ -4024,9 +4199,9 @@ const inputMenu = () => {
           group: "",
           // p-0 isolate -m-px
           item: [
-            "text-(--menu-popup-item-color)",
-            "data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover)",
-            "data-[state=checked]:text-(--menu-popup-item-color-hover)"
+            "text-(--b24ui-typography-legend-color)",
+            "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
+            "data-[state=checked]:text-(--b24ui-typography-label-color)"
           ].join(" "),
           itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
           itemLeadingIcon: [
@@ -5003,8 +5178,8 @@ const modal = {
   slots: {
     overlay: "fixed inset-0",
     content: [
-      "light",
-      "bg-(--popup-window-background-color)",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
       "flex flex-col gap-[20px]",
       "focus:outline-none",
       "p-[24px] pt-[20px]"
@@ -5053,7 +5228,7 @@ const modal = {
           // // 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
           "w-[calc(100vw-2rem)] max-w-[32rem]",
           // // 'max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]',
-          "rounded-[calc(var(--popup-window-border-radius)-2px)] shadow-lg"
+          "rounded-[calc(var(--ui-border-radius-xl)-2px)] shadow-lg"
           // @memo see components/popup.css
           // 'ring ring-(--popup-window-border)'
         ].join(" "),
@@ -5185,15 +5360,14 @@ const navigationMenu = {
     popoverWrapper: "px-0 py-(--menu-popup-padding)",
     viewportWrapper: "absolute top-[53px] left-0 flex w-full",
     viewport: [
-      "light",
       "relative overflow-hidden",
       "w-full",
-      "bg-(--popup-window-background-color)",
-      // 'bg-(--ui-color-base-white-fixed)/94',
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
       "h-(--reka-navigation-menu-viewport-height)",
       "w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
-      "rounded-(--popup-window-border-radius) will-change-[opacity]",
+      "rounded-(--ui-border-radius-xl) will-change-[opacity]",
       "[&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))]",
       "transition-[width,height] duration-200 origin-[top_center]",
       // left
@@ -5225,9 +5399,9 @@ const navigationMenu = {
           "min-w-[195px]",
           "whitespace-nowrap",
           "font-[family-name:var(--ui-font-family-primary)]",
-          "text-(length:--menu-popup-item-font-size)",
-          "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-          "hover:bg-(--menu-popup-item-bg-color-hover)"
+          "text-(length:--ui-font-size-md)",
+          "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+          "hover:bg-(--ui-color-divider-optical-1-alt)"
         ].join(" "),
         childLinkLabel: "",
         content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-transparent"
@@ -5259,9 +5433,9 @@ const navigationMenu = {
           "min-w-[195px]",
           "whitespace-nowrap",
           "font-[family-name:var(--ui-font-family-primary)]",
-          "text-(length:--menu-popup-item-font-size)",
-          "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-          "hover:bg-(--menu-popup-item-bg-color-hover)"
+          "text-(length:--ui-font-size-md)",
+          "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+          "hover:bg-(--ui-color-divider-optical-1-alt)"
         ].join(" "),
         // @memo 10 + 15 = 25 != 18
         childLabel: [
@@ -5270,10 +5444,10 @@ const navigationMenu = {
           "flex flex-row rtl:flex-row-reverse items-center",
           "select-none outline-none whitespace-nowrap",
           "text-start",
-          "text-(length:--popup-window-delimiter-font-size)",
-          "text-(--popup-window-delimiter-text-color)",
-          "font-(--popup-window-delimiter-font-weight)",
-          "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)"
+          "text-(length:--ui-size-sm)",
+          "text-(--b24ui-typography-legend-color)",
+          "font-(--ui-font-weight-normal)",
+          "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
         ].join(" ")
       }
     },
@@ -5399,7 +5573,7 @@ const pageCard = {
       vertical: { container: "" }
     },
     reverse: {
-      true: { wrapper: "lg:order-last" }
+      true: { wrapper: "order-last" }
     },
     variant: {
       "filled": {
@@ -5675,7 +5849,7 @@ const pageCard = {
     },
     to: {
       true: {
-        root: "transition"
+        root: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-design-filled-stroke) transition"
       }
     },
     title: {
@@ -5911,15 +6085,9 @@ const pageCard = {
       highlightColor: "air-primary-warning",
       highlight: true,
       class: { root: "ring-(--ui-color-design-filled-warning-stroke)" }
-    },
+    }
     // endregion ////
     // region to ////
-    {
-      to: true,
-      class: {
-        root: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-design-filled-stroke)"
-      }
-    }
     // endregion ////
   ],
   defaultVariants: {
@@ -6158,15 +6326,15 @@ const pinInput = () => ({
 const popover = {
   slots: {
     content: [
-      "light",
-      "bg-(--popup-window-background-color)",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
       "shadow-(--popup-window-box-shadow)",
-      "rounded-(--popup-window-border-radius) will-change-[opacity]",
+      "rounded-(--ui-border-radius-xl) will-change-[opacity]",
       "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-(--popup-window-background-color)"
+    arrow: "fill-(--ui-color-bg-content-primary)"
   }
 };
 
@@ -6830,11 +6998,11 @@ const select = () => {
         value: "truncate pointer-events-none",
         placeholder: "truncate text-(--ui-color-design-plain-na-content-secondary)",
         content: [
-          "light",
           // w-(--reka-combobox-trigger-width)
-          "bg-(--popup-window-background-color)",
+          "base-mode",
+          "bg-(--ui-color-bg-content-primary)",
           "shadow-(--popup-window-box-shadow)",
-          "rounded-(--popup-window-border-radius) will-change-[opacity]",
+          "rounded-(--ui-border-radius-xl) will-change-[opacity]",
           "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)]",
@@ -6850,7 +7018,7 @@ const select = () => {
           "overflow-x-hidden overflow-y-auto scrollbar-thin"
           // scrollbar-transparent
         ].join(" "),
-        arrow: "fill-(--popup-window-background-color)",
+        arrow: "fill-(--ui-color-bg-content-primary)",
         // for content bottom|top::start -> ml-[12px]
         group: "grid",
         empty: [
@@ -6860,8 +7028,8 @@ const select = () => {
           "select-none outline-none whitespace-nowrap",
           "text-center",
           "text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg)",
-          "text-(--popup-window-delimiter-text-color)",
-          "font-(--popup-window-delimiter-font-weight)"
+          "text-(--b24ui-typography-legend-color)",
+          "font-(--ui-font-weight-normal)"
         ].join(" "),
         label: [
           "w-full min-w-[195px] h-(--popup-window-delimiter-section-height)",
@@ -6869,12 +7037,12 @@ const select = () => {
           "flex flex-row rtl:flex-row-reverse items-center",
           "select-none outline-none whitespace-nowrap",
           "text-start",
-          "text-(length:--popup-window-delimiter-font-size)",
-          "text-(--popup-window-delimiter-text-color)",
-          "font-(--popup-window-delimiter-font-weight)",
-          "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)"
+          "text-(length:--ui-size-sm)",
+          "text-(--b24ui-typography-legend-color)",
+          "font-(--ui-font-weight-normal)",
+          "after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)"
         ].join(" "),
-        separator: "my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)",
+        separator: "my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)",
         item: [
           "group",
           "w-full min-w-[195px] h-[36px]",
@@ -6885,14 +7053,14 @@ const select = () => {
           "cursor-pointer",
           "data-disabled:cursor-not-allowed data-disabled:opacity-30",
           "text-start",
-          "text-(length:--menu-popup-item-font-size)",
-          "text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover)",
-          "data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover)",
-          "data-[state=open]:text-(--menu-popup-item-color-hover)",
-          "data-[state=checked]:text-(--menu-popup-item-color-hover)",
-          "hover:bg-(--menu-popup-item-bg-color-hover)",
-          "data-highlighted:bg-(--menu-popup-item-bg-color-hover)",
-          "data-[state=open]:bg-(--menu-popup-item-bg-color-hover)",
+          "text-(length:--ui-font-size-md)",
+          "text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color)",
+          "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
+          "data-[state=open]:text-(--b24ui-typography-label-color)",
+          "data-[state=checked]:text-(--b24ui-typography-label-color)",
+          "hover:bg-(--ui-color-divider-optical-1-alt)",
+          "data-highlighted:bg-(--ui-color-divider-optical-1-alt)",
+          "data-[state=open]:bg-(--ui-color-divider-optical-1-alt)",
           "transition-colors"
         ].join(" "),
         itemLeadingIcon: [
@@ -7066,7 +7234,7 @@ function replaceFocus$1(str) {
 const selectMenu = () => {
   return defuFn({
     slots: {
-      input: "border-b border-(--popup-window-delimiter-bg-color)",
+      input: "border-b border-(--ui-color-divider-vibrant-default)",
       focusScope: "flex flex-col min-h-0",
       viewport: [
         "relative",
@@ -7096,9 +7264,9 @@ const selectMenu = () => {
           group: "",
           // p-0 isolate -m-px
           item: [
-            "text-(--menu-popup-item-color)",
-            "data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover)",
-            "data-[state=checked]:text-(--menu-popup-item-color-hover)"
+            "text-(--b24ui-typography-legend-color)",
+            "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
+            "data-[state=checked]:text-(--b24ui-typography-label-color)"
           ].join(" "),
           itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
           itemLeadingIcon: [
@@ -7286,8 +7454,7 @@ const slideover = {
     ].join(" "),
     footer: [
       "absolute inset-x-0 bottom-0",
-      "light",
-      "bg-(--popup-window-background-color)",
+      "bg-(--ui-color-bg-content-primary)",
       // --ui-color-bg-content-primary
       "flex items-center justify-center gap-3",
       "border-t border-t-1 border-t-(--ui-color-divider-less)",
@@ -8641,7 +8808,7 @@ const tooltip = {
       "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(--popup-window-border-radius)-2px)]",
+      "rounded-[calc(var(--ui-border-radius-xl)-2px)]",
       // @memo see components/popup.css
       // 'border border-(--popup-window-border)'
       "origin-(--reka-tooltip-content-transform-origin)",
@@ -9076,13 +9243,15 @@ const user = {
       true: {
         name: [
           "text-(--b24ui-typography-label-color) peer-hover:text-(--ui-color-design-selection-content)",
+          "peer-focus-visible:text-(--ui-color-design-selection-content)",
           "transition-colors"
         ].join(" "),
         description: [
           "peer-hover:text-(--ui-color-design-selection-content)",
+          "peer-focus-visible:text-(--ui-color-design-selection-content)",
           "transition-colors"
         ].join(" "),
-        avatar: "transform transition-transform duration-200 group-hover/user:scale-115"
+        avatar: "transform transition-transform duration-200 group-hover/user:scale-115 group-has-focus-visible/user:scale-115"
       },
       false: {
         name: "text-(--b24ui-typography-label-color)",
@@ -9177,6 +9346,12 @@ const theme = {
   dashboardSearchButton: dashboardSearchButton,
   descriptionList: descriptionList,
   dropdownMenu: dropdownMenu,
+  editor: editor,
+  editorDragHandle: editorDragHandle,
+  editorEmojiMenu: editorEmojiMenu,
+  editorMentionMenu: editorMentionMenu,
+  editorSuggestionMenu: editorSuggestionMenu,
+  editorToolbar: editorToolbar,
   empty: empty,
   error: error,
   fieldGroup: fieldGroup$1,
@@ -9473,11 +9648,13 @@ const a = {
       "hover:underline underline-offset-2",
       "hover:text-(--ui-color-accent-main-primary-alt) dark:hover:text-(--ui-color-blue-50)",
       "focus-visible:outline-info-text",
+      "focus-visible:has-[>code]:outline-0",
       "transition-colors [&>code]:transition-colors",
       // '[&>code]:ring-dashed',
       "hover:[&>code]:text-(--ui-color-accent-main-primary-alt-2)",
       "hover:[&>code]:bg-(--ui-color-design-selection-bg)",
-      "hover:[&>code]:ring-(--ui-color-design-selection-stroke)"
+      "hover:[&>code]:ring-(--ui-color-design-selection-stroke)",
+      "focus-visible:[&>code]:ring-(--ui-color-design-selection-stroke) focus-visible:[&>code]:text-(--ui-color-accent-main-primary-alt-2)"
     ].join(" ")
   }
 };
@@ -9591,7 +9768,7 @@ const callout = {
     {
       to: true,
       class: {
-        base: "hover:border-(--b24ui-border-color-hover)",
+        base: "hover:border-(--b24ui-border-color-hover) has-focus-visible:border-(--b24ui-border-color-hover)",
         externalIcon: "group-hover:text-(--b24ui-icon)"
       }
     },
@@ -9660,7 +9837,7 @@ const card = {
     {
       to: true,
       class: {
-        base: "hover:bg-(--ui-color-bg-content-secondary) hover:border-(--b24ui-border-color-hover)",
+        base: "hover:bg-(--ui-color-bg-content-secondary) hover:border-(--b24ui-border-color-hover) has-focus-visible:border-(--b24ui-border-color-hover)",
         title: "group-hover:text-(--b24ui-border-color)",
         description: "group-hover:text-(--b24ui-border-color) [&_p]:group-hover:text-(--b24ui-border-color)",
         externalIcon: "group-hover:text-(--b24ui-icon)"
@@ -10393,14 +10570,27 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   }
   writeThemeTemplate(theme);
   async function generateSources() {
-    let sources = "";
-    if (!!nuxt && !!resolve && options.experimental?.componentDetection) {
-      const dirs = [.../* @__PURE__ */ new Set([
-        nuxt.options.rootDir,
-        ...nuxt.options._layers?.map((layer) => layer.config.rootDir).filter(Boolean) || []
-      ])];
+    if (!nuxt) {
+      return '@source "./b24ui";';
+    }
+    const sources = [];
+    const layers = getLayerDirectories(nuxt).map((layer) => layer.app);
+    for (const layer of layers) {
+      sources.push(`@source "${layer}**/*";`);
+    }
+    const inlineConfigs = [
+      nuxt.options.app?.rootAttrs?.class,
+      nuxt.options.app?.head?.htmlAttrs?.class,
+      nuxt.options.app?.head?.bodyAttrs?.class
+    ];
+    for (const value of inlineConfigs) {
+      if (value && typeof value === "string") {
+        sources.push(`@source inline(${JSON.stringify(value)});`);
+      }
+    }
+    if (resolve && options.experimental?.componentDetection) {
       const detectedComponents = await detectUsedComponents(
-        dirs,
+        layers,
         "B24",
         resolve("./runtime/components"),
         Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : void 0
@@ -10417,28 +10607,29 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
           logger.success(`Bitrix24 UI detected ${detectedComponents.size} components in use (including dependencies)`);
         }
         previousDetectedComponents = detectedComponents;
-        const sourcesList = [];
         if (hasProse) {
-          sourcesList.push('@source "./b24ui/prose";');
+          sources.push('@source "./b24ui/prose";');
         }
         for (const component of detectedComponents) {
           const kebabComponent = kebabCase(component);
           const camelComponent = camelCase(component);
           if (hasContent && themeContent[camelComponent]) {
-            sourcesList.push(`@source "./b24ui/content/${kebabComponent}.ts";`);
+            sources.push(`@source "./b24ui/content/${kebabComponent}.ts";`);
           } else if (theme[camelComponent]) {
-            sourcesList.push(`@source "./b24ui/${kebabComponent}.ts";`);
+            sources.push(`@source "./b24ui/${kebabComponent}.ts";`);
           }
         }
-        sources = sourcesList.join("\n");
       } else {
         if (!previousDetectedComponents || previousDetectedComponents.size > 0) {
           logger.info("Bitrix24 UI detected no components in use, including all components");
         }
         previousDetectedComponents = /* @__PURE__ */ new Set();
+        sources.push('@source "./b24ui";');
       }
+    } else {
+      sources.push('@source "./b24ui";');
     }
-    return sources || '@source "./b24ui";';
+    return sources.join("\n");
   }
   templates.push({
     filename: "b24ui.css",