@prolibu-suite/cobalt-core 0.3.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-loader_2.entry.js → co-overlay.entry.js}

@@ -1,35 +1,6 @@
-import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CYsftTKf.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 coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:#4285f4}.co-loader__ball--yellow{background-color:#fdbd00;animation-delay:0.4s}.co-loader__ball--red{background-color:#d4145a;animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
-
-const CoLoader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** Show the loader. When false the component renders nothing so it doesn't
-         *  hold layout space or run animations while hidden. */
-        this.visible = true;
-        /** Render as an absolute-positioned overlay over the nearest positioned
-         *  ancestor. When false (default) the loader is inline. */
-        this.overlay = false;
-        /** Size of the ball animation. `sm` ~42px wide for tight UI like dropdown
-         *  bodies; `md` (default) ~75px for drawers/boot; `lg` ~100px for big
-         *  empty screens. */
-        this.size = 'md';
-        /** Optional text label below the balls. Multi-line is supported. */
-        this.text = '';
-        /** CSS color for the overlay backdrop. Only applied when `overlay=true`. */
-        this.background = '';
-    }
-    render() {
-        if (!this.visible)
-            return null;
-        const style = this.overlay && this.background ? { background: this.background } : undefined;
-        return (h("div", { class: { 'co-loader': true, 'co-loader--overlay': this.overlay }, style: style, part: "root", role: "status", "aria-live": "polite" }, h("div", { class: "co-loader__balls", part: "balls" }, h("span", { class: "co-loader__ball co-loader__ball--blue" }), h("span", { class: "co-loader__ball co-loader__ball--yellow" }), h("span", { class: "co-loader__ball co-loader__ball--red" })), this.text && h("p", { class: "co-loader__text", part: "text" }, this.text)));
-    }
-};
-CoLoader.style = coLoaderCss();
-
 // focusTrap.ts
 //
 // Focus-trap helpers for co-overlay. The Tab-cycling decision is a PURE function
@@ -276,7 +247,7 @@ const CoOverlay = class {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: 'e6a474574b171c1f4f0b55b9165aa22ee7faa7f1', 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: '05a95bc4822c57de49137f2e604f4dbb54f81f9e' })));
+        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 {
@@ -287,4 +258,4 @@ const CoOverlay = class {
 };
 CoOverlay.style = coOverlayCss();
 
-export { CoLoader as co_loader, CoOverlay as co_overlay };
+export { CoOverlay as co_overlay };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.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: '94082a258b3c20350f34f90b90391d4cf461ad2a', class: "co-page-header", part: "page-header" }, h("div", { key: '72cb04b8ac9e97020df05332026ff1127530e0ef', class: "co-page-header__left" }, this.icon && (h("span", { key: 'dde04074f7fa038302ad6fb6e26b0d0ac14df708', class: "co-page-header__icon" }, h("co-icon", { key: '39543a724220ce8b0d67691aa9e96a5d107c70bb', name: this.icon, size: 24 }))), h("span", { key: '690582a7cd3feacd28142229a98f06afd1d5016e', class: "co-page-header__title" }, h("slot", { key: 'e5a836f061981b1126eff7b725ffc1047abadffd' }, this.heading))), h("div", { key: '80353c45ac8266f79b620561f79f1e724f877be8', class: "co-page-header__actions" }, h("slot", { key: '652ec6bc870096944d8795c873f3a5d0d41b3d89', 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();

package/dist/esm/co-phone-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
-import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
 import { r as rankByMatch, h as highlightMatch } from './normalizeText-CQY6Ul7q.js';
 
 /**
@@ -359,7 +359,7 @@ const CoPhoneField = class {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '2b0e81ff34e0fc215d538133304ee2fdc57a91c0', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '7630372c42ddefe001e05bdb31ce25b59beda0ca', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'c1b30a0d84adb6c127a5a8ef57e4d9764ac95fba', required: this.required }))), h("div", { key: '8e03e67dcee1e18b675e2738f5b6daaecb784c95', class: "co-phone-field__container" }, h("button", { key: 'ba6a5fa8800b01cf19683f3d3750330b5ba615f8', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '88a511099354fb3a5a87094ad42e9815442d645f', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'a90e81ed45d444462832bae8a557bfca650e9cf9', class: "co-phone-field__chevron" }, h("co-icon", { key: '6af34f6d60d89d2f361ed624c9d03a4a97154d70', name: "caret-down", size: 14 }))), h("input", { key: '64d0070a7acd9305fabcdcf251e295467800ca8c', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'bcd1d824b74774f1164bdd985d13154436529264', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '0d381b0c4bf154c3a360f2c8c18bd983183ed271', class: "co-phone-field__search" }, h("input", { key: '054fa9f9c5b9086e084f0f46382c8b8f5b282b21', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '3fad42562f19a689bc3f9ea630c93e07fd9bcb32', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'b9d4d6ab05c36a90aac5ba349f00ec3462ada032', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'c886b12e93267c884d33aa5145d69e71f0efac6a', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '21be6a8deca13c7ea80ffe55069762ccf16458fd', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: 'a716785bef2a754a09c502f13fcae90f7a8cb00e', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'ec550e1d699292885133c96effcb791541f649aa', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '61c864be67e0283a00db014b1cd2bb734c249a2d', required: this.required }))), h("div", { key: 'e019c16551cc205bf27e03cc7a4f91fb95ec07e7', class: "co-phone-field__container" }, h("button", { key: '58a0958e3e3240bcd68edcde4d2dc1de72ecaf33', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'ee75fbf56e703a88b6026244588d2da0f4ed1478', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '05b173aded9b5fd4cf2173c453c70d94ddb8dd00', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd7a543b4bedd61d7e6fdf88ae56cbf350fea31be', name: "caret-down", size: 14 }))), h("input", { key: '31e21dbce76c374dc8dd0c80919b7af0d8641375', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '8b5689485bba266776b988564a2b14602a80d9d4', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f4453a595520c177e5f1ef184737c3b25bf84939', class: "co-phone-field__search" }, h("input", { key: '5f85ac03bbd7dff3f8d9130ab1f0a4c23b5d327d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '97051407520f0ba0514c746064e813b033ae1594', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '6d19085b7a08978c42f05713de48c1bdf0b19dba', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '612cf27d01f0afda0fa75d58206114160dd61bcb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '910b4584c3a2df48e30d11894bba7fd8fbb7e03c', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
 import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-C2mZ7x_Y.js';
 
 const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;inset:auto;top:0;left:0;margin:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:visible}.co-popover__panel--positioned{visibility:visible}`;
@@ -220,13 +220,13 @@ const CoPopover = class {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'aaf34bcc1d71dc54e84c8d24da8c78caa877a12f', class: "co-popover" }, h("div", { key: '0403dfeb0a0fa0e8f9517269b15066dc595c9856', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '6465139ca15b877bd38c4d60beebb82617d34dfe', name: "trigger" })), this.open && (h("div", { key: '7afe0527d6c666f3a1cf71be22fe4b726eddda8d', class: "co-popover__panel", popover: "manual", ref: (el) => {
+        return (h("div", { key: '1d797487362744cb7d90dd47f428ee1dd859abfa', class: "co-popover" }, h("div", { key: 'ab088b70a9f179a3ea98378fe6004f7e7ba7634a', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'a087953350db65b6671466b136f8fad5dee9dba0', name: "trigger" })), this.open && (h("div", { key: 'a951cb121f3b258b51a90ee75450d555e87f3eb0', class: "co-popover__panel", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: 'e0dff9e87e8e1e4124ae1bbf2100e29972b9e8ee' })))));
+            } }, h("slot", { key: 'dc00cee702a8162705b7891684b0765400289bb4' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-progress-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { r as registerInstance, h } from './index-Es9IUmmt.js';
 
 const coProgressBarCss = () => `:host{display:block;width:100%}.co-progress-bar{width:100%;border-radius:9999px;overflow:hidden;background:var(--co-semantic-border-subtle);position:relative}.co-progress-bar__fill{height:100%;border-radius:9999px;transition:width 0.3s ease}.co-progress-bar--solid .co-progress-bar__fill{background:var(--co-semantic-status-info)}.co-progress-bar--solid.co-progress-bar--success .co-progress-bar__fill{background:var(--co-semantic-status-success)}.co-progress-bar--solid.co-progress-bar--warning .co-progress-bar__fill{background:var(--co-semantic-status-warning)}.co-progress-bar--solid.co-progress-bar--error .co-progress-bar__fill{background:var(--co-semantic-status-error)}.co-progress-bar--dashed{background:transparent;border:2px dashed var(--co-semantic-border-subtle)}.co-progress-bar--dashed .co-progress-bar__fill{background:transparent;border-bottom:2px dashed var(--co-semantic-status-info);border-radius:0}.co-progress-bar--dashed.co-progress-bar--success .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-success)}.co-progress-bar--dashed.co-progress-bar--warning .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-warning)}.co-progress-bar--dashed.co-progress-bar--error .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-error)}.co-progress-bar--dashed.co-progress-bar--default{border-color:var(--co-semantic-border-muted)}.co-progress-bar--indeterminate .co-progress-bar__fill{width:40%;transition:none;animation:co-progress-indeterminate 1.4s ease-in-out infinite;will-change:transform}@keyframes co-progress-indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}@media (prefers-reduced-motion: reduce){.co-progress-bar--indeterminate .co-progress-bar__fill{animation:none;width:100%;opacity:0.45}}`;
 
@@ -19,12 +19,12 @@ const CoProgressBar = class {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: '3063137d53e16044d3a0e7eaf9297c33955494f2', class: {
+        return (h("div", { key: 'b86a49eb2bc74a2af69f887296cde9e303d1a39b', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '171a08b832dd1f9430947e0b39b516b4d3580454', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: 'b18869a713977e9a3b6c08e439fb83438cfd6bb8', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
 };
 CoProgressBar.style = coProgressBarCss();

package/dist/esm/co-progress-circle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { r as registerInstance, h } from './index-Es9IUmmt.js';
 
 const coProgressCircleCss = () => `:host{display:inline-flex}.co-progress-circle{--_color:var(--co-semantic-status-info, #2563eb);--_track:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(     var(--_color) var(--co-pc-angle, 0deg),     var(--_track) var(--co-pc-angle, 0deg)   );transition:background 0.3s ease}.co-progress-circle__track{position:absolute;inset:var(--co-pc-stroke, 4px);border-radius:50%;background:var(--co-semantic-surface-page, #fff)}.co-progress-circle__label{position:relative;z-index:1;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-11, 11px);font-weight:600;color:var(--_color);line-height:1;pointer-events:none}.co-progress-circle--success{--_color:var(--co-semantic-status-success, #0a7724)}.co-progress-circle--warning{--_color:var(--co-semantic-status-warning, #f59e0b)}.co-progress-circle--error{--_color:var(--co-semantic-status-error, #aa2e1b)}`;
 
@@ -20,7 +20,7 @@ const CoProgressCircle = class {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: 'ad0b74fe0dd46308522c36190ceb783f0bbed1d2', class: {
+        return (h("div", { key: '68787ff3019b10ef8fbdadedf955421b775e8f99', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -28,7 +28,7 @@ const CoProgressCircle = class {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '353a9fe4a7d736884cdc51f30320c505cceb3e75', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '38577ffe98963aa7bc3a6a1eb9b7178fe32d2435', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '3d3af85f0b7ae4b4e59952989310269bd0b3fb36', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '00d943f501f90a4d03d0346f324e5c8f458fd22c', class: "co-progress-circle__label" }, clamped, "%"))));
     }
 };
 CoProgressCircle.style = coProgressCircleCss();

package/dist/esm/co-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
 
 const coRadioGroupCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-radio-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-radio-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-radio-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-radio-group--disabled .co-radio-group__label,.co-radio-group--disabled .co-radio-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-radio-group__options{display:flex;gap:var(--co-spacing-md)}.co-radio-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-radio-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-radio-group__item--disabled{cursor:not-allowed}.co-radio-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-radio-group__item--disabled .co-radio-group__option-label{color:var(--co-semantic-text-disabled)}.co-radio-group__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio-group__circle--small{width:16px;height:16px}.co-radio-group__circle--large{width:24px;height:24px}.co-radio-group__circle:not(.co-radio-group__circle--checked){border-color:var(--co-semantic-border-default)}.co-radio-group__circle--checked{border-color:var(--co-semantic-border-strong)}.co-radio-group__circle--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio-group__circle--small.co-radio-group__circle--checked::after{width:8px;height:8px}.co-radio-group__circle--large.co-radio-group__circle--checked::after{width:14px;height:14px}.co-radio-group__circle--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-radio-group--error .co-radio-group__circle{border-color:var(--co-semantic-status-error)}.co-radio-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-radio-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-radio-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-radio-group__helper--error .co-radio-group__helper-icon,.co-radio-group__helper--error .co-radio-group__helper-text{color:var(--co-semantic-status-error)}.co-radio-group__helper--success .co-radio-group__helper-icon,.co-radio-group__helper--success .co-radio-group__helper-text{color:var(--co-semantic-status-success)}.co-radio-group__helper--warning .co-radio-group__helper-icon,.co-radio-group__helper--warning .co-radio-group__helper-text{color:var(--co-color-status-review)}.co-radio-group__helper--info .co-radio-group__helper-icon,.co-radio-group__helper--info .co-radio-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-radio-group{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-radio-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-radio-group__label{white-space:normal}:host([layout='horizontal']) .co-radio-group>:not(.co-radio-group__labels){grid-column:2;min-width:0}`;
 
@@ -64,11 +64,11 @@ const CoRadioGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: '0e910e8b8153eb1c4b682c7c26bc16cfafb6463d', class: {
+        return (h("div", { key: '94c29c15e32e8ad2e1640641102d141882fed7e2', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'cebc4c3acac2417594f750c73391e4a3fee8572b', class: "co-radio-group__labels" }, this.label && h("span", { key: 'e84c1a5f7a271b7df1954e3bba2f3269775ec8f1', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '147d8b0a1f683e858477aee31c5b6327cc790ca4', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '347b5812da74b9cfade755d0d8dff71741e2d81e', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '219064f62b47c4f6945c694215ed239543ae7a20', class: "co-radio-group__labels" }, this.label && h("span", { key: '73ad6a795fb79c6a61adbd7caf99d66a2097f2a4', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '0a7300369de028245ef04ef7f758ee6b98605b60', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '89eea55b445a648926923b019abd793f7c622f94', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -83,7 +83,7 @@ const CoRadioGroup = class {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: 'aa1712f70c7bce863f7c158509b2f8f09d8d94a1', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1a1f09846bdd43461c4fe280f97621ef08ae9dbb', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'bb624ad1a942d22e0c6fa296d4d59b6f3d04061d', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: 'f30ed296f217352dbb4402b5679d791d0adf0b07', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '831a33a28dbfff0306c3da3b7d89fb688522f2af', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: '96412549d5a05ab07c40e5a24bfd954403856c6d', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{