@bitrix24/b24ui-nuxt 2.1.1 → 2.1.3

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.B13KxxqP.mjs';
+import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.mq1NUekN.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';
@@ -36,6 +36,14 @@ const module$1 = defineNuxtModule({
     if (nuxt.options.builder !== "@nuxt/vite-builder") {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
+    async function registerModule(name2, key, options2) {
+      if (!hasNuxtModule(name2)) {
+        await installModule(name2, defu(nuxt.options[key], options2));
+      } else {
+        nuxt.options[key] = defu(nuxt.options[key], options2);
+      }
+    }
+    await registerModule("@bitrix24/b24icons-nuxt", "empty", {});
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     addPlugin({ src: resolve("./runtime/plugins/ui-version") });
     if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {

package/dist/runtime/components/Accordion.vue

@@ -34,27 +34,30 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
       :value="item.value || String(index)"
       :disabled="item.disabled"
+      data-slot="item"
       :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
-        <AccordionTrigger :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :b24ui="b24ui">
             <Component
               :is="item.icon"
               v-if="item.icon"
+              data-slot="leadingIcon"
               :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item?.b24ui?.leadingIcon] })"
             />
           </slot>
 
           <span
             v-if="get(item, props.labelKey) || !!slots.default"
+            data-slot="label"
             :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
           >
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
@@ -63,6 +66,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
           <slot name="trailing" :item="item" :index="index" :open="open" :b24ui="b24ui">
             <Component
               :is="item.trailingIcon || trailingIcon || icons.chevronDown"
+              data-slot="trailingIcon"
               :class="b24ui.trailingIcon({ class: [props.b24ui?.trailingIcon, item.b24ui?.trailingIcon] })"
             />
           </slot>
@@ -71,6 +75,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
 
       <AccordionContent
         v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]"
+        data-slot="content"
         :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
       >
         <slot
@@ -80,7 +85,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
           :open="open"
           :b24ui="b24ui"
         >
-          <div :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
+          <div data-slot="body" :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
             <slot
               :name="item.slot ? `${item.slot}-body` : 'body'"
               :item="item"

package/dist/runtime/components/Advice.vue

@@ -30,25 +30,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div 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 })"
           :b24ui="{ icon: props.b24ui?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
         />
       </slot>
     </div>
-    <div :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
-      <div :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
+    <div data-slot="descriptionWrapper" :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
+      <div data-slot="descriptionAngle" :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"
@@ -57,18 +59,20 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
           fill="none"
         >
           <path
+            data-slot="descriptionBg"
             :class="b24ui.descriptionBg({ class: props.b24ui?.descriptionBg })"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M11.3513 11.1621C11.3492 11.1591 11.3471 11.1562 11.3449 11.1532C8.41055 10.7202 3.75061 9.56187 0.411676 6.46663C-0.404067 5.71042 0.0889447 4.42611 1.14665 4.08179C3.50511 3.31403 5.56665 2.10552 7.2199 0.897773L7.23071 0.893616L8.27368 0.163147L10.7925 5.46165L13.8677 11.5454L11.3513 11.1621Z"
           /><path
+            data-slot="descriptionBorder"
             :class="b24ui.descriptionBorder({ class: props.b24ui?.descriptionBorder })"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M11.4909 10.1639C11.7603 10.2036 12.0018 10.3515 12.1597 10.5733C12.3534 10.8456 12.5531 11.1134 12.7585 11.3765L11.3513 11.1621C11.3492 11.1591 11.3471 11.1561 11.3449 11.1531C8.41055 10.7202 3.75061 9.56187 0.411676 6.46662C-0.404067 5.71041 0.0889447 4.4261 1.14665 4.08178C3.50511 3.31403 5.56665 2.10551 7.2199 0.897764L7.23071 0.893607L8.16412 0.239868C8.18419 0.40792 8.20611 0.57539 8.22987 0.742259C8.28188 1.1077 8.12836 1.47208 7.8305 1.6901C6.11459 2.94612 3.95168 4.2203 1.45619 5.03267C1.22829 5.10686 1.07777 5.27921 1.02492 5.43712C1.00004 5.51147 1.00122 5.56804 1.00948 5.60492C1.01647 5.63618 1.03368 5.67964 1.09152 5.73326C4.20493 8.61944 8.61693 9.73979 11.4909 10.1639Z"
           /></svg>
       </div>
-      <div :class="b24ui.description({ class: props.b24ui?.description })">
+      <div data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot>
           {{ description }}
         </slot>

package/dist/runtime/components/Alert.vue

@@ -41,36 +41,37 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot name="leading" :b24ui="b24ui">
       <Component
         :is="icon"
         v-if="icon"
+        data-slot="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
     </slot>
 
-    <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <div v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <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>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="orientation === 'vertical' && (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="sm" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
@@ -85,6 +86,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
           color="air-tertiary-no-accent"
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
+          data-slot="close"
           :class="b24ui.close({ class: props.b24ui?.close })"
           @click="emits('update:open', false)"
         />

package/dist/runtime/components/Avatar.vue

@@ -65,6 +65,7 @@ function onError() {
     :is="props.chip ? B24Chip : Primitive"
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :style="props.style"
   >
@@ -76,14 +77,15 @@ function onError() {
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
+      data-slot="image"
       :class="b24ui.image({ class: props.b24ui?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
+        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

package/dist/runtime/components/AvatarGroup.vue

@@ -58,8 +58,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="b24ui.base({ class: props.b24ui?.base })" />
-    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="b24ui.base({ class: props.b24ui?.base })" />
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
+    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
   </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -54,28 +54,32 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
 <template>
   <Primitive
     :as="as"
+    data-slot="base"
     :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
   >
     <Primitive
       :as="as"
+      data-slot="wrapper"
       :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
     >
       <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>
 
       <slot :b24ui="b24ui">
-        <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label })">
+        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
           {{ label }}
         </span>
       </slot>
@@ -83,6 +87,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
     <slot name="trailing" :b24ui="b24ui">
       <Cross20Icon
         v-if="useClose"
+        data-slot="trailingIcon"
         :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         aria-hidden="true"
         @click.stop.prevent="onCloseClickWrapper"

package/dist/runtime/components/Banner.vue

@@ -60,7 +60,7 @@ function onClose() {
 </script>
 
 <template>
-  <Primitive :as="as" class="banner" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" class="banner" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <B24Link
       v-if="to"
       :aria-label="title"
@@ -72,21 +72,21 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </B24Link>
 
-    <B24Container :class="b24ui.container({ class: props.b24ui?.container })">
-      <div :class="b24ui.left({ class: props.b24ui?.left })" />
+    <B24Container data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })" />
 
-      <div :class="b24ui.center({ class: props.b24ui?.center })">
+      <div data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
         <slot name="leading" :b24ui="b24ui">
-          <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
         </slot>
 
-        <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="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"
@@ -99,7 +99,7 @@ function onClose() {
         </div>
       </div>
 
-      <div :class="b24ui.right({ class: props.b24ui?.right })">
+      <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
         <slot name="close" :b24ui="b24ui">
           <B24Button
             v-if="close"
@@ -108,6 +108,7 @@ function onClose() {
             color="air-tertiary-no-accent"
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
+            data-slot="close"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click="onClose"
           />

package/dist/runtime/components/Breadcrumb.vue

@@ -30,15 +30,16 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <ol :class="b24ui.list({ class: props.b24ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <ol data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
+        <li data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
           <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <B24LinkBase
               v-bind="slotProps"
               as="span"
               :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
+              data-slot="link"
               :class="b24ui.link({ class: [props.b24ui?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
             >
               <slot
@@ -58,18 +59,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
                   <Component
                     :is="item.icon"
                     v-if="item.icon"
+                    data-slot="linkLeadingIcon"
                     :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                   />
                   <B24Avatar
                     v-else-if="item.avatar"
                     :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
+                    data-slot="linkLeadingAvatar"
                     :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                   />
                 </slot>
 
                 <span
                   v-if="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] })"
                 >
                   <slot
@@ -93,10 +97,11 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
           </B24Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
           <slot name="separator" :b24ui="b24ui">
             <Component
               :is="separatorIcon"
+              data-slot="separatorIcon"
               :class="b24ui.separatorIcon({ class: [props.b24ui?.separatorIcon, item.b24ui?.separatorIcon] })"
             />
           </slot>

package/dist/runtime/components/Button.vue

@@ -140,6 +140,7 @@ const b24ui = computed(() => tv({
   >
     <B24LinkBase
       v-bind="slotProps"
+      data-slot="base"
       :class="b24ui.base({
   class: [props.b24ui?.base, props.class],
   active,
@@ -150,35 +151,36 @@ const b24ui = computed(() => tv({
     >
       <div
         v-if="isLoading"
+        data-slot="baseLoading"
         :class="b24ui.baseLoading({ class: props.b24ui?.baseLoading, active })"
       >
-        <LoaderWaitIcon v-if="useWait" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
-        <LoaderClockIcon v-else-if="useClock" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
-        <SpinnerIcon v-else :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
+        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
+        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
       </div>
       <div
-        :class="[
-  b24ui.baseLine({ class: [props.b24ui?.baseLine] }),
-  isLoading ? 'invisible' : ''
-]"
+        data-slot="baseLine"
+        :class="[b24ui.baseLine({ class: [props.b24ui?.baseLine] }), isLoading ? 'invisible' : '']"
       >
         <slot name="leading" :b24ui="b24ui">
           <Component
             :is="leadingIconName"
             v-if="isLeading && typeof leadingIconName !== 'undefined'"
+            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>
 
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label, active })">
-            <span :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
+            <span data-slot="labelInner" :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
               {{ label }}
             </span>
           </span>
@@ -187,6 +189,7 @@ const b24ui = computed(() => tv({
         <slot name="trailing" :b24ui="b24ui">
           <ChevronDownSIcon
             v-if="useDropdown"
+            data-slot="trailingIcon"
             :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
             aria-hidden="true"
           />

package/dist/runtime/components/Calendar.vue

@@ -92,16 +92,17 @@ const btnSize = computed(() => {
     v-bind="rootProps"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
   >
-    <Calendar.Header :class="b24ui.header({ class: props.b24ui?.header })">
+    <Calendar.Header data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <B24Button :icon="prevYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <B24Button :icon="prevMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" :class="b24ui.heading({ class: props.b24ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: props.b24ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -113,17 +114,19 @@ const btnSize = computed(() => {
         <B24Button :icon="nextYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div :class="b24ui.body({ class: props.b24ui?.body })">
+    <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
+        data-slot="grid"
         :class="b24ui.grid({ class: props.b24ui?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
+              data-slot="headCell"
               :class="b24ui.headCell({ class: props.b24ui?.headCell })"
             >
               <slot name="week-day" :day="day">
@@ -132,21 +135,24 @@ const btnSize = computed(() => {
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
+            data-slot="gridRow"
             :class="b24ui.gridRow({ class: props.b24ui?.gridRow })"
           >
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
+              data-slot="cell"
               :class="b24ui.cell({ class: props.b24ui?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
+                data-slot="cellTrigger"
                 :class="b24ui.cellTrigger({ class: props.b24ui?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">

package/dist/runtime/components/Card.vue

@@ -21,16 +21,16 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.card ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
       <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/ChatMessage.vue

@@ -38,25 +38,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
         <slot name="leading" :avatar="avatar" :b24ui="b24ui">
           <Component
             :is="icon"
             v-if="icon"
+            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>
       </div>
 
-      <div v-if="parts.length || !!slots.content" :class="b24ui.content({ class: props.b24ui?.content })">
+      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
         <slot
           :id="id"
           name="content"
@@ -71,7 +73,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions" :actions="actions">
           <B24Tooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <B24Button

package/dist/runtime/components/ChatMessages.vue

@@ -174,6 +174,7 @@ onMounted(() => {
   <div
     ref="el"
     :data-status="status"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
@@ -200,7 +201,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :b24ui="b24ui">
-          <div :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
             <span />
             <span />
             <span />
@@ -210,13 +211,14 @@ onMounted(() => {
     </B24ChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
         <slot name="viewport" :b24ui="b24ui" :on-click="onAutoScrollClick">
           <B24Button
             v-if="autoScroll"
             :icon="autoScrollIcon || icons.arrowDown"
             color="air-secondary-no-accent"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            data-slot="autoScroll"
             :class="b24ui.autoScroll({ class: props.b24ui?.autoScroll })"
             @click="onAutoScrollClick"
           />