@bitrix24/b24ui-nuxt 2.1.2 → 2.1.3

package/dist/runtime/components/NavigationMenu.vue

@@ -92,7 +92,7 @@ function getAccordionDefaultValue(list, level = 0) {
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :b24ui="b24ui">
-      <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
+      <span data-slot="linkLabelWrapper" :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
         <slot
           :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
           :item="item"
@@ -104,17 +104,20 @@ function getAccordionDefaultValue(list, level = 0) {
             <Component
               :is="item.icon"
               v-if="item.icon"
+              data-slot="linkLeadingIcon"
               :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
             />
             <B24Avatar
               v-else-if="item.avatar"
               :size="item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
               v-bind="item.avatar"
+              data-slot="linkLeadingAvatar"
               :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })"
             />
           </template>
           <div
             v-if="item.hint && item.type !== 'label' && orientation === 'horizontal'"
+            data-slot="linkLeadingHint"
             :class="b24ui.linkLeadingHint({ class: [props.b24ui?.linkLeadingHint, item.b24ui?.linkLeadingHint] })"
           >
             {{ item.hint }}
@@ -124,12 +127,14 @@ function getAccordionDefaultValue(list, level = 0) {
             color="air-primary-alert"
             :size="item.b24ui?.linkLeadingBadgeSize || props.b24ui?.linkLeadingBadgeSize || b24ui.linkLeadingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            data-slot="linkLeadingBadge"
             :class="b24ui.linkLeadingBadge({ class: [props.b24ui?.linkLeadingBadge, item.b24ui?.linkLeadingBadge] })"
           />
         </slot>
 
         <span
           v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          data-slot="linkLabel"
           :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel], active })"
         >
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
@@ -139,6 +144,7 @@ function getAccordionDefaultValue(list, level = 0) {
         <Component
           :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
           v-if="item.target === '_blank' && externalIcon !== false"
+          data-slot="linkLabelExternalIcon"
           :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, item.b24ui?.linkLabelExternalIcon], active })"
         />
       </span>
@@ -148,6 +154,7 @@ function getAccordionDefaultValue(list, level = 0) {
         v-if="(!collapsed || orientation !== 'vertical') && /* (item.badge || item.badge === 0) || */
 (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])"
         as="span"
+        data-slot="linkTrailing"
         :class="b24ui.linkTrailing({ class: [props.b24ui?.linkTrailing, item.b24ui?.linkTrailing] })"
         @click.stop.prevent
       >
@@ -161,11 +168,13 @@ function getAccordionDefaultValue(list, level = 0) {
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
             v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
+            data-slot="linkTrailingIcon"
             :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
           />
           <Component
             :is="item.trailingIcon"
             v-else-if="item.trailingIcon"
+            data-slot="linkTrailingIcon"
             :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
           />
         </slot>
@@ -181,6 +190,7 @@ function getAccordionDefaultValue(list, level = 0) {
     >
       <div
         v-if="orientation === 'vertical' && item.type === 'label' && !collapsed"
+        data-slot="label"
         :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })"
       >
         <ReuseLinkTemplate :item="item" :index="index" />
@@ -205,6 +215,7 @@ function getAccordionDefaultValue(list, level = 0) {
           >
             <B24LinkBase
               v-bind="slotProps"
+              data-slot="link"
               :class="b24ui.link({
   class: [props.b24ui?.link, item.b24ui?.link, item.class],
   active: active || item.active,
@@ -216,7 +227,7 @@ function getAccordionDefaultValue(list, level = 0) {
             </B24LinkBase>
 
             <template #content="{ close }">
-              <div :class="b24ui.popoverWrapper({ class: props.b24ui?.popoverWrapper })">
+              <div data-slot="popoverWrapper" :class="b24ui.popoverWrapper({ class: props.b24ui?.popoverWrapper })">
                 <slot
                   :name="item.slot ? `${item.slot}-content` : 'item-content'"
                   :item="item"
@@ -225,39 +236,44 @@ function getAccordionDefaultValue(list, level = 0) {
                   :b24ui="b24ui"
                   :close="close"
                 >
-                  <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
-                    <li :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
+                  <ul data-slot="childList" :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
+                    <li data-slot="childLabel" :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
                       {{ get(item, props.labelKey) }}
                     </li>
                     <li
                       v-for="(childItem, childIndex) in item.children"
                       :key="childIndex"
+                      data-slot="childItem"
                       :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.b24ui?.childItem] })"
                     >
                       <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                         <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
                           <B24LinkBase
                             v-bind="childSlotProps"
+                            data-slot="childLink"
                             :class="b24ui.childLink({ class: [props.b24ui?.childLink, item.b24ui?.childLink, childItem.class], active: childActive })"
                           >
                             <Component
                               :is="childItem.icon"
                               v-if="childItem.icon"
+                              data-slot="childLinkIcon"
                               :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                             />
                             <div
                               v-if="childItem.hint"
+                              data-slot="childLinkHint"
                               :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
                             >
                               {{ childItem.hint }}
                             </div>
 
-                            <span :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
+                            <span data-slot="childLinkLabel" :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                               {{ get(childItem, props.labelKey) }}
                             </span>
                             <Component
                               :is="typeof externalIcon === 'boolean' ? icons.external : externalIcon"
                               v-if="childItem.target === '_blank' && externalIcon !== false"
+                              data-slot="childLinkLabelExternalIcon"
                               :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                             />
                           </B24LinkBase>
@@ -276,6 +292,7 @@ function getAccordionDefaultValue(list, level = 0) {
           >
             <B24LinkBase
               v-bind="slotProps"
+              data-slot="link"
               :class="b24ui.link({
   class: [props.b24ui?.link, item.b24ui?.link, item.class],
   active: active || item.active,
@@ -289,6 +306,7 @@ function getAccordionDefaultValue(list, level = 0) {
           <B24LinkBase
             v-else
             v-bind="slotProps"
+            data-slot="link"
             :class="b24ui.link({
   class: [props.b24ui?.link, item.b24ui?.link, item.class],
   active: active || item.active,
@@ -304,6 +322,7 @@ function getAccordionDefaultValue(list, level = 0) {
           v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
           v-bind="contentProps"
           :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
+          data-slot="content"
           :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
         >
           <slot
@@ -313,10 +332,11 @@ function getAccordionDefaultValue(list, level = 0) {
             :index="index"
             :b24ui="b24ui"
           >
-            <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
+            <ul data-slot="childList" :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
               <li
                 v-for="(childItem, childIndex) in item.children"
                 :key="childIndex"
+                data-slot="childItem"
                 :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.b24ui?.childItem] })"
               >
                 <B24Link
@@ -327,22 +347,25 @@ function getAccordionDefaultValue(list, level = 0) {
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
                     <B24LinkBase
                       v-bind="childSlotProps"
+                      data-slot="childLink"
                       :class="b24ui.childLink({ class: [props.b24ui?.childLink, childItem.childLink, childItem.class], active: childActive })"
                     >
                       <Component
                         :is="childItem.icon"
                         v-if="childItem.icon"
+                        data-slot="childLinkIcon"
                         :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                       />
 
                       <div
                         v-if="childItem.hint"
+                        data-slot="childLinkHint"
                         :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
                       >
                         {{ childItem.hint }}
                       </div>
-                      <div :class="b24ui.childLinkWrapper({ class: [props.b24ui?.childLinkWrapper, item.b24ui?.childLinkWrapper] })">
-                        <p :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
+                      <div data-slot="childLinkWrapper" :class="b24ui.childLinkWrapper({ class: [props.b24ui?.childLinkWrapper, item.b24ui?.childLinkWrapper] })">
+                        <p data-slot="childLinkLabel" :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey) }}
                         </p>
                         <B24Badge
@@ -350,12 +373,14 @@ function getAccordionDefaultValue(list, level = 0) {
                           color="air-primary-alert"
                           :size="item.b24ui?.childLinkBadgeSize || props.b24ui?.childLinkBadgeSize || b24ui.childLinkBadgeSize()"
                           v-bind="typeof childItem.badge === 'string' || typeof childItem.badge === 'number' ? { label: childItem.badge } : childItem.badge"
+                          data-slot="childLinkBadge"
                           :class="b24ui.childLinkBadge({ class: [props.b24ui?.childLinkBadge, item.b24ui?.childLinkBadge] })"
                         />
                       </div>
                       <Component
                         :is="typeof externalIcon === 'boolean' ? icons.external : externalIcon"
                         v-if="childItem.target === '_blank' && externalIcon !== false"
+                        data-slot="childLinkLabelExternalIcon"
                         :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                       />
                     </B24LinkBase>
@@ -369,6 +394,7 @@ function getAccordionDefaultValue(list, level = 0) {
 
       <AccordionContent
         v-if="orientation === 'vertical' && item.children?.length && !collapsed"
+        data-slot="content"
         :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
       >
         <AccordionRoot
@@ -377,6 +403,7 @@ function getAccordionDefaultValue(list, level = 0) {
   defaultValue: getAccordionDefaultValue(item.children, level + 1)
 }"
           as="ul"
+          data-slot="childList"
           :class="b24ui.childList({ class: props.b24ui?.childList })"
         >
           <ReuseItemTemplate
@@ -385,6 +412,7 @@ function getAccordionDefaultValue(list, level = 0) {
             :item="childItem"
             :index="childIndex"
             :level="level + 1"
+            data-slot="childItem"
             :class="b24ui.childItem({ class: [props.b24ui?.childItem, childItem.b24ui?.childItem] })"
           />
         </AccordionRoot>
@@ -395,8 +423,9 @@ function getAccordionDefaultValue(list, level = 0) {
   <NavigationMenuRoot
     v-bind="{ ...rootProps, ...$attrs }"
     :data-collapsed="collapsed"
+    data-component="section"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
-    data-slot="section"
   >
     <slot name="list-leading" />
 
@@ -408,6 +437,7 @@ function getAccordionDefaultValue(list, level = 0) {
 } : {}"
         :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
         as="ul"
+        data-slot="list"
         :class="b24ui.list({ class: props.b24ui?.list })"
       >
         <ReuseItemTemplate
@@ -415,17 +445,18 @@ function getAccordionDefaultValue(list, level = 0) {
           :key="`list-${listIndex}-${index}`"
           :item="item"
           :index="index"
+          data-slot="item"
           :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })"
         />
       </component>
 
-      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="b24ui.separator({ class: props.b24ui?.separator })" />
+      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" data-slot="separator" :class="b24ui.separator({ class: props.b24ui?.separator })" />
     </template>
 
     <slot name="list-trailing" />
 
-    <div v-if="orientation === 'horizontal'" :class="b24ui.viewportWrapper({ class: props.b24ui?.viewportWrapper })">
-      <NavigationMenuViewport :class="b24ui.viewport({ class: props.b24ui?.viewport })" />
+    <div v-if="orientation === 'horizontal'" data-slot="viewportWrapper" :class="b24ui.viewportWrapper({ class: props.b24ui?.viewportWrapper })">
+      <NavigationMenuViewport data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })" />
     </div>
   </NavigationMenuRoot>
 </template>

package/dist/runtime/components/PageCard.vue

@@ -49,30 +49,31 @@ const ariaLabel = computed(() => {
     ref="cardRef"
     :as="as"
     :data-orientation="orientation"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     @click="onClick"
   >
-    <div :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-        <div v-if="!!slots.header" :class="b24ui.header({ class: props.b24ui?.header })">
+    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+        <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
           <slot name="leading" :b24ui="b24ui">
-            <Component :is="icon" v-if="icon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" />
+            <Component :is="icon" v-if="icon" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" :class="b24ui.body({ class: props.b24ui?.body })">
+        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
           <slot name="body">
-            <div v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+            <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
               <slot name="title">
                 {{ title }}
               </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>
@@ -80,7 +81,7 @@ const ariaLabel = computed(() => {
           </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>
       </div>

package/dist/runtime/components/PageLinks.vue

@@ -24,28 +24,29 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageLin
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <p v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
       <slot name="title">
         {{ title }}
       </slot>
     </p>
 
-    <ul :class="b24ui.list({ class: props.b24ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="b24ui.item({ class: [props.b24ui?.item, link.b24ui?.item] })">
+    <ul data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, link.b24ui?.item] })">
         <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <B24LinkBase v-bind="slotProps" :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], active })">
+          <B24LinkBase v-bind="slotProps" data-slot="link" :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], active })">
             <slot name="link" :link="link" :active="active" :b24ui="b24ui">
-              <div :class="b24ui.linkWrapper({ class: [props.b24ui?.linkWrapper, link.b24ui?.linkWrapper], active })">
+              <div data-slot="linkWrapper" :class="b24ui.linkWrapper({ class: [props.b24ui?.linkWrapper, link.b24ui?.linkWrapper], active })">
                 <slot name="link-leading" :link="link" :active="active" :b24ui="b24ui">
                   <Component
                     :is="link.icon"
                     v-if="link.icon"
+                    data-slot="linkLeadingIcon"
                     :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
                   />
                 </slot>
 
-                <div v-if="link.label || !!slots['link-label']" :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, link.b24ui?.linkLabel], active })">
+                <div v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, link.b24ui?.linkLabel], active })">
                   <slot name="link-label" :link="link" :active="active">
                     {{ link.label }}
                   </slot>
@@ -54,6 +55,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageLin
               <Component
                 :is="icons.external"
                 v-if="link.target === '_blank'"
+                data-slot="linkLabelExternalIcon"
                 :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
               />
 

package/dist/runtime/components/Pagination.vue

@@ -46,21 +46,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.paginat
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <PaginationList v-slot="{ items }" :class="b24ui.list({ class: props.b24ui?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="b24ui.first({ class: props.b24ui?.first })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="b24ui.first({ class: props.b24ui?.first })">
         <slot name="first">
           <B24Button :color="color" :size="size" :icon="firstIcon" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="b24ui.prev({ class: props.b24ui?.prev })">
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="b24ui.prev({ class: props.b24ui?.prev })">
         <slot name="prev">
           <B24Button :color="color" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" :class="b24ui.item({ class: props.b24ui?.item })">
+        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="b24ui.item({ class: props.b24ui?.item })">
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <B24Button
               :color="page === item.value ? activeColor : color"
@@ -73,19 +73,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.paginat
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else as-child :class="b24ui.ellipsis({ class: props.b24ui?.ellipsis })">
+        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="b24ui.ellipsis({ class: props.b24ui?.ellipsis })">
           <slot name="ellipsis" :b24ui="b24ui">
             <B24Button as="div" :color="color" :size="size" :icon="ellipsisIcon || icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="showControls || !!slots.next" as-child :class="b24ui.next({ class: props.b24ui?.next })">
+      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="b24ui.next({ class: props.b24ui?.next })">
         <slot name="next">
           <B24Button :color="color" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child :class="b24ui.last({ class: props.b24ui?.last })">
+      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="b24ui.last({ class: props.b24ui?.last })">
         <slot name="last">
           <B24Button :color="color" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
         </slot>

package/dist/runtime/components/PinInput.vue

@@ -82,6 +82,7 @@ defineExpose({
     :placeholder="placeholder"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
@@ -91,6 +92,7 @@ defineExpose({
       :key="ids"
       :ref="(el) => inputsRef[index] = el"
       :index="index"
+      data-slot="base"
       :class="b24ui.base({ class: props.b24ui?.base })"
       :disabled="disabled"
       @blur="onBlur"

package/dist/runtime/components/Popover.vue

@@ -69,10 +69,10 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
+      <Component.Content v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
         <slot name="content" v-bind="close ? { close } : {}" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>

package/dist/runtime/components/Progress.vue

@@ -110,19 +110,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.progres
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (status || !!slots.status)" :class="b24ui.status({ class: props.b24ui?.status })" :style="statusStyle">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div v-if="!isIndeterminate && (status || !!slots.status)" data-slot="status" :class="b24ui.status({ class: props.b24ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
-    <ProgressRoot v-bind="rootProps" :max="realMax" :class="b24ui.base({ class: props.b24ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" :style="indicatorStyle" />
+    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" style="transform: translateZ(0)">
+      <ProgressIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" :class="b24ui.steps({ class: props.b24ui?.steps })">
-      <div v-for="(step, index) in max" :key="index" :class="b24ui.step({ class: props.b24ui?.step, step: stepVariant(index) })">
+    <div v-if="hasSteps" data-slot="steps" :class="b24ui.steps({ class: props.b24ui?.steps })">
+      <div v-for="(step, index) in max" :key="index" data-slot="step" :class="b24ui.step({ class: props.b24ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}
         </slot>

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

@@ -84,12 +84,12 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
 declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<RadioGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types/utils").GetItemValue<T, VK, import("../types/utils").NestedItem<T>>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types/utils").GetItemValue<T, VK, import("../types/utils").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/RadioGroup.vue

@@ -95,11 +95,12 @@ function onUpdate(value) {
     :orientation="orientation"
     :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>
@@ -109,27 +110,31 @@ function onUpdate(value) {
         :is="!variant || variant === 'list' ? 'div' : Label"
         v-for="item in normalizedItems"
         :key="item.value"
+        data-slot="item"
         :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
       >
-        <div :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
+            data-slot="base"
             :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled })"
           >
-            <RadioGroupIndicator :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
         <div
           v-if="item.label || !!slots.label || (item.description || !!slots.description)"
+          data-slot="wrapper"
           :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })"
         >
           <component
             :is="!variant || variant === 'list' ? Label : 'p'"
             v-if="item.label || !!slots.label"
             :for="item.id"
+            data-slot="label"
             :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
           >
             <slot name="label" :item="item" :model-value="modelValue">
@@ -138,6 +143,7 @@ function onUpdate(value) {
           </component>
           <p
             v-if="item.description || !!slots.description"
+            data-slot="description"
             :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })"
           >
             <slot name="description" :item="item" :model-value="modelValue">

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

@@ -84,12 +84,12 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
 declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<RadioGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types/utils").GetItemValue<T, VK, import("../types/utils").NestedItem<T>>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types/utils").GetItemValue<T, VK, import("../types/utils").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Range.vue

@@ -70,13 +70,14 @@ function onChange(value) {
     v-model="rangeValue"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :default-value="defaultRangeValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack :class="b24ui.track({ class: props.b24ui?.track })">
-      <SliderRange :class="b24ui.range({ class: props.b24ui?.range })" />
+    <SliderTrack data-slot="track" :class="b24ui.track({ class: props.b24ui?.track })">
+      <SliderRange data-slot="range" :class="b24ui.range({ class: props.b24ui?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -86,9 +87,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb :class="b24ui.thumb({ class: props.b24ui?.thumb })" />
+        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" />
       </B24Tooltip>
-      <SliderThumb v-else :class="b24ui.thumb({ class: props.b24ui?.thumb })" />
+      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" />
     </template>
   </SliderRoot>
 </template>