@nuxt/ui 4.3.0 → 4.5.0

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

@@ -7,6 +7,7 @@ import { computed, watch, onBeforeUpdate, ref } from "vue";
 import { TreeRoot, TreeItem } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
 import UIcon from "../Icon.vue";
@@ -17,11 +18,12 @@ const props = defineProps({
   defaultValue: { type: String, required: false },
   expandAll: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeTree", props);
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeTree || {} })());
 const initialPath = props.modelValue ?? props.defaultValue;
@@ -100,11 +102,14 @@ function getExpandedPaths(path) {
   return parts.slice(0, -1).map((_, index) => parts.slice(0, index + 1).join("/"));
 }
 const expanded = ref(getExpandedPaths(model.value?.path));
-watch(flatItems, () => {
-  if (props.expandAll) {
+watch(flatItems, (newItems, oldItems) => {
+  if (!props.expandAll) return;
+  const newLabels = newItems.map((i) => i.label).join("\n");
+  const oldLabels = oldItems?.map((i) => i.label).join("\n") ?? "";
+  if (newLabels !== oldLabels) {
     expanded.value = getExpandedPaths();
   }
-}, { immediate: true });
+});
 watch(model, (value) => {
   const item = flatItems.value.find((item2) => value?.path === item2.label);
   if (item?.component) {
@@ -120,7 +125,7 @@ onBeforeUpdate(() => rerenderCount.value++);
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
       role="presentation"
-      :class="level > 1 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+      :class="level > 1 ? ui.itemWithChildren({ class: uiProp?.itemWithChildren }) : ui.item({ class: uiProp?.item })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected }"
@@ -130,27 +135,27 @@ onBeforeUpdate(() => rerenderCount.value++);
       >
         <button
           type="button"
-          :class="ui.link({ class: props.ui?.link, active: isSelected })"
+          :class="ui.link({ class: uiProp?.link, active: isSelected })"
         >
           <UIcon
             v-if="item.children?.length"
             :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
           />
           <UCodeIcon
             v-else
             :filename="item.label"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
           />
 
-          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+          <span :class="ui.linkLabel({ class: uiProp?.linkLabel })">
             {{ item.label }}
           </span>
 
-          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: uiProp?.linkTrailing })">
             <UIcon
               :name="appConfig.ui.icons.chevronDown"
-              :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })"
+              :class="ui.linkTrailingIcon({ class: uiProp?.linkTrailingIcon })"
             />
           </span>
         </button>
@@ -158,7 +163,7 @@ onBeforeUpdate(() => rerenderCount.value++);
         <ul
           v-if="item.children?.length && isExpanded"
           role="group"
-          :class="ui.listWithChildren({ class: props.ui?.listWithChildren })"
+          :class="ui.listWithChildren({ class: uiProp?.listWithChildren })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -166,18 +171,18 @@ onBeforeUpdate(() => rerenderCount.value++);
     </li>
   </DefineTreeTemplate>
 
-  <div v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <div v-bind="$attrs" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <TreeRoot
       v-model="model"
       v-model:expanded="expanded"
-      :class="ui.list({ class: props.ui?.list })"
+      :class="ui.list({ class: uiProp?.list })"
       :items="items"
       :get-key="(item2) => item2.path"
     >
       <ReuseTreeTemplate :items="items" :level="1" />
     </TreeRoot>
 
-    <div :class="ui.content({ class: props.ui?.content })">
+    <div :class="ui.content({ class: uiProp?.content })">
       <component :is="lastSelectedItem?.component" />
     </div>
   </div>

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

@@ -34,13 +34,13 @@ export interface ProseCodeTreeEmits {
 export interface ProseCodeTreeSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<ProseCodeTreeProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeTreeSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -30,9 +30,9 @@ export interface ProseCollapsibleProps {
 export interface ProseCollapsibleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,6 +5,7 @@ import theme from "#build/ui/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";
@@ -16,21 +17,22 @@ const props = defineProps({
   openText: { type: String, required: false },
   closeText: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.collapsible", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.collapsible || {} })());
 </script>
 
 <template>
-  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, props.ui)">
+  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, uiProp)">
     <template #default="{ open }">
-      <button :class="ui.trigger({ class: props.ui?.trigger })">
-        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+      <button :class="ui.trigger({ class: uiProp?.trigger })">
+        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
-        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
+        <span :class="ui.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/Collapsible.vue.d.ts

@@ -30,9 +30,9 @@ export interface ProseCollapsibleProps {
 export interface ProseCollapsibleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,12 +1,15 @@
 export interface ProseEmProps {
     class?: string;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseEmSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,15 +5,18 @@ import theme from "#build/ui/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: String, required: false }
+  class: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.em", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.em || {} }));
 </script>
 
 <template>
-  <em :class="ui({ class: props.class })"><slot /></em>
+  <em :class="ui({ class: [uiProp?.base, props.class] })"><slot /></em>
 </template>

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

@@ -1,12 +1,15 @@
 export interface ProseEmProps {
     class?: string;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseEmSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -30,9 +30,9 @@ export interface ProseFieldProps {
 export interface ProseFieldSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,6 +6,7 @@ import theme from "#build/ui/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 },
@@ -14,32 +15,33 @@ const props = defineProps({
   description: { type: String, required: false },
   required: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.field", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.field || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <span v-if="name" :class="ui.name({ class: props.ui?.name })">
+  <Primitive :as="as" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div :class="ui.container({ class: uiProp?.container })">
+      <span v-if="name" :class="ui.name({ class: uiProp?.name })">
         {{ name }}
       </span>
 
-      <div v-if="type || required" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <span v-if="type" :class="ui.type({ class: props.ui?.type })">
+      <div v-if="type || required" :class="ui.wrapper({ class: uiProp?.wrapper })">
+        <span v-if="type" :class="ui.type({ class: uiProp?.type })">
           {{ type }}
         </span>
 
-        <span v-if="required" :class="ui.required({ class: props.ui?.required })">
+        <span v-if="required" :class="ui.required({ class: uiProp?.required })">
           required
         </span>
       </div>
     </div>
 
-    <div v-if="!!slots.default || description" :class="ui.description({ class: props.ui?.description })">
+    <div v-if="!!slots.default || description" :class="ui.description({ class: uiProp?.description })">
       <slot mdc-unwrap="p">
         {{ description }}
       </slot>

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

@@ -30,9 +30,9 @@ export interface ProseFieldProps {
 export interface ProseFieldSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,13 +5,16 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,18 +6,21 @@ import theme from "#build/ui/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 },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.fieldGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.fieldGroup || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -5,13 +5,16 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,9 +10,9 @@ export interface ProseH1Props {
 export interface ProseH1Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,22 +5,24 @@ import theme from "#build/ui/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 },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h1", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h1 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h1);
 </script>
 
 <template>
-  <h1 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+  <h1 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

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

@@ -10,9 +10,9 @@ export interface ProseH1Props {
 export interface ProseH1Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,9 +10,9 @@ export interface ProseH2Props {
 export interface ProseH2Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,25 +5,27 @@ import theme from "#build/ui/prose/h2";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h2", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h2 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h2);
 </script>
 
 <template>
-  <h2 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <span :class="ui.leading({ class: props.ui?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+  <h2 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
+      <span :class="ui.leading({ class: uiProp?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
       </span>
 
       <slot />

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

@@ -10,9 +10,9 @@ export interface ProseH2Props {
 export interface ProseH2Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,9 +10,9 @@ export interface ProseH3Props {
 export interface ProseH3Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH3Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH3Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH3Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH3Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH3Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH3Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,25 +5,27 @@ import theme from "#build/ui/prose/h3";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h3", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h3 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h3);
 </script>
 
 <template>
-  <h3 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <span :class="ui.leading({ class: props.ui?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+  <h3 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
+      <span :class="ui.leading({ class: uiProp?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
       </span>
 
       <slot />

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

@@ -10,9 +10,9 @@ export interface ProseH3Props {
 export interface ProseH3Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH3Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH3Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH3Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH3Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH3Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH3Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,9 +10,9 @@ export interface ProseH4Props {
 export interface ProseH4Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH4Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH4Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH4Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH4Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH4Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH4Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,22 +5,24 @@ import theme from "#build/ui/prose/h4";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h4", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h4 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h4);
 </script>
 
 <template>
-  <h4 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+  <h4 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

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

@@ -10,9 +10,9 @@ export interface ProseH4Props {
 export interface ProseH4Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH4Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH4Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH4Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH4Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH4Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH4Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;