@ixfx/components 0.11.5 → 0.11.7

package/bundle/index.js

@@ -5,10 +5,10 @@ import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Fzf } from "fzf";
 import { createCommandRegistry } from "@clinth/ui-commands";
+import { repeat } from "lit/directives/repeat.js";
 import { Colour } from "@ixfx/visual";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
-import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Easings } from "@ixfx/modulation";
@@ -7248,6 +7248,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		this._hasContextTarget = false;
 		this._anchorName = `--mt-${_MenuTrigger._count++}`;
 		this._clickListener = this._handleClickOutside.bind(this);
+		this._focusBeforeOpen = null;
 		this._handlePopoverToggle = (e) => {
 			if (e.newState === `closed`) {
 				this._isOpen = false;
@@ -7264,10 +7265,10 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 				e.preventDefault();
 				e.stopPropagation();
 				this._closeMenu();
-				this._triggerBtn?.focus();
+				this._restoreFocus();
 			} else if (e.key === `Tab`) {
 				this._closeMenu();
-				this._triggerBtn?.focus();
+				this._restoreFocus();
 			}
 		};
 	}
@@ -7305,6 +7306,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) this._propagateContext();
+		if (changedProperties.has(`mode`) || changedProperties.has(`_hasContextTarget`)) this.toggleAttribute(`has-context-target`, this.mode === `context` && this._hasContextTarget);
 		if (changedProperties.has(`mode`)) this._updatePosition();
 	}
 	_updatePosition() {
@@ -7370,6 +7372,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	}
 	_openMenu() {
 		if (this._isOpen || !this._popup?.popover) return;
+		this._focusBeforeOpen = deepActiveElement();
 		try {
 			this._popup.showPopover({ source: this });
 			this._isOpen = true;
@@ -7411,6 +7414,22 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	_getMenuContainer() {
 		return ((this.shadowRoot?.querySelector(`slot[name="menu"]`))?.assignedElements({ flatten: true }) ?? []).find((el) => el.tagName === `IXFX-MENU-CONTAINER`) ?? null;
 	}
+	/**
+	* Return focus after a keyboard close. The trigger button is the natural
+	* target, but it is not rendered for a context target — then fall back to
+	* whatever was focused at open (don't rely on the browser's popover focus
+	* restoration), and finally the host.
+	*/
+	_restoreFocus() {
+		if (this._triggerBtn) {
+			this._triggerBtn.focus();
+			return;
+		}
+		const previous = this._focusBeforeOpen;
+		this._focusBeforeOpen = null;
+		if (previous?.isConnected && previous !== document.body) previous.focus();
+		else this.focus();
+	}
 	_handleCommand(e) {
 		if (this._popup?.popover) try {
 			this._popup.hidePopover();
@@ -7454,6 +7473,16 @@ let MenuTrigger = class MenuTrigger extends LitElement {
       --ixfx-button-padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
     }
 
+    /* Context mode with a context-target: dissolve the host's box so the
+       slotted surface is itself the item in the consumer's flex/grid layout.
+       Otherwise the host sizes to the surface's full un-scrolled content and
+       a height-constrained parent never clips it. Safe because context opens
+       position the popup at the pointer (fixed), not via the anchor.
+       Override with --menu-trigger-display (e.g. block) to keep a box. */
+    :host([mode="context"][has-context-target]) {
+      display: var(--menu-trigger-display, contents);
+    }
+
     .trigger-area {
       anchor-name: var(--anchor-name);
       /* Block flex (not inline-flex): as an inline-level box this would join
@@ -7581,6 +7610,12 @@ __decorate([state()], MenuTrigger.prototype, "_hasContextTarget", void 0);
 __decorate([query(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([query(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
 MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
+/** `document.activeElement`, followed down through open shadow roots. */
+function deepActiveElement() {
+	let el = document.activeElement;
+	while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+	return el instanceof HTMLElement ? el : null;
+}
 //#endregion
 //#region src/menu/menu-item.ts
 let MenuItem = class MenuItem extends LitElement {
@@ -8203,6 +8238,7 @@ SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 * Properties
 *   checked   – checkbox state (default: false)
 *   disabled  – disabled state (default: false)
+*   readonly  – display-only: no pointer/keyboard interaction, full opacity (default: false)
 *   label     – label text
 *   name      – form field name
 *   value     – form field value
@@ -8234,12 +8270,14 @@ let Checkbox = class Checkbox extends LitElement {
 		this.checked = false;
 		this.disabled = false;
 		this.indeterminate = false;
+		this.readonly = false;
 		this.label = ``;
 		this.name = ``;
 		this.value = ``;
 		this.#handleChange = (e) => {
 			const target = e.target;
 			this.checked = target.checked;
+			this.indeterminate = false;
 			this.dispatchEvent(new CustomEvent(`change`, {
 				detail: { checked: this.checked },
 				bubbles: true,
@@ -8302,6 +8340,16 @@ let Checkbox = class Checkbox extends LitElement {
       opacity: var(--box-opacity-checked);
     }
 
+    /* Display-only: inert, keeps full opacity, no hover reveal */
+    :host([readonly]) {
+      pointer-events: none;
+    }
+    :host([readonly]) label,
+    :host([readonly]) label:hover {
+      cursor: default;
+      opacity: var(--box-opacity-checked);
+    }
+
     input {
       position: absolute;
       opacity: 0;
@@ -8413,6 +8461,10 @@ let Checkbox = class Checkbox extends LitElement {
   `
 		];
 	}
+	/** Focus the inner input, so the host can be focused like a native checkbox. */
+	focus(options) {
+		this.renderRoot.querySelector(`input`)?.focus(options);
+	}
 	#handleChange;
 	render() {
 		return html`
@@ -8422,6 +8474,8 @@ let Checkbox = class Checkbox extends LitElement {
           type="checkbox"
           .checked=${this.checked}
           .disabled=${this.disabled}
+          tabindex=${this.readonly ? `-1` : nothing}
+          aria-hidden=${this.readonly ? `true` : nothing}
           .indeterminate=${this.indeterminate}
           .name=${this.name}
           .value=${this.value}
@@ -8436,10 +8490,605 @@ let Checkbox = class Checkbox extends LitElement {
 __decorate([property({ type: Boolean })], Checkbox.prototype, "checked", void 0);
 __decorate([property({ type: Boolean })], Checkbox.prototype, "disabled", void 0);
 __decorate([property({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Checkbox.prototype, "readonly", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "label", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "name", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "value", void 0);
 Checkbox = __decorate([safeCustomElement(`ixfx-checkbox`)], Checkbox);
+//#endregion
+//#region src/checked-select/logic.ts
+function byLabel(a, b) {
+	return a.label.localeCompare(b.label, void 0, { sensitivity: `base` });
+}
+/** Checked/indeterminate items first, then the rest; each group sorted by label. */
+function sortForOpen(items) {
+	const on = items.filter((i) => i.checked !== `false`).toSorted(byLabel);
+	const off = items.filter((i) => i.checked === `false`).toSorted(byLabel);
+	return [...on, ...off];
+}
+/** User toggle: indeterminate and unchecked become checked, checked becomes unchecked. */
+function toggleState(state) {
+	return state === `true` ? `false` : `true`;
+}
+/** Items shown in the resting state, alphabetically. */
+function visibleAtRest(items) {
+	return items.filter((i) => i.checked !== `false`).toSorted(byLabel);
+}
+const VARIES_LABEL = `(varies)`;
+/** Resting text entries: checked labels, then a single `(varies)` if any are indeterminate. */
+function restTextParts(items) {
+	const on = items.filter((i) => i.checked === `true`).toSorted(byLabel).map((i) => i.label);
+	const varies = items.some((i) => i.checked === `indeterminate`) ? [VARIES_LABEL] : [];
+	return [...on, ...varies];
+}
+/** Plain-text resting summary, comma separated. */
+function restText(items) {
+	return restTextParts(items).join(`, `);
+}
+/** Returns a new list with the item matching `value` toggled. */
+function applyToggle(items, value) {
+	return items.map((i) => i.value === value ? {
+		...i,
+		checked: toggleState(i.checked)
+	} : i);
+}
+/**
+* Index of the next label after `current` beginning with `char` (case-insensitive),
+* wrapping around. Returns -1 if nothing matches.
+*/
+function nextMatchIndex(labels, current, char) {
+	const c = char.toLocaleLowerCase();
+	const count = labels.length;
+	for (let step = 1; step <= count; step++) {
+		const index = (current + step + count) % count;
+		if (labels[index].toLocaleLowerCase().startsWith(c)) return index;
+	}
+	return -1;
+}
+/** Items in `draft` whose state differs from `original`. */
+function diffItems(original, draft) {
+	const before = new Map(original.map((i) => [i.value, i.checked]));
+	return draft.filter((i) => before.get(i.value) !== i.checked);
+}
+function clampSize(size, min, max) {
+	return {
+		width: Math.min(Math.max(size.width, min.width), Math.max(max.width, min.width)),
+		height: Math.min(Math.max(size.height, min.height), Math.max(max.height, min.height))
+	};
+}
+//#endregion
+//#region src/checked-select/checked-select.ts
+let instanceCounter = 0;
+let CheckedSelect = class CheckedSelect extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.multiline = false;
+		this.itemsInert = false;
+		this.itemDisplay = `checkbox`;
+		this.orientation = `horizontal`;
+		this.placeholder = ``;
+		this.disabled = false;
+		this._open = false;
+		this._draft = [];
+		this._order = [];
+		this.#anchorName = `--checked-select-anchor-${instanceCounter++}`;
+		this.#tickled = new TickledController(this, { getItems: () => this._order.map((_, i) => ({ id: i })) });
+		this.#onRestCheckboxChange = (e, value) => {
+			e.stopPropagation();
+			if (this._open) return;
+			const next = applyToggle(this.items, value);
+			this.#emitChange(next, diffItems(this.items, next));
+			this.#focusRestCheckbox(value);
+		};
+		this.#onDocumentPointerDown = (e) => {
+			const path = e.composedPath();
+			const popup = this.#popup;
+			const trigger = this.#trigger;
+			if (popup && path.includes(popup) || trigger && path.includes(trigger)) return;
+			this.cancel();
+		};
+		this.#onTriggerClick = (e) => {
+			if (e.target.closest?.(`ixfx-checkbox`)) return;
+			const scroller = e.composedPath()[0];
+			if (scroller.classList?.contains(`rest-items`) && e instanceof MouseEvent && (e.offsetX > scroller.clientWidth || e.offsetY > scroller.clientHeight)) return;
+			if (this._open) this.commit();
+			else this.open();
+		};
+		this.#onTriggerKeyDown = (e) => {
+			if (this._open || e.target !== e.currentTarget) return;
+			if (e.key === `Enter` || e.key === ` ` || e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.open();
+			}
+		};
+		this.#onListKeyDown = (e) => {
+			const rows = this.#rows();
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.#tickled.handleKeyboardNavigation(`next`);
+					this.#scrollToCursor();
+					return;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.#tickled.handleKeyboardNavigation(`previous`);
+					this.#scrollToCursor();
+					return;
+				case `Home`:
+					e.preventDefault();
+					this.#tickled.handleKeyboardNavigation(`first`);
+					this.#scrollToCursor();
+					return;
+				case `End`:
+					e.preventDefault();
+					this.#tickled.handleKeyboardNavigation(`last`);
+					this.#scrollToCursor();
+					return;
+				case ` `: {
+					e.preventDefault();
+					const row = rows[this.#tickled.tickledId ?? -1];
+					if (row) this.#toggleRow(row.value);
+					return;
+				}
+				case `Enter`:
+					e.preventDefault();
+					this.commit();
+					return;
+				case `Escape`:
+					e.preventDefault();
+					this.cancel();
+					return;
+				case `Tab`:
+					this.cancel();
+					return;
+			}
+			if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				const next = nextMatchIndex(rows.map((r) => r.label), this.#tickled.tickledId ?? -1, e.key);
+				if (next >= 0) {
+					this.#tickled.handleKeyboardNavigation(next);
+					this.#scrollToCursor();
+				}
+			}
+		};
+		this.#onResizeDown = (e) => {
+			const frame = this.shadowRoot?.querySelector(`.frame`);
+			const zone = e.currentTarget;
+			if (!frame) return;
+			e.preventDefault();
+			const start = frame.getBoundingClientRect();
+			const originX = e.clientX;
+			const originY = e.clientY;
+			const style = getComputedStyle(this);
+			const min = {
+				width: Number.parseFloat(style.getPropertyValue(`--checked-select-min-width`)) || 128,
+				height: Number.parseFloat(style.getPropertyValue(`--checked-select-min-height`)) || 80
+			};
+			const max = {
+				width: window.innerWidth - start.left - 8,
+				height: window.innerHeight - start.top - 8
+			};
+			zone.setPointerCapture?.(e.pointerId);
+			zone.setAttribute(`data-active`, ``);
+			const onMove = (m) => {
+				this._size = clampSize({
+					width: start.width + m.clientX - originX,
+					height: start.height + m.clientY - originY
+				}, min, max);
+			};
+			const onEnd = () => {
+				zone.removeAttribute(`data-active`);
+				zone.removeEventListener(`pointermove`, onMove);
+				zone.removeEventListener(`pointerup`, onEnd);
+				zone.removeEventListener(`pointercancel`, onEnd);
+				this.#listbox?.focus();
+			};
+			zone.addEventListener(`pointermove`, onMove);
+			zone.addEventListener(`pointerup`, onEnd);
+			zone.addEventListener(`pointercancel`, onEnd);
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			tickledStyles,
+			tickledItemStyles,
+			css`
+    :host {
+      --checked-select-gap: var(--space-m);
+      --checked-select-padding: var(--space-s) var(--space-m);
+      --checked-select-caret-width: 2rem;
+      --checked-select-rest-max-height: 8rem;
+      --checked-select-max-height: 16rem;
+      --checked-select-min-width: 8rem;
+      --checked-select-min-height: 5rem;
+
+      display: block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: var(--prominence-disabled-opacity, 0.4);
+      pointer-events: none;
+    }
+
+    .rest {
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+      background: var(--surface-4);
+      color: var(--surface-4-text);
+      border: var(--border);
+      border-radius: var(--radius-m);
+      user-select: none;
+    }
+
+    .rest-items {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: var(--checked-select-gap);
+      padding: var(--checked-select-padding);
+      /* Room to scroll the last item clear of the caret */
+      padding-inline-end: var(--checked-select-caret-width);
+      min-height: 1.5em;
+      box-sizing: border-box;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: thin;
+    }
+    :host([multiline]) .rest-items {
+      flex-wrap: wrap;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: var(--checked-select-rest-max-height);
+      /* Wrapping never runs under the caret, so keep its column clear (and the scrollbar beside it) */
+      padding-inline-end: var(--space-m);
+      margin-inline-end: var(--checked-select-caret-width);
+    }
+
+    /* Vertical: one item per row, scrolling vertically beside the caret. Must follow the multiline rule. */
+    :host([orientation="vertical"]) .rest-items {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: var(--checked-select-rest-max-height);
+      padding-inline-end: var(--space-m);
+      margin-inline-end: var(--checked-select-caret-width);
+    }
+
+    /* Always-visible caret; items scroll underneath it */
+    .caret {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      width: var(--checked-select-caret-width);
+      display: grid;
+      place-items: center;
+      background: inherit;
+      border-radius: inherit;
+      pointer-events: auto;
+    }
+    .caret svg {
+      width: 1.1em;
+      height: 1.1em;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition: rotate var(--transition, 0.1s ease-out);
+    }
+    .rest[aria-expanded="true"] .caret svg {
+      rotate: 180deg;
+    }
+    /* While the popup is open its draft is authoritative */
+    .rest[aria-expanded="true"] ixfx-checkbox {
+      pointer-events: none;
+    }
+    .rest:hover {
+      background: var(--surface-5);
+    }
+    .rest:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+    .rest ixfx-checkbox {
+      flex-shrink: 0;
+    }
+    .rest-text {
+      white-space: nowrap;
+    }
+    :host([multiline]) .rest-text {
+      white-space: normal;
+    }
+    .placeholder {
+      opacity: 0.6;
+    }
+
+    .popup {
+      /* Reset popover UA styles */
+      inset: unset;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: transparent;
+      overflow: visible;
+
+      /* CSS anchor positioning — position-anchor set inline */
+      position: fixed;
+      left: anchor(left);
+      top: anchor(bottom);
+      /* anchor-size() only works on the anchored element itself, so the width lives here */
+      width: anchor-size(width);
+      min-width: var(--checked-select-min-width);
+      position-try-fallbacks: flip-block;
+      margin-block: 4px;
+      z-index: 100;
+    }
+
+    .frame {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-height: var(--checked-select-max-height);
+      background: var(--surface-3);
+      color: var(--surface-3-text);
+      border: var(--border);
+      border-radius: var(--radius-m);
+    }
+
+    .listbox {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: var(--space-s);
+      outline: none;
+    }
+    .listbox:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -2px;
+    }
+
+    .item {
+      display: flex;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Key-repeat outpaces the fade, smearing the cursor across rows. Snap while
+       the keyboard drives the cursor; hover (mouse mode) keeps the transition. */
+    .listbox[data-input-mode="keyboard"] .item {
+      transition: none;
+    }
+
+    .resize-zone {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: 0;
+      width: 16px;
+      height: 16px;
+      display: grid;
+      place-items: center;
+      cursor: nwse-resize;
+      touch-action: none;
+    }
+    .resize-zone .ixfx-handle {
+      --ixfx-handle-spot-size: 10px;
+    }
+  `
+		];
+	}
+	#anchorName;
+	#tickled;
+	get isOpen() {
+		return this._open;
+	}
+	get #trigger() {
+		return this.shadowRoot?.querySelector(`.rest`) ?? null;
+	}
+	get #popup() {
+		return this.shadowRoot?.querySelector(`.popup`) ?? null;
+	}
+	get #listbox() {
+		return this.shadowRoot?.querySelector(`.listbox`) ?? null;
+	}
+	/** Draft items in their frozen open-time order. */
+	#rows() {
+		const byValue = new Map(this._draft.map((i) => [i.value, i]));
+		return this._order.flatMap((v) => byValue.get(v) ?? []);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`disabled`) && this.disabled && this._open) this.cancel();
+	}
+	async open() {
+		if (this._open || this.disabled) return;
+		this._draft = this.items;
+		this._order = sortForOpen(this.items).map((i) => i.value);
+		this._size = void 0;
+		this._open = true;
+		if (this._order.length > 0) this.#tickled.handleKeyboardNavigation(`first`);
+		document.addEventListener(`pointerdown`, this.#onDocumentPointerDown, true);
+		await this.updateComplete;
+		this.#popup?.showPopover?.();
+		this.#listbox?.focus();
+	}
+	commit() {
+		if (!this._open) return;
+		const changed = diffItems(this.items, this._draft);
+		const next = this._draft;
+		this.#close();
+		if (changed.length === 0) return;
+		this.#emitChange(next, changed);
+	}
+	#emitChange(next, changed) {
+		this.items = next;
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				items: next,
+				changed
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** A resting checkbox was used directly: toggle and commit immediately. */
+	#onRestCheckboxChange;
+	async #focusRestCheckbox(value) {
+		await this.updateComplete;
+		(this.shadowRoot?.querySelector(`.rest ixfx-checkbox[data-value="${CSS.escape(value)}"]`) ?? this.#trigger)?.focus();
+	}
+	cancel() {
+		if (!this._open) return;
+		this.#close();
+	}
+	#close() {
+		document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);
+		this.#popup?.hidePopover?.();
+		this._open = false;
+		this._draft = [];
+		this.#tickled.clearTickled();
+		this.#trigger?.focus();
+	}
+	#onDocumentPointerDown;
+	#onTriggerClick;
+	#onTriggerKeyDown;
+	#toggleRow(value) {
+		this._draft = applyToggle(this._draft, value);
+	}
+	#onRowClick(value, index) {
+		this.#tickled.setTickled(index);
+		this.#toggleRow(value);
+	}
+	#onListKeyDown;
+	async #scrollToCursor() {
+		await this.updateComplete;
+		const index = this.#tickled.tickledId;
+		this.shadowRoot?.querySelector(`[data-index="${index}"]`)?.scrollIntoView?.({ block: `nearest` });
+	}
+	#onResizeDown;
+	#renderRest() {
+		const shown = visibleAtRest(this.items);
+		if (shown.length === 0) return html`<span class="placeholder">${this.placeholder}</span>`;
+		if (this.itemDisplay === `text`) {
+			if (this.orientation === `vertical`) return restTextParts(this.items).map((part) => html`<span class="rest-text">${part}</span>`);
+			return html`<span class="rest-text">${restText(this.items)}</span>`;
+		}
+		return repeat(shown, (i) => i.value, (i) => html`
+      <ixfx-checkbox
+        ?readonly=${this.itemsInert}
+        data-value=${i.value}
+        label=${i.label}
+        .checked=${i.checked === `true`}
+        .indeterminate=${i.checked === `indeterminate`}
+        @change=${(e) => this.#onRestCheckboxChange(e, i.value)}
+      ></ixfx-checkbox>`);
+	}
+	#renderRow(row, index) {
+		return html`
+      <div
+        class="item ${this.#tickled.isTickled(index) ? `tickled` : ``}"
+        role="option"
+        id="opt-${index}"
+        data-index=${index}
+        aria-checked=${row.checked === `indeterminate` ? `mixed` : row.checked}
+        @pointerenter=${() => this.#tickled.handlePointerEnter(index)}
+        @click=${() => this.#onRowClick(row.value, index)}
+      >
+        <ixfx-checkbox
+          readonly
+          label=${row.label}
+          .checked=${row.checked === `true`}
+          .indeterminate=${row.checked === `indeterminate`}
+        ></ixfx-checkbox>
+      </div>`;
+	}
+	render() {
+		const rows = this._open ? this.#rows() : [];
+		const cursor = this.#tickled.tickledId;
+		const popupSize = this._size ? `width: ${this._size.width}px;` : ``;
+		const frameStyle = this._size ? `height: ${this._size.height}px; max-height: none;` : ``;
+		const summary = visibleAtRest(this.items).map((i) => i.label).join(`, `);
+		return html`
+      <div
+        class="rest"
+        role="combobox"
+        tabindex=${this.disabled ? `-1` : `0`}
+        aria-haspopup="listbox"
+        aria-expanded=${this._open ? `true` : `false`}
+        aria-disabled=${this.disabled ? `true` : nothing}
+        title=${summary || nothing}
+        style="anchor-name: ${this.#anchorName}"
+        @click=${this.#onTriggerClick}
+        @keydown=${this.#onTriggerKeyDown}
+      >
+        <div class="rest-items">${this.#renderRest()}</div>
+        <div class="caret" aria-hidden="true">
+          <svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
+        </div>
+      </div>
+      <div class="popup" popover="manual" style="position-anchor: ${this.#anchorName}; ${popupSize}">
+        <div class="frame" style=${frameStyle}>
+          <div
+            class="listbox"
+            role="listbox"
+            aria-multiselectable="true"
+            tabindex="-1"
+            aria-activedescendant=${cursor === void 0 ? nothing : `opt-${cursor}`}
+            data-input-mode=${this.#tickled.inputMode}
+            @pointerleave=${(e) => this.#tickled.handlePointerLeave(e)}
+            @keydown=${this.#onListKeyDown}
+          >${rows.map((r, i) => this.#renderRow(r, i))}</div>
+          <div class="resize-zone" @pointerdown=${this.#onResizeDown}>
+            <span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Array })], CheckedSelect.prototype, "items", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CheckedSelect.prototype, "multiline", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-inert`,
+	reflect: true
+})], CheckedSelect.prototype, "itemsInert", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-display`,
+	reflect: true
+})], CheckedSelect.prototype, "itemDisplay", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CheckedSelect.prototype, "orientation", void 0);
+__decorate([property({ type: String })], CheckedSelect.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CheckedSelect.prototype, "disabled", void 0);
+__decorate([state()], CheckedSelect.prototype, "_open", void 0);
+__decorate([state()], CheckedSelect.prototype, "_draft", void 0);
+__decorate([state()], CheckedSelect.prototype, "_order", void 0);
+__decorate([state()], CheckedSelect.prototype, "_size", void 0);
+CheckedSelect = __decorate([safeCustomElement(`ixfx-checked-select`)], CheckedSelect);
 const RANGE_LIMITS = {
 	l: [0, 1],
 	c: [0, .4],
@@ -16527,6 +17176,14 @@ DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableE
 //#region src/detail-list/detail-list.ts
 const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
+const NAV_KEYS = /* @__PURE__ */ new Set([
+	`ArrowDown`,
+	`ArrowUp`,
+	`ArrowLeft`,
+	`ArrowRight`,
+	`Home`,
+	`End`
+]);
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
 /**
 * Layout for the per-item badge wrapper `#ensureBadge` adds. Applied as inline
@@ -16697,6 +17354,9 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this._onPointerLeave = (e) => {
 			this.tickled.handlePointerLeave(e);
 		};
+		this._endKeyboardNav = () => {
+			this.removeAttribute(`data-keyboard-nav`);
+		};
 		this._onKeyDown = (e) => {
 			if (this.search.isOpen) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -16706,6 +17366,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 				}
 				return;
 			}
+			if (NAV_KEYS.has(e.key)) this.setAttribute(`data-keyboard-nav`, ``);
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -16894,6 +17555,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.addEventListener(`pointerover`, this._onPointerOver);
 		this.addEventListener(`pointerleave`, this._onPointerLeave);
 		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`pointermove`, this._endKeyboardNav);
+		this.addEventListener(`pointerdown`, this._endKeyboardNav);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
 		this.addEventListener(`wheel`, this._onWheel);
@@ -16940,6 +17603,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.removeEventListener(`pointerover`, this._onPointerOver);
 		this.removeEventListener(`pointerleave`, this._onPointerLeave);
 		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`pointermove`, this._endKeyboardNav);
+		this.removeEventListener(`pointerdown`, this._endKeyboardNav);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.removeEventListener(`wheel`, this._onWheel);
@@ -17744,6 +18409,12 @@ let DetailListElement = class DetailListElement extends LitElement {
       outline: 1px solid transparent;
     }
 
+    /* While navigating by keyboard, key-repeat outpaces the 0.1s fade so the
+       cursor smears across rows. Snap instead. */
+    :host([data-keyboard-nav]) ::slotted(li) {
+      transition: none;
+    }
+
     /* 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) {
@@ -53278,6 +53949,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map