@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

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

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '420d7fa2d9322ef3ec77e87343367f05a0de3d17', class: {
+        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'ede5ab0f16e003619e2aa51945c748bbe7414523' })));
+            }, role: "group" }, h("slot", { key: 'c583ee5dd23aceea08c3178b93b6f1227101e96e' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'fa986ed0bf6bfa7627832868ed26a2f614d7105c', class: "co-calendar", part: "root" }, h("div", { key: '0c86b865fee2c71fb42bacf7a87ab28f2c1a06d1', class: "co-calendar__header", part: "header" }, h("button", { key: 'de9c951364750e616f03cf83ce06a74ee7b4ba36', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '44f0feeecf0ad89e39afb1c353bc40a8c1dabc96', name: "caret-left", size: 16 })), h("button", { key: '14350a7ca5aedf29d49ddfcecd6f0c098a3fbf5e', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'af1f42e2efac0338e4d1af9c29c2b233fd0a4fbf', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0d34428c859f99d0689cf405a54effee4d9e91e7', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '52a7ccc6e7081221a9f81b25e8352e7e50ba864b', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '795529e38ec7b72934d786b9dcaa5046e73fbde8', class: "co-calendar", part: "root" }, h("div", { key: 'f409d1670f4f649d8e91f21915e0008d9ed330ac', class: "co-calendar__header", part: "header" }, h("button", { key: '23a4f12ec30cd86e49661daf755a6d2e23b209ad', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'ce6b736011e3ed13781cac180fe4542ec38c75c3', name: "caret-left", size: 16 })), h("button", { key: 'b1fcbb3d09e33b0b462bc278b46e14a348f9f9a9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'dbe1800ed74e234dc8f334183e504d19d8ab9d74', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'bdbda5999d20cb799aeabe48ebad6e8a4d7d89ff', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'ec2e268c38d04d1f298cfb12d29647b530b03a94', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-calendar-month/co-calendar-month.css

@@ -24,6 +24,8 @@
   --co-cal-today-ring: var(--co-color-primary-azul);
 
   /* Event chips */
+  --co-cal-event-radius: 6px;
+  --co-cal-elevation-hover: var(--co-shadow-lg);
   --co-cal-event-bg: var(--co-color-primary-azul);
   --co-cal-event-border: transparent;
   --co-cal-event-text: var(--co-color-base-blanco, #fff);
@@ -34,7 +36,8 @@
 .cal-month {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--co-cal-border);
+  height: 100%;
+  /* Sin borde exterior (Google-style: la grilla flota en la página del host). */
   border-radius: var(--co-border-radius-xs);
   overflow: hidden;
   background: var(--co-cal-surface);
@@ -60,6 +63,8 @@
 .cal-month__week {
   position: relative;
   min-height: var(--co-cal-min-week-h);
+  /* Crecer para llenar el alto del contenedor (min-height queda como piso). */
+  flex: 1 0 auto;
 }
 .cal-month__week:not(:last-child) {
   border-bottom: 1px solid var(--co-cal-border);
@@ -100,6 +105,10 @@
   background: color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);
   box-shadow: inset 0 0 0 2px var(--co-cal-today-ring);
 }
+/* Día seleccionado persistente (referencia mientras el form de crear está abierto). */
+.cal-month__day--selected {
+  background: color-mix(in srgb, var(--co-cal-today-ring) 10%, transparent);
+}
 
 .cal-month__daynum {
   display: inline-flex;
@@ -138,7 +147,7 @@
   margin: 0 3px;
   padding: 0 var(--co-spacing-xs);
   border: 1px solid var(--co-cal-event-border);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-cal-event-radius);
   font-family: inherit;
   font-size: var(--co-font-size-12, 12px);
   line-height: 1;
@@ -151,9 +160,28 @@
 .cal-chip {
   background: var(--co-cal-event-bg);
   color: var(--co-cal-event-text);
+  /* Ver la nota del timegrid: sustituyen al preventDefault del pointerdown. */
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+/* Chip de carga: ocupa el mismo carril y la misma caja que un chip real, pero
+   con su PROPIA regla — NO se cuelga de la lista `.cal-chip, .cal-month__more`
+   (sumarse ahí le robaba a los chips reales su borde/padding/tipografía). */
+.cal-month__chip-skeleton {
+  position: absolute;
+  height: calc(var(--co-cal-lane-h) - 3px);
+  box-sizing: border-box;
+  margin: 0 3px;
+  border-radius: var(--co-cal-event-radius);
+  overflow: hidden;
+  pointer-events: none;
 }
-.cal-chip:hover {
+.cal-month__chip-skeleton co-skeleton { display: block; block-size: 100%; }
+.cal-chip--all-day:hover {
   filter: brightness(0.95);
+  box-shadow: var(--co-cal-elevation-hover);
 }
 .cal-chip:focus-visible {
   outline: 2px solid var(--co-semantic-border-focus);
@@ -186,12 +214,17 @@
   color: var(--co-cal-text-muted);
   font-variant-numeric: tabular-nums;
 }
+/* Toma el espacio sobrante (con min-width:0 para poder truncar): así el badge
+   del provider queda pegado al FINAL del chip y no flotando pegado al texto. */
 .cal-chip__title {
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .cal-chip__ext {
   flex: 0 0 auto;
+  margin-inline-start: auto; /* al final incluso si el título no crece */
   opacity: 0.8;
 }
 
@@ -207,6 +240,22 @@
 .cal-chip--dragging {
   opacity: 0.4;
 }
+/* Tanda 3 FIX D: durante el drag de una celda (dragId !== null) los chips no
+   deben responder a hover/hit-testing — el filter:brightness + box-shadow del
+   hover de las barras all-day (y su cálculo) se disparaban en cada celda
+   cruzada. El pointerenter de drag-over vive en `.cal-month__day`, no en el
+   chip, así que esto no rompe el drag-over. Clase puesta imperativamente
+   (classList sobre un ref), no @State: no dispara render. */
+.cal-month--interacting .cal-chip {
+  pointer-events: none;
+}
+/* Response-state treatments. Hatch only on filled (all-day) bars; timed chips
+   are dot+text so a hatch would paint on the light surface — skip. */
+.cal-chip--all-day.cal-chip--tentative {
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px);
+}
+.cal-chip--cancelled { opacity: 0.6; }
+.cal-chip--cancelled .cal-chip__title { text-decoration: line-through; }
 .cal-chip--continues-before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

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

@@ -1,6 +1,7 @@
 import { h, } from "@stencil/core";
 import { addDays, compareYMD, getMonthMatrix, getWeekdayLabels, isDisabled, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
 import { layoutMonth, getWallClock, wallClockToEpoch, toUtcISO, zonedDateKey, zonedMinutesOfDay, } from "@prolibu-suite/cobalt-calendar-utils";
+import { readableTextToken } from "../../utils/eventColor";
 /**
  * Month grid for the event calendar. Forks the day grid, roving-tabindex and
  * keyboard model from `co-calendar`, then overlays multi-day event bars laid out
@@ -27,11 +28,20 @@ export class CoCalendarMonth {
         this.selectable = true;
         /** Max event lanes per day before "+N more". */
         this.maxLanes = 3;
+        /** Cargando: en vez de los chips pinta bloques skeleton en sus carriles. La
+         *  grilla del mes (cabecera de días, celdas, números, bordes) no se toca. */
+        this.loading = false;
         /** Day currently hovered while dragging an event. */
         this.dragOverDate = null;
         /** Id of the event being dragged. */
         this.dragId = null;
+        /** Epoch ms of "now", refreshed on a 60s timer so `past` styling stays live. */
+        this.nowMs = 0;
         this.onPointerUp = () => this.finishDrag();
+        // ── Selection / activation ──────────────────────────────────────────────
+        /** Día seleccionado que PERSISTE resaltado mientras el host tiene abierto su
+         * form/bubble de creación (referencia visual, paridad Google). */
+        this.selectedDate = null;
         this.handleKeyDown = (e) => {
             const cur = this.focused;
             let handled = true;
@@ -63,12 +73,20 @@ export class CoCalendarMonth {
     }
     componentWillLoad() {
         this.focused = this.defaultFocus();
+        this.nowMs = Date.now();
+    }
+    componentDidLoad() {
+        // setInterval acá (no en connectedCallback): componentDidLoad corre una sola
+        // vez por instancia → sin timer duplicado en reconexión (espeja co-calendar-timegrid).
+        this.nowTimer = window.setInterval(() => (this.nowMs = Date.now()), 60000);
     }
     connectedCallback() {
         window.addEventListener('pointerup', this.onPointerUp);
     }
     disconnectedCallback() {
         window.removeEventListener('pointerup', this.onPointerUp);
+        if (this.nowTimer)
+            window.clearInterval(this.nowTimer);
     }
     defaultFocus() {
         const first = `${pad4(this.year)}-${pad2(this.month)}-01`;
@@ -76,23 +94,29 @@ export class CoCalendarMonth {
         const t = parseISO(today);
         return t.year === this.year && t.month === this.month ? today : first;
     }
-    get matrix() {
-        return getMonthMatrix(this.year, this.month, this.firstDayOfWeek).map((row) => row.map((c) => c.value));
-    }
     eventById(id) {
-        return this.events.find((e) => e.id === id);
+        var _a, _b;
+        return (_b = (_a = this._layoutCache) === null || _a === void 0 ? void 0 : _a.byId.get(id)) !== null && _b !== void 0 ? _b : this.events.find((e) => e.id === id);
     }
     isDayInteractable(date) {
         return !isDisabled(date, { min: this.minDate, max: this.maxDate });
     }
-    // ── Selection / activation ──────────────────────────────────────────────
-    selectDay(date) {
+    selectDay(date, rect) {
         if (!this.selectable || !this.isDayInteractable(date))
             return;
-        this.coDaySelect.emit({ date });
+        this.selectedDate = date;
+        this.coDaySelect.emit({ date, rect });
     }
-    activateEvent(id) {
-        this.coEventClick.emit({ id });
+    /** Limpia el resaltado persistente (lo llama el host al cerrar su form). */
+    async clearSelection() {
+        this.selectedDate = null;
+    }
+    /** Un refetch (post-save) invalida la referencia visual. */
+    onEventsChange() {
+        this.selectedDate = null;
+    }
+    activateEvent(id, rect) {
+        this.coEventClick.emit({ id, rect });
     }
     // ── Keyboard (WAI-ARIA grid, forked from co-calendar) ───────────────────
     moveFocus(next) {
@@ -104,20 +128,30 @@ export class CoCalendarMonth {
         (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${this.focused}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
     }
     // ── Drag-move (day granularity) ─────────────────────────────────────────
+    /** Marca la interacción en el root (pointer-events:none en los chips durante el
+     * drag — mata el hover/hit-testing de las barras all-day barridas en cada
+     * celda cruzada). No es @State a propósito: no debe disparar un render. */
+    setInteracting(on) {
+        var _a;
+        (_a = this.rootEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('cal-month--interacting', on);
+    }
     startDrag(e, id) {
         const ev = this.eventById(id);
         if (!ev || !this.editable || ev.editable === false || ev.startEditable === false)
             return;
-        e.preventDefault();
+        // Ver la nota en co-calendar-timegrid#startMove: preventDefault en
+        // pointerdown mata el click y el chip arrastrable no podía activarse.
         e.stopPropagation();
         this.dragId = id;
         this.dragOverDate = null;
+        this.setInteracting(true);
     }
     finishDrag() {
         const id = this.dragId;
         const target = this.dragOverDate;
         this.dragId = null;
         this.dragOverDate = null;
+        this.setInteracting(false);
         if (!id || !target)
             return;
         const ev = this.eventById(id);
@@ -142,6 +176,46 @@ export class CoCalendarMonth {
         });
     }
     // ── Render ──────────────────────────────────────────────────────────────
+    getLayouts() {
+        var _a;
+        const c = this._layoutCache;
+        if (c &&
+            c.events === this.events &&
+            c.year === this.year &&
+            c.month === this.month &&
+            c.firstDayOfWeek === this.firstDayOfWeek &&
+            c.timeZone === this.timeZone &&
+            c.maxLanes === this.maxLanes) {
+            return c;
+        }
+        const matrix = getMonthMatrix(this.year, this.month, this.firstDayOfWeek).map((row) => row.map((cell) => cell.value));
+        const layout = layoutMonth(this.events, matrix, {
+            maxLanes: this.maxLanes,
+            timeZone: this.timeZone,
+        });
+        const segByWeek = new Map();
+        for (const seg of layout.segments) {
+            if (seg.lane >= this.maxLanes)
+                continue;
+            const arr = (_a = segByWeek.get(seg.weekIndex)) !== null && _a !== void 0 ? _a : [];
+            arr.push(seg);
+            segByWeek.set(seg.weekIndex, arr);
+        }
+        const byId = new Map(this.events.map((e) => [e.id, e]));
+        this._layoutCache = {
+            events: this.events,
+            year: this.year,
+            month: this.month,
+            firstDayOfWeek: this.firstDayOfWeek,
+            timeZone: this.timeZone,
+            maxLanes: this.maxLanes,
+            matrix,
+            layout,
+            segByWeek,
+            byId,
+        };
+        return this._layoutCache;
+    }
     renderChip(seg, weekDays) {
         var _a;
         const ev = this.eventById(seg.eventId);
@@ -150,7 +224,7 @@ export class CoCalendarMonth {
         const cols = weekDays.length;
         const left = (seg.startCol / cols) * 100;
         const width = ((seg.endCol - seg.startCol + 1) / cols) * 100;
-        const isPast = ev.endMs <= Date.now();
+        const isPast = ev.endMs <= this.nowMs;
         const isExternal = ((_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.isExternal) === true;
         const locked = !this.editable || ev.editable === false;
         const timeText = ev.allDay || !seg.isStart
@@ -163,7 +237,9 @@ export class CoCalendarMonth {
         };
         if (ev.backgroundColor) {
             style['--co-cal-event-bg'] = ev.backgroundColor;
-            style['--co-cal-event-text'] = readableText(ev.backgroundColor);
+            const textToken = readableTextToken(this.rootEl, ev.backgroundColor);
+            if (textToken)
+                style['--co-cal-event-text'] = textToken;
         }
         if (ev.borderColor)
             style['--co-cal-event-border'] = ev.borderColor;
@@ -176,31 +252,24 @@ export class CoCalendarMonth {
                 'cal-chip--dragging': this.dragId === ev.id,
                 'cal-chip--continues-before': seg.continuesBefore,
                 'cal-chip--continues-after': seg.continuesAfter,
+                'cal-chip--tentative': ev.responseState === 'tentative',
+                'cal-chip--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
             }, style: style, title: ev.title, "aria-label": ev.title, onClick: (e) => {
                 e.stopPropagation();
-                this.activateEvent(ev.id);
-            }, onPointerDown: (e) => this.startDrag(e, ev.id) }, !ev.allDay && h("span", { class: "cal-chip__dot", "aria-hidden": "true" }), timeText && h("span", { class: "cal-chip__time" }, timeText), h("span", { class: "cal-chip__title" }, ev.title || '—'), isExternal && h("co-icon", { name: "link", size: 11, class: "cal-chip__ext" })));
+                this.activateEvent(ev.id, e.currentTarget.getBoundingClientRect());
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                this.coEventDblClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, onPointerDown: (e) => this.startDrag(e, ev.id) }, !ev.allDay && h("span", { class: "cal-chip__dot", "aria-hidden": "true" }), timeText && h("span", { class: "cal-chip__time" }, timeText), h("span", { class: "cal-chip__title" }, ev.title || '—'), isExternal && (providerBrand(ev)
+            ? h("co-provider-logo", { provider: providerBrand(ev), size: 11, plated: true, class: "cal-chip__ext" })
+            : h("co-icon", { name: "link", size: 11, class: "cal-chip__ext" }))));
     }
     render() {
-        var _a;
-        const matrix = this.matrix;
-        const normalized = this.events;
-        const layout = layoutMonth(normalized, matrix, {
-            maxLanes: this.maxLanes,
-            timeZone: this.timeZone,
-        });
-        const segByWeek = new Map();
-        for (const seg of layout.segments) {
-            if (seg.lane >= this.maxLanes)
-                continue;
-            const arr = (_a = segByWeek.get(seg.weekIndex)) !== null && _a !== void 0 ? _a : [];
-            arr.push(seg);
-            segByWeek.set(seg.weekIndex, arr);
-        }
+        const { matrix, layout, segByWeek } = this.getLayouts();
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: '51781013cbfce9f2e8d07de9a46766c3a9326cbe', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: 'ee3545fbd982390cd233cb54b33060b7cb9b08e1', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: 'f8bcb53b7ef7c47a1ff59caee0305dfc1a3f1fc2', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '11acf9973a13ad661590a04dd934c86ceaa10f5d', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);
@@ -214,11 +283,16 @@ export class CoCalendarMonth {
                         'cal-month__day--today': isToday,
                         'cal-month__day--disabled': !interactable,
                         'cal-month__day--drag-over': this.dragId !== null && this.dragOverDate === date,
-                    }, onClick: () => this.selectDay(date), onPointerEnter: () => {
+                        'cal-month__day--selected': this.selectedDate === date,
+                    }, onClick: (e) => this.selectDay(date, e.currentTarget.getBoundingClientRect()), onPointerEnter: () => {
                         if (this.dragId)
                             this.dragOverDate = date;
                     } }, h("span", { class: "cal-month__daynum" }, ymd.day)));
-            })), h("div", { class: "cal-month__events" }, ((_a = segByWeek.get(wi)) !== null && _a !== void 0 ? _a : []).map((seg) => this.renderChip(seg, week)), week.map((date, col) => {
+            })), h("div", { class: "cal-month__events" }, this.loading && SKELETON_CHIPS[wi % SKELETON_CHIPS.length].map(([col, span, lane]) => (h("div", { class: "cal-month__chip-skeleton", "aria-hidden": "true", style: {
+                    left: `${(col / week.length) * 100}%`,
+                    width: `${(span / week.length) * 100}%`,
+                    top: `calc(var(--co-cal-daynum-h) + ${lane} * var(--co-cal-lane-h))`,
+                } }, h("co-skeleton", { variant: "rect", width: "100%", height: "100%" })))), !this.loading && ((_a = segByWeek.get(wi)) !== null && _a !== void 0 ? _a : []).map((seg) => this.renderChip(seg, week)), !this.loading && week.map((date, col) => {
                 var _a;
                 const more = (_a = layout.overflow[date]) !== null && _a !== void 0 ? _a : 0;
                 if (more <= 0)
@@ -467,6 +541,26 @@ export class CoCalendarMonth {
                 "reflect": false,
                 "attribute": "max-lanes",
                 "defaultValue": "3"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cargando: en vez de los chips pinta bloques skeleton en sus carriles. La\ngrilla del mes (cabecera de d\u00EDas, celdas, n\u00FAmeros, bordes) no se toca."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
             }
         };
     }
@@ -474,7 +568,9 @@ export class CoCalendarMonth {
         return {
             "focused": {},
             "dragOverDate": {},
-            "dragId": {}
+            "dragId": {},
+            "nowMs": {},
+            "selectedDate": {}
         };
     }
     static get events() {
@@ -483,37 +579,47 @@ export class CoCalendarMonth {
                 "name": "coDaySelect",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when an empty day is selected (create request). Detail = \"YYYY-MM-DD\"."
                 },
                 "complexType": {
-                    "original": "{ date: string }",
-                    "resolved": "{ date: string; }",
-                    "references": {}
+                    "original": "{ date: string; rect?: DOMRect }",
+                    "resolved": "{ date: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
                 }
             }, {
                 "method": "coEventClick",
                 "name": "coEventClick",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when an event chip is activated."
                 },
                 "complexType": {
-                    "original": "{ id: string }",
-                    "resolved": "{ id: string; }",
-                    "references": {}
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
                 }
             }, {
                 "method": "coEventDrop",
                 "name": "coEventDrop",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted on a completed drag-move (day granularity)."
@@ -528,7 +634,7 @@ export class CoCalendarMonth {
                 "name": "coMoreClick",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when the \"+N more\" affordance is activated."
@@ -538,11 +644,68 @@ export class CoCalendarMonth {
                     "resolved": "{ date: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "coEventDblClick",
+                "name": "coEventDblClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Doble activaci\u00F3n de un chip (direct-edit request del host)."
+                },
+                "complexType": {
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpia el resaltado persistente (lo llama el host al cerrar su form).",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "events",
+                "methodName": "onEventsChange"
+            }];
+    }
 }
 // ── helpers ─────────────────────────────────────────────────────────────────
+/** Chips del skeleton por semana: `[columna, ancho en días, carril]`. Patrón
+ *  FIJO (nada de random) y desparejo, como se ve un mes real. */
+const SKELETON_CHIPS = [
+    [[0, 2, 0], [3, 1, 0], [5, 1, 1]],
+    [[1, 1, 0], [2, 3, 1]],
+    [[0, 1, 0], [2, 1, 0], [4, 2, 1], [6, 1, 0]],
+    [[1, 2, 0], [4, 1, 1]],
+    [[2, 1, 0], [3, 2, 1], [6, 1, 0]],
+    [[0, 3, 0], [5, 1, 1]],
+];
 function pad2(n) {
     return String(n).padStart(2, '0');
 }
@@ -574,21 +737,41 @@ function shiftInstant(ms, deltaDays, timeZone) {
     const [y, m, d] = newDate.split('-').map(Number);
     return wallClockToEpoch({ year: y, month: m, day: d, hour: wc.hour, minute: wc.minute, second: wc.second }, timeZone);
 }
+// Intl.DateTimeFormat es caro de construir y este label se recalcula por chip
+// por render sobre un dominio ACOTADO (≤96 minutos distintos, 1-2 locales):
+// cacheamos el RESULTADO (y el formatter, para el miss). Higiene: clear a las
+// 2000 entradas — inalcanzable en uso normal, solo protege de iteración
+// patológica. Mismo patrón que co-calendar-timegrid.tsx (duplicado a propósito:
+// componentes Stencil separados, consistencia > DRY entre ellos).
+const MINUTE_LABEL_CACHE = new Map();
+const MINUTE_FMT_CACHE = new Map();
 /** Short localized time label, e.g. "9:00 a. m." / "09:00". */
 function minutesToLabel(minutes, locale) {
+    const key = `${locale}|${minutes}`;
+    const hit = MINUTE_LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = MINUTE_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+        MINUTE_FMT_CACHE.set(locale, fmt);
+    }
     const h = Math.floor(minutes / 60);
     const m = minutes % 60;
-    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(new Date(2000, 0, 1, h, m));
+    const out = fmt.format(new Date(2000, 0, 1, h, m));
+    if (MINUTE_LABEL_CACHE.size > 2000)
+        MINUTE_LABEL_CACHE.clear();
+    MINUTE_LABEL_CACHE.set(key, out);
+    return out;
 }
-/** Pick a readable text token for an arbitrary background color (YIQ luminance). */
-function readableText(bg) {
-    const hex = bg.replace('#', '').trim();
-    if (hex.length !== 3 && hex.length !== 6)
-        return 'var(--co-cal-event-text)';
-    const full = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
-    const r = parseInt(full.slice(0, 2), 16);
-    const g = parseInt(full.slice(2, 4), 16);
-    const b = parseInt(full.slice(4, 6), 16);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 150 ? 'var(--co-cal-event-text-dark)' : 'var(--co-cal-event-text-light)';
+/** Marca del evento externo (`co-provider-logo`), o '' si no se reconoce — el
+ *  llamador cae al ícono genérico de enlace. */
+function providerBrand(ev) {
+    var _a, _b;
+    const p = String((_b = (_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.provider) !== null && _b !== void 0 ? _b : '').toLowerCase();
+    if (p.includes('google'))
+        return 'google';
+    if (p.includes('microsoft') || p.includes('outlook'))
+        return 'microsoft';
+    return '';
 }