@ixfx/components 0.11.6 → 0.11.7

package/dist/checked-select-Dejl13qd.js

@@ -0,0 +1,604 @@
+import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as handleStyles } from "./handle-DAXs7kbJ.js";
+import "./interaction-BskmlA9t.js";
+import "./checkbox.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+//#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);
+//#endregion
+export { CheckedSelect as t };
+
+//# sourceMappingURL=checked-select-Dejl13qd.js.map

package/dist/checked-select-Dejl13qd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checked-select-Dejl13qd.js","names":["#emitChange","#focusRestCheckbox","#popup","#trigger","#rows","#tickled","#scrollToCursor","#toggleRow","#listbox","#anchorName","#onDocumentPointerDown","#close","#onRestCheckboxChange","#onRowClick","#onTriggerClick","#onTriggerKeyDown","#renderRest","#onListKeyDown","#renderRow","#onResizeDown","customElement"],"sources":["../src/checked-select/logic.ts","../src/checked-select/checked-select.ts"],"sourcesContent":["import type { CheckedSelectItem, CheckState, Size } from './types.js';\n\nfunction byLabel(a: CheckedSelectItem, b: CheckedSelectItem): number {\n  return a.label.localeCompare(b.label, undefined, { sensitivity: `base` });\n}\n\n/** Checked/indeterminate items first, then the rest; each group sorted by label. */\nexport function sortForOpen(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const on = items.filter(i => i.checked !== `false`).toSorted(byLabel);\n  const off = items.filter(i => i.checked === `false`).toSorted(byLabel);\n  return [...on, ...off];\n}\n\n/** User toggle: indeterminate and unchecked become checked, checked becomes unchecked. */\nexport function toggleState(state: CheckState): CheckState {\n  return state === `true` ? `false` : `true`;\n}\n\n/** Items shown in the resting state, alphabetically. */\nexport function visibleAtRest(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  return items.filter(i => i.checked !== `false`).toSorted(byLabel);\n}\n\nexport const VARIES_LABEL = `(varies)`;\n\n/** Resting text entries: checked labels, then a single `(varies)` if any are indeterminate. */\nexport function restTextParts(items: readonly CheckedSelectItem[]): string[] {\n  const on = items.filter(i => i.checked === `true`).toSorted(byLabel).map(i => i.label);\n  const varies = items.some(i => i.checked === `indeterminate`) ? [VARIES_LABEL] : [];\n  return [...on, ...varies];\n}\n\n/** Plain-text resting summary, comma separated. */\nexport function restText(items: readonly CheckedSelectItem[]): string {\n  return restTextParts(items).join(`, `);\n}\n\n/** Returns a new list with the item matching `value` toggled. */\nexport function applyToggle(items: readonly CheckedSelectItem[], value: string): CheckedSelectItem[] {\n  return items.map(i => i.value === value ? { ...i, checked: toggleState(i.checked) } : i);\n}\n\n/**\n * Index of the next label after `current` beginning with `char` (case-insensitive),\n * wrapping around. Returns -1 if nothing matches.\n */\nexport function nextMatchIndex(labels: readonly string[], current: number, char: string): number {\n  const c = char.toLocaleLowerCase();\n  const count = labels.length;\n  for (let step = 1; step <= count; step++) {\n    const index = (current + step + count) % count;\n    if (labels[index].toLocaleLowerCase().startsWith(c))\n      return index;\n  }\n  return -1;\n}\n\n/** Items in `draft` whose state differs from `original`. */\nexport function diffItems(original: readonly CheckedSelectItem[], draft: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const before = new Map(original.map(i => [i.value, i.checked]));\n  return draft.filter(i => before.get(i.value) !== i.checked);\n}\n\nexport function clampSize(size: Size, min: Size, max: Size): Size {\n  return {\n    width: Math.min(Math.max(size.width, min.width), Math.max(max.width, min.width)),\n    height: Math.min(Math.max(size.height, min.height), Math.max(max.height, min.height)),\n  };\n}\n","/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <ixfx-checked-select> — a SELECT-like multi-choice control with tri-state items.\n *\n * At rest it shows the checked and indeterminate items as a flow of display-only\n * `ixfx-checkbox`. Opening it shows a scrollable, resizable popup of every item\n * (checked first, sorted once at open time). Edits are made to a draft:\n * Enter (or clicking the resting area again) commits, Escape or clicking outside\n * cancels.\n *\n * Properties\n *   items        – CheckedSelectItem[] ({ value, label, checked: 'true'|'false'|'indeterminate' })\n *   multiline    – let the resting flow wrap (default: false)\n *   items-inert  – resting checkboxes are display-only; clicking them opens the popup\n *   orientation  – 'horizontal' (default) flows items in a row; 'vertical' stacks one per row\n *                  (vertical ignores multiline; text mode then lists one entry per line, no commas)\n *   item-display – 'checkbox' (default) or 'text' (comma-separated labels, then '(varies)' if any are indeterminate)\n *   placeholder  – shown when nothing is checked\n *   disabled     – prevents opening\n *\n * Events\n *   change – CustomEvent { detail: { items, changed } }, bubbles + composed.\n *            Fired once per commit, and only if something changed.\n *\n * CSS Variables\n *   --checked-select-gap         – gap between resting checkboxes\n *   --checked-select-padding     – padding of the resting area\n *   --checked-select-caret-width – width of the always-visible caret (default: 2rem)\n *   --checked-select-rest-max-height – resting height before it scrolls when multiline (default: 8rem)\n *   --checked-select-max-height  – popup height before it scrolls (default: 16rem)\n *   --checked-select-min-width   – minimum popup width when resized (default: 8rem)\n *   --checked-select-min-height  – minimum popup height when resized (default: 5rem)\n */\nimport type { PropertyValues } from 'lit';\nimport type { CheckedSelectItem, ItemDisplay, ItemOrientation, Size } from './types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { handleStyles } from '../styles/handle.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { applyToggle, clampSize, diffItems, nextMatchIndex, restText, restTextParts, sortForOpen, visibleAtRest } from './logic.js';\nimport '../checkbox/checkbox.js';\n\nexport type { CheckedSelectItem, CheckState, ItemDisplay, ItemOrientation } from './types.js';\n\nlet instanceCounter = 0;\n\n@customElement(`ixfx-checked-select`)\nexport class CheckedSelect extends LitElement {\n  static override styles = [themeFallbacks, handleStyles, tickledStyles, tickledItemStyles, css`\n    :host {\n      --checked-select-gap: var(--space-m);\n      --checked-select-padding: var(--space-s) var(--space-m);\n      --checked-select-caret-width: 2rem;\n      --checked-select-rest-max-height: 8rem;\n      --checked-select-max-height: 16rem;\n      --checked-select-min-width: 8rem;\n      --checked-select-min-height: 5rem;\n\n      display: block;\n      position: relative;\n    }\n\n    :host([disabled]) {\n      opacity: var(--prominence-disabled-opacity, 0.4);\n      pointer-events: none;\n    }\n\n    .rest {\n      position: relative;\n      box-sizing: border-box;\n      cursor: pointer;\n      background: var(--surface-4);\n      color: var(--surface-4-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n      user-select: none;\n    }\n\n    .rest-items {\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: var(--checked-select-gap);\n      padding: var(--checked-select-padding);\n      /* Room to scroll the last item clear of the caret */\n      padding-inline-end: var(--checked-select-caret-width);\n      min-height: 1.5em;\n      box-sizing: border-box;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: thin;\n    }\n    :host([multiline]) .rest-items {\n      flex-wrap: wrap;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      /* Wrapping never runs under the caret, so keep its column clear (and the scrollbar beside it) */\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Vertical: one item per row, scrolling vertically beside the caret. Must follow the multiline rule. */\n    :host([orientation=\"vertical\"]) .rest-items {\n      flex-direction: column;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Always-visible caret; items scroll underneath it */\n    .caret {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: var(--checked-select-caret-width);\n      display: grid;\n      place-items: center;\n      background: inherit;\n      border-radius: inherit;\n      pointer-events: auto;\n    }\n    .caret svg {\n      width: 1.1em;\n      height: 1.1em;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      transition: rotate var(--transition, 0.1s ease-out);\n    }\n    .rest[aria-expanded=\"true\"] .caret svg {\n      rotate: 180deg;\n    }\n    /* While the popup is open its draft is authoritative */\n    .rest[aria-expanded=\"true\"] ixfx-checkbox {\n      pointer-events: none;\n    }\n    .rest:hover {\n      background: var(--surface-5);\n    }\n    .rest:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .rest ixfx-checkbox {\n      flex-shrink: 0;\n    }\n    .rest-text {\n      white-space: nowrap;\n    }\n    :host([multiline]) .rest-text {\n      white-space: normal;\n    }\n    .placeholder {\n      opacity: 0.6;\n    }\n\n    .popup {\n      /* Reset popover UA styles */\n      inset: unset;\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: transparent;\n      overflow: visible;\n\n      /* CSS anchor positioning — position-anchor set inline */\n      position: fixed;\n      left: anchor(left);\n      top: anchor(bottom);\n      /* anchor-size() only works on the anchored element itself, so the width lives here */\n      width: anchor-size(width);\n      min-width: var(--checked-select-min-width);\n      position-try-fallbacks: flip-block;\n      margin-block: 4px;\n      z-index: 100;\n    }\n\n    .frame {\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      max-height: var(--checked-select-max-height);\n      background: var(--surface-3);\n      color: var(--surface-3-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n    }\n\n    .listbox {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: var(--space-s);\n      outline: none;\n    }\n    .listbox:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: -2px;\n    }\n\n    .item {\n      display: flex;\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    /* Key-repeat outpaces the fade, smearing the cursor across rows. Snap while\n       the keyboard drives the cursor; hover (mouse mode) keeps the transition. */\n    .listbox[data-input-mode=\"keyboard\"] .item {\n      transition: none;\n    }\n\n    .resize-zone {\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-end: 0;\n      width: 16px;\n      height: 16px;\n      display: grid;\n      place-items: center;\n      cursor: nwse-resize;\n      touch-action: none;\n    }\n    .resize-zone .ixfx-handle {\n      --ixfx-handle-spot-size: 10px;\n    }\n  `];\n\n  @property({ type: Array }) items: readonly CheckedSelectItem[] = [];\n  @property({ type: Boolean, reflect: true }) multiline = false;\n  /** At-rest checkboxes are display-only; clicking them just opens the popup. (Not `inert`: that native attribute would block the whole element.) */\n  @property({ type: Boolean, attribute: `items-inert`, reflect: true }) itemsInert = false;\n  /** How at-rest items are shown: as `checkbox`es, or as comma-separated `text`. */\n  @property({ type: String, attribute: `item-display`, reflect: true }) itemDisplay: ItemDisplay = `checkbox`;\n  /** Direction the resting items flow: `horizontal` (default) or `vertical` (one per row). */\n  @property({ type: String, reflect: true }) orientation: ItemOrientation = `horizontal`;\n  @property({ type: String }) placeholder = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _draft: readonly CheckedSelectItem[] = [];\n  @state() private _order: readonly string[] = [];\n  @state() private _size: Size | undefined;\n\n  readonly #anchorName = `--checked-select-anchor-${instanceCounter++}`;\n\n  #tickled = new TickledController<number>(this, {\n    getItems: () => this._order.map((_, i) => ({ id: i })),\n  });\n\n  get isOpen(): boolean {\n    return this._open;\n  }\n\n  get #trigger(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.rest`) ?? null;\n  }\n\n  get #popup(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.popup`) ?? null;\n  }\n\n  get #listbox(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.listbox`) ?? null;\n  }\n\n  /** Draft items in their frozen open-time order. */\n  #rows(): CheckedSelectItem[] {\n    const byValue = new Map(this._draft.map(i => [i.value, i]));\n    return this._order.flatMap(v => byValue.get(v) ?? []);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n  }\n\n  override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.has(`disabled`) && this.disabled && this._open) {\n      this.cancel();\n    }\n  }\n\n  async open(): Promise<void> {\n    if (this._open || this.disabled)\n      return;\n    this._draft = this.items;\n    this._order = sortForOpen(this.items).map(i => i.value);\n    this._size = undefined;\n    this._open = true;\n    if (this._order.length > 0)\n      this.#tickled.handleKeyboardNavigation(`first`);\n    document.addEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    await this.updateComplete;\n    this.#popup?.showPopover?.();\n    this.#listbox?.focus();\n  }\n\n  commit(): void {\n    if (!this._open)\n      return;\n    const changed = diffItems(this.items, this._draft);\n    const next = this._draft;\n    this.#close();\n    if (changed.length === 0)\n      return;\n    this.#emitChange(next, changed);\n  }\n\n  #emitChange(next: readonly CheckedSelectItem[], changed: readonly CheckedSelectItem[]): void {\n    this.items = next;\n    this.dispatchEvent(new CustomEvent<CheckedSelectChangeDetail>(`change`, {\n      detail: { items: next, changed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** A resting checkbox was used directly: toggle and commit immediately. */\n  #onRestCheckboxChange = (e: Event, value: string): void => {\n    // The checkbox's own `change` bubbles out of this shadow root; ours replaces it\n    e.stopPropagation();\n    if (this._open)\n      return;\n    const next = applyToggle(this.items, value);\n    this.#emitChange(next, diffItems(this.items, next));\n    void this.#focusRestCheckbox(value);\n  };\n\n  async #focusRestCheckbox(value: string): Promise<void> {\n    await this.updateComplete;\n    const box = this.shadowRoot?.querySelector<HTMLElement>(`.rest ixfx-checkbox[data-value=\"${CSS.escape(value)}\"]`);\n    // Unchecking removes the checkbox from the resting view; keep focus on the control\n    (box ?? this.#trigger)?.focus();\n  }\n\n  cancel(): void {\n    if (!this._open)\n      return;\n    this.#close();\n  }\n\n  #close(): void {\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    this.#popup?.hidePopover?.();\n    this._open = false;\n    this._draft = [];\n    this.#tickled.clearTickled();\n    this.#trigger?.focus();\n  }\n\n  #onDocumentPointerDown = (e: PointerEvent): void => {\n    const path = e.composedPath();\n    const popup = this.#popup;\n    const trigger = this.#trigger;\n    if ((popup && path.includes(popup)) || (trigger && path.includes(trigger)))\n      return;\n    this.cancel();\n  };\n\n  #onTriggerClick = (e: Event): void => {\n    // Clicks on a resting checkbox toggle it; only empty space (or the caret) opens/commits\n    if ((e.target as Element).closest?.(`ixfx-checkbox`))\n      return;\n    // Grabbing the scrollbar of the resting items isn't a click on the control\n    const scroller = e.composedPath()[0] as HTMLElement;\n    if (scroller.classList?.contains(`rest-items`) && e instanceof MouseEvent\n      && (e.offsetX > scroller.clientWidth || e.offsetY > scroller.clientHeight)) {\n      return;\n    }\n    if (this._open)\n      this.commit();\n    else void this.open();\n  };\n\n  #onTriggerKeyDown = (e: KeyboardEvent): void => {\n    // Keys on a focused resting checkbox belong to that checkbox\n    if (this._open || e.target !== e.currentTarget)\n      return;\n    if (e.key === `Enter` || e.key === ` ` || e.key === `ArrowDown`) {\n      e.preventDefault();\n      void this.open();\n    }\n  };\n\n  #toggleRow(value: string): void {\n    this._draft = applyToggle(this._draft, value);\n  }\n\n  #onRowClick(value: string, index: number): void {\n    this.#tickled.setTickled(index);\n    this.#toggleRow(value);\n  }\n\n  #onListKeyDown = (e: KeyboardEvent): void => {\n    const rows = this.#rows();\n    switch (e.key) {\n      case `ArrowDown`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`next`);\n        void this.#scrollToCursor();\n        return;\n      case `ArrowUp`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`previous`);\n        void this.#scrollToCursor();\n        return;\n      case `Home`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`first`);\n        void this.#scrollToCursor();\n        return;\n      case `End`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`last`);\n        void this.#scrollToCursor();\n        return;\n      case ` `: {\n        e.preventDefault();\n        const row = rows[this.#tickled.tickledId ?? -1];\n        if (row)\n          this.#toggleRow(row.value);\n        return;\n      }\n      case `Enter`:\n        e.preventDefault();\n        this.commit();\n        return;\n      case `Escape`:\n        e.preventDefault();\n        this.cancel();\n        return;\n      case `Tab`:\n        this.cancel();\n        return;\n    }\n    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      const next = nextMatchIndex(rows.map(r => r.label), this.#tickled.tickledId ?? -1, e.key);\n      if (next >= 0) {\n        this.#tickled.handleKeyboardNavigation(next);\n        void this.#scrollToCursor();\n      }\n    }\n  };\n\n  async #scrollToCursor(): Promise<void> {\n    await this.updateComplete;\n    const index = this.#tickled.tickledId;\n    this.shadowRoot?.querySelector(`[data-index=\"${index}\"]`)?.scrollIntoView?.({ block: `nearest` });\n  }\n\n  #onResizeDown = (e: PointerEvent): void => {\n    const frame = this.shadowRoot?.querySelector<HTMLElement>(`.frame`);\n    const zone = e.currentTarget as HTMLElement;\n    if (!frame)\n      return;\n    e.preventDefault();\n    const start = frame.getBoundingClientRect();\n    const originX = e.clientX;\n    const originY = e.clientY;\n    const style = getComputedStyle(this);\n    const min: Size = {\n      width: Number.parseFloat(style.getPropertyValue(`--checked-select-min-width`)) || 128,\n      height: Number.parseFloat(style.getPropertyValue(`--checked-select-min-height`)) || 80,\n    };\n    const max: Size = {\n      width: window.innerWidth - start.left - 8,\n      height: window.innerHeight - start.top - 8,\n    };\n    zone.setPointerCapture?.(e.pointerId);\n    zone.setAttribute(`data-active`, ``);\n    const onMove = (m: PointerEvent): void => {\n      this._size = clampSize({\n        width: start.width + m.clientX - originX,\n        height: start.height + m.clientY - originY,\n      }, min, max);\n    };\n    const onEnd = (): void => {\n      zone.removeAttribute(`data-active`);\n      zone.removeEventListener(`pointermove`, onMove);\n      zone.removeEventListener(`pointerup`, onEnd);\n      zone.removeEventListener(`pointercancel`, onEnd);\n      this.#listbox?.focus();\n    };\n    zone.addEventListener(`pointermove`, onMove);\n    zone.addEventListener(`pointerup`, onEnd);\n    zone.addEventListener(`pointercancel`, onEnd);\n  };\n\n  #renderRest() {\n    const shown = visibleAtRest(this.items);\n    if (shown.length === 0) {\n      return html`<span class=\"placeholder\">${this.placeholder}</span>`;\n    }\n    if (this.itemDisplay === `text`) {\n      if (this.orientation === `vertical`) {\n        return restTextParts(this.items).map(part => html`<span class=\"rest-text\">${part}</span>`);\n      }\n      return html`<span class=\"rest-text\">${restText(this.items)}</span>`;\n    }\n    return repeat(shown, i => i.value, i => html`\n      <ixfx-checkbox\n        ?readonly=${this.itemsInert}\n        data-value=${i.value}\n        label=${i.label}\n        .checked=${i.checked === `true`}\n        .indeterminate=${i.checked === `indeterminate`}\n        @change=${(e: Event) => this.#onRestCheckboxChange(e, i.value)}\n      ></ixfx-checkbox>`);\n  }\n\n  #renderRow(row: CheckedSelectItem, index: number) {\n    return html`\n      <div\n        class=\"item ${this.#tickled.isTickled(index) ? `tickled` : ``}\"\n        role=\"option\"\n        id=\"opt-${index}\"\n        data-index=${index}\n        aria-checked=${row.checked === `indeterminate` ? `mixed` : row.checked}\n        @pointerenter=${() => this.#tickled.handlePointerEnter(index)}\n        @click=${() => this.#onRowClick(row.value, index)}\n      >\n        <ixfx-checkbox\n          readonly\n          label=${row.label}\n          .checked=${row.checked === `true`}\n          .indeterminate=${row.checked === `indeterminate`}\n        ></ixfx-checkbox>\n      </div>`;\n  }\n\n  protected override render() {\n    const rows = this._open ? this.#rows() : [];\n    const cursor = this.#tickled.tickledId;\n    const popupSize = this._size ? `width: ${this._size.width}px;` : ``;\n    const frameStyle = this._size ? `height: ${this._size.height}px; max-height: none;` : ``;\n    const summary = visibleAtRest(this.items).map(i => i.label).join(`, `);\n    return html`\n      <div\n        class=\"rest\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? `-1` : `0`}\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this._open ? `true` : `false`}\n        aria-disabled=${this.disabled ? `true` : nothing}\n        title=${summary || nothing}\n        style=\"anchor-name: ${this.#anchorName}\"\n        @click=${this.#onTriggerClick}\n        @keydown=${this.#onTriggerKeyDown}\n      >\n        <div class=\"rest-items\">${this.#renderRest()}</div>\n        <div class=\"caret\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\" /></svg>\n        </div>\n      </div>\n      <div class=\"popup\" popover=\"manual\" style=\"position-anchor: ${this.#anchorName}; ${popupSize}\">\n        <div class=\"frame\" style=${frameStyle}>\n          <div\n            class=\"listbox\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            tabindex=\"-1\"\n            aria-activedescendant=${cursor === undefined ? nothing : `opt-${cursor}`}\n            data-input-mode=${this.#tickled.inputMode}\n            @pointerleave=${(e: PointerEvent) => this.#tickled.handlePointerLeave(e)}\n            @keydown=${this.#onListKeyDown}\n          >${rows.map((r, i) => this.#renderRow(r, i))}</div>\n          <div class=\"resize-zone\" @pointerdown=${this.#onResizeDown}>\n            <span class=\"ixfx-handle\" data-handle=\"dotted\" data-shape=\"spot\" part=\"handle\"></span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type CheckedSelectChangeDetail = {\n  /** Every item, with its committed state. */\n  readonly items: readonly CheckedSelectItem[];\n  /** Only the items whose state changed. */\n  readonly changed: readonly CheckedSelectItem[];\n};\n\nexport type CheckedSelectChangeEvent = CustomEvent<CheckedSelectChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checked-select': CheckedSelect;\n  }\n}\n\nexport interface CheckedSelectEventMap {\n  change: CheckedSelectChangeEvent;\n}\n\nexport interface CheckedSelect {\n  addEventListener: (<K extends keyof CheckedSelectEventMap>(\n    type: K,\n    listener: (this: CheckedSelect, event: CheckedSelectEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}

package/dist/checked-select.d.ts

@@ -0,0 +1,2 @@
+import { a as CheckState, c as ItemOrientation, i as CheckedSelectEventMap, n as CheckedSelectChangeDetail, o as CheckedSelectItem, r as CheckedSelectChangeEvent, s as ItemDisplay, t as CheckedSelect } from "./checked-select-CglRukbP.js";
+export { type CheckState, CheckedSelect, CheckedSelectChangeDetail, CheckedSelectChangeEvent, CheckedSelectEventMap, type CheckedSelectItem, type ItemDisplay, type ItemOrientation };

package/dist/checked-select.js

@@ -0,0 +1,3 @@
+import "./checkbox.js";
+import { t as CheckedSelect } from "./checked-select-Dejl13qd.js";
+export { CheckedSelect };