@prolibu-suite/cobalt-core 0.9.0 → 0.9.2

package/dist/types/components/co-emoji-picker/emojiPickerLogic.d.ts

@@ -0,0 +1,149 @@
+import { type EmojiCategory } from './emojiData';
+/** Categoría sintética de recientes: va primera y solo existe si hay historial. */
+export declare const RECENT_CATEGORY = "recent";
+/** Categorías del layout = las del dataset más la sintética de recientes. */
+export type GridCategory = EmojiCategory | typeof RECENT_CATEGORY;
+/** '0' sin tono · '1' tras el primer codepoint · '2' tras cada persona. */
+export type ToneFlag = '0' | '1' | '2';
+export interface EmojiEntry {
+    /** El carácter (puede ser una secuencia ZWJ de varios codepoints). */
+    char: string;
+    /** Nombre en inglés (pack base). Es el fallback de todo locale. */
+    name: string;
+    /** Slug de categoría. */
+    category: GridCategory;
+    /**
+     * Identidad de celda dentro del layout: key de render, id de DOM y valor de
+     * `activeIndex`. Las entradas de recientes viven en un espacio propio
+     * (`RECENT_INDEX_BASE + n`) porque el MISMO emoji aparece dos veces en la
+     * grilla —en recientes y en su categoría real— y dos celdas con el mismo id
+     * romperían `aria-activedescendant` y la navegación por teclado.
+     */
+    index: number;
+    /** Índice en el pack de locale. Difiere de `index` en los recientes. */
+    nameIndex: number;
+    /** Soporte de tono de piel del emoji base. */
+    tone: ToneFlag;
+}
+export type EmojiRow = {
+    kind: 'header';
+    category: GridCategory;
+} | {
+    kind: 'emoji';
+    entries: EmojiEntry[];
+};
+/** Alto uniforme de fila (header y grilla) en px. Uniforme a propósito: la
+ *  virtualización se reduce a `top = row * ROW_HEIGHT`, sin prefix-sums. */
+export declare const ROW_HEIGHT = 36;
+/** Filas de más renderizadas arriba y abajo del viewport. */
+export declare const OVERSCAN = 2;
+/** Columnas por defecto (espejo del default de la prop `columns`). */
+export declare const DEFAULT_COLUMNS = 8;
+/** Offset del espacio de índices de los recientes (ver `EmojiEntry.index`). */
+export declare const RECENT_INDEX_BASE = 1000000;
+/**
+ * Desempaqueta EMOJI_PACKED a entradas. Memoizado a nivel de módulo: se paga
+ * UNA vez por documento aunque se monten varios pickers.
+ */
+export declare function getEmojiEntries(): EmojiEntry[];
+/** Locales con pack de nombres propio. El resto usa los nombres en inglés. */
+export declare function hasLocalePack(lang: string): boolean;
+/**
+ * Nombres localizados, alineados por índice global con `getEmojiEntries()`.
+ * Devuelve null si el locale no tiene pack o si la carga falla — el llamador
+ * cae a los nombres en inglés (degradación, nunca excepción).
+ */
+export declare function loadLocaleNames(lang: string): Promise<string[] | null>;
+/** Los 5 modificadores Fitzpatrick, en orden claro → oscuro (U+1F3FB..U+1F3FF). */
+export declare const SKIN_TONES: readonly ["🏻", "🏼", "🏽", "🏾", "🏿"];
+export type SkinTone = (typeof SKIN_TONES)[number];
+/** Claves estables de la API pública: '' = por defecto (amarillo). */
+export declare const SKIN_TONE_KEYS: readonly ["", "light", "medium-light", "medium", "medium-dark", "dark"];
+export type SkinToneKey = (typeof SKIN_TONE_KEYS)[number];
+/** Modificador correspondiente a una clave pública, o '' si no aplica. */
+export declare function toneFromKey(key: string | undefined): string;
+/**
+ * Aplica un modificador de tono a un emoji según su flag.
+ *
+ * Reglas (las dos que exige Unicode, no una aproximación):
+ *  - El modificador REEMPLAZA al selector de variación U+FE0F que siga a la
+ *    base: ✌️ (270C FE0F) + medio = 270C 1F3FD, no 270C FE0F 1F3FD. Solo al de
+ *    la base — el FE0F de un componente posterior (♀️ en 🕵️‍♀️) se conserva.
+ *  - Las secuencias multi-persona (flag '2') llevan el modificador en CADA
+ *    persona: 👩‍❤️‍👨 tonado es 1F469 tono 200D 2764 FE0F 200D 1F468 tono. Con uno
+ *    solo la secuencia deja de ser RGI y el navegador la parte en dos glifos.
+ */
+export declare function applySkinTone(char: string, flag: ToneFlag, tone: string): string;
+/** Quita todo modificador de tono de un carácter (para volver a la base). */
+export declare function stripSkinTone(char: string): string;
+/**
+ * Resuelve un carácter (posiblemente tonado) a su entrada del dataset. Prueba la
+ * forma exacta —el caso común, sin costo— y cae a la clave normalizada.
+ */
+export declare function resolveEmoji(char: string): EmojiEntry | undefined;
+/**
+ * Entradas para la fila de recientes. Los caracteres los da el consumidor (es
+ * el dueño del historial), así que acá se sanea: se descarta lo que no resuelve
+ * contra el dataset, se deduplica conservando el orden, y se recorta a `max`.
+ *
+ * El carácter se conserva TAL CUAL vino —con su tono— y por eso la entrada sale
+ * con `tone: '0'`: ya está resuelto, no hay que volver a tonarlo.
+ */
+export declare function buildRecentEntries(recent: string[] | undefined, max: number): EmojiEntry[];
+/**
+ * Lista de recientes actualizada tras elegir `emoji` (MRU: más reciente
+ * primero, sin repetidos, recortada a `max`). Es una función pura para que el
+ * consumidor —dueño de la persistencia— no tenga que reimplementar la política.
+ */
+export declare function pushRecent(recent: string[] | undefined, emoji: string, max: number): string[];
+/**
+ * Filtra por nombre, rankeando por relevancia (`rankByMatch`: exacto > prefijo >
+ * prefijo de palabra > substring), insensible a acentos y mayúsculas.
+ *
+ * Cuando hay pack de locale busca contra el nombre localizado Y el inglés: los
+ * emoji sin traducción CLDR (la mayoría de las banderas) siguen siendo
+ * encontrables, y quien tipea en inglés sobre una UI en español también acierta.
+ */
+export declare function searchEmojis(entries: EmojiEntry[], query: string, localeNames: string[] | null): EmojiEntry[];
+/** Nombre a mostrar (tooltip / aria-label) para una entrada. */
+export declare function displayName(entry: EmojiEntry, localeNames: string[] | null): string;
+/**
+ * Aplana a filas de render. `grouped` inserta un header por categoría (modo
+ * idle); en modo búsqueda los resultados van en una grilla continua, porque
+ * vienen ordenados por relevancia y no por categoría.
+ */
+export declare function layoutRows(entries: EmojiEntry[], columns: number, grouped: boolean): EmojiRow[];
+/** Posición (fila, columna) de cada índice global dentro de un layout. */
+export declare function buildPositionMap(rows: EmojiRow[]): Map<number, {
+    row: number;
+    col: number;
+}>;
+/** Índice de fila donde arranca cada categoría (para el salto del strip). */
+export declare function categoryRowStarts(rows: EmojiRow[]): Map<GridCategory, number>;
+/** Categoría visible al tope del scroll — resalta el botón del strip. */
+export declare function categoryAtRow(rows: EmojiRow[], rowIdx: number): GridCategory | null;
+/**
+ * Ventana de filas a renderizar. 1906 emoji son ~240 filas: sin esto el panel
+ * monta ~1900 botones por apertura. Con la ventana quedan ~13 filas (~104
+ * botones) sin importar el tamaño del dataset.
+ */
+export declare function virtualSlice(scrollTop: number, viewportHeight: number, rowCount: number): {
+    totalHeight: number;
+    start: number;
+    end: number;
+    offsetY: number;
+};
+export type NavKey = 'ArrowRight' | 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'Home' | 'End' | 'PageDown' | 'PageUp';
+/**
+ * Siguiente índice global activo tras una tecla de navegación, o el actual si
+ * el movimiento no lleva a ninguna celda.
+ *
+ * Trabaja sobre el layout (no sobre el array plano) para que las filas
+ * parciales del final de cada categoría y los headers intercalados se comporten
+ * como los ve el usuario: bajar desde una fila corta cae en la última celda de
+ * la fila de abajo, y los headers se saltan solos.
+ */
+export declare function moveActive(rows: EmojiRow[], positions: Map<number, {
+    row: number;
+    col: number;
+}>, activeIndex: number, key: NavKey): number;

package/dist/types/components/co-modal/co-modal.d.ts

@@ -41,7 +41,9 @@ export declare class CoModal {
     coAfterClose: EventEmitter<void>;
     /** Open animation finished. */
     coAfterOpen: EventEmitter<void>;
+    hasFooter: boolean;
     private modalEl?;
+    private handleFooterSlotChange;
     private handleOverlayClick;
     private handleCloseClick;
     private stopPropagation;

package/dist/types/components/co-popover/co-popover.d.ts

@@ -10,7 +10,14 @@ export declare class CoPopover {
     matchWidth: boolean;
     /** Gap in px between trigger and panel. */
     offset: number;
-    /** Close when clicking outside the component. */
+    /**
+     * Close when clicking outside the component.
+     *
+     * ⚠️ In a stacked popover scenario, only the top-of-stack layer reacts to
+     * outside clicks (see `handleDocumentClickManual`). If the TOP layer sets
+     * this to `false` (a persistent popover), outside clicks are swallowed
+     * entirely — popovers below it in the stack lose their dismiss too.
+     */
     closeOnClickOutside: boolean;
     /** Close when pressing Escape. */
     closeOnEscape: boolean;

package/dist/types/components/co-ref-field/co-ref-field.d.ts

@@ -78,6 +78,23 @@ export declare class CoRefField {
     maxChips: number;
     /** Panel color theme. 'auto' follows trigger, 'dark' forces dark panel, 'light' forces light. */
     panelTheme: 'auto' | 'dark' | 'light';
+    /**
+     * Phosphor icon rendered as a small status badge after the selected label in
+     * the trigger (e.g. 'funnel' = strict workspace filter active). Only shows
+     * while a value is selected. Empty = no badge. Tint the pill via
+     * --co-ref-field-trigger-badge-bg.
+     */
+    triggerBadgeIcon: string;
+    /** Accessible name / tooltip for the trigger badge. */
+    triggerBadgeLabel: string;
+    /**
+     * Fixed panel width (CSS size, e.g. '264px'). By default the panel matches
+     * the trigger width (form-field convention); set this for compact triggers
+     * whose panel needs room of its own (e.g. the navbar workspace selector with
+     * its panel-footer switch). The panel stays anchored to the trigger's start
+     * edge.
+     */
+    panelWidth?: string;
     /**
      * Shape of the leading avatar (selected value + option rows). Defaults to
      * 'circle' (people refs); use 'square' for company/workspace refs — it renders

package/dist/types/components/co-select/co-select.d.ts

@@ -33,6 +33,10 @@ export declare class CoSelect {
     searchable: boolean;
     searchPlaceholder: string;
     emptyText: string;
+    /** Footer de confirmación al pie del panel (paridad co-combobox/co-ref-field). */
+    showFooter: boolean;
+    /** Label del botón primario del footer. */
+    footerPrimaryLabel: string;
     isOpen: boolean;
     scrollTop: number;
     searchText: string;
@@ -46,6 +50,8 @@ export declare class CoSelect {
     private static readonly OVERSCAN;
     coChange: EventEmitter<string | string[]>;
     coClear: EventEmitter<void>;
+    /** Click en el botón primario del footer (el panel se cierra solo). */
+    coFooterPrimary: EventEmitter<void>;
     private lastOptionsRaw;
     private lastParsedOptions;
     private lastRankInput?;
@@ -67,6 +73,7 @@ export declare class CoSelect {
     private handlePopoverOpen;
     private handlePopoverClose;
     private handleClear;
+    private handleFooterPrimary;
     private handleOptionClick;
     private syncOverlayScrollbars;
     componentDidRender(): void;

package/dist/types/components.d.ts

@@ -2049,6 +2049,68 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * 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).
+     */
+    interface CoEmojiPicker {
+        /**
+          * Columnas de la grilla.
+          * @default 8
+         */
+        "columns": number;
+        /**
+          * Mensaje de "sin resultados". Vacío = el del `locale`.
+          * @default ''
+         */
+        "emptyMessage": string;
+        /**
+          * aria-label del panel. Vacío = el del `locale`.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Locale de los textos de UI y de los nombres de emoji ('es' | 'en' | 'pt').
+         */
+        "locale"?: string;
+        /**
+          * 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.
+          * @default []
+         */
+        "recent": string[];
+        /**
+          * Tope de emoji recientes mostrados.
+          * @default 16
+         */
+        "recentLimit": number;
+        /**
+          * Placeholder del buscador. Vacío = el del `locale`.
+          * @default ''
+         */
+        "searchPlaceholder": string;
+        /**
+          * Muestra el buscador.
+          * @default true
+         */
+        "searchable": boolean;
+        /**
+          * Muestra el strip de categorías.
+          * @default true
+         */
+        "showCategories": boolean;
+        /**
+          * 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`).
+          * @default ''
+         */
+        "skinTone": string;
+    }
     /**
      * Empty state placeholder — icon, title, description, and action buttons.
      */
@@ -3217,7 +3279,7 @@ export namespace Components {
     }
     interface CoPopover {
         /**
-          * Close when clicking outside the component.
+          * Close when clicking outside the component.  ⚠️ In a stacked popover scenario, only the top-of-stack layer reacts to outside clicks (see `handleDocumentClickManual`). If the TOP layer sets this to `false` (a persistent popover), outside clicks are swallowed entirely — popovers below it in the stack lose their dismiss too.
           * @default true
          */
         "closeOnClickOutside": boolean;
@@ -3512,6 +3574,10 @@ export namespace Components {
           * @default 'auto'
          */
         "panelTheme": 'auto' | 'dark' | 'light';
+        /**
+          * Fixed panel width (CSS size, e.g. '264px'). By default the panel matches the trigger width (form-field convention); set this for compact triggers whose panel needs room of its own (e.g. the navbar workspace selector with its panel-footer switch). The panel stays anchored to the trigger's start edge.
+         */
+        "panelWidth"?: string;
         /**
           * @default 'Select…'
          */
@@ -3558,6 +3624,16 @@ export namespace Components {
           * @default 0
          */
         "total": number;
+        /**
+          * Phosphor icon rendered as a small status badge after the selected label in the trigger (e.g. 'funnel' = strict workspace filter active). Only shows while a value is selected. Empty = no badge. Tint the pill via --co-ref-field-trigger-badge-bg.
+          * @default ''
+         */
+        "triggerBadgeIcon": string;
+        /**
+          * Accessible name / tooltip for the trigger badge.
+          * @default ''
+         */
+        "triggerBadgeLabel": string;
         /**
           * Selected value: single ID string or JSON array of IDs.
           * @default ''
@@ -3807,6 +3883,11 @@ export namespace Components {
           * @default 'No results'
          */
         "emptyText": string;
+        /**
+          * Label del botón primario del footer.
+          * @default 'Ok'
+         */
+        "footerPrimaryLabel": string;
         "helperText"?: string;
         "iconLeft"?: string;
         "label"?: string;
@@ -3842,6 +3923,11 @@ export namespace Components {
          */
         "searchable": boolean;
         "secondaryLabel"?: string;
+        /**
+          * Footer de confirmación al pie del panel (paridad co-combobox/co-ref-field).
+          * @default false
+         */
+        "showFooter": boolean;
         /**
           * @default 'md'
          */
@@ -4709,6 +4795,10 @@ export interface CoDropZoneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCoDropZoneElement;
 }
+export interface CoEmojiPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCoEmojiPickerElement;
+}
 export interface CoEventCalendarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCoEventCalendarElement;
@@ -5658,6 +5748,36 @@ declare global {
         prototype: HTMLCoDropZoneElement;
         new (): HTMLCoDropZoneElement;
     };
+    interface HTMLCoEmojiPickerElementEventMap {
+        "coSelect": { emoji: string; name: string };
+        "coSkinToneChange": { skinTone: string };
+        "coClose": void;
+    }
+    /**
+     * 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).
+     */
+    interface HTMLCoEmojiPickerElement extends Components.CoEmojiPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCoEmojiPickerElementEventMap>(type: K, listener: (this: HTMLCoEmojiPickerElement, ev: CoEmojiPickerCustomEvent<HTMLCoEmojiPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCoEmojiPickerElementEventMap>(type: K, listener: (this: HTMLCoEmojiPickerElement, ev: CoEmojiPickerCustomEvent<HTMLCoEmojiPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCoEmojiPickerElement: {
+        prototype: HTMLCoEmojiPickerElement;
+        new (): HTMLCoEmojiPickerElement;
+    };
     /**
      * Empty state placeholder — icon, title, description, and action buttons.
      */
@@ -6384,6 +6504,7 @@ declare global {
     interface HTMLCoSelectElementEventMap {
         "coChange": string | string[];
         "coClear": void;
+        "coFooterPrimary": void;
     }
     interface HTMLCoSelectElement extends Components.CoSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCoSelectElementEventMap>(type: K, listener: (this: HTMLCoSelectElement, ev: CoSelectCustomEvent<HTMLCoSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6733,6 +6854,7 @@ declare global {
         "co-drawer": HTMLCoDrawerElement;
         "co-drive-card": HTMLCoDriveCardElement;
         "co-drop-zone": HTMLCoDropZoneElement;
+        "co-emoji-picker": HTMLCoEmojiPickerElement;
         "co-empty-state": HTMLCoEmptyStateElement;
         "co-event-calendar": HTMLCoEventCalendarElement;
         "co-event-popover": HTMLCoEventPopoverElement;
@@ -9066,6 +9188,80 @@ declare namespace LocalJSX {
          */
         "onCoDrop"?: (event: CoDropZoneCustomEvent<File[]>) => void;
     }
+    /**
+     * 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).
+     */
+    interface CoEmojiPicker {
+        /**
+          * Columnas de la grilla.
+          * @default 8
+         */
+        "columns"?: number;
+        /**
+          * Mensaje de "sin resultados". Vacío = el del `locale`.
+          * @default ''
+         */
+        "emptyMessage"?: string;
+        /**
+          * aria-label del panel. Vacío = el del `locale`.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Locale de los textos de UI y de los nombres de emoji ('es' | 'en' | 'pt').
+         */
+        "locale"?: string;
+        /**
+          * Emitido con Escape y el buscador ya vacío.
+         */
+        "onCoClose"?: (event: CoEmojiPickerCustomEvent<void>) => void;
+        /**
+          * Emitido al elegir un emoji. `emoji` ya viene con el tono aplicado.
+         */
+        "onCoSelect"?: (event: CoEmojiPickerCustomEvent<{ emoji: string; name: string }>) => void;
+        /**
+          * Emitido al cambiar el tono de piel — el consumidor lo persiste.
+         */
+        "onCoSkinToneChange"?: (event: CoEmojiPickerCustomEvent<{ skinTone: string }>) => void;
+        /**
+          * 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.
+          * @default []
+         */
+        "recent"?: string[];
+        /**
+          * Tope de emoji recientes mostrados.
+          * @default 16
+         */
+        "recentLimit"?: number;
+        /**
+          * Placeholder del buscador. Vacío = el del `locale`.
+          * @default ''
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * Muestra el buscador.
+          * @default true
+         */
+        "searchable"?: boolean;
+        /**
+          * Muestra el strip de categorías.
+          * @default true
+         */
+        "showCategories"?: boolean;
+        /**
+          * 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`).
+          * @default ''
+         */
+        "skinTone"?: string;
+    }
     /**
      * Empty state placeholder — icon, title, description, and action buttons.
      */
@@ -10392,7 +10588,7 @@ declare namespace LocalJSX {
     }
     interface CoPopover {
         /**
-          * Close when clicking outside the component.
+          * Close when clicking outside the component.  ⚠️ In a stacked popover scenario, only the top-of-stack layer reacts to outside clicks (see `handleDocumentClickManual`). If the TOP layer sets this to `false` (a persistent popover), outside clicks are swallowed entirely — popovers below it in the stack lose their dismiss too.
           * @default true
          */
         "closeOnClickOutside"?: boolean;
@@ -10704,6 +10900,10 @@ declare namespace LocalJSX {
           * @default 'auto'
          */
         "panelTheme"?: 'auto' | 'dark' | 'light';
+        /**
+          * Fixed panel width (CSS size, e.g. '264px'). By default the panel matches the trigger width (form-field convention); set this for compact triggers whose panel needs room of its own (e.g. the navbar workspace selector with its panel-footer switch). The panel stays anchored to the trigger's start edge.
+         */
+        "panelWidth"?: string;
         /**
           * @default 'Select…'
          */
@@ -10750,6 +10950,16 @@ declare namespace LocalJSX {
           * @default 0
          */
         "total"?: number;
+        /**
+          * Phosphor icon rendered as a small status badge after the selected label in the trigger (e.g. 'funnel' = strict workspace filter active). Only shows while a value is selected. Empty = no badge. Tint the pill via --co-ref-field-trigger-badge-bg.
+          * @default ''
+         */
+        "triggerBadgeIcon"?: string;
+        /**
+          * Accessible name / tooltip for the trigger badge.
+          * @default ''
+         */
+        "triggerBadgeLabel"?: string;
         /**
           * Selected value: single ID string or JSON array of IDs.
           * @default ''
@@ -11031,6 +11241,11 @@ declare namespace LocalJSX {
           * @default 'No results'
          */
         "emptyText"?: string;
+        /**
+          * Label del botón primario del footer.
+          * @default 'Ok'
+         */
+        "footerPrimaryLabel"?: string;
         "helperText"?: string;
         "iconLeft"?: string;
         "label"?: string;
@@ -11045,6 +11260,10 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "onCoChange"?: (event: CoSelectCustomEvent<string | string[]>) => void;
         "onCoClear"?: (event: CoSelectCustomEvent<void>) => void;
+        /**
+          * Click en el botón primario del footer (el panel se cierra solo).
+         */
+        "onCoFooterPrimary"?: (event: CoSelectCustomEvent<void>) => void;
         /**
           * @default '[]'
          */
@@ -11068,6 +11287,11 @@ declare namespace LocalJSX {
          */
         "searchable"?: boolean;
         "secondaryLabel"?: string;
+        /**
+          * Footer de confirmación al pie del panel (paridad co-combobox/co-ref-field).
+          * @default false
+         */
+        "showFooter"?: boolean;
         /**
           * @default 'md'
          */
@@ -12364,6 +12588,17 @@ declare namespace LocalJSX {
         "label": string;
         "icon": string;
     }
+    interface CoEmojiPickerAttributes {
+        "locale": string;
+        "searchPlaceholder": string;
+        "emptyMessage": string;
+        "label": string;
+        "searchable": boolean;
+        "showCategories": boolean;
+        "columns": number;
+        "skinTone": string;
+        "recentLimit": number;
+    }
     interface CoEmptyStateAttributes {
         "icon": string;
         "heading": string;
@@ -12717,6 +12952,9 @@ declare namespace LocalJSX {
         "footerSecondaryLabel": string;
         "maxChips": number;
         "panelTheme": 'auto' | 'dark' | 'light';
+        "triggerBadgeIcon": string;
+        "triggerBadgeLabel": string;
+        "panelWidth": string;
         "avatarShape": 'circle' | 'square';
     }
     interface CoRichTextEditorAttributes {
@@ -12788,6 +13026,8 @@ declare namespace LocalJSX {
         "searchable": boolean;
         "searchPlaceholder": string;
         "emptyText": string;
+        "showFooter": boolean;
+        "footerPrimaryLabel": string;
     }
     interface CoSeparatorAttributes {
         "vertical": boolean;
@@ -13007,6 +13247,7 @@ declare namespace LocalJSX {
         "co-drawer": Omit<CoDrawer, keyof CoDrawerAttributes> & { [K in keyof CoDrawer & keyof CoDrawerAttributes]?: CoDrawer[K] } & { [K in keyof CoDrawer & keyof CoDrawerAttributes as `attr:${K}`]?: CoDrawerAttributes[K] } & { [K in keyof CoDrawer & keyof CoDrawerAttributes as `prop:${K}`]?: CoDrawer[K] };
         "co-drive-card": Omit<CoDriveCard, keyof CoDriveCardAttributes> & { [K in keyof CoDriveCard & keyof CoDriveCardAttributes]?: CoDriveCard[K] } & { [K in keyof CoDriveCard & keyof CoDriveCardAttributes as `attr:${K}`]?: CoDriveCardAttributes[K] } & { [K in keyof CoDriveCard & keyof CoDriveCardAttributes as `prop:${K}`]?: CoDriveCard[K] };
         "co-drop-zone": Omit<CoDropZone, keyof CoDropZoneAttributes> & { [K in keyof CoDropZone & keyof CoDropZoneAttributes]?: CoDropZone[K] } & { [K in keyof CoDropZone & keyof CoDropZoneAttributes as `attr:${K}`]?: CoDropZoneAttributes[K] } & { [K in keyof CoDropZone & keyof CoDropZoneAttributes as `prop:${K}`]?: CoDropZone[K] };
+        "co-emoji-picker": Omit<CoEmojiPicker, keyof CoEmojiPickerAttributes> & { [K in keyof CoEmojiPicker & keyof CoEmojiPickerAttributes]?: CoEmojiPicker[K] } & { [K in keyof CoEmojiPicker & keyof CoEmojiPickerAttributes as `attr:${K}`]?: CoEmojiPickerAttributes[K] } & { [K in keyof CoEmojiPicker & keyof CoEmojiPickerAttributes as `prop:${K}`]?: CoEmojiPicker[K] };
         "co-empty-state": Omit<CoEmptyState, keyof CoEmptyStateAttributes> & { [K in keyof CoEmptyState & keyof CoEmptyStateAttributes]?: CoEmptyState[K] } & { [K in keyof CoEmptyState & keyof CoEmptyStateAttributes as `attr:${K}`]?: CoEmptyStateAttributes[K] } & { [K in keyof CoEmptyState & keyof CoEmptyStateAttributes as `prop:${K}`]?: CoEmptyState[K] };
         "co-event-calendar": Omit<CoEventCalendar, keyof CoEventCalendarAttributes> & { [K in keyof CoEventCalendar & keyof CoEventCalendarAttributes]?: CoEventCalendar[K] } & { [K in keyof CoEventCalendar & keyof CoEventCalendarAttributes as `attr:${K}`]?: CoEventCalendarAttributes[K] } & { [K in keyof CoEventCalendar & keyof CoEventCalendarAttributes as `prop:${K}`]?: CoEventCalendar[K] };
         "co-event-popover": Omit<CoEventPopover, keyof CoEventPopoverAttributes> & { [K in keyof CoEventPopover & keyof CoEventPopoverAttributes]?: CoEventPopover[K] } & { [K in keyof CoEventPopover & keyof CoEventPopoverAttributes as `attr:${K}`]?: CoEventPopoverAttributes[K] } & { [K in keyof CoEventPopover & keyof CoEventPopoverAttributes as `prop:${K}`]?: CoEventPopover[K] };
@@ -13286,6 +13527,18 @@ declare module "@stencil/core" {
              * Report ref: 3.17 (446–449); drag overlay spec: report lines 135–136.
              */
             "co-drop-zone": LocalJSX.IntrinsicElements["co-drop-zone"] & JSXBase.HTMLAttributes<HTMLCoDropZoneElement>;
+            /**
+             * 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).
+             */
+            "co-emoji-picker": LocalJSX.IntrinsicElements["co-emoji-picker"] & JSXBase.HTMLAttributes<HTMLCoEmojiPickerElement>;
             /**
              * Empty state placeholder — icon, title, description, and action buttons.
              */