@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/Separator.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Separator, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
@@ -24,6 +25,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("separator", props);
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
   accent: props.accent,
@@ -34,19 +36,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separat
 </script>
 
 <template>
-  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
+  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="border" :class="b24ui.border({ class: uiProp?.border })" />
 
     <template v-if="label !== void 0 && label !== null || icon || avatar || !!slots.default">
-      <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">{{ label }}</span>
-          <Component :is="icon" v-else-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-          <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">{{ label }}</span>
+          <Component :is="icon" v-else-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
+          <B24Avatar v-else-if="avatar" :size="uiProp?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: uiProp?.avatar })" />
         </slot>
       </div>
 
-      <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
+      <div data-slot="border" :class="b24ui.border({ class: uiProp?.border })" />
     </template>
   </Separator>
 </template>

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

@@ -51,9 +51,9 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
     size: Separator["variants"]["size"];
-    accent: Separator["variants"]["accent"];
-    type: Separator["variants"]["type"];
     orientation: Separator["variants"]["orientation"];
+    type: Separator["variants"]["type"];
+    accent: Separator["variants"]["accent"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Sidebar.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar";
 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" },
@@ -14,12 +15,13 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebar", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar || {} })());
 </script>
 
 <template>
   <!-- Sidebar -->
-  <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/SidebarBody.d.vue.ts

@@ -15,9 +15,6 @@ export interface SidebarBodyProps {
     class?: any;
     b24ui?: SidebarBody['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarBodySlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarBody.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-body";
 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" },
@@ -15,13 +16,14 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarBody", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarBody || {} })({
   scrollbarThin: Boolean(props.scrollbarThin)
 }));
 </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/SidebarBody.vue.d.ts

@@ -15,9 +15,6 @@ export interface SidebarBodyProps {
     class?: any;
     b24ui?: SidebarBody['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarBodySlots {
     default(props?: {}): any;
 }

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

@@ -11,9 +11,6 @@ export interface SidebarFooterProps {
     class?: any;
     b24ui?: SidebarFooter['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarFooterSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarFooter.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-footer";
 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" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarFooter", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarFooter || {} })());
 </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/SidebarFooter.vue.d.ts

@@ -11,9 +11,6 @@ export interface SidebarFooterProps {
     class?: any;
     b24ui?: SidebarFooter['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarFooterSlots {
     default(props?: {}): any;
 }

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

@@ -11,9 +11,6 @@ export interface SidebarHeaderProps {
     class?: any;
     b24ui?: SidebarHeader['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeaderSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarHeader.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-header";
 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" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarHeader", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarHeader || {} })());
 </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/SidebarHeader.vue.d.ts

@@ -11,9 +11,6 @@ export interface SidebarHeaderProps {
     class?: any;
     b24ui?: SidebarHeader['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeaderSlots {
     default(props?: {}): any;
 }

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

@@ -11,9 +11,6 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarHeading.vue

@@ -6,6 +6,7 @@ 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" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 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,9 +11,6 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }

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

@@ -80,9 +80,9 @@ export interface 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<{}>, {
-    as: any;
     offContentScrollbar: boolean;
     useLightContent: boolean;
+    as: any;
     isInner: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {

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";
@@ -29,6 +30,7 @@ const props = defineProps({
 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

@@ -80,9 +80,9 @@ export interface 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<{}>, {
-    as: any;
     offContentScrollbar: boolean;
     useLightContent: boolean;
+    as: any;
     isInner: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -11,9 +11,6 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarSection.vue

@@ -6,6 +6,7 @@ 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" },
@@ -14,6 +15,7 @@ const props = defineProps({
 });
 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,9 +11,6 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }

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

@@ -11,9 +11,6 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarSpacer.vue

@@ -6,6 +6,7 @@ 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" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 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,9 +11,6 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/Skeleton.vue

@@ -6,6 +6,7 @@ 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" },
@@ -14,6 +15,7 @@ const props = defineProps({
   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/Slideover.d.vue.ts

@@ -115,14 +115,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    side: Slideover["variants"]["side"];
+    overlay: boolean;
+    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
-    side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;
-    useLightContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {