@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -11,15 +11,14 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeadingSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeadingSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/SidebarHeading.vue

@@ -6,19 +6,21 @@ import theme from "#build/b24ui/sidebar-heading";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "h6" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarHeading", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarHeading || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -11,15 +11,14 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeadingSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeadingSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -77,9 +77,14 @@ export interface SidebarLayoutSlots {
         b24ui: SidebarLayout['b24ui'];
     }) => any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
+    offContentScrollbar: boolean;
+    useLightContent: boolean;
+    as: any;
+    isInner: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/SidebarLayout.vue

@@ -7,6 +7,7 @@ import { ref, computed, watch, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import B24Button from "./Button.vue";
@@ -23,12 +24,13 @@ const props = defineProps({
   isInner: { type: Boolean, required: false, default: false },
   offContentScrollbar: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   id: { type: String, required: false }
 });
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarLayout", props);
 const route = useRoute();
 const isUseSideBar = computed(() => !!slots.sidebar);
 const isUseNavbar = computed(() => !!slots.navbar);
@@ -69,7 +71,7 @@ const handleNavigationClick = () => {
     data-state="isLoading ? 'loading' : 'show'"
     :as="as"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <!-- isLoading -->
     <slot name="loading" :is-loading="isLoading" :b24ui="b24ui">
@@ -82,10 +84,10 @@ const handleNavigationClick = () => {
         overlay-blur="off"
       >
         <template #content>
-          <div data-slot="loadingWrapper" :class="b24ui.loadingWrapper({ class: props.b24ui?.loadingWrapper })">
+          <div data-slot="loadingWrapper" :class="b24ui.loadingWrapper({ class: uiProp?.loadingWrapper })">
             <BtnSpinnerIcon
               data-slot="loadingIcon"
-              :class="b24ui.loadingIcon({ class: props.b24ui?.loadingIcon })"
+              :class="b24ui.loadingIcon({ class: uiProp?.loadingIcon })"
               aria-hidden="true"
             />
           </div>
@@ -93,23 +95,23 @@ const handleNavigationClick = () => {
       </B24Slideover>
     </slot>
     <template v-if="isUseSideBar">
-      <div data-slot="sidebar" :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
+      <div data-slot="sidebar" :class="b24ui.sidebar({ class: uiProp?.sidebar })">
         <B24Sidebar>
           <slot name="sidebar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
         </B24Sidebar>
       </div>
     </template>
 
-    <div data-slot="contentWrapper" :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })">
+    <div data-slot="contentWrapper" :class="b24ui.contentWrapper({ class: uiProp?.contentWrapper })">
       <header
         v-if="isUseNavbar"
         data-slot="header"
-        :class="b24ui.header({ class: props.b24ui?.header })"
+        :class="b24ui.header({ class: uiProp?.header })"
       >
         <div
           v-if="isUseSideBar"
           data-slot="headerMenuIcon"
-          :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
+          :class="b24ui.headerMenuIcon({ class: uiProp?.headerMenuIcon })"
         >
           <B24Slideover
             v-model:open="openSidebarSlideover"
@@ -117,7 +119,7 @@ const handleNavigationClick = () => {
             :description="t('sidebarLayout.slideoverDescription')"
             side="left"
             :b24ui="{
-  content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer })
+  content: b24ui.sidebarSlideoverContainer({ class: uiProp?.sidebarSlideoverContainer })
 }"
           >
             <B24Button
@@ -128,9 +130,9 @@ const handleNavigationClick = () => {
             />
 
             <template #content>
-              <div data-slot="sidebarSlideover" :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+              <div data-slot="sidebarSlideover" :class="b24ui.sidebarSlideover({ class: uiProp?.sidebarSlideover })">
                 <B24Sidebar>
-                  <div data-slot="sidebarSlideoverBtnClose" :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                  <div data-slot="sidebarSlideoverBtnClose" :class="b24ui.sidebarSlideoverBtnClose({ class: uiProp?.sidebarSlideoverBtnClose })">
                     <B24ModalDialogClose>
                       <B24Button
                         color="air-tertiary"
@@ -147,26 +149,26 @@ const handleNavigationClick = () => {
             </template>
           </B24Slideover>
         </div>
-        <div data-slot="headerWrapper" :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+        <div data-slot="headerWrapper" :class="b24ui.headerWrapper({ class: uiProp?.headerWrapper })">
           <B24Navbar>
             <slot name="navbar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
           </B24Navbar>
         </div>
       </header>
 
-      <div data-slot="pageWrapper" :class="b24ui.pageWrapper({ class: props.b24ui?.pageWrapper })">
+      <div data-slot="pageWrapper" :class="b24ui.pageWrapper({ class: uiProp?.pageWrapper })">
         <template v-if="!!slots['content-top'] || !!slots['content-actions'] || !!slots['default']">
-          <main data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+          <main data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
             <template v-if="!!slots['content-top']">
               <!-- Page Top -->
-              <div data-slot="pageTopWrapper" :class="b24ui.pageTopWrapper({ class: props.b24ui?.pageTopWrapper })">
+              <div data-slot="pageTopWrapper" :class="b24ui.pageTopWrapper({ class: uiProp?.pageTopWrapper })">
                 <slot name="content-top" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
 
             <template v-if="!!slots['content-actions']">
               <!-- Page Actions -->
-              <div data-slot="pageActionsWrapper" :class="b24ui.pageActionsWrapper({ class: props.b24ui?.pageActionsWrapper })">
+              <div data-slot="pageActionsWrapper" :class="b24ui.pageActionsWrapper({ class: uiProp?.pageActionsWrapper })">
                 <slot name="content-actions" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
@@ -176,9 +178,9 @@ const handleNavigationClick = () => {
               <div
                 :data-content="props.useLightContent ? 'use-light' : 'not-set'"
                 data-slot="containerWrapper"
-                :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })"
+                :class="b24ui.containerWrapper({ class: uiProp?.containerWrapper })"
               >
-                <div data-slot="containerWrapperInner" :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+                <div data-slot="containerWrapperInner" :class="b24ui.containerWrapperInner({ class: uiProp?.containerWrapperInner })">
                   <slot :is-loading="isLoading" :b24ui="b24ui" />
                 </div>
               </div>
@@ -187,14 +189,14 @@ const handleNavigationClick = () => {
         </template>
 
         <template v-if="!!slots['content-right']">
-          <div data-slot="pageRightWrapper" :class="b24ui.pageRightWrapper({ class: props.b24ui?.pageRightWrapper })">
+          <div data-slot="pageRightWrapper" :class="b24ui.pageRightWrapper({ class: uiProp?.pageRightWrapper })">
             <slot name="content-right" :is-loading="isLoading" :b24ui="b24ui" />
           </div>
         </template>
       </div>
       <template v-if="!!slots['content-bottom']">
         <!-- Page Bottom -->
-        <div data-slot="pageBottomWrapper" :class="b24ui.pageBottomWrapper({ class: props.b24ui?.pageBottomWrapper })">
+        <div data-slot="pageBottomWrapper" :class="b24ui.pageBottomWrapper({ class: uiProp?.pageBottomWrapper })">
           <slot name="content-bottom" :is-loading="isLoading" :b24ui="b24ui" />
         </div>
       </template>

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

@@ -77,9 +77,14 @@ export interface SidebarLayoutSlots {
         b24ui: SidebarLayout['b24ui'];
     }) => any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
+    offContentScrollbar: boolean;
+    useLightContent: boolean;
+    as: any;
+    isInner: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -11,15 +11,14 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSectionSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/SidebarSection.vue

@@ -6,14 +6,16 @@ import theme from "#build/b24ui/sidebar-section";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarSection", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarSection || {} })());
 </script>
 
@@ -22,7 +24,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
     :as="as"
     data-component="section"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -11,15 +11,14 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSectionSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -11,15 +11,14 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSpacerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSpacerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/SidebarSpacer.vue

@@ -6,19 +6,21 @@ import theme from "#build/b24ui/sidebar-spacer";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarSpacer", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarSpacer || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-hidden="true" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" aria-hidden="true" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -11,15 +11,14 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSpacerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSpacerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -15,11 +15,13 @@ export interface SkeletonProps {
     class?: any;
     b24ui?: Skeleton['slots'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    accent: Skeleton["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Skeleton.vue

@@ -6,14 +6,16 @@ import theme from "#build/b24ui/skeleton";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   accent: { type: null, required: false, default: "default" },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("skeleton", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleton || {} })({
   accent: props.accent
 }));
@@ -27,7 +29,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleto
     aria-live="polite"
     role="alert"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -15,11 +15,13 @@ export interface SkeletonProps {
     class?: any;
     b24ui?: Skeleton['slots'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    accent: Skeleton["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -101,6 +101,8 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -111,9 +113,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    side: Slideover["variants"]["side"];
+    overlay: boolean;
+    useLightContent: boolean;
+    transition: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlayBlur: Slideover["variants"]["overlayBlur"];
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Slideover.vue

@@ -7,8 +7,10 @@ import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
@@ -28,7 +30,7 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false, default: true },
   useLightContent: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -37,6 +39,7 @@ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "updat
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("slideover", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -51,7 +54,9 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
-  return {};
+  return {
+    pointerDownOutside
+  };
 });
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideover || {} })({
   transition: props.transition,
@@ -70,12 +75,12 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })" />
 
       <DialogContent
         :data-side="side"
         data-slot="content"
-        :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+        :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
         @after-leave="emits('after:leave')"
@@ -117,7 +122,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
 }"
                   v-bind="typeof props.close === 'object' ? props.close : {}"
                   data-slot="close"
-                  :class="b24ui.close({ class: props.b24ui?.close })"
+                  :class="b24ui.close({ class: uiProp?.close })"
                 />
               </slot>
             </DialogClose>
@@ -126,13 +131,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             :use-light-content="props.useLightContent"
             is-inner
             :b24ui="{
-  root: b24ui.sidebarLayoutRoot({ class: props.b24ui?.sidebarLayoutRoot }),
-  header: b24ui.sidebarLayoutHeaderWrapper({ class: props.b24ui?.sidebarLayoutHeaderWrapper }),
-  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: props.b24ui?.sidebarLayoutPageWrapper }),
-  container: b24ui.sidebarLayoutContainer({ class: props.b24ui?.sidebarLayoutContainer }),
-  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: props.b24ui?.sidebarLayoutPageBottomWrapper }),
-  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: props.b24ui?.sidebarLayoutLoadingWrapper }),
-  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: props.b24ui?.sidebarLayoutLoadingIcon })
+  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>
@@ -144,16 +149,16 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </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: props.b24ui?.header })">
+              <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
                 <slot name="header" :close="close">
-                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <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: props.b24ui?.description })">
+                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
                       <slot name="description">
                         {{ description }}
                       </slot>
@@ -171,7 +176,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
                           size="lg"
                           v-bind="typeof props.close === 'object' ? props.close : {}"
                           data-slot="close"
-                          :class="b24ui.close({ class: props.b24ui?.close })"
+                          :class="b24ui.close({ class: uiProp?.close })"
                         />
                       </slot>
                     </DialogClose>
@@ -185,13 +190,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </template>
 
             <template v-if="!!slots['body']" #default>
-              <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+              <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
                 <slot name="body" :close="close" />
               </div>
             </template>
 
             <template v-if="!!slots.footer" #content-bottom>
-              <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+              <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
                 <slot name="footer" :close="close" />
               </div>
             </template>