@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

package/dist/collection/components/co-breadcrumb-item/co-breadcrumb-item.js

@@ -0,0 +1,169 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single navigable crumb inside a `co-breadcrumb`.
+ *
+ * Renders a leading separator icon (hidden on the first crumb via CSS
+ * `:host(:first-child)`) followed by the clickable content — an optional
+ * leading icon and the label. Clicking (or Enter/Space) emits `coSelect` with
+ * the crumb's `value` (falling back to its `label`).
+ *
+ * Conventions mirror `co-menu-item`: the `current` crumb paints medium weight +
+ * text-default ink; earlier crumbs are regular weight + muted (gray-500).
+ */
+export class CoBreadcrumbItem {
+    constructor() {
+        /** Marks this crumb as the current (last) page — medium weight + text-default ink. */
+        this.current = false;
+        /** Leading separator icon (size 13, gray-400). Hidden on the first crumb via
+         *  CSS. Set by the parent `co-breadcrumb`; defaults to `caret-right`. */
+        this.separator = 'caret-right';
+        this.emit = () => {
+            this.coSelect.emit(this.value || this.label || '');
+        };
+        this.handleClick = () => this.emit();
+        this.handleKeydown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.emit();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: '984f754b9123ff35cf5f0239ad4fc103498e47b4', part: "breadcrumb-item", class: {
+                'co-breadcrumb-item': true,
+                'co-breadcrumb-item--current': this.current,
+            } }, h("span", { key: '4eb611d93cd5bd980eec023e0295f5c6b8fd7901', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '858d8393d7025b0f2c128c9fa21420f37f2e5fca', name: this.separator, size: 13 })), h("span", { key: '8ca11884ee1fa419593925bc704e16026f376bfc', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '6fbbaaa99958fd14f67f0ca8441333e5410f546d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'a8b5c0170d2016e9a90a823341955a93d5ce8686', name: this.icon, size: 16 }))), h("span", { key: '77e9c2f8da437bc35bfb07e7d6caf3a959c96036', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '10cb84e411006ff74528ae4ee9610e560929535f' })))));
+    }
+    static get is() { return "co-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-breadcrumb-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown in the crumb."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value emitted by `coSelect`. Falls back to `label` when unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional leading icon (Phosphor name), size 16, inherits the crumb color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this crumb as the current (last) page \u2014 medium weight + text-default ink."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Leading separator icon (size 13, gray-400). Hidden on the first crumb via\nCSS. Set by the parent `co-breadcrumb`; defaults to `caret-right`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'caret-right'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coSelect",
+                "name": "coSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on click / Enter / Space with `value || label`. Bubbles + composed so\nconsumers can listen on the parent `co-breadcrumb`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -133,6 +133,29 @@
   opacity: 0.88;
 }
 
+/* ─── ELEVATED · secondary → white raised button ─────────────────
+   Opt-in via elevated + variant="secondary": shadow-sm resting lift
+   plus an inset hairline so it reads on a white surface. */
+.co-button--secondary.co-button--elevated {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8);
+}
+
+/* ─── ON-DARK SURFACE · ghost/stroke ─────────────────────────────
+   surface="dark": for buttons placed on a dark bar (e.g. a selection
+   bar). White ink/icon + a blanco-16 hover wash. Higher specificity
+   than the default variant + :hover rules above, so it wins. */
+.co-button--ghost.co-button--surface-dark,
+.co-button--stroke.co-button--surface-dark {
+  color: var(--co-color-base-blanco, #fff);
+}
+.co-button--ghost.co-button--surface-dark:hover:not(:disabled),
+.co-button--stroke.co-button--surface-dark:hover:not(:disabled) {
+  background: var(--co-color-opacity-blanco-16);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /* ─── ICON SLOTS ─────────────────────────────────────────────── */
 ::slotted([slot="icon-left"]),
 ::slotted([slot="icon-right"]) {

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

@@ -11,6 +11,10 @@ export class CoButton {
         this.shape = 'rounded';
         /** Size */
         this.size = 'm';
+        /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
+        this.elevated = false;
+        /** Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover. */
+        this.surface = 'light';
         /** Disabled state */
         this.disabled = false;
         /** Icon weight applied to both iconLeft and iconRight */
@@ -42,15 +46,17 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
+        return (h("button", { key: '7ecb9c79b6d2f333ad50f71847953ef676692a81', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
+                [`co-button--surface-${this.surface}`]: true,
+                'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '9ebae938e533d11c31899023bf35c8e071dabc6e' }, this.label), this.iconRight
+            : null, h("slot", { key: 'b7a325f24ec63c71121dfb74e82467e4b36fdd06' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -128,6 +134,46 @@ export class CoButton {
                 "attribute": "size",
                 "defaultValue": "'m'"
             },
+            "elevated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Raised elevation \u2014 with variant=\"secondary\" renders a white raised button (shadow-sm + inset hairline)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevated",
+                "defaultValue": "false"
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface the button sits on. On \"dark\", ghost/stroke variants switch to white ink + blanco-16 hover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

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

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

@@ -93,13 +93,13 @@
   color: var(--co-semantic-text-muted);
 }
 .co-calendar__cell--today {
-  border-color: var(--co-color-primary-azul);
+  border-color: var(--co-semantic-surface-primary);
   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);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 .co-calendar__cell--disabled {
@@ -190,15 +190,15 @@
  * never read the same (hard requirement).
  */
 .co-calendar__day--today {
-  border-color: var(--co-color-primary-azul);
+  border-color: var(--co-semantic-surface-primary);
   font-weight: 600;
 }
 
 /* SELECTED — solid fill + inverse text. */
 .co-calendar__day--selected {
-  background: var(--co-color-primary-azul);
-  border-color: var(--co-color-primary-azul);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 
@@ -211,7 +211,7 @@
 /* ── Range states ────────────────────────────────────────── */
 /* Middle of the range (incl. hover preview): soft tinted band. */
 .co-calendar__day--in-range {
-  background: var(--co-semantic-surface-hover);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 8%, transparent);
   border-radius: 0;
   color: var(--co-semantic-text-default);
 }
@@ -219,9 +219,9 @@
 /* Endpoints: solid fill + inverse text (same language as `selected`). */
 .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);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '7320bd2eb0ee092cf3499bd1d40d05cceb26a32f', class: "co-calendar", part: "root" }, h("div", { key: '1271d1d9a335b8d8a5bf206351e5b00a8e2f0528', class: "co-calendar__header", part: "header" }, 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 }, h("co-icon", { key: '84eefee59bfec282afd4e4ec66b5c73f1a96ee7f', name: "caret-left", size: 16 })), h("button", { key: 'bd214b4dc78e77bed5038bf6e9ce44f401857518', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'fb3eec407771f96375dfd6451065e20f627c3516', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), 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 }, 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()));
+        return (h("div", { key: '0ac8e641a51319d8c46c2c22dfa5d059d208060f', class: "co-calendar", part: "root" }, h("div", { key: 'b97ce34ea675a7936d80b47daafa1c2ee3db4325', class: "co-calendar__header", part: "header" }, h("button", { key: 'c02f19300f44dcc31fa233290449af38146fdc05', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '73bbc58da5b724b48aba584233e591eb196b1cba', name: "caret-left", size: 16 })), h("button", { key: '19f1a44b9f74c529c81c76f677c9ec08143c1b2a', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'f78863f1ac71fb17b49c3a8bd19d709c4f9326e4', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '13ab9824881a7346422fe178ccdb02ea279e6070', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '66611f127b366f9f8132bfb3354badfd9e562b99', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,7 @@ export class CoCalendarMonth {
         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) => {
+        return (h("div", { key: '94afb2cd963e8292d09dda372b7f115e235c8cd3', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '381021f254ac5f36d3d59e108cbe64f7f4fb1b91', 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);

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: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', class: {
+        return (h("div", { key: 'accbb972f6881a7e13b37a5523d10a3614730603', 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: '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 }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '282946088ac5d725587fbc21678e09b430ac2492', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '7a23d56c1c2024fe163f6d4dc8d484cf8b718901', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'dcec3cc0ab89d8e9b5abbc4bded028a18f5108a9', class: "co-card__body", part: "body" }, h("slot", { key: '94b9b7db62590372a19b87372c2c288658848896' })), h("div", { key: '8aa4852f91fdaa4ad785b7d6f90f6c9d1dffef99', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '3417ff7a18b113f42b172593e86fafc8268c613a', 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

@@ -55,6 +55,12 @@
   border-radius: var(--co-border-radius-xxs); /* 4px */
 }
 
+.co-checkbox--medium {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--co-spacing-sm); /* 6px */
+}
+
 .co-checkbox--large {
   width: 24px;
   height: 24px;
@@ -91,6 +97,11 @@
   height: 4px;
 }
 
+.co-checkbox--medium.co-checkbox--checked::after {
+  width: 8px;
+  height: 5px;
+}
+
 .co-checkbox--large.co-checkbox--checked::after {
   width: 10px;
   height: 6px;
@@ -115,6 +126,11 @@
   height: 1.5px;
 }
 
+.co-checkbox--medium.co-checkbox--indeterminate::after {
+  width: 10px;
+  height: 1.75px;
+}
+
 .co-checkbox--large.co-checkbox--indeterminate::after {
   width: 12px;
   height: 2px;
@@ -127,6 +143,53 @@
   pointer-events: none;
 }
 
+/* ─── OVERLAY appearance (Drive selection chip) ─────────────── */
+/* Standalone frosted rounded square, no label, bespoke inline SVG glyphs. */
+.co-checkbox--overlay {
+  border-radius: 6px;
+}
+
+.co-checkbox--overlay.co-checkbox--small {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+}
+
+.co-checkbox--overlay.co-checkbox--medium,
+.co-checkbox--overlay.co-checkbox--large {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+}
+
+/* Unchecked → frosted white chip with a hairline inset border */
+.co-checkbox--overlay:not(.co-checkbox--checked):not(.co-checkbox--indeterminate) {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
+  border: none;
+}
+
+/* Checked / indeterminate → solid accent fill (overridable via the on-color prop) */
+.co-checkbox--overlay.co-checkbox--checked,
+.co-checkbox--overlay.co-checkbox--indeterminate {
+  background: var(--co-color-primary-azul, #2563eb);
+  border: none;
+  box-shadow: none;
+}
+
+/* Overlay uses inline SVG glyphs, so suppress the default ::after check/dash */
+.co-checkbox--overlay.co-checkbox--checked::after,
+.co-checkbox--overlay.co-checkbox--indeterminate::after {
+  content: none;
+}
+
+.co-checkbox__glyph {
+  display: block;
+  width: 100%;
+  height: 100%;
+  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

@@ -5,12 +5,18 @@ export class CoCheckbox {
         this.checked = false;
         /** Indeterminate state (partial selection) — visual only, overrides checked appearance */
         this.indeterminate = false;
-        /** Size: small=16px, large=24px */
+        /** Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px) */
         this.size = 'small';
         /** Disabled state */
         this.disabled = false;
         /** Value for checkbox group usage */
         this.value = '';
+        /**
+         * Visual appearance:
+         * - 'default' — the standard labeled form checkbox (unchanged).
+         * - 'overlay' — a standalone frosted rounded selection chip (Drive), no label, bespoke SVG glyphs.
+         */
+        this.appearance = 'default';
         this.handleClick = () => {
             if (!this.disabled) {
                 if (this.indeterminate) {
@@ -26,16 +32,22 @@ export class CoCheckbox {
         };
     }
     render() {
-        return (h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
+        const isOverlay = this.appearance === 'overlay';
+        const isOn = this.checked || this.indeterminate;
+        // Only override the fill when a custom color is provided AND the box is "on".
+        // Leaving this undefined keeps the default appearance byte-identical to before.
+        const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
+        return (h("div", { key: 'b52aa4d0412e9ab8b170f11d7a323bbbc80057e5', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: 'd3a1caff03ad0358ea005bcb88a8ad607e9d3d24', 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--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: 'e6783c1035b4c9f8bb529b4a8f7efc75d9bb093a', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '19c92d5cd4cbda22338c1a675cabf444e5f58bfc', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: 'b84d28ddb24652658b0afc88bafce1a3ae7a83c6', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b5e21ca2634667abca82f16d30a6952ab8ccbc88', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: 'f311bec251f6fd375d81dcd06cafdb380d6206f0', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -95,15 +107,15 @@ export class CoCheckbox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'large'",
-                    "resolved": "\"large\" | \"small\"",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size: small=16px, large=24px"
+                    "text": "Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,6 +181,45 @@ export class CoCheckbox {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
+            },
+            "onColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent fill color used when checked/indeterminate. Defaults to the current design token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "on-color"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'overlay'",
+                    "resolved": "\"default\" | \"overlay\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual appearance:\n- 'default' \u2014 the standard labeled form checkbox (unchanged).\n- 'overlay' \u2014 a standalone frosted rounded selection chip (Drive), no label, bespoke SVG glyphs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -70,11 +70,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
+        return (h("div", { key: 'd3f34e7ee59ebcc1494ee6aabef1e4c476044dbd', 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 && (h("div", { key: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a47de05988ae37497154fc80e8cbf5f6f62bb1d4', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'fc39ff62eeea3136584a0667e71d816958a1ed57', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '205c1cbdbfcba6d882c7f4c27bfd633e55acea0f', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '33d6b03de2f2ba30afe1d1865a43ade7b8344f96', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -89,7 +89,7 @@ export class CoCheckboxGroup {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (h("div", { key: '7ac076bf100f66eb851d7e76e0b052d42fef69f8', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '7a13362e9a77a13ebb1e127ee57c10e7f64110fb', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '44e9f68fd19c5a50affde1eb743c3fc8e5eef8e4', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }