ng-blatui 1.30.0 → 1.31.0

package/fesm2022/ng-blatui.mjs

@@ -174,8 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const BASE$2 = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
-const SIZES$6 = {
+const BASE$1 = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
+const SIZES$4 = {
     sm: 'px-1.5 py-px text-[0.625rem]',
     default: 'px-2 py-0.5 text-xs',
     lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
@@ -252,7 +252,7 @@ class BuiBadge {
     computedClass = computed(() => {
         const tone = this.tone();
         const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$2[tone][intensityFor(this.variant())];
-        return cn(BASE$2, SIZES$6[this.size()], toneOrVariant, this.userClass());
+        return cn(BASE$1, SIZES$4[this.size()], toneOrVariant, this.userClass());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -558,16 +558,36 @@ const TEXTAREA_SIZES = {
     default: 'min-h-16 px-3 py-2 text-base md:text-sm',
     lg: 'min-h-20 px-4 py-2.5 text-base',
 };
-/** Applies BlatUI textarea styling to a native `<textarea>` (auto-grows via field-sizing). */
+// Vertical padding (top + bottom) baked into each size preset, used to compute the `maxRows`
+// height cap. Mirrors the `py-*` utilities in TEXTAREA_SIZES.
+const TEXTAREA_PADDING_Y = {
+    sm: '0.75rem',
+    default: '1rem',
+    lg: '1.25rem',
+};
+/**
+ * Applies BlatUI textarea styling to a native `<textarea>`. Auto-grows with its content via CSS
+ * `field-sizing-content` (no JS). Set `[maxRows]` to cap the growth — past it the field scrolls.
+ */
 class BuiTextarea {
     /** Size preset controlling minimum height, padding and text size. */
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Maximum number of rows before the textarea scrolls instead of growing (null = unlimited). */
+    maxRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     computedClass = computed(() => cn(TEXTAREA_BASE, TEXTAREA_SIZES[this.size()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    // Cap the auto-grow at `maxRows` lines using the `lh` unit (one line-height) plus the size's
+    // vertical padding and the 1px borders — purely declarative, so it stays SSR-safe.
+    maxHeight = computed(() => {
+        const rows = this.maxRows();
+        return rows === null ? null : `calc(${rows} * 1lh + ${TEXTAREA_PADDING_Y[this.size()]} + 2px)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTextarea, isStandalone: true, selector: "textarea[buiTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "textarea" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTextarea, isStandalone: true, selector: "textarea[buiTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "textarea" }, properties: { "attr.data-size": "size()", "class": "computedClass()", "style.max-height": "maxHeight()", "style.overflow-y": "maxRows() === null ? null : 'auto'" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTextarea, decorators: [{
             type: Directive,
@@ -577,9 +597,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         'data-slot': 'textarea',
                         '[attr.data-size]': 'size()',
                         '[class]': 'computedClass()',
+                        '[style.max-height]': 'maxHeight()',
+                        '[style.overflow-y]': "maxRows() === null ? null : 'auto'",
                     },
                 }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * BlatUI linear progress bar. Exposes the full `progressbar` ARIA contract
@@ -2720,7 +2742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES$5 = {
+const SIZES$3 = {
     sm: 'max-w-3xl',
     md: 'max-w-5xl',
     lg: 'max-w-6xl',
@@ -2734,7 +2756,7 @@ class BuiContainer {
     size = input('lg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$5[this.size()], this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$3[this.size()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiContainer, isStandalone: true, selector: "[buiContainer]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "container" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
@@ -3477,7 +3499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES$4 = {
+const SIZES$2 = {
     sm: { box: 'size-6', overlap: '-ms-2', ring: 'ring-1', text: 'text-xs' },
     default: { box: 'size-8', overlap: '-ms-2.5', ring: 'ring-2', text: 'text-sm' },
     lg: { box: 'size-12', overlap: '-ms-3', ring: 'ring-2', text: 'text-base' },
@@ -3512,11 +3534,11 @@ class BuiAvatarGroup {
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     toInitials = initials;
     itemClass(index) {
-        const size = SIZES$4[this.size()];
+        const size = SIZES$2[this.size()];
         return cn(size.box, size.ring, 'ring-background', index > 0 && size.overlap);
     }
     moreClass() {
-        const size = SIZES$4[this.size()];
+        const size = SIZES$2[this.size()];
         return cn('relative z-10 flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-foreground', size.box, size.ring, 'ring-background', size.text, this.shown().length > 0 && size.overlap);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5024,7 +5046,13 @@ const BTN_SIZE$1 = {
     lg: 'w-9 [&_svg]:size-4',
 };
 const FIELD_WIDTH = { sm: 'w-9', default: 'w-10', lg: 'w-12' };
-/** A compact − [n] + quantity stepper (`role="group"` with a `spinbutton` field). */
+/**
+ * @deprecated Use `<bui-number-input [min]="1" size="sm">` instead — it is the same numeric
+ * stepper, so this duplicate was dropped from the registry and docs. Still exported as a thin
+ * compatibility shim; existing usages keep working.
+ *
+ * A compact − [n] + quantity stepper (`role="group"` with a `spinbutton` field).
+ */
 class BuiQuantitySelector {
     /** Current quantity. Two-way bindable with `[(value)]`. */
     value = model(1, /* @ts-ignore */
@@ -5314,71 +5342,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const BASE$1 = 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 flex w-full resize-none overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
-const SIZES$3 = {
-    sm: 'min-h-14 px-2.5 py-1.5 text-sm',
-    default: 'min-h-16 px-3 py-2 text-base md:text-sm',
-    lg: 'min-h-20 px-4 py-2.5 text-base',
-};
 /**
- * A textarea that grows with its content. SSR-safe — the height is measured only in the
- * browser (via `afterNextRender` and the `input` event).
+ * @deprecated Use `<textarea buiTextarea [maxRows]="…">` instead — `buiTextarea` already auto-grows
+ * (CSS `field-sizing-content`) and now supports `maxRows`. Kept as a thin alias so existing
+ * `buiAutosizeTextarea` markup keeps working; it inherits every input from {@link BuiTextarea}.
+ *
+ * A textarea that grows with its content, capped at `maxRows`.
  */
-class BuiAutosizeTextarea {
-    /** Size preset controlling minimum height, padding and text size. */
-    size = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Maximum number of rows before the textarea scrolls instead of growing (null = unlimited). */
-    maxRows = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
-    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    host = inject(ElementRef);
-    computedClass = computed(() => cn(BASE$1, SIZES$3[this.size()], this.userClass()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    constructor() {
-        afterNextRender(() => {
-            this.resize();
-        });
-    }
-    resize() {
-        const element = this.host.nativeElement;
-        element.style.height = 'auto';
-        let target = element.scrollHeight;
-        const maxRows = this.maxRows();
-        if (maxRows !== null) {
-            const styles = getComputedStyle(element);
-            let lineHeight = Number.parseFloat(styles.lineHeight);
-            if (Number.isNaN(lineHeight)) {
-                lineHeight = Number.parseFloat(styles.fontSize) * 1.2;
-            }
-            const padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
-            const border = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
-            const cap = lineHeight * maxRows + padding + border;
-            if (target > cap) {
-                target = cap;
-                element.style.overflowY = 'auto';
-            }
-            else {
-                element.style.overflowY = 'hidden';
-            }
-        }
-        element.style.height = `${target}px`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAutosizeTextarea, isStandalone: true, selector: "textarea[buiAutosizeTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "autosize-textarea" }, listeners: { "input": "resize()" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
+class BuiAutosizeTextarea extends BuiTextarea {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BuiAutosizeTextarea, isStandalone: true, selector: "textarea[buiAutosizeTextarea]", host: { attributes: { "data-slot": "autosize-textarea" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[buiAutosizeTextarea]',
-                    host: {
-                        'data-slot': 'autosize-textarea',
-                        '[attr.data-size]': 'size()',
-                        '[class]': 'computedClass()',
-                        '(input)': 'resize()',
-                    },
+                    host: { 'data-slot': 'autosize-textarea' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }] });
 
 class BuiDropdownMenu {
     menu = inject(Menu);
@@ -7431,7 +7412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], cite: [{ type: i0.Input, args: [{ isSignal: true, alias: "cite", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES$2 = { sm: 'text-sm', default: 'text-base', lg: 'text-2xl' };
+const SIZES$1 = { sm: 'text-sm', default: 'text-base', lg: 'text-2xl' };
 const COMPARE_SIZES = { sm: 'text-xs', default: 'text-sm', lg: 'text-base' };
 /** A price display with optional compare-at (strikethrough) and a discount badge. */
 class BuiPrice {
@@ -7463,7 +7444,7 @@ class BuiPrice {
             : 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "discount" }] : /* istanbul ignore next */ []));
-    currentClass = computed(() => cn(SIZES$2[this.size()], this.onSale() ? 'text-emerald-700 dark:text-emerald-400' : 'text-foreground'), /* @ts-ignore */
+    currentClass = computed(() => cn(SIZES$1[this.size()], this.onSale() ? 'text-emerald-700 dark:text-emerald-400' : 'text-foreground'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentClass" }] : /* istanbul ignore next */ []));
     compareClass = computed(() => cn(COMPARE_SIZES[this.size()], 'text-muted-foreground'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compareClass" }] : /* istanbul ignore next */ []));
@@ -7626,7 +7607,7 @@ const COLORS = {
     offline: 'bg-gray-400',
 };
 const LABELS = { online: 'Online', away: 'Away', busy: 'Busy', offline: 'Offline' };
-const SIZES$1 = { sm: 'size-2', default: 'size-2.5', lg: 'size-3' };
+const SIZES = { sm: 'size-2', default: 'size-2.5', lg: 'size-3' };
 /** A small status dot (online/away/busy/offline). Status is never colour-only — the label is always present. */
 class BuiPresence {
     /** Presence state, which sets the dot color and default label. */
@@ -7647,7 +7628,7 @@ class BuiPresence {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     colorClass = computed(() => COLORS[this.status()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colorClass" }] : /* istanbul ignore next */ []));
-    sizeClass = computed(() => SIZES$1[this.size()], /* @ts-ignore */
+    sizeClass = computed(() => SIZES[this.size()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     labelText = computed(() => this.label() || LABELS[this.status()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
@@ -8563,7 +8544,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES = { default: 'h-9 px-4 py-2', sm: 'h-8 gap-1.5 px-3', lg: 'h-10 px-6' };
 /** A stateful add-to-cart button: idle → adding → added → idle. Emits `triggered` on click. */
 class BuiAddToCart {
     /** Button text shown in the idle and adding states. */
@@ -8581,9 +8561,9 @@ class BuiAddToCart {
     state = signal('idle', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     timers = [];
-    btnClass = computed(() => cn('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-90', SIZES[this.size()], this.state() === 'added'
-        ? 'bg-emerald-600 text-white'
-        : 'bg-primary text-primary-foreground hover:bg-primary/90', this.userClass()), /* @ts-ignore */
+    // Composes the button's styling (single source of truth via `buttonVariants`); the busy/added
+    // states only recolor on top — tailwind-merge drops the conflicting base background.
+    btnClass = computed(() => cn(buttonVariants({ size: this.size() }), 'disabled:opacity-90', this.state() === 'added' ? 'bg-emerald-600 text-white hover:bg-emerald-600' : '', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
     add() {
         if (this.state() !== 'idle') {
@@ -18556,11 +18536,11 @@ class BuiMentionInput {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMentionInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMentionInput, isStandalone: true, selector: "bui-mention-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mentions: { classPropertyName: "mentions", publicName: "mentions", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "mention-input" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <textarea
+      buiTextarea
       [value]="value()"
       [placeholder]="placeholder()"
       [rows]="rows()"
       [attr.name]="name() || null"
-      class="w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
       (input)="onInput($event)"
       (keydown)="onKeydown($event)"
     ></textarea>
@@ -18583,20 +18563,21 @@ class BuiMentionInput {
         }
       </ul>
     }
-  `, isInline: true });
+  `, isInline: true, dependencies: [{ kind: "directive", type: BuiTextarea, selector: "textarea[buiTextarea]", inputs: ["size", "maxRows", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMentionInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'bui-mention-input',
                     host: { 'data-slot': 'mention-input', '[class]': 'computedClass()' },
+                    imports: [BuiTextarea],
                     template: `
     <textarea
+      buiTextarea
       [value]="value()"
       [placeholder]="placeholder()"
       [rows]="rows()"
       [attr.name]="name() || null"
-      class="w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
       (input)="onInput($event)"
       (keydown)="onKeydown($event)"
     ></textarea>