@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/esm/co-calendar-month.entry.js

@@ -0,0 +1,379 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { c as compareYMD, d as addDays, a as todayYMD, p as parseISO, g as getMonthMatrix, h as isDisabled, j as getWeekdayLabels } from './dates-tPYikBRJ.js';
+import { z as zonedDateKey, b as zonedMinutesOfDay, a as toUtcISO, c as getWallClock, w as wallClockToEpoch } from './tz-B6JZk8fL.js';
+
+/**
+ * layout-month.ts — lane assignment for the month grid.
+ *
+ * Multi-day (all-day) events render as continuous bars spanning day cells; they
+ * must keep a stable vertical lane across the days they cover, and overlapping
+ * events must not share a lane. Single-day chips (timed events, single all-day)
+ * are degenerate one-column bars. Days exceeding `maxLanes` report an overflow
+ * count for the "+N more" affordance.
+ *
+ * Days are addressed by a week matrix of "YYYY-MM-DD" keys (e.g. from
+ * `getMonthMatrix` in `@prolibu-suite/cobalt-date-utils`). Lexicographic string
+ * comparison is correct for ISO dates, so no Date objects are needed here.
+ */
+/** Inclusive day span of an event in calendar days. */
+function eventDaySpan(event, timeZone) {
+    if (event.allDay) {
+        // end is exclusive → last visible day is end - 1.
+        const firstDay = event.start.slice(0, 10);
+        const lastDay = addDays(event.end.slice(0, 10), -1);
+        if (compareYMD(lastDay, firstDay) < 0)
+            return { event, firstDay, lastDay: firstDay };
+        return { event, firstDay, lastDay };
+    }
+    // Timed events occupy their (wall-clock) start day in the month grid.
+    const day = timeZone ? zonedDateKey(event.startMs, timeZone) : event.start.slice(0, 10);
+    return { event, firstDay: day, lastDay: day };
+}
+function layoutMonth(events, weeks, options = {}) {
+    const maxLanes = options.maxLanes ?? Infinity;
+    const segments = [];
+    const overflow = {};
+    let laneCount = 0;
+    const spans = events
+        .map((e) => eventDaySpan(e, options.timeZone))
+        .filter((s) => s !== null);
+    weeks.forEach((days, weekIndex) => {
+        if (!days.length)
+            return;
+        const weekStart = days[0];
+        const weekEnd = days[days.length - 1];
+        const colOf = new Map(days.map((d, i) => [d, i]));
+        // Candidate segments intersecting this week.
+        const candidates = spans
+            .filter((s) => compareYMD(s.firstDay, weekEnd) <= 0 && compareYMD(weekStart, s.lastDay) <= 0)
+            .map((s) => {
+            const segFirst = compareYMD(s.firstDay, weekStart) >= 0 ? s.firstDay : weekStart;
+            const segLast = compareYMD(s.lastDay, weekEnd) <= 0 ? s.lastDay : weekEnd;
+            return {
+                span: s,
+                startCol: colOf.get(segFirst) ?? 0,
+                endCol: colOf.get(segLast) ?? days.length - 1,
+            };
+        })
+            // Multi-day/earlier events claim lanes first → stable, readable bars.
+            .sort((a, b) => a.startCol - b.startCol ||
+            b.endCol - b.startCol - (a.endCol - a.startCol) ||
+            a.span.event.startMs - b.span.event.startMs ||
+            (a.span.event.id < b.span.event.id ? -1 : 1));
+        const placed = [];
+        for (const cand of candidates) {
+            let lane = 0;
+            while (placed.some((p) => p.lane === lane && !(cand.endCol < p.startCol || cand.startCol > p.endCol))) {
+                lane++;
+            }
+            placed.push({ lane, startCol: cand.startCol, endCol: cand.endCol });
+            laneCount = Math.max(laneCount, lane + 1);
+            segments.push({
+                eventId: cand.span.event.id,
+                weekIndex,
+                lane,
+                startCol: cand.startCol,
+                endCol: cand.endCol,
+                isStart: compareYMD(cand.span.firstDay, weekStart) >= 0,
+                isEnd: compareYMD(cand.span.lastDay, weekEnd) <= 0,
+                continuesBefore: compareYMD(cand.span.firstDay, weekStart) < 0,
+                continuesAfter: compareYMD(cand.span.lastDay, weekEnd) > 0,
+            });
+        }
+    });
+    if (Number.isFinite(maxLanes)) {
+        for (const seg of segments) {
+            if (seg.lane >= maxLanes) {
+                for (let c = seg.startCol; c <= seg.endCol; c++) {
+                    const dk = weeks[seg.weekIndex][c];
+                    overflow[dk] = (overflow[dk] ?? 0) + 1;
+                }
+            }
+        }
+    }
+    return { segments, overflow, laneCount };
+}
+
+const coCalendarMonthCss = () => `:host{display:block;font-family:var(--co-font-family-primary);--co-cal-daynum-h:24px;--co-cal-lane-h:22px;--co-cal-min-week-h:92px;--co-cal-gap:2px;--co-cal-surface:var(--co-semantic-surface-page);--co-cal-border:var(--co-semantic-border-default);--co-cal-text:var(--co-semantic-text-default);--co-cal-text-muted:var(--co-semantic-text-muted);--co-cal-hover:var(--co-semantic-surface-hover);--co-cal-today-ring:var(--co-color-primary-azul);--co-cal-event-bg:var(--co-color-primary-azul);--co-cal-event-border:transparent;--co-cal-event-text:var(--co-color-base-blanco, #fff);--co-cal-event-text-light:var(--co-color-base-blanco, #fff);--co-cal-event-text-dark:var(--co-semantic-text-default)}.cal-month{display:flex;flex-direction:column;border:1px solid var(--co-cal-border);border-radius:var(--co-border-radius-xs);overflow:hidden;background:var(--co-cal-surface)}.cal-month__dow{display:grid;grid-template-columns:repeat(7, 1fr);border-bottom:1px solid var(--co-cal-border)}.cal-month__dow-cell{padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-10, 10px);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--co-cal-text-muted);text-align:right}.cal-month__week{position:relative;min-height:var(--co-cal-min-week-h)}.cal-month__week:not(:last-child){border-bottom:1px solid var(--co-cal-border)}.cal-month__days{display:grid;grid-template-columns:repeat(7, 1fr);height:100%;position:absolute;inset:0}.cal-month__day{border-right:1px solid var(--co-cal-border);padding:var(--co-spacing-xxs);cursor:pointer;transition:background 0.1s ease}.cal-month__day:last-child{border-right:0}.cal-month__day:hover{background:var(--co-cal-hover)}.cal-month__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:-2px}.cal-month__day--outside .cal-month__daynum{color:var(--co-cal-text-muted)}.cal-month__day--disabled{cursor:not-allowed;background:color-mix(in srgb, var(--co-cal-border) 20%, transparent)}.cal-month__day--drag-over{background:color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);box-shadow:inset 0 0 0 2px var(--co-cal-today-ring)}.cal-month__daynum{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:auto;float:right;font-size:var(--co-font-size-12, 12px);color:var(--co-cal-text);border-radius:var(--co-border-radius-full)}.cal-month__day--today .cal-month__daynum{background:var(--co-cal-today-ring);color:var(--co-color-base-blanco, #fff);font-weight:600}.cal-month__events{position:absolute;inset:0;pointer-events:none;}.cal-chip,.cal-month__more{position:absolute;height:calc(var(--co-cal-lane-h) - 3px);box-sizing:border-box;pointer-events:auto;display:flex;align-items:center;gap:var(--co-spacing-xxs);margin:0 3px;padding:0 var(--co-spacing-xs);border:1px solid var(--co-cal-event-border);border-radius:var(--co-border-radius-xxs);font-family:inherit;font-size:var(--co-font-size-12, 12px);line-height:1;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap}.cal-chip{background:var(--co-cal-event-bg);color:var(--co-cal-event-text)}.cal-chip:hover{filter:brightness(0.95)}.cal-chip:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal-chip--all-day{font-weight:500}.cal-chip__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--co-border-radius-full);background:var(--co-cal-event-bg)}.cal-chip:not(.cal-chip--all-day){background:transparent;color:var(--co-cal-text);border-color:transparent}.cal-chip:not(.cal-chip--all-day):hover{background:var(--co-cal-hover);filter:none}.cal-chip__time{flex:0 0 auto;color:var(--co-cal-text-muted);font-variant-numeric:tabular-nums}.cal-chip__title{overflow:hidden;text-overflow:ellipsis}.cal-chip__ext{flex:0 0 auto;opacity:0.8}.cal-chip--past{opacity:0.55}.cal-chip--locked{cursor:default}.cal-chip--external{border-style:dashed}.cal-chip--dragging{opacity:0.4}.cal-chip--continues-before{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}.cal-chip--continues-after{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.cal-month__more{background:transparent;color:var(--co-cal-text-muted);border-color:transparent;font-weight:600;font-size:var(--co-font-size-11, 11px)}.cal-month__more:hover{background:var(--co-cal-hover);color:var(--co-cal-text)}`;
+
+const CoCalendarMonth = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coDaySelect = createEvent(this, "coDaySelect", 3);
+        this.coEventClick = createEvent(this, "coEventClick", 3);
+        this.coEventDrop = createEvent(this, "coEventDrop", 3);
+        this.coMoreClick = createEvent(this, "coMoreClick", 3);
+        /** Normalized events to render (from the engine's `normalizeEvents`). */
+        this.events = [];
+        /** BCP-47 locale for weekday labels. */
+        this.locale = 'es-CO';
+        /** First day of week, 0=Sun..6=Sat. */
+        this.firstDayOfWeek = 1;
+        /** Master interaction gate. */
+        this.editable = true;
+        /** Allow empty-day click to request a create. */
+        this.selectable = true;
+        /** Max event lanes per day before "+N more". */
+        this.maxLanes = 3;
+        /** Day currently hovered while dragging an event. */
+        this.dragOverDate = null;
+        /** Id of the event being dragged. */
+        this.dragId = null;
+        this.onPointerUp = () => this.finishDrag();
+        this.handleKeyDown = (e) => {
+            const cur = this.focused;
+            let handled = true;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    this.moveFocus(addDays(cur, -1));
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(addDays(cur, 1));
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(addDays(cur, -7));
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(addDays(cur, 7));
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.selectDay(cur);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.focused = this.defaultFocus();
+    }
+    connectedCallback() {
+        window.addEventListener('pointerup', this.onPointerUp);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('pointerup', this.onPointerUp);
+    }
+    defaultFocus() {
+        const first = `${pad4(this.year)}-${pad2(this.month)}-01`;
+        const today = todayYMD();
+        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);
+    }
+    isDayInteractable(date) {
+        return !isDisabled(date, { min: this.minDate, max: this.maxDate });
+    }
+    // ── Selection / activation ──────────────────────────────────────────────
+    selectDay(date) {
+        if (!this.selectable || !this.isDayInteractable(date))
+            return;
+        this.coDaySelect.emit({ date });
+    }
+    activateEvent(id) {
+        this.coEventClick.emit({ id });
+    }
+    // ── Keyboard (WAI-ARIA grid, forked from co-calendar) ───────────────────
+    moveFocus(next) {
+        this.focused = next;
+        requestAnimationFrame(() => this.focusCell());
+    }
+    focusCell() {
+        var _a, _b;
+        (_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) ─────────────────────────────────────────
+    startDrag(e, id) {
+        const ev = this.eventById(id);
+        if (!ev || !this.editable || ev.editable === false || ev.startEditable === false)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragId = id;
+        this.dragOverDate = null;
+    }
+    finishDrag() {
+        const id = this.dragId;
+        const target = this.dragOverDate;
+        this.dragId = null;
+        this.dragOverDate = null;
+        if (!id || !target)
+            return;
+        const ev = this.eventById(id);
+        if (!ev)
+            return;
+        const originDay = ev.allDay
+            ? ev.start.slice(0, 10)
+            : zonedDateKey(ev.startMs, this.timeZone);
+        const deltaDays = daysBetween(originDay, target);
+        if (deltaDays === 0)
+            return;
+        if (!this.isDayInteractable(target))
+            return;
+        const shifted = shiftEventByDays(ev, deltaDays, this.timeZone);
+        this.coEventDrop.emit({
+            id,
+            start: shifted.start,
+            end: shifted.end,
+            oldStart: ev.start,
+            oldEnd: ev.end,
+            allDay: ev.allDay,
+        });
+    }
+    // ── Render ──────────────────────────────────────────────────────────────
+    renderChip(seg, weekDays) {
+        var _a;
+        const ev = this.eventById(seg.eventId);
+        if (!ev)
+            return null;
+        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 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
+            ? ''
+            : minutesToLabel(zonedMinutesOfDay(ev.startMs, this.timeZone), this.locale);
+        const style = {
+            left: `${left}%`,
+            width: `${width}%`,
+            top: `calc(var(--co-cal-daynum-h) + ${seg.lane} * var(--co-cal-lane-h))`,
+        };
+        if (ev.backgroundColor) {
+            style['--co-cal-event-bg'] = ev.backgroundColor;
+            style['--co-cal-event-text'] = readableText(ev.backgroundColor);
+        }
+        if (ev.borderColor)
+            style['--co-cal-event-border'] = ev.borderColor;
+        return (h("button", { type: "button", key: `${seg.eventId}-${seg.weekIndex}`, class: {
+                'cal-chip': true,
+                'cal-chip--all-day': ev.allDay,
+                'cal-chip--past': isPast,
+                'cal-chip--external': isExternal,
+                'cal-chip--locked': locked,
+                'cal-chip--dragging': this.dragId === ev.id,
+                'cal-chip--continues-before': seg.continuesBefore,
+                'cal-chip--continues-after': seg.continuesAfter,
+            }, 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" })));
+    }
+    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 short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
+        const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
+        const today = todayYMD();
+        return (h("div", { key: '5e1309a20594ee3ceb749d95a5e4d56340f01b49', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '9d53a3162e162f1dcd47e9631d2d9220bd99b98d', 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);
+                const inMonth = ymd.month === this.month;
+                const isToday = compareYMD(date, today) === 0;
+                const isFocused = compareYMD(date, this.focused) === 0;
+                const interactable = this.isDayInteractable(date);
+                return (h("div", { role: "gridcell", "data-date": date, tabIndex: isFocused ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-disabled": interactable ? undefined : 'true', class: {
+                        'cal-month__day': true,
+                        'cal-month__day--outside': !inMonth,
+                        '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: () => {
+                        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) => {
+                var _a;
+                const more = (_a = layout.overflow[date]) !== null && _a !== void 0 ? _a : 0;
+                if (more <= 0)
+                    return null;
+                return (h("button", { type: "button", class: "cal-month__more", style: {
+                        left: `${(col / week.length) * 100}%`,
+                        width: `${(1 / week.length) * 100}%`,
+                        top: `calc(var(--co-cal-daynum-h) + ${this.maxLanes} * var(--co-cal-lane-h))`,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        this.coMoreClick.emit({ date });
+                    } }, "+", more));
+            }))));
+        })));
+    }
+    get el() { return getElement(this); }
+};
+// ── helpers ─────────────────────────────────────────────────────────────────
+function pad2(n) {
+    return String(n).padStart(2, '0');
+}
+function pad4(n) {
+    return String(n).padStart(4, '0');
+}
+/** Whole-day delta between two "YYYY-MM-DD" using UTC-midnight arithmetic. */
+function daysBetween(a, b) {
+    const [ay, am, ad] = a.split('-').map(Number);
+    const [by, bm, bd] = b.split('-').map(Number);
+    return Math.round((Date.UTC(by, bm - 1, bd) - Date.UTC(ay, am - 1, ad)) / 86400000);
+}
+/** Shift an event by N days, preserving wall-clock time (DST-correct for timed). */
+function shiftEventByDays(ev, deltaDays, timeZone) {
+    if (ev.allDay) {
+        return {
+            start: addDays(ev.start.slice(0, 10), deltaDays),
+            end: addDays(ev.end.slice(0, 10), deltaDays),
+        };
+    }
+    return {
+        start: toUtcISO(shiftInstant(ev.startMs, deltaDays, timeZone)),
+        end: toUtcISO(shiftInstant(ev.endMs, deltaDays, timeZone)),
+    };
+}
+function shiftInstant(ms, deltaDays, timeZone) {
+    const wc = getWallClock(ms, timeZone);
+    const newDate = addDays(`${pad4(wc.year)}-${pad2(wc.month)}-${pad2(wc.day)}`, deltaDays);
+    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);
+}
+/** Short localized time label, e.g. "9:00 a. m." / "09:00". */
+function minutesToLabel(minutes, locale) {
+    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));
+}
+/** 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)';
+}
+CoCalendarMonth.style = coCalendarMonthCss();
+
+export { CoCalendarMonth as co_calendar_month };

package/dist/esm/co-calendar_3.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
 import { g as getDateStrings } from './dateI18n-C1DCLOEl.js';
-import { b as addMonths, d as addDays, a as todayYMD, p as parseISO, i as isValidYMD, e as isDisabled, s as startOfMonth, c as compareYMD, g as getMonthLabel, h as getWeekdayLabels, j as getMonthMatrix, k as getFullDateLabel, f as formatDisplay, l as parseFlexible } from './dates-CyYF8IJE.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { b as addMonths, d as addDays, a as todayYMD, p as parseISO, i as isValidYMD, h as isDisabled, s as startOfMonth, c as compareYMD, e as getMonthLabel, j as getWeekdayLabels, g as getMonthMatrix, k as getFullDateLabel, f as formatDisplay, l as parseFlexible } from './dates-tPYikBRJ.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
 
 const coCalendarCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);--co-calendar-day-size:36px}:host([data-touch]){--co-calendar-day-size:44px}.co-calendar{display:flex;flex-direction:column;gap:var(--co-spacing-sm);width:max-content}.co-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-calendar__month{font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize}.co-calendar__title{display:inline-flex;align-items:center;gap:var(--co-spacing-xxs);background:none;border:0;cursor:pointer;font-family:inherit;font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize;padding:var(--co-spacing-xxs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs)}.co-calendar__title:hover{background:var(--co-semantic-surface-hover)}.co-calendar__title:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__title-caret{color:var(--co-semantic-text-muted)}.co-calendar__panel{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--co-spacing-xs);width:calc(var(--co-calendar-day-size) * 7 + 12px);padding-top:var(--co-spacing-xs)}.co-calendar__cell{height:calc(var(--co-calendar-day-size) + 8px);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--co-border-radius-xs);font-family:inherit;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);cursor:pointer;text-transform:capitalize;transition:background 0.1s ease, color 0.1s ease, border-color 0.1s ease}.co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected){background:var(--co-semantic-surface-hover)}.co-calendar__cell:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__cell--muted{color:var(--co-semantic-text-muted)}.co-calendar__cell--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__cell--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__cell--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-calendar__nav{background:none;border:0;cursor:pointer;padding:var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);display:inline-flex;align-items:center;color:var(--co-semantic-text-default)}.co-calendar__nav:hover{background:var(--co-semantic-surface-hover)}.co-calendar__nav:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__grid{display:flex;flex-direction:column;gap:2px}.co-calendar__row{display:grid;grid-template-columns:repeat(7, var(--co-calendar-day-size));gap:2px}.co-calendar__row--dow{margin-bottom:2px}.co-calendar__dow{height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10, 10px);font-weight:600;color:var(--co-semantic-text-muted);text-transform:uppercase;letter-spacing:0.04em}.co-calendar__day{width:var(--co-calendar-day-size);height:var(--co-calendar-day-size);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease, color 0.1s ease, border-color 0.1s ease}.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected){background:var(--co-semantic-surface-hover)}.co-calendar__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__day--outside{color:var(--co-semantic-text-muted)}.co-calendar__day--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__day--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed;pointer-events:none}.co-calendar__day--in-range{background:var(--co-semantic-surface-hover);border-radius:0;color:var(--co-semantic-text-default)}.co-calendar__day--range-start,.co-calendar__day--range-end{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--range-start:not(.co-calendar__day--range-end){border-top-right-radius:0;border-bottom-right-radius:0}.co-calendar__day--range-end:not(.co-calendar__day--range-start){border-top-left-radius:0;border-bottom-left-radius:0}`;
 
@@ -355,7 +355,7 @@ const CoCalendar = class {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '38278f3489400b035c01cfcdb5e5afbcc5000b21', class: "co-calendar", part: "root" }, h("div", { key: '0bcd5c42678b1057fb327853cacad03a8b49cdd1', class: "co-calendar__header", part: "header" }, h("button", { key: '6e7210ea64062171c0f94f463251e6373c01c348', 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: '053ff755d082dae52d5cce4b0338f795d56829b7', name: "caret-left", size: 16 })), h("button", { key: '70af310b739b910e850715ac626430c1a30e3479', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'b06bc1fb2aa4c8c31e53fa68eebade370d8026f9', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0eee7bed8085c2d3fd495f8b4152b359c3e246ad', 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: 'ffc4ff19f0ba3e69cb6b04a2888bc2a093f090be', 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: '7530e8888dab664df8e06d32941e274d843ce55d', class: "co-calendar", part: "root" }, h("div", { key: '6cac1b515387a43bd0cacbd825d30880c0966571', class: "co-calendar__header", part: "header" }, h("button", { key: '2f379184aa0b5fafa87f1cf93bea26d4e3bc8506', 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: '912670c171922fcd7b7c421f92f097192b397dd0', name: "caret-left", size: 16 })), h("button", { key: '2cda2492da31d641cabe5239f8433aaa6eb1b62b', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '7375f4f9a2a76ed885e70f47bd0b99375b62cd61', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '927c0cfef9cd230eb2b2fb308cb1c9b3485232eb', 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: 'c291b50461545f7e06e7eda52bcc1890b48ec2cd', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -409,7 +409,7 @@ function normalizeNumberArray(v) {
 }
 CoCalendar.style = coCalendarCss();
 
-const coDateFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-date-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-field__field-row{display:flex;align-items:stretch}.co-date-field--s .co-date-field__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-field--sm .co-date-field__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-field--lg .co-date-field__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}.co-date-field--s .co-date-field__input-wrapper,.co-date-field--sm .co-date-field__input-wrapper{min-height:0;padding:0}.co-date-field__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-date-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-date-field__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-date-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-date-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-date-field__clear--hidden{visibility:hidden;pointer-events:none}.co-date-field__clear:hover{color:var(--co-semantic-text-default)}.co-date-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-date-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-field--disabled .co-date-field__labels .co-date-field__label{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-date-field--disabled .co-date-field__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-field--disabled .co-date-field__native::placeholder{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__icon{color:var(--co-semantic-text-disabled)}.co-date-field--invalid .co-date-field__field{border-color:var(--co-semantic-status-error)}.co-date-field--invalid.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-field__helper--error .co-date-field__helper-icon,.co-date-field__helper--error .co-date-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-field__label{white-space:normal}:host([layout='horizontal']) .co-date-field>:not(.co-date-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coDateFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-date-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-field__field-row{display:flex;align-items:stretch}.co-date-field--s .co-date-field__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-field--sm .co-date-field__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-field--lg .co-date-field__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}.co-date-field--s .co-date-field__input-wrapper,.co-date-field--sm .co-date-field__input-wrapper{min-height:0;padding:0}.co-date-field__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-date-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-date-field__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-date-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-date-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-date-field__clear--hidden{visibility:hidden;pointer-events:none}.co-date-field__clear:hover{color:var(--co-semantic-text-default)}.co-date-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-date-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-field--disabled .co-date-field__labels .co-date-field__label{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-date-field--disabled .co-date-field__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-field--disabled .co-date-field__native::placeholder{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__icon{color:var(--co-semantic-text-disabled)}.co-date-field--invalid .co-date-field__field{border-color:var(--co-semantic-status-error)}.co-date-field--invalid.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-field__helper--error .co-date-field__helper-icon,.co-date-field__helper--error .co-date-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-field__label{white-space:normal}:host([layout='horizontal']) .co-date-field>:not(.co-date-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-date-field__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoDateField = class {
     constructor(hostRef) {
@@ -555,20 +555,20 @@ const CoDateField = class {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: 'bd42272c21a560d339158f2b82edd0cb61623e31', class: {
+        return (h("div", { key: '5ac31e35bf25f081826ab545e81905a584a4d4a7', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '210bac89442729649bf59f14eeecb4d3a1d53855', class: "co-date-field__labels" }, h("label", { key: '79a151b05d97b47cec8461c3bd32d0838d9e2d66', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '75a513ad61d0801863d2c01a1f5a2da2023e78d1', required: this.required })))), h("div", { key: 'ebe1983e55ef1a33f17faa95609ee076f957fcdb', class: "co-date-field__field-row" }, h("div", { key: 'b420fa05fbe6a9ea89f02284c52a0e3686cdbaaa', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '19f698a0798c1a32497a1d427ecbf8462027d400', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4aafe0476089a55f1defb4384101442bbc48fdf0', class: "co-date-field__input-wrapper" }, h("input", { key: '7170645098dfa8f08b7fad8f65d590cb22c098da', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '53bd2c0e74a031f5d351617fb7f12d7ed21e8269', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'bdae8bdc967b23279ec74d529a37364ec337f95b', class: "co-date-field__labels" }, h("label", { key: '0b12b042cebc4b0eb63db437e42e04aedfb53464', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'd75f215b97944fa284f5fd7551ea9064b6178680', required: this.required })))), h("div", { key: '46e3bf5add9a72130008e3b5813fed3ecbbaca95', class: "co-date-field__field-row" }, h("div", { key: 'ee34b6d0a3cb8e61fc04b6c4f1758ca8d64d793f', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '00fb0a1eda9a4fc85f859fce9382c1ff11e7589c', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8c57abb7af49e3779886b48d84fcc9c8e779588b', class: "co-date-field__input-wrapper" }, h("input", { key: 'c6cd280e83d99f3fdae60f52632d0ebeeebf6ca6', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '9fdf9250b8d15d25a3589c3439b76b5280146037', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '28dc6e38810c755d34fcbab2252f011999f0b4d3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '58146749042da81c9a2e0f71edd082fbf478297f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'b1d13979e2b54558950e15bc88f690888ca9345c', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '7ada74a22ec6a2256335e0ddf6da6afaa0b7a352', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'e7d9c399df18fcc9853e39a2098ba69e0da134f6', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '7548567c188927716305d008e29a6d374445a240', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'd4a8a63210d503600f5c268e4e8b920c81aca8d1', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6fc66017a9f1bedcb0e0e554643d504683860fbe', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '1f333eb340a795d57eb10994a2df16b5c791aa16', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '26e3c105607810fcfdedf864f5c182fc6d882d86', class: "co-date-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -611,7 +611,7 @@ function toNumberArray(v) {
 }
 CoDateField.style = coDateFieldCss();
 
-const coDrawerCss = () => `:host{display:contents}.co-drawer{position:fixed;background:var(--co-semantic-surface-page);display:flex;flex-direction:column;font-family:var(--co-font-family-primary);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;will-change:transform;z-index:1}.co-drawer--right{top:0;right:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(100% + 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--right.co-drawer--open{transform:translateX(0)}.co-drawer--left{top:0;left:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(-100% - 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--left.co-drawer--open{transform:translateX(0)}.co-drawer--bottom{bottom:0;left:0;right:0;margin:6px;width:auto;transform:translateY(calc(100% + 12px));box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);border-radius:24px}.co-drawer--bottom.co-drawer--open{transform:translateY(0)}.co-drawer--right.co-drawer--sm,.co-drawer--left.co-drawer--sm{width:400px;max-width:100vw}.co-drawer--right.co-drawer--md,.co-drawer--left.co-drawer--md{width:520px;max-width:100vw}.co-drawer--right.co-drawer--lg,.co-drawer--left.co-drawer--lg{width:720px;max-width:100vw}.co-drawer--right.co-drawer--xl,.co-drawer--left.co-drawer--xl{width:960px;max-width:100vw}.co-drawer--right.co-drawer--full,.co-drawer--left.co-drawer--full{width:100vw}.co-drawer--bottom.co-drawer--sm{height:40vh}.co-drawer--bottom.co-drawer--md{height:60vh}.co-drawer--bottom.co-drawer--lg{height:80vh}.co-drawer--bottom.co-drawer--xl{height:95vh}.co-drawer--bottom.co-drawer--full{height:100vh}.co-drawer__header{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-bottom:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__header-content{flex:1;min-width:0}.co-drawer__heading-row{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px)}.co-drawer__icon{flex-shrink:0;color:var(--co-semantic-text-secondary)}.co-drawer__heading{margin:0;font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-drawer__description{margin:var(--co-spacing-xs) 0 0;font-size:var(--co-font-size-13);font-weight:400;color:var(--co-semantic-text-muted);line-height:1.4}.co-drawer__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;flex-shrink:0}.co-drawer__close:hover{background:var(--co-semantic-surface-hover)}.co-drawer__close:focus-visible{outline:2px solid var(--co-color-primary-azul);outline-offset:2px}.co-drawer__tabs{flex-shrink:0;border-bottom:1px solid var(--co-semantic-border-default)}.co-drawer__tabs:empty{display:none}.co-drawer__body{flex:1;overflow-y:auto;padding:var(--co-spacing-xl);position:relative}.co-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__footer:empty{display:none}@media (max-width: 600px){.co-drawer--right,.co-drawer--left{width:100vw !important}}`;
+const coDrawerCss = () => `:host{display:contents}.co-drawer{position:fixed;background:var(--co-semantic-surface-page);display:flex;flex-direction:column;font-family:var(--co-font-family-primary);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;will-change:transform;z-index:1}.co-drawer--right{top:0;right:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:var(--co-shell-r, var(--co-border-radius-md));transform:translateX(calc(100% + 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--right.co-drawer--open{transform:translateX(0)}.co-drawer--left{top:0;left:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:var(--co-shell-r, var(--co-border-radius-md));transform:translateX(calc(-100% - 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--left.co-drawer--open{transform:translateX(0)}.co-drawer--bottom{bottom:0;left:0;right:0;margin:6px;width:auto;transform:translateY(calc(100% + 12px));box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);border-radius:var(--co-shell-r, var(--co-border-radius-md))}.co-drawer--bottom.co-drawer--open{transform:translateY(0)}.co-drawer--right.co-drawer--sm,.co-drawer--left.co-drawer--sm{width:400px;max-width:100vw}.co-drawer--right.co-drawer--md,.co-drawer--left.co-drawer--md{width:520px;max-width:100vw}.co-drawer--right.co-drawer--lg,.co-drawer--left.co-drawer--lg{width:720px;max-width:100vw}.co-drawer--right.co-drawer--xl,.co-drawer--left.co-drawer--xl{width:960px;max-width:100vw}.co-drawer--right.co-drawer--full,.co-drawer--left.co-drawer--full{width:100vw}.co-drawer--bottom.co-drawer--sm{height:40vh}.co-drawer--bottom.co-drawer--md{height:60vh}.co-drawer--bottom.co-drawer--lg{height:80vh}.co-drawer--bottom.co-drawer--xl{height:95vh}.co-drawer--bottom.co-drawer--full{height:100vh}.co-drawer__header{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-bottom:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__header-content{flex:1;min-width:0}.co-drawer__heading-row{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px)}.co-drawer__icon{flex-shrink:0;color:var(--co-semantic-text-secondary)}.co-drawer__heading{margin:0;font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-drawer__description{margin:var(--co-spacing-xs) 0 0;font-size:var(--co-font-size-13);font-weight:400;color:var(--co-semantic-text-muted);line-height:1.4}.co-drawer__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;flex-shrink:0}.co-drawer__close:hover{background:var(--co-semantic-surface-hover)}.co-drawer__close:focus-visible{outline:2px solid var(--co-color-primary-azul);outline-offset:2px}.co-drawer__tabs{flex-shrink:0;border-bottom:1px solid var(--co-semantic-border-default)}.co-drawer__tabs:empty{display:none}.co-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--co-spacing-xl);position:relative}.co-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__footer:empty{display:none}@media (max-width: 600px){.co-drawer--right,.co-drawer--left{width:100vw !important}}.co-drawer--modeless{z-index:1000;border:0;padding:0}.co-drawer--modeless.co-drawer--right{left:auto;bottom:auto}.co-drawer--modeless.co-drawer--left{right:auto;bottom:auto}.co-drawer--modeless.co-drawer--bottom{top:auto}`;
 
 const CoDrawer = class {
     constructor(hostRef) {
@@ -638,6 +638,12 @@ const CoDrawer = class {
         this.closeOnOverlay = true;
         /** Close when pressing Escape */
         this.closeOnEscape = true;
+        /** Render without the modal overlay: no scrim, no body-scroll lock — the
+         *  page behind stays fully interactive. The panel promotes itself to the
+         *  browser top layer (Popover API) so ancestor filters/transforms can't
+         *  clip it. Close vectors: X button, Escape, or the consumer flipping
+         *  `open` — there is deliberately no click-outside in this mode. */
+        this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
         this.handleOverlayClose = () => {
@@ -658,6 +664,23 @@ const CoDrawer = class {
             else
                 this.coAfterClose.emit();
         };
+        /** Modeless only: keep the aside promoted to the top layer for its whole
+         *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
+         *  automatic). */
+        this.promoteModeless = (el) => {
+            if (el)
+                this.asideEl = el;
+            const aside = this.asideEl;
+            if (!this.modeless || !aside || typeof aside.showPopover !== 'function')
+                return;
+            try {
+                if (!aside.matches(':popover-open'))
+                    aside.showPopover();
+            }
+            catch (_a) {
+                /* not connected yet or already shown — safe to ignore */
+            }
+        };
     }
     onOpenChange(next, prev) {
         if (next && !prev)
@@ -668,13 +691,20 @@ const CoDrawer = class {
             this.coClose.emit();
         }
     }
+    componentDidLoad() {
+        this.promoteModeless();
+    }
     render() {
-        return (h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
+        const aside = (h("aside", { class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
+                'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '3569d4b2a581eedc42637a769ab0d1e46f818c66', class: "co-drawer__header", part: "header" }, h("div", { key: '0e811a18325188b4e3ef4105370a88126ad1d98b', class: "co-drawer__header-content" }, h("slot", { key: '00f0249a2683fefc712de952055a229abdff2247', name: "header" }, h("div", { key: '8e817ae4ef809410799c66892a22f99f5f2bb053', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '4a1b54a9686c173c28e039cb54ba5d40a9327754', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: 'a09b2e8ffc080f8d73d8b480c32911bc1a36451f', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'bf2c3b8fca185608120387bbccb007317b34d09a', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: 'b1bb85ea967aac2c14e5d86324c222ce44d168ef', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'dd95e54ae9b3152d001b864cceba60cd65561580', name: "x", size: 20 })))), h("div", { key: '5049854b50e2e1f42faca4fc8c2fca705e4731a5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '13f4acf903542f287d7f8047280dfe4c211de1d3', name: "tabs" })), h("div", { key: '208ff3f785ae347a385518ac217eb05927366836', class: "co-drawer__body", part: "body" }, h("slot", { key: '938e78913ef13925b67512512a35a79f3f1a87c4' }), h("co-loader", { key: '624228401019ad3b8d3b14907268702c46c996e8', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '283d37c8784f59e77fc7009d98cf5dd83e71ed81', class: "co-drawer__footer", part: "footer" }, h("slot", { key: '85dfa2065ddca4b2ac6079aa50f85b0f61fdc8d0', name: "footer" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" }))));
+        if (this.modeless)
+            return aside;
+        return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, h, a as getElement } from './index-Es9IUmmt.js';
 
 const coCardCss = () => `:host{display:block}:host([stretch]){height:100%}.co-card{display:flex;flex-direction:column;font-family:var(--co-font-family-primary);background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);overflow:hidden;box-sizing:border-box}.co-card--stretch{height:100%}.co-card--elevated{box-shadow:0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06)}.co-card--outlined{border:1px solid var(--co-semantic-border-subtle)}.co-card--flat{background:var(--co-semantic-surface-muted)}.co-card--pad-none .co-card__header,.co-card--pad-none .co-card__body,.co-card--pad-none .co-card__footer{padding:0}.co-card--pad-none .co-card__header{border-bottom:none}.co-card--pad-none .co-card__footer{border-top:none}.co-card--pad-sm .co-card__header,.co-card--pad-sm .co-card__body,.co-card--pad-sm .co-card__footer{padding:var(--co-spacing-sm) var(--co-spacing-md)}.co-card--pad-md .co-card__header,.co-card--pad-md .co-card__body,.co-card--pad-md .co-card__footer{padding:var(--co-spacing-md) var(--co-spacing-lg)}.co-card--pad-lg .co-card__header,.co-card--pad-lg .co-card__body,.co-card--pad-lg .co-card__footer{padding:var(--co-spacing-lg) var(--co-spacing-xl)}.co-card__body{flex:1;display:flex;flex-direction:column}.co-card__header{border-bottom:1px solid var(--co-semantic-border-subtle)}.co-card__header--empty{display:none}.co-card__footer{border-top:1px solid var(--co-semantic-border-subtle)}.co-card__footer--empty{display:none}.co-card--clickable{cursor:pointer;transition:box-shadow 0.2s ease, transform 0.2s ease}.co-card--clickable:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);transform:translateY(-2px)}.co-card--clickable:active{transform:translateY(0)}.co-card--clickable:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}`;
 
@@ -28,13 +28,13 @@ const CoCard = class {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '367df4153fcf63fd11373169e970f3282a938337', class: {
+        return (h("div", { key: '72fa397d05359dbe75a84117cd328518e4c885b5', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'b4982545b85e282689a225cb80449af5892501ca', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'd0c52d3723f589791da10d7703682badb0f177af', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '93cff67dd2bf85783cbed1ae771ee3e785a055ae', class: "co-card__body", part: "body" }, h("slot", { key: 'faab1fb05116ffd7930c18f8e6d63ec0451a9148' })), h("div", { key: '82266309c58c84c4f893504183d1f73476421100', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '424742e9313399395d85cc46bf5b08561e836908', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'efb224124fed52da7033a9475d54a34413be7859', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '01a8316c7907504bb993e1b390296df915c23061', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'cc897cc225043eeabe37446b58ede6dc457dd110', class: "co-card__body", part: "body" }, h("slot", { key: '5ccece1199f62bec0eeb1d5facc585ea0e4a5a24' })), h("div", { key: '235025fb89b8b62e740c11b9decf47db36289636', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '4546f4d4e9947abfd3b10164ea86da7b96490130', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     get el() { return getElement(this); }
 };