flexdesk 0.16.0 → 0.17.0

package/src/ui/notification_center.js

@@ -13,11 +13,30 @@
  * Source Material
  * - html/js/status_view.js and ui_manager.js toast helpers.
  * - html/js/ui_utilities.js notification utilities.
+ *
+ * Progress toasts (0.17.0)
+ * ------------------------
+ * `show({ progress })` makes a toast that tracks a job: `progress` is a 0..1
+ * fraction, `{ value, total }`, or `null` for indeterminate; `status` is a line
+ * under the message and `counts` a label beside the bar. Such a toast is
+ * persistent and collapsible, and it RUNS until `update()` gives it an outcome
+ * severity (success, error or fatal), which ends its bar (done or error) for
+ * good and lets a `durationMs` in the same patch dismiss it. Every toast is
+ * drawn once and then patched: `update()` touches only its own nodes, and a
+ * toast arriving or leaving moves no other toast's element, so a bar, a
+ * collapsed state and a hovered button survive. A running progress toast is
+ * never held behind "+N more" (and never dropped by 'drop'); it counts toward
+ * `maxVisible`, so it takes the place of the newest other toast.
  */
 import { ComponentBase } from './base/component_base.js';
 import { getSetting } from '../core/settings.js';
+import { setToastBus, getToastBus } from './components/toast.js';
+import { ProgressBar } from './components/progress.js';
 
 const SEVERITIES = ['info', 'success', 'warn', 'error', 'fatal'];
+
+/** The severity a progress toast finishes with, and the state its bar ends in. */
+const OUTCOME_BAR_STATE = Object.freeze({ success: 'done', error: 'error', fatal: 'error' });
 const LOG_SEVERITY_MAP = {
     trace: 'info',
     debug: 'info',
@@ -34,6 +53,9 @@ const DEFAULT_LOG_LEVELS = new Set(['warn', 'error', 'fatal']);
 const SUPPRESSED_NAMESPACE_TITLES = new Set(['bootstrap', 'app']);
 
 export class NotificationCenter extends ComponentBase {
+    #items;
+    #summaryEl;
+
     constructor({
         eventBus,
         logger,
@@ -65,6 +87,9 @@ export class NotificationCenter extends ComponentBase {
         this.sequence = 0;
         this.activeTimers = new Map();
         this.eventDisposers = [];
+        /** id -> the drawn toast's nodes, for the toasts on screen. */
+        this.#items = new Map();
+        this.#summaryEl = null;
 
         this.container = null;
         this.rootEl = null;
@@ -83,6 +108,7 @@ export class NotificationCenter extends ComponentBase {
             this.liveRegionEl = existingContainer.querySelector('.notification-center__live-region');
             this._mounted = true;
             this.#subscribeEvents();
+            this.#claimToastBus();
             return this;
         }
 
@@ -114,6 +140,7 @@ export class NotificationCenter extends ComponentBase {
 
         this._mounted = true;
         this.#subscribeEvents();
+        this.#claimToastBus();
 
         if (Array.isArray(props.initialNotifications)) {
             props.initialNotifications.forEach((notification) => this.show(notification));
@@ -124,6 +151,12 @@ export class NotificationCenter extends ComponentBase {
     dispose() {
         this.#clearTimers();
         this.#unsubscribeEvents();
+        // Give the toast helpers back to the console — unless someone has
+        // pointed them at another bus since this centre mounted.
+        if (this.eventBus && getToastBus() === this.eventBus) setToastBus(null);
+        this.#items.forEach((entry) => entry.bar?.dispose());
+        this.#items.clear();
+        this.#summaryEl = null;
         if (this.rootEl?.parentNode) {
             this.rootEl.parentNode.removeChild(this.rootEl);
         }
@@ -137,7 +170,8 @@ export class NotificationCenter extends ComponentBase {
     show(notification) {
         const normalized = this.#normalizeNotification(notification);
         this.#consoleLog(normalized);
-        if (this.overflow === 'collapse' && this.notifications.length >= this.maxVisible) {
+        const running = NotificationCenter.#isRunning(normalized);
+        if (this.overflow === 'collapse' && !running && this.notifications.length >= this.maxVisible) {
             // Held, not shown: its timer starts when it comes on screen.
             this.held.push(normalized);
             this.#recordHistory(normalized);
@@ -146,10 +180,18 @@ export class NotificationCenter extends ComponentBase {
             return normalized.id;
         }
         this.notifications.push(normalized);
-        if (this.notifications.length > this.maxVisible) {
-            const removed = this.notifications.shift();
-            this.#stopTimer(removed.id);
-            this.#recordHistory({ ...removed, dismissed: true, reason: 'overflow' });
+        if (this.overflow === 'collapse') {
+            // Only a running progress toast gets here past the limit: the
+            // newest other toast steps back behind "+N more" to make room.
+            this.#rebalance();
+        } else if (this.notifications.length > this.maxVisible) {
+            // The oldest leaves — but never a running progress toast.
+            const idx = this.notifications.findIndex((item) => !NotificationCenter.#isRunning(item));
+            if (idx !== -1) {
+                const [removed] = this.notifications.splice(idx, 1);
+                this.#stopTimer(removed.id);
+                this.#recordHistory({ ...removed, dismissed: true, reason: 'overflow' });
+            }
         }
 
         this.#recordHistory(normalized);
@@ -173,50 +215,93 @@ export class NotificationCenter extends ComponentBase {
         this.#stopTimer(notificationId);
         this.#recordHistory({ ...removed, dismissed: true, reason });
         // A place on screen came free: the oldest held-back toast takes it.
-        if (this.held.length && this.notifications.length < this.maxVisible) {
-            const next = this.held.shift();
-            this.notifications.push(next);
-            this.#scheduleAutoDismiss(next);
-        }
+        this.#rebalance();
         this.#render();
         return true;
     }
 
     /**
-     * Update an existing notification's message in place without re-rendering.
-     * This prevents the flicker caused by dismiss+show.
+     * Change a notification in place: only its own nodes are touched, and no
+     * other toast is redrawn. A held-back toast is changed too and shows the
+     * change when it comes on screen.
+     *
+     * Fields: `message`, `title`, `description`, `severity`, `meta`, and for
+     * progress toasts `progress` (fraction, `{ value, total }`, or `null` for
+     * indeterminate), `status`, `counts` and `collapsed`; `progress` on a
+     * plain toast turns it into a running progress toast (on screen, as with
+     * show()). Giving a running progress toast an outcome severity (success,
+     * error, fatal) finishes it, and its bar keeps the state it ended in: a
+     * later severity only restyles the toast. A `durationMs` on a toast that
+     * is not running (re)starts its auto-dismiss (0 keeps it until closed).
+     *
      * @param {string} notificationId - The ID of the notification to update
-     * @param {Object} updates - Object with fields to update (message, title, etc.)
+     * @param {Object} updates - The fields to change
      * @returns {boolean} True if the notification was found and updated
      */
     update(notificationId, updates = {}) {
-        const notification = this.notifications.find((item) => item.id === notificationId);
+        const notification = this.notifications.find((item) => item.id === notificationId)
+            ?? this.held.find((item) => item.id === notificationId);
         if (!notification) {
             return false;
         }
+        const hadTitle = Boolean(notification.title);
+        const hadDescription = Boolean(notification.description);
+        const wasProgress = notification.progress !== undefined;
+        const wasRunning = NotificationCenter.#isRunning(notification);
 
-        // Update allowed fields
         if (updates.message !== undefined) notification.message = updates.message;
         if (updates.title !== undefined) notification.title = updates.title;
-        if (updates.severity !== undefined) notification.severity = this.#normalizeSeverity(updates.severity);
+        if (updates.description !== undefined) notification.description = updates.description;
         if (updates.meta !== undefined) notification.meta = updates.meta;
-
-        // Update the DOM directly without full re-render
-        const notificationEl = this.listEl?.querySelector(`[data-notification-id="${notificationId}"]`);
-        if (notificationEl) {
-            const bodyEl = notificationEl.querySelector('.twm-notification__body');
-            if (bodyEl && updates.message !== undefined) {
-                bodyEl.textContent = updates.message;
+        if (updates.status !== undefined) notification.status = updates.status ?? '';
+        if (updates.counts !== undefined) notification.counts = updates.counts ?? '';
+        if (updates.collapsed !== undefined) notification.collapsed = Boolean(updates.collapsed);
+        if (updates.progress !== undefined) {
+            if (wasProgress) {
+                notification.progress = NotificationCenter.#normalizeProgress(updates.progress);
+            } else {
+                // A plain toast becomes a running progress toast, set up as show() would.
+                Object.assign(notification, NotificationCenter.#progressFields({ ...notification, ...updates }));
+                notification.persistent = true;
+                this.#stopTimer(notification.id);
             }
-            const titleEl = notificationEl.querySelector('.twm-notification__title');
-            if (titleEl && updates.title !== undefined) {
-                titleEl.textContent = updates.title;
+        }
+        if (updates.severity !== undefined) {
+            notification.severity = this.#normalizeSeverity(updates.severity);
+            const outcome = OUTCOME_BAR_STATE[notification.severity];
+            if (NotificationCenter.#isRunning(notification) && outcome) notification.outcome = outcome;
+        }
+        const running = NotificationCenter.#isRunning(notification);
+        const finished = wasRunning && !running;
+        if (updates.durationMs !== undefined && !NotificationCenter.#isRunning(notification)) {
+            notification.durationMs = this.#coerceDuration(updates.durationMs);
+            notification.persistent = notification.durationMs === 0;
+            if (this.notifications.includes(notification)) {
+                this.#stopTimer(notification.id);
+                this.#scheduleAutoDismiss(notification);
             }
-        } else {
-            // Fallback to full re-render if DOM element not found
-            this.#render();
         }
 
+        const entry = this.#items.get(notification.id);
+        if (entry) {
+            const structural = hadTitle !== Boolean(notification.title)
+                || hadDescription !== Boolean(notification.description)
+                || wasProgress !== (notification.progress !== undefined);
+            if (structural) {
+                // A part appears or goes: rebuild this one toast, in its place.
+                const next = this.#buildItem(notification);
+                entry.el.replaceWith(next.el);
+                entry.bar?.dispose();
+                this.#items.set(notification.id, next);
+            } else {
+                this.#patchItem(entry, notification);
+            }
+        }
+        if (finished) this.#announce(notification);
+        // Started, it comes on screen whatever is held; finished, it folds
+        // like any other toast.
+        if (running !== wasRunning) this.#rebalance();
+        this.#render();
         return true;
     }
 
@@ -268,7 +353,9 @@ export class NotificationCenter extends ComponentBase {
         }
         const id = notification.id ?? `notification-${++this.sequence}`;
         const severity = this.#normalizeSeverity(notification.severity ?? 'info');
+        const isProgress = notification.progress !== undefined;
         return {
+            ...(isProgress ? NotificationCenter.#progressFields(notification) : {}),
             id,
             title: notification.title ?? null,
             message: notification.message ?? '',
@@ -277,7 +364,9 @@ export class NotificationCenter extends ComponentBase {
             severity,
             namespace: notification.namespace ?? null,
             durationMs: this.#coerceDuration(notification.durationMs),
-            persistent: Boolean(notification.persistent),
+            // A progress toast stays until it finishes (and then until its
+            // finishing durationMs, or its ×).
+            persistent: isProgress || Boolean(notification.persistent),
             skipHistory: Boolean(notification.skipHistory),
             actions: this.#normalizeActions(notification.actions),
             meta: notification.meta ?? null,
@@ -394,111 +483,273 @@ export class NotificationCenter extends ComponentBase {
         }
     }
 
-    #render() {
-        if (!this._mounted || !this.listEl) {
-            return;
+    /** A progress toast that has not been given an outcome yet. */
+    static #isRunning(notification) {
+        return notification.progress !== undefined && !notification.outcome;
+    }
+
+    /**
+     * The fields a progress toast carries, from a show() payload or an
+     * update() that turns a plain toast into one. `outcome` is null while it
+     * runs, then the state its bar ended in (done or error).
+     */
+    static #progressFields(source) {
+        return {
+            progress: NotificationCenter.#normalizeProgress(source.progress),
+            status: source.status ?? '',
+            counts: source.counts ?? '',
+            collapsed: Boolean(source.collapsed),
+            outcome: null,
+        };
+    }
+
+    /** `null` (indeterminate), a 0..1 fraction, or `{ value, total }` -> ProgressBar input. */
+    static #normalizeProgress(progress) {
+        if (progress === null) return { indeterminate: true };
+        if (typeof progress === 'number') {
+            return { value: Number.isFinite(progress) ? progress : 0, max: null, indeterminate: false };
         }
-        this.listEl.innerHTML = '';
-        const fragment = document.createDocumentFragment();
-
-        this.notifications.forEach((notification) => {
-            const item = document.createElement('div');
-            item.className = `notification notification--${notification.severity}`;
-            // Use setAttribute to avoid StateGuard blocking dataset mutations
-            item.setAttribute('data-notification-id', notification.id);
-
-            const header = document.createElement('div');
-            header.className = 'twm-notification__header';
-            if (notification.title) {
-                const titleEl = document.createElement('span');
-                titleEl.className = 'twm-notification__title';
-                titleEl.textContent = notification.title;
-                header.appendChild(titleEl);
-            }
+        if (typeof progress === 'object') {
+            const value = Number(progress.value);
+            const total = Number(progress.total);
+            return {
+                value: Number.isFinite(value) ? value : 0,
+                max: Number.isFinite(total) && total > 0 ? total : null,
+                indeterminate: false,
+            };
+        }
+        return { indeterminate: true };
+    }
 
-            const timeEl = document.createElement('span');
-            timeEl.className = 'twm-notification__timestamp';
-            timeEl.textContent = this.#formatTimestamp(notification.timestamp);
-            header.appendChild(timeEl);
-
-            const closeBtn = document.createElement('button');
-            closeBtn.className = 'twm-notification__close';
-            closeBtn.type = 'button';
-            closeBtn.setAttribute('aria-label', 'Dismiss notification');
-            closeBtn.innerHTML = '<span class="material-symbols-outlined">close</span>';
-            closeBtn.addEventListener('click', () => this.dismiss(notification.id, 'manual'));
-            header.appendChild(closeBtn);
-            item.appendChild(header);
-
-            const body = document.createElement('div');
-            body.className = 'twm-notification__body';
-            body.textContent = notification.message;
-            item.appendChild(body);
-
-            if (notification.description) {
-                const descriptionEl = document.createElement('div');
-                descriptionEl.className = 'twm-notification__description';
-                descriptionEl.textContent = notification.description;
-                item.appendChild(descriptionEl);
+    /**
+     * 'collapse' only: keep at most `maxVisible` on screen, counting running
+     * progress toasts, which never leave and are never held (one that started
+     * running while held comes on screen first). Past the limit the newest
+     * other toast steps back to the front of the held queue (its timer
+     * restarts when it returns); under it the oldest held toast comes in.
+     */
+    #rebalance() {
+        if (this.overflow !== 'collapse') return;
+        for (let i = 0; i < this.held.length;) {
+            if (NotificationCenter.#isRunning(this.held[i])) this.notifications.push(...this.held.splice(i, 1));
+            else i++;
+        }
+        while (this.notifications.length > this.maxVisible) {
+            let idx = -1;
+            for (let i = this.notifications.length - 1; i >= 0; i--) {
+                if (!NotificationCenter.#isRunning(this.notifications[i])) { idx = i; break; }
             }
+            if (idx === -1) break;
+            const [back] = this.notifications.splice(idx, 1);
+            this.#stopTimer(back.id);
+            this.held.unshift(back);
+        }
+        while (this.held.length && this.notifications.length < this.maxVisible) {
+            const next = this.held.shift();
+            this.notifications.push(next);
+            this.#scheduleAutoDismiss(next);
+        }
+    }
 
-            if (notification.actions.length > 0) {
-                const actionsEl = document.createElement('div');
-                actionsEl.className = 'twm-notification__actions';
-                notification.actions.forEach((action) => {
-                    const button = document.createElement('button');
-                    button.type = 'button';
-                    button.className = 'twm-notification__action-btn';
-                    button.textContent = action.label;
-                    button.addEventListener('click', () => {
-                        try {
-                            if (action.handler) {
-                                action.handler(notification, action);
-                            } else if (action.eventName && this.eventBus) {
-                                this.eventBus.emit(action.eventName, action.payload ?? { notificationId: notification.id });
-                            }
-                        } catch (err) {
-                            this.logger?.error?.('twm-notification-center', 'Notification action failed', { err });
-                        } finally {
-                            // Don't auto-dismiss error/fatal notifications after action clicks
-                            if (notification.severity !== 'error' && notification.severity !== 'fatal') {
-                                this.dismiss(notification.id, 'action');
-                            }
-                        }
-                    });
-                    actionsEl.appendChild(button);
-                });
-                item.appendChild(actionsEl);
+    /**
+     * Draw the toasts on screen. Each toast's element is built once and kept:
+     * a toast arriving or leaving only inserts or removes its own element, so
+     * every other toast keeps its nodes (and its bar, collapsed state, hover).
+     */
+    #render() {
+        if (!this._mounted || !this.listEl) {
+            return;
+        }
+        const visible = new Set(this.notifications.map((n) => n.id));
+        for (const [id, entry] of this.#items) {
+            if (visible.has(id)) continue;
+            entry.bar?.dispose();
+            entry.el.remove();
+            this.#items.delete(id);
+        }
+        const wanted = this.notifications.map((notification) => {
+            let entry = this.#items.get(notification.id);
+            if (!entry) {
+                entry = this.#buildItem(notification);
+                this.#items.set(notification.id, entry);
             }
-
-            item.addEventListener('click', (event) => {
-                if (event.target.closest('button')) {
-                    return;
-                }
-                this.dismiss(notification.id, 'click');
-            });
-
-            fragment.appendChild(item);
+            return entry.el;
         });
+        const summary = this.#syncSummary();
+        if (summary) wanted.push(summary);
+        wanted.forEach((el, i) => {
+            const at = this.listEl.children[i];
+            if (at !== el) this.listEl.insertBefore(el, at ?? null);
+        });
+        // Anything after them is stale (another instance's toasts on a reused root).
+        while (this.listEl.children.length > wanted.length) {
+            this.listEl.lastElementChild.remove();
+        }
+    }
 
-        // The held-back toasts, as one: "+N more". It is a button so the count is
-        // reachable by keyboard; what it opens is the consumer's (summaryAction),
-        // and it is also announced on the bus for a history panel to answer.
-        if (this.held.length) {
+    // The held-back toasts, as one: "+N more". It is a button so the count is
+    // reachable by keyboard; what it opens is the consumer's (summaryAction),
+    // and it is also announced on the bus for a history panel to answer.
+    #syncSummary() {
+        if (!this.held.length) {
+            this.#summaryEl?.remove();
+            this.#summaryEl = null;
+            return null;
+        }
+        if (!this.#summaryEl) {
             const more = document.createElement('button');
             more.type = 'button';
             more.className = 'notification twm-notification--summary';
-            more.setAttribute('data-notification-summary', String(this.held.length));
-            more.textContent = `+${this.held.length} more`;
-            more.title = this.held.map((h) => h.title || h.message).join('\n');
             more.addEventListener('click', () => {
                 const held = [...this.held];
                 try { this.summaryAction?.(held); } catch (err) { this.logger?.warn?.('summaryAction failed', err); }
                 this.eventBus?.emit?.('notification:summary', { held });
             });
-            fragment.appendChild(more);
+            this.#summaryEl = more;
+        }
+        const more = this.#summaryEl;
+        const count = String(this.held.length);
+        if (more.getAttribute('data-notification-summary') !== count) more.setAttribute('data-notification-summary', count);
+        NotificationCenter.#setText(more, `+${count} more`);
+        const tip = this.held.map((h) => h.title || h.message).join('\n');
+        if (more.title !== tip) more.title = tip;
+        return more;
+    }
+
+    static #setText(node, text) {
+        const t = text == null ? '' : String(text);
+        if (node.textContent !== t) node.textContent = t;
+    }
+
+    /** Build one toast's element; `#patchItem` then fills what can change. */
+    #buildItem(notification) {
+        const isProgress = notification.progress !== undefined;
+        const item = document.createElement('div');
+        // Use setAttribute to avoid StateGuard blocking dataset mutations
+        item.setAttribute('data-notification-id', notification.id);
+        const entry = { el: item, severity: null, titleEl: null, bodyEl: null, descriptionEl: null,
+                        statusEl: null, bar: null, collapseBtn: null };
+
+        const header = document.createElement('div');
+        header.className = 'twm-notification__header';
+        if (notification.title) {
+            entry.titleEl = document.createElement('span');
+            entry.titleEl.className = 'twm-notification__title';
+            header.appendChild(entry.titleEl);
+        }
+
+        const timeEl = document.createElement('span');
+        timeEl.className = 'twm-notification__timestamp';
+        timeEl.textContent = this.#formatTimestamp(notification.timestamp);
+        header.appendChild(timeEl);
+
+        if (isProgress) {
+            const toggle = document.createElement('button');
+            toggle.className = 'twm-notification__collapse';
+            toggle.type = 'button';
+            toggle.innerHTML = '<span class="material-symbols-outlined">expand_more</span>';
+            toggle.addEventListener('click', () => {
+                this.update(notification.id, { collapsed: !notification.collapsed });
+            });
+            entry.collapseBtn = toggle;
+            header.appendChild(toggle);
         }
-        this.listEl.appendChild(fragment);
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'twm-notification__close';
+        closeBtn.type = 'button';
+        closeBtn.setAttribute('aria-label', 'Dismiss notification');
+        closeBtn.innerHTML = '<span class="material-symbols-outlined">close</span>';
+        closeBtn.addEventListener('click', () => this.dismiss(notification.id, 'manual'));
+        header.appendChild(closeBtn);
+        item.appendChild(header);
+
+        entry.bodyEl = document.createElement('div');
+        entry.bodyEl.className = 'twm-notification__body';
+        item.appendChild(entry.bodyEl);
+
+        if (isProgress) {
+            entry.bar = new ProgressBar(item, {
+                ...notification.progress, showCount: false, className: 'twm-notification__progress',
+            });
+            entry.statusEl = document.createElement('div');
+            entry.statusEl.className = 'twm-notification__status';
+            item.appendChild(entry.statusEl);
+        }
+
+        if (notification.description) {
+            entry.descriptionEl = document.createElement('div');
+            entry.descriptionEl.className = 'twm-notification__description';
+            item.appendChild(entry.descriptionEl);
+        }
+
+        if (notification.actions.length > 0) {
+            const actionsEl = document.createElement('div');
+            actionsEl.className = 'twm-notification__actions';
+            notification.actions.forEach((action) => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'twm-notification__action-btn';
+                button.textContent = action.label;
+                button.addEventListener('click', () => {
+                    try {
+                        if (action.handler) {
+                            action.handler(notification, action);
+                        } else if (action.eventName && this.eventBus) {
+                            this.eventBus.emit(action.eventName, action.payload ?? { notificationId: notification.id });
+                        }
+                    } catch (err) {
+                        this.logger?.error?.('twm-notification-center', 'Notification action failed', { err });
+                    } finally {
+                        // Don't auto-dismiss error/fatal notifications, or a job
+                        // still running, after action clicks
+                        if (notification.severity !== 'error' && notification.severity !== 'fatal'
+                            && !NotificationCenter.#isRunning(notification)) {
+                            this.dismiss(notification.id, 'action');
+                        }
+                    }
+                });
+                actionsEl.appendChild(button);
+            });
+            item.appendChild(actionsEl);
+        }
+
+        item.addEventListener('click', (event) => {
+            if (event.target.closest('button') || NotificationCenter.#isRunning(notification)) {
+                return;
+            }
+            this.dismiss(notification.id, 'click');
+        });
+
+        this.#patchItem(entry, notification);
+        return entry;
+    }
+
+    /** Bring a drawn toast's nodes in line with its data, touching only what changed. */
+    #patchItem(entry, notification) {
+        const item = entry.el;
+        if (entry.severity !== notification.severity) {
+            if (entry.severity) item.classList.remove(`notification--${entry.severity}`);
+            item.classList.add('notification', `notification--${notification.severity}`);
+            entry.severity = notification.severity;
+        }
+        if (entry.titleEl) NotificationCenter.#setText(entry.titleEl, notification.title);
+        NotificationCenter.#setText(entry.bodyEl, notification.message);
+        if (entry.descriptionEl) NotificationCenter.#setText(entry.descriptionEl, notification.description);
+        if (!entry.bar) return;
+
+        item.classList.add('twm-notification--progress');
+        item.classList.toggle('twm-notification--collapsed', Boolean(notification.collapsed));
+        const expanded = String(!notification.collapsed);
+        if (entry.collapseBtn.getAttribute('aria-expanded') !== expanded) {
+            entry.collapseBtn.setAttribute('aria-expanded', expanded);
+            entry.collapseBtn.setAttribute('aria-label', notification.collapsed ? 'Expand notification' : 'Collapse notification');
+        }
+        NotificationCenter.#setText(entry.statusEl, notification.status);
+        entry.statusEl.hidden = !notification.status;
+        entry.bar.update({ ...notification.progress, label: notification.counts });
+        const end = notification.outcome ?? 'running';
+        if (entry.bar.state !== end) entry.bar.setState(end);
     }
 
     #formatTimestamp(timestamp) {
@@ -600,6 +851,11 @@ export class NotificationCenter extends ComponentBase {
         );
     }
 
+    /** The toast helpers (toast.js) emit on the bus of the centre mounted last. */
+    #claimToastBus() {
+        if (this.eventBus) setToastBus(this.eventBus);
+    }
+
     #unsubscribeEvents() {
         this.eventDisposers.forEach((disposer) => {
             try {