@bitrix24/b24ui-nuxt 2.1.2 → 2.1.4

package/dist/runtime/components/ChatPrompt.vue

@@ -57,8 +57,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
       <slot name="header" />
     </div>
 
@@ -70,6 +70,7 @@ defineExpose({
       no-border
       v-bind="{ ...textareaProps, ...$attrs }"
       :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)"
+      data-slot="body"
       :class="b24ui.body({ class: props.b24ui?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
@@ -79,7 +80,7 @@ defineExpose({
       </template>
     </B24Textarea>
 
-    <div :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
       <slot name="footer" />
       <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)" />
     </div>

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -112,6 +112,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPro
   ...$attrs
 }"
     :aria-label="t('chatPromptSubmit.label')"
+    data-slot="base"
     :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
     :b24ui="transformUI(b24ui, props.b24ui)"
   >

package/dist/runtime/components/Checkbox.vue

@@ -53,38 +53,40 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.container({ class: props.b24ui?.container })">
+  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"
+        data-slot="base"
         :class="b24ui.base({ class: props.b24ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })">
-            <Minus20Icon v-if="modelValue === 'indeterminate'" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-            <CheckIcon v-else :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+            <Minus20Icon v-if="modelValue === 'indeterminate'" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+            <CheckIcon v-else data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <component
         :is="!variant || variant === 'list' ? Label : 'p'"
         v-if="label || !!slots.label"
         :for="id"
+        data-slot="label"
         :class="b24ui.label({ class: props.b24ui?.label })"
       >
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

package/dist/runtime/components/CheckboxGroup.vue

@@ -93,11 +93,12 @@ function onUpdate(value) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -111,6 +112,7 @@ function onUpdate(value) {
         :name="name"
         :disabled="item.disabled || disabled"
         :b24ui="{ ...props.b24ui ? omit(props.b24ui, ['root']) : void 0, ...item.b24ui || {} }"
+        data-slot="item"
         :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>

package/dist/runtime/components/Chip.vue

@@ -44,6 +44,7 @@ const value = computed(() => {
 <template>
   <Primitive
     :as="as"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
   >
     <Slot v-bind="$attrs">
@@ -52,6 +53,7 @@ const value = computed(() => {
 
     <span
       v-if="show"
+      data-slot="base"
       :class="b24ui.base({ class: props.b24ui?.base })"
       :data-value="value"
     >
@@ -61,6 +63,7 @@ const value = computed(() => {
       <slot name="trailing">
         <Component
           :is="trailingIcon"
+          data-slot="trailingIcon"
           :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         />
       </slot>

package/dist/runtime/components/Collapsible.vue

@@ -25,12 +25,12 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.collaps
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="b24ui.content({ class: props.b24ui?.content })">
+    <CollapsibleContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>

package/dist/runtime/components/ColorPicker.vue

@@ -178,16 +178,18 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div :class="b24ui.picker({ class: props.b24ui?.picker })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div data-slot="picker" :class="b24ui.picker({ class: props.b24ui?.picker })">
       <div
         ref="selectorRef"
+        data-slot="selector"
         :class="b24ui.selector({ class: props.b24ui?.selector })"
         :style="selectorStyle"
       >
-        <div :class="b24ui.selectorBackground({ class: props.b24ui?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="b24ui.selectorBackground({ class: props.b24ui?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
+            data-slot="selectorThumb"
             :class="b24ui.selectorThumb({ class: props.b24ui?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : void 0"
@@ -196,11 +198,13 @@ const trackThumbStyle = computed(() => ({
       </div>
       <div
         ref="trackRef"
+        data-slot="track"
         :class="b24ui.track({ class: props.b24ui?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
+          data-slot="trackThumb"
           :class="b24ui.trackThumb({ class: props.b24ui?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : void 0"

package/dist/runtime/components/CommandPalette.vue

@@ -6,14 +6,15 @@ import theme from "#build/b24ui/command-palette";
 import { computed, ref, useTemplateRef, toRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
-import { tv } from "../utils/tv";
 import { highlight } from "../utils/fuse";
 import { pickLinkProps } from "../utils/link";
+import { getEstimateSize } from "../utils/virtualizer";
+import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Avatar from "./Avatar.vue";
 import B24Button from "./Button.vue";
@@ -58,7 +59,12 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading"));
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, { estimateSize: 32 }));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey)
+  });
+});
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -101,13 +107,15 @@ const items = computed(() => groups.value?.filter((group) => {
   return true;
 })?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
-function getGroupWithItems(group, items2) {
+const throttledFuseResults = refThrottled(fuseResults, 16, true);
+function processGroupItems(group, items2) {
+  let processedItems = items2;
   if (group?.postFilter && typeof group.postFilter === "function") {
-    items2 = group.postFilter(searchTerm.value, items2);
+    processedItems = group.postFilter(searchTerm.value, processedItems);
   }
   return {
     ...group,
-    items: items2.slice(0, fuse.value.resultLimit).map((item) => {
+    items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
         labelHtml: highlight(item, searchTerm.value, props.labelKey),
@@ -117,7 +125,8 @@ function getGroupWithItems(group, items2) {
   };
 }
 const filteredGroups = computed(() => {
-  const groupsById = fuseResults.value.reduce((acc, result) => {
+  const currentGroups = groups.value;
+  const groupsById = throttledFuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
       return acc;
@@ -128,25 +137,33 @@ const filteredGroups = computed(() => {
   }, {});
   if (props.preserveGroupOrder) {
     const processedGroups = [];
-    for (const group of groups.value || []) {
+    for (const group of currentGroups || []) {
       if (!group.items?.length) {
         continue;
       }
       const items2 = group.ignoreFilter ? group.items : groupsById[group.id];
-      if (items2?.length) {
-        processedGroups.push(getGroupWithItems(group, items2));
+      if (!items2?.length) {
+        continue;
+      }
+      const processedGroup = processGroupItems(group, items2);
+      if (processedGroup.items?.length) {
+        processedGroups.push(processedGroup);
       }
     }
     return processedGroups;
   }
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = groups.value?.find((group2) => group2.id === id);
+    const group = currentGroups?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
-    return getGroupWithItems(group, items2);
+    const processedGroup = processGroupItems(group, items2);
+    return processedGroup.items?.length ? processedGroup : void 0;
   }).filter((group) => !!group);
-  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = currentGroups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => {
+    const processedGroup = processGroupItems(group, group.items || []);
+    return { ...processedGroup, index: group.index };
+  })?.filter((group) => group.items?.length) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
@@ -202,6 +219,7 @@ function onSelect(e, item) {
       <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
         <B24LinkBase
           v-bind="slotProps"
+          data-slot="item"
           :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], active: active || item.active })"
         >
           <slot
@@ -219,17 +237,20 @@ function onSelect(e, item) {
               <Component
                 :is="icons.loading"
                 v-if="item.loading"
+                data-slot="itemLeadingIcon"
                 :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], loading: true })"
               />
               <Component
                 :is="item.icon"
                 v-else-if="item.icon"
+                data-slot="itemLeadingIcon"
                 :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], active: active || item.active })"
               />
               <B24Avatar
                 v-else-if="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], active: active || item.active })"
               />
               <B24Chip
@@ -238,15 +259,17 @@ function onSelect(e, item) {
                 inset
                 standalone
                 v-bind="item.chip"
+                data-slot="itemLeadingChip"
                 :class="b24ui.itemLeadingChip({ class: [props.b24ui?.itemLeadingChip, item.b24ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
             <span
               v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])"
+              data-slot="itemWrapper"
               :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, item.b24ui?.itemWrapper] })"
             >
-              <span :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, item.b24ui?.itemLabel], active: active || item.active })">
+              <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, item.b24ui?.itemLabel], active: active || item.active })">
                 <slot
                   :name="item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`"
                   :item="item"
@@ -255,23 +278,39 @@ function onSelect(e, item) {
                 >
                   <span
                     v-if="item.prefix"
+                    data-slot="itemLabelPrefix"
                     :class="b24ui.itemLabelPrefix({ class: [props.b24ui?.itemLabelPrefix, item.b24ui?.itemLabelPrefix] })"
                   >{{ item.prefix }}</span>
 
                   <span
+                    v-if="item.labelHtml"
+                    data-slot="itemLabelBase"
                     :class="b24ui.itemLabelBase({ class: [props.b24ui?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
                     v-html="item.labelHtml || get(item, props.labelKey)"
                   />
+                  <span
+                    v-else
+                    data-slot="itemLabelBase"
+                    :class="b24ui.itemLabelBase({ class: [props.b24ui?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
+                  >{{ get(item, props.labelKey) }}</span>
 
                   <span
+                    v-if="item.suffixHtml"
+                    data-slot="itemLabelSuffix"
                     :class="b24ui.itemLabelSuffix({ class: [props.b24ui?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
                     v-html="item.suffixHtml || item.suffix"
                   />
+                  <span
+                    v-else-if="item.suffix"
+                    data-slot="itemLabelSuffix"
+                    :class="b24ui.itemLabelSuffix({ class: [props.b24ui?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
+                  >{{ item.suffix }}</span>
                 </slot>
               </span>
 
               <span
                 v-if="get(item, props.descriptionKey)"
+                data-slot="itemDescription"
                 :class="b24ui.itemDescription({ class: [props.b24ui?.itemDescription, item.b24ui?.itemDescription] })"
               >
                 <slot
@@ -285,7 +324,7 @@ function onSelect(e, item) {
               </span>
             </span>
 
-            <span :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, item.b24ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, item.b24ui?.itemTrailing] })">
               <slot
                 :name="item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`"
                 :item="item"
@@ -295,10 +334,11 @@ function onSelect(e, item) {
                 <Component
                   :is="childrenIcon || icons.chevronRight"
                   v-if="item.children && item.children.length > 0"
+                  data-slot="itemTrailingIcon"
                   :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: [props.b24ui?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="b24ui.itemTrailingKbds({ class: [props.b24ui?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
                   <B24Kbd
                     v-for="(kbd, kbdIndex) in item.kbds"
                     :key="kbdIndex"
@@ -310,6 +350,7 @@ function onSelect(e, item) {
                 <Component
                   :is="group.highlightedIcon"
                   v-else-if="group?.highlightedIcon"
+                  data-slot="itemTrailingHighlightedIcon"
                   :class="b24ui.itemTrailingHighlightedIcon({ class: [props.b24ui?.itemTrailingHighlightedIcon, item.b24ui?.itemTrailingHighlightedIcon] })"
                 />
               </slot>
@@ -317,6 +358,7 @@ function onSelect(e, item) {
               <ListboxItemIndicator v-if="!item.children?.length" as-child>
                 <Component
                   :is="selectedIcon || icons.check"
+                  data-slot="itemTrailingIcon"
                   :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
                 />
               </ListboxItemIndicator>
@@ -327,7 +369,7 @@ function onSelect(e, item) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <B24Input
         :placeholder="placeholder"
@@ -338,6 +380,7 @@ function onSelect(e, item) {
         size="xl"
         :trailing-icon="trailingIcon"
         :icon="icon || icons.search"
+        data-slot="input"
         :class="b24ui.input({ class: props.b24ui?.input })"
         @keydown.backspace="onBackspace"
       >
@@ -349,6 +392,7 @@ function onSelect(e, item) {
               color="air-selection"
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
+              data-slot="back"
               :class="b24ui.back({ class: props.b24ui?.back })"
               @click="navigateBack"
             />
@@ -364,6 +408,7 @@ function onSelect(e, item) {
               color="air-tertiary-no-accent"
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"
+              data-slot="close"
               :class="b24ui.close({ class: props.b24ui?.close })"
               @click="emits('update:open', false)"
             />
@@ -372,8 +417,8 @@ function onSelect(e, item) {
       </B24Input>
     </ListboxFilter>
 
-    <ListboxContent :class="b24ui.content({ class: props.b24ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+    <ListboxContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
         <ListboxVirtualizer
           v-if="!!virtualize"
           v-slot="{ option: item, virtualItem }"
@@ -385,8 +430,8 @@ function onSelect(e, item) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="b24ui.group({ class: props.b24ui?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="b24ui.label({ class: props.b24ui?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
               {{ get(group, props.labelKey) }}
             </ListboxGroupLabel>
 
@@ -401,14 +446,14 @@ function onSelect(e, item) {
         </template>
       </div>
 
-      <div v-else :class="b24ui.empty({ class: props.b24ui?.empty })">
+      <div v-else data-slot="empty" :class="b24ui.empty({ class: props.b24ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
       <slot name="footer" :b24ui="b24ui" />
     </div>
   </ListboxRoot>

package/dist/runtime/components/ContextMenu.vue

@@ -41,6 +41,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.context
     </ContextMenuTrigger>
 
     <B24ContextMenuContent
+      data-slot="content"
       :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
       :b24ui="b24ui"
       :b24ui-override="props.b24ui"

package/dist/runtime/components/ContextMenuContent.vue

@@ -75,15 +75,17 @@ const groups = computed(
           v-if="item.avatar"
           :size="item.b24ui?.itemLeadingAvatarSize || b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
           v-bind="item.avatar"
+          data-slot="itemLeadingAvatar"
           :class="b24ui.itemLeadingAvatar({ class: [b24uiOverride?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active })"
         />
       </slot>
 
       <span
         v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])"
+        data-slot="itemWrapper"
         :class="b24ui.itemWrapper({ class: [b24uiOverride?.itemWrapper, item.b24ui?.itemWrapper] })"
       >
-        <span :class="b24ui.itemLabel({ class: [b24uiOverride?.itemLabel, item.b24ui?.itemLabel], active })">
+        <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [b24uiOverride?.itemLabel, item.b24ui?.itemLabel], active })">
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
           </slot>
@@ -91,6 +93,7 @@ const groups = computed(
 
         <span
           v-if="get(item, props.descriptionKey)"
+          data-slot="itemDescription"
           :class="b24ui.itemDescription({ class: [b24uiOverride?.itemDescription, item.b24ui?.itemDescription] })"
         >
           <slot
@@ -104,10 +107,11 @@ const groups = computed(
         </span>
       </span>
 
-      <span :class="b24ui.itemTrailing({ class: [b24uiOverride?.itemTrailing, item.b24ui?.itemTrailing] })">
+      <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [b24uiOverride?.itemTrailing, item.b24ui?.itemTrailing] })">
         <ContextMenu.ItemIndicator as-child>
           <Component
             :is="checkedIcon || icons.check"
+            data-slot="itemTrailingIcon"
             :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color })"
           />
         </ContextMenu.ItemIndicator>
@@ -122,24 +126,28 @@ const groups = computed(
           <Component
             :is="loadingIcon || icons.loading"
             v-if="item.loading"
+            data-slot="itemLeadingIcon"
             :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, loading: true })"
           />
           <Component
             :is="childrenIcon"
             v-else-if="item.children?.length"
+            data-slot="itemTrailingIcon"
             :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color, active })"
           />
           <Component
             :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
             v-else-if="item.target === '_blank' && externalIcon !== false"
+            data-slot="itemLabelExternalIcon"
             :class="b24ui.itemLabelExternalIcon({ class: [b24uiOverride?.itemLabelExternalIcon, item.b24ui?.itemLabelExternalIcon], color: item?.color, active })"
           />
           <Component
             :is="item.icon"
             v-else-if="item.icon"
+            data-slot="itemLeadingIcon"
             :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, active })"
           />
-          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
             <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
@@ -150,22 +158,24 @@ const groups = computed(
   <ContextMenu.Portal v-bind="portalProps">
     <component
       :is="sub ? ContextMenu.SubContent : ContextMenu.Content"
+      data-slot="content"
       :class="b24ui.content({ class: [b24uiOverride?.content, props.class] })"
       v-bind="contentProps"
     >
       <slot name="content-top" />
 
-      <div role="presentation" :class="b24ui.viewport({ class: b24uiOverride?.viewport })">
+      <div role="presentation" data-slot="viewport" :class="b24ui.viewport({ class: b24uiOverride?.viewport })">
         <ContextMenu.Group
           v-for="(group, groupIndex) in groups"
           :key="`group-${groupIndex}`"
+          data-slot="group"
           :class="b24ui.group({ class: b24uiOverride?.group })"
         >
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
+            <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
             <ContextMenu.Sub
               v-else-if="item?.children?.length"
               :open="item.open"
@@ -176,6 +186,7 @@ const groups = computed(
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
+                data-slot="item"
                 :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -206,6 +217,7 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
+              data-slot="item"
               :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -222,6 +234,7 @@ const groups = computed(
               <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
                 <B24LinkBase
                   v-bind="slotProps"
+                  data-slot="item"
                   :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color, active })"
                 >
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />