@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -0,0 +1,594 @@
+import { h, } from "@stencil/core";
+import { addDays, compareYMD, getMonthMatrix, getWeekdayLabels, isDisabled, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
+import { layoutMonth, getWallClock, wallClockToEpoch, toUtcISO, zonedDateKey, zonedMinutesOfDay, } from "@prolibu-suite/cobalt-calendar-utils";
+/**
+ * Month grid for the event calendar. Forks the day grid, roving-tabindex and
+ * keyboard model from `co-calendar`, then overlays multi-day event bars laid out
+ * by `layoutMonth` from the engine. Presentation + interaction only; the host
+ * (via `co-event-calendar`) owns data and persistence.
+ *
+ * Events are CONTROLLED through the `events` prop — drag emits a request, it does
+ * NOT mutate locally; the host re-renders with new data on success or leaves the
+ * old data on failure (that IS the revert).
+ *
+ * @part grid - The month grid container
+ */
+export class CoCalendarMonth {
+    constructor() {
+        /** 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: '24b0039f30c4d4e043c83a6c77caf55098d6207c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '29357a95920cf7e5f8ab3673f19c0872d3fb50ad', 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));
+            }))));
+        })));
+    }
+    static get is() { return "co-calendar-month"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-calendar-month.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-calendar-month.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NormalizedEvent[]",
+                    "resolved": "NormalizedEvent[]",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Normalized events to render (from the engine's `normalizeEvents`)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "year": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Year shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "year"
+            },
+            "month": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Month shown (1-12)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for weekday labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First day of week, 0=Sun..6=Sat."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "timeZone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IANA timezone used to place timed events on their wall-clock day."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-zone"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest interactable day \"YYYY-MM-DD\" (gates select/drag \u2014 past-block)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest interactable day \"YYYY-MM-DD\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Master interaction gate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "true"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow empty-day click to request a create."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            },
+            "maxLanes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max event lanes per day before \"+N more\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-lanes",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "dragOverDate": {},
+            "dragId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coDaySelect",
+                "name": "coDaySelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an empty day is selected (create request). Detail = \"YYYY-MM-DD\"."
+                },
+                "complexType": {
+                    "original": "{ date: string }",
+                    "resolved": "{ date: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coEventClick",
+                "name": "coEventClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an event chip is activated."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coEventDrop",
+                "name": "coEventDrop",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on a completed drag-move (day granularity)."
+                },
+                "complexType": {
+                    "original": "{\n    id: string;\n    start: string;\n    end: string;\n    oldStart: string;\n    oldEnd: string;\n    allDay: boolean;\n  }",
+                    "resolved": "{ id: string; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coMoreClick",
+                "name": "coMoreClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the \"+N more\" affordance is activated."
+                },
+                "complexType": {
+                    "original": "{ date: string }",
+                    "resolved": "{ date: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// ── 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)';
+}

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

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '367df4153fcf63fd11373169e970f3282a938337', class: {
+        return (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 }, 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: '5617eec250a9bf610ff946eea91a9ce3a9779407', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '62cc9bec88df0e538667425958addb114631a3a0', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2f47b30bece89900cf402bf4bfa6e8bc81a6a331', class: "co-card__body", part: "body" }, h("slot", { key: '252cd909fb7f094b7b806716b8e009858a1dd2c8' })), h("div", { key: 'aa2839cdf55f763bae3bd7fd61854ea0d513e9fa', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '0426f1e66c67a7b33789889a1daaea13f85969cc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,9 @@
 
 /* ─── UNCHECKED ─────────────────────────────────────────────── */
 .co-checkbox:not(.co-checkbox--checked) {
-  background: transparent;
+  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);
 }
 
@@ -124,3 +126,7 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-checkbox:not(.co-checkbox--checked) { background: transparent; }
+}

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

@@ -26,16 +26,16 @@ export class CoCheckbox {
         };
     }
     render() {
-        return (h("div", { key: 'f10bb5afb8820e35d6ba5ecdaccaf101e0b4b2ed', class: {
+        return (h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '191a4c3ce30ca393fe229626d0cb1166d18ba4ae', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (h("span", { key: 'e4d3641d5f6d2b6ea78f801d50cc62a21d566478', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, part: "box" }), this.label && (h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-checkbox-group/co-checkbox-group.css

@@ -114,7 +114,9 @@
 
 /* unchecked */
 .co-checkbox-group__box:not(.co-checkbox-group__box--checked) {
-  background: transparent;
+  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);
 }
 
@@ -222,3 +224,7 @@
   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; }
+}