@ixfx/components 0.4.4 → 0.5.0

package/bundle/index.js

@@ -2858,6 +2858,21 @@ const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="tr
 */
 const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
 /**
+* Error / warning icon. Useful for error notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_ERROR = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`;
+/**
+* Info icon. Useful for info notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_INFO = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;
+/**
+* Warning icon. Useful for warning notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`;
+/**
 * Chevron pointing right. Used for split-button switcher toggle.
 * fill="currentColor" so it inherits CSS color.
 */
@@ -2868,6 +2883,9 @@ function registerDefaults() {
 	registerIcon(`caret-right`, ICON_CARET_RIGHT);
 	registerIcon(`check`, ICON_CHECK);
 	registerIcon(`close`, ICON_CLOSE);
+	registerIcon(`error`, ICON_ERROR);
+	registerIcon(`info`, ICON_INFO);
+	registerIcon(`warning`, ICON_WARNING);
 }
 //#endregion
 //#region src/icons/index.ts
@@ -3242,9 +3260,11 @@ let RadioGroup = class RadioGroup extends i {
       min-width: min-content;
       box-sizing: border-box;
       /* Default to looking like a cohesive control group */
-      background: var(--surface-3, transparent);
+      background: var(--surface-4, transparent);
+      background: oklch(from var(--surface-4) l calc(c*0.2) h / 0.4);
+
       border: var(--border, none);
-      border-radius: var(--radius-m, 4px);
+      border-radius: var(--radius-xl, 8px);
     }
 
     * {
@@ -3274,6 +3294,7 @@ let RadioGroup = class RadioGroup extends i {
       gap: var(--item-spacing, 0);
       overflow: hidden;
       border-radius: inherit;
+      justify-content: center;
     }
 
     .radio-group.horizontal {
@@ -3315,13 +3336,13 @@ let RadioGroup = class RadioGroup extends i {
 
     .radio-item:hover:not([disabled]) {
       opacity: 0.9;
-      background: var(--surface-4, rgba(255,255,255,0.05));
+      background: color-mix(in oklch, var(--surface-4) 80%, transparent);
     }
 
     .radio-item.selected {
       font-weight: bold;
       color: var(--color-fg-accent, var(--surface-2-text));
-      background: var(--surface-6, rgba(255,255,255,0.1));
+      background: var(--surface-5, rgba(255,255,255,0.1));
     }
 
     .radio-item[disabled] {
@@ -11648,7 +11669,7 @@ let VerticalListElement = class VerticalListElement extends i {
 				this._selectedItems = remapped;
 			}
 			this._syncItemStates();
-		}
+		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
 	get selectedItem() {
@@ -11844,6 +11865,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	}
 	_syncCheckboxes() {
 		const inCheckedMode = this.interactionMode === `checked`;
+		const wantsCustom = typeof this.checkboxRenderer === `function`;
 		if (inCheckedMode) for (const inner of Array.from(this.children)) {
 			if (!inner.hasAttribute(`data-list-item`)) continue;
 			if (inner.parentElement !== this) continue;
@@ -11868,24 +11890,70 @@ let VerticalListElement = class VerticalListElement extends i {
 			this.#customWrappers.clear();
 		}
 		for (const el of this.querySelectorAll(`li`)) {
-			let cb = el.querySelector(`input.ixfx-list-checkbox`);
-			if (inCheckedMode) {
-				if (!cb) {
-					cb = document.createElement(`input`);
-					cb.type = `checkbox`;
-					cb.className = `ixfx-list-checkbox`;
-					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
-					cb.tabIndex = -1;
-					cb.addEventListener(`click`, (e) => {
-						e.stopPropagation();
-						this._toggleItem(el);
-					});
-					el.prepend(cb);
-				}
-				cb.checked = this._selectedItems.has(el);
-			} else if (cb) cb.remove();
+			const existing = el.querySelector(`.ixfx-list-checkbox`);
+			if (!inCheckedMode) {
+				if (existing) existing.remove();
+				continue;
+			}
+			const existingIsCustom = existing?.classList.contains(`ixfx-list-checkbox-custom`) ?? false;
+			if (existing && existingIsCustom !== wantsCustom) existing.remove();
+			let cb = el.querySelector(`.ixfx-list-checkbox`);
+			if (!cb) {
+				cb = wantsCustom ? this._createCustomCheckbox(el) : this._createNativeCheckboxCell(el);
+				el.prepend(cb);
+			}
+			const checked = this._selectedItems.has(el);
+			if (wantsCustom) {
+				cb.setAttribute(`aria-checked`, String(checked));
+				cb.toggleAttribute(`data-checked`, checked);
+				if (this.checkboxRenderer) D(this.checkboxRenderer(checked), cb);
+			} else {
+				const input = cb.querySelector(`input.ixfx-list-checkbox`);
+				if (input) input.checked = checked;
+			}
 		}
 	}
+	/**
+	* Native checkbox cell: a span that stretches to the row's full cross-axis
+	* (so the entire column height is a click target) with a real `<input>`
+	* centred inside. The span owns the click; the input is purely visual and
+	* has `pointer-events:none` so a single click produces one toggle.
+	*/
+	_createNativeCheckboxCell(el) {
+		const cell = document.createElement(`span`);
+		cell.className = `ixfx-list-checkbox ixfx-list-checkbox-native`;
+		cell.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:18px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
+		cell.tabIndex = -1;
+		cell.setAttribute(`role`, `checkbox`);
+		cell.setAttribute(`part`, `checkbox`);
+		cell.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this._toggleItem(el);
+		});
+		const input = document.createElement(`input`);
+		input.type = `checkbox`;
+		input.className = `ixfx-list-checkbox`;
+		input.style.cssText = `pointer-events:none;cursor:pointer;margin:0`;
+		cell.appendChild(input);
+		return cell;
+	}
+	/**
+	* Custom checkbox cell: same shape as the native cell (a stretching span)
+	* so behaviour is identical. The renderer's content goes inside.
+	*/
+	_createCustomCheckbox(el) {
+		const span = document.createElement(`span`);
+		span.className = `ixfx-list-checkbox ixfx-list-checkbox-custom`;
+		span.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:24px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
+		span.tabIndex = -1;
+		span.setAttribute(`role`, `checkbox`);
+		span.setAttribute(`part`, `checkbox`);
+		span.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this._toggleItem(el);
+		});
+		return span;
+	}
 	_findListItem(path) {
 		for (const target of path) {
 			if (!(target instanceof Element)) continue;
@@ -11947,8 +12015,14 @@ let VerticalListElement = class VerticalListElement extends i {
       padding: 0;
       width: 100%;
       height: 100%;
+      overflow-x: hidden;
       overflow-y: auto;
       box-sizing: border-box;
+      /* Scrollbar theming: end users override these CSS variables to control
+         the native scrollbar (scrollbar-width, scrollbar-gutter, scrollbar-color). */
+      scrollbar-width: var(--list-scrollbar-width, auto);
+      scrollbar-gutter: var(--list-scrollbar-gutter, auto);
+      scrollbar-color: var(--list-scrollbar-color, auto);
     }
 
     ::slotted([hidden]) {
@@ -11978,6 +12052,25 @@ let VerticalListElement = class VerticalListElement extends i {
       outline: 1px solid transparent;
     }
 
+    /* In checked mode, only the checkbox column is clickable; the row body
+       gets a default cursor so it doesn't suggest otherwise. */
+    :host([interaction-mode="checked"]) ::slotted(li),
+    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
+      cursor: default;
+    }
+
+    /* Wrapper inserted around custom [data-list-item] elements in checked mode.
+       Provides the flex layout so the injected checkbox can stretch to the
+       row's full height via align-self:stretch. */
+    .ixfx-custom-row {
+      display: flex;
+      align-items: center;
+      min-height: var(--list-item-height, 28px);
+      box-sizing: border-box;
+      cursor: default;
+      user-select: none;
+    }
+
     ::slotted([data-tickled]) {
       background: var(--item-bg-tickled);
       outline: var(--item-border-tickled);
@@ -12085,6 +12178,7 @@ __decorate([property({
 	attribute: `interaction-mode`
 })], VerticalListElement.prototype, "interactionMode", void 0);
 __decorate([property({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "checkboxRenderer", void 0);
 __decorate([state()], VerticalListElement.prototype, "_selectedItems", void 0);
 __decorate([state()], VerticalListElement.prototype, "_searchVisible", void 0);
 __decorate([state()], VerticalListElement.prototype, "_searchQuery", void 0);
@@ -16643,6 +16737,441 @@ var MillerTreeController = class {
 	}
 };
 //#endregion
+//#region src/notifier/notification-pill.ts
+let NotificationPillElement = class NotificationPillElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.notificationType = `info`;
+		this.message = ``;
+		this.dismissing = false;
+		this.notificationId = ``;
+	}
+	#handleClick() {
+		this.#emitTap();
+	}
+	#handleKeyDown(e) {
+		if (e.key === `Enter` || e.key === ` `) {
+			e.preventDefault();
+			this.#emitTap();
+		}
+	}
+	#emitTap() {
+		this.dispatchEvent(new CustomEvent(`pill-tap`, {
+			detail: { id: this.notificationId },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#renderIcon() {
+		if (!this.icon) return A;
+		if (this.icon.startsWith(`<svg`)) return b`<span class="pill-icon">${unsafeHTML(this.icon)}</span>`;
+		if (!getIcon(this.icon)) return A;
+		return b`<ixfx-icon class="pill-icon" name="${this.icon}"></ixfx-icon>`;
+	}
+	render() {
+		return b`
+      <button
+        type="button"
+        class="pill"
+        notification-type="${this.notificationType}"
+        @click=${this.#handleClick}
+        @keydown=${this.#handleKeyDown}
+        aria-label="${this.message}"
+      >
+        ${this.#renderIcon()}
+        <span class="pill-message">${this.message}</span>
+      </button>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+      :host {
+        display: block;
+      }
+
+      .pill {
+        appearance: none;
+        cursor: pointer;
+        font-family: var(--font-family, inherit);
+        font-size: var(--text-m, 12px);
+        padding: var(--space-s, 4px) var(--space-m, 8px);
+        border-radius: var(--radius-l, 6px);
+        border: 1px solid var(--surface-6, #666);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-s, 4px);
+        max-width: 300px;
+        box-shadow: var(--shadow-m);
+        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+        pointer-events: auto;
+      }
+
+      :host([dismissing]) .pill {
+        opacity: 0;
+        transform: translateX(20px);
+      }
+
+      .pill[notification-type="info"] {
+        background: var(--surface-5, #555);
+        color: var(--surface-5-text, #fff);
+      }
+
+      .pill[notification-type="warning"] {
+        background: color-mix(in oklch, oklch(65% 0.18 70) 30%, var(--surface-5));
+        border-color: oklch(65% 0.18 70);
+        color: var(--surface-5-text, #fff);
+      }
+
+      .pill[notification-type="error"] {
+        background: var(--error, #c00);
+        border-color: var(--error, #c00);
+        color: var(--error-text, #fff);
+      }
+
+      .pill-icon {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .pill-icon ixfx-icon {
+        font-size: var(--text-m, 12px);
+      }
+
+      .pill-message {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .pill:focus-visible {
+        outline: 2px solid var(--accent, #4a9);
+        outline-offset: 2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .pill {
+          transition: opacity 0.1s ease-out;
+          transform: none !important;
+        }
+      }
+    `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `notification-type`
+})], NotificationPillElement.prototype, "notificationType", void 0);
+__decorate([property({ type: String })], NotificationPillElement.prototype, "message", void 0);
+__decorate([property({ type: String })], NotificationPillElement.prototype, "icon", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NotificationPillElement.prototype, "dismissing", void 0);
+__decorate([property({
+	type: String,
+	attribute: `notification-id`
+})], NotificationPillElement.prototype, "notificationId", void 0);
+NotificationPillElement = __decorate([safeCustomElement(`ixfx-notification-pill`)], NotificationPillElement);
+//#endregion
+//#region src/notifier/pill-renderer.ts
+const ROW_SPACING = 8;
+const DEFAULT_ROW_HEIGHT = 40;
+const STACK_OFFSET_STEP = 4;
+const STACK_OPACITY_BASE = .7;
+const STACK_OPACITY_DECAY = .15;
+const STACK_OPACITY_MIN = .2;
+function edgesOf(position) {
+	return {
+		vertical: position.startsWith(`top`) ? `top` : `bottom`,
+		horizontal: position.endsWith(`-left`) ? `left` : position.endsWith(`-right`) ? `right` : `middle`
+	};
+}
+function anchorStyles(position, safeArea) {
+	const { vertical, horizontal } = edgesOf(position);
+	const vMargin = `calc(var(--space-l, 12px) + ${(vertical === `top` ? safeArea.top : safeArea.bottom) ?? 0}px)`;
+	let css = `position: fixed; `;
+	css += vertical === `top` ? `top: ${vMargin}; bottom: auto; ` : `bottom: ${vMargin}; top: auto; `;
+	if (horizontal === `left`) {
+		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.left ?? 0}px)`;
+		css += `left: ${hMargin}; right: auto;`;
+	} else if (horizontal === `right`) {
+		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.right ?? 0}px)`;
+		css += `right: ${hMargin}; left: auto;`;
+	} else css += `left: 50%; right: auto;`;
+	return css;
+}
+/** Entry-animation starting transform: pills slide in from the edge they're anchored to. */
+function entryTransform(edges) {
+	const dy = edges.vertical === `top` ? -20 : 20;
+	if (edges.horizontal === `middle`) return `translateX(-50%) translate(0, ${dy}px)`;
+	return `translate(${edges.horizontal === `left` ? -20 : 20}px, ${dy}px)`;
+}
+function restingTransform(edges, dx, dy) {
+	if (edges.horizontal === `middle`) return `translateX(-50%) translate(${dx}px, ${dy}px)`;
+	return `translate(${dx}px, ${dy}px)`;
+}
+function createPillRenderer(options = {}) {
+	const position = options.position ?? `top-right`;
+	const queueDisplay = options.queueDisplay ?? `list`;
+	const safeArea = options.safeArea ?? {};
+	const edges = edgesOf(position);
+	let container = null;
+	let hooks = null;
+	const pills = /* @__PURE__ */ new Map();
+	let rowHeight = DEFAULT_ROW_HEIGHT;
+	let measured = false;
+	function ensureContainer() {
+		if (container) return container;
+		container = document.createElement(`div`);
+		container.className = `ixfx-notification-container`;
+		container.setAttribute(`role`, `region`);
+		container.setAttribute(`aria-label`, `Notifications`);
+		document.body.appendChild(container);
+		return container;
+	}
+	function updateAttributes(el, notification) {
+		el.setAttribute(`notification-type`, notification.type);
+		el.setAttribute(`message`, notification.message);
+		if (notification.icon) el.setAttribute(`icon`, notification.icon);
+		else el.removeAttribute(`icon`);
+	}
+	function createPillElement(notification) {
+		const el = document.createElement(`ixfx-notification-pill`);
+		el.setAttribute(`notification-id`, notification.id);
+		el.style.cssText = anchorStyles(position, safeArea);
+		updateAttributes(el, notification);
+		el.style.opacity = `0`;
+		el.style.transform = entryTransform(edges);
+		el.addEventListener(`pill-tap`, (e) => {
+			const customEvent = e;
+			hooks?.onTap(customEvent.detail.id);
+		});
+		return el;
+	}
+	function measureRowHeight(el) {
+		if (measured) return;
+		requestAnimationFrame(() => {
+			const height = el.getBoundingClientRect().height;
+			if (height > 0) {
+				rowHeight = height;
+				measured = true;
+			}
+		});
+	}
+	/** Positions every currently-visible pill for its rank in `order` (index 0 = front/oldest). */
+	function applyLayout(order) {
+		const total = order.length;
+		order.forEach((notification, index) => {
+			const entry = pills.get(notification.id);
+			if (!entry) return;
+			const el = entry.element;
+			let dx = 0;
+			let dy = 0;
+			let opacity = 1;
+			let pointerEvents = `auto`;
+			let filter = `none`;
+			if (queueDisplay === `list`) {
+				const step = index * (rowHeight + ROW_SPACING);
+				dy = edges.vertical === `top` ? step : -step;
+			} else {
+				const step = index * STACK_OFFSET_STEP;
+				dy = edges.vertical === `top` ? step : -step;
+				dx = edges.horizontal === `left` ? step : edges.horizontal === `right` ? -step : 0;
+				if (index > 0) {
+					const hintIndex = index - 1;
+					opacity = Math.max(STACK_OPACITY_MIN, STACK_OPACITY_BASE - hintIndex * STACK_OPACITY_DECAY);
+					pointerEvents = `none`;
+					filter = `saturate(0.6)`;
+				}
+			}
+			el.style.transition = `opacity 0.2s ease-out, transform 0.2s ease-out`;
+			el.style.opacity = `${opacity}`;
+			el.style.zIndex = `${total - index}`;
+			el.style.pointerEvents = pointerEvents;
+			el.style.filter = filter;
+			el.style.transform = restingTransform(edges, dx, dy);
+		});
+	}
+	function dismiss(id) {
+		const entry = pills.get(id);
+		if (!entry) return;
+		const el = entry.element;
+		el.setAttribute(`dismissing`, `true`);
+		const cleanup = () => {
+			el.removeEventListener(`transitionend`, cleanup);
+			el.remove();
+			pills.delete(id);
+			if (container && pills.size === 0) {
+				container.remove();
+				container = null;
+				measured = false;
+				rowHeight = DEFAULT_ROW_HEIGHT;
+			}
+		};
+		el.addEventListener(`transitionend`, cleanup);
+		setTimeout(cleanup, 300);
+	}
+	function setNotifications(notifications, _queueSize) {
+		const cont = ensureContainer();
+		const idsToKeep = new Set(notifications.map((n) => n.id));
+		for (const notification of notifications) {
+			const existing = pills.get(notification.id);
+			if (existing) {
+				existing.notification = notification;
+				updateAttributes(existing.element, notification);
+				continue;
+			}
+			const el = createPillElement(notification);
+			pills.set(notification.id, {
+				element: el,
+				notification
+			});
+			cont.appendChild(el);
+			measureRowHeight(el);
+		}
+		for (const [id] of pills) if (!idsToKeep.has(id)) dismiss(id);
+		requestAnimationFrame(() => applyLayout(notifications));
+	}
+	return {
+		attach(newHooks) {
+			hooks = newHooks;
+		},
+		detach() {
+			for (const [id] of pills) dismiss(id);
+			if (container) {
+				container.remove();
+				container = null;
+			}
+		},
+		setNotifications
+	};
+}
+//#endregion
+//#region src/notifier/manager.ts
+const options = {
+	renderer: void 0,
+	timeout: 4e3,
+	timeoutError: 8e3,
+	queue: true,
+	queueSize: 3,
+	tapBehaviour: `dismiss`,
+	tapHandlerDefault: void 0
+};
+/** Rank-ordered, index 0 = oldest/first (next to be evicted or timed out). Length never exceeds queueSize (or 1 when queuing is disabled). */
+const visible = [];
+let renderer = null;
+let defaultRenderer = null;
+function getDefaultRenderer() {
+	defaultRenderer ??= createPillRenderer({ position: `top-right` });
+	return defaultRenderer;
+}
+function getRenderer() {
+	return renderer ?? getDefaultRenderer();
+}
+function syncRenderer() {
+	getRenderer().setNotifications([...visible], options.queueSize);
+}
+function clearTimer(managed) {
+	if (managed.timer !== null) {
+		clearTimeout(managed.timer);
+		managed.timer = null;
+	}
+}
+/**
+* A message shown alone takes the full timeout. A message that joined a
+* non-empty queue at arrival time is permanently "wasQueued" and gets
+* 1/queueSize of the timeout once it reaches the front. The timer for a
+* given message is only ever started once - when it first becomes front.
+*/
+function startTimer(managed) {
+	const base = managed.type === `error` ? options.timeoutError : options.timeout;
+	const duration = managed.wasQueued ? base / options.queueSize : base;
+	managed.timer = window.setTimeout(() => dismiss(managed.id), duration);
+}
+function ensureFrontTimer() {
+	const front = visible[0];
+	if (front && front.timer === null) startTimer(front);
+}
+const NotificationManager = {
+	configure(opts) {
+		if (opts.renderer !== void 0) {
+			renderer?.detach?.();
+			renderer = opts.renderer;
+			renderer.attach({ onTap(id) {
+				const notification = visible.find((n) => n.id === id);
+				if (!notification) return;
+				if (notification.onTap) notification.onTap(id);
+				else options.tapHandlerDefault?.(notification);
+				if (options.tapBehaviour === `dismiss`) dismiss(id);
+			} });
+			syncRenderer();
+		}
+		if (opts.timeout !== void 0) options.timeout = opts.timeout;
+		if (opts.timeoutError !== void 0) options.timeoutError = opts.timeoutError;
+		if (opts.queue !== void 0) options.queue = opts.queue;
+		if (opts.queueSize !== void 0) {
+			options.queueSize = Math.max(1, opts.queueSize);
+			while (visible.length > options.queueSize) clearTimer(visible.shift());
+			ensureFrontTimer();
+			syncRenderer();
+		}
+		if (opts.tapBehaviour !== void 0) options.tapBehaviour = opts.tapBehaviour;
+		if (opts.tapHandlerDefault !== void 0) options.tapHandlerDefault = opts.tapHandlerDefault;
+	},
+	notify(content) {
+		const id = crypto.randomUUID();
+		const now = Date.now();
+		const icon = content.icon ?? (content.type === `error` ? `error` : void 0);
+		const managed = {
+			...content,
+			icon,
+			id,
+			createdAt: now,
+			updatedAt: now,
+			timer: null,
+			wasQueued: false
+		};
+		if (options.queue) {
+			if (visible.length >= options.queueSize) clearTimer(visible.shift());
+			managed.wasQueued = visible.length > 0;
+			visible.push(managed);
+		} else {
+			while (visible.length > 0) clearTimer(visible.pop());
+			visible.push(managed);
+		}
+		ensureFrontTimer();
+		syncRenderer();
+		return id;
+	},
+	update(id, content) {
+		const managed = visible.find((n) => n.id === id);
+		if (!managed) return;
+		Object.assign(managed, content);
+		managed.updatedAt = Date.now();
+		if (visible[0] === managed) {
+			clearTimer(managed);
+			startTimer(managed);
+		}
+		syncRenderer();
+	},
+	dismiss(id) {
+		dismiss(id);
+	},
+	dismissAll() {
+		for (const m of visible) clearTimer(m);
+		visible.length = 0;
+		syncRenderer();
+	}
+};
+function dismiss(id) {
+	const idx = visible.findIndex((m) => m.id === id);
+	if (idx === -1) return;
+	clearTimer(visible.splice(idx, 1)[0]);
+	ensureFrontTimer();
+	syncRenderer();
+}
+//#endregion
 //#region src/panel/panel-group.ts
 let PanelGroupElement = class PanelGroupElement extends i {
 	constructor(..._args) {
@@ -23145,7 +23674,7 @@ let TabListItemElement = class TabListItemElement extends i {
 			prominenceStyles,
 			i$3`
       :host {
-        --selected-colour: var(--accent);
+        --selected-colour: var(--surface-2-text);
         --selected-border-width: 1px;
         --padding: var(--space-m);
         display: inline-flex;
@@ -23171,6 +23700,8 @@ let TabListItemElement = class TabListItemElement extends i {
         border-bottom-color: var(--indicator-color-bottom, transparent);
         border-left-color: var(--indicator-color-left, transparent);
         border-right-color: var(--indicator-color-right, transparent);
+        background: var(--surface-5);
+        font-weight: bold;
       }
 
       .label {
@@ -23747,9 +24278,14 @@ let TabListElement = class TabListElement extends i {
   :host {
       display: inline-block;
       --activated-colour: var(--accent);
-      --colour: var(--surface-4);
+      --colour: var(--surface-3-text);
       --scroll-max-height: 200px;
       --allow-overflow: hidden;
+      color: var(--colour);
+      border: var(--border, none);
+      border-color: var(--surface-5);
+      border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
+
     }
     :host(.scrollable) {
       max-height: var(--scroll-max-height);
@@ -26523,6 +27059,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map