@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-DxEFsH_t.js');
 
-const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-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))}.co-button--primary{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-button--secondary{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);color:var(--co-semantic-on-secondary);border-color:var(--co-semantic-border-subtle)}.co-button--stroke{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger{background:var(--co-semantic-status-error);color:var(--co-color-base-blanco);border-color:transparent}.co-button--success{background:var(--co-semantic-status-success);color:var(--co-color-base-blanco);border-color:transparent}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover) 60%, 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))}.co-button--danger:hover:not(:disabled),.co-button--success:hover:not(:disabled){opacity:0.88}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-button--primary{background:var(--co-semantic-surface-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary)}.co-button--stroke{background:transparent}}`;
+const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-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))}.co-button--primary{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-button--secondary{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);color:var(--co-semantic-on-secondary);border-color:var(--co-semantic-border-subtle)}.co-button--stroke{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger{background:var(--co-semantic-status-error);color:var(--co-color-base-blanco);border-color:transparent}.co-button--success{background:var(--co-semantic-status-success);color:var(--co-color-base-blanco);border-color:transparent}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover) 60%, 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))}.co-button--danger:hover:not(:disabled),.co-button--success:hover:not(:disabled){opacity:0.88}.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)}.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}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-button--primary{background:var(--co-semantic-surface-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary)}.co-button--stroke{background:transparent}}`;
 
 const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14 };
 const CoButton = class {
@@ -14,6 +14,10 @@ const CoButton = class {
         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 */
@@ -45,15 +49,17 @@ const CoButton = class {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (index.h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
+        return (index.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
             ? index.h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, index.h("slot", { key: '9ebae938e533d11c31899023bf35c8e071dabc6e' }, this.label), this.iconRight
+            : null, index.h("slot", { key: 'b7a325f24ec63c71121dfb74e82467e4b36fdd06' }, this.label), this.iconRight
             ? index.h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-DxEFsH_t.js');
 var dates = require('./dates-D8D-aS5d.js');
 var tz = require('./tz-Dgom0W69.js');
 
@@ -290,7 +290,7 @@ const CoCalendarMonth = class {
         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) => {
+        return (index.h("div", { key: '94afb2cd963e8292d09dda372b7f115e235c8cd3', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, index.h("div", { key: '381021f254ac5f36d3d59e108cbe64f7f4fb1b91', 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);

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-DxEFsH_t.js');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 var dates = require('./dates-D8D-aS5d.js');
-var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var requiredMark = require('./requiredMark-B3pKyqYI.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}`;
+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-semantic-surface-primary);font-weight:600}.co-calendar__cell--selected{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{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-semantic-surface-primary);font-weight:600}.co-calendar__day--selected{background:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);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:color-mix(in srgb, var(--co-semantic-surface-primary) 8%, transparent);border-radius:0;color:var(--co-semantic-text-default)}.co-calendar__day--range-start,.co-calendar__day--range-end{background:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);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}`;
 
 const CoCalendar = class {
     constructor(hostRef) {
@@ -357,7 +357,7 @@ const CoCalendar = class {
     render() {
         var _a, _b;
         const t = dateI18n.getDateStrings(this.locale);
-        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()));
+        return (index.h("div", { key: '0ac8e641a51319d8c46c2c22dfa5d059d208060f', class: "co-calendar", part: "root" }, index.h("div", { key: 'b97ce34ea675a7936d80b47daafa1c2ee3db4325', class: "co-calendar__header", part: "header" }, index.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 }, index.h("co-icon", { key: '73bbc58da5b724b48aba584233e591eb196b1cba', name: "caret-left", size: 16 })), index.h("button", { key: '19f1a44b9f74c529c81c76f677c9ec08143c1b2a', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), index.h("co-icon", { key: 'f78863f1ac71fb17b49c3a8bd19d709c4f9326e4', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), index.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 }, index.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()));
     }
     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: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 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-page);border:1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));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 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: '88be9ead58abc8f3c417e66482aa8f05fee57337', class: {
+        return (index.h("div", { key: '7c7de06d53bf9ab7dab40906d533bfaf1874e41e', 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: '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: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: '30828a7b19aae5f304a26ec5025dba14039060d2', class: "co-date-field__labels" }, index.h("label", { key: '0b004de41209191ee0a03cf8436eb4dba96bb99c', class: "co-date-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '810008c09dbc2fd5e889adc71230a546ab4e78df', required: this.required })))), index.h("div", { key: '8e488bd0ceb0b011fc4a903d66f3dd17a668cea3', class: "co-date-field__field-row" }, index.h("div", { key: '9a7fb685c5fc65ee9f731dba6c34a527044a1388', class: "co-date-field__field", part: "field" }, index.h("co-icon", { key: '81aa74d44ff1b524c253e278345c8add4fb3fe9f', name: "calendar", size: 16, class: "co-date-field__icon" }), index.h("div", { key: '4dc0d25d37fb8d099860566af1c2ac59d5111e4a', class: "co-date-field__input-wrapper" }, index.h("input", { key: '1aedac94aff9df44316509d9062e41f86a405a33', 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: '0e91b71755c341971064186ee1371d59353cdd1c', 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: '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: {
+            }, 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: 'c4714d0444f27adf4c85f9303d0a510cb63af406', name: "x-circle", size: 16, weight: "fill" }))))), this.name && index.h("input", { key: '257a873a76fdf65494778b1d514717ae2627f4ef', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (index.h("div", { key: '345fe8ad6fd0c5c512c038249f7d8f95ff286838', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, 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)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '32b6d53b1f8d78fdff90c960c039ac109c80c137', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), index.h("span", { key: '6f9ad478ddb4401d314ad7ef4fb98b21230b5ef1', 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;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 coDrawerCss = () => `:host{display:contents}.co-drawer{position:fixed;display:flex;flex-direction:column;font-family:var(--co-font-family-primary);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform;z-index:1;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));--co-drawer-r:var(--co-shell-r, var(--co-border-radius-md));--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>")}.co-drawer--right{top:0;right:0;margin:6px;height:100vh;height:-webkit-fill-available;transform:translateX(calc(100% + 12px))}.co-drawer--right.co-drawer--open{transform:translateX(0)}.co-drawer--left{top:0;left:0;margin:6px;height:100vh;height:-webkit-fill-available;transform:translateX(calc(-100% - 12px))}.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))}.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:672px;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__card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--co-semantic-surface-page);border-radius:0;-webkit-mask:var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat}.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, 13px);font-weight:400;color:var(--co-semantic-text-muted);line-height:1.4}.co-drawer__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;flex-shrink:0}.co-drawer__close:hover{background:var(--co-semantic-surface-hover)}.co-drawer__close:focus-visible{outline:2px solid var(--co-color-primary-azul);outline-offset:2px}.co-drawer__tabs{flex-shrink:0;border-bottom:1px solid var(--co-semantic-border-default)}.co-drawer__tabs:empty{display:none}.co-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--co-spacing-xl);position:relative}.co-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__footer:empty{display:none}@media (max-width: 600px){.co-drawer--right,.co-drawer--left{width:100vw !important}}.co-drawer--modeless{z-index:1000;border:0;padding:0;background:transparent}.co-drawer--modeless.co-drawer--right{left:auto;bottom:auto}.co-drawer--modeless.co-drawer--left{right:auto;bottom:auto}.co-drawer--modeless.co-drawer--bottom{top:auto}`;
 
 const CoDrawer = class {
     constructor(hostRef) {
@@ -640,6 +640,12 @@ const CoDrawer = class {
         this.closeOnOverlay = true;
         /** Close when pressing Escape */
         this.closeOnEscape = true;
+        /** Render without the modal overlay: no scrim, no body-scroll lock — the
+         *  page behind stays fully interactive. The panel promotes itself to the
+         *  browser top layer (Popover API) so ancestor filters/transforms can't
+         *  clip it. Close vectors: X button, Escape, or the consumer flipping
+         *  `open` — there is deliberately no click-outside in this mode. */
+        this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
         this.handleOverlayClose = () => {
@@ -660,23 +666,52 @@ const CoDrawer = class {
             else
                 this.coAfterClose.emit();
         };
+        /** Modeless only: keep the aside promoted to the top layer for its whole
+         *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
+         *  automatic). */
+        this.promoteModeless = (el) => {
+            if (el)
+                this.asideEl = el;
+            const aside = this.asideEl;
+            if (!this.modeless || !aside || typeof aside.showPopover !== 'function')
+                return;
+            try {
+                if (!aside.matches(':popover-open'))
+                    aside.showPopover();
+            }
+            catch (_a) {
+                /* not connected yet or already shown — safe to ignore */
+            }
+        };
     }
     onOpenChange(next, prev) {
         if (next && !prev)
             this.coOpen.emit();
     }
     handleKey(e) {
-        if (this.open && this.closeOnEscape && e.key === 'Escape') {
-            this.coClose.emit();
-        }
+        if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
+            return;
+        // A modeless drawer yields Escape while a MODAL surface is open on top
+        // (record/filter drawers, modals) — one Esc must not close both layers.
+        // Hosts are light-DOM with reflected props, so a document query works.
+        if (this.modeless && document.querySelector('co-drawer[open]:not([modeless]), co-modal[open]'))
+            return;
+        this.coClose.emit();
+    }
+    componentDidLoad() {
+        this.promoteModeless();
     }
     render() {
-        return (index.h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, index.h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
+        const aside = (index.h("aside", { class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
+                'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, 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" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { class: "co-drawer__card" }, index.h("header", { class: "co-drawer__header", part: "header" }, index.h("div", { class: "co-drawer__header-content" }, index.h("slot", { name: "header" }, index.h("div", { class: "co-drawer__heading-row" }, this.icon && index.h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), index.h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && index.h("p", { class: "co-drawer__description" }, this.description))), this.closable && (index.h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { name: "x", size: 20 })))), index.h("div", { class: "co-drawer__tabs", part: "tabs" }, index.h("slot", { name: "tabs" })), index.h("div", { class: "co-drawer__body", part: "body" }, index.h("slot", null), index.h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), index.h("footer", { class: "co-drawer__footer", part: "footer" }, index.h("slot", { name: "footer" })))));
+        if (this.modeless)
+            return aside;
+        return (index.h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));
     }
     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-BumlM92r.js');
+var index = require('./index-DxEFsH_t.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: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', class: {
+        return (index.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 }, 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 }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("div", { key: '282946088ac5d725587fbc21678e09b430ac2492', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, index.h("slot", { key: '7a23d56c1c2024fe163f6d4dc8d484cf8b718901', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: 'dcec3cc0ab89d8e9b5abbc4bded028a18f5108a9', class: "co-card__body", part: "body" }, index.h("slot", { key: '94b9b7db62590372a19b87372c2c288658848896' })), index.h("div", { key: '8aa4852f91fdaa4ad785b7d6f90f6c9d1dffef99', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '3417ff7a18b113f42b172593e86fafc8268c613a', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-DxEFsH_t.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: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}}`;
 
@@ -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: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
+        return (index.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 && (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: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: 'a47de05988ae37497154fc80e8cbf5f6f62bb1d4', class: "co-checkbox-group__labels" }, this.label && index.h("span", { key: 'fc39ff62eeea3136584a0667e71d816958a1ed57', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: '205c1cbdbfcba6d882c7f4c27bfd633e55acea0f', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '33d6b03de2f2ba30afe1d1865a43ade7b8344f96', 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: '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)))));
+        })), this.helperText && (index.h("div", { key: '7ac076bf100f66eb851d7e76e0b052d42fef69f8', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '7a13362e9a77a13ebb1e127ee57c10e7f64110fb', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), index.h("span", { key: '44e9f68fd19c5a50affde1eb743c3fc8e5eef8e4', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-DxEFsH_t.js');
 
-const coCheckboxCss = () => `:host{display:inline-flex;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-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--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--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--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--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox:not(.co-checkbox--checked){background:transparent}}`;
+const coCheckboxCss = () => `:host{display:inline-flex;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-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--medium{width:20px;height:20px;border-radius:var(--co-spacing-sm);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--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--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--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--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--medium.co-checkbox--checked::after{width:8px;height:5px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;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}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.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}.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}.co-checkbox--overlay.co-checkbox--checked,.co-checkbox--overlay.co-checkbox--indeterminate{background:var(--co-color-primary-azul, #2563eb);border:none;box-shadow:none}.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}}`;
 
 const CoCheckbox = class {
     constructor(hostRef) {
@@ -12,12 +12,18 @@ const CoCheckbox = class {
         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) {
@@ -33,16 +39,22 @@ const CoCheckbox = class {
         };
     }
     render() {
-        return (index.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 (index.h("div", { key: 'b52aa4d0412e9ab8b170f11d7a323bbbc80057e5', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.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 && (index.h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (index.h("svg", { key: 'e6783c1035b4c9f8bb529b4a8f7efc75d9bb093a', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '19c92d5cd4cbda22338c1a675cabf444e5f58bfc', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (index.h("svg", { key: 'b84d28ddb24652658b0afc88bafce1a3ae7a83c6', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.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 && (index.h("span", { key: 'f311bec251f6fd375d81dcd06cafdb380d6206f0', class: "co-checkbox__label", part: "label" }, this.label))));
     }
 };
 CoCheckbox.style = coCheckboxCss();