ng-blatui 1.31.0 → 1.32.1

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',
 };
 /**
@@ -1093,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 */
@@ -3772,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) => {
@@ -5366,8 +5370,15 @@ class BuiDropdownMenu {
     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,
@@ -5377,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 }] }] } });
@@ -5428,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>
  * ```
@@ -6838,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"
@@ -6922,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"
@@ -11283,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 */ []));
@@ -11293,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);
@@ -11313,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) {
@@ -11321,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
@@ -11332,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"
@@ -11355,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"
@@ -11364,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 {
@@ -12839,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;
@@ -12930,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)"
     />
@@ -13002,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)"
     />
@@ -13666,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);
     }
@@ -13679,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"
@@ -13754,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"
@@ -14586,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(() => {
@@ -14631,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'];
     }
@@ -14645,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">
@@ -14708,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">
@@ -14764,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) {
@@ -16068,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
@@ -16181,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 />
@@ -18325,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 {
@@ -18405,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 {
@@ -19209,9 +19463,16 @@ class BuiRichTextEditor {
     }
     sync() {
         const element = this.editor()?.nativeElement;
-        if (element) {
-            this.value.set(element.innerHTML);
+        if (!element) {
+            return;
+        }
+        // Browsers leave residual markup (e.g. `<p><br></p>`) after the user clears
+        // all text, which keeps `:empty` from matching so the placeholder never
+        // reappears. Normalise truly-empty content so the placeholder can show again.
+        if (element.textContent === '' && !element.querySelector('img, hr')) {
+            element.innerHTML = '';
         }
+        this.value.set(element.innerHTML);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRichTextEditor, isStandalone: true, selector: "bui-rich-text-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, formattingLabel: { classPropertyName: "formattingLabel", publicName: "formattingLabel", 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": "rich-text-editor" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -19240,7 +19501,7 @@ class BuiRichTextEditor {
       [attr.aria-label]="ariaLabel()"
       [attr.data-placeholder]="placeholder()"
       contenteditable="true"
-      class="min-h-32 p-3 text-sm text-foreground text-muted-foreground/60 outline-none empty:before:content-[attr(data-placeholder)]"
+      class="min-h-32 p-3 text-sm text-foreground outline-none empty:before:text-muted-foreground/60 empty:before:content-[attr(data-placeholder)]"
       (input)="sync()"
     ></div>
   `, isInline: true });
@@ -19276,7 +19537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [attr.aria-label]="ariaLabel()"
       [attr.data-placeholder]="placeholder()"
       contenteditable="true"
-      class="min-h-32 p-3 text-sm text-foreground text-muted-foreground/60 outline-none empty:before:content-[attr(data-placeholder)]"
+      class="min-h-32 p-3 text-sm text-foreground outline-none empty:before:text-muted-foreground/60 empty:before:content-[attr(data-placeholder)]"
       (input)="sync()"
     ></div>
   `,
@@ -19379,6 +19640,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);
@@ -19395,7 +19661,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"
@@ -19448,7 +19714,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