@bitrix24/b24ui-nuxt 2.4.1 → 2.5.1

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

@@ -8,7 +8,7 @@ import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.4.1";
+const version = "2.5.1";
 
 function getDefaultConfig(theme) {
   return {
@@ -2425,11 +2425,11 @@ const commandPalette = {
     root: [
       "flex flex-col",
       "min-h-0 min-w-0",
-      "divide-y divide-(--ui-color-design-tinted-na-stroke)"
+      "divide-y divide-(--ui-color-divider-default)"
     ].join(" "),
     input: "",
     close: "",
-    back: "p-0",
+    back: "p-0 -ms-1.5 me-1",
     content: "relative overflow-hidden flex flex-col",
     footer: "p-1",
     viewport: [
@@ -2489,7 +2489,6 @@ const commandPalette = {
       },
       false: {
         viewport: ""
-        // divide-y divide-(--ui-color-design-tinted-na-stroke)
       }
     },
     size: {
@@ -2854,12 +2853,12 @@ const dashboardGroup = {
 
 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",
+    root: "h-(--b24ui-header-height) shrink-0 flex items-center justify-between ps-2 pe-4 lg:ps-4 lg:pe-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",
+    title: "flex items-center gap-1.5 text-[length:25px] bitrix-mobile:text-[length:18px] font-medium text-(--ui-color-base-1) truncate",
     center: "hidden lg:flex",
-    right: "flex items-center shrink-0 gap-1.5",
+    right: "flex items-center shrink-0 gap-3",
     toggle: ""
   },
   variants: {
@@ -2876,8 +2875,8 @@ const dashboardNavbar = {
 
 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",
+    root: "relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-e-0 lg:not-last:border-(--ui-color-divider-default) shrink-0",
+    body: "flex flex-col gap-4 flex-1 overflow-y-auto sm:p-4 sm:pt-0 scrollbar-thin",
     handle: ""
   },
   variants: {
@@ -2941,10 +2940,18 @@ 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",
+    root: [
+      "relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0",
+      "backdrop-blur-sm bg-(--ui-color-bg-content-primary)/20 light:bg-transparent dark:bg-(--ui-color-bg-content-primary)/70",
+      "light:bg-transparent light:[--leftmenu-group-stroke:var(--ui-color-base-30)]"
+    ].join(" "),
+    header: "h-(--b24ui-header-height) shrink-0 flex items-center gap-1.5 ps-4 pe-4",
+    body: "flex flex-col gap-4 flex-1 overflow-y-auto py-2 ps-4 pe-4 md:pe-2 scrollbar-thin scrollbar-transparent",
+    footer: [
+      "shrink-0 flex items-center gap-1.5 py-2 ps-4 pe-4",
+      "lg:border-t lg:border-(--ui-color-divider-default)",
+      "light:lg:border-(--ui-color-base-30)"
+    ].join(" "),
     toggle: "",
     handle: "",
     content: "lg:hidden",
@@ -2960,7 +2967,7 @@ const dashboardSidebar = {
     },
     side: {
       left: {
-        root: "border-e border-(--ui-color-divider-default)"
+        root: "border-e border-e-0 border-(--ui-color-divider-accent)"
       },
       right: {
         root: ""
@@ -2999,7 +3006,7 @@ const dashboardSidebarToggle = {
 
 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]",
+    root: "shrink-0 flex items-center justify-between border-0 px-4 gap-1.5 overflow-x-auto min-h-[49px]",
     left: "flex items-center gap-1.5",
     right: "flex items-center gap-1.5"
   }
@@ -3254,62 +3261,70 @@ 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)]",
       "relative",
       "isolate",
-      "px-0 py-(--menu-popup-padding)",
+      "px-0 py-(--menu-popup-padding) bitrix-mobile:py-0!",
       "pointer-events-auto"
     ].join(" "),
     viewport: [
       "relative",
       "w-full max-h-[40vh] min-w-[192px]",
       "overflow-x-hidden overflow-y-auto scrollbar-thin"
-      // scrollbar-transparent
     ].join(" "),
     arrow: "fill-(--ui-color-bg-content-primary)",
-    // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
     group: "grid",
-    // p-1 isolate
     label: [
       "w-full h-(--popup-window-delimiter-section-height)",
-      // min-w-[195px]
+      "bitrix-mobile:h-[27px]",
       "px-[18px] mt-(--menu-item-block-stack-space)",
+      "bitrix-mobile:pe-0 bitrix-mobile:mt-0 bitrix-mobile:-mb-[12px]",
       "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)",
+      "text-(--ui-color-base-3)",
+      'bitrix-mobile:[&_[data-slot="itemLabel"]]:text-(--ui-color-base-5)',
       "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-(--ui-color-divider-vibrant-default)",
+    separator: [
+      "bg-(--ui-color-divider-vibrant-default)",
+      "my-2 mx-4.5 h-px",
+      "bitrix-mobile:my-0 bitrix-mobile:mx-0 bitrix-mobile:h-1.5"
+    ].join(" "),
     item: [
       "group",
       "w-full h-[36px]",
-      // min-w-[195px]
-      "px-[18px] mt-(--menu-item-block-stack-space)",
+      "bitrix-mobile:h-[42px]",
+      "px-4.5 pe-2 mt-(--menu-item-block-stack-space)",
+      "bitrix-mobile:mt-0",
       "relative",
-      "flex flex-row rtl:flex-row-reverse items-center",
+      "flex flex-row rtl:flex-row-reverse items-center gap-2",
       "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)",
+      "text-(--ui-color-base-1)",
+      "hover:text-(--ui-color-base-1)",
+      "data-highlighted:text-(--ui-color-base-1)",
+      "data-[state=open]:text-(--ui-color-base-1)",
       "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"
+      "bitrix-mobile:data-[state=open]:bg-(--ui-color-bg-state-hover-default)",
+      "transition-colors",
+      'bitrix-mobile:[[data-slot="item"]+&]:border-t',
+      "bitrix-mobile:border-t-(--ui-color-divider-vibrant-default)",
+      "bitrix-mobile:data-highlighted:bg-(--ui-color-bg-state-hover-default)"
     ].join(" "),
     itemLeadingIcon: [
       "shrink-0",
-      "size-[18px]",
-      "text-(--ui-color-design-plain-content-icon-secondary)",
+      "size-[25px]",
+      "text-(--ui-color-base-5)",
       "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)",
@@ -3320,7 +3335,7 @@ const dropdownMenu = {
     itemLeadingAvatarSize: "2xs",
     // @memo this wrong
     itemTrailing: "ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center",
-    itemTrailingIcon: "shrink-0 size-[24px] text-(--ui-color-accent-main-primary)",
+    itemTrailingIcon: "shrink-0 size-[25px] text-(--ui-color-accent-main-primary)",
     itemTrailingKbds: "shrink-0 hidden lg:inline-flex items-center gap-0.5",
     itemTrailingKbdsSize: "md",
     itemWrapper: "flex-1 flex flex-col text-start min-w-0",
@@ -3329,7 +3344,7 @@ const dropdownMenu = {
       "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)"
+    itemLabelExternalIcon: "inline-block size-[25px] text-(--ui-color-base-5)"
   },
   variants: {
     color: {
@@ -3338,7 +3353,7 @@ const dropdownMenu = {
       "air-primary-alert": { item: "style-filled-alert" },
       "air-primary-copilot": { item: "style-filled-copilot" },
       "air-primary-warning": { item: "style-filled-warning" },
-      // @deprecate ////
+      /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
       "default": { item: "style-old-default" },
       "danger": { item: "style-old-danger" },
       "success": { item: "style-old-success" },
@@ -3403,6 +3418,7 @@ const dropdownMenu = {
       active: true,
       class: ""
     },
+    /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
     {
       color: ["danger", "success", "warning", "primary", "secondary", "collab", "ai"],
       active: false,
@@ -3415,6 +3431,7 @@ const dropdownMenu = {
         ].join(" ")
       }
     },
+    /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
     {
       color: ["danger", "success", "warning", "primary", "secondary", "collab", "ai"],
       active: true,
@@ -4168,17 +4185,15 @@ const header = {
 const input = {
   slots: {
     root: "isolate relative inline-flex items-center",
-    // remove ? w-full -> see select
     base: [
       "px-3",
       "w-full py-0 border-0 focus:outline-none",
       "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none",
+      "disabled:pointer-events-auto",
       "disabled:select-none",
       "disabled:opacity-30",
       "disabled:resize-none",
-      "appearance-none transition duration-300 ease-linear",
-      // transition-colors
+      "appearance-none transition-colors duration-300 ease-linear",
       "text-(--ui-color-base-1)",
       "style-blurred-bg-input",
       "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
@@ -4268,7 +4283,7 @@ const input = {
       "air-primary-alert": { base: "style-filled-alert" },
       "air-primary-copilot": { base: "style-filled-copilot" },
       "air-primary-warning": { base: "style-filled-warning" },
-      // @deprecate ////
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       "default": { base: "style-old-default" },
       "danger": { base: "style-old-danger" },
       "success": { base: "style-old-success" },
@@ -4347,7 +4362,7 @@ const input = {
       class: {
         base: [
           "focus-visible:border-(--b24ui-border-color)",
-          "hover:border-(--b24ui-border-color)",
+          "hover:not-disabled:not-data-disabled:border-(--b24ui-border-color)",
           "data-[state=open]:border-(--b24ui-border-color)"
         ].join(" ")
       }
@@ -4498,6 +4513,23 @@ const input = {
         trailingIcon: "size-[21px]"
       }
     },
+    {
+      loading: true,
+      leading: true,
+      noPadding: true,
+      class: {
+        base: "ps-[34px]"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      noPadding: true,
+      class: {
+        base: "pe-[34px]"
+      }
+    },
     // endregion ////
     // region fieldGroup ////
     {
@@ -4585,7 +4617,7 @@ const inputDate = () => {
         "data-[segment=literal]:text-(--ui-color-base-6)",
         "data-invalid:text-(--ui-color-accent-main-alert)",
         "data-disabled:cursor-not-allowed",
-        "data-disabled:pointer-events-none",
+        "data-disabled:pointer-events-auto",
         "data-disabled:select-none",
         "data-disabled:opacity-30",
         "transition-colors",
@@ -4632,12 +4664,11 @@ const inputMenu = () => {
       base: [
         "w-full py-0 border-0 focus:outline-none",
         "disabled:cursor-not-allowed",
-        "disabled:pointer-events-none",
+        "disabled:pointer-events-auto",
         "disabled:select-none",
         "disabled:opacity-30",
         "disabled:resize-none",
-        "appearance-none transition duration-300 ease-linear transition-colors",
-        // transition-colors
+        "appearance-none transition-colors duration-300 ease-linear",
         "text-(--ui-color-base-1)",
         "style-blurred-bg-input",
         "hover:text-(--ui-color-base-1)",
@@ -4657,11 +4688,9 @@ const inputMenu = () => {
       trailingClear: "p-0",
       content: [
         "base-mode",
-        // w-(--reka-combobox-trigger-width)
         "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)]",
@@ -4675,14 +4704,11 @@ const inputMenu = () => {
         "scroll-py-1",
         "w-[240px] max-h-[40vh]",
         "overflow-x-hidden overflow-y-auto scrollbar-thin"
-        // scrollbar-transparent
       ].join(" "),
       arrow: "fill-(--ui-color-bg-content-primary)",
-      // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
       group: "grid",
       empty: [
         "h-(--popup-window-delimiter-section-height)",
-        // 'mt-(--menu-item-block-stack-space)',
         "py-[8px]",
         "select-none outline-none whitespace-nowrap",
         "text-center",
@@ -4762,7 +4788,8 @@ const inputMenu = () => {
       tagsItemDelete: [
         "cursor-pointer",
         "inline-flex items-center",
-        "disabled:pointer-events-none",
+        "disabled:cursor-not-allowed",
+        "disabled:pointer-events-auto",
         "text-(--b24ui-icon-color-secondary)",
         "hover:text-(--b24ui-icon-color-secondary-hover)",
         "transition-none"
@@ -4777,13 +4804,11 @@ const inputMenu = () => {
         },
         false: {
           viewport: ""
-          // divide-y divide-(--ui-color-design-tinted-na-stroke)
         }
       },
       addNew: {
         true: {
           group: "",
-          // p-0 isolate -m-px
           item: [
             "text-(--b24ui-typography-legend-color)",
             "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
@@ -4815,7 +4840,7 @@ const inputMenu = () => {
             "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
             "focus:outline-none",
             "disabled:cursor-not-allowed",
-            "disabled:pointer-events-none",
+            "disabled:pointer-events-auto",
             "disabled:select-none",
             "disabled:opacity-30",
             "focus:ring-0 focus-visible:ring-0"
@@ -4827,7 +4852,7 @@ const inputMenu = () => {
             "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
             "focus:outline-none",
             "disabled:cursor-not-allowed",
-            "disabled:pointer-events-none",
+            "disabled:pointer-events-auto",
             "disabled:select-none",
             "disabled:opacity-30"
           ].join(" ")
@@ -4932,6 +4957,7 @@ const inputMenu = () => {
         "air-primary-alert": { item: "style-filled-alert" },
         "air-primary-copilot": { item: "style-filled-copilot" },
         "air-primary-warning": { item: "style-filled-warning" },
+        // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
         "default": { item: "style-old-default" },
         "danger": { item: "style-old-danger" },
         "success": { item: "style-old-success" },
@@ -4943,7 +4969,6 @@ const inputMenu = () => {
       }
     },
     compoundVariants: [
-      // 'has-focus-visible:ring-1 has-focus-visible:ring-red-500'
       // from dropdown-menu
       {
         colorItem: ["air-primary", "air-primary-success", "air-primary-alert", "air-primary-copilot", "air-primary-warning"],
@@ -4979,6 +5004,7 @@ const inputMenu = () => {
         active: true,
         class: ""
       },
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       {
         colorItem: ["danger", "success", "warning", "primary", "secondary", "collab", "ai"],
         active: false,
@@ -4991,6 +5017,7 @@ const inputMenu = () => {
           ].join(" ")
         }
       },
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       {
         colorItem: ["danger", "success", "warning", "primary", "secondary", "collab", "ai"],
         active: true,
@@ -5047,11 +5074,11 @@ const inputNumber = () => {
       base: [
         "w-full py-0 border-0 focus:outline-none",
         "disabled:cursor-not-allowed",
-        "disabled:pointer-events-none",
+        "disabled:pointer-events-auto",
+        "disabled:select-none",
         "disabled:opacity-30",
         "disabled:resize-none",
-        "appearance-none transition duration-300 ease-linear",
-        // transition-colors
+        "appearance-none transition-colors duration-300 ease-linear",
         "text-(--ui-color-base-1)",
         "style-blurred-bg-input",
         "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
@@ -5082,7 +5109,7 @@ const inputNumber = () => {
         "air-primary-alert": { base: "style-filled-alert" },
         "air-primary-copilot": { base: "style-filled-copilot" },
         "air-primary-warning": { base: "style-filled-warning" },
-        // @deprecate ////
+        // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
         "default": { base: "style-old-default" },
         "danger": { base: "style-old-danger" },
         "success": { base: "style-old-success" },
@@ -5092,10 +5119,6 @@ const inputNumber = () => {
         "collab": { base: "style-old-collab" },
         "ai": { base: "style-old-ai" }
       },
-      /**
-       * @memo now get from Badge
-       */
-      // tagColor: {},
       rounded: {
         ...input$1.variants.rounded
       },
@@ -5148,7 +5171,7 @@ const inputNumber = () => {
             "focus-visible:ring-1",
             "focus-visible:ring-inset",
             "focus-visible:ring-(--b24ui-border-color)",
-            "hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color)",
+            "hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color)",
             "data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)"
           ].join(" ")
         }
@@ -5477,12 +5500,11 @@ const inputTags = () => {
       base: [
         "border-0 focus:outline-none",
         "disabled:cursor-not-allowed",
-        "disabled:pointer-events-none",
+        "disabled:pointer-events-auto",
         "disabled:select-none",
         "disabled:opacity-30",
         "disabled:resize-none",
-        "appearance-none transition duration-300 ease-linear transition-colors",
-        // transition-colors
+        "appearance-none transition-colors duration-300 ease-linear",
         "text-(--ui-color-base-1)",
         "style-blurred-bg-input",
         "hover:text-(--ui-color-base-1)",
@@ -5500,8 +5522,9 @@ const inputTags = () => {
         "leading-(--main-ui-square-item-height)",
         "font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular)",
         "inline-flex items-center gap-1",
-        "data-disabled:cursor-not-allowed data-disabled:opacity-30",
-        "data-disabled:pointer-events-none",
+        "data-disabled:cursor-not-allowed",
+        "data-disabled:opacity-30",
+        "data-disabled:pointer-events-auto",
         "data-disabled:select-none",
         "text-(--ui-color-design-tinted-content)",
         "bg-(--ui-color-design-tinted-bg-alt)"
@@ -5512,7 +5535,8 @@ const inputTags = () => {
       itemDelete: [
         "cursor-pointer",
         "inline-flex items-center",
-        "disabled:pointer-events-none",
+        "disabled:cursor-not-allowed",
+        "disabled:pointer-events-auto",
         "disabled:select-none",
         "text-(--b24ui-icon-color-secondary)",
         "hover:text-(--b24ui-icon-color-secondary-hover)",
@@ -5527,7 +5551,7 @@ const inputTags = () => {
         "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
         "focus:outline-none",
         "disabled:cursor-not-allowed",
-        "disabled:pointer-events-none",
+        "disabled:pointer-events-auto",
         "disabled:select-none",
         "disabled:opacity-30",
         "focus:ring-0",
@@ -5673,7 +5697,7 @@ const inputTime = () => {
         "data-[segment=literal]:text-(--ui-color-base-6)",
         "data-invalid:text-(--ui-color-accent-main-alert)",
         "data-disabled:cursor-not-allowed",
-        "data-disabled:pointer-events-none",
+        "data-disabled:pointer-events-auto",
         "data-disabled:select-none",
         "data-disabled:opacity-30",
         "data-disabled:resize-none",
@@ -5910,7 +5934,7 @@ const navigationMenu = {
     list: "isolate min-w-0",
     label: [
       "w-full h-[22px] overflow-hidden mt-[10px]",
-      "opacity-70 text-(length:--ui-font-size-sm)"
+      "opacity-70 text-legend text-(length:--ui-font-size-sm)"
     ].join(" "),
     item: "min-w-0",
     link: [
@@ -6008,7 +6032,14 @@ const navigationMenu = {
           "menu-item-horizontal",
           "h-[32px] min-h-[32px]",
           "px-[10px]",
-          "border border-(--menu-item-background) hover:border-(--ui-color-design-plain-na-focused-stroke) data-[state=open]:bg-(--ui-color-design-plain-na-focused-stroke)"
+          "leading-7",
+          "border border-(--menu-item-background) hover:border-(--ui-color-design-plain-na-focused-stroke) data-[state=open]:bg-(--ui-color-design-plain-na-focused-stroke)",
+          "bitrix-mobile:px-3",
+          "bitrix-mobile:h-[34px] bitrix-mobile:min-h-[34px]",
+          "bitrix-mobile:text-(--ui-color-base-4) bitrix-mobile:border-(--ui-color-base-7)",
+          "bitrix-mobile:leading-6 bitrix-mobile:text-(length:--ui-font-size-md)",
+          // @memo This is a temporary solution until we connect the required font.
+          "bitrix-mobile:scale-x-[0.92]"
         ].join(" "),
         linkTrailingIcon: "size-[16px]",
         linkLeadingBadge: "-top-[6px] -right-[14px] -translate-x-1/2",
@@ -6028,7 +6059,8 @@ const navigationMenu = {
         content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-transparent"
       },
       vertical: {
-        root: "flex-col w-full ps-(--menu-items-block-padding-x) rtl:pe-(--menu-items-block-padding-x)",
+        root: "flex-col w-full ps-0 pe-0 rtl:pe-0 rtl:ps-0",
+        // ps-(--menu-items-block-padding-x) rtl:pe-(--menu-items-block-padding-x)
         list: "flex flex-col",
         item: [
           "mt-(--menu-item-block-stack-space)",
@@ -6074,9 +6106,10 @@ const navigationMenu = {
     },
     active: {
       true: {
+        link: "",
         childLink: [
-          "text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)"
-          // [#0075ff]
+          "text-(--ui-color-accent-main-primary)",
+          "hover:text-(--ui-color-accent-main-primary)"
         ].join(" "),
         childLinkIcon: "text-(--ui-color-accent-main-primary)"
       },
@@ -6114,7 +6147,7 @@ const navigationMenu = {
       collapsed: false,
       class: {
         item: "data-[state=open]:bg-(--leftmenu-group-bg)",
-        childList: "",
+        childList: "mb-0.5",
         childItem: "",
         content: "motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden",
         linkLabel: "ms-[9px]"
@@ -6161,7 +6194,10 @@ const navigationMenu = {
       active: true,
       orientation: "horizontal",
       class: {
-        link: "menu-item-horizontal-active border-(--menu-item-border)"
+        link: [
+          "leading-7 menu-item-horizontal-active border-(--menu-item-border)",
+          "bitrix-mobile:text-(--ui-color-base-2) bitrix-mobile:bg-transparent bitrix-mobile:border-(--ui-color-base-2)"
+        ].join(" ")
       }
     },
     {
@@ -6977,13 +7013,12 @@ const pinInput = () => ({
       "px-0 py-0",
       "border-0 focus:outline-none",
       "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none",
+      "disabled:pointer-events-auto",
       "disabled:select-none",
       "disabled:opacity-30",
       "disabled:resize-none",
       "text-center",
-      "appearance-none transition duration-300 ease-linear",
-      // transition-colors
+      "appearance-none transition-colors duration-300 ease-linear",
       "text-(--ui-color-base-1)",
       "style-blurred-bg-input",
       "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
@@ -7023,7 +7058,7 @@ const pinInput = () => ({
       "air-primary-alert": { base: "style-filled-alert" },
       "air-primary-copilot": { base: "style-filled-copilot" },
       "air-primary-warning": { base: "style-filled-warning" },
-      // @deprecate ////
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       "default": { base: "style-old-default" },
       "danger": { base: "style-old-danger" },
       "success": { base: "style-old-success" },
@@ -7824,19 +7859,19 @@ const select = () => {
     {
       slots: {
         root: () => "isolate relative inline-flex items-center",
-        // @todo !!! ? w-full need
         base: () => [
           "relative inline-flex items-center group",
           "px-3",
           "w-full py-0 border-0 focus:outline-none",
           "cursor-pointer",
           "disabled:cursor-not-allowed",
-          "disabled:pointer-events-none",
+          "disabled:pointer-events-auto",
+          // fix ! 'disabled:pointer-events-none',
           "disabled:select-none",
           "disabled:opacity-30",
           "disabled:resize-none",
-          "appearance-none transition duration-300 ease-linear",
-          // transition-colors
+          "appearance-none transition-colors duration-300 ease-linear",
+          // fix ! transition
           "text-(--ui-color-base-1)",
           "style-blurred-bg-input",
           "hover:text-(--ui-color-base-1)",
@@ -7849,12 +7884,10 @@ const select = () => {
         value: "truncate pointer-events-none",
         placeholder: "truncate text-(--ui-color-design-plain-na-content-secondary)",
         content: [
-          // w-(--reka-combobox-trigger-width)
           "base-mode",
           "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)]",
@@ -7868,10 +7901,8 @@ const select = () => {
           "scroll-py-1",
           "w-[240px] max-h-[40vh]",
           "overflow-x-hidden overflow-y-auto scrollbar-thin"
-          // scrollbar-transparent
         ].join(" "),
         arrow: "fill-(--ui-color-bg-content-primary)",
-        // stroke-(--ui-color-divider-default) for content bottom|top::start -> ml-[12px]
         group: "grid",
         empty: [
           "h-(--popup-window-delimiter-section-height)",
@@ -7998,6 +8029,7 @@ const select = () => {
           "air-primary-alert": { item: "style-filled-alert" },
           "air-primary-copilot": { item: "style-filled-copilot" },
           "air-primary-warning": { item: "style-filled-warning" },
+          // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
           "default": { item: "style-old-default" },
           "danger": { item: "style-old-danger" },
           "success": { item: "style-old-success" },
@@ -8010,7 +8042,7 @@ const select = () => {
       },
       compoundVariants: (prev) => {
         return [
-          // from dropdown-menu
+          // @memo from dropdown-menu
           {
             colorItem: ["air-primary", "air-primary-success", "air-primary-alert", "air-primary-copilot", "air-primary-warning"],
             active: false,
@@ -8057,6 +8089,7 @@ const select = () => {
               ].join(" ")
             }
           },
+          // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
           {
             colorItem: ["danger", "success", "warning", "primary", "secondary", "collab", "ai"],
             active: true,
@@ -8093,12 +8126,10 @@ const selectMenu = () => {
         "scroll-py-1",
         "w-[240px] max-h-[40vh]",
         "overflow-x-hidden overflow-y-auto scrollbar-thin"
-        // scrollbar-transparent
       ].join(" "),
       content: (content) => [
         content,
-        "origin-(--reka-combobox-content-transform-origin) "
-        // w-(--reka-combobox-trigger-width)
+        "origin-(--reka-combobox-content-transform-origin)"
       ],
       trailingClear: "p-0"
     },
@@ -8109,13 +8140,11 @@ const selectMenu = () => {
         },
         false: {
           viewport: ""
-          // divide-y divide-(--ui-color-design-tinted-na-stroke)
         }
       },
       addNew: {
         true: {
           group: "",
-          // p-0 isolate -m-px
           item: [
             "text-(--b24ui-typography-legend-color)",
             "data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color)",
@@ -8269,25 +8298,35 @@ const safeList = [
 const slideover = {
   slots: {
     overlay: "fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]",
-    //
     content: [
+      "base-mode",
       "fixed",
+      "bg-(--ui-color-gray-05) dark:bg-(--ui-color-base-black-fixed)",
       "sm:shadow-lg",
       "flex flex-col focus:outline-none",
       "h-full"
     ].join(" "),
-    sidebarLayoutRoot: "relative",
-    sidebarLayoutHeaderWrapper: "relative",
-    sidebarLayoutPageWrapper: "min-h-full pb-[calc(53px_+_10px)] px-[20px] ps-[20px] pe-[20px] pb-[20px] overflow-y-auto scrollbar-thin",
-    sidebarLayoutContainer: "gap-[22px]",
-    sidebarLayoutPageBottomWrapper: "relative",
-    sidebarLayoutLoadingWrapper: "",
-    sidebarLayoutLoadingIcon: "",
     header: [
-      "pt-[24px]",
-      "flex-1 flex items-center gap-x-[12px] gap-y-1.5"
+      "py-[20px] px-[20px]",
+      "flex items-center gap-x-[12px] gap-y-1.5",
+      "overflow-hidden"
     ].join(" "),
     wrapper: "min-h-[30px]",
+    body: [
+      "size-full",
+      "flex-1 overflow-y-auto pb-2.5 px-[20px]"
+    ].join(" "),
+    footer: [
+      "absolute inset-x-0 bottom-0",
+      "base-mode",
+      "bg-(--ui-color-bg-content-primary)",
+      "flex items-center justify-center gap-2.5",
+      //
+      "border-t border-t-1 border-t-(--ui-color-divider-less)",
+      "shadow-top-md",
+      "py-[13px] px-[13px]"
+      //  pr-(--scrollbar-width)
+    ].join(" "),
     title: [
       "font-[family-name:var(--ui-font-family-primary)]",
       "text-(--b24ui-typography-label-color)",
@@ -8301,26 +8340,12 @@ const slideover = {
       "text-(length:--ui-font-size-sm)"
     ].join(" "),
     close: "absolute",
-    body: [
-      "size-full",
-      "flex-1"
-    ].join(" "),
-    footer: [
-      "absolute inset-x-0 bottom-0",
-      "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)",
-      "shadow-top-md",
-      "py-[9px] px-2 pr-(--scrollbar-width)"
-    ].join(" "),
     safeList
   },
   variants: {
     useFooter: {
       true: {
-        sidebarLayoutPageWrapper: "mb-[calc(53px)] min-h-[calc(100vh_-_53px)]"
-        // -_18px
+        body: "mb-[64px]"
       }
     },
     overlayBlur: {
@@ -8335,34 +8360,24 @@ const slideover = {
       }
     },
     side: {
-      // @todo fix if parent SidebarLayout.isUseSideBar > w-[calc(100%-135x)] > w-[calc(100%-150px)]
       top: {
-        content: "",
-        // 'sm:rounded-t-none'
-        sidebarLayoutRoot: ""
-        // sm:rounded-t-none
+        content: ""
       },
       right: {
-        content: "",
-        // sm:rounded-t-none
-        sidebarLayoutRoot: ""
+        content: ""
         // sm:rounded-t-none
       },
       bottom: {
-        content: "",
-        sidebarLayoutRoot: ""
+        content: ""
       },
       left: {
-        content: "",
-        // sm:rounded-t-none
-        sidebarLayoutRoot: ""
+        content: ""
         // sm:rounded-t-none
       }
     },
     inset: {
       true: {
-        content: "rounded-[18px]",
-        sidebarLayoutRoot: "rounded-[18px]"
+        content: "rounded-4.5"
       }
     },
     transition: {
@@ -8380,13 +8395,12 @@ const slideover = {
         content: "max-h-[calc(100%-2rem)] inset-x-4 top-4"
       }
     },
+    // @todo remove this ?
     {
       side: "top",
       inset: true,
       useFooter: true,
-      class: {
-        sidebarLayoutPageWrapper: "min-h-[calc(100vh_-_53px-2rem)]"
-      }
+      class: {}
     },
     {
       side: "top",
@@ -8402,13 +8416,12 @@ const slideover = {
         content: "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 right-4 "
       }
     },
+    // @todo remove this ?
     {
       side: "right",
       inset: true,
       useFooter: true,
-      class: {
-        sidebarLayoutPageWrapper: "min-h-[calc(100vh_-_53px-2rem)]"
-      }
+      class: {}
     },
     {
       side: "right",
@@ -8421,18 +8434,15 @@ const slideover = {
       side: "bottom",
       inset: true,
       class: {
-        content: [
-          "max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4"
-        ].join(" ")
+        content: "max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] end-4 bottom-4"
       }
     },
+    // @todo remove this ?
     {
       side: "bottom",
       inset: true,
       useFooter: true,
-      class: {
-        sidebarLayoutPageWrapper: "min-h-[calc(100vh_-_53px_-_2rem)]"
-      }
+      class: {}
     },
     {
       side: "bottom",
@@ -8442,8 +8452,7 @@ const slideover = {
           "max-h-full sm:max-h-[calc(100%-18px)] right-[5px] top-0 sm:top-[18px] bottom-0",
           "w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)]",
           "sm:rounded-t-[18px]"
-        ].join(" "),
-        sidebarLayoutRoot: "sm:rounded-t-[18px]"
+        ].join(" ")
       }
     },
     {
@@ -8453,13 +8462,12 @@ const slideover = {
         content: "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] inset-y-4 left-4"
       }
     },
+    // @todo remove this ?
     {
       side: "left",
       inset: true,
       useFooter: true,
-      class: {
-        sidebarLayoutPageWrapper: "min-h-[calc(100vh_-_53px-2rem)]"
-      }
+      class: {}
     },
     {
       side: "left",
@@ -8470,13 +8478,12 @@ const slideover = {
     },
     // endregion ////
     // region bottom & footer -> min-h ////
+    // @todo remove this ?
     {
       side: "bottom",
       inset: false,
       useFooter: true,
-      class: {
-        sidebarLayoutPageWrapper: "sm:min-h-[calc(100vh_-_53px_-18px)]"
-      }
+      class: {}
     },
     // endregion ////
     // region btn.close ////
@@ -8486,7 +8493,7 @@ const slideover = {
       class: {
         close: [
           "pl-1.5 pr-[4px]",
-          "top-[17px] -translate-x-full left-[1px]",
+          "top-[17px] -translate-x-full left-0",
           "rounded-l-full"
         ].join(" ")
       }
@@ -8497,7 +8504,7 @@ const slideover = {
       class: {
         close: [
           "pr-1.5 pl-[4px]",
-          "top-[17px] translate-x-full right-[1px]",
+          "top-[17px] translate-x-full right-0",
           "rounded-r-full",
           "[&>div]:flex-row-reverse"
         ].join(" ")
@@ -8507,17 +8514,13 @@ const slideover = {
       // side: 'top',
       inset: true,
       class: {
-        close: [
-          "top-4 end-4"
-        ].join(" ")
+        close: "top-4 end-4"
       }
     },
     {
       side: "top",
       class: {
-        close: [
-          "top-4 end-4"
-        ].join(" ")
+        close: "top-4 end-4"
       }
     },
     // endregion ////
@@ -8841,10 +8844,11 @@ const table$1 = {
     root: "relative overflow-auto",
     base: [
       "min-w-full",
-      "font-[family-name:var(--ui-font-family-primary)]"
+      "font-[family-name:var(--ui-font-family-primary)]",
+      "table-fixed border-separate border-spacing-0"
     ].join(" "),
     caption: "sr-only",
-    thead: "relative",
+    thead: "relative [&>tr]:[&>th]:h-[45px]",
     tbody: [
       "isolate",
       "[&>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary)",
@@ -8852,7 +8856,8 @@ const table$1 = {
       "[&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)",
       "[&>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary)",
       "light:[&>tr]:data-[selected=true]:hover:bg-(#eff7d7)",
-      "[&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)"
+      "[&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)",
+      "[&>tr]:last:[&>td]:border-b-0"
     ].join(" "),
     tfoot: "relative",
     tr: [
@@ -8860,14 +8865,15 @@ const table$1 = {
       "light:data-[selected=true]:bg-[#f4fcde]"
     ].join(" "),
     th: [
-      "px-4 py-3.5",
+      "px-4 py-2",
       "text-(length:--ui-font-size-md)/(--ui-font-line-height-md)",
       "text-(--b24ui-typography-label-color)",
       "whitespace-nowrap",
       "text-left rtl:text-right",
       "font-(--ui-font-weight-normal)",
       "[&:has([role=checkbox])]:pe-0",
-      "align-middle"
+      "align-middle",
+      "border-b border-(--ui-color-divider-default)"
     ].join(" "),
     td: [
       "p-4",
@@ -8876,7 +8882,8 @@ const table$1 = {
       "whitespace-nowrap",
       "font-(--ui-font-weight-normal)",
       "[&:has([role=checkbox])]:pe-0",
-      "align-middle"
+      "align-middle",
+      "border-b border-(--ui-color-divider-default)"
     ].join(" "),
     separator: [
       "absolute z-1 left-0",
@@ -8894,11 +8901,11 @@ const table$1 = {
   variants: {
     virtualize: {
       true: {
-        tr: "relative before:absolute before:z-1 before:w-full before:border-b before:border-b-(--ui-color-design-tinted-na-stroke)"
+        tr: "relative before:absolute before:z-1 before:w-full before:border-b before:border-b-(--ui-color-divider-default)"
       },
       false: {
         base: "overflow-clip",
-        tbody: "divide-y divide-(--ui-color-design-tinted-na-stroke)"
+        tbody: "divide-y divide-(--ui-color-divider-default)"
       }
     },
     pinned: {
@@ -9254,17 +9261,15 @@ const tabs$1 = {
 const textarea = {
   slots: {
     root: "isolate relative inline-flex items-center",
-    // remove ? w-full
     base: [
       "px-3",
       "w-full pt-[7px] pb-[8px] border-0 focus:outline-none",
       "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none",
+      "disabled:pointer-events-auto",
       "disabled:select-none",
       "disabled:opacity-30",
       "disabled:resize-none",
-      "appearance-none transition duration-300 ease-linear",
-      // transition-colors
+      "appearance-none transition-colors duration-300 ease-linear",
       "text-(--ui-color-base-1)",
       "style-blurred-bg-input",
       "placeholder:text-(--ui-color-design-plain-na-content-secondary)",
@@ -9307,7 +9312,7 @@ const textarea = {
       "air-primary-alert": { base: "style-filled-alert" },
       "air-primary-copilot": { base: "style-filled-copilot" },
       "air-primary-warning": { base: "style-filled-warning" },
-      // @deprecate ////
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       "default": { base: "style-old-default" },
       "danger": { base: "style-old-danger" },
       "success": { base: "style-old-success" },
@@ -9380,7 +9385,7 @@ const textarea = {
       class: {
         base: [
           "focus-visible:border-(--b24ui-border-color)",
-          "hover:border-(--b24ui-border-color)",
+          "hover:not-disabled:not-data-disabled:border-(--b24ui-border-color)",
           "data-[state=open]:border-(--b24ui-border-color)"
         ].join(" ")
       }
@@ -9413,6 +9418,11 @@ const textarea = {
       noPadding: false,
       class: "ps-[34px]"
     },
+    {
+      leading: true,
+      loading: true,
+      class: "ps-[34px]"
+    },
     // endregion ////
     // region trailing ////
     {
@@ -9630,11 +9640,11 @@ const toast = {
     root: [
       "dark",
       "relative group overflow-hidden",
-      "rounded-[26px] py-3.5 ps-6 pe-4",
-      "flex items-center gap-2.5",
+      "rounded-[8px] p-4",
+      "flex gap-4",
       "focus-visible:outline-(length:--ui-design-outline-stroke-weight) focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-content-divider)",
       "font-[family-name:var(--ui-font-family-primary)]",
-      "bg-(--ui-color-bg-content-primary)/80",
+      "bg-(--ui-color-base-black-fixed)/80",
       "text-(--ui-color-design-plain-na-focused-content)",
       "text-(length:--ui-font-size-sm) font-(--ui-font-weight-normal)"
     ].join(" "),
@@ -9646,8 +9656,7 @@ const toast = {
     avatarSize: "xl",
     actions: "flex gap-1.5 shrink-0",
     progress: "absolute inset-x-0 bottom-0",
-    //  h-1 z-[-1] bg-(--b24ui-border-color)
-    close: "p-0"
+    close: "p-0 absolute top-2 right-2"
   },
   variants: {
     color: {
@@ -9657,7 +9666,7 @@ const toast = {
       "air-primary-copilot": { root: "style-filled-copilot" },
       "air-primary-warning": { root: "style-filled-warning" },
       "air-secondary": { root: "style-filled-inverted" },
-      // @deprecate ////
+      // @deprecate This rule is deprecated and will be removed in version `3.0.0` ////
       "default": { root: "old-style-default" },
       "danger": { root: "old-style-danger" },
       "success": { root: "old-style-success" },
@@ -9802,6 +9811,7 @@ const sidebarLayout = {
     ].join(" "),
     sidebar: [
       // @memo use src/runtime/air-design-tokens/components/navigation-menu.css
+      // @deprecate This rule (air-sidebar) is deprecated and will be removed in version `3.0.0` ////
       "air-sidebar",
       "before:absolute before:inset-0 before:z-[-1]",
       "before:bg-(--leftmenu-bg-expanded)",
@@ -9830,6 +9840,7 @@ const sidebarLayout = {
     ].join(" "),
     header: [
       // @memo use src/runtime/air-design-tokens/components/navigation-menu.css
+      // @deprecate This rule (air-header) is deprecated and will be removed in version `3.0.0` ////
       "air-header",
       "px-(--content-area-shift) min-h-(--topbar-height)",
       "flex items-center gap-x-1"
@@ -11092,7 +11103,7 @@ const field = {
 };
 
 const fieldGroup = {
-  base: "my-[20px] divide-y divide-(--ui-color-design-tinted-na-stroke) *:not-last:pb-[20px]"
+  base: "my-[20px] divide-y divide-(--ui-color-divider-default) *:not-last:pb-[20px]"
 };
 
 const ol = {
@@ -11660,10 +11671,12 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   body {
     scrollbar-gutter: stable;
     background: var(--air-theme-background);
-    @apply ${prefix}antialiased ${prefix}font-(family-name:--ui-font-family-system) ${prefix}text-(--b24ui-typography-legend-color) ${prefix}scheme-light ${prefix}dark:scheme-dark ${prefix}edge-light:scheme-light ${prefix}edge-dark:scheme-light;
+    @apply ${prefix}antialiased ${prefix}font-(family-name:--ui-font-family-system) ${prefix}scheme-light ${prefix}dark:scheme-dark ${prefix}edge-light:scheme-light ${prefix}edge-dark:scheme-light;
   }
 
-  .sidebar-layout.--inner {
+  /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
+  .sidebar-layout.--inner,
+  .air-custom-bg {
     background: var(--air-theme-background);
   }
 }