@prolibu-suite/cobalt-core 0.9.0 → 0.9.2

package/dist/collection/components/co-emoji-picker/co-emoji-picker.js

@@ -0,0 +1,682 @@
+import { h } from "@stencil/core";
+import { EMOJI_CATEGORY_ICONS, getEmojiStrings } from "../../utils/emojiI18n";
+import { langFromLocale } from "../../utils/dateI18n";
+import { EMOJI_CATEGORIES } from "./emojiData";
+import { RECENT_CATEGORY, ROW_HEIGHT, SKIN_TONE_KEYS, applySkinTone, buildPositionMap, buildRecentEntries, categoryAtRow, categoryRowStarts, displayName, getEmojiEntries, hasLocalePack, layoutRows, loadLocaleNames, moveActive, searchEmojis, toneFromKey, virtualSlice, } from "./emojiPickerLogic";
+const NAV_KEYS = [
+    'ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp',
+];
+/**
+ * Selector de emoji: buscador + strip de categorías + grilla virtualizada.
+ *
+ * Es un PRIMITIVO de panel, igual que co-option-list: no renderiza trigger ni
+ * chrome (popover/dialog/ancho). El host lo compone — típicamente dentro de un
+ * `<co-popover>` colgado de su propio botón.
+ *
+ * Dataset: 1906 emoji del set RGI, empaquetados como texto (~16 KB gz). Los
+ * nombres localizados (es/pt) se cargan con `import()` dinámico solo cuando el
+ * `locale` los pide; en inglés no se descargan nunca.
+ *
+ * @event coSelect - El emoji elegido: `{ emoji, name }`.
+ * @event coClose - Escape con el buscador vacío (el host decide si cierra).
+ */
+export class CoEmojiPicker {
+    constructor() {
+        /** Placeholder del buscador. Vacío = el del `locale`. */
+        this.searchPlaceholder = '';
+        /** Mensaje de "sin resultados". Vacío = el del `locale`. */
+        this.emptyMessage = '';
+        /** aria-label del panel. Vacío = el del `locale`. */
+        this.label = '';
+        /** Muestra el buscador. */
+        this.searchable = true;
+        /** Muestra el strip de categorías. */
+        this.showCategories = true;
+        /** Columnas de la grilla. */
+        this.columns = 8;
+        /**
+         * Tono de piel aplicado a toda la grilla: `''` (por defecto) | `'light'` |
+         * `'medium-light'` | `'medium'` | `'medium-dark'` | `'dark'`.
+         *
+         * Es `mutable`: el componente la actualiza al elegir un tono para que funcione
+         * suelto, y emite `coSkinToneChange`. La PERSISTENCIA es del consumidor —
+         * Cobalt no escribe storage (ver el comentario de `recent`).
+         */
+        this.skinTone = '';
+        /**
+         * Emoji usados recientemente, del más nuevo al más viejo. Se pintan como una
+         * categoría propia al tope de la grilla; con la lista vacía la categoría no
+         * existe (ni fila, ni header, ni botón en el strip).
+         *
+         * El historial lo posee el CONSUMIDOR, igual que el tono. Ningún componente de
+         * Cobalt escribe `localStorage`: el design system no conoce el scope de la
+         * preferencia (¿por usuario? ¿por workspace? ¿sincronizada al backend?) y
+         * escribir por su cuenta le impondría esa decisión a toda la suite. El
+         * consumidor recibe `coSelect` y actualiza esta prop; `pushRecent()` de
+         * `emojiPickerLogic` implementa la política MRU si no la quiere reescribir.
+         *
+         * Es RECIENTES (orden temporal), no "frecuentes" (por conteo): lo último que
+         * usaste queda primero, sin contadores que se calcifiquen arriba con el uso.
+         */
+        this.recent = [];
+        /** Tope de emoji recientes mostrados. */
+        this.recentLimit = 16;
+        this.term = '';
+        this.activeIndex = -1;
+        this.scrollTop = 0;
+        this.viewportHeight = ROW_HEIGHT * 8;
+        /** Nombres localizados, o null mientras carga / si el locale no tiene pack. */
+        this.localeNames = null;
+        /** Fila de tonos desplegada. */
+        this.toneOpen = false;
+        /** Descarta un pack que llegó tarde tras cambiar de locale. */
+        this.localeToken = 0;
+        /** Evita que el foco vuelva al toggle si el cierre vino de un click afuera. */
+        this.restoreToneFocus = false;
+        /** Memo del layout — ver el getter `view`. */
+        this.viewCache = null;
+        /** Manda el foco al tono activo en el render que sigue a abrir la fila. */
+        this.pendingToneFocus = false;
+        // ── Interacción ───────────────────────────────────────────
+        this.handleInput = (e) => {
+            this.term = e.target.value;
+            // La grilla cambia por completo: el activo viejo ya no existe.
+            this.activeIndex = -1;
+            this.scrollTop = 0;
+            if (this.scrollEl)
+                this.scrollEl.scrollTop = 0;
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                // Escape acota: la fila de tonos abierta se cierra primero, después la
+                // búsqueda, y recién con todo limpio se le avisa al host.
+                if (this.toneOpen) {
+                    this.restoreToneFocus = true;
+                    this.toneOpen = false;
+                }
+                else if (this.term) {
+                    this.term = '';
+                    this.activeIndex = -1;
+                }
+                else {
+                    this.coClose.emit();
+                }
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                const entry = this.view.entries.find((x) => x.index === this.activeIndex);
+                // Space sin celda activa es un espacio legítimo dentro del buscador.
+                if (!entry)
+                    return;
+                e.preventDefault();
+                this.select(entry);
+                return;
+            }
+            if (!NAV_KEYS.includes(e.key))
+                return;
+            const rows = this.rows;
+            const next = moveActive(rows, buildPositionMap(rows), this.activeIndex, e.key);
+            if (next < 0)
+                return;
+            e.preventDefault();
+            this.activeIndex = next;
+            this.scrollActiveIntoView(rows, next);
+        };
+        this.handleScroll = () => {
+            if (this.scrollEl)
+                this.scrollTop = this.scrollEl.scrollTop;
+        };
+        // ── Tono de piel ──────────────────────────────────────────
+        this.toggleTones = () => {
+            this.toneOpen = !this.toneOpen;
+            if (this.toneOpen)
+                this.pendingToneFocus = true;
+        };
+        /** Teclado de la fila de tonos: flechas entre opciones, Escape vuelve al
+         *  toggle. Corta la propagación porque el panel entero escucha keydown para
+         *  navegar la grilla — sin esto, una flecha acá también movería la selección. */
+        this.handleToneKeyDown = (e, i) => {
+            var _a;
+            const keys = ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape'];
+            if (!keys.includes(e.key))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.key === 'Escape') {
+                this.restoreToneFocus = true;
+                this.toneOpen = false;
+                return;
+            }
+            const last = SKIN_TONE_KEYS.length - 1;
+            const next = e.key === 'Home' ? 0
+                : e.key === 'End' ? last
+                    : e.key === 'ArrowRight' || e.key === 'ArrowDown' ? Math.min(last, i + 1)
+                        : Math.max(0, i - 1);
+            const el = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-tone-index="${next}"]`);
+            el === null || el === void 0 ? void 0 : el.focus();
+        };
+        this.jumpToCategory = (category) => {
+            var _a;
+            // El strip navega el dataset completo; con una búsqueda activa hay que
+            // volver a idle o la categoría podría no estar en los resultados.
+            if (this.term) {
+                this.term = '';
+                this.activeIndex = -1;
+            }
+            // Las filas se recalculan con el término ya limpio.
+            const row = categoryRowStarts(this.rows).get(category);
+            if (row === undefined || !this.scrollEl)
+                return;
+            this.scrollEl.scrollTop = row * ROW_HEIGHT;
+            this.scrollTop = row * ROW_HEIGHT;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    // ── Ciclo de vida ─────────────────────────────────────────
+    componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Semilla explícita del estado (mismo patrón que co-option-list, que
+        // asigna `this.term` acá en vez de confiar en el inicializador de campo).
+        // El entorno de spec de @stencil/vitest NO aplica los inicializadores de
+        // los miembros decorados —ni de @State ni de los defaults de @Prop—, así
+        // que sin esto el primer render ve `undefined`. En el build real es una
+        // reasignación inocua.
+        (_a = this.term) !== null && _a !== void 0 ? _a : (this.term = '');
+        (_b = this.activeIndex) !== null && _b !== void 0 ? _b : (this.activeIndex = -1);
+        (_c = this.scrollTop) !== null && _c !== void 0 ? _c : (this.scrollTop = 0);
+        (_d = this.viewportHeight) !== null && _d !== void 0 ? _d : (this.viewportHeight = ROW_HEIGHT * 8);
+        (_e = this.toneOpen) !== null && _e !== void 0 ? _e : (this.toneOpen = false);
+        (_f = this.skinTone) !== null && _f !== void 0 ? _f : (this.skinTone = '');
+        (_g = this.recentLimit) !== null && _g !== void 0 ? _g : (this.recentLimit = 16);
+        this.syncLocaleNames();
+    }
+    componentDidLoad() {
+        this.measureViewport();
+        if (typeof ResizeObserver !== 'undefined' && this.scrollEl) {
+            this.resizeObserver = new ResizeObserver(() => this.measureViewport());
+            this.resizeObserver.observe(this.scrollEl);
+        }
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        // El foco sigue a la fila de tonos: al abrir va al tono activo, al cerrar
+        // vuelve al toggle. Sin esto, cerrar con Escape deja el foco en un botón
+        // que ya no está en el DOM y el navegador lo manda al <body>.
+        if (this.toneOpen && this.pendingToneFocus) {
+            this.pendingToneFocus = false;
+            const i = Math.max(0, SKIN_TONE_KEYS.indexOf(this.skinTone));
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-tone-index="${i}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (!this.toneOpen && this.restoreToneFocus) {
+            this.restoreToneFocus = false;
+            (_c = this.toneToggleEl) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    onLocaleChange() {
+        this.syncLocaleNames();
+    }
+    /** Carga (o descarta) el pack de nombres del locale activo. */
+    syncLocaleNames() {
+        const lang = langFromLocale(this.locale);
+        const token = ++this.localeToken;
+        // Hasta que el pack llegue (o si no hay), los nombres son los ingleses.
+        this.localeNames = null;
+        if (!hasLocalePack(lang))
+            return;
+        loadLocaleNames(lang).then((names) => {
+            // Otro cambio de locale ganó la carrera → el pack viejo se descarta.
+            if (token === this.localeToken)
+                this.localeNames = names;
+        });
+    }
+    measureViewport() {
+        var _a;
+        const h = (_a = this.scrollEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        if (h && h !== this.viewportHeight)
+            this.viewportHeight = h;
+    }
+    // ── Derivados ─────────────────────────────────────────────
+    get strings() {
+        return getEmojiStrings(this.locale);
+    }
+    get grouped() {
+        return !this.term.trim();
+    }
+    /** Modificador Unicode del tono activo ('' = por defecto). */
+    get tone() {
+        return toneFromKey(this.skinTone);
+    }
+    /**
+     * Entradas + layout de la vista actual, memoizados.
+     *
+     * `render()` corre en CADA tick de scroll (handleScroll escribe scrollTop), y
+     * rearmar el layout ahí significaba recorrer los 1906 emoji y construir ~240
+     * objetos de fila por frame. La clave cubre todo lo que cambia el layout; el
+     * tono NO entra: solo afecta el glifo que pinta la celda, no su posición.
+     */
+    get view() {
+        var _a;
+        const grouped = this.grouped;
+        const recentEntries = grouped ? buildRecentEntries(this.recent, this.recentLimit) : [];
+        const key = [
+            this.term,
+            this.columns,
+            this.localeToken,
+            this.localeNames ? 1 : 0,
+            recentEntries.map((e) => e.char).join(''),
+        ].join('\u0000');
+        if (((_a = this.viewCache) === null || _a === void 0 ? void 0 : _a.key) === key)
+            return this.viewCache;
+        const entries = grouped
+            ? [...recentEntries, ...getEmojiEntries()]
+            : searchEmojis(getEmojiEntries(), this.term, this.localeNames);
+        const rows = layoutRows(entries, this.columns, grouped);
+        this.viewCache = { key, entries, rows };
+        return this.viewCache;
+    }
+    get rows() {
+        return this.view.rows;
+    }
+    /** Mantiene la celda activa dentro del viewport virtualizado. Se hace con
+     *  matemática de filas y no con `scrollIntoView`: la celda puede no estar
+     *  montada todavía (está fuera de la ventana virtual). */
+    scrollActiveIntoView(rows, index) {
+        const pos = buildPositionMap(rows).get(index);
+        if (!pos || !this.scrollEl)
+            return;
+        const top = pos.row * ROW_HEIGHT;
+        const bottom = top + ROW_HEIGHT;
+        const view = this.scrollEl.scrollTop;
+        if (top < view)
+            this.scrollEl.scrollTop = top;
+        else if (bottom > view + this.viewportHeight)
+            this.scrollEl.scrollTop = bottom - this.viewportHeight;
+    }
+    select(entry) {
+        this.coSelect.emit({
+            emoji: this.charOf(entry),
+            name: displayName(entry, this.localeNames),
+        });
+    }
+    /** Glifo final de una entrada: el tono activo aplicado si lo soporta. Las
+     *  entradas de recientes ya vienen resueltas (tone '0') y salen tal cual. */
+    charOf(entry) {
+        return applySkinTone(entry.char, entry.tone, this.tone);
+    }
+    chooseTone(key) {
+        if (key !== this.skinTone) {
+            this.skinTone = key;
+            this.coSkinToneChange.emit({ skinTone: key });
+        }
+        this.restoreToneFocus = true;
+        this.toneOpen = false;
+    }
+    // ── Render ────────────────────────────────────────────────
+    renderCell(entry, fallbackTabIndex) {
+        const active = entry.index === this.activeIndex;
+        const name = displayName(entry, this.localeNames);
+        // Roving tabindex: UNA sola celda tabbable. Con activo, esa; sin activo, la
+        // primera de la grilla (`fallbackTabIndex`) — no todas las montadas, o la
+        // grilla metería ~100 paradas de tab en el recorrido de la página.
+        const tabbable = this.searchable
+            ? false
+            : active || (this.activeIndex < 0 && entry.index === fallbackTabIndex);
+        return (h("button", { type: "button", key: entry.index, id: CoEmojiPicker.cellId(entry.index), class: { 'co-emoji-picker__cell': true, 'co-emoji-picker__cell--active': active }, role: "option", "aria-selected": active ? 'true' : 'false', "aria-label": name, title: name,
+            // El foco vive en el buscador (patrón combobox + aria-activedescendant);
+            // sin buscador la grilla toma roving tabindex para seguir siendo operable.
+            tabIndex: tabbable ? 0 : -1, onFocus: () => {
+                if (!this.searchable)
+                    this.activeIndex = entry.index;
+            },
+            // El hover se resalta SOLO por CSS (:hover). Escribirlo a @State
+            // re-renderizaba la ventana entera (~100 botones) en cada mousemove, y
+            // además ensuciaba aria-activedescendant, que debe seguir al teclado.
+            onClick: () => this.select(entry) }, h("span", { class: "co-emoji-picker__glyph", "aria-hidden": "true" }, this.charOf(entry))));
+    }
+    /** Botón de tono + fila desplegable. La fila es un `radiogroup` con roving
+     *  tabindex: una sola parada de tab, flechas para moverse. */
+    renderTones() {
+        var _a;
+        const s = this.strings;
+        const current = Math.max(0, SKIN_TONE_KEYS.indexOf(this.skinTone));
+        const currentName = (_a = s.skinTones[current]) !== null && _a !== void 0 ? _a : '';
+        return (h("div", { class: "co-emoji-picker__tones", part: "tones" }, h("button", { type: "button", class: "co-emoji-picker__tone-toggle", "aria-label": `${s.skinToneLabel}: ${currentName}`, "aria-expanded": this.toneOpen ? 'true' : 'false', "aria-haspopup": "true", title: s.skinToneLabel, ref: (el) => (this.toneToggleEl = el), onClick: this.toggleTones }, h("span", { "aria-hidden": "true" }, applySkinTone('\u{270B}', '1', this.tone))), this.toneOpen && (h("div", { class: "co-emoji-picker__tone-row", role: "radiogroup", "aria-label": s.skinToneLabel }, SKIN_TONE_KEYS.map((key, i) => {
+            var _a, _b;
+            const selected = key === this.skinTone;
+            return (h("button", { type: "button", key: key || 'default', "data-tone-index": i, class: {
+                    'co-emoji-picker__tone': true,
+                    'co-emoji-picker__tone--selected': selected,
+                }, role: "radio", "aria-checked": selected ? 'true' : 'false', "aria-label": (_a = s.skinTones[i]) !== null && _a !== void 0 ? _a : key, title: (_b = s.skinTones[i]) !== null && _b !== void 0 ? _b : key, tabIndex: selected ? 0 : -1, onKeyDown: (e) => this.handleToneKeyDown(e, i), onClick: () => this.chooseTone(key) }, h("span", { "aria-hidden": "true" }, applySkinTone('\u{270B}', '1', toneFromKey(key)))));
+        })))));
+    }
+    renderRows(rows) {
+        const { totalHeight, start, end, offsetY } = virtualSlice(this.scrollTop, this.viewportHeight, rows.length);
+        const { categories } = this.strings;
+        // Primera celda del layout COMPLETO (no de la ventana): es la que sostiene
+        // el tab-stop mientras no haya celda activa.
+        const firstRow = rows.find((r) => r.kind === 'emoji');
+        const firstIndex = (firstRow === null || firstRow === void 0 ? void 0 : firstRow.kind) === 'emoji' ? firstRow.entries[0].index : -1;
+        return (h("div", { class: "co-emoji-picker__sizer", style: { height: `${totalHeight}px` } }, h("div", { class: "co-emoji-picker__window", style: { transform: `translateY(${offsetY}px)` } }, rows.slice(start, end).map((row, i) => {
+            var _a;
+            return row.kind === 'header' ? (h("div", { class: "co-emoji-picker__section", key: `h-${start + i}`, role: "presentation" }, (_a = categories[row.category]) !== null && _a !== void 0 ? _a : row.category)) : (h("div", { class: "co-emoji-picker__row", key: `r-${start + i}`, role: "presentation" }, row.entries.map((entry) => this.renderCell(entry, firstIndex))));
+        }))));
+    }
+    render() {
+        const s = this.strings;
+        const rows = this.rows;
+        const isEmpty = rows.length === 0;
+        const activeCategory = this.grouped
+            ? categoryAtRow(rows, Math.floor(this.scrollTop / ROW_HEIGHT))
+            : null;
+        const activeCellId = this.activeIndex >= 0 ? CoEmojiPicker.cellId(this.activeIndex) : undefined;
+        // La categoría de recientes solo existe si hay historial que mostrar: con la
+        // lista vacía no hay botón fantasma en el strip ni hueco en la grilla. Se
+        // decide sobre la prop cruda y no sobre la vista, así el strip no cambia de
+        // ancho al empezar a buscar (saltar a una categoría ya limpia la búsqueda).
+        const hasRecent = buildRecentEntries(this.recent, this.recentLimit).length > 0;
+        const stripCategories = hasRecent
+            ? [RECENT_CATEGORY, ...EMOJI_CATEGORIES]
+            : [...EMOJI_CATEGORIES];
+        return (h("div", { key: '7f3da124283afb57ac05c388746d07a7f63a0eca', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'eb4efeeed738dc094f155bc7bdc907e3075c2dad', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '042c32db076e3628e9459304f12304c7c3d85ae9', name: "magnifying-glass", size: 16 }), h("input", { key: '21c74e3a55e9b332061e73812cff512807afaabc', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '7b08cac53699f975e7f331e91700f6182d208cab', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
+            var _a, _b;
+            const name = (_a = s.categories[category]) !== null && _a !== void 0 ? _a : category;
+            return (h("button", { type: "button", key: category, class: {
+                    'co-emoji-picker__category': true,
+                    'co-emoji-picker__category--active': category === activeCategory,
+                }, "aria-label": name, "aria-current": category === activeCategory ? 'true' : undefined, title: name, onClick: () => this.jumpToCategory(category) }, h("co-icon", { name: (_b = EMOJI_CATEGORY_ICONS[category]) !== null && _b !== void 0 ? _b : 'circle', size: 16 })));
+        }))), h("div", { key: '349078ee46f1833797620c5c97da23807b7db384', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
+    }
+    static get is() { return "co-emoji-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-emoji-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-emoji-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale de los textos de UI y de los nombres de emoji ('es' | 'en' | 'pt')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder del buscador. Vac\u00EDo = el del `locale`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "''"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensaje de \"sin resultados\". Vac\u00EDo = el del `locale`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del panel. Vac\u00EDo = el del `locale`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el buscador."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "searchable",
+                "defaultValue": "true"
+            },
+            "showCategories": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el strip de categor\u00EDas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-categories",
+                "defaultValue": "true"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columnas de la grilla."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "8"
+            },
+            "skinTone": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tono de piel aplicado a toda la grilla: `''` (por defecto) | `'light'` |\n`'medium-light'` | `'medium'` | `'medium-dark'` | `'dark'`.\n\nEs `mutable`: el componente la actualiza al elegir un tono para que funcione\nsuelto, y emite `coSkinToneChange`. La PERSISTENCIA es del consumidor \u2014\nCobalt no escribe storage (ver el comentario de `recent`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "skin-tone",
+                "defaultValue": "''"
+            },
+            "recent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emoji usados recientemente, del m\u00E1s nuevo al m\u00E1s viejo. Se pintan como una\ncategor\u00EDa propia al tope de la grilla; con la lista vac\u00EDa la categor\u00EDa no\nexiste (ni fila, ni header, ni bot\u00F3n en el strip).\n\nEl historial lo posee el CONSUMIDOR, igual que el tono. Ning\u00FAn componente de\nCobalt escribe `localStorage`: el design system no conoce el scope de la\npreferencia (\u00BFpor usuario? \u00BFpor workspace? \u00BFsincronizada al backend?) y\nescribir por su cuenta le impondr\u00EDa esa decisi\u00F3n a toda la suite. El\nconsumidor recibe `coSelect` y actualiza esta prop; `pushRecent()` de\n`emojiPickerLogic` implementa la pol\u00EDtica MRU si no la quiere reescribir.\n\nEs RECIENTES (orden temporal), no \"frecuentes\" (por conteo): lo \u00FAltimo que\nusaste queda primero, sin contadores que se calcifiquen arriba con el uso."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "recentLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tope de emoji recientes mostrados."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-limit",
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "term": {},
+            "activeIndex": {},
+            "scrollTop": {},
+            "viewportHeight": {},
+            "localeNames": {},
+            "toneOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coSelect",
+                "name": "coSelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido al elegir un emoji. `emoji` ya viene con el tono aplicado."
+                },
+                "complexType": {
+                    "original": "{ emoji: string; name: string }",
+                    "resolved": "{ emoji: string; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coSkinToneChange",
+                "name": "coSkinToneChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido al cambiar el tono de piel \u2014 el consumidor lo persiste."
+                },
+                "complexType": {
+                    "original": "{ skinTone: string }",
+                    "resolved": "{ skinTone: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido con Escape y el buscador ya vac\u00EDo."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "onLocaleChange"
+            }];
+    }
+}
+/**
+ * Ids del shadow root de ESTA instancia (constantes, no aleatorios: los
+ * shadow roots no comparten espacio de ids). El input los referencia con
+ * aria-controls/aria-activedescendant, ambos dentro del mismo root — que es
+ * la razón por la que este patrón SÍ funciona acá y no en co-command-search,
+ * donde la lista vive en otro shadow root.
+ */
+CoEmojiPicker.GRID_ID = 'co-emoji-grid';
+CoEmojiPicker.cellId = (index) => `co-emoji-cell-${index}`;