@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/blockquote";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,11 +13,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.blockquote", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.blockquote || {} })());
 </script>
 
 <template>
-  <blockquote data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <blockquote data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </blockquote>
 </template>

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

@@ -6,9 +6,6 @@ export interface ProseBlockquoteProps {
     class?: any;
     b24ui?: ProseBlockquote['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseBlockquoteSlots {
     default(props?: {}): any;
 }

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/callout";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 import B24Link from "../Link.vue";
@@ -25,6 +26,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.callout", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.callout || {} })({
   color: props.color,
   to: !!props.to
@@ -65,19 +67,19 @@ const iconFromIconName = computed(() => {
       :is="icon"
       v-if="icon"
       data-slot="icon"
-      :class="b24ui.icon({ class: props.b24ui?.icon })"
+      :class="b24ui.icon({ class: uiProp?.icon })"
     />
     <Component
       :is="iconFromIconName"
       v-else-if="props.iconName"
       data-slot="icon"
-      :class="b24ui.icon({ class: props.b24ui?.icon })"
+      :class="b24ui.icon({ class: uiProp?.icon })"
     />
     <Component
       :is="icons.external"
       v-if="!!to && target === '_blank'"
       data-slot="externalIcon"
-      :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
+      :class="b24ui.externalIcon({ class: uiProp?.externalIcon })"
     />
     <slot mdc-unwrap="p" />
   </div>

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/card";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 import B24Link from "../Link.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.card", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.card || {} })({
   color: props.color,
   to: !!props.to,
@@ -31,7 +33,7 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
 </script>
 
 <template>
-  <div data-slot="base" :class="b24ui.base({ class: props.class })">
+  <div data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <B24Link
       v-if="to"
       :aria-label="ariaLabel"
@@ -46,22 +48,22 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
       :is="icon"
       v-if="icon"
       data-slot="icon"
-      :class="b24ui.icon({ class: props.b24ui?.icon })"
+      :class="b24ui.icon({ class: uiProp?.icon })"
     />
     <Component
       :is="icons.external"
       v-if="!!to && target === '_blank'"
       data-slot="externalIcon"
-      :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
+      :class="b24ui.externalIcon({ class: uiProp?.externalIcon })"
     />
 
-    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
       <slot name="title" mdc-unwrap="p">
         {{ title }}
       </slot>
     </p>
 
-    <div v-if="!!slots.default" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+    <div v-if="!!slots.default" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
       <slot>
         {{ description }}
       </slot>

package/dist/runtime/components/prose/CardGroup.d.vue.ts

@@ -1,5 +1,8 @@
 export interface ProseCardGroupProps {
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseCardGroupSlots {
     default(props?: {}): any;

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

@@ -5,17 +5,20 @@ import theme from "#build/b24ui/prose/card-group";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.cardGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.cardGroup || {} }));
 </script>
 
 <template>
-  <div :class="b24ui({ class: props.class })">
+  <div :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </div>
 </template>

package/dist/runtime/components/prose/CardGroup.vue.d.ts

@@ -1,5 +1,8 @@
 export interface ProseCardGroupProps {
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseCardGroupSlots {
     default(props?: {}): any;

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/code";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   color: { type: null, required: false },
@@ -13,6 +14,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.code", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.code || {} })({
   color: props.color
 }));
@@ -21,6 +23,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.
 <template>
   <code
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   ><slot /></code>
 </template>

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/code-collapse";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
@@ -21,24 +22,25 @@ defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeCollapse", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codeCollapse || {} })({
   open: open.value
 }));
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
 
-    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <B24Button
         :icon="icon || icons.chevronDown"
         color="air-secondary-accent-1"
         :data-state="open ? 'open' : 'closed'"
         :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
         data-slot="trigger"
-        :class="b24ui.trigger({ class: props.b24ui?.trigger })"
-        :b24ui="{ leadingIcon: b24ui.triggerIcon({ class: props.b24ui?.triggerIcon }) }"
+        :class="b24ui.trigger({ class: uiProp?.trigger })"
+        :b24ui="{ leadingIcon: b24ui.triggerIcon({ class: uiProp?.triggerIcon }) }"
         @click="open = !open"
       />
     </div>

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

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/prose/code-group";
 import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "reka-ui";
 import { useState, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import B24CodeIcon from "./CodeIcon.vue";
 const props = defineProps({
@@ -17,6 +18,7 @@ const props = defineProps({
 const slots = defineSlots();
 const model = defineModel({ type: String });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codeGroup || {} })());
 const rerenderCount = ref(1);
 const items = computed(() => {
@@ -52,14 +54,14 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" 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 })" />
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <TabsList data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" data-slot="trigger" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
-        <B24CodeIcon :icon="item.icon" :filename="item.label" data-slot="triggerIcon" :class="b24ui.triggerIcon({ class: props.b24ui?.triggerIcon })" />
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" data-slot="trigger" :class="b24ui.trigger({ class: uiProp?.trigger })">
+        <B24CodeIcon :icon="item.icon" :filename="item.label" data-slot="triggerIcon" :class="b24ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
-        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: props.b24ui?.triggerLabel })">{{ item.label }}</span>
+        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>
 

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/code-preview";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,16 +13,17 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codePreview", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codePreview || {} })({ code: !!slots.code }));
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="preview" :class="b24ui.preview({ class: [props.b24ui?.preview] })">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="preview" :class="b24ui.preview({ class: [uiProp?.preview] })">
       <slot />
     </div>
 
-    <div v-if="!!slots.code" data-slot="code" :class="b24ui.code({ class: [props.b24ui?.code] })">
+    <div v-if="!!slots.code" data-slot="code" :class="b24ui.code({ class: [uiProp?.code] })">
       <slot name="code" />
     </div>
   </div>

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/collapsible";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
@@ -21,19 +22,20 @@ const props = defineProps({
 defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.collapsible", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.collapsible || {} })());
 </script>
 
 <template>
-  <B24Collapsible :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui, props.b24ui)">
+  <B24Collapsible :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui, uiProp)">
     <template #default="{ open }">
-      <button data-slot="trigger" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
+      <button data-slot="trigger" :class="b24ui.trigger({ class: uiProp?.trigger })">
         <Component
           :is="icon || icons.chevronDown"
           data-slot="triggerIcon"
-          :class="b24ui.triggerIcon({ class: props.b24ui?.triggerIcon })"
+          :class="b24ui.triggerIcon({ class: uiProp?.triggerIcon })"
         />
-        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: props.b24ui?.triggerLabel })">
+        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: uiProp?.triggerLabel })">
           {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
         </span>
       </button>

package/dist/runtime/components/prose/Em.d.vue.ts

@@ -6,9 +6,6 @@ export interface ProseEmProps {
     class?: any;
     b24ui?: ProseEm['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseEmSlots {
     default(props?: {}): any;
 }

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/em";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,11 +13,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.em", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.em || {} })());
 </script>
 
 <template>
-  <em data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <em data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </em>
 </template>

package/dist/runtime/components/prose/Em.vue.d.ts

@@ -6,9 +6,6 @@ export interface ProseEmProps {
     class?: any;
     b24ui?: ProseEm['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseEmSlots {
     default(props?: {}): any;
 }

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

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/prose/field";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -18,28 +19,29 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.field", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.field || {} })());
 </script>
 
 <template>
-  <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 })">
-      <span v-if="name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <span v-if="name" data-slot="name" :class="b24ui.name({ class: uiProp?.name })">
         {{ name }}
       </span>
 
-      <div v-if="type || required" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-        <span v-if="type" data-slot="type" :class="b24ui.type({ class: props.b24ui?.type })">
+      <div v-if="type || required" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+        <span v-if="type" data-slot="type" :class="b24ui.type({ class: uiProp?.type })">
           {{ type }}
         </span>
 
-        <span v-if="required" data-slot="required" :class="b24ui.required({ class: props.b24ui?.required })">
+        <span v-if="required" data-slot="required" :class="b24ui.required({ class: uiProp?.required })">
           required
         </span>
       </div>
     </div>
 
-    <div v-if="!!slots.default || description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+    <div v-if="!!slots.default || description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
       <slot mdc-unwrap="p">
         {{ description }}
       </slot>

package/dist/runtime/components/prose/FieldGroup.d.vue.ts

@@ -5,6 +5,9 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;

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

@@ -6,18 +6,21 @@ import theme from "#build/b24ui/prose/field-group";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.fieldGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.fieldGroup || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/prose/FieldGroup.vue.d.ts

@@ -5,6 +5,9 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/h1";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
@@ -14,6 +15,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h1", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h1 || {} })({
   accent: props.accent
@@ -25,9 +27,9 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h1
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" :class="b24ui.link({ class: props.b24ui?.link })">
+    <a v-if="id && generate" :href="`#${id}`" :class="b24ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/h2";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 const props = defineProps({
@@ -15,6 +16,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h2", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h2 || {} })({
   accent: props.accent
@@ -26,14 +28,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h2
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: props.b24ui?.link })">
-      <span data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: uiProp?.link })">
+      <span data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <Component
           :is="icons.hash"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
       </span>
 

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/h3";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 const props = defineProps({
@@ -15,6 +16,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h3", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h3 || {} })({
   accent: props.accent
@@ -26,14 +28,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h3
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: props.b24ui?.link })">
-      <span data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: uiProp?.link })">
+      <span data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <Component
           :is="icons.hash"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
       </span>
 

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/h4";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 const props = defineProps({
@@ -15,6 +16,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h4", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h4 || {} })({
   accent: props.accent
@@ -26,14 +28,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h4
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: props.b24ui?.link })">
-      <span data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: uiProp?.link })">
+      <span data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <Component
           :is="icons.hash"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
       </span>
 

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/h5";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
@@ -14,6 +15,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h5", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h5 || {} })({
   accent: props.accent
 }));
@@ -23,7 +25,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.
   <h5
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <slot />
   </h5>