@bitrix24/b24ui-nuxt 2.1.2 → 2.1.4

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>

package/dist/runtime/components/Toaster.vue

@@ -90,6 +90,7 @@ function getOffset(index) {
   '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
+      data-slot="base"
       :class="b24ui.base({ class: [props.b24ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
@@ -98,6 +99,7 @@ function getOffset(index) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
+        data-slot="viewport"
         :class="b24ui.viewport({ class: [props.b24ui?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',

package/dist/runtime/components/Tooltip.vue

@@ -57,11 +57,11 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })">
+      <TooltipContent v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })">
         <slot name="content" :b24ui="b24ui">
-          <span v-if="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>
+          <span v-if="text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" :class="b24ui.kbds({ class: props.b24ui?.kbds })">
+          <span v-if="kbds?.length" data-slot="kbds" :class="b24ui.kbds({ class: props.b24ui?.kbds })">
             <B24Kbd
               v-for="(kbd, index) in kbds"
               :key="index"
@@ -72,7 +72,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip
           </span>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

package/dist/runtime/components/User.vue

@@ -56,15 +56,22 @@ const chipSize = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @click="onClick">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @click="onClick">
     <slot name="avatar" :b24ui="b24ui">
       <B24Chip v-if="chip && avatar && !['3xs'].includes(size || '')" inset v-bind="typeof chip === 'object' ? chip : {}" :size="chipSize">
-        <B24Avatar :alt="name" v-bind="avatar" :size="size" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+        <B24Avatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
       </B24Chip>
-      <B24Avatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar
+        v-else-if="avatar"
+        :alt="name"
+        v-bind="avatar"
+        :size="size"
+        data-slot="avatar"
+        :class="b24ui.avatar({ class: props.b24ui?.avatar })"
+      />
     </slot>
 
-    <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <B24Link
         v-if="to"
         :aria-label="name"
@@ -77,12 +84,12 @@ const chipSize = computed(() => {
       </B24Link>
 
       <slot>
-        <p v-if="name || !!slots.name" :class="b24ui.name({ class: props.b24ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <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 }}
           </slot>

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -5,15 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, 'color'> {
      */
     color?: ButtonProps['color'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    fallback(props?: {}): any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -57,7 +57,6 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false },
   replace: { type: Boolean, required: false }
 });
-defineSlots();
 const { t } = useLocale();
 const colorMode = useColorMode();
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
@@ -72,21 +71,17 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <B24Button
-      v-bind="{
+  <B24Button
+    v-bind="{
   ...buttonProps,
-  'icon': props.icon || (isDark ? icons.dark : icons.light),
   'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
   ...$attrs
 }"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="w-[32px] h-[34px]" />
-      </slot>
+    @click="isDark = !isDark"
+  >
+    <template #leading="{ b24ui }">
+      <Component :is="icons.dark" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="hidden dark:inline" />
+      <Component :is="icons.light" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="inline dark:hidden" />
     </template>
-  </ClientOnly>
+  </B24Button>
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -5,15 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, 'color'> {
      */
     color?: ButtonProps['color'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    fallback(props?: {}): any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/content/ContentSearch.vue

@@ -44,7 +44,7 @@ const props = defineProps({
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
-const { open } = useContentSearch();
+const { open, mapNavigationItems, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "close", "closeIcon"));
@@ -59,12 +59,16 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
   fullscreen: props.fullscreen
 }));
 const commandPaletteRef = useTemplateRef("commandPaletteRef");
-function mapLinksItems(links) {
-  return links.flatMap((link) => [{
+const mappedLinksItems = computed(() => {
+  if (!props.links?.length) {
+    return [];
+  }
+  return props.links.flatMap((link) => [{
     ...link,
     suffix: link.description,
     description: void 0,
-    icon: link.icon || icons.file
+    icon: link.icon || icons.file,
+    children: void 0
   }, ...link.children?.map((child) => ({
     ...child,
     prefix: link.label + " >",
@@ -72,79 +76,65 @@ function mapLinksItems(links) {
     description: void 0,
     icon: child.icon || link.icon || icons.file
   })) || []]);
-}
-function mapNavigationItems(children, parent) {
-  return children.flatMap((link) => {
-    if (link.children?.length) {
-      return mapNavigationItems(link.children, link);
-    }
-    return props.files?.filter((file) => file.id === link.path || file.id.startsWith(`${link.path}#`))?.map((file) => mapFile(file, link, parent)) || [];
-  });
-}
-function mapFile(file, link, parent) {
-  const prefix = [...new Set([parent?.title, ...file.titles].filter(Boolean))];
+});
+const mappedNavigationGroups = computed(() => {
+  if (!props.navigation?.length) {
+    return [];
+  }
+  if (props.navigation.some((link) => !!link.children?.length)) {
+    return props.navigation.map((group) => ({
+      id: group.path,
+      label: group.title,
+      items: mapNavigationItems(group.children || [], props.files || []),
+      postFilter
+    }));
+  } else {
+    return [{ id: "docs", items: mapNavigationItems(props.navigation, props.files || []), postFilter }];
+  }
+});
+const themeGroup = computed(() => {
+  if (!props.colorMode || colorMode?.forced) {
+    return null;
+  }
   return {
-    prefix: prefix?.length ? prefix.join(" > ") + " >" : void 0,
-    label: file.id === link.path ? link.title : file.title,
-    suffix: file.content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
-    to: file.id,
-    icon: link.icon || parent?.icon || (file.level > 1 ? icons.hash : icons.file),
-    level: file.level
+    id: "theme",
+    label: t("contentSearch.theme"),
+    items: [{
+      label: t("colorMode.system"),
+      icon: icons.system,
+      active: colorMode.preference === "system",
+      onSelect: () => {
+        colorMode.preference = "system";
+      }
+    }, {
+      label: t("colorMode.light"),
+      icon: icons.light,
+      active: colorMode.preference === "light",
+      onSelect: () => {
+        colorMode.preference = "light";
+      }
+    }, {
+      label: t("colorMode.dark"),
+      icon: icons.dark,
+      active: colorMode.preference === "dark",
+      onSelect: () => {
+        colorMode.preference = "dark";
+      }
+    }]
   };
-}
+});
 const groups = computed(() => {
   const groups2 = [];
-  if (props.links?.length) {
-    groups2.push({ id: "links", label: t("contentSearch.links"), items: mapLinksItems(props.links) });
-  }
-  if (props.navigation?.length) {
-    if (props.navigation.some((link) => !!link.children?.length)) {
-      groups2.push(...props.navigation.map((group) => ({ id: group.path, label: group.title, items: mapNavigationItems(group.children || []), postFilter })));
-    } else {
-      groups2.push({ id: "docs", items: mapNavigationItems(props.navigation), postFilter });
-    }
+  if (mappedLinksItems.value.length) {
+    groups2.push({ id: "links", label: t("contentSearch.links"), items: mappedLinksItems.value });
   }
+  groups2.push(...mappedNavigationGroups.value);
   groups2.push(...props.groups || []);
-  if (props.colorMode && !colorMode?.forced) {
-    groups2.push({
-      id: "theme",
-      label: t("contentSearch.theme"),
-      items: [
-        {
-          label: t("colorMode.system"),
-          icon: icons.system,
-          active: colorMode.preference === "system",
-          onSelect: () => {
-            colorMode.preference = "system";
-          }
-        },
-        {
-          label: t("colorMode.light"),
-          icon: icons.light,
-          active: colorMode.preference === "light",
-          onSelect: () => {
-            colorMode.preference = "light";
-          }
-        },
-        {
-          label: t("colorMode.dark"),
-          icon: icons.dark,
-          active: colorMode.preference === "dark",
-          onSelect: () => {
-            colorMode.preference = "dark";
-          }
-        }
-      ]
-    });
+  if (themeGroup.value) {
+    groups2.push(themeGroup.value);
   }
   return groups2;
 });
-function postFilter(query, items) {
-  if (!query) {
-    return items?.filter((item) => item.level === 1);
-  }
-  return items;
-}
 function onSelect(item) {
   if (item.disabled) {
     return;
@@ -169,6 +159,7 @@ defineExpose({
     :title="title || t('contentSearch.title')"
     :description="description || t('contentSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
   >
     <template #content="contentData">

package/dist/runtime/components/content/ContentSearchButton.vue

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

package/dist/runtime/components/content/ContentSurround.vue

@@ -37,25 +37,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
       v-if="link"
       :to="link.path"
       raw
+      data-slot="link"
       :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], direction })"
     >
       <slot name="link" :link="link" :b24ui="b24ui">
-        <div :class="b24ui.linkLeading({ class: [props.b24ui?.linkLeading, link.b24ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="b24ui.linkLeading({ class: [props.b24ui?.linkLeading, link.b24ui?.linkLeading] })">
           <slot name="link-leading" :link="link" :b24ui="b24ui">
             <Component
               :is="link.icon || icon"
+              data-slot="linkLeadingIcon"
               :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], direction })"
             />
           </slot>
         </div>
 
-        <p :class="b24ui.linkTitle({ class: [props.b24ui?.linkTitle, link.b24ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="b24ui.linkTitle({ class: [props.b24ui?.linkTitle, link.b24ui?.linkTitle] })">
           <slot name="link-title" :link="link" :b24ui="b24ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p :class="b24ui.linkDescription({ class: [props.b24ui?.linkDescription, link.b24ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="b24ui.linkDescription({ class: [props.b24ui?.linkDescription, link.b24ui?.linkDescription] })">
           <slot name="link-description" :link="link" :b24ui="b24ui">
             {{ link.description }}
           </slot>
@@ -65,7 +67,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
     <span v-else class="hidden lg:block">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="surround" :as="as" v-bind="$attrs" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon || icons.arrowLeft" direction="left" />
     <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon || icons.arrowRight" direction="right" />
   </Primitive>

package/dist/runtime/components/content/ContentToc.vue

@@ -60,11 +60,12 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
       <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? b24ui.itemWithChildren({ class: [props.b24ui?.itemWithChildren, link.b24ui?.itemWithChildren] }) : b24ui.item({ class: [props.b24ui?.item, link.b24ui?.item] })">
         <a
           :href="`#${link.id}`"
+          data-slot="link"
           :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], active: activeHeadings.includes(link.id) })"
           @click.prevent="scrollToHeading(link.id)"
         >
           <slot name="link" :link="link">
-            <span :class="b24ui.linkText({ class: [props.b24ui?.linkText, link.b24ui?.linkText] })">
+            <span data-slot="linkText" :class="b24ui.linkText({ class: [props.b24ui?.linkText, link.b24ui?.linkText] })">
               {{ link.text }}
             </span>
           </slot>
@@ -78,14 +79,15 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
   <DefineTriggerTemplate v-slot="{ open }">
     <slot name="leading" :open="open" :b24ui="b24ui" />
 
-    <span :class="b24ui.title({ class: props.b24ui?.title })">
+    <span data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
       <slot :open="open">{{ title || t("contentToc.title") }}</slot>
     </span>
 
-    <span :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+    <span data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
       <slot name="trailing" :open="open" :b24ui="b24ui">
         <Component
           :is="trailingIcon || icons.chevronDown"
+          data-slot="trailingIcon"
           :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
         />
       </slot>
@@ -96,36 +98,37 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
     v-slot="{ open }"
     v-bind="{ ...rootProps, ...$attrs }"
     :default-open="defaultOpen"
+    data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
   >
-    <div :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="!!slots.top" :class="b24ui.top({ class: props.b24ui?.top })">
+    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="b24ui.top({ class: props.b24ui?.top })">
         <slot name="top" :links="links" />
       </div>
 
       <template v-if="links?.length">
-        <CollapsibleTrigger :class="b24ui.trigger({ class: 'lg:hidden' })">
+        <CollapsibleTrigger data-slot="trigger" :class="b24ui.trigger({ class: 'lg:hidden' })">
           <ReuseTriggerTemplate :open="open" />
         </CollapsibleTrigger>
 
-        <CollapsibleContent :class="b24ui.content({ class: [props.b24ui?.content, 'lg:hidden'] })">
+        <CollapsibleContent data-slot="content" :class="b24ui.content({ class: [props.b24ui?.content, 'lg:hidden'] })">
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
           </slot>
         </CollapsibleContent>
 
-        <p :class="b24ui.trigger({ class: 'hidden lg:flex' })">
+        <p data-slot="trigger" :class="b24ui.trigger({ class: 'hidden lg:flex' })">
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div :class="b24ui.content({ class: [props.b24ui?.content, 'hidden lg:flex'] })">
+        <div data-slot="content" :class="b24ui.content({ class: [props.b24ui?.content, 'hidden lg:flex'] })">
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
           </slot>
         </div>
       </template>
 
-      <div v-if="!!slots.bottom" :class="b24ui.bottom({ class: props.b24ui?.bottom, body: !!slots.top || !!links?.length })">
+      <div v-if="!!slots.bottom" data-slot="bottom" :class="b24ui.bottom({ class: props.b24ui?.bottom, body: !!slots.top || !!links?.length })">
         <slot name="bottom" :links="links" />
       </div>
     </div>

package/dist/runtime/components/prose/A.vue

@@ -19,7 +19,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.
 </script>
 
 <template>
-  <B24Link :href="href" :target="target" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <B24Link :href="href" :target="target" data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
     <slot />
   </B24Link>
 </template>

package/dist/runtime/components/prose/Blockquote.vue

@@ -16,7 +16,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.
 </script>
 
 <template>
-  <blockquote :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <blockquote data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
     <slot />
   </blockquote>
 </template>

package/dist/runtime/components/prose/Callout.vue

@@ -45,7 +45,7 @@ const iconFromIconName = computed(() => {
 </script>
 
 <template>
-  <div :class="b24ui.base({ class: props.class })">
+  <div data-slot="base" :class="b24ui.base({ class: props.class })">
     <B24Link
       v-if="to"
       v-bind="{ to, target, ...$attrs }"
@@ -59,16 +59,19 @@ const iconFromIconName = computed(() => {
     <Component
       :is="icon"
       v-if="icon"
+      data-slot="icon"
       :class="b24ui.icon({ class: props.b24ui?.icon })"
     />
     <Component
       :is="iconFromIconName"
       v-else-if="props.iconName"
+      data-slot="icon"
       :class="b24ui.icon({ class: props.b24ui?.icon })"
     />
     <Component
       :is="icons.external"
       v-if="!!to && target === '_blank'"
+      data-slot="externalIcon"
       :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
     />
     <slot mdc-unwrap="p" />

package/dist/runtime/components/prose/Card.vue

@@ -31,7 +31,7 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
 </script>
 
 <template>
-  <div :class="b24ui.base({ class: props.class })">
+  <div data-slot="base" :class="b24ui.base({ class: props.class })">
     <B24Link
       v-if="to"
       :aria-label="ariaLabel"
@@ -46,21 +46,23 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
     <Component
       :is="icon"
       v-if="icon"
+      data-slot="icon"
       :class="b24ui.icon({ class: props.b24ui?.icon })"
     />
     <Component
       :is="icons.external"
       v-if="!!to && target === '_blank'"
+      data-slot="externalIcon"
       :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
     />
 
-    <p v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
       <slot name="title" mdc-unwrap="p">
         {{ title }}
       </slot>
     </p>
 
-    <div v-if="!!slots.default" :class="b24ui.description({ class: props.b24ui?.description })">
+    <div v-if="!!slots.default" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
       <slot>
         {{ description }}
       </slot>

package/dist/runtime/components/prose/Code.vue

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