@bitrix24/b24ui-nuxt 2.1.2 → 2.1.3

package/dist/runtime/components/DashboardSearch.vue

@@ -117,6 +117,7 @@ defineExpose({
     :title="title || t('dashboardSearch.title')"
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
   >
     <template #content="contentData">

package/dist/runtime/components/DashboardSearchButton.vue

@@ -93,6 +93,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
   },
   ...$attrs
 }"
+      data-slot="base"
       :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
       :b24ui="transformUI(b24ui, props.b24ui)"
       @click="toggleSearch"
@@ -102,7 +103,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       </template>
 
       <template v-if="!collapsed" #trailing="{ b24ui: b24uiProxy }">
-        <div :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
             <template v-if="kbds?.length">
               <B24Kbd

package/dist/runtime/components/DescriptionList.vue

@@ -51,19 +51,19 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <div :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <h2 v-if="legend || !!slots.legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
       <slot name="legend">
         {{ legend }}
       </slot>
     </h2>
-    <p v-if="text || !!slots.text" :class="b24ui.text({ class: props.b24ui?.text })">
+    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">
       <slot name="text">
         {{ text }}
       </slot>
     </p>
 
-    <dl :class="b24ui.container({ class: props.b24ui?.container })">
+    <dl data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
       <template
         v-for="(item, index) in normalizedItems"
         :key="index"
@@ -82,6 +82,7 @@ const normalizedItems = computed(() => {
           :b24ui="b24ui"
         >
           <dt
+            data-slot="labelWrapper"
             :class="b24ui.labelWrapper({
   class: [
     props.b24ui?.labelWrapper,
@@ -93,6 +94,7 @@ const normalizedItems = computed(() => {
               <Component
                 :is="item.icon"
                 v-if="item.icon"
+                data-slot="icon"
                 :class="b24ui.icon({
   class: [
     props.b24ui?.icon,
@@ -104,6 +106,7 @@ const normalizedItems = computed(() => {
                 v-else-if="item.avatar"
                 :size="props.b24ui?.avatarSize || b24ui.avatarSize()"
                 v-bind="item.avatar"
+                data-slot="avatar"
                 :class="b24ui.avatar({
   class: [
     props.b24ui?.avatar,
@@ -113,6 +116,7 @@ const normalizedItems = computed(() => {
               />
             </slot>
             <span
+              data-slot="label"
               :class="b24ui.label({
   class: [
     item?.class,
@@ -128,6 +132,7 @@ const normalizedItems = computed(() => {
           </dt>
           <dd
             :data-orientation="item.orientation"
+            data-slot="descriptionWrapper"
             :class="b24ui.descriptionWrapper({
   class: [
     props.b24ui?.descriptionWrapper,
@@ -138,6 +143,7 @@ const normalizedItems = computed(() => {
 })"
           >
             <span
+              data-slot="description"
               :class="b24ui.description({
   class: [
     item?.class,
@@ -153,6 +159,7 @@ const normalizedItems = computed(() => {
             </span>
             <span
               v-if="item.actions?.length || !!slots.actions"
+              data-slot="actions"
               :class="b24ui.actions({
   class: [
     props.b24ui?.actions,
@@ -183,6 +190,7 @@ const normalizedItems = computed(() => {
     </dl>
     <div
       v-if="!!slots.footer"
+      data-slot="footer"
       :class="b24ui.footer({ class: props.b24ui?.footer })"
     >
       <slot name="footer" :b24ui="b24ui" />

package/dist/runtime/components/DropdownMenu.vue

@@ -57,6 +57,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
     </DropdownMenuTrigger>
 
     <B24DropdownMenuContent
+      data-slot="content"
       :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })"
       :b24ui="b24ui"
       :b24ui-override="props.b24ui"
@@ -73,7 +74,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
     </B24DropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -85,15 +85,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>
@@ -101,6 +103,7 @@ const groups = computed(
 
         <span
           v-if="get(item, props.descriptionKey)"
+          data-slot="itemDescription"
           :class="b24ui.itemDescription({ class: [b24uiOverride?.itemDescription, item.b24ui?.itemDescription] })"
         >
           <slot
@@ -114,10 +117,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] })">
         <DropdownMenu.ItemIndicator as-child>
           <Component
             :is="checkedIcon || icons.check"
+            data-slot="itemTrailingIcon"
             :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color })"
           />
         </DropdownMenu.ItemIndicator>
@@ -132,24 +136,28 @@ const groups = computed(
           <Component
             :is="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>
@@ -160,22 +168,24 @@ const groups = computed(
   <DropdownMenu.Portal v-bind="portalProps">
     <component
       :is="sub ? DropdownMenu.SubContent : DropdownMenu.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 })">
         <DropdownMenu.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}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
+            <DropdownMenu.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" />
             </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
             <DropdownMenu.Sub
               v-else-if="item?.children?.length"
               :open="item.open"
@@ -186,6 +196,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" />
@@ -193,6 +204,7 @@ const groups = computed(
 
               <B24DropdownMenuContent
                 sub
+                data-slot="content"
                 :class="item.b24ui?.content"
                 :b24ui="b24ui"
                 :b24ui-override="b24uiOverride"
@@ -211,7 +223,7 @@ const groups = computed(
                 <template v-for="(_, name) in proxySlots" #[name]="slotData">
                   <slot :name="name" v-bind="slotData" />
                 </template>
-                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
               </B24DropdownMenuContent>
             </DropdownMenu.Sub>
             <DropdownMenu.CheckboxItem
@@ -219,6 +231,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"
@@ -235,6 +248,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" />

package/dist/runtime/components/Empty.vue

@@ -30,25 +30,26 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
       <slot name="header">
         <slot name="leading" :b24ui="b24ui">
-          <div v-if="icon" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div v-if="icon" data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
             <Component
               :is="icon"
+              data-slot="icon"
               :class="b24ui.icon({ class: props.b24ui?.icon })"
             />
           </div>
         </slot>
 
-        <h2 v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -56,9 +57,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
           <slot name="actions">
             <B24Button v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -66,7 +67,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
       </slot>
     </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" />
     </div>
   </Primitive>

package/dist/runtime/components/Error.vue

@@ -27,23 +27,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" :class="b24ui.statusCode({ class: props.b24ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="b24ui.statusCode({ class: props.b24ui?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" :class="b24ui.statusMessage({ class: props.b24ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="b24ui.statusMessage({ class: props.b24ui?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage }}
       </slot>
     </h1>
-    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" :class="b24ui.message({ class: props.b24ui?.message })">
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="b24ui.message({ class: props.b24ui?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" :class="b24ui.links({ class: props.b24ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="b24ui.links({ class: props.b24ui?.links })">
       <slot name="links">
         <B24Button
           v-if="clear"

package/dist/runtime/components/FileUpload.vue

@@ -139,11 +139,12 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div :class="b24ui.files({ class: props.b24ui?.files })">
+      <div data-slot="files" :class="b24ui.files({ class: props.b24ui?.files })">
         <slot name="files" :files="modelValue">
           <div
             v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]"
             :key="file.name"
+            data-slot="file"
             :class="b24ui.file({ class: props.b24ui?.file })"
           >
             <slot name="file" :file="file" :index="index">
@@ -153,18 +154,19 @@ defineExpose({
                   :src="createObjectUrl(file)"
                   :icon="fileIcon || icons.file"
                   :size="props.size"
+                  data-slot="fileLeadingAvatar"
                   :class="b24ui.fileLeadingAvatar({ class: props.b24ui?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div :class="b24ui.fileWrapper({ class: props.b24ui?.fileWrapper })">
-                <span :class="b24ui.fileName({ class: props.b24ui?.fileName })">
+              <div data-slot="fileWrapper" :class="b24ui.fileWrapper({ class: props.b24ui?.fileWrapper })">
+                <span data-slot="fileName" :class="b24ui.fileName({ class: props.b24ui?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ file.name }}
                   </slot>
                 </span>
 
-                <span :class="b24ui.fileSize({ class: props.b24ui?.fileSize })">
+                <span data-slot="fileSize" :class="b24ui.fileSize({ class: props.b24ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -186,6 +188,7 @@ defineExpose({
 }"
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :icon="fileDeleteIcon || icons.close"
+                  data-slot="fileTrailingButton"
                   :class="b24ui.fileTrailingButton({ class: props.b24ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
@@ -199,7 +202,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <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 :open="open" :remove-file="removeFile" :b24ui="b24ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -207,6 +210,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : void 0"
         :role="variant === 'button' ? void 0 : 'button'"
         :data-dragging="isDragging"
+        data-slot="base"
         :class="b24ui.base({ class: props.b24ui?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
@@ -217,35 +221,38 @@ defineExpose({
 
         <div
           v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true"
+          data-slot="wrapper"
           :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
         >
           <slot name="leading" :b24ui="b24ui">
             <Component
               :is="icon || icons.upload"
               v-if="variant === 'button'"
+              data-slot="icon"
               :class="b24ui.icon({ class: props.b24ui?.icon })"
             />
             <B24Avatar
               v-else
               :icon="icon || icons.upload"
               :size="props.size"
+              data-slot="avatar"
               :class="b24ui.avatar({ class: props.b24ui?.avatar })"
             />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" :class="b24ui.label({ class: props.b24ui?.label })">
+            <div v-if="label || !!slots.label" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
               <slot name="label">
                 {{ label }}
               </slot>
             </div>
-            <div v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
             </div>
 
-            <div v-if="!!slots.actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>

package/dist/runtime/components/FormField.vue

@@ -58,40 +58,40 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="b24ui.labelWrapper({ class: props.b24ui?.labelWrapper })">
-        <Label :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="root" :class="b24ui.labelWrapper({ class: props.b24ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="b24ui.hint({ class: props.b24ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="b24ui.hint({ class: props.b24ui?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
       </p>
     </div>
 
-    <div :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: props.b24ui?.container })]">
+    <div data-slot="container" :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: props.b24ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="b24ui.error({ class: props.b24ui?.error })">
+      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" data-slot="error" :class="b24ui.error({ class: props.b24ui?.error })">
         <slot name="error" :error="error">
-          <div :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
-            <WarningIcon :class="b24ui.errorIcon()" />
+          <div data-slot="errorWrapper" :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
+            <WarningIcon data-slot="errorIcon" :class="b24ui.errorIcon()" />
             <div>{{ error }}</div>
           </div>
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="b24ui.help({ class: props.b24ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="b24ui.help({ class: props.b24ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

package/dist/runtime/components/Input.vue

@@ -124,9 +124,10 @@ defineExpose({
 </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] })">
     <B24Badge
       v-if="isTag"
+      data-slot="tag"
       :class="b24ui.tag({ class: props.b24ui?.tag })"
       :color="props.tagColor"
       :label="props.tag"
@@ -140,6 +141,7 @@ defineExpose({
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      data-slot="base"
       :class="b24ui.base({ class: props.b24ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -153,27 +155,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/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>