@bitrix24/b24ui-nuxt 2.1.2 → 2.1.3

package/dist/runtime/components/Slideover.vue

@@ -67,10 +67,11 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
       <DialogContent
         :data-side="side"
+        data-slot="content"
         :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
@@ -112,6 +113,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
   label: 'hidden sm:flex'
 }"
                   v-bind="typeof props.close === 'object' ? props.close : {}"
+                  data-slot="close"
                   :class="b24ui.close({ class: props.b24ui?.close })"
                 />
               </slot>
@@ -139,16 +141,16 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
             </template>
 
             <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || ['top'].includes(props?.side) && (props.close || !!slots.close)" #content-top>
-              <div :class="b24ui.header({ class: props.b24ui?.header })">
+              <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
                 <slot name="header" :close="close">
-                  <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                    <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
                       <slot name="title">
                         {{ title }}
                       </slot>
                     </DialogTitle>
 
-                    <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
                       <slot name="description">
                         {{ description }}
                       </slot>
@@ -165,6 +167,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
                           :aria-label="t('slideover.close')"
                           size="lg"
                           v-bind="typeof props.close === 'object' ? props.close : {}"
+                          data-slot="close"
                           :class="b24ui.close({ class: props.b24ui?.close })"
                         />
                       </slot>
@@ -179,13 +182,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
             </template>
 
             <template v-if="!!slots['body']" #default>
-              <div :class="b24ui.body({ class: props.b24ui?.body })">
+              <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
                 <slot name="body" :close="close" />
               </div>
             </template>
 
             <template v-if="!!slots.footer" #content-bottom>
-              <div :class="b24ui.footer({ class: props.b24ui?.footer })">
+              <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
                 <slot name="footer" :close="close" />
               </div>
             </template>

package/dist/runtime/components/Stepper.vue

@@ -61,22 +61,24 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.header({ class: props.b24ui?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
       <StepperItem
         v-for="(item, count) in items"
         :key="item.value ?? count"
         :step="count"
         :disabled="item.disabled || props.disabled"
+        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] })">
-          <StepperTrigger :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })">
-            <StepperIndicator :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })">
+        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })">
               <slot name="indicator" :item="item" :b24ui="b24ui">
                 <Component
                   :is="item.icon"
                   v-if="item.icon"
+                  data-slot="icon"
                   :class="b24ui.icon({ class: [props.b24ui?.icon, item.b24ui?.icon] })"
                 />
                 <template v-else>
@@ -88,17 +90,18 @@ defineExpose({
 
           <StepperSeparator
             v-if="count < items.length - 1"
+            data-slot="separator"
             :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
           />
         </div>
 
-        <div :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
-          <StepperTitle as="div" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
+        <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
+          <StepperTitle as="div" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
             <slot name="title" :item="item">
               {{ item.title }}
             </slot>
           </StepperTitle>
-          <StepperDescription as="div" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
+          <StepperDescription as="div" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
             <slot name="description" :item="item">
               {{ item.description }}
             </slot>
@@ -107,7 +110,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="b24ui.content({ class: props.b24ui?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
       <slot
         :name="currentStep?.slot || 'content'"
         :item="currentStep"

package/dist/runtime/components/Switch.vue

@@ -54,45 +54,49 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div :class="b24ui.container({ class: props.b24ui?.container })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...omit({ ...$attrs }, ['data-state']), ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
+        data-slot="base"
         :class="b24ui.base({ class: props.b24ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb :class="b24ui.thumb({ class: props.b24ui?.thumb })">
+        <SwitchThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })">
           <Component
             :is="loadingIcon || icons.refresh"
             v-if="loading"
+            data-slot="icon"
             :class="b24ui.icon({ class: props.b24ui?.icon, checked: true, unchecked: true })"
           />
           <template v-else>
             <Component
               :is="checkedIcon"
               v-if="checkedIcon"
+              data-slot="icon"
               :class="b24ui.icon({ class: props.b24ui?.icon, checked: true })"
             />
             <Component
               :is="uncheckedIcon"
               v-if="uncheckedIcon"
+              data-slot="icon"
               :class="b24ui.icon({ class: props.b24ui?.icon, unchecked: true })"
             />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

package/dist/runtime/components/Table.vue

@@ -285,6 +285,7 @@ defineExpose({
       :data-expanded="row.getIsExpanded()"
       :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
+      data-slot="tr"
       :class="b24ui.tr({
   class: [
     props.b24ui?.tr,
@@ -303,6 +304,7 @@ defineExpose({
         :data-pinned="cell.column.getIsPinned()"
         :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
         :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        data-slot="td"
         :class="b24ui.td({
   class: [
     props.b24ui?.td,
@@ -318,23 +320,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
-      <td :colspan="row.getAllCells().length" :class="b24ui.td({ class: [props.b24ui?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="b24ui.td({ class: [props.b24ui?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" :class="b24ui.base({ class: [props.b24ui?.base] })">
-      <caption v-if="caption || !!slots.caption" :class="b24ui.caption({ class: [props.b24ui?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base] })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="b24ui.caption({ class: [props.b24ui?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="b24ui.thead({ class: [props.b24ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
+      <thead data-slot="thead" :class="b24ui.thead({ class: [props.b24ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -342,6 +344,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-slot="th"
             :class="b24ui.th({
   class: [
     props.b24ui?.th,
@@ -357,10 +360,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
+        <tr data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
       </thead>
 
-      <tbody :class="b24ui.tbody({ class: [props.b24ui?.tbody] })">
+      <tbody data-slot="tbody" :class="b24ui.tbody({ class: [props.b24ui?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -382,13 +385,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="b24ui.loading({ class: props.b24ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="b24ui.loading({ class: props.b24ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="b24ui.empty({ class: props.b24ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="b24ui.empty({ class: props.b24ui?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>
@@ -400,20 +403,22 @@ defineExpose({
 
       <tfoot
         v-if="hasFooter"
+        data-slot="tfoot"
         :class="b24ui.tfoot({ class: [props.b24ui?.tfoot] })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
 } : void 0"
       >
-        <tr :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
+        <tr data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-slot="th"
             :class="b24ui.th({
   class: [
     props.b24ui?.th,
@@ -432,7 +437,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div
       v-if="virtualizer"
       :style="{

package/dist/runtime/components/TableWrapper.vue

@@ -37,6 +37,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tableWr
 <template>
   <Primitive
     :as="as"
+    data-slot="base"
     :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
   >
     <slot />

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

@@ -3,7 +3,7 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/tabs';
 import type { AvatarProps, BadgeProps, IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
@@ -15,7 +15,7 @@ export interface TabsItem {
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
-     * `{ size: 'sm', color: 'air-primary' }`{lang="ts"}
+     * `{ size: 'sm', color: 'air-primary' }`{lang="ts-type"}
      */
     badge?: string | number | BadgeProps;
     slot?: string;
@@ -56,7 +56,7 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
     class?: any;
     b24ui?: Tabs['slots'];
 }

package/dist/runtime/components/Tabs.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   content: { type: Boolean, required: false, default: true },
-  labelKey: { type: String, required: false, default: "label" },
+  labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   defaultValue: { type: null, required: false, default: "0" },
@@ -29,10 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emits);
-const getLabel = (item) => {
-  return get(item, props.labelKey);
-};
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs || {} })({
   variant: props.variant,
   size: props.size,
@@ -45,45 +42,56 @@ defineExpose({
 </script>
 
 <template>
-  <TabsRoot v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <TabsList :class="b24ui.list({ class: props.b24ui?.list })">
-      <TabsIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
+  <TabsRoot
+    v-bind="rootProps"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :orientation="orientation"
+    :activation-mode="activationMode"
+    data-slot="root"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+  >
+    <TabsList data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
-        v-for="(item, index) in items"
+        v-for="(item, index) of items"
         :key="index"
         :ref="(el) => triggersRef[index] = el"
-        :value="item.value || String(index)"
+        :value="item.value ?? String(index)"
         :disabled="item.disabled"
+        data-slot="trigger"
         :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :b24ui="b24ui">
           <Component
             :is="item.icon"
             v-if="item.icon"
+            data-slot="leadingIcon"
             :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item.b24ui?.leadingIcon] })"
           />
           <B24Avatar
             v-else-if="item.avatar"
             :size="item.b24ui?.leadingAvatarSize || props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
             v-bind="item.avatar"
+            data-slot="leadingAvatar"
             :class="b24ui.leadingAvatar({ class: [props.b24ui?.leadingAvatar, item.b24ui?.leadingAvatar] })"
           />
         </slot>
 
-        <span v-if="getLabel(item) || !!slots.default" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })">
-          <slot :item="item" :index="index">{{ getLabel(item) }}</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">{{ get(item, props.labelKey) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" :b24ui="b24ui">
           <B24Badge
             v-if="item.badge || item.badge === 0"
             color="air-primary"
-            variant="outline"
             :size="item.b24ui?.trailingBadgeSize || props.b24ui?.trailingBadgeSize || b24ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            data-slot="trailingBadge"
             :class="b24ui.trailingBadge({ class: [props.b24ui?.trailingBadge, item.b24ui?.trailingBadge] })"
           />
         </slot>
@@ -94,9 +102,10 @@ defineExpose({
 
     <template v-if="!!content">
       <TabsContent
-        v-for="(item, index) in items"
+        v-for="(item, index) of items"
         :key="index"
-        :value="item.value || String(index)"
+        :value="item.value ?? String(index)"
+        data-slot="content"
         :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content, item.class] })"
       >
         <slot

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

@@ -3,7 +3,7 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/tabs';
 import type { AvatarProps, BadgeProps, IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
@@ -15,7 +15,7 @@ export interface TabsItem {
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
-     * `{ size: 'sm', color: 'air-primary' }`{lang="ts"}
+     * `{ size: 'sm', color: 'air-primary' }`{lang="ts-type"}
      */
     badge?: string | number | BadgeProps;
     slot?: string;
@@ -56,7 +56,7 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
     class?: any;
     b24ui?: Tabs['slots'];
 }

package/dist/runtime/components/Textarea.vue

@@ -146,9 +146,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"
@@ -162,6 +163,7 @@ defineExpose({
       :name="name"
       :rows="rows"
       :placeholder="placeholder"
+      data-slot="base"
       :class="b24ui.base({ class: props.b24ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -174,27 +176,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/Timeline.vue

@@ -51,18 +51,20 @@ function getItemState(index) {
 </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] })">
     <div
       v-for="(item, index) in items"
       :key="item.value ?? index"
+      data-slot="item"
       :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
       :data-state="getItemState(index)"
     >
-      <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] })">
         <B24Avatar
           :size="size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
+          data-slot="indicator"
           :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })"
           :b24ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
@@ -71,23 +73,24 @@ function getItemState(index) {
 
         <Separator
           v-if="index < items.length - 1"
+          data-slot="separator"
           :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
-        <div v-if="item.date" :class="b24ui.date({ class: [props.b24ui?.date, item.b24ui?.date] })">
+      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
+        <div v-if="item.date" data-slot="date" :class="b24ui.date({ class: [props.b24ui?.date, item.b24ui?.date] })">
           <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
             {{ item.date }}
           </slot>
         </div>
-        <div v-if="item.title || !!slots.title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
+        <div v-if="item.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
           <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
             {{ item.title }}
           </slot>
         </div>
-        <div v-if="item.description || !!slots.description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
+        <div v-if="item.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
             {{ item.description }}
           </slot>

package/dist/runtime/components/Toast.vue

@@ -63,6 +63,7 @@ defineExpose({
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
@@ -70,13 +71,14 @@ defineExpose({
       <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 })">
-      <ToastTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -85,7 +87,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -95,7 +97,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <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">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="sm" :color="color" v-bind="action" />
@@ -104,7 +106,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -122,6 +124,7 @@ defineExpose({
             color="air-tertiary"
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
+            data-slot="close"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />
@@ -135,6 +138,7 @@ defineExpose({
       :color="color"
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
+      data-slot="progress"
       :class="b24ui.progress({ class: props.b24ui?.progress })"
     />
   </ToastRoot>