@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -0,0 +1,381 @@
+'use strict';
+
+var index = require('./index-BumlM92r.js');
+var dates = require('./dates-D8D-aS5d.js');
+var tz = require('./tz-Dgom0W69.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 = dates.addDays(event.end.slice(0, 10), -1);
+        if (dates.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 ? tz.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) => dates.compareYMD(s.firstDay, weekEnd) <= 0 && dates.compareYMD(weekStart, s.lastDay) <= 0)
+            .map((s) => {
+            const segFirst = dates.compareYMD(s.firstDay, weekStart) >= 0 ? s.firstDay : weekStart;
+            const segLast = dates.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: dates.compareYMD(cand.span.firstDay, weekStart) >= 0,
+                isEnd: dates.compareYMD(cand.span.lastDay, weekEnd) <= 0,
+                continuesBefore: dates.compareYMD(cand.span.firstDay, weekStart) < 0,
+                continuesAfter: dates.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) {
+        index.registerInstance(this, hostRef);
+        this.coDaySelect = index.createEvent(this, "coDaySelect", 3);
+        this.coEventClick = index.createEvent(this, "coEventClick", 3);
+        this.coEventDrop = index.createEvent(this, "coEventDrop", 3);
+        this.coMoreClick = index.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(dates.addDays(cur, -1));
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(dates.addDays(cur, 1));
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(dates.addDays(cur, -7));
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(dates.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 = dates.todayYMD();
+        const t = dates.parseISO(today);
+        return t.year === this.year && t.month === this.month ? today : first;
+    }
+    get matrix() {
+        return dates.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 !dates.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)
+            : tz.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(tz.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 (index.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 && index.h("span", { class: "cal-chip__dot", "aria-hidden": "true" }), timeText && index.h("span", { class: "cal-chip__time" }, timeText), index.h("span", { class: "cal-chip__title" }, ev.title || '—'), isExternal && index.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 = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
+        const long = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
+        const today = dates.todayYMD();
+        return (index.h("div", { key: '24b0039f30c4d4e043c83a6c77caf55098d6207c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, index.h("div", { key: '29357a95920cf7e5f8ab3673f19c0872d3fb50ad', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (index.h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+            var _a;
+            return (index.h("div", { class: "cal-month__week", role: "row" }, index.h("div", { class: "cal-month__days" }, week.map((date) => {
+                const ymd = dates.parseISO(date);
+                const inMonth = ymd.month === this.month;
+                const isToday = dates.compareYMD(date, today) === 0;
+                const isFocused = dates.compareYMD(date, this.focused) === 0;
+                const interactable = this.isDayInteractable(date);
+                return (index.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;
+                    } }, index.h("span", { class: "cal-month__daynum" }, ymd.day)));
+            })), index.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 (index.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 index.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: dates.addDays(ev.start.slice(0, 10), deltaDays),
+            end: dates.addDays(ev.end.slice(0, 10), deltaDays),
+        };
+    }
+    return {
+        start: tz.toUtcISO(shiftInstant(ev.startMs, deltaDays, timeZone)),
+        end: tz.toUtcISO(shiftInstant(ev.endMs, deltaDays, timeZone)),
+    };
+}
+function shiftInstant(ms, deltaDays, timeZone) {
+    const wc = tz.getWallClock(ms, timeZone);
+    const newDate = dates.addDays(`${pad4(wc.year)}-${pad2(wc.month)}-${pad2(wc.day)}`, deltaDays);
+    const [y, m, d] = newDate.split('-').map(Number);
+    return tz.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();
+
+exports.co_calendar_month = CoCalendarMonth;

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DoFnrUVH.js');
+var index = require('./index-BumlM92r.js');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 var dates = require('./dates-D8D-aS5d.js');
-var requiredMark = require('./requiredMark-DA6y-4rp.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.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}`;
 
@@ -357,7 +357,7 @@ const CoCalendar = class {
     render() {
         var _a, _b;
         const t = dateI18n.getDateStrings(this.locale);
-        return (index.h("div", { key: '38278f3489400b035c01cfcdb5e5afbcc5000b21', class: "co-calendar", part: "root" }, index.h("div", { key: '0bcd5c42678b1057fb327853cacad03a8b49cdd1', class: "co-calendar__header", part: "header" }, index.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 }, index.h("co-icon", { key: '053ff755d082dae52d5cce4b0338f795d56829b7', name: "caret-left", size: 16 })), index.h("button", { key: '70af310b739b910e850715ac626430c1a30e3479', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), index.h("co-icon", { key: 'b06bc1fb2aa4c8c31e53fa68eebade370d8026f9', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), index.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 }, index.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 (index.h("div", { key: '7320bd2eb0ee092cf3499bd1d40d05cceb26a32f', class: "co-calendar", part: "root" }, index.h("div", { key: '1271d1d9a335b8d8a5bf206351e5b00a8e2f0528', class: "co-calendar__header", part: "header" }, index.h("button", { key: '456e7a68d6a910c8495e5cf7eeabd7fe13dce120', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, index.h("co-icon", { key: '84eefee59bfec282afd4e4ec66b5c73f1a96ee7f', name: "caret-left", size: 16 })), index.h("button", { key: 'bd214b4dc78e77bed5038bf6e9ce44f401857518', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), index.h("co-icon", { key: 'fb3eec407771f96375dfd6451065e20f627c3516', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), index.h("button", { key: '6063b0cbb2f4bef653e25b1087f43c8a9141dbac', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, index.h("co-icon", { key: '24d805b7ba812a0b3f33e58714e0378ca7c03944', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -411,7 +411,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) {
@@ -557,20 +557,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 (index.h("div", { key: 'bd42272c21a560d339158f2b82edd0cb61623e31', class: {
+        return (index.h("div", { key: '88be9ead58abc8f3c417e66482aa8f05fee57337', 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 && (index.h("div", { key: '210bac89442729649bf59f14eeecb4d3a1d53855', class: "co-date-field__labels" }, index.h("label", { key: '79a151b05d97b47cec8461c3bd32d0838d9e2d66', class: "co-date-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '75a513ad61d0801863d2c01a1f5a2da2023e78d1', required: this.required })))), index.h("div", { key: 'ebe1983e55ef1a33f17faa95609ee076f957fcdb', class: "co-date-field__field-row" }, index.h("div", { key: 'b420fa05fbe6a9ea89f02284c52a0e3686cdbaaa', class: "co-date-field__field", part: "field" }, index.h("co-icon", { key: '19f698a0798c1a32497a1d427ecbf8462027d400', name: "calendar", size: 16, class: "co-date-field__icon" }), index.h("div", { key: '4aafe0476089a55f1defb4384101442bbc48fdf0', class: "co-date-field__input-wrapper" }, index.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 && (index.h("button", { key: '53bd2c0e74a031f5d351617fb7f12d7ed21e8269', class: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: 'c916f0e36ba63ffdcf2a6cd08ffe295c93e9aa91', class: "co-date-field__labels" }, index.h("label", { key: '0d84f75656c45fff7e695ecea68d9e93b5031e7e', class: "co-date-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '3fc035181fb79cb0879736dfa91ff979d4d6f8ab', required: this.required })))), index.h("div", { key: 'e423c62b5ed75b52786732944be251ec4c565692', class: "co-date-field__field-row" }, index.h("div", { key: '6c902beccd2d3d50166c027d755c4bd9687fa770', class: "co-date-field__field", part: "field" }, index.h("co-icon", { key: '87ac25c7d1816069d60f488c7d4ca0ab6902954b', name: "calendar", size: 16, class: "co-date-field__icon" }), index.h("div", { key: 'ac1d1ee4b641ce034a5723487bf1bfb6f1f834ff', class: "co-date-field__input-wrapper" }, index.h("input", { key: '54d4478118e7c02185619b07a1c44034e2d0cbe0', 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 && (index.h("button", { key: '484bdacdb620dec400355efe868779f91ec352b7', 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" }, index.h("co-icon", { key: '28dc6e38810c755d34fcbab2252f011999f0b4d3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && index.h("input", { key: '58146749042da81c9a2e0f71edd082fbf478297f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (index.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" }, index.h("co-icon", { key: '9d5ce8fa3cf07062ac62fb50cd95bfd3841a6298', name: "x-circle", size: 16, weight: "fill" }))))), this.name && index.h("input", { key: '6bf071d3aaa3b02542860c5cd12156df1a34d6f3', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (index.h("div", { key: '39ac15b77ff7f6c7e710b714709f42a67decb4db', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: 'd4a8a63210d503600f5c268e4e8b920c81aca8d1', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), index.h("span", { key: '6fc66017a9f1bedcb0e0e554643d504683860fbe', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '2c652605bf6f0a04bb08a0fa679ffaace1aaa110', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), index.h("span", { key: 'c1022e560275a0f263af532304e948b78a0d4318', class: "co-date-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -613,7 +613,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: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;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}}`;
 
 const CoDrawer = class {
     constructor(hostRef) {
@@ -671,12 +671,12 @@ const CoDrawer = class {
         }
     }
     render() {
-        return (index.h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, index.h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
+        return (index.h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, index.h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
                 [`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 }, index.h("header", { key: '3569d4b2a581eedc42637a769ab0d1e46f818c66', class: "co-drawer__header", part: "header" }, index.h("div", { key: '0e811a18325188b4e3ef4105370a88126ad1d98b', class: "co-drawer__header-content" }, index.h("slot", { key: '00f0249a2683fefc712de952055a229abdff2247', name: "header" }, index.h("div", { key: '8e817ae4ef809410799c66892a22f99f5f2bb053', class: "co-drawer__heading-row" }, this.icon && index.h("co-icon", { key: '4a1b54a9686c173c28e039cb54ba5d40a9327754', name: this.icon, size: 20, class: "co-drawer__icon" }), index.h("h2", { key: 'a09b2e8ffc080f8d73d8b480c32911bc1a36451f', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && index.h("p", { key: 'bf2c3b8fca185608120387bbccb007317b34d09a', class: "co-drawer__description" }, this.description))), this.closable && (index.h("button", { key: 'b1bb85ea967aac2c14e5d86324c222ce44d168ef', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'dd95e54ae9b3152d001b864cceba60cd65561580', name: "x", size: 20 })))), index.h("div", { key: '5049854b50e2e1f42faca4fc8c2fca705e4731a5', class: "co-drawer__tabs", part: "tabs" }, index.h("slot", { key: '13f4acf903542f287d7f8047280dfe4c211de1d3', name: "tabs" })), index.h("div", { key: '208ff3f785ae347a385518ac217eb05927366836', class: "co-drawer__body", part: "body" }, index.h("slot", { key: '938e78913ef13925b67512512a35a79f3f1a87c4' }), index.h("co-loader", { key: '624228401019ad3b8d3b14907268702c46c996e8', overlay: true, visible: this.loading, part: "loader" })), index.h("footer", { key: '283d37c8784f59e77fc7009d98cf5dd83e71ed81', class: "co-drawer__footer", part: "footer" }, index.h("slot", { key: '85dfa2065ddca4b2ac6079aa50f85b0f61fdc8d0', name: "footer" })))));
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("header", { key: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, index.h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, index.h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, index.h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && index.h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), index.h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && index.h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (index.h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), index.h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, index.h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), index.h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, index.h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), index.h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), index.h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, index.h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', name: "footer" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DoFnrUVH.js');
+var index = require('./index-BumlM92r.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}`;
 
@@ -30,13 +30,13 @@ const CoCard = class {
         return nodes.length > 0;
     }
     render() {
-        return (index.h("div", { key: '367df4153fcf63fd11373169e970f3282a938337', class: {
+        return (index.h("div", { key: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', 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 }, index.h("div", { key: 'b4982545b85e282689a225cb80449af5892501ca', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, index.h("slot", { key: 'd0c52d3723f589791da10d7703682badb0f177af', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: '93cff67dd2bf85783cbed1ae771ee3e785a055ae', class: "co-card__body", part: "body" }, index.h("slot", { key: 'faab1fb05116ffd7930c18f8e6d63ec0451a9148' })), index.h("div", { key: '82266309c58c84c4f893504183d1f73476421100', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '424742e9313399395d85cc46bf5b08561e836908', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("div", { key: '5617eec250a9bf610ff946eea91a9ce3a9779407', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, index.h("slot", { key: '62cc9bec88df0e538667425958addb114631a3a0', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: '2f47b30bece89900cf402bf4bfa6e8bc81a6a331', class: "co-card__body", part: "body" }, index.h("slot", { key: '252cd909fb7f094b7b806716b8e009858a1dd2c8' })), index.h("div", { key: 'aa2839cdf55f763bae3bd7fd61854ea0d513e9fa', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '0426f1e66c67a7b33789889a1daaea13f85969cc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-checkbox-group.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DoFnrUVH.js');
+var index = require('./index-BumlM92r.js');
 
-const coCheckboxGroupCss = () => `: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-checkbox-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-checkbox-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-checkbox-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-checkbox-group--disabled .co-checkbox-group__label,.co-checkbox-group--disabled .co-checkbox-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__options{display:flex;gap:var(--co-spacing-md)}.co-checkbox-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-checkbox-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-checkbox-group__item--disabled{cursor:not-allowed}.co-checkbox-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-checkbox-group__item--disabled .co-checkbox-group__option-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease;overflow:hidden}.co-checkbox-group__box--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs)}.co-checkbox-group__box--large{width:24px;height:24px;border-radius:var(--co-spacing-sm)}.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:transparent;border:1px solid var(--co-semantic-border-subtle)}.co-checkbox-group__box--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox-group__box--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox-group__box--small.co-checkbox-group__box--checked::after{width:7px;height:4px}.co-checkbox-group__box--large.co-checkbox-group__box--checked::after{width:10px;height:6px}.co-checkbox-group__box--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox-group--error .co-checkbox-group__box:not(.co-checkbox-group__box--checked){border-color:var(--co-semantic-status-error)}.co-checkbox-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-checkbox-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-checkbox-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-checkbox-group__helper--error .co-checkbox-group__helper-icon,.co-checkbox-group__helper--error .co-checkbox-group__helper-text{color:var(--co-semantic-status-error)}.co-checkbox-group__helper--success .co-checkbox-group__helper-icon,.co-checkbox-group__helper--success .co-checkbox-group__helper-text{color:var(--co-semantic-status-success)}.co-checkbox-group__helper--warning .co-checkbox-group__helper-icon,.co-checkbox-group__helper--warning .co-checkbox-group__helper-text{color:var(--co-color-status-review)}.co-checkbox-group__helper--info .co-checkbox-group__helper-icon,.co-checkbox-group__helper--info .co-checkbox-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-checkbox-group{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-checkbox-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-checkbox-group__label{white-space:normal}:host([layout='horizontal']) .co-checkbox-group>:not(.co-checkbox-group__labels){grid-column:2;min-width:0}`;
+const coCheckboxGroupCss = () => `: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-checkbox-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-checkbox-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-checkbox-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-checkbox-group--disabled .co-checkbox-group__label,.co-checkbox-group--disabled .co-checkbox-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__options{display:flex;gap:var(--co-spacing-md)}.co-checkbox-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-checkbox-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-checkbox-group__item--disabled{cursor:not-allowed}.co-checkbox-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-checkbox-group__item--disabled .co-checkbox-group__option-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease;overflow:hidden}.co-checkbox-group__box--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs)}.co-checkbox-group__box--large{width:24px;height:24px;border-radius:var(--co-spacing-sm)}.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, 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)}.co-checkbox-group__box--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox-group__box--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox-group__box--small.co-checkbox-group__box--checked::after{width:7px;height:4px}.co-checkbox-group__box--large.co-checkbox-group__box--checked::after{width:10px;height:6px}.co-checkbox-group__box--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox-group--error .co-checkbox-group__box:not(.co-checkbox-group__box--checked){border-color:var(--co-semantic-status-error)}.co-checkbox-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-checkbox-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-checkbox-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-checkbox-group__helper--error .co-checkbox-group__helper-icon,.co-checkbox-group__helper--error .co-checkbox-group__helper-text{color:var(--co-semantic-status-error)}.co-checkbox-group__helper--success .co-checkbox-group__helper-icon,.co-checkbox-group__helper--success .co-checkbox-group__helper-text{color:var(--co-semantic-status-success)}.co-checkbox-group__helper--warning .co-checkbox-group__helper-icon,.co-checkbox-group__helper--warning .co-checkbox-group__helper-text{color:var(--co-color-status-review)}.co-checkbox-group__helper--info .co-checkbox-group__helper-icon,.co-checkbox-group__helper--info .co-checkbox-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-checkbox-group{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-checkbox-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-checkbox-group__label{white-space:normal}:host([layout='horizontal']) .co-checkbox-group>:not(.co-checkbox-group__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:transparent}}`;
 
 const CoCheckboxGroup = class {
     constructor(hostRef) {
@@ -77,11 +77,11 @@ const CoCheckboxGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (index.h("div", { key: '31a21f7d7b30ad1e0f55089aca62fd2aa0248a21', class: {
+        return (index.h("div", { key: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
                 'co-checkbox-group': true,
                 'co-checkbox-group--disabled': this.disabled,
                 [`co-checkbox-group--${this.status}`]: this.status !== 'default',
-            }, role: "group", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: '5475404c44f73b09f3948afa37d5ab2320e14036', class: "co-checkbox-group__labels" }, this.label && index.h("span", { key: 'ddd9771fce971ecbe05d038ef856db5efaa0e386', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: '31c3600460a9158f99ce938d6fb0d152cef24943', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: 'e8d24c155e3329d14669f7bd093334014ffdef14', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && index.h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -96,7 +96,7 @@ const CoCheckboxGroup = class {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), index.h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (index.h("div", { key: '26b079c180ca89b06b2bda56f7908655ffc4449d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: 'bac2a02e17019b394bacdc0a2da34487693f67c1', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), index.h("span", { key: 'b382acd3031974618a24a75e616faf637f84b75f', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (index.h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), index.h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{