@prolibu-suite/cobalt-core 0.9.0 → 0.9.2

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

@@ -0,0 +1,375 @@
+// emojiPickerLogic.ts — lógica pura de co-emoji-picker (patrón optionListLogic /
+// commandSearchLogic: todo lo testeable sin DOM vive acá).
+import { rankByMatch } from "../../utils/normalizeText";
+import { EMOJI_CATEGORIES, EMOJI_PACKED, EMOJI_TONE_FLAGS } from "./emojiData";
+/** Categoría sintética de recientes: va primera y solo existe si hay historial. */
+export const RECENT_CATEGORY = 'recent';
+/** 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 const ROW_HEIGHT = 36;
+/** Filas de más renderizadas arriba y abajo del viewport. */
+export const OVERSCAN = 2;
+/** Columnas por defecto (espejo del default de la prop `columns`). */
+export const DEFAULT_COLUMNS = 8;
+/** Offset del espacio de índices de los recientes (ver `EmojiEntry.index`). */
+export const RECENT_INDEX_BASE = 1000000;
+// ── Dataset ─────────────────────────────────────────────────────────────────
+let cachedEntries = null;
+/**
+ * Desempaqueta EMOJI_PACKED a entradas. Memoizado a nivel de módulo: se paga
+ * UNA vez por documento aunque se monten varios pickers.
+ */
+export function getEmojiEntries() {
+    if (cachedEntries)
+        return cachedEntries;
+    const out = [];
+    let index = 0;
+    EMOJI_PACKED.forEach((packed, catIdx) => {
+        var _a;
+        const category = EMOJI_CATEGORIES[catIdx];
+        const flags = (_a = EMOJI_TONE_FLAGS[catIdx]) !== null && _a !== void 0 ? _a : '';
+        let inCat = 0;
+        for (const line of packed.split('\n')) {
+            const sep = line.indexOf(' ');
+            if (sep < 0)
+                continue;
+            out.push({
+                char: line.slice(0, sep),
+                name: line.slice(sep + 1),
+                category,
+                index,
+                nameIndex: index,
+                tone: flags[inCat] || '0',
+            });
+            index++;
+            inCat++;
+        }
+    });
+    cachedEntries = out;
+    return out;
+}
+/** Cargadores estáticos (specifier literal) — sin ellos el bundler no puede
+ *  partir el chunk y los packs volverían al bundle principal. */
+const LOCALE_LOADERS = {
+    es: () => import('./emojiNames.es'),
+    pt: () => import('./emojiNames.pt'),
+};
+/** Locales con pack de nombres propio. El resto usa los nombres en inglés. */
+export function hasLocalePack(lang) {
+    return lang in LOCALE_LOADERS;
+}
+/**
+ * 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 async function loadLocaleNames(lang) {
+    const loader = LOCALE_LOADERS[lang];
+    if (!loader)
+        return null;
+    try {
+        const mod = await loader();
+        return mod.default.flatMap((packed) => packed.split('\n'));
+    }
+    catch (_a) {
+        return null;
+    }
+}
+// ── Tono de piel ────────────────────────────────────────────────────────────
+/** Los 5 modificadores Fitzpatrick, en orden claro → oscuro (U+1F3FB..U+1F3FF). */
+export const SKIN_TONES = ['\u{1F3FB}', '\u{1F3FC}', '\u{1F3FD}', '\u{1F3FE}', '\u{1F3FF}'];
+/** Claves estables de la API pública: '' = por defecto (amarillo). */
+export const SKIN_TONE_KEYS = ['', 'light', 'medium-light', 'medium', 'medium-dark', 'dark'];
+/** Codepoints de persona que pueden repetirse en una secuencia (flag '2'). */
+const PERSON_CPS = new Set(['\u{1F468}', '\u{1F469}', '\u{1F9D1}']);
+const VS16 = '️';
+/** Modificador correspondiente a una clave pública, o '' si no aplica. */
+export function toneFromKey(key) {
+    const i = SKIN_TONE_KEYS.indexOf(key);
+    return i > 0 ? SKIN_TONES[i - 1] : '';
+}
+/**
+ * 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 function applySkinTone(char, flag, tone) {
+    if (!tone || flag === '0')
+        return char;
+    const cps = Array.from(char);
+    if (flag === '2') {
+        let out = '';
+        for (const cp of cps) {
+            out += cp;
+            if (PERSON_CPS.has(cp))
+                out += tone;
+        }
+        return out;
+    }
+    const rest = cps.slice(1);
+    if (rest[0] === VS16)
+        rest.shift();
+    return cps[0] + tone + rest.join('');
+}
+/** Quita todo modificador de tono de un carácter (para volver a la base). */
+export function stripSkinTone(char) {
+    const tones = [...SKIN_TONES];
+    return Array.from(char)
+        .filter((cp) => !tones.includes(cp))
+        .join('');
+}
+// ── Recientes ───────────────────────────────────────────────────────────────
+let cachedByChar = null;
+let cachedByKey = null;
+/**
+ * Clave de búsqueda tolerante: sin modificadores de tono y sin selectores de
+ * variación.
+ *
+ * Hace falta porque el modificador de tono SE COME el U+FE0F de la base, y ese
+ * FE0F puede estar en medio de la secuencia: 🕵️‍♂️ es `1F575 FE0F 200D 2642 FE0F`
+ * y tonado queda `1F575 1F3FD 200D 2642 FE0F`. Destonar no lo devuelve, y
+ * re-anexar un FE0F al final tampoco — habría que reinsertarlo en la posición
+ * correcta. Normalizar ambos lados es más simple y no depende de adivinar dónde
+ * iba.
+ */
+function normalizeKey(char) {
+    const tones = [...SKIN_TONES];
+    return Array.from(char)
+        .filter((cp) => cp !== VS16 && !tones.includes(cp))
+        .join('');
+}
+/** Índices char → entrada del dataset. Memoizados igual que `getEmojiEntries`. */
+function entriesByChar() {
+    if (!cachedByChar || !cachedByKey) {
+        const exact = new Map();
+        const normalized = new Map();
+        for (const e of getEmojiEntries()) {
+            exact.set(e.char, e);
+            // Primero gana: si dos formas normalizan igual, la de menor índice manda.
+            const key = normalizeKey(e.char);
+            if (!normalized.has(key))
+                normalized.set(key, e);
+        }
+        cachedByChar = exact;
+        cachedByKey = normalized;
+    }
+    return { exact: cachedByChar, normalized: cachedByKey };
+}
+/**
+ * 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 function resolveEmoji(char) {
+    var _a;
+    if (typeof char !== 'string' || !char)
+        return undefined;
+    const { exact, normalized } = entriesByChar();
+    return (_a = exact.get(char)) !== null && _a !== void 0 ? _a : normalized.get(normalizeKey(char));
+}
+/**
+ * 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 function buildRecentEntries(recent, max) {
+    if (!Array.isArray(recent) || recent.length === 0)
+        return [];
+    const out = [];
+    const seen = new Set();
+    for (const char of recent) {
+        if (typeof char !== 'string' || !char || seen.has(char))
+            continue;
+        const base = resolveEmoji(char);
+        if (!base)
+            continue;
+        seen.add(char);
+        out.push({
+            char,
+            name: base.name,
+            category: RECENT_CATEGORY,
+            index: RECENT_INDEX_BASE + out.length,
+            nameIndex: base.nameIndex,
+            tone: '0',
+        });
+        if (out.length >= max)
+            break;
+    }
+    return out;
+}
+/**
+ * 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 function pushRecent(recent, emoji, max) {
+    const prev = Array.isArray(recent) ? recent : [];
+    return [emoji, ...prev.filter((c) => c !== emoji)].slice(0, Math.max(1, max));
+}
+// ── Búsqueda ────────────────────────────────────────────────────────────────
+/**
+ * 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 function searchEmojis(entries, query, localeNames) {
+    // Tolera undefined: es un punto de entrada público y el valor viene de una
+    // @State/@Prop que un consumidor puede dejar sin setear.
+    if (!String(query !== null && query !== void 0 ? query : '').trim())
+        return entries;
+    return rankByMatch(entries, query, (e) => {
+        const localized = localeNames === null || localeNames === void 0 ? void 0 : localeNames[e.nameIndex];
+        return localized && localized !== e.name ? [localized, e.name] : e.name;
+    });
+}
+/** Nombre a mostrar (tooltip / aria-label) para una entrada. */
+export function displayName(entry, localeNames) {
+    var _a;
+    return (_a = localeNames === null || localeNames === void 0 ? void 0 : localeNames[entry.nameIndex]) !== null && _a !== void 0 ? _a : entry.name;
+}
+// ── Layout de grilla ────────────────────────────────────────────────────────
+/**
+ * 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 function layoutRows(entries, columns, grouped) {
+    // `Math.max(1, undefined)` es NaN y partiría la grilla en silencio.
+    const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : DEFAULT_COLUMNS;
+    const rows = [];
+    const pushGrid = (list) => {
+        for (let i = 0; i < list.length; i += cols)
+            rows.push({ kind: 'emoji', entries: list.slice(i, i + cols) });
+    };
+    if (!grouped) {
+        pushGrid(entries);
+        return rows;
+    }
+    let current = null;
+    let bucket = [];
+    for (const entry of entries) {
+        if (entry.category !== current) {
+            if (bucket.length)
+                pushGrid(bucket);
+            bucket = [];
+            current = entry.category;
+            rows.push({ kind: 'header', category: current });
+        }
+        bucket.push(entry);
+    }
+    if (bucket.length)
+        pushGrid(bucket);
+    return rows;
+}
+/** Posición (fila, columna) de cada índice global dentro de un layout. */
+export function buildPositionMap(rows) {
+    const map = new Map();
+    rows.forEach((row, r) => {
+        if (row.kind !== 'emoji')
+            return;
+        row.entries.forEach((entry, c) => map.set(entry.index, { row: r, col: c }));
+    });
+    return map;
+}
+/** Índice de fila donde arranca cada categoría (para el salto del strip). */
+export function categoryRowStarts(rows) {
+    const map = new Map();
+    rows.forEach((row, r) => {
+        if (row.kind === 'header' && !map.has(row.category))
+            map.set(row.category, r);
+    });
+    return map;
+}
+/** Categoría visible al tope del scroll — resalta el botón del strip. */
+export function categoryAtRow(rows, rowIdx) {
+    var _a;
+    for (let r = Math.min(rowIdx, rows.length - 1); r >= 0; r--) {
+        const row = rows[r];
+        if ((row === null || row === void 0 ? void 0 : row.kind) === 'header')
+            return row.category;
+        if ((row === null || row === void 0 ? void 0 : row.kind) === 'emoji') {
+            const cat = (_a = row.entries[0]) === null || _a === void 0 ? void 0 : _a.category;
+            if (cat)
+                return cat;
+        }
+    }
+    return null;
+}
+// ── Virtualización ──────────────────────────────────────────────────────────
+/**
+ * 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 function virtualSlice(scrollTop, viewportHeight, rowCount) {
+    const visible = Math.max(1, Math.ceil(viewportHeight / ROW_HEIGHT));
+    const start = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+    const end = Math.min(rowCount, start + visible + OVERSCAN * 2);
+    return { totalHeight: rowCount * ROW_HEIGHT, start, end, offsetY: start * ROW_HEIGHT };
+}
+/** Filas de salto de PageUp/PageDown. */
+const PAGE_ROWS = 5;
+/**
+ * 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 function moveActive(rows, positions, activeIndex, key) {
+    const flat = [];
+    for (const row of rows)
+        if (row.kind === 'emoji')
+            for (const e of row.entries)
+                flat.push(e.index);
+    if (flat.length === 0)
+        return -1;
+    if (activeIndex < 0 || !positions.has(activeIndex)) {
+        return key === 'ArrowUp' || key === 'End' || key === 'PageUp' ? flat[flat.length - 1] : flat[0];
+    }
+    const at = positions.get(activeIndex);
+    if (key === 'ArrowRight' || key === 'ArrowLeft') {
+        const linear = flat.indexOf(activeIndex);
+        const next = linear + (key === 'ArrowRight' ? 1 : -1);
+        return next < 0 || next >= flat.length ? activeIndex : flat[next];
+    }
+    if (key === 'Home')
+        return flat[0];
+    if (key === 'End')
+        return flat[flat.length - 1];
+    const step = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : key === 'PageDown' ? PAGE_ROWS : -PAGE_ROWS;
+    return seekRow(rows, at, step, activeIndex);
+}
+/** Busca la celda más cercana a `col` avanzando de a `step` filas, saltando
+ *  headers. Devuelve `fallback` si no hay ninguna fila de grilla en esa
+ *  dirección (ya estás en el borde). */
+function seekRow(rows, at, step, fallback) {
+    const dir = step > 0 ? 1 : -1;
+    let remaining = Math.abs(step);
+    let r = at.row;
+    let last = fallback;
+    while (remaining > 0) {
+        r += dir;
+        while (r >= 0 && r < rows.length && rows[r].kind !== 'emoji')
+            r += dir;
+        if (r < 0 || r >= rows.length)
+            break;
+        const row = rows[r];
+        last = row.entries[Math.min(at.col, row.entries.length - 1)].index;
+        remaining--;
+    }
+    return last;
+}

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: 'fd0802c7ab379e2ff69d181a89e82f9af50c7eb7', class: {
+        return (h("div", { key: 'e113826d18559a68ffae18ccf6529eea99d1e3e1', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: '0e37fbc4e087c5bc5ac69eee01cecd9fcde09f49', class: "co-empty-state__icon" }, h("co-icon", { key: '0e75bba07af87b883e7cb236800282af51c4b84f', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '69ea3039e73b48f77fa6e58d673802d34506c4ef', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '223d8321af110cbde025a59e3677338abee0cc33', class: "co-empty-state__description" }, this.description)), h("div", { key: 'bfba2044eacf53aae426fb99dc1f2d5314a0b8e6', class: "co-empty-state__actions" }, h("slot", { key: 'b22df42a753f9ca5797b373a611421e07881d3e1' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'ada3644ee8b42e431b7d433f2240a3500caa2876', class: "co-empty-state__icon" }, h("co-icon", { key: 'ecfbb6c8ffefa7e919859a960bc56390f0c1403d', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '3473ab221979388c12fb4f5c9dd4a0816f0a9eea', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '55065da69e04e5ac3d6859b28ecdb452320b9263', class: "co-empty-state__description" }, this.description)), h("div", { key: '2842e7935653e51f42fb389827abf7db433a00a4', class: "co-empty-state__actions" }, h("slot", { key: 'ed90d3aaced375020cfb4af1c1d44077fbba0f17' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.js

@@ -223,10 +223,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: '5fc690577299cbb5d2e4e75d41279ee6f49b9e80', class: "cal" }, h("div", { key: '55b342eacfa324b5eb3e1c819948aba5783e028e', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '7e190cb82abe886d5740b314aeacc136732e0538', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '0d12537595e3fb72a7214e968cd952ce68f09b90', class: "cal__title-group" }, h("button", { key: '7d658998a4df6144b9b7752103cae448eb9bea6e', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '4b793fef900dfd76f1356b1e78c7f5ed10b3da4f', name: "caret-left", size: 16 })), h("h2", { key: '0461afb4b372f7c95b528f5746b2ba6008181dcc', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '7b169bb04482f6049f4af0c19cf8bf86a962dabf', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'b426d015251b5a476e2cd34b01d1c7d5d92be71d', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: 'd0a147fee3fa5ad01d40dacbbc2a0b1adf8f3808', class: "cal" }, h("div", { key: '35feaa81dc6f139fcced1ee691864b1587b19931', class: "cal__toolbar", part: "toolbar" }, h("button", { key: 'd05cf866772e81bacd7c904ff31d7f5032431672', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: 'b3c1389ec39de8121d807c8eec944751245b2324', class: "cal__title-group" }, h("button", { key: '17224b09c008cf0d5bae8e585f3ffc7981bf63bb', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '2bf18c14b972a6a2b0136e67279b743b69074060', name: "caret-left", size: 16 })), h("h2", { key: '7ad21c7a35e45355870f699ecbbe79099de7e7e6', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '4bb0d0287b41b4f100d09c9627afeb91bc5b57d7', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '9bf5ab51b1d31e4d5c8274be1ca5b71ef96335a1', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '417cc54fe753d802f30d13992fef86d055c823a3', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '468dd7e859c0f9cbbe7d9e48e0c4cd55fdea2ddf', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-popover/co-event-popover.js

@@ -115,7 +115,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '0d80c0a501c72d7428c85ba44075a4c9cab05f6f' }, h("div", { key: 'a772efeb2c49d71f42b53f63ba56858019fcfdcd', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '8eff11fdc9ae6ebd0de3967dc3a6522cd159bfa0', class: "pop__actions", part: "actions" }, h("slot", { key: 'b9c5c598356d8acc6b0cf135e3c5347de937a33b', name: "actions" })), h("div", { key: '0e1f10c5727d66170d9c1a5b8137ba48c61a867b', class: "pop__head" }, this.dot && h("span", { key: '78ab616e697fb9e4cdc354e791a4e2184ea20123', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '1abdeb6c16aa3daf5adfb652f4f2ede5e0abb891', class: "pop__body", part: "body" }, h("slot", { key: 'f28a87f62acaa8c617cf24f264462b525065ecbc' }))))));
+        return (h(Host, { key: '2bf728a720fb724085b945b4128a4bad5831b870' }, h("div", { key: '81bf88204d662d59a9b4d0b2148063e8244287c3', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '1dae9ef8ef905f269946cb0a842636d77af46e66', class: "pop__actions", part: "actions" }, h("slot", { key: 'ce5a5fa4ea60a6649d323953dbfa2cccd8840f7c', name: "actions" })), h("div", { key: '019f8e05e990563069e33dd1936655df664085ae', class: "pop__head" }, this.dot && h("span", { key: 'a1f11545250cbf9fb900840dfca4d6721cb98852', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: 'e81876518297dde46ef6288538c4e471b5eab521', class: "pop__body", part: "body" }, h("slot", { key: '9818f107cee7d29278b58efd1af3109d345651b4' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-fab/co-fab.css

@@ -152,11 +152,14 @@
   box-shadow: none;
 }
 
-/* ── Fixed positions ────────────────────────────────────────── */
-.co-fab--bottom-right { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
-.co-fab--bottom-left  { position: fixed; bottom: 24px; left: 24px; z-index: 1000; }
-.co-fab--top-right    { position: fixed; top: 24px; right: 24px; z-index: 1000; }
-.co-fab--top-left     { position: fixed; top: 24px; left: 24px; z-index: 1000; }
+/* ── Fixed positions ──────────────────────────────────────────
+   Los offsets son overridables por CSS var (default 24px) para que el
+   consumidor pueda separar el FAB de barras inferiores (ej. la paginación del
+   datatable): setear --co-fab-offset-bottom en el host levanta el FAB. */
+.co-fab--bottom-right { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--bottom-left  { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
+.co-fab--top-right    { position: fixed; top: var(--co-fab-offset-top, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--top-left     { position: fixed; top: var(--co-fab-offset-top, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
 
 /* ── Label ──────────────────────────────────────────────────── */
 .co-fab__label {

package/dist/collection/components/co-fab/co-fab.js

@@ -28,7 +28,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: '67d54b40024fa3851d0ea79960949861ecaeaf4c', class: {
+        return (h("button", { key: '33b456dcff41cacf4783c6aacdd8d99e6b699eff', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +36,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'e5e75805115a8b31530a56d8210dcdae66e28ab5', name: this.icon, size: iconSize }), this.label && (h("span", { key: '2e659c02f0056f848f5c0566069dd39f4cd48d2c', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '4d7ab37bc111369fc17277ece2e397b4207ec3f4', name: this.icon, size: iconSize }), this.label && (h("span", { key: '7de41d3f16a27dc3ce66c6b1d2731f5774046630', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.js

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '11e79bc9c1b3b56c10c0558b0d504821db7e8cd6', class: {
+        return (h("div", { key: '615291bd9c075d4f26f264602da03427e13bf35b', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '9e3f1d834e5a1b70411747568d7a1055b3e0d8f1', class: "co-file-field__labels" }, h("label", { key: '1c138fbe71432df15c970b00f910e0ddcc69a333', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '34b7d0fe683a911fc10352f0d7c79cb01c559999', required: this.required })))), showDropzone && (h("div", { key: '9d046b734982edfd7d9743e9dab5b95593e15383', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '0c4fbdb6c5824824bbe39a96c568f06f442955ef', class: "co-file-field__labels" }, h("label", { key: '4f8767b17adcd04d553c2cf6668c60c30a780783', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '82fb4a69b136fcdcdd3b3e81ea8d2deb8ca64e10', required: this.required })))), showDropzone && (h("div", { key: 'bce9efbedf17d917ae4bf00ae839409f63e4cccd', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '9af47292af70f8da16062a0bbac21ea520a52a39', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '68f3467892671d62648ccf2d1302cd579cd6601c', name: "file-arrow-up", size: 18 }), h("span", { key: 'a167aa0aef4f1e209660f251dd945ac41576b39f' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'b1bcfb1eabab417cd46920ccc43f624e52d1470c', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '44a29cb6fcd9ea9a65de12794d1313c0ef9da7b9', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '4d4f68f6684b976ec1610ebd45bc59ece67a13a9', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '000fe510d61916cb016a9a2d9968426c0edabe62', name: "actions" })), h("input", { key: '16169cf42cc8072d63c36bb3a25f9c5d540e48c3', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '23dae3bd944ad6cbd7e0d10898832aa1367956a5', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'ca0c17ecc64a68594758c626d41bd14ad6a19633', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '343ca190a8ebb4a2589b90d6b9718e91f7d23bf1', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '9b911d176a0ac02b6f76c084c8b7f33c2c8637aa', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '82c82cf57f9692bc560d4c82e0bc22a539e25e08', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'e2dc567ce78647717c894c877334e2eecab6b80e', name: "file-arrow-up", size: 18 }), h("span", { key: '9c0082e62f13a53d5d598623e35678db84df52b3' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '3f43f21c3fb54f1d21143aa7cdf9a485ee89cf69', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'd4b2a12ffde1a17c5f1cdded7fb50f035ffb6f0c', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '38e36894d82bb094d4dbd37fb10b915607bf3f13', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '993f64d18baed0474f29e50418bd5883ac6bc90c', name: "actions" })), h("input", { key: '33dcec562a9c266ca3920537297ddbff2688a0a3', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'a78a747ee890c15d082c99770c0a8487405301ee', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '08336c691f85e1c39216779a850e1c4eb4ad92eb', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '374c52cbaf91ab19d1781c6f4faaed809146aea5', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '93ab31f0a3567287db8de9b5b00f4e3772988c82', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'c2edda6419a9f6e75f7c16fac61ce3271159d816', class: {
+        })))), helper && (h("div", { key: 'fce82b34f47fbf65872fbd5dea20a87b4c99ae12', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0772a3d9fdf8fc818b0738ce4c7f0297c6eb4984', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6153f585fdd804fb49b09e1d106c6625e473b917', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '920361c5833f0252673779b716f872af151ae4b2', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6711fa168985fb206fdb79533834e4d8548da3dd', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -54,7 +54,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: '174e628c4a7fdd118cd5573c0054677c7c006989', class: {
+        return (h("span", { key: 'adb6141d2b0d587d289d0d1c8f3887963a33261a', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -64,7 +64,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: '815957f4dd756fec566b4bbc996083e80aed0ab5', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: 'e409cbb4d9c2d08f9417058ec843a6466d875f04', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: 'c09b28c4e20a80ce87275beb8c8f38c4ec9a6ac3', class: {
+        return (h("div", { key: '09ca6f7214d2c25432ffb9e9fa90036d81c48200', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '48bee19674872e9ed7b06a9f0706063111abc3ae', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9b1e0cd4c00ad73c915f826df299cbb05156ca02', class: "co-helper-text__message" }, h("slot", { key: '41c95d86b31bb19be88b619057aba484748f1dfc' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: 'd3757438d31d6a14d4c52157197818846ac3fd11', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '7ae8d75fa07b8a6046e02d36c05b73676a68425e', class: "co-helper-text__message" }, h("slot", { key: 'd13a404f19f6b04d0b63aa2a4f68caf84d33e619' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon/co-icon.js

@@ -31,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '81319f5bcb43f9f095f7ae6328002bcffe22bc42', "aria-hidden": "true", style: {
+        return (h(Host, { key: '9fa97e09f5063eaa9b463f1bb7f06d4b277c8bc6', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '4875243b3b1c0d40d82abc65307e398e83363b61', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '092068cc819b5d0cd63e15a5f3e0b7349cdb63cd', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -126,6 +126,31 @@
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
 
+/* Anillo de foco por teclado — solo :focus-visible, el click no lo enciende.
+   El botón traía `outline: none` sin nada que lo reemplazara, así que al tabular
+   no se veía absolutamente nada (WCAG 2.4.7).
+
+   El anillo va a --co-semantic-border-focus (50%), NO al --...-focus-ring (8%),
+   por el mismo motivo ya documentado en co-checkbox: en los campos (input/select)
+   el foco se percibe porque SUMAN el flip del borde al 50% y el halo solo lo
+   acompaña; acá la variante ghost —la más usada— es `border: none`, así que el
+   border-color de abajo es un no-op y un halo al 8% (~1,1:1) quedaría invisible
+   justo en la variante más frecuente. Con el 50% el anillo es la única señal, y
+   es perceptible en las tres variantes.
+   El box-shadow sigue el border-radius, así que sale redondo en --rounded y con
+   la esquina correcta en --square, sin tocar el layout (no hay reflow). */
+.co-icon-button:focus-visible {
+  outline: none;
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}
+
+/* surface="dark": el token de foco es negro-50 en tema claro y sobre una navbar
+   oscura no contrasta. Misma salida que co-button para su variante on-dark. */
+.co-icon-button--dark:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent);
+}
+
 /* Feedback de presión: squish instantáneo; el release usa la transición base. */
 .co-icon-button:active:not(:disabled) {
   transform: scale(0.97);

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '430b2aa64f664a6bd7cb40da53f592606c4b5308', class: {
+        return (h("button", { key: '870a3f745f22073b730bf78c57712aefcd1f0ae1', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,