@bitrix24/b24ui-nuxt 2.1.2 → 2.1.4

package/dist/runtime/components/Select.vue

@@ -144,7 +144,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive as="div" :class="b24ui.root({ class: [props.b24ui?.root] })">
+  <Primitive as="div" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root] })">
     <SelectRoot
       v-slot="{ modelValue, open }"
       :name="name"
@@ -159,27 +159,31 @@ defineExpose({
       <SelectTrigger
         :id="id"
         ref="triggerRef"
+        data-slot="base"
         :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
         v-bind="{ ...$attrs, ...ariaAttrs }"
       >
         <B24Badge
           v-if="isTag"
+          data-slot="tag"
           :class="b24ui.tag({ class: props.b24ui?.tag })"
           :color="props.tagColor"
           :label="props.tag"
           size="xs"
         />
-        <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+        <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :b24ui="b24ui">
             <Component
               :is="leadingIconName"
               v-if="isLeading && leadingIconName"
+              data-slot="leadingIcon"
               :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
             />
             <B24Avatar
               v-else-if="!!avatar"
               :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
               v-bind="avatar"
+              data-slot="leadingAvatar"
               :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
             />
           </slot>
@@ -189,12 +193,14 @@ defineExpose({
           <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
             <span
               v-if="displayedModelValue !== void 0 && displayedModelValue !== null"
+              data-slot="value"
               :class="b24ui.value({ class: props.b24ui?.value })"
             >
               {{ displayedModelValue }}
             </span>
             <span
               v-else
+              data-slot="placeholder"
               :class="b24ui.placeholder({ class: props.b24ui?.placeholder })"
             >
               {{ placeholder ?? "\xA0" }}
@@ -202,11 +208,12 @@ defineExpose({
           </template>
         </slot>
 
-        <span v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
           <slot name="trailing" :model-value="modelValue" :open="open" :b24ui="b24ui">
             <Component
               :is="trailingIconName"
               v-if="trailingIconName"
+              data-slot="trailingIcon"
               :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
             />
           </slot>
@@ -214,23 +221,25 @@ defineExpose({
       </SelectTrigger>
 
       <SelectPortal v-bind="portalProps">
-        <SelectContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
+        <SelectContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
           <slot name="content-top" />
 
           <div
             role="presentation"
+            data-slot="viewport"
             :class="b24ui.viewport({ class: props.b24ui?.viewport })"
           >
-            <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
+            <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
               <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-                <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })">
+                <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })">
                   {{ get(item, props.labelKey) }}
                 </SelectLabel>
 
-                <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator, item.class] })" />
+                <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator, item.class] })" />
 
                 <RSelectItem
                   v-else
+                  data-slot="item"
                   :class="b24ui.item({ class: [props.b24ui?.item, isSelectItem(item) && item.b24ui?.item, isSelectItem(item) && item.class], colorItem: isSelectItem(item) && item?.color || void 0 })"
                   :disabled="isSelectItem(item) && item.disabled"
                   :value="isSelectItem(item) ? get(item, props.valueKey) : item"
@@ -242,12 +251,13 @@ defineExpose({
                         v-if="isSelectItem(item) && item.avatar"
                         :size="item.b24ui?.itemLeadingAvatarSize || props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
                         v-bind="item.avatar"
+                        data-slot="itemLeadingAvatar"
                         :class="b24ui.itemLeadingAvatar({ class: [props.b24ui?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], colorItem: item?.color })"
                       />
                     </slot>
 
-                    <span :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, isSelectItem(item) && item.b24ui?.itemWrapper] })">
-                      <SelectItemText :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isSelectItem(item) && item.b24ui?.itemLabel] })">
+                    <span data-slot="itemWrapper" :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, isSelectItem(item) && item.b24ui?.itemWrapper] })">
+                      <SelectItemText data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isSelectItem(item) && item.b24ui?.itemLabel] })">
                         <slot name="item-label" :item="item" :index="index">
                           {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
                         </slot>
@@ -255,6 +265,7 @@ defineExpose({
 
                       <span
                         v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])"
+                        data-slot="itemDescription"
                         :class="b24ui.itemDescription({ class: [props.b24ui?.itemDescription, isSelectItem(item) && item.b24ui?.itemDescription] })"
                       >
                         <slot
@@ -267,10 +278,11 @@ defineExpose({
                       </span>
                     </span>
 
-                    <span :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isSelectItem(item) && item.b24ui?.itemTrailing], colorItem: isSelectItem(item) && item?.color || void 0 })">
+                    <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isSelectItem(item) && item.b24ui?.itemTrailing], colorItem: isSelectItem(item) && item?.color || void 0 })">
                       <SelectItemIndicator as-child>
                         <Component
                           :is="selectedIcon || icons.check"
+                          data-slot="itemTrailingIcon"
                           :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, isSelectItem(item) && item.b24ui?.itemTrailingIcon], colorItem: isSelectItem(item) && item?.color || void 0 })"
                         />
                       </SelectItemIndicator>
@@ -279,6 +291,7 @@ defineExpose({
                         <Component
                           :is="item.icon"
                           v-if="isSelectItem(item) && item.icon"
+                          data-slot="itemLeadingIcon"
                           :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], colorItem: item?.color })"
                         />
                         <B24Chip
@@ -287,6 +300,7 @@ defineExpose({
                           inset
                           standalone
                           v-bind="item.chip"
+                          data-slot="itemLeadingChip"
                           :class="b24ui.itemLeadingChip({ class: [props.b24ui?.itemLeadingChip, item.b24ui?.itemLeadingChip], colorItem: item?.color })"
                         />
                       </slot>
@@ -299,7 +313,7 @@ defineExpose({
 
           <slot name="content-bottom" />
 
-          <SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+          <SelectArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
         </SelectContent>
       </SelectPortal>
     </SelectRoot>

package/dist/runtime/components/SelectMenu.vue

@@ -14,6 +14,7 @@ import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Badge from "./Badge.vue";
@@ -77,16 +78,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaul
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-  estimateSize: {
-    xss: 20,
-    xs: 24,
-    sm: 28,
-    md: 32,
-    lg: 36,
-    xl: 40
-  }[props.size || "md"]
-}));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(items.value, props.size || "md", props.descriptionKey)
+  });
+});
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "text", size: "md" }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
@@ -218,6 +215,11 @@ function onUpdateOpen(value) {
     clearTimeout(timeoutId);
   }
 }
+function onCreate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  emits("create", searchTerm.value);
+}
 function onSelect(e, item) {
   if (!isSelectItem(item)) {
     return;
@@ -239,14 +241,16 @@ defineExpose({
 <template>
   <DefineCreateItemTemplate>
     <ComboboxItem
+      data-slot="item"
       :class="b24ui.item({ addNew: true, class: props.b24ui?.item })"
       :value="searchTerm"
-      @select.prevent="emits('create', searchTerm)"
+      @select="onCreate"
     >
-      <span :class="b24ui.itemLabel({ addNew: true, class: props.b24ui?.itemLabel })">
+      <span data-slot="itemLabel" :class="b24ui.itemLabel({ addNew: true, class: props.b24ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           <Component
             :is="icons.plus"
+            data-slot="itemLeadingIcon"
             :class="b24ui.itemLeadingIcon({ addNew: true, class: props.b24ui?.itemLeadingIcon })"
           />
           {{ t("selectMenu.create", { label: searchTerm }) }}
@@ -258,6 +262,7 @@ defineExpose({
   <DefineItemTemplate v-slot="{ item, index }">
     <ComboboxLabel
       v-if="isSelectItem(item) && item.type === 'label'"
+      data-slot="label"
       :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })"
     >
       {{ get(item, props.labelKey) }}
@@ -265,11 +270,13 @@ defineExpose({
 
     <ComboboxSeparator
       v-else-if="isSelectItem(item) && item.type === 'separator'"
+      data-slot="separator"
       :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator, item.class] })"
     />
 
     <ComboboxItem
       v-else
+      data-slot="item"
       :class="b24ui.item({ class: [props.b24ui?.item, isSelectItem(item) && item.b24ui?.item, isSelectItem(item) && item.class], colorItem: isSelectItem(item) && item?.color || void 0 })"
       :disabled="isSelectItem(item) && item.disabled"
       :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
@@ -281,12 +288,13 @@ defineExpose({
             v-if="isSelectItem(item) && item.avatar"
             :size="item.b24ui?.itemLeadingAvatarSize || props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
             v-bind="item.avatar"
+            data-slot="itemLeadingAvatar"
             :class="b24ui.itemLeadingAvatar({ class: [props.b24ui?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], colorItem: item?.color })"
           />
         </slot>
 
-        <span :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, isSelectItem(item) && item.b24ui?.itemWrapper] })">
-          <span :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isSelectItem(item) && item.b24ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, isSelectItem(item) && item.b24ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isSelectItem(item) && item.b24ui?.itemLabel] })">
             <slot name="item-label" :item="item" :index="index">
               {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
             </slot>
@@ -294,6 +302,7 @@ defineExpose({
 
           <span
             v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])"
+            data-slot="itemDescription"
             :class="b24ui.itemDescription({ class: [props.b24ui?.itemDescription, isSelectItem(item) && item.b24ui?.itemDescription] })"
           >
             <slot
@@ -306,10 +315,11 @@ defineExpose({
           </span>
         </span>
 
-        <span :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isSelectItem(item) && item.b24ui?.itemTrailing], colorItem: isSelectItem(item) && item?.color || void 0 })">
+        <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isSelectItem(item) && item.b24ui?.itemTrailing], colorItem: isSelectItem(item) && item?.color || void 0 })">
           <ComboboxItemIndicator as-child>
             <Component
               :is="selectedIcon || icons.check"
+              data-slot="itemTrailingIcon"
               :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, isSelectItem(item) && item.b24ui?.itemTrailingIcon], colorItem: isSelectItem(item) && item?.color || void 0 })"
             />
           </ComboboxItemIndicator>
@@ -318,6 +328,7 @@ defineExpose({
             <Component
               :is="item.icon"
               v-if="isSelectItem(item) && item.icon"
+              data-slot="itemLeadingIcon"
               :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], colorItem: item?.color })"
             />
             <B24Chip
@@ -326,6 +337,7 @@ defineExpose({
               inset
               standalone
               v-bind="item.chip"
+              data-slot="itemLeadingChip"
               :class="b24ui.itemLeadingChip({ class: [props.b24ui?.itemLeadingChip, item.b24ui?.itemLeadingChip], colorItem: item?.color })"
             />
           </slot>
@@ -334,7 +346,7 @@ defineExpose({
     </ComboboxItem>
   </DefineItemTemplate>
 
-  <Primitive as="div" :class="b24ui.root({ addNew: true, class: [props.b24ui?.root] })">
+  <Primitive as="div" data-slot="root" :class="b24ui.root({ addNew: true, class: [props.b24ui?.root] })">
     <ComboboxRoot
       :id="id"
       v-slot="{ modelValue, open }"
@@ -349,27 +361,31 @@ defineExpose({
       <ComboboxAnchor as-child>
         <ComboboxTrigger
           ref="triggerRef"
+          data-slot="base"
           :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
           tabindex="0"
         >
           <B24Badge
             v-if="isTag"
+            data-slot="tag"
             :class="b24ui.tag({ class: props.b24ui?.tag })"
             :color="props.tagColor"
             :label="props.tag"
             size="xs"
           />
-          <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+          <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
             <slot name="leading" :model-value="modelValue" :open="open" :b24ui="b24ui">
               <Component
                 :is="leadingIconName"
                 v-if="isLeading && leadingIconName"
+                data-slot="leadingIcon"
                 :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
               />
               <B24Avatar
                 v-else-if="!!avatar"
                 :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
                 v-bind="avatar"
+                data-slot="leadingAvatar"
                 :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
               />
             </slot>
@@ -379,12 +395,14 @@ defineExpose({
             <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
               <span
                 v-if="displayedModelValue !== void 0 && displayedModelValue !== null"
+                data-slot="value"
                 :class="b24ui.value({ class: props.b24ui?.value })"
               >
                 {{ displayedModelValue }}
               </span>
               <span
                 v-else
+                data-slot="placeholder"
                 :class="b24ui.placeholder({ class: props.b24ui?.placeholder })"
               >
                 {{ placeholder ?? "\xA0" }}
@@ -392,11 +410,12 @@ defineExpose({
             </template>
           </slot>
 
-          <span v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+          <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
             <slot name="trailing" :model-value="modelValue" :open="open" :b24ui="b24ui">
               <Component
                 :is="trailingIconName"
                 v-if="trailingIconName"
+                data-slot="trailingIcon"
                 :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
               />
             </slot>
@@ -405,8 +424,8 @@ defineExpose({
       </ComboboxAnchor>
 
       <ComboboxPortal v-bind="portalProps">
-        <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
-          <FocusScope trapped :class="b24ui.focusScope({ class: props.b24ui?.focusScope })">
+        <ComboboxContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
+          <FocusScope trapped data-slot="focusScope" :class="b24ui.focusScope({ class: props.b24ui?.focusScope })">
             <slot name="content-top" />
 
             <ComboboxInput
@@ -421,11 +440,13 @@ defineExpose({
                 autocomplete="off"
                 :size="size"
                 v-bind="searchInputProps"
+                data-slot="input"
                 :class="b24ui.input({ class: props.b24ui?.input })"
+                @change.stop
               />
             </ComboboxInput>
 
-            <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
+            <ComboboxEmpty data-slot="empty" :class="b24ui.empty({ class: props.b24ui?.empty })">
               <slot name="empty" :search-term="searchTerm">
                 {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.noData") }}
               </slot>
@@ -433,6 +454,7 @@ defineExpose({
 
             <div
               role="presentation"
+              data-slot="viewport"
               :class="b24ui.viewport({ class: props.b24ui?.viewport })"
             >
               <template v-if="!!virtualize">
@@ -451,15 +473,15 @@ defineExpose({
               </template>
 
               <template v-else>
-                <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="b24ui.group({ class: props.b24ui?.group })">
+                <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
                   <ReuseCreateItemTemplate />
                 </ComboboxGroup>
 
-                <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
+                <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
                   <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
                 </ComboboxGroup>
 
-                <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="b24ui.group({ class: props.b24ui?.group })">
+                <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
                   <ReuseCreateItemTemplate />
                 </ComboboxGroup>
               </template>
@@ -468,7 +490,7 @@ defineExpose({
             <slot name="content-bottom" />
           </FocusScope>
 
-          <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+          <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
         </ComboboxContent>
       </ComboboxPortal>
     </ComboboxRoot>

package/dist/runtime/components/Separator.vue

@@ -34,19 +34,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separat
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.border({ class: props.b24ui?.border })" />
+  <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 })" />
 
     <template v-if="label !== void 0 && label !== null || icon || avatar || !!slots.default">
-      <div :class="b24ui.container({ class: props.b24ui?.container })">
+      <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label })">{{ label }}</span>
-          <Component :is="icon" v-else-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-          <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+          <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 })" />
         </slot>
       </div>
 
-      <div :class="b24ui.border({ class: props.b24ui?.border })" />
+      <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
     </template>
   </Separator>
 </template>

package/dist/runtime/components/Sidebar.vue

@@ -19,7 +19,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 
 <template>
   <!-- Sidebar -->
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/SidebarBody.vue

@@ -21,7 +21,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/SidebarFooter.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/SidebarHeader.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/SidebarHeading.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/SidebarLayout.vue

@@ -68,6 +68,7 @@ const handleNavigationClick = () => {
     v-bind="$attrs"
     data-state="isLoading ? 'loading' : 'show'"
     :as="as"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
   >
     <!-- isLoading -->
@@ -81,8 +82,9 @@ const handleNavigationClick = () => {
         overlay-blur="off"
       >
         <template #content>
-          <div :class="b24ui.loadingWrapper({ class: props.b24ui?.loadingWrapper })">
+          <div data-slot="loadingWrapper" :class="b24ui.loadingWrapper({ class: props.b24ui?.loadingWrapper })">
             <BtnSpinnerIcon
+              data-slot="loadingIcon"
               :class="b24ui.loadingIcon({ class: props.b24ui?.loadingIcon })"
               aria-hidden="true"
             />
@@ -91,20 +93,22 @@ const handleNavigationClick = () => {
       </B24Slideover>
     </slot>
     <template v-if="isUseSideBar">
-      <div :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
+      <div data-slot="sidebar" :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
         <B24Sidebar>
           <slot name="sidebar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
         </B24Sidebar>
       </div>
     </template>
 
-    <div :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })">
+    <div data-slot="contentWrapper" :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })">
       <header
         v-if="isUseNavbar"
+        data-slot="header"
         :class="b24ui.header({ class: props.b24ui?.header })"
       >
         <div
           v-if="isUseSideBar"
+          data-slot="headerMenuIcon"
           :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
         >
           <B24Slideover
@@ -124,9 +128,9 @@ const handleNavigationClick = () => {
             />
 
             <template #content>
-              <div :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+              <div data-slot="sidebarSlideover" :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
                 <B24Sidebar>
-                  <div :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                  <div data-slot="sidebarSlideoverBtnClose" :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
                     <B24ModalDialogClose>
                       <B24Button
                         color="air-tertiary"
@@ -143,26 +147,26 @@ const handleNavigationClick = () => {
             </template>
           </B24Slideover>
         </div>
-        <div :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+        <div data-slot="headerWrapper" :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
           <B24Navbar>
             <slot name="navbar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
           </B24Navbar>
         </div>
       </header>
 
-      <div :class="b24ui.pageWrapper({ class: props.b24ui?.pageWrapper })">
+      <div data-slot="pageWrapper" :class="b24ui.pageWrapper({ class: props.b24ui?.pageWrapper })">
         <template v-if="!!slots['content-top'] || !!slots['content-actions'] || !!slots['default']">
-          <main :class="b24ui.container({ class: props.b24ui?.container })">
+          <main data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
             <template v-if="!!slots['content-top']">
               <!-- Page Top -->
-              <div :class="b24ui.pageTopWrapper({ class: props.b24ui?.pageTopWrapper })">
+              <div data-slot="pageTopWrapper" :class="b24ui.pageTopWrapper({ class: props.b24ui?.pageTopWrapper })">
                 <slot name="content-top" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
 
             <template v-if="!!slots['content-actions']">
               <!-- Page Actions -->
-              <div :class="b24ui.pageActionsWrapper({ class: props.b24ui?.pageActionsWrapper })">
+              <div data-slot="pageActionsWrapper" :class="b24ui.pageActionsWrapper({ class: props.b24ui?.pageActionsWrapper })">
                 <slot name="content-actions" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
@@ -171,9 +175,10 @@ const handleNavigationClick = () => {
               <!-- Page Content -->
               <div
                 :data-content="props.useLightContent ? 'use-light' : 'not-set'"
+                data-slot="containerWrapper"
                 :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })"
               >
-                <div :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+                <div data-slot="containerWrapperInner" :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
                   <slot :is-loading="isLoading" :b24ui="b24ui" />
                 </div>
               </div>
@@ -182,14 +187,14 @@ const handleNavigationClick = () => {
         </template>
 
         <template v-if="!!slots['content-right']">
-          <div :class="b24ui.pageRightWrapper({ class: props.b24ui?.pageRightWrapper })">
+          <div data-slot="pageRightWrapper" :class="b24ui.pageRightWrapper({ class: props.b24ui?.pageRightWrapper })">
             <slot name="content-right" :is-loading="isLoading" :b24ui="b24ui" />
           </div>
         </template>
       </div>
       <template v-if="!!slots['content-bottom']">
         <!-- Page Bottom -->
-        <div :class="b24ui.pageBottomWrapper({ class: props.b24ui?.pageBottomWrapper })">
+        <div data-slot="pageBottomWrapper" :class="b24ui.pageBottomWrapper({ class: props.b24ui?.pageBottomWrapper })">
           <slot name="content-bottom" :is-loading="isLoading" :b24ui="b24ui" />
         </div>
       </template>

package/dist/runtime/components/SidebarSection.vue

@@ -20,8 +20,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 <template>
   <Primitive
     :as="as"
+    data-component="section"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
-    data-slot="section"
   >
     <slot />
   </Primitive>

package/dist/runtime/components/SidebarSpacer.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
 </script>
 
 <template>
-  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" aria-hidden="true" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>