ng-blatui 1.30.0 → 1.32.0

package/fesm2022/ng-blatui.mjs

@@ -86,6 +86,8 @@ const BUI_DEFAULT_LABELS = {
     sonnerDismiss: 'Dismiss notification',
     themeCustomizer: 'Theme customizer',
     treeTableToggle: 'Toggle row',
+    treeTableCopy: 'Copy as tree',
+    treeTableCopied: 'Copied',
     videoPlay: 'Play video',
 };
 /**
@@ -174,8 +176,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 +254,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 +560,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 +599,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
@@ -1071,7 +1095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const TRIGGER = 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg]:text-muted-foreground [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:transition-transform [&>svg]:duration-200 [&[aria-expanded=true]>svg]:rotate-180';
+const TRIGGER = 'flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:text-muted-foreground [&>svg]:transition-transform [&>svg]:duration-200 [&[aria-expanded=true]>svg]:rotate-180';
 class BuiAccordion {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     computedClass = computed(() => cn('w-full', this.userClass()), /* @ts-ignore */
@@ -2720,7 +2744,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 +2758,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 +3501,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 +3536,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 });
@@ -3750,7 +3774,9 @@ class BuiPopover {
             .withPositions([POPOVER_POSITIONS[side], POPOVER_POSITIONS[POPOVER_FALLBACK[side]]]);
         const overlayReference = this.overlay.create({
             positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            // Close (not reposition) on scroll, so the popover doesn't hang detached over the page
+            // once its trigger scrolls out of view.
+            scrollStrategy: this.overlay.scrollStrategies.close(),
         });
         overlayReference.attach(new TemplatePortal(this.content(), this.viewContainerRef));
         overlayReference.outsidePointerEvents().subscribe((event) => {
@@ -5024,7 +5050,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,79 +5346,39 @@ 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);
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     computedClass = computed(() => cn('absolute z-50 mt-1 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    // The menu is absolutely anchored to its trigger; once the page scrolls it would otherwise
+    // drift across the layout (e.g. over a sticky navbar). Closing on scroll matches native menus.
+    onScroll() {
+        if (this.menu.visible()) {
+            this.menu.close();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenu, isStandalone: true, selector: "[buiDropdownMenu]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu" }, properties: { "hidden": "!menu.visible()", "class": "computedClass()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenu, isStandalone: true, selector: "[buiDropdownMenu]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu" }, listeners: { "window:scroll": "onScroll()" }, properties: { "hidden": "!menu.visible()", "class": "computedClass()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenu, decorators: [{
             type: Directive,
@@ -5396,6 +5388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         'data-slot': 'dropdown-menu',
                         '[hidden]': '!menu.visible()',
                         '[class]': 'computedClass()',
+                        '(window:scroll)': 'onScroll()',
                     },
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
@@ -5447,11 +5440,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * `ngMenuTrigger` opening a `ngMenu` (style the menus with `buiDropdownMenu` /
  * `buiDropdownMenuItem`). `MenuBar` is re-exported from `ng-blatui`.
  *
+ * Wrap each trigger + its menu in a `relative` element so the menu anchors under its own
+ * trigger (otherwise the absolutely-positioned panel lands over the bar itself).
+ *
  * ```html
  * <div ngMenuBar buiMenubar>
- *   <button ngMenuTrigger [menu]="file" buiMenubarTrigger>File</button>
- *   <div ngMenu #file="ngMenu" buiDropdownMenu>
- *     <div ngMenuItem value="new" buiDropdownMenuItem>New</div>
+ *   <div class="relative">
+ *     <button ngMenuTrigger [menu]="file" buiMenubarTrigger>File</button>
+ *     <div ngMenu #file="ngMenu" buiDropdownMenu>
+ *       <div ngMenuItem value="new" buiDropdownMenuItem>New</div>
+ *     </div>
  *   </div>
  * </div>
  * ```
@@ -6857,11 +6855,24 @@ class BuiCombobox {
       [disabled]="disabled()"
       [readonly]="!searchable()"
       [class.cursor-pointer]="!searchable()"
-      class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-9 w-full rounded-md border border-input bg-transparent py-2 ps-3 pe-9 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
       (focus)="openList()"
       (keydown)="onKeydown($event)"
     />
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class="pointer-events-none absolute end-3 top-[1.125rem] size-4 -translate-y-1/2 text-muted-foreground transition-transform"
+      [class.rotate-180]="open()"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
     @if (open() && filtered().length > 0) {
       <ul
         [id]="listId"
@@ -6941,11 +6952,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [disabled]="disabled()"
       [readonly]="!searchable()"
       [class.cursor-pointer]="!searchable()"
-      class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-9 w-full rounded-md border border-input bg-transparent py-2 ps-3 pe-9 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
       (focus)="openList()"
       (keydown)="onKeydown($event)"
     />
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class="pointer-events-none absolute end-3 top-[1.125rem] size-4 -translate-y-1/2 text-muted-foreground transition-transform"
+      [class.rotate-180]="open()"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
     @if (open() && filtered().length > 0) {
       <ul
         [id]="listId"
@@ -7431,7 +7455,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 +7487,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 +7650,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 +7671,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 +8587,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 +8604,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') {
@@ -11303,6 +11326,12 @@ class BuiConfetti {
     /** Horizontal spread factor of the burst. */
     spread = input(70, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spread" }] : /* istanbul ignore next */ []));
+    /** Direction the particles fly out from the origin. */
+    direction = input('down', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Rain confetti across the whole viewport instead of bursting from the trigger. */
+    fullscreen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
     /** Particle colours; defaults to the built-in palette. */
     colors = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
@@ -11313,18 +11342,25 @@ class BuiConfetti {
     seq = 0;
     computedClass = computed(() => cn('relative inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    // Fullscreen rains over a fixed, viewport-covering layer; otherwise particles burst from the
+    // trigger's centre (a zero-size anchor at 50%/50%).
+    layerClass = computed(() => this.fullscreen()
+        ? 'pointer-events-none fixed inset-0 z-[100]'
+        : 'pointer-events-none absolute top-1/2 left-1/2 size-0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layerClass" }] : /* istanbul ignore next */ []));
     fire() {
         const colors = this.colors() ?? PALETTE$1;
+        const isFullscreen = this.fullscreen();
+        const direction = this.direction();
         const batch = Array.from({ length: this.count() }, () => {
-            const dx = (Math.random() - 0.5) * this.spread() * 4;
-            const dy = 80 + Math.random() * 120;
-            const rot = Math.random() * 720 - 360;
+            const rot = (Math.random() * 720 - 360).toFixed(0);
             const color = colors[Math.floor(Math.random() * colors.length)];
-            const delay = (Math.random() * 0.1).toFixed(2);
+            const delay = (Math.random() * 0.15).toFixed(2);
             this.seq += 1;
+            const motion = isFullscreen ? this.rain() : this.burst(direction);
             return {
                 id: this.seq,
-                style: `--dx:${dx.toFixed(0)}px;--dy:${dy.toFixed(0)}px;--rot:${rot.toFixed(0)}deg;background:${color};animation-delay:${delay}s`,
+                style: `${motion}--rot:${rot}deg;background:${color};animation-delay:${delay}s`,
             };
         });
         this.particles.set(batch);
@@ -11333,7 +11369,49 @@ class BuiConfetti {
         }
         this.timer = setTimeout(() => {
             this.particles.set([]);
-        }, 1200);
+        }, isFullscreen ? 2600 : 1200);
+    }
+    /** Translation vars for a burst from the origin, by direction. */
+    burst(direction) {
+        const spread = this.spread();
+        const rand = Math.random;
+        let dx;
+        let dy;
+        switch (direction) {
+            case 'up': {
+                dx = (rand() - 0.5) * spread * 4;
+                dy = -(80 + rand() * 120);
+                break;
+            }
+            case 'left': {
+                dx = -(100 + rand() * spread * 3);
+                dy = (rand() - 0.5) * spread * 2;
+                break;
+            }
+            case 'right': {
+                dx = 100 + rand() * spread * 3;
+                dy = (rand() - 0.5) * spread * 2;
+                break;
+            }
+            case 'radial': {
+                const angle = rand() * Math.PI * 2;
+                const distance = 80 + rand() * 120;
+                dx = Math.cos(angle) * distance;
+                dy = Math.sin(angle) * distance;
+                break;
+            }
+            default: {
+                dx = (rand() - 0.5) * spread * 4;
+                dy = 80 + rand() * 120;
+            }
+        }
+        return `--dx:${dx.toFixed(0)}px;--dy:${dy.toFixed(0)}px;`;
+    }
+    /** Position + fall vars for a particle raining from the top of the viewport. */
+    rain() {
+        const startX = (Math.random() * 100).toFixed(2);
+        const drift = ((Math.random() - 0.5) * 160).toFixed(0);
+        return `left:${startX}vw;top:-5vh;--dx:${drift}px;--dy:110vh;animation-duration:2.4s;`;
     }
     ngOnDestroy() {
         if (this.timer) {
@@ -11341,7 +11419,7 @@ class BuiConfetti {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiConfetti, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiConfetti, isStandalone: true, selector: "bui-confetti", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "confetti" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiConfetti, isStandalone: true, selector: "bui-confetti", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "confetti" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <span (click)="fire()" (keydown.enter)="fire()" (keydown.space)="fire()">
       <ng-content>
         <button
@@ -11352,7 +11430,7 @@ class BuiConfetti {
         </button>
       </ng-content>
     </span>
-    <div class="pointer-events-none absolute top-1/2 left-1/2 size-0" aria-hidden="true">
+    <div [class]="layerClass()" aria-hidden="true">
       @for (particle of particles(); track particle.id) {
         <span
           class="bui-confetti-particle absolute size-2 rounded-sm"
@@ -11375,7 +11453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </button>
       </ng-content>
     </span>
-    <div class="pointer-events-none absolute top-1/2 left-1/2 size-0" aria-hidden="true">
+    <div [class]="layerClass()" aria-hidden="true">
       @for (particle of particles(); track particle.id) {
         <span
           class="bui-confetti-particle absolute size-2 rounded-sm"
@@ -11384,7 +11462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       }
     </div>
   `, styles: ["@keyframes bui-confetti-fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}.bui-confetti-particle{animation:bui-confetti-fall 1s ease-out forwards}@media(prefers-reduced-motion:reduce){.bui-confetti-particle{animation:none;opacity:0}}\n"] }]
-        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], spread: [{ type: i0.Input, args: [{ isSignal: true, alias: "spread", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], spread: [{ type: i0.Input, args: [{ isSignal: true, alias: "spread", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A step indicator. The `value` (1-based) marks the active step. Use `li[buiStepperItem]`. */
 class BuiStepper {
@@ -12859,7 +12937,7 @@ class BuiAudioPlayer {
     ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
     muted = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "muted" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('flex items-center gap-3 rounded-lg border bg-card p-3', this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn('flex min-w-0 items-center gap-2 rounded-lg border bg-card p-2 sm:gap-3 sm:p-3', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     toggle() {
         const element = this.a()?.nativeElement;
@@ -12950,7 +13028,7 @@ class BuiAudioPlayer {
       step="0.1"
       [max]="duration() || 0"
       [value]="current()"
-      class="h-1 flex-1 accent-primary"
+      class="h-1 min-w-0 flex-1 accent-primary"
       [attr.aria-label]="seekText()"
       (input)="seek($event)"
     />
@@ -13022,7 +13100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       step="0.1"
       [max]="duration() || 0"
       [value]="current()"
-      class="h-1 flex-1 accent-primary"
+      class="h-1 min-w-0 flex-1 accent-primary"
       [attr.aria-label]="seekText()"
       (input)="seek($event)"
     />
@@ -13686,12 +13764,20 @@ class BuiNotificationCenter {
     unreadText = buiLabel('notificationCenterUnread', this.unreadLabel);
     markAllReadText = buiLabel('notificationCenterMarkAllRead', this.markAllReadLabel);
     emptyText = buiLabel('notificationCenterEmpty', this.emptyLabel);
+    host = inject(ElementRef);
     markedRead = signal(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "markedRead" }] : /* istanbul ignore next */ []));
     unread = computed(() => this.notifications().filter((_, index) => !this.isRead(index)).length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    // Close when a click lands outside the bell + panel. The trigger's own click is contained in
+    // the host, so it toggles open without this handler immediately closing it again.
+    onDocumentClick(event) {
+        if (this.open() && !this.host.nativeElement.contains(event.target)) {
+            this.open.set(false);
+        }
+    }
     isRead(index) {
         return this.markedRead().has(index) || (this.notifications()[index]?.read ?? false);
     }
@@ -13699,7 +13785,7 @@ class BuiNotificationCenter {
         this.markedRead.set(new Set(this.notifications().map((_, index) => index)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiNotificationCenter, isStandalone: true, selector: "bui-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, unreadLabel: { classPropertyName: "unreadLabel", publicName: "unreadLabel", isSignal: true, isRequired: false, transformFunction: null }, markAllReadLabel: { classPropertyName: "markAllReadLabel", publicName: "markAllReadLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "notification-center" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiNotificationCenter, isStandalone: true, selector: "bui-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, unreadLabel: { classPropertyName: "unreadLabel", publicName: "unreadLabel", isSignal: true, isRequired: false, transformFunction: null }, markAllReadLabel: { classPropertyName: "markAllReadLabel", publicName: "markAllReadLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "notification-center" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "open.set(false)", "window:scroll": "open.set(false)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       class="relative inline-flex size-9 items-center justify-center rounded-md border border-input hover:bg-accent"
@@ -13774,7 +13860,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-notification-center',
-                    host: { 'data-slot': 'notification-center', '[class]': 'computedClass()' },
+                    host: {
+                        'data-slot': 'notification-center',
+                        '[class]': 'computedClass()',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(document:keydown.escape)': 'open.set(false)',
+                        '(window:scroll)': 'open.set(false)',
+                    },
                     template: `
     <button
       type="button"
@@ -14606,7 +14698,21 @@ class BuiTreeTable {
     /** Accessible label for the expand/collapse toggle button. */
     toggleLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    /** Show a button that copies the full hierarchy as a markdown ASCII tree. */
+    copyable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyable" }] : /* istanbul ignore next */ []));
+    /** Label override for the copy button (idle state). */
+    copyLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "copyLabel" }] : /* istanbul ignore next */ []));
+    /** Label override for the copy button after copying. */
+    copiedLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
     toggleText = buiLabel('treeTableToggle', this.toggleLabel);
+    copyText = buiLabel('treeTableCopy', this.copyLabel);
+    copiedText = buiLabel('treeTableCopied', this.copiedLabel);
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    copiedTimer;
     overrides = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
     defaults = computed(() => {
@@ -14651,6 +14757,47 @@ class BuiTreeTable {
         next.set(path, !this.isOpen(path));
         this.overrides.set(next);
     }
+    /**
+     * Render the full row hierarchy as a markdown ASCII tree (`├──`/`└──`), using the first
+     * column's value as each node's label and a trailing `/` for rows that have children.
+     */
+    toMarkdownTree() {
+        const key = this.columns()[0]?.key ?? '';
+        const lines = [];
+        const render = (rows, prefix, isRoot) => {
+            for (const [index, row] of rows.entries()) {
+                const children = row.children ?? [];
+                const hasChildren = children.length > 0;
+                const label = this.cell(row, key) + (hasChildren ? '/' : '');
+                if (isRoot) {
+                    lines.push(label);
+                    if (hasChildren) {
+                        render(children, '', false);
+                    }
+                    continue;
+                }
+                const isLast = index === rows.length - 1;
+                lines.push(`${prefix}${isLast ? '└── ' : '├── '}${label}`);
+                if (hasChildren) {
+                    const childIndent = isLast ? ' '.repeat(4) : `│${' '.repeat(3)}`;
+                    render(children, prefix + childIndent, false);
+                }
+            }
+        };
+        render(this.rows(), '', true);
+        return lines.join('\n');
+    }
+    copyTree() {
+        void navigator.clipboard.writeText(this.toMarkdownTree());
+        this.copied.set(true);
+        clearTimeout(this.copiedTimer);
+        this.copiedTimer = setTimeout(() => {
+            this.copied.set(false);
+        }, 1500);
+    }
+    ngOnDestroy() {
+        clearTimeout(this.copiedTimer);
+    }
     alignClass(align) {
         return ALIGN$2[align ?? 'left'];
     }
@@ -14665,7 +14812,47 @@ class BuiTreeTable {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTreeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTreeTable, isStandalone: true, selector: "bui-tree-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree-table" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTreeTable, isStandalone: true, selector: "bui-tree-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree-table" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (copyable()) {
+      <div class="mb-2 flex justify-end">
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-input px-2.5 py-1 text-xs font-medium hover:bg-accent"
+          (click)="copyTree()"
+        >
+          @if (copied()) {
+            <svg
+              class="size-3.5 text-emerald-500"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+            {{ copiedText() }}
+          } @else {
+            <svg
+              class="size-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+            </svg>
+            {{ copyText() }}
+          }
+        </button>
+      </div>
+    }
     <table class="w-full text-sm">
       <thead>
         <tr class="border-b">
@@ -14728,6 +14915,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: 'bui-tree-table',
                     host: { 'data-slot': 'tree-table', '[class]': 'computedClass()' },
                     template: `
+    @if (copyable()) {
+      <div class="mb-2 flex justify-end">
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-input px-2.5 py-1 text-xs font-medium hover:bg-accent"
+          (click)="copyTree()"
+        >
+          @if (copied()) {
+            <svg
+              class="size-3.5 text-emerald-500"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+            {{ copiedText() }}
+          } @else {
+            <svg
+              class="size-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+            </svg>
+            {{ copyText() }}
+          }
+        </button>
+      </div>
+    }
     <table class="w-full text-sm">
       <thead>
         <tr class="border-b">
@@ -14784,7 +15011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </table>
   `,
                 }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }] } });
 
 // HTML is escaped first, then a safe subset of markdown is applied, so user input can't inject markup.
 function renderMarkdown(markdown) {
@@ -16088,7 +16315,7 @@ class BuiContextMenu {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiContextMenu, isStandalone: true, selector: "bui-context-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "data-slot": "context-menu" }, listeners: { "contextmenu": "onContext($event)", "document:click": "open.set(false)", "document:keydown.escape": "open.set(false)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiContextMenu, isStandalone: true, selector: "bui-context-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "data-slot": "context-menu" }, listeners: { "contextmenu": "onContext($event)", "document:click": "open.set(false)", "document:keydown.escape": "open.set(false)", "window:scroll": "open.set(false)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <ng-content />
     @if (open()) {
       <div
@@ -16201,6 +16428,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(contextmenu)': 'onContext($event)',
                         '(document:click)': 'open.set(false)',
                         '(document:keydown.escape)': 'open.set(false)',
+                        // The menu is fixed to viewport coordinates captured at open time; close it on scroll
+                        // instead of letting it hang at a now-wrong position.
+                        '(window:scroll)': 'open.set(false)',
                     },
                     template: `
     <ng-content />
@@ -18345,36 +18575,38 @@ class BuiNavigationMenu {
               </svg>
             </button>
             @if (active() === i) {
-              <div
-                class="absolute start-0 top-full z-50 mt-1.5 w-64 rounded-lg border bg-popover p-2 shadow-md"
-              >
-                @if (item.featured; as featured) {
-                  <a
-                    [href]="href(featured.href)"
-                    class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
-                  >
-                    <span class="text-sm font-semibold">{{ featured.label }}</span>
-                    @if (featured.description) {
-                      <span class="mt-0.5 block text-xs text-muted-foreground">{{
-                        featured.description
-                      }}</span>
-                    }
-                  </a>
-                }
-                <ul class="space-y-1">
-                  @for (link of item.links; track link.label) {
-                    <li>
-                      <a [href]="href(link.href)" class="block rounded-md p-2 hover:bg-accent">
-                        <span class="text-sm font-medium">{{ link.label }}</span>
-                        @if (link.description) {
-                          <span class="block text-xs text-muted-foreground">{{
-                            link.description
-                          }}</span>
-                        }
-                      </a>
-                    </li>
+              <!-- pt-1.5 (not mt-1.5) keeps the gap below the trigger hoverable, so moving the
+                   cursor onto the panel doesn't leave the menu and snap it shut. -->
+              <div class="absolute start-0 top-full z-50 w-64 pt-1.5">
+                <div class="rounded-lg border bg-popover p-2 shadow-md">
+                  @if (item.featured; as featured) {
+                    <a
+                      [href]="href(featured.href)"
+                      class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
+                    >
+                      <span class="text-sm font-semibold">{{ featured.label }}</span>
+                      @if (featured.description) {
+                        <span class="mt-0.5 block text-xs text-muted-foreground">{{
+                          featured.description
+                        }}</span>
+                      }
+                    </a>
                   }
-                </ul>
+                  <ul class="space-y-1">
+                    @for (link of item.links; track link.label) {
+                      <li>
+                        <a [href]="href(link.href)" class="block rounded-md p-2 hover:bg-accent">
+                          <span class="text-sm font-medium">{{ link.label }}</span>
+                          @if (link.description) {
+                            <span class="block text-xs text-muted-foreground">{{
+                              link.description
+                            }}</span>
+                          }
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                </div>
               </div>
             }
           } @else {
@@ -18425,36 +18657,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
               </svg>
             </button>
             @if (active() === i) {
-              <div
-                class="absolute start-0 top-full z-50 mt-1.5 w-64 rounded-lg border bg-popover p-2 shadow-md"
-              >
-                @if (item.featured; as featured) {
-                  <a
-                    [href]="href(featured.href)"
-                    class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
-                  >
-                    <span class="text-sm font-semibold">{{ featured.label }}</span>
-                    @if (featured.description) {
-                      <span class="mt-0.5 block text-xs text-muted-foreground">{{
-                        featured.description
-                      }}</span>
-                    }
-                  </a>
-                }
-                <ul class="space-y-1">
-                  @for (link of item.links; track link.label) {
-                    <li>
-                      <a [href]="href(link.href)" class="block rounded-md p-2 hover:bg-accent">
-                        <span class="text-sm font-medium">{{ link.label }}</span>
-                        @if (link.description) {
-                          <span class="block text-xs text-muted-foreground">{{
-                            link.description
-                          }}</span>
-                        }
-                      </a>
-                    </li>
+              <!-- pt-1.5 (not mt-1.5) keeps the gap below the trigger hoverable, so moving the
+                   cursor onto the panel doesn't leave the menu and snap it shut. -->
+              <div class="absolute start-0 top-full z-50 w-64 pt-1.5">
+                <div class="rounded-lg border bg-popover p-2 shadow-md">
+                  @if (item.featured; as featured) {
+                    <a
+                      [href]="href(featured.href)"
+                      class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
+                    >
+                      <span class="text-sm font-semibold">{{ featured.label }}</span>
+                      @if (featured.description) {
+                        <span class="mt-0.5 block text-xs text-muted-foreground">{{
+                          featured.description
+                        }}</span>
+                      }
+                    </a>
                   }
-                </ul>
+                  <ul class="space-y-1">
+                    @for (link of item.links; track link.label) {
+                      <li>
+                        <a [href]="href(link.href)" class="block rounded-md p-2 hover:bg-accent">
+                          <span class="text-sm font-medium">{{ link.label }}</span>
+                          @if (link.description) {
+                            <span class="block text-xs text-muted-foreground">{{
+                              link.description
+                            }}</span>
+                          }
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                </div>
               </div>
             }
           } @else {
@@ -18556,11 +18790,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 +18817,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>
@@ -19398,6 +19633,11 @@ class BuiOnboardingTour {
     prev() {
         this.step.set(Math.max(0, this.step() - 1));
     }
+    onViewportChange() {
+        if (this.open()) {
+            this.measure();
+        }
+    }
     finish() {
         this.open.set(false);
         this.step.set(0);
@@ -19414,7 +19654,7 @@ class BuiOnboardingTour {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiOnboardingTour, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiOnboardingTour, isStandalone: true, selector: "bui-onboarding-tour", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "onboarding-tour" }, listeners: { "document:keydown.escape": "finish()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiOnboardingTour, isStandalone: true, selector: "bui-onboarding-tour", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "onboarding-tour" }, listeners: { "document:keydown.escape": "finish()", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, ngImport: i0, template: `
     @if (open() && current()) {
       <div
         class="pointer-events-none fixed z-[60] rounded-md ring-2 ring-primary transition-all"
@@ -19467,7 +19707,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-onboarding-tour',
-                    host: { 'data-slot': 'onboarding-tour', '(document:keydown.escape)': 'finish()' },
+                    host: {
+                        'data-slot': 'onboarding-tour',
+                        '(document:keydown.escape)': 'finish()',
+                        // The spotlight/card use viewport (fixed) coordinates; re-measure on scroll & resize so the
+                        // highlight tracks its target instead of drifting out of alignment.
+                        '(window:scroll)': 'onViewportChange()',
+                        '(window:resize)': 'onViewportChange()',
+                    },
                     template: `
     @if (open() && current()) {
       <div