@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -2,25 +2,9 @@ import { h, } from "@stencil/core";
 import { addDays, addMonths, getMonthLabel, getMonthMatrix, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
 import { normalizeEvents, getLocalTimeZone, } from "@prolibu-suite/cobalt-calendar-utils";
 import { getDateStrings } from "../../utils/dateI18n";
-/**
- * co-event-calendar — the public entry point of the Cobalt Calendars family.
- *
- * Owns view state, the visible anchor date, event normalization and the toolbar,
- * and delegates rendering to the active view (Phase 1: month). All hard math
- * lives in `@prolibu-suite/cobalt-calendar-utils`. Events are CONTROLLED: the
- * calendar emits requests (`coEventDrop`, `coDateSelect`) and the host applies
- * them by updating the `events` prop — leaving it unchanged on failure is the
- * revert.
- *
- * Instants are ISO-8601 strings WITH offset/Z (timed) or "YYYY-MM-DD" (all-day);
- * the calendar never exposes Date objects. `timeZone` controls wall-clock render.
- *
- * @part toolbar - The header toolbar
- * @part body - The active view container
- */
 export class CoEventCalendar {
     constructor() {
-        /** Active view. Phase 1 ships `month`; week/day/agenda land in later phases. */
+        /** Active view. `month`/`week`/`day` are implemented; `agenda` is pending. */
         this.view = 'month';
         /** Events: an array or a JSON string (raw-HTML use). */
         this.events = [];
@@ -38,18 +22,52 @@ export class CoEventCalendar {
         this.availableViews = ['month'];
         /** Default minutes for a timed event missing an end. */
         this.defaultDurationMinutes = 60;
+        /** Show the all-day lane in week/day views. */
+        this.allDaySlot = true;
+        /** Visible-hours window for week/day (minutes-of-day bounds as "HH:mm"). */
+        this.minTime = '00:00';
+        this.maxTime = '24:00';
+        /** Slot/snap granularity (minutes) for week/day. */
+        this.slotMinutes = 15;
+        this.snapMinutes = 15;
+        /** Initial scroll position for week/day ("HH:mm"). */
+        this.scrollTime = '07:00';
+        /** Show the current-time indicator in week/day. */
+        this.nowIndicator = true;
+        /** Cargando eventos: se propaga a la grilla (mes/timegrid), que reemplaza
+         *  SUS chips por bloques skeleton y conserva toda su estructura — bordes,
+         *  cabecera de días, eje de horas. El toolbar sigue operable y nada se
+         *  desmonta, así no se pierde el scroll de semana/día. */
+        this.loading = false;
         this.goToday = () => this.setAnchor(todayYMD());
         this.goPrev = () => this.step(-1);
         this.goNext = () => this.step(1);
-        // ── Month delegation handlers ───────────────────────────────────────────
+        // ── View delegation handlers ─────────────────────────────────────────────
         this.handleDaySelect = (e) => {
+            var _a;
             const date = e.detail.date;
-            this.coDateSelect.emit({ start: date, end: addDays(date, 1), allDay: true });
+            this.coDateSelect.emit({ start: date, end: addDays(date, 1), allDay: true, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
+        };
+        this.handleRangeSelect = (e) => {
+            var _a;
+            this.coDateSelect.emit({
+                start: e.detail.start,
+                end: e.detail.end,
+                allDay: false,
+                rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null,
+            });
         };
         this.handleEventClick = (e) => {
+            var _a;
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (ev)
+                this.coEventClick.emit({ event: ev, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
+        };
+        this.handleEventDblClick = (e) => {
+            var _a;
             const ev = this.normalized.find((x) => x.id === e.detail.id);
             if (ev)
-                this.coEventClick.emit({ event: ev });
+                this.coEventDblClick.emit({ event: ev, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
         };
         this.handleEventDrop = (e) => {
             const ev = this.normalized.find((x) => x.id === e.detail.id);
@@ -77,6 +95,13 @@ export class CoEventCalendar {
             this.coMoreClick.emit({ date, events });
         };
     }
+    /** Limpia el resaltado persistente de selección de la vista activa (timegrid
+     * o month) — lo llama el host al cerrar su bubble/form de creación. */
+    async clearRangeSelection() {
+        var _a, _b;
+        const view = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('co-calendar-timegrid, co-calendar-month');
+        await ((_b = view === null || view === void 0 ? void 0 : view.clearSelection) === null || _b === void 0 ? void 0 : _b.call(view));
+    }
     componentWillLoad() {
         this.anchor = this.date && parseISO(this.date) ? this.date : todayYMD();
     }
@@ -93,20 +118,60 @@ export class CoEventCalendar {
         return this.timeZone || getLocalTimeZone();
     }
     get normalized() {
+        const c = this._normCache;
+        if (c &&
+            c.events === this.events &&
+            c.dd === this.defaultDurationMinutes &&
+            c.sc === this.statusColors) {
+            return c.result;
+        }
         const raw = parseEventsProp(this.events);
         const opts = {
             defaultDurationMinutes: this.defaultDurationMinutes,
             statusColors: parseStatusColors(this.statusColors),
         };
-        return normalizeEvents(raw, opts);
+        const result = normalizeEvents(raw, opts);
+        this._normCache = {
+            events: this.events,
+            dd: this.defaultDurationMinutes,
+            sc: this.statusColors,
+            result,
+        };
+        return result;
     }
     get viewsList() {
         return Array.isArray(this.availableViews)
             ? this.availableViews
             : String(this.availableViews).split(',').map((s) => s.trim()).filter(Boolean);
     }
-    /** Visible [start, end) of the current month view, as date strings. */
+    /** Sunday=0 UTC day-of-week of a date-only key (tz-independent). */
+    dowOf(dateKey) {
+        const [y, mo, d] = dateKey.split('-').map(Number);
+        return new Date(Date.UTC(y, mo - 1, d)).getUTCDay();
+    }
+    weekStart(dateKey) {
+        const diff = (this.dowOf(dateKey) - this.firstDayOfWeek + 7) % 7;
+        return addDays(dateKey, -diff);
+    }
+    /** Day keys the active view renders: 7 for week, 1 for day, [] for month. */
+    get visibleDates() {
+        if (this.view === 'week') {
+            const start = this.weekStart(this.anchor);
+            return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+        }
+        if (this.view === 'day')
+            return [this.anchor];
+        return [];
+    }
+    /** Visible [start, end) of the active view, as date strings. */
     visibleRange() {
+        if (this.view === 'week') {
+            const start = this.weekStart(this.anchor);
+            return { start, end: addDays(start, 7) };
+        }
+        if (this.view === 'day') {
+            return { start: this.anchor, end: addDays(this.anchor, 1) };
+        }
         const a = parseISO(this.anchor);
         const matrix = getMonthMatrix(a.year, a.month, this.firstDayOfWeek);
         const start = matrix[0][0].value;
@@ -123,12 +188,12 @@ export class CoEventCalendar {
         this.emitDatesSet();
     }
     step(dir) {
-        if (this.view === 'month') {
+        if (this.view === 'month')
             this.setAnchor(addMonths(this.anchor, dir));
-        }
-        else {
-            this.setAnchor(addDays(this.anchor, dir * 7));
-        }
+        else if (this.view === 'day')
+            this.setAnchor(addDays(this.anchor, dir));
+        else
+            this.setAnchor(addDays(this.anchor, dir * 7)); // week (and agenda fallback)
     }
     switchView(next) {
         if (next === this.view)
@@ -139,17 +204,29 @@ export class CoEventCalendar {
     }
     title() {
         const a = parseISO(this.anchor);
-        return getMonthLabel(a.year, a.month, this.locale, 'long');
+        if (this.view === 'month')
+            return getMonthLabel(a.year, a.month, this.locale, 'long');
+        if (this.view === 'day') {
+            return new Intl.DateTimeFormat(this.locale, {
+                weekday: 'short', day: 'numeric', month: 'short', year: 'numeric',
+            }).format(utcDate(this.anchor));
+        }
+        // week: "13 – 19 jul 2026"
+        const start = this.weekStart(this.anchor);
+        const end = addDays(start, 6);
+        const fmt = new Intl.DateTimeFormat(this.locale, { day: 'numeric', month: 'short' });
+        const yr = new Intl.DateTimeFormat(this.locale, { year: 'numeric' }).format(utcDate(end));
+        return `${fmt.format(utcDate(start))} – ${fmt.format(utcDate(end))} ${yr}`;
     }
     render() {
         var _a;
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: 'dce81390ee349de59285e31506ec397aead8c1c5', class: "cal" }, h("div", { key: '58f3acb8a74558505aab88e95fbea15bc65cce2f', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '9249edf79de99180871667f813aa40e288f130b7', class: "cal__nav-group" }, h("button", { key: '2cb250065f64860466b141b6dcaffeef60158dcc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '15ebc01c5be71b48042735ee6247ad16a957493b', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'dc74fc8780144c952c7012cf0e984998650e96a7', name: "caret-left", size: 16 })), h("button", { key: 'e4d2ee75a2c8fa818d327a9d82fa23051ec8a24c', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'd489365423552d000655898ac267fdbfddd216c0', name: "caret-right", size: 16 }))), h("h2", { key: '370e61c61a12860d36b4a04cdbc5dee447fdfe46', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: '12c11a1954cd53034be9717fc5fdd80c4195ae6f', class: "cal" }, h("div", { key: '44e56be42b6ac944983a6ba29e4aba95c67589ab', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '26db9f5e32e604bf6d3f5645b14a92510d224f4c', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '40878237f7d076531fa210b0b765087923e0256f', class: "cal__title-group" }, h("button", { key: '59bb0f5d15e834f95f54a7a2575dc097d213d5ce', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '0db880709e17ab918507bcf9ee0377dd260fbb10', name: "caret-left", size: 16 })), h("h2", { key: '772eb75bb0f749c78da037e0fb918cfa2dd3bc12', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '3ec51c2cd9485841aee0b7b9145756e1721791e3', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '95d54c3fcd198d16ae8d874afe558480323b993c', 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: '26677d79d63d957315c09df9b18597009c9681cc', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { 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, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (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: 'c866ef7e6117d662309e57805511a024640fd18d', 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"; }
@@ -177,7 +254,7 @@ export class CoEventCalendar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Active view. Phase 1 ships `month`; week/day/agenda land in later phases."
+                    "text": "Active view. `month`/`week`/`day` are implemented; `agenda` is pending."
                 },
                 "getter": false,
                 "setter": false,
@@ -412,12 +489,12 @@ export class CoEventCalendar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Record<string, { backgroundColor?: string; borderColor?: string }> | string",
+                    "original": "StatusColorsProp",
                     "resolved": "string | undefined | { backgroundColor?: string | undefined; borderColor?: string | undefined; }",
                     "references": {
-                        "Record": {
+                        "StatusColorsProp": {
                             "location": "global",
-                            "id": "global::Record"
+                            "id": "global::StatusColorsProp"
                         }
                     }
                 },
@@ -451,6 +528,166 @@ export class CoEventCalendar {
                 "reflect": false,
                 "attribute": "default-duration-minutes",
                 "defaultValue": "60"
+            },
+            "allDaySlot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the all-day lane in week/day views."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-day-slot",
+                "defaultValue": "true"
+            },
+            "minTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible-hours window for week/day (minutes-of-day bounds as \"HH:mm\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-time",
+                "defaultValue": "'00:00'"
+            },
+            "maxTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-time",
+                "defaultValue": "'24:00'"
+            },
+            "slotMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slot/snap granularity (minutes) for week/day."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slot-minutes",
+                "defaultValue": "15"
+            },
+            "snapMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-minutes",
+                "defaultValue": "15"
+            },
+            "scrollTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial scroll position for week/day (\"HH:mm\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-time",
+                "defaultValue": "'07:00'"
+            },
+            "nowIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the current-time indicator in week/day."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "now-indicator",
+                "defaultValue": "true"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cargando eventos: se propaga a la grilla (mes/timegrid), que reemplaza\nSUS chips por bloques skeleton y conserva toda su estructura \u2014 bordes,\ncabecera de d\u00EDas, eje de horas. El toolbar sigue operable y nada se\ndesmonta, as\u00ED no se pierde el scroll de semana/d\u00EDa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
             }
         };
     }
@@ -471,14 +708,18 @@ export class CoEventCalendar {
                     "text": "An event chip was activated."
                 },
                 "complexType": {
-                    "original": "{ event: NormalizedEvent }",
-                    "resolved": "{ event: NormalizedEvent; }",
+                    "original": "{ event: NormalizedEvent; rect: DOMRect | null }",
+                    "resolved": "{ event: NormalizedEvent; rect: DOMRect | null; }",
                     "references": {
                         "NormalizedEvent": {
                             "location": "import",
                             "path": "@prolibu-suite/cobalt-calendar-utils",
                             "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
                             "referenceLocation": "NormalizedEvent"
+                        },
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
                         }
                     }
                 }
@@ -493,9 +734,14 @@ export class CoEventCalendar {
                     "text": "A date/range was selected (create request)."
                 },
                 "complexType": {
-                    "original": "{ start: string; end: string; allDay: boolean }",
-                    "resolved": "{ start: string; end: string; allDay: boolean; }",
-                    "references": {}
+                    "original": "{\n    start: string;\n    end: string;\n    allDay: boolean;\n    /** Viewport-anchored rect of the selected day/range, for the host to anchor a quick-create bubble. */\n    rect: DOMRect | { top: number; left: number; width: number; height: number } | null;\n  }",
+                    "resolved": "{ start: string; end: string; allDay: boolean; rect: DOMRect | { top: number; left: number; width: number; height: number; } | null; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
                 }
             }, {
                 "method": "coEventDrop",
@@ -519,6 +765,32 @@ export class CoEventCalendar {
                         }
                     }
                 }
+            }, {
+                "method": "coEventDblClick",
+                "name": "coEventDblClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event chip was double-activated (direct-edit request)."
+                },
+                "complexType": {
+                    "original": "{ event: NormalizedEvent; rect: DOMRect | null }",
+                    "resolved": "{ event: NormalizedEvent; rect: DOMRect | null; }",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        },
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                }
             }, {
                 "method": "coDatesSet",
                 "name": "coDatesSet",
@@ -573,6 +845,32 @@ export class CoEventCalendar {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearRangeSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpia el resaltado persistente de selecci\u00F3n de la vista activa (timegrid\no month) \u2014 lo llama el host al cerrar su bubble/form de creaci\u00F3n.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "date",
@@ -618,3 +916,8 @@ function zonedDay(ms, timeZone) {
     }).format(new Date(ms));
     return parts; // en-CA → "YYYY-MM-DD"
 }
+/** UTC Date for a date-only key — safe for Intl formatting (no tz drift). */
+function utcDate(dateKey) {
+    const [y, mo, d] = dateKey.split('-').map(Number);
+    return new Date(Date.UTC(y, mo - 1, d, 12)); // noon UTC avoids any date rollover
+}

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

@@ -0,0 +1,26 @@
+:host { display: contents; }
+.pop {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  width: 400px;
+  max-width: calc(100vw - 24px);
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-md, 14px);
+  box-shadow: var(--co-shadow-xl, var(--co-shadow-lg));
+  padding: 0;
+  z-index: 1000;
+  font-family: var(--co-font-family-primary);
+  color: var(--co-semantic-text-default);
+  animation: co-pop-in 0.15s cubic-bezier(0.05, 0.7, 0.1, 1);
+  outline: none;
+}
+@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }
+@keyframes co-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+.pop__actions { display: flex; justify-content: flex-end; gap: var(--co-spacing-xxs); padding: var(--co-spacing-sm2) var(--co-spacing-sm2) 0; }
+.pop__head { display: flex; gap: var(--co-spacing-md); padding: var(--co-spacing-xs) var(--co-spacing-xl) var(--co-spacing-xl); }
+.pop__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: var(--co-border-radius-xxs); margin-top: 5px; background: var(--co-color-primary-azul); }
+.pop__body { min-width: 0; flex: 1 1 auto; }