@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/esm/co-option-list.entry.js

@@ -0,0 +1,377 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { h as highlightMatch } from './normalizeText-CQY6Ul7q.js';
+import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
+import './overlayscrollbars-ox7HzCZn.js';
+
+// optionListLogic.ts — lógica pura de co-option-list (patrón commandSearchLogic).
+function parseItems(raw) {
+    let parsed = raw;
+    if (typeof raw === 'string') {
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return Array.isArray(parsed) ? parsed : [];
+}
+function parseValue(raw) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [raw];
+    }
+    catch (_a) {
+        return [raw];
+    }
+}
+/**
+ * Selected-first contra el snapshot tomado al abrir (patrón co-ref-field):
+ * idle → bloque seleccionado en orden de snapshot (sintetizando desde
+ * snapshotDisplay los que la página actual no contiene) + resto en orden de
+ * server; buscando → solo resultados reales, seleccionados primero.
+ *
+ * Invariante: todo id en `snapshotIds` DEBE tener una entrada correspondiente
+ * en `snapshotDisplay` (armado por el caller desde selectedItems ∪ items al
+ * tomar el snapshot). Un id sin display-item asociado se cae silenciosamente
+ * de la lista en modo idle (el `byId.get(d._id) ?? d` sintetiza desde el
+ * display-item mismo, pero no hay nada que sintetizar si el id nunca entró a
+ * snapshotDisplay en primer lugar).
+ */
+function orderItems(items, snapshotIds, snapshotDisplay, searching) {
+    var _a;
+    if (snapshotIds.size === 0)
+        return items;
+    const byId = new Map(items.map((i) => [i._id, i]));
+    const selectedBlock = [];
+    if (!searching) {
+        for (const d of snapshotDisplay)
+            selectedBlock.push((_a = byId.get(d._id)) !== null && _a !== void 0 ? _a : d);
+    }
+    else {
+        for (const i of items)
+            if (snapshotIds.has(i._id))
+                selectedBlock.push(i);
+    }
+    const rest = items.filter((i) => !snapshotIds.has(i._id));
+    return [...selectedBlock, ...rest];
+}
+/** Aplana a filas de render insertando un header cuando `group` cambia
+ *  (groupItems de co-command-search). `index` cuenta solo items. */
+function buildRows(items) {
+    const rows = [];
+    let lastGroup;
+    let index = 0;
+    for (const it of items) {
+        if (it.group && it.group !== lastGroup)
+            rows.push({ kind: 'header', label: it.group });
+        lastGroup = it.group;
+        rows.push({ kind: 'item', item: it, index });
+        index++;
+    }
+    return rows;
+}
+/** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
+function nextActiveIndex(current, delta, items) {
+    const positions = [];
+    items.forEach((it, idx) => {
+        if (!it.disabled)
+            positions.push(idx);
+    });
+    if (positions.length === 0)
+        return -1;
+    const at = positions.indexOf(current);
+    if (at === -1)
+        return delta === 1 ? positions[0] : positions[positions.length - 1];
+    return positions[(at + delta + positions.length) % positions.length];
+}
+/** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
+function deriveMore(count, total, hasMoreProp) {
+    if (total > 0)
+        return { hasMore: count < total, remaining: Math.max(0, total - count) };
+    return { hasMore: hasMoreProp, remaining: 0 };
+}
+// Misma matemática que la virtualización de co-autocomplete / co-combobox.
+const VIRTUAL_ITEM_HEIGHT = 34;
+const VIRTUAL_VIEWPORT_ITEMS = 8;
+const VIRTUAL_OVERSCAN = 3;
+function virtualSlice(scrollTop, count) {
+    const totalHeight = count * VIRTUAL_ITEM_HEIGHT;
+    const startIdx = Math.max(0, Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN);
+    const endIdx = Math.min(count, startIdx + VIRTUAL_VIEWPORT_ITEMS + VIRTUAL_OVERSCAN * 2);
+    return { totalHeight, startIdx, endIdx, offsetY: startIdx * VIRTUAL_ITEM_HEIGHT };
+}
+
+const coOptionListCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-option-list{display:flex;flex-direction:column;gap:var(--co-spacing-sm);min-width:0}.co-option-list__search{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-md);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);color:var(--co-semantic-text-muted)}.co-option-list__search:focus-within{border-color:var(--co-semantic-border-focus)}.co-option-list__search-input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-semantic-text-default)}.co-option-list__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-option-list__options{max-height:240px;overflow-y:auto;overflow-x:hidden}.co-option-list__inner{display:flex;flex-direction:column;min-width:0}.co-option-list__option{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0;padding:var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);cursor:pointer;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default)}.co-option-list__option--active{background:var(--co-semantic-surface-hover)}.co-option-list__option--selected .co-option-list__label{font-weight:600}.co-option-list__option--disabled{opacity:0.5;cursor:not-allowed}.co-option-list__avatar,.co-option-list__icon{flex-shrink:0}.co-option-list__dot{flex-shrink:0;width:10px;height:10px;border-radius:var(--co-border-radius-full)}.co-option-list__text{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);flex:1;min-width:0}.co-option-list__title{display:flex;align-items:center;gap:var(--co-spacing-xs);min-width:0}.co-option-list__label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__suffix{color:var(--co-semantic-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.co-option-list__badge{flex-shrink:0;padding:0 var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);color:var(--co-semantic-on-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:16px}.co-option-list__desc{font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__match{color:var(--co-color-primary-azul);font-weight:700}.co-option-list__check{flex-shrink:0;color:var(--co-color-primary-verde)}.co-option-list__row-action{flex-shrink:0;display:inline-flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;color:var(--co-semantic-text-muted)}.co-option-list__row-action:hover{color:var(--co-semantic-text-default)}.co-option-list__group{padding:var(--co-spacing-sm) var(--co-spacing-sm) var(--co-spacing-xs);font-size:var(--co-font-size-11, 11px);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--co-semantic-text-muted)}.co-option-list__clear-row{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;border:0;background:transparent;padding:var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);cursor:pointer;text-align:left;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary)}.co-option-list__clear-row:hover{background:var(--co-semantic-surface-hover)}.co-option-list__loading,.co-option-list__loading-more{display:flex;justify-content:center;padding:var(--co-spacing-sm)}.co-option-list__empty{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md) var(--co-spacing-sm);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-option-list__more{padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);text-align:center}.co-option-list__option:focus-visible,.co-option-list__clear-row:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:-2px}`;
+
+const CoOptionList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coSearch = createEvent(this, "coSearch", 3);
+        this.coChange = createEvent(this, "coChange", 3);
+        this.coLoadMore = createEvent(this, "coLoadMore", 3);
+        this.coClearSelection = createEvent(this, "coClearSelection", 3);
+        this.coRemoveItem = createEvent(this, "coRemoveItem", 3);
+        // ── Data (controlada) ──────────────────────────────────────
+        /** JSON string o array de OptionListItem. */
+        this.items = '[]';
+        /** Selección actual: id single o JSON array de ids. */
+        this.value = '';
+        /** Display-items de la selección (para selected-first con ids fuera de página). */
+        this.selectedItems = '[]';
+        this.multiple = false;
+        /** Partición selected-first (snapshot al llamar snapshotOrder()). */
+        this.selectedFirst = false;
+        /** Afford. del seleccionado: check (combobox/autocomplete) o X deselect (ref-field). */
+        this.selectedAffordance = 'check';
+        /** Botón remove por fila seleccionada en multiple (tags de combobox). */
+        this.removableItems = false;
+        // ── Search integrado (opcional) ────────────────────────────
+        this.searchable = false;
+        this.searchPlaceholder = 'Search…';
+        this.searchDebounce = 350;
+        /** Pre-seed del término (modo convert de las celdas). */
+        this.initialTerm = '';
+        // ── Estados ────────────────────────────────────────────────
+        this.loading = false;
+        /** Total del server: deriva hasMore + hint "N more results". */
+        this.total = 0;
+        /** Fallback cuando el host no conoce totales (⌘K). total>0 manda. */
+        this.hasMore = false;
+        this.emptyMessage = 'No results found';
+        /** Si se setea y hay selección, fila "quitar selección" al tope. */
+        this.clearOptionLabel = '';
+        // ── Presentación ───────────────────────────────────────────
+        /** Lista virtualizada (autocomplete/combobox). Ignora `group`. */
+        this.virtual = false;
+        /** Resalta el match del término en los labels. */
+        this.highlightMatches = false;
+        /** Término externo para highlight (input en el host, p.ej. ⌘K). */
+        this.highlightTerm = '';
+        this.avatarShape = 'circle';
+        this.term = '';
+        this.activeIndex = -1;
+        this.scrollTop = 0;
+        /** Snapshot selected-first (ver snapshotOrder). */
+        this.sortSnapshot = new Set();
+        this.displaySnapshot = [];
+        /**
+         * Enter sobre un control real (footer, fila clear) activa ese control
+         * nativamente — nunca el highlight (regla heredada de CellRefPicker).
+         */
+        this.onRootKeyDown = (e) => {
+            var _a, _b;
+            if (e.key === 'Enter') {
+                const origin = (((_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0]) || e.target);
+                // `instanceof HTMLElement`, NO `Element`: el decorador `@Element` importado
+                // de `@stencil/core` arriba shadowea el nombre global `Element` en este
+                // módulo, así que `origin instanceof Element` referenciaría el decorador
+                // (siempre false / rompe el narrowing de TS) en vez del DOM Element.
+                if (origin instanceof HTMLElement && ((_b = origin.closest) === null || _b === void 0 ? void 0 : _b.call(origin, 'button:not(.co-option-list__option), co-list-footer')))
+                    return;
+            }
+            if (this.processKey(e.key))
+                e.preventDefault();
+        };
+        this.onSearchInput = (e) => {
+            const v = e.target.value;
+            this.term = v;
+            this.activeIndex = -1;
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
+        };
+        this.onNativeScroll = (e) => {
+            // Fallback pre-OverlayScrollbars (primer frame) — misma lógica.
+            const el = e.target;
+            this.scrollTop = el.scrollTop;
+            this.maybeLoadMore(el.scrollTop, el.clientHeight, el.scrollHeight);
+        };
+    }
+    // ── Parsed ─────────────────────────────────────────────────
+    get parsedItems() { return parseItems(this.items); }
+    get selectedIds() { return parseValue(this.value); }
+    get orderedItems() {
+        if (!this.selectedFirst)
+            return this.parsedItems;
+        return orderItems(this.parsedItems, this.sortSnapshot, this.displaySnapshot, !!this.term);
+    }
+    get effectiveHighlightTerm() {
+        if (!this.highlightMatches)
+            return '';
+        return this.searchable ? this.term : this.highlightTerm;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────
+    componentWillLoad() {
+        this.term = this.initialTerm || '';
+        this.takeSnapshot();
+    }
+    componentDidRender() {
+        // OverlayScrollbars sobre el contenedor; wrapper interno estable para que
+        // Stencil pueda seguir agregando filas (infinite scroll) sin pelear con
+        // la reestructuración de DOM de OS (patrón co-ref-field).
+        if (this.optionsEl && !this.osInstance) {
+            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => {
+                this.scrollTop = vp.scrollTop;
+                this.maybeLoadMore(vp.scrollTop, vp.clientHeight, vp.scrollHeight);
+            });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.osInstance = undefined;
+    }
+    onItemsChange() {
+        // Nueva página / nuevos resultados: si el highlight quedó fuera de rango, resetea.
+        if (this.activeIndex >= this.orderedItems.length)
+            this.activeIndex = -1;
+        // Clamp defensivo del scroll virtual: si la nueva lista es más corta que el
+        // scrollTop actual (p.ej. búsqueda que redujo drásticamente el resultset),
+        // reencuadra dentro de rango. NO resetear a 0 incondicionalmente — eso
+        // rompería el infinite scroll por append (la lista crece hacia abajo y el
+        // usuario sigue viendo su posición de scroll).
+        const maxScrollTop = Math.max(0, this.orderedItems.length * VIRTUAL_ITEM_HEIGHT - VIRTUAL_VIEWPORT_ITEMS * VIRTUAL_ITEM_HEIGHT);
+        if (this.scrollTop > this.orderedItems.length * VIRTUAL_ITEM_HEIGHT) {
+            this.scrollTop = maxScrollTop;
+        }
+    }
+    // ── Métodos públicos ───────────────────────────────────────
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
+    async snapshotOrder() {
+        this.takeSnapshot();
+    }
+    /**
+     * Enfoca el input de búsqueda esperando visibilidad real: el panel del host
+     * se vuelve visible frames después (showPopover/position en rAF) y focus()
+     * sobre subtree oculto es no-op silencioso. Reintenta ~20 frames.
+     */
+    async focusSearch() {
+        var _a, _b;
+        for (let i = 0; i < 20; i++) {
+            (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            if (this.searchInputEl && ((_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) === this.searchInputEl)
+                return;
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        }
+    }
+    /** Navegación para hosts con input externo. true = tecla consumida (host hace preventDefault). */
+    async handleKey(e) {
+        return this.processKey(e.key);
+    }
+    // ── Internos ───────────────────────────────────────────────
+    takeSnapshot() {
+        this.sortSnapshot = new Set(this.selectedIds);
+        const byId = new Map();
+        for (const it of parseItems(this.selectedItems))
+            byId.set(it._id, it);
+        for (const it of this.parsedItems)
+            if (!byId.has(it._id))
+                byId.set(it._id, it);
+        this.displaySnapshot = this.selectedIds
+            .map((id) => byId.get(id))
+            .filter(Boolean);
+    }
+    processKey(key) {
+        const items = this.orderedItems;
+        switch (key) {
+            case 'ArrowDown':
+                this.activeIndex = nextActiveIndex(this.activeIndex, 1, items);
+                this.scrollActiveIntoView();
+                return true;
+            case 'ArrowUp':
+                this.activeIndex = nextActiveIndex(this.activeIndex, -1, items);
+                this.scrollActiveIntoView();
+                return true;
+            case 'Enter': {
+                const item = items[this.activeIndex];
+                if (item && !item.disabled) {
+                    this.pick(item);
+                    return true;
+                }
+                return false;
+            }
+            default:
+                return false;
+        }
+    }
+    pick(item) {
+        if (this.multiple) {
+            const current = this.selectedIds;
+            const idx = current.indexOf(item._id);
+            const next = idx >= 0 ? current.filter((id) => id !== item._id) : [...current, item._id];
+            this.coChange.emit({ value: next, item });
+        }
+        else {
+            this.coChange.emit({ value: item._id, item });
+        }
+    }
+    maybeLoadMore(scrollTop, clientHeight, scrollHeight) {
+        if (this.loading)
+            return;
+        const { hasMore } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
+        if (hasMore && scrollTop + clientHeight >= scrollHeight - 40)
+            this.coLoadMore.emit();
+    }
+    scrollActiveIntoView() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(`co-optlist-${this.activeIndex}`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    // ── Render helpers ─────────────────────────────────────────
+    renderLeading(item) {
+        if (item.image || item.avatar) {
+            return (h("co-avatar", { class: "co-option-list__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: "xs", shape: this.avatarShape }));
+        }
+        if (item.color)
+            return h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
+        if (item.icon)
+            return h("co-icon", { name: item.icon, size: 16, class: "co-option-list__icon" });
+        return null;
+    }
+    renderLabelText(label) {
+        const term = this.effectiveHighlightTerm;
+        const seg = term ? highlightMatch(label, term) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, h("span", { class: "co-option-list__match" }, seg.match), seg.post];
+    }
+    renderRow(item, index, selectedIds) {
+        const isSelected = selectedIds.includes(item._id);
+        return (h("div", { class: {
+                'co-option-list__option': true,
+                'co-option-list__option--selected': isSelected,
+                'co-option-list__option--active': index === this.activeIndex,
+                'co-option-list__option--disabled': !!item.disabled,
+            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; } }, this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.pick(item); } }, h("co-icon", { name: "x-circle", size: 18, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+    }
+    renderVirtual(items, selectedIds) {
+        const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
+        return (h("div", { class: "co-option-list__spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, items.slice(startIdx, endIdx).map((item, i) => this.renderRow(item, startIdx + i, selectedIds)))));
+    }
+    render() {
+        const items = this.orderedItems;
+        const selectedIds = this.selectedIds;
+        const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
+        const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
+        return (h("div", { key: '2354775b63fe7419f03500639a66010c79e261d2', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '9621030007e83e7906dcd07f59deb7623a06ef66', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '9a28e5fa86aa8e0196a8efa47bb03ff361441d97', name: "magnifying-glass", size: 16 }), h("input", { key: 'd78d1a37d904811841e0077c07b74f8d6939848d', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '99335055c0ce9cef160ef84eaf0d85d79fc9ce17', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '716d4bd2d8fa07f6054c2b96eace6be78b2b07eb', class: "co-option-list__inner" }, showClear && (h("button", { key: '03eca612c006784e6d46ed0f4924b20c52582c75', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '2ea79932eb4d1e4aaec62cacbcb42aa008cbb5cf', name: "x-circle", size: 14 }), h("span", { key: '04348a03193f518a94aab87f95a885ff6ff10af6' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '5433843784a569c17ef7c2b51e82a4244f36d969', class: "co-option-list__loading" }, h("co-loader", { key: '52df16368ce659d2599b620affba0ca7715b7f3c', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f998f6dc92acf6e96c236e83e00d27cf837f5306', class: "co-option-list__empty" }, h("co-icon", { key: 'ebdaafcefda9a4502ecdb448d7b1a6bb89165484', name: "magnifying-glass", size: 20 }), h("span", { key: '6532f13666769f9496baa21348d709d08083f395' }, this.emptyMessage))), items.length > 0 && this.virtual
+            ? this.renderVirtual(items, selectedIds)
+            : buildRows(items).map((row) => row.kind === 'header'
+                ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'b2e4c16e8f39a96f1154101a755f9edf43ecb354', class: "co-option-list__loading-more" }, h("co-loader", { key: 'c4a5161d81ddf6d5a106d8fe484f60d3c83e37db', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '7adc44652a3c740e21e364d51fa69a96a654818c', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'bf2d4d336ef235d9213bf176403d30a7a899437b', name: "footer" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChange": 0
+            }]
+    }; }
+};
+CoOptionList.style = coOptionListCss();
+
+export { CoOptionList as co_option_list };

package/dist/esm/co-overlay.entry.js

@@ -1,20 +1,260 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
 
-const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-overlay--open{opacity:1;pointer-events:auto}`;
+// focusTrap.ts
+//
+// Focus-trap helpers for co-overlay. The Tab-cycling decision is a PURE function
+// (`resolveTabIndex`) so it can be unit-tested in a node env, mirroring the
+// `overlayAfterClose` split. The DOM query lives here too but is only invoked by
+// the component at runtime.
+/** CSS selector matching natively tabbable elements. */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Decide which focusable index a Tab / Shift+Tab keystroke should move to.
+ *
+ * @param count       number of focusable elements inside the trap
+ * @param activeIndex index of the currently focused element, or -1 when focus
+ *                    is outside the trap (e.g. it escaped to the body)
+ * @param shiftKey    whether Shift is held (backward tabbing)
+ * @returns the index to focus, or -1 when there is nothing to trap
+ *
+ * Pure — no DOM — so the wrap-around edge cases stay unit-testable.
+ */
+function resolveTabIndex(count, activeIndex, shiftKey) {
+    if (count <= 0)
+        return -1;
+    if (shiftKey) {
+        // Backward: from the first element (or from outside) wrap to the last.
+        return activeIndex <= 0 ? count - 1 : activeIndex - 1;
+    }
+    // Forward: from the last element (or from outside) wrap to the first.
+    return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
+}
+/**
+ * Collect the tabbable elements slotted into the overlay's light DOM, skipping
+ * hidden / aria-hidden ones. (Focusables nested inside further shadow roots are
+ * out of scope — the common dialog/modal content lives in the slotted subtree.)
+ */
+function getFocusableElements(root) {
+    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+    return nodes.filter((el) => !el.hasAttribute('disabled') &&
+        el.getAttribute('aria-hidden') !== 'true' &&
+        // offsetParent is null for display:none; getClientRects covers position:fixed.
+        (el.offsetParent !== null || el.getClientRects().length > 0));
+}
+
+const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;margin:0;border:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center;background:var(--co-overlay-bg, rgba(0, 0, 0, 0.4));-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-overlay--open{opacity:1;pointer-events:auto;transition:opacity 0.12s ease}`;
 
+/**
+ * Module-level body-scroll lock shared by every overlay instance.
+ * Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
+ * don't release the lock until the LAST one closes.
+ */
+let lockCount = 0;
+let savedOverflow = '';
+function lockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    lockCount++;
+}
+function unlockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0)
+        return;
+    lockCount--;
+    if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+    }
+}
+function nextFrame(cb) {
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(cb);
+    else
+        cb();
+}
 const CoOverlay = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coClose = createEvent(this, "coClose", 7);
+        this.coAfterClose = createEvent(this, "coAfterClose", 3);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 3);
         /** Whether the overlay is visible */
         this.open = false;
+        /**
+         * Opt-in accessible focus trap. When true, opening the overlay records the
+         * previously-focused element, moves focus into the overlay, cycles Tab /
+         * Shift+Tab within the slotted content, and restores focus on close.
+         * Default false → existing consumers are unchanged.
+         */
+        this.trapFocus = false;
+        /**
+         * Opt-in: emit `coClose` when Escape is pressed while open.
+         * Default false → existing consumers are unchanged.
+         */
+        this.closeOnEscape = false;
+        /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
+        this.hasLock = false;
         this.handleClick = () => {
             this.coClose.emit();
         };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.overlayEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'opacity');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(isOpen) {
+        if (isOpen)
+            this.acquireLock();
+        else
+            this.releaseLock();
+        this.syncPopover();
+        if (this.trapFocus) {
+            if (isOpen)
+                this.captureAndFocus();
+            else
+                this.restoreFocus();
+        }
+    }
+    componentDidLoad() {
+        // Handle the case where the overlay mounts already open.
+        if (this.open)
+            this.acquireLock();
+        this.syncPopover();
+        if (this.open && this.trapFocus)
+            this.captureAndFocus();
+    }
+    disconnectedCallback() {
+        // Safety: never leave the body locked if removed while open.
+        this.releaseLock();
+        // Safety: return focus if we were removed while trapping.
+        if (this.trapFocus)
+            this.restoreFocus();
+    }
+    acquireLock() {
+        if (this.hasLock)
+            return;
+        this.hasLock = true;
+        lockBodyScroll();
+    }
+    releaseLock() {
+        if (!this.hasLock)
+            return;
+        this.hasLock = false;
+        unlockBodyScroll();
+    }
+    /**
+     * Promote the scrim to the browser top layer so it covers the whole viewport
+     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
+     * reconciliation are untouched. No-ops gracefully where unsupported.
+     */
+    syncPopover() {
+        const el = this.overlayEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            const isShown = el.matches(':popover-open');
+            if (this.open && !isShown)
+                el.showPopover();
+            else if (!this.open && isShown)
+                el.hidePopover();
+        }
+        catch (_a) {
+            /* not connected yet, or already in the desired state */
+        }
+    }
+    /** Record the current focus and move it into the overlay (guarded by trapFocus). */
+    captureAndFocus() {
+        if (typeof document !== 'undefined') {
+            this.returnFocusEl = document.activeElement;
+        }
+        // Defer so slotted content / the open transition is ready to take focus.
+        nextFrame(() => {
+            var _a;
+            if (!this.open)
+                return;
+            const focusables = getFocusableElements(this.el);
+            if (focusables.length > 0)
+                focusables[0].focus();
+            else
+                (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    /** Restore focus to the element that had it before the trap engaged. */
+    restoreFocus() {
+        const target = this.returnFocusEl;
+        this.returnFocusEl = null;
+        if (target && typeof target.focus === 'function')
+            target.focus();
+    }
+    /** Deepest active element, descending through nested shadow roots. */
+    deepActiveElement() {
+        if (typeof document === 'undefined')
+            return null;
+        let node = document.activeElement;
+        while (node && node.shadowRoot && node.shadowRoot.activeElement) {
+            node = node.shadowRoot.activeElement;
+        }
+        return node;
+    }
+    handleKeydown(e) {
+        if (!this.open)
+            return;
+        if (this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+            return;
+        }
+        if (this.trapFocus && e.key === 'Tab')
+            this.trapTab(e);
+    }
+    trapTab(e) {
+        var _a;
+        const focusables = getFocusableElements(this.el);
+        if (focusables.length === 0) {
+            // Nothing to move to — keep focus pinned to the overlay container.
+            e.preventDefault();
+            (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const activeIndex = focusables.indexOf(this.deepActiveElement());
+        const nextIndex = resolveTabIndex(focusables.length, activeIndex, e.shiftKey);
+        if (nextIndex < 0)
+            return;
+        e.preventDefault();
+        focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '65b20d04a50324ef37a5a9f0ff726ead15d0d757', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, h("slot", { key: '64d6abebb8d812d4c638b14608ba2982aae43a19' })));
+        return (h("div", { key: 'da8d1cc91e1e1a6ae1b9c1bc9fea2aefb0e8170a', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '884c740ff55fc6c9d34ddbb996fad1f7ea058344' })));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
 };
 CoOverlay.style = coOverlayCss();
 

package/dist/esm/co-page-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, h } from './index-Es9IUmmt.js';
 
 const coPageHeaderCss = () => `:host{display:block}.co-page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-lg) var(--co-spacing-xl);font-family:var(--co-font-family-primary);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-page);min-height:72px;box-sizing:border-box}.co-page-header__left{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__icon{display:flex;color:var(--co-semantic-text-muted)}.co-page-header__title{font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default)}.co-page-header__actions{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__actions:empty{display:none}`;
 
@@ -7,7 +7,7 @@ const CoPageHeader = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'bb91fd19e0570998c5017cd5de3b6388c2e53a12', class: "co-page-header", part: "page-header" }, h("div", { key: 'efcaed2b33a7038f8a08deabde95c5891afa5f74', class: "co-page-header__left" }, this.icon && (h("span", { key: 'ef332057fc621d14195977fdec57c6d398646159', class: "co-page-header__icon" }, h("co-icon", { key: '1fffba2e767a51530c9489c7672532d9a653302d', name: this.icon, size: 24 }))), h("span", { key: 'cbc7c3d8a3088e5b4ea30af142c887a3ada7bed9', class: "co-page-header__title" }, h("slot", { key: '57a2fa4a291f96e31ba97bbdcc1104ca2dd1e275' }, this.heading))), h("div", { key: '11be9907895d13091a7e264aca84a383c3dcebcf', class: "co-page-header__actions" }, h("slot", { key: 'dd00a986940145d4afcb4f0fbd23a2edc02523e3', name: "actions" }))));
+        return (h("div", { key: '79bbf7064e2f72b992bc9c24bd3666071ef1cc7b', class: "co-page-header", part: "page-header" }, h("div", { key: '35aed98b3aaca45ffb20c9338e901f9d65f71fe0', class: "co-page-header__left" }, this.icon && (h("span", { key: '58c1c53d14b98c1731cd544c82a0e874a3da4e42', class: "co-page-header__icon" }, h("co-icon", { key: '882f34bd6a6cb1812f9e4f62cb35aed21a017212', name: this.icon, size: 24 }))), h("span", { key: '3bea48bca6b9d8ba5a539ed74bf505ae9c6cdd22', class: "co-page-header__title" }, h("slot", { key: 'ba1007a022068edbe53fa3903162564b23784f6e' }, this.heading))), h("div", { key: 'eb8127421713990cc25714a63ca0c450b22b3171', class: "co-page-header__actions" }, h("slot", { key: '631718ea4e974d946a185772c50abcf1b6128199', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();