@bitrix24/b24ui-nuxt 2.4.2 → 2.5.2

package/.nuxt/b24ui.css

@@ -10,7 +10,8 @@
   }
 
   /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
-  .sidebar-layout.--inner {
+  .sidebar-layout.--inner,
+  .air-custom-bg {
     background: var(--air-theme-background);
   }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.4.2",
+  "version": "2.5.2",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.C-GSAtA1.mjs';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';

package/dist/runtime/air-design-tokens/components/navigation-menu.css

@@ -1 +1 @@
-@theme inline{--content-area-left-shift:22px;--air-header-min-height:58px;--air-footer-min-height:76px;--topbar-height:58px;--b24ui-header-height:var(--topbar-height)}@layer components{.air-sidebar{background:var(--air-theme-background-blurred,none)}.clip-path-viewport-wrapper{clip-path:inset(0 -24px -28px -24px round 10px)}.menu-item-horizontal{--menu-item-border-radius:var(--ui-border-radius-sm);--menu-item-border:var(--ui-color-design-selection-stroke);--menu-item-color:var(--menu-item-color-default);--menu-item-color-default:var(--ui-color-design-plain-content);--menu-item-color-active:var(--ui-color-design-selection-content);--menu-item-background:var(--menu-item-background-default);--menu-item-background-default:transparent;--menu-item-background-hover:var(--ui-color-design-plain-na-focused-bg);--menu-item-background-active:var(--ui-color-design-selection-bg);transition:background-color .2s,opacity .2s}.menu-item-horizontal:hover{--menu-item-color-active:var(--ui-color-design-plain-na-focused-content)}.menu-item-horizontal-active{--menu-item-color:var(--menu-item-color-active);--menu-item-background:var(--menu-item-background-active)}.menu-item-vertical{--menu-item-color:var(--menu-item-color-default);--menu-item-color-default:var(--ui-color-design-plain-content);--menu-item-color-active:var(--ui-color-design-selection-content);--menu-item-background:var(--menu-item-background-default);--menu-item-background-default:transparent;--menu-item-background-hover:color-mix(in srgb,var(--menu-item-background) 100%,var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));--menu-item-background-active:var(--ui-color-design-selection-bg);transition:border-radius .2s ease-in-out,color .15s ease-in-out,background .15s ease-in-out}.menu-item-vertical:hover{transition-duration:.2s,.15s,0s}.menu-item-vertical-active{--menu-item-color:var(--menu-item-color-active);--menu-item-background:var(--menu-item-background-active)}.light .menu-item-vertical{--menu-item-background-active:var(--ui-color-design-filled-bg);--menu-item-color-active:var(--ui-color-base-white-fixed)}.light .menu-item-vertical-active{--menu-item-background:var(--ui-color-design-filled-bg);--menu-item-color:var(--ui-color-base-white-fixed)}.light,:root{--menu-item-block-stack-space:4px;--menu-width-expanded:240px;--menu-width-collapsed:66px;--menu-items-block-padding-x:14px;--menu-item-border-radius:var(--ui-border-radius-md);--leftmenu-bg:var(--ui-color-bg-content-secondary);--leftmenu-bg-expanded:var(--ui-color-bg-content-secondary);--leftmenu-bg-stroke:#fff;--leftmenu-bg-stroke-expanded:#fff;--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:0px;--leftmenu-bg-blur-expanded:0px;--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:var(--ui-color-divider-default);--leftmenu-group-bg:transparent;--leftmenu-group-stroke:var(--ui-color-divider-default);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.dark{--leftmenu-bg:#262626;--leftmenu-bg-expanded:#262626;--leftmenu-bg-stroke:#3b3b3b;--leftmenu-bg-stroke-expanded:#3b3b3b;--leftmenu-bg-overlayed:rgba(52,74,103,.94);--leftmenu-bg-blur:0px;--leftmenu-bg-blur-expanded:0px;--leftmenu-bg-divider:var(--ui-color-divider-default);--leftmenu-group-bg:transparent;--leftmenu-group-stroke:var(--ui-color-divider-default);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.edge-light{--leftmenu-bg:rgb(0 0 0/3%);--leftmenu-bg-expanded:rgb(0 0 0/2%);--leftmenu-bg-stroke:transparent;--leftmenu-bg-stroke-expanded:rgb(0 0 0/4%);--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:var(--ui-bg-blur-less);--leftmenu-bg-blur-expanded:var(--ui-bg-blur-less);--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:rgba(0,0,0,.1);--leftmenu-group-bg:var(--ui-color-bg-content-tertiary,rgb(0 0 0/3%));--leftmenu-group-stroke:var(--ui-color-divider-less);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.edge-dark{--leftmenu-bg:hsla(0,0%,100%,.06);--leftmenu-bg-expanded:hsla(0,0%,100%,.03);--leftmenu-bg-stroke:transparent;--leftmenu-bg-stroke-expanded:hsla(0,0%,100%,.06);--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:var(--ui-bg-blur-less);--leftmenu-bg-blur-expanded:var(--ui-bg-blur-less);--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:hsla(0,0%,100%,.1);--leftmenu-group-bg:var(--ui-color-bg-content-tertiary,hsla(0,0%,100%,.08));--leftmenu-group-stroke:var(--ui-color-divider-less);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.air-header,.light .air-header{--topbar-bg:var(--ui-color-bg-content-secondary);--topbar-bg-stroke:var(--ui-color-bg-content-primary);--topbar-bg-stroke-weight:0;--topbar-bg-blur:0px}.dark .air-header{--topbar-bg:#2d2d2d;--topbar-bg-stroke:#3d3d3d;--topbar-bg-stroke-weight:0;--topbar-bg-blur:0px}.edge-dark .air-header{--topbar-bg:hsla(0,0%,100%,.1);--topbar-bg-stroke:transparent;--topbar-bg-stroke-weight:0px;--topbar-bg-blur:var(--ui-bg-blur-less)}.edge-light .air-header{--topbar-bg:rgba(0,0,0,.05);--topbar-bg-stroke:transparent;--topbar-bg-stroke-weight:0px;--topbar-bg-blur:var(--ui-bg-blur-less)}.air-header:before{background:linear-gradient(to right,var(--topbar-bg),var(--topbar-bg)),var(--air-theme-background-blurred,none);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}}
+@theme inline{--content-area-left-shift:22px;--air-header-min-height:58px;--air-footer-min-height:76px;--topbar-height:58px;--b24ui-header-height:var(--topbar-height)}@layer components{.air-sidebar{background:var(--air-theme-background-blurred,none)}.clip-path-viewport-wrapper{clip-path:inset(0 -24px -28px -24px round 10px)}.menu-item-horizontal{--menu-item-border-radius:var(--ui-border-radius-sm);--menu-item-border:var(--ui-color-design-selection-stroke);--menu-item-color:var(--menu-item-color-default);--menu-item-color-default:var(--ui-color-design-plain-content);--menu-item-color-active:var(--ui-color-design-selection-content);--menu-item-background:var(--menu-item-background-default);--menu-item-background-default:transparent;--menu-item-background-hover:var(--ui-color-design-plain-na-focused-bg);--menu-item-background-active:var(--ui-color-design-selection-bg);transition:background-color .2s,opacity .2s}.menu-item-horizontal:hover{--menu-item-color-active:var(--ui-color-design-plain-na-focused-content)}.menu-item-horizontal-active{--menu-item-color:var(--menu-item-color-active);--menu-item-background:var(--menu-item-background-active)}.menu-item-vertical{--menu-item-color:var(--menu-item-color-default);--menu-item-color-default:var(--ui-color-design-plain-content);--menu-item-color-active:var(--ui-color-design-selection-content);--menu-item-background:var(--menu-item-background-default);--menu-item-background-default:transparent;--menu-item-background-hover:color-mix(in srgb,var(--menu-item-background) 100%,var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));--menu-item-background-active:var(--ui-color-design-selection-bg);transition:border-radius .2s ease-in-out,color .15s ease-in-out,background .15s ease-in-out}.menu-item-vertical:hover{transition-duration:.2s,.15s,0s}.menu-item-vertical-active{--menu-item-color:var(--menu-item-color-active);--menu-item-background:var(--menu-item-background-active)}.light .menu-item-vertical{--menu-item-background-active:var(--ui-color-design-filled-bg);--menu-item-color-active:var(--ui-color-base-white-fixed);transition:color .17s}.light .menu-item-vertical:hover{transition-duration:0s}.light .menu-item-vertical-active{--menu-item-background:var(--ui-color-design-filled-bg);--menu-item-color:var(--ui-color-base-white-fixed)}.light,:root{--menu-item-block-stack-space:4px;--menu-width-expanded:240px;--menu-width-collapsed:66px;--menu-items-block-padding-x:14px;--menu-item-border-radius:var(--ui-border-radius-md);--leftmenu-bg:var(--ui-color-bg-content-secondary);--leftmenu-bg-expanded:var(--ui-color-bg-content-secondary);--leftmenu-bg-stroke:#fff;--leftmenu-bg-stroke-expanded:#fff;--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:0px;--leftmenu-bg-blur-expanded:0px;--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:var(--ui-color-divider-default);--leftmenu-group-bg:transparent;--leftmenu-group-stroke:var(--ui-color-divider-default);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.dark{--leftmenu-bg:#262626;--leftmenu-bg-expanded:#262626;--leftmenu-bg-stroke:#3b3b3b;--leftmenu-bg-stroke-expanded:#3b3b3b;--leftmenu-bg-overlayed:rgba(52,74,103,.94);--leftmenu-bg-blur:0px;--leftmenu-bg-blur-expanded:0px;--leftmenu-bg-divider:var(--ui-color-divider-default);--leftmenu-group-bg:transparent;--leftmenu-group-stroke:var(--ui-color-divider-default);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.edge-light{--leftmenu-bg:rgb(0 0 0/3%);--leftmenu-bg-expanded:rgb(0 0 0/2%);--leftmenu-bg-stroke:transparent;--leftmenu-bg-stroke-expanded:rgb(0 0 0/4%);--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:var(--ui-bg-blur-less);--leftmenu-bg-blur-expanded:var(--ui-bg-blur-less);--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:rgba(0,0,0,.1);--leftmenu-group-bg:var(--ui-color-bg-content-tertiary,rgb(0 0 0/3%));--leftmenu-group-stroke:var(--ui-color-divider-less);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.edge-dark{--leftmenu-bg:hsla(0,0%,100%,.06);--leftmenu-bg-expanded:hsla(0,0%,100%,.03);--leftmenu-bg-stroke:transparent;--leftmenu-bg-stroke-expanded:hsla(0,0%,100%,.06);--leftmenu-bg-overlayed:rgba(33,51,76,.94);--leftmenu-bg-blur:var(--ui-bg-blur-less);--leftmenu-bg-blur-expanded:var(--ui-bg-blur-less);--leftmenu-width:66px;--leftmenu-width-expanded:240px;--leftmenu-bg-divider:hsla(0,0%,100%,.1);--leftmenu-group-bg:var(--ui-color-bg-content-tertiary,hsla(0,0%,100%,.08));--leftmenu-group-stroke:var(--ui-color-divider-less);--leftmenu-group-stroke-weight:var(--ui-border-width-thin)}.air-header,.light .air-header{--topbar-bg:var(--ui-color-bg-content-secondary);--topbar-bg-stroke:var(--ui-color-bg-content-primary);--topbar-bg-stroke-weight:0;--topbar-bg-blur:0px}.dark .air-header{--topbar-bg:#2d2d2d;--topbar-bg-stroke:#3d3d3d;--topbar-bg-stroke-weight:0;--topbar-bg-blur:0px}.edge-dark .air-header{--topbar-bg:hsla(0,0%,100%,.1);--topbar-bg-stroke:transparent;--topbar-bg-stroke-weight:0px;--topbar-bg-blur:var(--ui-bg-blur-less)}.edge-light .air-header{--topbar-bg:rgba(0,0,0,.05);--topbar-bg-stroke:transparent;--topbar-bg-stroke-weight:0px;--topbar-bg-blur:var(--ui-bg-blur-less)}.air-header:before{background:linear-gradient(to right,var(--topbar-bg),var(--topbar-bg)),var(--air-theme-background-blurred,none);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}}

package/dist/runtime/components/DashboardSidebar.d.vue.ts

@@ -1,16 +1,16 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/dashboard-sidebar';
 import type { UseResizableProps } from '../composables/useResizable';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/dashboard-sidebar';
 type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
 type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
 type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
     /**
      * The mode of the sidebar menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/DashboardSidebar.vue

@@ -72,11 +72,22 @@ const Menu = computed(() => ({
   modal: B24Modal,
   drawer: B24Drawer
 })[props.mode]);
-const menuProps = toRef(() => defu(props.menu, {
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
+const menuProps = toRef(() => {
+  const modeSettings = props.mode === "modal" ? { fullscreen: true, transition: false, b24ui: { content: "p-0 pt-0" } } : props.mode === "slideover" ? { side: "left", close: false } : {};
+  return defu(
+    props.menu,
+    { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
+    modeSettings,
+    {
+      b24ui: {
+        overlay: b24ui.value.overlay({ class: uiProp.value?.overlay }),
+        content: b24ui.value.content({
+          class: [modeSettings.b24ui?.content, uiProp.value?.content]
+        })
+      }
+    }
+  );
+});
 function toggleOpen() {
   open.value = !open.value;
 }
@@ -141,10 +152,6 @@ function toggleOpen() {
     :title="t('dashboardSidebar.title')"
     :description="t('dashboardSidebar.description')"
     v-bind="menuProps"
-    :b24ui="{
-  overlay: b24ui.overlay({ class: uiProp?.overlay }),
-  content: b24ui.content({ class: uiProp?.content })
-}"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">

package/dist/runtime/components/DashboardSidebar.vue.d.ts

@@ -1,16 +1,16 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/dashboard-sidebar';
 import type { UseResizableProps } from '../composables/useResizable';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/dashboard-sidebar';
 type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
 type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
 type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
     /**
      * The mode of the sidebar menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/Header.d.vue.ts

@@ -1,8 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/header';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/header';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
 type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
@@ -16,7 +16,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
     to?: string;
     /**
      * The mode of the header menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/Header.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   as: { type: null, required: false, default: "header" },
   title: { type: String, required: false, default: "Bitrix24 UI" },
   to: { type: String, required: false, default: "/" },
-  mode: { type: null, required: false, default: "modal" },
+  mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "left" },
@@ -55,11 +55,22 @@ const Menu = computed(() => ({
   modal: B24Modal,
   drawer: B24Drawer
 })[props.mode]);
-const menuProps = toRef(() => defu(props.menu, {
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : {}));
+const menuProps = toRef(() => {
+  const modeSettings = props.mode === "modal" ? { fullscreen: true, transition: false, b24ui: { content: "p-0 pt-0" } } : props.mode === "slideover" ? { side: "left", close: false } : {};
+  return defu(
+    props.menu,
+    { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
+    modeSettings,
+    {
+      b24ui: {
+        overlay: b24ui.value.overlay({ class: uiProp.value?.overlay }),
+        content: b24ui.value.content({
+          class: [modeSettings.b24ui?.content, uiProp.value?.content]
+        })
+      }
+    }
+  );
+});
 function toggleOpen() {
   open.value = !open.value;
 }
@@ -125,10 +136,6 @@ function toggleOpen() {
     :title="t('header.title')"
     :description="t('header.description')"
     v-bind="menuProps"
-    :b24ui="{
-  overlay: b24ui.overlay({ class: uiProp?.overlay }),
-  content: b24ui.content({ class: uiProp?.content })
-}"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">

package/dist/runtime/components/Header.vue.d.ts

@@ -1,8 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/header';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/header';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
 type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
@@ -16,7 +16,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
     to?: string;
     /**
      * The mode of the header menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/Slideover.d.vue.ts

@@ -60,11 +60,6 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue false
      */
     dismissible?: boolean;
-    /**
-     * The content is placed on a light background.
-     * @defaultValue 'true'
-     */
-    useLightContent?: boolean;
     class?: any;
     b24ui?: Slideover['slots'];
 }
@@ -80,12 +75,6 @@ export interface SlideoverSlots {
     content?(props: {
         close: () => void;
     }): VNode[];
-    sidebar?(props: {
-        close: () => void;
-    }): VNode[];
-    navbar?(props: {
-        close: () => void;
-    }): VNode[];
     header?(props: {
         close: () => void;
     }): VNode[];
@@ -118,7 +107,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     side: Slideover["variants"]["side"];
     overlay: boolean;
-    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;

package/dist/runtime/components/Slideover.vue

@@ -14,7 +14,6 @@ import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
-import B24SidebarLayout from "./SidebarLayout.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -28,7 +27,6 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
-  useLightContent: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
@@ -104,103 +102,80 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close">
-          <template v-if="isBtnCloseExternal">
-            <DialogClose v-if="props.close || !!slots.close" as-child>
-              <slot name="close" :b24ui="b24ui">
-                <!-- @todo fix this css -->
-                <B24Button
-                  v-if="props.close"
-                  :icon="closeIcon || icons.close"
-                  class="group"
-                  color="air-primary"
-                  :aria-label="t('slideover.close')"
-                  size="lg"
-                  :b24ui="{
-  baseLine: 'ps-[4px] pe-[4px]',
+        <template v-if="isBtnCloseExternal && (props.close || !!slots.close)">
+          <DialogClose as-child>
+            <slot name="close" :b24ui="b24ui">
+              <B24Button
+                v-if="props.close"
+                :icon="closeIcon || icons.close"
+                class="group"
+                color="air-primary"
+                :aria-label="t('slideover.close')"
+                size="lg"
+                :b24ui="{
+  baseLine: 'ps-1 pe-1',
   label: 'hidden sm:flex'
 }"
-                  v-bind="typeof props.close === 'object' ? props.close : {}"
-                  data-slot="close"
-                  :class="b24ui.close({ class: uiProp?.close })"
-                />
-              </slot>
-            </DialogClose>
-          </template>
-          <B24SidebarLayout
-            :use-light-content="props.useLightContent"
-            is-inner
-            :b24ui="{
-  root: b24ui.sidebarLayoutRoot({ class: uiProp?.sidebarLayoutRoot }),
-  header: b24ui.sidebarLayoutHeaderWrapper({ class: uiProp?.sidebarLayoutHeaderWrapper }),
-  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: uiProp?.sidebarLayoutPageWrapper }),
-  container: b24ui.sidebarLayoutContainer({ class: uiProp?.sidebarLayoutContainer }),
-  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: uiProp?.sidebarLayoutPageBottomWrapper }),
-  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: uiProp?.sidebarLayoutLoadingWrapper }),
-  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: uiProp?.sidebarLayoutLoadingIcon })
-}"
-          >
-            <template v-if="!!slots['sidebar']" #sidebar>
-              <slot name="sidebar" :close="close" />
-            </template>
-
-            <template v-if="!!slots['navbar']" #navbar>
-              <slot name="navbar" :close="close" />
-            </template>
+                v-bind="typeof props.close === 'object' ? props.close : {}"
+                data-slot="close"
+                :class="b24ui.close({ class: uiProp?.close })"
+              />
+            </slot>
+          </DialogClose>
+        </template>
 
-            <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)" #content-top>
-              <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
-                <slot name="header" :close="close">
-                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
-                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
-                      <slot name="title">
-                        {{ title }}
-                      </slot>
-                    </DialogTitle>
+        <slot name="content" :close="close">
+          <div
+            v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)"
+            data-slot="header"
+            :class="b24ui.header({ class: uiProp?.header })"
+          >
+            <slot name="header" :close="close">
+              <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
 
-                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
-                      <slot name="description">
-                        {{ description }}
-                      </slot>
-                    </DialogDescription>
-                  </div>
-                  <template v-if="!isBtnCloseExternal && (props.close || !!slots.close)">
-                    <DialogClose v-if="props.close || !!slots.close" as-child>
-                      <slot name="close" :b24ui="b24ui">
-                        <B24Button
-                          v-if="props.close"
-                          :icon="closeIcon || icons.close"
-                          class="group"
-                          color="air-tertiary-no-accent"
-                          :aria-label="t('slideover.close')"
-                          size="lg"
-                          v-bind="typeof props.close === 'object' ? props.close : {}"
-                          data-slot="close"
-                          :class="b24ui.close({ class: uiProp?.close })"
-                        />
-                      </slot>
-                    </DialogClose>
-                  </template>
-                </slot>
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
               </div>
-            </template>
 
-            <template v-if="!!slots['actions']" #content-actions>
               <slot name="actions" />
-            </template>
 
-            <template v-if="!!slots['body']" #default>
-              <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
-                <slot name="body" :close="close" />
-              </div>
-            </template>
+              <template v-if="!isBtnCloseExternal && (props.close || !!slots.close)">
+                <DialogClose v-if="props.close || !!slots.close" as-child>
+                  <slot name="close" :b24ui="b24ui">
+                    <B24Button
+                      v-if="props.close"
+                      :icon="closeIcon || icons.close"
+                      class="group"
+                      color="air-tertiary-no-accent"
+                      :aria-label="t('slideover.close')"
+                      size="lg"
+                      v-bind="typeof props.close === 'object' ? props.close : {}"
+                      data-slot="close"
+                      :class="b24ui.close({ class: uiProp?.close })"
+                    />
+                  </slot>
+                </DialogClose>
+              </template>
+            </slot>
+          </div>
 
-            <template v-if="!!slots.footer" #content-bottom>
-              <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
-                <slot name="footer" :close="close" />
-              </div>
-            </template>
-          </B24SidebarLayout>
+          <template v-if="!!slots['body']">
+            <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+              <slot name="body" :close="close" />
+            </div>
+          </template>
+
+          <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+            <slot name="footer" :close="close" />
+          </div>
         </slot>
       </DialogContent>
     </DialogPortal>

package/dist/runtime/components/Slideover.vue.d.ts

@@ -60,11 +60,6 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue false
      */
     dismissible?: boolean;
-    /**
-     * The content is placed on a light background.
-     * @defaultValue 'true'
-     */
-    useLightContent?: boolean;
     class?: any;
     b24ui?: Slideover['slots'];
 }
@@ -80,12 +75,6 @@ export interface SlideoverSlots {
     content?(props: {
         close: () => void;
     }): VNode[];
-    sidebar?(props: {
-        close: () => void;
-    }): VNode[];
-    navbar?(props: {
-        close: () => void;
-    }): VNode[];
     header?(props: {
         close: () => void;
     }): VNode[];
@@ -118,7 +107,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     side: Slideover["variants"]["side"];
     overlay: boolean;
-    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;

package/dist/runtime/composables/index.d.ts

@@ -6,4 +6,7 @@ export * from './useOverlay';
 export * from './useResizable';
 export * from './useScrollspy';
 export * from './useToast';
+export * from './useDevice';
+export * from './useConfetti';
 export * from './useSpeechRecognition';
+export * from './color-mode/useColorMode';

package/dist/runtime/composables/index.js

@@ -6,4 +6,7 @@ export * from "./useOverlay.js";
 export * from "./useResizable.js";
 export * from "./useScrollspy.js";
 export * from "./useToast.js";
+export * from "./useDevice.js";
+export * from "./useConfetti.js";
 export * from "./useSpeechRecognition.js";
+export * from "./color-mode/useColorMode.js";

package/dist/runtime/composables/useDevice.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Breakpoints Tailwind
+ */
+declare const TAILWIND_BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+export type PlatformName = 'web' | 'bitrix-mobile' | 'bitrix-desktop';
+export type ScreenSize = keyof typeof TAILWIND_BREAKPOINTS | 'xs';
+export declare const useDevice: () => {
+    platform: Readonly<import("vue").Ref<{
+        readonly name?: PlatformName | undefined;
+        readonly version?: string | undefined;
+    }, {
+        readonly name?: PlatformName | undefined;
+        readonly version?: string | undefined;
+    }>>;
+    version: import("vue").ComputedRef<string | undefined>;
+    isWeb: import("vue").ComputedRef<boolean>;
+    isBitrixMobile: import("vue").ComputedRef<boolean>;
+    isBitrixDesktop: import("vue").ComputedRef<boolean>;
+    screen: import("vue").ComputedRef<{
+        current: ScreenSize;
+        xs: boolean;
+        sm: boolean;
+        md: boolean;
+        lg: boolean;
+        xl: boolean;
+        '2xl': boolean;
+        isMobile: boolean;
+        isTablet: boolean;
+        isDesktop: boolean;
+        isLargeDesktop: boolean;
+    }>;
+};
+export {};

package/dist/runtime/composables/useDevice.js

@@ -0,0 +1,62 @@
+import { useState } from "#imports";
+import { computed, readonly } from "vue";
+import { createSharedComposable, useMediaQuery } from "@vueuse/core";
+const TAILWIND_BREAKPOINTS = {
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1536
+};
+const _useDevice = () => {
+  const platform = useState("platform", () => ({}));
+  const isWeb = computed(() => platform.value.name === "web");
+  const isBitrixMobile = computed(() => platform.value.name === "bitrix-mobile");
+  const isBitrixDesktop = computed(() => platform.value.name === "bitrix-desktop");
+  const mediaQueries = {
+    "sm": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["sm"]}px)`),
+    "md": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["md"]}px)`),
+    "lg": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["lg"]}px)`),
+    "xl": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["xl"]}px)`),
+    "2xl": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["2xl"]}px)`)
+  };
+  const screen = computed(() => {
+    const sm = mediaQueries.sm.value;
+    const md = mediaQueries.md.value;
+    const lg = mediaQueries.lg.value;
+    const xl = mediaQueries.xl.value;
+    const xl2 = mediaQueries["2xl"].value;
+    let current = "xs";
+    if (xl2) current = "2xl";
+    else if (xl) current = "xl";
+    else if (lg) current = "lg";
+    else if (md) current = "md";
+    else if (sm) current = "sm";
+    else current = "xs";
+    return {
+      current,
+      "xs": !sm,
+      sm,
+      md,
+      lg,
+      xl,
+      "2xl": xl2,
+      "isMobile": !md,
+      "isTablet": md && !lg,
+      "isDesktop": lg,
+      "isLargeDesktop": xl2
+    };
+  });
+  return {
+    // Platform data
+    platform: readonly(platform),
+    version: computed(() => platform.value.version),
+    // Platform flags
+    isWeb,
+    isBitrixMobile,
+    isBitrixDesktop,
+    // Screen information
+    screen
+  };
+};
+export const useDevice = /* @__PURE__ */ createSharedComposable(_useDevice);

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "#build/b24ui.css";@import "./keyframes.css";@import "./air-design-tokens/tw-style/index.css";@import "./air-design-tokens/index.css";@variant light (&:where(.light, .light *));@variant edge-dark (&:where(.edge-dark, .edge-dark *));@variant edge-light (&:where(.edge-light, .edge-light *));@variant dark (&:where(.dark, .dark *));@variant bitrix-mobile (&:where(html[data-platform="bitrix-mobile"] *));@variant bitrix-desktop (&:where(html[data-platform="bitrix-desktop"] *));@layer base{.sidebar-layout.--inner,body{--air-theme-background:var(--air-theme-bg-image,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll) var(--air-theme-bg-color,transparent);--air-theme-background-blurred:var(--air-theme-bg-image-blurred,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll)}}@layer theme{:host,:root{--b24ui-header-height:--spacing(14.5)}}@theme default inline{--text-color-dimmed:var(--ui-color-base-6);--text-color-muted:var(--ui-color-design-plain-na-content-secondary);--text-color-description:var(--b24ui-typography-description-color);--text-color-legend:var(--b24ui-typography-legend-color);--text-color-label:var(--b24ui-typography-label-color)}
+@import "#build/b24ui.css";@import "./keyframes.css";@import "./air-design-tokens/tw-style/index.css";@import "./air-design-tokens/index.css";@variant light (&:where(.light, .light *));@variant edge-dark (&:where(.edge-dark, .edge-dark *));@variant edge-light (&:where(.edge-light, .edge-light *));@variant dark (&:where(.dark, .dark *));@variant bitrix-mobile (&:where(html[data-platform="bitrix-mobile"] *));@variant bitrix-desktop (&:where(html[data-platform="bitrix-desktop"] *));@variant web (&:where(html[data-platform="web"] *));@layer base{.air-custom-bg,.sidebar-layout.--inner,body{--air-theme-background:var(--air-theme-bg-image,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll) var(--air-theme-bg-color,transparent);--air-theme-background-blurred:var(--air-theme-bg-image-blurred,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll)}}@layer theme{:host,:root{--b24ui-header-height:--spacing(14.5)}}@theme default inline{--text-color-dimmed:var(--ui-color-base-6);--text-color-muted:var(--ui-color-design-plain-na-content-secondary);--text-color-description:var(--b24ui-typography-description-color);--text-color-legend:var(--b24ui-typography-legend-color);--text-color-label:var(--b24ui-typography-label-color)}

package/dist/runtime/plugins/platform.d.ts

@@ -1,5 +1,5 @@
 /**
- * Plugin to detect the Bitrix24 mobile application environment.
+ * Plugin to detect the Bitrix24 application environment.
  *
  * @description
  * 1. Analyzes the User-Agent on the server-side (SSR) or client-side.

package/dist/shared/{b24ui-nuxt.C-GSAtA1.mjs → b24ui-nuxt.D2-pCbE6.mjs}

@@ -8,7 +8,7 @@ import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.4.2";
+const version = "2.5.2";
 
 function getDefaultConfig(theme) {
   return {
@@ -2876,7 +2876,7 @@ 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-e-0 lg:not-last:border-(--ui-color-divider-default) shrink-0",
-    body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-4 sm:pt-0 scrollbar-thin",
+    body: "flex flex-col gap-4 flex-1 overflow-y-auto sm:p-4 sm:pt-0 scrollbar-thin",
     handle: ""
   },
   variants: {
@@ -2943,12 +2943,15 @@ const dashboardSidebar = {
     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)]"
+      "light:bg-transparent"
     ].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 ps-4 pe-4 py-2 scrollbar-thin scrollbar-transparent",
+    body: [
+      "flex flex-col gap-4 flex-1 overflow-y-auto py-2 ps-4 pe-4 md:pe-2 scrollbar-thin scrollbar-transparent",
+      "light:[--leftmenu-group-stroke:var(--ui-color-base-30)]"
+    ],
     footer: [
-      "shrink-0 flex items-center gap-1.5 ps-4 pe-4 py-2",
+      "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(" "),
@@ -6036,7 +6039,10 @@ const navigationMenu = {
           "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: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",
@@ -6061,6 +6067,8 @@ const navigationMenu = {
         list: "flex flex-col",
         item: [
           "mt-(--menu-item-block-stack-space)",
+          // @see `--leftmenu-group-stroke` src/runtime/air-design-tokens/components/navigation-menu.css:75
+          // @see `light:--leftmenu-group-stroke` src/theme/dashboard-sidebar.ts:16
           "data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke)"
         ].join(" "),
         link: [
@@ -6103,11 +6111,7 @@ const navigationMenu = {
     },
     active: {
       true: {
-        /**
-         * @memo Special color for `light` mode - see b24.settings.
-         * @see src/runtime/air-design-tokens/components/navigation-menu.css
-         */
-        link: "light:font-semibold",
+        link: "",
         childLink: [
           "text-(--ui-color-accent-main-primary)",
           "hover:text-(--ui-color-accent-main-primary)"
@@ -6148,7 +6152,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]"
@@ -8299,25 +8303,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)",
@@ -8331,26 +8345,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: {
@@ -8365,34 +8365,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: {
@@ -8410,13 +8400,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",
@@ -8432,13 +8421,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",
@@ -8451,18 +8439,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",
@@ -8472,8 +8457,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(" ")
       }
     },
     {
@@ -8483,13 +8467,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",
@@ -8500,13 +8483,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 ////
@@ -8516,7 +8498,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(" ")
       }
@@ -8527,7 +8509,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(" ")
@@ -8537,17 +8519,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 ////
@@ -9667,11 +9645,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(" "),
@@ -9683,8 +9661,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: {
@@ -9694,7 +9671,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" },
@@ -11703,7 +11680,8 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   }
 
   /* @deprecate This rule is deprecated and will be removed in version 3.0.0 */
-  .sidebar-layout.--inner {
+  .sidebar-layout.--inner,
+  .air-custom-bg {
     background: var(--air-theme-background);
   }
 }

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.C-GSAtA1.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.C-GSAtA1.mjs';
+import './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import 'scule';
 import 'knitwork';
 import '@nuxt/kit';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
   "description": "Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE",
-  "version": "2.4.2",
+  "version": "2.5.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"