@bitrix24/b24ui-nuxt 2.1.2 → 2.1.4

package/dist/runtime/components/InputDate.vue

@@ -119,6 +119,7 @@ defineExpose({
       :ref="(el) => inputsRef[index] = el"
       :type="type"
       :part="segment.part"
+      data-slot="segment"
       :class="b24ui.segment({ class: props.b24ui?.segment })"
       :data-segment="segment.part"
     >
@@ -134,6 +135,7 @@ defineExpose({
     :default-value="defaultValue"
     :name="name"
     :disabled="disabled"
+    data-slot="base"
     :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
@@ -141,6 +143,7 @@ defineExpose({
   >
     <B24Badge
       v-if="isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
@@ -155,6 +158,7 @@ defineExpose({
       <slot name="separator" :b24ui="b24ui">
         <Component
           :is="separatorIcon || icons.minus"
+          data-slot="separatorIcon"
           :class="b24ui.separatorIcon({ class: props.b24ui?.separatorIcon })"
         />
       </slot>
@@ -163,27 +167,30 @@ defineExpose({
 
     <slot :b24ui="b24ui" />
 
-    <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" :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>
     </span>
 
-    <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" :b24ui="b24ui">
         <Component
           :is="trailingIconName"
           v-if="trailingIconName"
+          data-slot="trailingIcon"
           :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         />
       </slot>

package/dist/runtime/components/InputMenu.vue

@@ -15,6 +15,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";
@@ -80,16 +81,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "
 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, inputSize.value || "md", props.descriptionKey)
+  });
+});
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: icons.chevronDown })));
@@ -230,6 +227,11 @@ function onRemoveTag(event, modelValue) {
     onUpdate(filteredValue);
   }
 }
+function onCreate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  emits("create", searchTerm.value);
+}
 function onSelect(e, item) {
   if (!isInputItem(item)) {
     return;
@@ -251,14 +253,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("inputMenu.create", { label: searchTerm }) }}
@@ -268,14 +272,15 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <DefineItemTemplate v-slot="{ item, index }">
-    <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })">
+    <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" data-slot="label" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })">
       {{ get(item, props.labelKey) }}
     </ComboboxLabel>
 
-    <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator, item.class] })" />
+    <ComboboxSeparator v-else-if="isInputItem(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, isInputItem(item) && item.b24ui?.item, isInputItem(item) && item.class], colorItem: isInputItem(item) ? item?.color : void 0 })"
       :disabled="isInputItem(item) && item.disabled"
       :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey) : item"
@@ -283,11 +288,11 @@ defineExpose({
     >
       <slot name="item" :item="item" :index="index" :b24ui="b24ui">
         <slot name="item-leading" :item="item" :index="index" :b24ui="b24ui">
-          <B24Avatar v-if="isInputItem(item) && item.avatar" :size="item.b24ui?.itemLeadingAvatarSize || props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: [props.b24ui?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], colorItem: item?.color })" />
+          <B24Avatar v-if="isInputItem(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, isInputItem(item) && item.b24ui?.itemWrapper] })">
-          <span :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isInputItem(item) && item.b24ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, isInputItem(item) && item.b24ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, isInputItem(item) && item.b24ui?.itemLabel] })">
             <slot name="item-label" :item="item" :index="index">
               {{ isInputItem(item) ? get(item, props.labelKey) : item }}
             </slot>
@@ -295,6 +300,7 @@ defineExpose({
 
           <span
             v-if="isInputItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])"
+            data-slot="itemDescription"
             :class="b24ui.itemDescription({ class: [props.b24ui?.itemDescription, isInputItem(item) && item.b24ui?.itemDescription] })"
           >
             <slot
@@ -307,10 +313,11 @@ defineExpose({
           </span>
         </span>
 
-        <span :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isInputItem(item) && item.b24ui?.itemTrailing], colorItem: isInputItem(item) ? item?.color : void 0 })">
+        <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isInputItem(item) && item.b24ui?.itemTrailing], colorItem: isInputItem(item) ? item?.color : void 0 })">
           <ComboboxItemIndicator as-child>
             <Component
               :is="selectedIcon || icons.check"
+              data-slot="itemTrailingIcon"
               :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, isInputItem(item) && item.b24ui?.itemTrailingIcon], colorItem: isInputItem(item) ? item?.color : void 0 })"
             />
           </ComboboxItemIndicator>
@@ -319,6 +326,7 @@ defineExpose({
             <Component
               :is="item.icon"
               v-if="isInputItem(item) && item.icon"
+              data-slot="itemLeadingIcon"
               :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], colorItem: item?.color })"
             />
             <B24Chip
@@ -327,6 +335,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>
@@ -340,21 +349,22 @@ defineExpose({
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :as-child="!!multiple"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
-    @keydown.enter="$event.preventDefault()"
   >
     <B24Badge
       v-if="!multiple && isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
       size="xs"
     />
-    <ComboboxAnchor :as-child="!multiple" :class="b24ui.base({ class: props.b24ui?.base })">
+    <ComboboxAnchor :as-child="!multiple" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })">
       <TagsInputRoot
         v-if="multiple"
         v-slot="{ modelValue: tags }"
@@ -369,22 +379,24 @@ defineExpose({
       >
         <B24Badge
           v-if="!!multiple && isTag"
+          data-slot="tag"
           :class="b24ui.tag({ class: props.b24ui?.tag })"
           :color="props.tagColor"
           :label="props.tag"
           size="xs"
         />
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="b24ui.tagsItem({ class: [props.b24ui?.tagsItem, isInputItem(item) && item.b24ui?.tagsItem] })">
-          <TagsInputItemText :class="b24ui.tagsItemText({ class: [props.b24ui?.tagsItemText, isInputItem(item) && item.b24ui?.tagsItemText] })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" data-slot="tagsItem" :class="b24ui.tagsItem({ class: [props.b24ui?.tagsItem, isInputItem(item) && item.b24ui?.tagsItem] })">
+          <TagsInputItemText data-slot="tagsItemText" :class="b24ui.tagsItemText({ class: [props.b24ui?.tagsItemText, isInputItem(item) && item.b24ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="item" :index="index">
               {{ displayValue(item) }}
             </slot>
           </TagsInputItemText>
 
-          <TagsInputItemDelete :class="b24ui.tagsItemDelete({ class: [props.b24ui?.tagsItemDelete, isInputItem(item) && item.b24ui?.tagsItemDelete] })" :disabled="disabled">
+          <TagsInputItemDelete data-slot="tagsItemDelete" :class="b24ui.tagsItemDelete({ class: [props.b24ui?.tagsItemDelete, isInputItem(item) && item.b24ui?.tagsItemDelete] })" :disabled="disabled">
             <slot name="tags-item-delete" :item="item" :index="index" :b24ui="b24ui">
               <Component
                 :is="deleteIcon || icons.close"
+                data-slot="tagsItemDeleteIcon"
                 :class="b24ui.tagsItemDeleteIcon({ class: [props.b24ui?.tagsItemDeleteIcon, isInputItem(item) && item.b24ui?.tagsItemDeleteIcon] })"
               />
             </slot>
@@ -397,8 +409,9 @@ defineExpose({
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
+            data-slot="tagsInput"
             :class="b24ui.tagsInput({ class: props.b24ui?.tagsInput })"
-            @keydown.enter.prevent
+            @change.stop
           />
         </ComboboxInput>
       </TagsInputRoot>
@@ -414,30 +427,34 @@ defineExpose({
         :required="required"
         @blur="onBlur"
         @focus="onFocus"
+        @change.stop
         @update:model-value="searchTerm = $event"
       />
 
-      <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?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
             v-bind="avatar"
+            data-slot="itemLeadingAvatar"
             :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })"
           />
         </slot>
       </span>
 
-      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+      <ComboboxTrigger 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>
@@ -445,10 +462,10 @@ defineExpose({
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps" @focus-outside.prevent>
+      <ComboboxContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps" @focus-outside.prevent>
         <slot name="content-top" />
 
-        <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("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
           </slot>
@@ -456,6 +473,7 @@ defineExpose({
 
         <div
           role="presentation"
+          data-slot="viewport"
           :class="b24ui.viewport({ class: props.b24ui?.viewport })"
         >
           <template v-if="!!virtualize">
@@ -474,15 +492,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>
@@ -490,7 +508,7 @@ defineExpose({
 
         <slot name="content-bottom" />
 
-        <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/InputNumber.vue

@@ -113,6 +113,7 @@ defineExpose({
     v-bind="rootProps"
     :id="id"
     :model-value="modelValue"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
@@ -120,6 +121,7 @@ defineExpose({
   >
     <B24Badge
       v-if="isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
@@ -131,12 +133,13 @@ defineExpose({
       ref="inputRef"
       :placeholder="placeholder"
       :required="required"
+      data-slot="base"
       :class="b24ui.base({ class: props.b24ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div v-if="!!increment" :class="b24ui.increment({ class: props.b24ui?.increment })">
+    <div v-if="!!increment" data-slot="increment" :class="b24ui.increment({ class: props.b24ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <B24Button
@@ -150,7 +153,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="!!decrement" :class="b24ui.decrement({ class: props.b24ui?.decrement })">
+    <div v-if="!!decrement" data-slot="decrement" :class="b24ui.decrement({ class: props.b24ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <B24Button

package/dist/runtime/components/InputTags.vue

@@ -114,6 +114,7 @@ defineExpose({
     v-slot="{ modelValue: tags }"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="b24ui.root({ class: [b24ui.base({ class: props.b24ui?.base }), props.b24ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"
@@ -122,6 +123,7 @@ defineExpose({
   >
     <B24Badge
       v-if="isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
@@ -132,19 +134,22 @@ defineExpose({
       v-for="(item, index) in tags"
       :key="index"
       :value="item"
+      data-slot="item"
       :class="b24ui.item({ class: [props.b24ui?.item] })"
     >
-      <TagsInputItemText :class="b24ui.itemText({ class: [props.b24ui?.itemText] })">
+      <TagsInputItemText data-slot="itemText" :class="b24ui.itemText({ class: [props.b24ui?.itemText] })">
         <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" :b24ui="b24ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
+        data-slot="itemDelete"
         :class="b24ui.itemDelete({ class: [props.b24ui?.itemDelete] })"
         :disabled="disabled"
       >
         <slot name="item-delete" :item="item" :index="index" :b24ui="b24ui">
           <Component
             :is="deleteIcon || icons.close"
+            data-slot="itemDeleteIcon"
             :class="b24ui.itemDeleteIcon({ class: [props.b24ui?.itemDeleteIcon] })"
           />
         </slot>
@@ -156,6 +161,7 @@ defineExpose({
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
       :max-length="maxLength"
+      data-slot="input"
       :class="b24ui.input({ class: props.b24ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
@@ -163,27 +169,30 @@ defineExpose({
 
     <slot :b24ui="b24ui" />
 
-    <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" :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>
     </span>
 
-    <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" :b24ui="b24ui">
         <Component
           :is="trailingIconName"
           v-if="trailingIconName"
+          data-slot="trailingIcon"
           :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         />
       </slot>

package/dist/runtime/components/InputTime.vue

@@ -110,6 +110,7 @@ defineExpose({
     v-slot="{ segments }"
     :name="name"
     :disabled="disabled"
+    data-slot="base"
     :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
@@ -117,6 +118,7 @@ defineExpose({
   >
     <B24Badge
       v-if="isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
@@ -128,6 +130,7 @@ defineExpose({
       :key="`${segment.part}-${index}`"
       :ref="(el) => inputsRef[index] = el"
       :part="segment.part"
+      data-slot="segment"
       :class="b24ui.segment({ class: props.b24ui?.segment })"
     >
       {{ segment.value.trim() }}
@@ -135,27 +138,30 @@ defineExpose({
 
     <slot :b24ui="b24ui" />
 
-    <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" :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>
     </span>
 
-    <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" :b24ui="b24ui">
         <Component
           :is="trailingIconName"
           v-if="trailingIconName"
+          data-slot="trailingIcon"
           :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         />
       </slot>

package/dist/runtime/components/Kbd.vue

@@ -25,7 +25,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.kbd ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.base({ class: props.class })">
+  <Primitive :as="as" data-slot="base" :class="b24ui.base({ class: props.class })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

package/dist/runtime/components/Modal.vue

@@ -78,6 +78,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DefineContentTemplate>
       <DialogContent
+        data-slot="content"
         :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
@@ -101,18 +102,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
         <slot name="content" :close="close">
           <div
             v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close) || !!slots.body"
+            data-slot="contentWrapper"
             :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })"
           >
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
               <slot name="header" :close="close">
-                <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                  <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                <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 })">
                     <slot name="title">
                       {{ title }}
                     </slot>
                   </DialogTitle>
 
-                  <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                  <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
                     <slot name="description">
                       {{ description }}
                     </slot>
@@ -130,6 +132,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
                       color="air-tertiary-no-accent"
                       :aria-label="t('modal.close')"
                       v-bind="typeof props.close === 'object' ? props.close : {}"
+                      data-slot="close"
                       :class="b24ui.close({ class: props.b24ui?.close })"
                     />
                   </slot>
@@ -137,12 +140,12 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
               </slot>
             </div>
 
-            <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
+            <div v-if="!!slots.body" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
               <slot name="body" :close="close" />
             </div>
           </div>
 
-          <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" :close="close" />
           </div>
         </slot>
@@ -155,13 +158,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
 
     <DialogPortal v-bind="portalProps">
       <template v-if="scrollable">
-        <DialogOverlay :class="b24ui.overlay({ class: props.b24ui?.overlay })">
+        <DialogOverlay data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })">
           <ReuseContentTemplate />
         </DialogOverlay>
       </template>
 
       <template v-else>
-        <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
         <ReuseContentTemplate />
       </template>

package/dist/runtime/components/Navbar.vue

@@ -19,7 +19,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbar
 
 <template>
   <!-- Navbar -->
-  <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/NavbarDivider.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarD
 </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>

package/dist/runtime/components/NavbarSection.vue

@@ -20,8 +20,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarS
 <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/NavbarSpacer.vue

@@ -18,7 +18,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarS
 </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>