@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/air-design-tokens/index.css

@@ -1 +1 @@
-@import "./001_b24_global.css";@import "./003_b24_context_light.css";@import "./004_b24_context_dark.css";@import "./005_b24_context_edge-light.css";@import "./006_b24_context_edge-dark.css";@import "./007_b24_global.css";@import "./008_ui_global.css";@import "./009_b24_tools.css";@import "./components/popup.css";@import "./components/scrollbar.css";@import "./components/navigation-menu.css";@import "./components/badge-counter.css";@import "./components/button.css";
+@import "./001_b24_global.css";@import "./003_b24_context_light.css";@import "./004_b24_context_dark.css";@import "./005_b24_context_edge-light.css";@import "./006_b24_context_edge-dark.css";@import "./013_b24_mobile_light.css";@import "./014_b24_mobile_dark.css";@import "./015_b24_mobile_edge-light.css";@import "./016_b24_mobile_edge-dark.css";@import "./023_b24_desktop_light.css";@import "./024_b24_desktop_dark.css";@import "./025_b24_desktop_edge-light.css";@import "./026_b24_desktop_edge-dark.css";@import "./007_b24_global.css";@import "./008_ui_global.css";@import "./009_b24_tools.css";@import "./components/popup.css";@import "./components/scrollbar.css";@import "./components/navigation-menu.css";@import "./components/badge-counter.css";@import "./components/button.css";

package/dist/runtime/components/Accordion.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -28,6 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("accordion", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordion || {} })({
   disabled: props.disabled
@@ -35,7 +37,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -43,23 +45,23 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
       :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+      :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
-        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [uiProp?.header, item.b24ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [uiProp?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :b24ui="b24ui">
             <Component
               :is="item.icon"
               v-if="item.icon"
               data-slot="leadingIcon"
-              :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item?.b24ui?.leadingIcon] })"
+              :class="b24ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.b24ui?.leadingIcon] })"
             />
           </slot>
 
           <span
             v-if="get(item, props.labelKey) || !!slots.default"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+            :class="b24ui.label({ class: [uiProp?.label, item.b24ui?.label] })"
           >
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
@@ -68,7 +70,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
             <Component
               :is="item.trailingIcon || trailingIcon || icons.chevronDown"
               data-slot="trailingIcon"
-              :class="b24ui.trailingIcon({ class: [props.b24ui?.trailingIcon, item.b24ui?.trailingIcon] })"
+              :class="b24ui.trailingIcon({ class: [uiProp?.trailingIcon, item.b24ui?.trailingIcon] })"
             />
           </slot>
         </AccordionTrigger>
@@ -77,7 +79,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
       <AccordionContent
         v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]"
         data-slot="content"
-        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
+        :class="b24ui.content({ class: [uiProp?.content, item.b24ui?.content] })"
       >
         <slot
           :name="item.slot || 'content'"
@@ -86,7 +88,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordi
           :open="open"
           :b24ui="b24ui"
         >
-          <div data-slot="body" :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
+          <div data-slot="body" :class="b24ui.body({ class: [uiProp?.body, item.b24ui?.body] })">
             <slot
               :name="item.slot ? `${item.slot}-body` : 'body'"
               :item="item"

package/dist/runtime/components/Advice.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/advice";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("advice", props);
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
@@ -30,27 +32,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
       <slot name="leading" :b24ui="b24ui">
         <Component
           :is="leadingIconName"
           v-if="isLeading && leadingIconName"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           data-slot="leadingAvatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
-          :b24ui="{ icon: props.b24ui?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
+          :b24ui="{ icon: uiProp?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
         />
       </slot>
     </div>
-    <div data-slot="descriptionWrapper" :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
-      <div data-slot="descriptionAngle" :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
+    <div data-slot="descriptionWrapper" :class="b24ui.descriptionWrapper({ class: uiProp?.descriptionWrapper })">
+      <div data-slot="descriptionAngle" :class="b24ui.descriptionAngle({ class: uiProp?.descriptionAngle })">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"
@@ -60,19 +62,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
         >
           <path
             data-slot="descriptionBg"
-            :class="b24ui.descriptionBg({ class: props.b24ui?.descriptionBg })"
+            :class="b24ui.descriptionBg({ class: uiProp?.descriptionBg })"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M11.3513 11.1621C11.3492 11.1591 11.3471 11.1562 11.3449 11.1532C8.41055 10.7202 3.75061 9.56187 0.411676 6.46663C-0.404067 5.71042 0.0889447 4.42611 1.14665 4.08179C3.50511 3.31403 5.56665 2.10552 7.2199 0.897773L7.23071 0.893616L8.27368 0.163147L10.7925 5.46165L13.8677 11.5454L11.3513 11.1621Z"
           /><path
             data-slot="descriptionBorder"
-            :class="b24ui.descriptionBorder({ class: props.b24ui?.descriptionBorder })"
+            :class="b24ui.descriptionBorder({ class: uiProp?.descriptionBorder })"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M11.4909 10.1639C11.7603 10.2036 12.0018 10.3515 12.1597 10.5733C12.3534 10.8456 12.5531 11.1134 12.7585 11.3765L11.3513 11.1621C11.3492 11.1591 11.3471 11.1561 11.3449 11.1531C8.41055 10.7202 3.75061 9.56187 0.411676 6.46662C-0.404067 5.71041 0.0889447 4.4261 1.14665 4.08178C3.50511 3.31403 5.56665 2.10551 7.2199 0.897764L7.23071 0.893607L8.16412 0.239868C8.18419 0.40792 8.20611 0.57539 8.22987 0.742259C8.28188 1.1077 8.12836 1.47208 7.8305 1.6901C6.11459 2.94612 3.95168 4.2203 1.45619 5.03267C1.22829 5.10686 1.07777 5.27921 1.02492 5.43712C1.00004 5.51147 1.00122 5.56804 1.00948 5.60492C1.01647 5.63618 1.03368 5.67964 1.09152 5.73326C4.20493 8.61944 8.61693 9.73979 11.4909 10.1639Z"
           /></svg>
       </div>
-      <div data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <div data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot>
           {{ description }}
         </slot>

package/dist/runtime/components/Alert.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/alert";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -31,6 +32,7 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("alert", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert || {} })({
   color: props.color,
   inverted: Boolean(props.inverted),
@@ -41,37 +43,37 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot name="leading" :b24ui="b24ui">
       <Component
         :is="icon"
         v-if="icon"
         data-slot="icon"
-        :class="b24ui.icon({ class: props.b24ui?.icon })"
+        :class="b24ui.icon({ class: uiProp?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="uiProp?.avatarSize || b24ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="b24ui.avatar({ class: uiProp?.avatar })" />
     </slot>
 
-    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+      <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description">
           {{ description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
@@ -87,7 +89,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
           data-slot="close"
-          :class="b24ui.close({ class: props.b24ui?.close })"
+          :class="b24ui.close({ class: uiProp?.close })"
           @click="emits('update:open', false)"
         />
       </slot>

package/dist/runtime/components/Avatar.vue

@@ -8,6 +8,7 @@ import { Primitive, Slot } from "reka-ui";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/b24ui-image-component";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import B24Chip from "./Chip.vue";
@@ -34,6 +35,7 @@ const fallback = computed(
   () => props.text || (props.alt || "").replace(/[+\-*)(}\][{]/g, "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2)
 );
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatar", props);
 const { size } = useAvatarGroup(props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatar || {} })({
   size: size.value
@@ -66,7 +68,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="props.style"
   >
     <component
@@ -78,14 +80,14 @@ function onError() {
       :height="sizePx"
       v-bind="$attrs"
       data-slot="image"
-      :class="b24ui.image({ class: props.b24ui?.image })"
+      :class="b24ui.image({ class: uiProp?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
+        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
+        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: uiProp?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

package/dist/runtime/components/AvatarGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/avatar-group";
 import { computed, provide } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -18,6 +19,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatarGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatarGroup || {} })({
   size: props.size
 }));
@@ -58,8 +60,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
-    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" />
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="b24ui.base({ class: uiProp?.base })" />
+    <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="b24ui.base({ class: uiProp?.base })" />
   </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/badge";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
@@ -30,6 +31,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("badge", props);
 async function onCloseClickWrapper(event) {
   const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
   try {
@@ -55,31 +57,31 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
   <Primitive
     :as="as"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <Primitive
       :as="as"
       data-slot="wrapper"
-      :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
+      :class="b24ui.wrapper({ class: uiProp?.wrapper })"
     >
       <slot name="leading" :b24ui="b24ui">
         <Component
           :is="leadingIconName"
           v-if="isLeading && leadingIconName"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           data-slot="leadingAvatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
         />
       </slot>
 
       <slot :b24ui="b24ui">
-        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
           {{ label }}
         </span>
       </slot>
@@ -88,7 +90,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
       <Cross20Icon
         v-if="useClose"
         data-slot="trailingIcon"
-        :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
         aria-hidden="true"
         @click.stop.prevent="onCloseClickWrapper"
       />

package/dist/runtime/components/Banner.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/banner";
 import { computed, ref, onMounted, useId } from "vue";
 import { Primitive } from "reka-ui";
 import { useHead, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -31,6 +32,7 @@ const slots = defineSlots();
 const emits = defineEmits(["close"]);
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("banner", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.banner || {} })({
   color: props.color,
   to: !!props.to
@@ -89,7 +91,7 @@ function onClose() {
     class="banner"
     :data-banner-id="id"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <B24Link
       v-if="to"
@@ -102,21 +104,21 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </B24Link>
 
-    <B24Container data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })" />
+    <B24Container data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })" />
 
-      <div data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
+      <div data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
         <slot name="leading" :b24ui="b24ui">
-          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <B24Button
               v-for="(action, index) in actions"
@@ -129,7 +131,7 @@ function onClose() {
         </div>
       </div>
 
-      <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
+      <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
         <slot name="close" :b24ui="b24ui">
           <B24Button
             v-if="close"
@@ -139,7 +141,7 @@ function onClose() {
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="b24ui.close({ class: props.b24ui?.close })"
+            :class="b24ui.close({ class: uiProp?.close })"
             @click="onClose"
           />
         </slot>

package/dist/runtime/components/Breadcrumb.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/breadcrumb";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -25,22 +26,23 @@ const props = defineProps({
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("breadcrumb", props);
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcrumb || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <ol data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <ol data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
+        <li data-slot="item" :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item] })">
           <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <B24LinkBase
               v-bind="slotProps"
               as="span"
               :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
               data-slot="link"
-              :class="b24ui.link({ class: [props.b24ui?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
+              :class="b24ui.link({ class: [uiProp?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
             >
               <slot
                 :name="item.slot || 'item'"
@@ -60,21 +62,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
                     :is="item.icon"
                     v-if="item.icon"
                     data-slot="linkLeadingIcon"
-                    :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                   />
                   <B24Avatar
                     v-else-if="item.avatar"
-                    :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
+                    :size="uiProp?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
                     data-slot="linkLeadingAvatar"
-                    :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                   />
                 </slot>
 
                 <span
                   v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                   data-slot="linkLabel"
-                  :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel] })"
+                  :class="b24ui.linkLabel({ class: [uiProp?.linkLabel, item.b24ui?.linkLabel] })"
                 >
                   <slot
                     :name="item.slot ? `${item.slot}-label` : 'item-label'"
@@ -97,12 +99,12 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
           </B24Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })">
           <slot name="separator" :b24ui="b24ui">
             <Component
               :is="separatorIcon"
               data-slot="separatorIcon"
-              :class="b24ui.separatorIcon({ class: [props.b24ui?.separatorIcon, item.b24ui?.separatorIcon] })"
+              :class="b24ui.separatorIcon({ class: [uiProp?.separatorIcon, item.b24ui?.separatorIcon] })"
             />
           </slot>
         </li>

package/dist/runtime/components/Button.vue

@@ -7,6 +7,7 @@ import { computed, ref, inject } from "vue";
 import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
@@ -68,6 +69,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const { orientation, size: buttonSize, noSplit } = useFieldGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const proxyLinkProps = computed(() => {
@@ -142,7 +144,7 @@ const b24ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="b24ui.base({
-  class: [props.b24ui?.base, props.class],
+  class: [uiProp?.base, props.class],
   active,
   ...active && activeDepth ? { depth: activeDepth } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -152,35 +154,35 @@ const b24ui = computed(() => tv({
       <div
         v-if="isLoading"
         data-slot="baseLoading"
-        :class="b24ui.baseLoading({ class: props.b24ui?.baseLoading, active })"
+        :class="b24ui.baseLoading({ class: uiProp?.baseLoading, active })"
       >
-        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
-        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
-        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
+        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: uiProp?.baseLoadingWaitIcon })" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: uiProp?.baseLoadingClockIcon })" aria-hidden="true" />
+        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: uiProp?.baseLoadingSpinnerIcon })" aria-hidden="true" />
       </div>
       <div
         data-slot="baseLine"
-        :class="[b24ui.baseLine({ class: [props.b24ui?.baseLine] }), isLoading ? 'invisible' : '']"
+        :class="[b24ui.baseLine({ class: [uiProp?.baseLine] }), isLoading ? 'invisible' : '']"
       >
         <slot name="leading" :b24ui="b24ui">
           <Component
             :is="leadingIconName"
             v-if="isLeading && typeof leadingIconName !== 'undefined'"
             data-slot="leadingIcon"
-            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+            :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
           />
           <B24Avatar
             v-else-if="!!avatar"
-            :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+            :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
             v-bind="avatar"
             data-slot="leadingAvatar"
-            :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+            :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
           />
         </slot>
 
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
-            <span data-slot="labelInner" :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label, active })">
+            <span data-slot="labelInner" :class="b24ui.labelInner({ class: uiProp?.labelInner, active })">
               {{ label }}
             </span>
           </span>
@@ -190,7 +192,7 @@ const b24ui = computed(() => tv({
           <ChevronDownSIcon
             v-if="useDropdown"
             data-slot="trailingIcon"
-            :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+            :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
             aria-hidden="true"
           />
         </slot>