@bitrix24/b24ui-nuxt 2.1.12 → 2.1.15

package/dist/shared/{b24ui-nuxt.C8MyFqPm.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.12";
+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: [
@@ -3037,12 +3036,13 @@ const dropdownMenu = {
 
 const editor = {
   slots: {
-    root: "light",
+    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-label-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",
+      "[&_: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",
@@ -3094,10 +3094,10 @@ const editorDragHandle = {
 const editorSuggestionMenu = {
   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)]",
@@ -3108,7 +3108,7 @@ const editorSuggestionMenu = {
     ].join(" "),
     viewport: [
       "relative",
-      "w-full max-h-[40vh] min-w-[120px] max-w-[192px]",
+      "w-full max-h-[40vh] min-w-[192px] max-w-[240px]",
       "overflow-x-hidden overflow-y-auto scrollbar-thin"
       // scrollbar-transparent
     ].join(" "),
@@ -3116,15 +3116,14 @@ const editorSuggestionMenu = {
     // p-1 isolate
     label: [
       "w-full h-(--popup-window-delimiter-section-height)",
-      // min-w-[195px]
       "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:--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(" "),
     item: [
       "group",
@@ -3137,13 +3136,13 @@ const editorSuggestionMenu = {
       "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: [
@@ -3199,10 +3198,10 @@ const editorToolbar = {
   variants: {
     layout: {
       bubble: {
-        base: "bg-(--popup-window-background-color) border border-(--ui-color-divider-default) rounded-md p-1"
+        base: "backdrop-blur-3xl bg-(--ui-color-bg-content-primary) border border-(--ui-color-divider-default) rounded-md p-1"
       },
       floating: {
-        base: "bg-(--popup-window-background-color) border border-(--ui-color-divider-default) rounded-md p-1"
+        base: "backdrop-blur-3xl bg-(--ui-color-bg-content-primary) border border-(--ui-color-divider-default) rounded-md p-1"
       },
       fixed: {
         base: ""
@@ -4072,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)]",
@@ -4092,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: [
@@ -4101,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)",
@@ -4111,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]",
@@ -4128,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: [
@@ -4200,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: [
@@ -5179,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]"
@@ -5229,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(" "),
@@ -5361,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
@@ -5401,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"
@@ -5435,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: [
@@ -5446,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(" ")
       }
     },
@@ -5575,7 +5573,7 @@ const pageCard = {
       vertical: { container: "" }
     },
     reverse: {
-      true: { wrapper: "lg:order-last" }
+      true: { wrapper: "order-last" }
     },
     variant: {
       "filled": {
@@ -5851,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: {
@@ -6087,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: {
@@ -6334,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)"
   }
 };
 
@@ -7006,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)]",
@@ -7026,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: [
@@ -7036,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)",
@@ -7045,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]",
@@ -7061,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: [
@@ -7242,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",
@@ -7272,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: [
@@ -7462,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)",
@@ -8817,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)",
@@ -9252,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)",
@@ -9655,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(" ")
   }
 };
@@ -9773,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)"
       }
     },
@@ -9842,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)"
@@ -10575,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
@@ -10599,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",