@ixfx/components 0.4.4 → 0.5.1

package/dist/index.js

@@ -6,14 +6,14 @@ import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as
 import { t as IxfxIconElement } from "./icon-B22XVlCt.js";
 import { AcTextElement } from "./ac-text.js";
 import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-2pz21xtR.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-C3b9OWJD.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-DcE8RQJc.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-DxYee1ZH.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-CTE8crYn.js";
 import { t as popupSurfaceStyles } from "./popup-DiWMxsWj.js";
 import "./menu-item-NUKwJ4s5.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BacNRabo.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-C3Ag4uh-.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BnvzhsAw.js";
@@ -40,10 +40,10 @@ import { t as SliderInputElement } from "./slider-input-DFpG23bS.js";
 import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
-import { t as TabListElement } from "./tab-list-DzknpdSo.js";
+import { t as TabListElement } from "./tab-list-DhkVhRQc.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html, nothing, render } from "lit";
 import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Trees } from "@ixfx/collections";
@@ -1001,9 +1001,11 @@ let RadioGroup = class RadioGroup extends LitElement {
       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);
     }
 
     * {
@@ -1033,6 +1035,7 @@ let RadioGroup = class RadioGroup extends LitElement {
       gap: var(--item-spacing, 0);
       overflow: hidden;
       border-radius: inherit;
+      justify-content: center;
     }
 
     .radio-group.horizontal {
@@ -1074,13 +1077,13 @@ let RadioGroup = class RadioGroup extends LitElement {
 
     .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] {
@@ -3356,7 +3359,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				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() {
@@ -3552,6 +3555,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	}
 	_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;
@@ -3576,24 +3580,78 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			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);
+			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) {
+				if (wantsCustom) {
+					const opts = this.checkboxRenderer;
+					const margin = opts.margin ?? `0`;
+					const width = opts.width ?? `24px`;
+					cb = this._createCustomCheckbox(el, margin, width);
+				} else cb = 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) {
+					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
+					render(renderer(checked), cb);
 				}
-				cb.checked = this._selectedItems.has(el);
-			} else if (cb) cb.remove();
+			} 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, margin, width) {
+		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:${width};margin:${margin};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;
@@ -3655,8 +3713,14 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       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]) {
@@ -3686,6 +3750,25 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       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);
@@ -3793,6 +3876,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);
@@ -3928,6 +4012,441 @@ function createVerticalListAdapter(renderItem, options) {
 	return adapter;
 }
 //#endregion
+//#region src/notifier/notification-pill.ts
+let NotificationPillElement = class NotificationPillElement extends LitElement {
+	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 nothing;
+		if (this.icon.startsWith(`<svg`)) return html`<span class="pill-icon">${unsafeHTML(this.icon)}</span>`;
+		if (!getIcon(this.icon)) return nothing;
+		return html`<ixfx-icon class="pill-icon" name="${this.icon}"></ixfx-icon>`;
+	}
+	render() {
+		return html`
+      <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, css`
+      :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 LitElement {
 	constructor(..._args) {
@@ -4616,7 +5135,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 			prominenceStyles,
 			css`
       :host {
-        --selected-colour: var(--accent);
+        --selected-colour: var(--surface-2-text);
         --selected-border-width: 1px;
         --padding: var(--space-m);
         display: inline-flex;
@@ -4642,6 +5161,8 @@ let TabListItemElement = class TabListItemElement extends LitElement {
         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 {
@@ -5104,6 +5625,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