@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

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

@@ -3,11 +3,11 @@ import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps } from '../types';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -59,14 +59,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     tagColor?: BadgeProps['color'];
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     b24ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -83,11 +85,31 @@ export interface TextareaSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -96,7 +118,27 @@ declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<A
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Textarea.vue

@@ -7,6 +7,7 @@ import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
@@ -31,13 +32,14 @@ const props = defineProps({
   autoresizeDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   rows: { type: Number, required: false, default: 3 },
-  maxrows: { type: Number, required: false },
+  maxrows: { type: Number, required: false, default: 0 },
   tag: { type: String, required: false },
   tagColor: { type: null, required: false },
   highlight: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
+  fixed: { type: Boolean, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  modelModifiers: { type: null, required: false },
   class: { type: null, required: false },
   b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
@@ -50,6 +52,7 @@ const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("textarea", props);
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const isTag = computed(() => {
@@ -60,6 +63,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
   // size: size?.value,
   loading: props.loading,
   highlight: highlight.value,
+  fixed: props.fixed,
   autoresize: Boolean(props.autoresize),
   rounded: Boolean(props.rounded),
   noPadding: Boolean(props.noPadding),
@@ -70,7 +74,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
 }));
 const textareaRef = useTemplateRef("textareaRef");
 function updateInput(value) {
-  if (props.modelModifiers?.trim) {
+  if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;
   }
   if (props.modelModifiers?.number) {
@@ -79,7 +83,7 @@ function updateInput(value) {
   if (props.modelModifiers?.nullable) {
     value ||= null;
   }
-  if (props.modelModifiers?.optional) {
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
     value ||= void 0;
   }
   modelValue.value = value;
@@ -146,11 +150,11 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <B24Badge
       v-if="isTag"
       data-slot="tag"
-      :class="b24ui.tag({ class: props.b24ui?.tag })"
+      :class="b24ui.tag({ class: uiProp?.tag })"
       :color="props.tagColor"
       :label="props.tag"
       size="xs"
@@ -164,7 +168,7 @@ defineExpose({
       :rows="rows"
       :placeholder="placeholder"
       data-slot="base"
-      :class="b24ui.base({ class: props.b24ui?.base })"
+      :class="b24ui.base({ class: uiProp?.base })"
       :disabled="disabled"
       :required="required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -176,31 +180,31 @@ defineExpose({
 
     <slot :b24ui="b24ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <span 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 })"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
         />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="b24ui.trailing({ class: uiProp?.trailing })">
       <slot name="trailing" :b24ui="b24ui">
         <Component
           :is="trailingIconName"
           v-if="trailingIconName"
           data-slot="trailingIcon"
-          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+          :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
         />
       </slot>
     </span>

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

@@ -3,11 +3,11 @@ import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps } from '../types';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -59,14 +59,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     tagColor?: BadgeProps['color'];
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     b24ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -83,11 +85,31 @@ export interface TextareaSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -96,7 +118,27 @@ declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<A
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    b24ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Theme.vue

@@ -0,0 +1,17 @@
+<script>
+import { computed } from "vue";
+import { provideThemeContext } from "../composables/useComponentUI";
+</script>
+
+<script setup>
+const props = defineProps({
+  b24ui: { type: null, required: true }
+});
+provideThemeContext({
+  b24ui: computed(() => props.b24ui)
+});
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    b24ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Timeline.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/timeline";
 import { computed } from "vue";
 import { Primitive, Separator } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { get } from "../utils";
 import B24Avatar from "./Avatar.vue";
@@ -25,6 +26,7 @@ const emits = defineEmits(["select"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("timeline", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.timeline || {} })({
   orientation: props.orientation,
   size: props.size,
@@ -57,22 +59,22 @@ function onSelect(event, item) {
 </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] })">
     <div
       v-for="(item, index) in items"
       :key="index"
       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] })"
       :data-state="getItemState(index)"
       @click="onSelect($event, item)"
     >
-      <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+      <div data-slot="container" :class="b24ui.container({ class: [uiProp?.container, item.b24ui?.container] })">
         <B24Avatar
           :size="size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
-          :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })"
+          :class="b24ui.indicator({ class: [uiProp?.indicator, item.b24ui?.indicator] })"
           :b24ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
@@ -81,24 +83,24 @@ function onSelect(event, item) {
         <Separator
           v-if="index < items.length - 1"
           data-slot="separator"
-          :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
+          :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
+      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [uiProp?.wrapper, item.b24ui?.wrapper] })">
         <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="b24ui.date({ class: [props.b24ui?.date, item.b24ui?.date] })">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="b24ui.date({ class: [uiProp?.date, item.b24ui?.date] })">
             <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
               {{ item.date }}
             </slot>
           </div>
-          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="b24ui.title({ class: [uiProp?.title, item.b24ui?.title] })">
             <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
               {{ item.title }}
             </slot>
           </div>
-          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="b24ui.description({ class: [uiProp?.description, item.b24ui?.description] })">
             <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
               {{ item.description }}
             </slot>

package/dist/runtime/components/Toast.vue

@@ -3,10 +3,11 @@ import theme from "#build/b24ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
+import { ref, computed, onMounted, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -36,6 +37,7 @@ const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "sw
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toast", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toast || {} })({
   color: props.color,
@@ -45,12 +47,10 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toast |
 const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!rootRef.value) {
+  if (!rootRef.value?.$el?.getBoundingClientRect) {
     return;
   }
-  nextTick(() => {
-    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
-  });
+  height.value = rootRef.value.$el.getBoundingClientRect().height;
 });
 defineExpose({
   height
@@ -64,7 +64,7 @@ defineExpose({
     v-bind="rootProps"
     :data-orientation="orientation"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :b24ui="b24ui">
@@ -72,13 +72,13 @@ defineExpose({
         :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 })">
-      <ToastTitle 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 })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -87,7 +87,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -97,7 +97,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <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">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="sm" :color="color" v-bind="action" />
@@ -106,7 +106,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -125,7 +125,7 @@ defineExpose({
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="b24ui.close({ class: props.b24ui?.close })"
+            :class="b24ui.close({ class: uiProp?.close })"
             @click.stop
           />
         </slot>
@@ -139,7 +139,7 @@ defineExpose({
       v-bind="typeof progress === 'object' ? progress : {}"
       size="sm"
       data-slot="progress"
-      :class="b24ui.progress({ class: props.b24ui?.progress })"
+      :class="b24ui.progress({ class: uiProp?.progress })"
     />
   </ToastRoot>
 </template>

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

@@ -43,8 +43,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    duration: number;
     position: Toaster["variants"]["position"];
+    duration: number;
     max: number;
     expand: boolean;
     portal: boolean | string | HTMLElement;

package/dist/runtime/components/Toaster.vue

@@ -10,6 +10,7 @@ import { ref, computed, toRef, provide } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
@@ -31,6 +32,7 @@ const props = defineProps({
 defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("toaster", props);
 provide(toastMaxInjectionKey, toRef(() => props.max));
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
@@ -78,10 +80,11 @@ function getOffset(index) {
       :key="toast.id"
       ref="refs"
       :progress="progress"
-      v-bind="omit(toast, ['id', 'close'])"
+      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
+      :data-pulsing="toast._duplicate ? toast._duplicate % 2 === 0 ? 'even' : 'odd' : void 0"
       :style="{
   '--index': index - toasts.length + toasts.length,
   '--before': toasts.length - 1 - index,
@@ -91,7 +94,7 @@ function getOffset(index) {
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
       data-slot="base"
-      :class="b24ui.base({ class: [props.b24ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
+      :class="b24ui.base({ class: [uiProp?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -100,7 +103,7 @@ function getOffset(index) {
       <ToastViewport
         :data-expanded="expanded"
         data-slot="viewport"
-        :class="b24ui.viewport({ class: [props.b24ui?.viewport, props.class] })"
+        :class="b24ui.viewport({ class: [uiProp?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',
   '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

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

@@ -43,8 +43,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    duration: number;
     position: Toaster["variants"]["position"];
+    duration: number;
     max: number;
     expand: boolean;
     portal: boolean | string | HTMLElement;