@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/collection/components/co-time-field/co-time-field.js

@@ -0,0 +1,536 @@
+import { h } from "@stencil/core";
+import { getDateStrings } from "../../utils/dateI18n";
+const PERIOD_LABEL_CACHE = new Map();
+/**
+ * Marcadores AM/PM localizados vía Intl (cacheados por locale a nivel de
+ * módulo — molde: `LABEL_FMT_CACHE` de co-date-time-picker.tsx). Nunca
+ * hardcodear "a. m./p. m.": en-US debe leer "AM"/"PM", no la forma es-CO.
+ */
+function dayPeriodLabels(locale) {
+    var _a, _b, _c, _d;
+    const hit = PERIOD_LABEL_CACHE.get(locale);
+    if (hit)
+        return hit;
+    const fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true });
+    const am = (_b = (_a = fmt.formatToParts(new Date(2000, 0, 1, 9, 0)).find((p) => p.type === 'dayPeriod')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'AM';
+    const pm = (_d = (_c = fmt.formatToParts(new Date(2000, 0, 1, 21, 0)).find((p) => p.type === 'dayPeriod')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'PM';
+    const out = { am, pm };
+    PERIOD_LABEL_CACHE.set(locale, out);
+    return out;
+}
+/**
+ * Campo de hora segmentado (patrón React Aria TimeField): una parte enfocable
+ * por unidad — hora, minuto y a. m./p. m. (solo `hour12`). El VALOR es
+ * minutos-del-día (0–1439), tz-free a propósito: la zona es problema del host.
+ *
+ * Editar NO committea: cada edición válida emite `coInput` (draft). Enter emite
+ * `coCommit`; Escape emite `coEscape`. El host decide qué hacer con cada uno
+ * (co-date-time-picker: coInput→draft, coCommit→commit+close).
+ * `coEscape` = anuncio de intención; el picker NO lo wirea — ver
+ * co-date-time-picker.tsx (Escape lo posee su root handler).
+ */
+export class CoTimeField {
+    constructor() {
+        /** Minutos del día (0–1439) o null (vacío). */
+        this.value = null;
+        /** Reloj de 12 h. `false` = 00–23 sin segmento de período. */
+        this.hour12 = true;
+        this.locale = 'es-CO';
+        this.disabled = false;
+        /** Paso de PageUp/PageDown sobre el minuto. */
+        this.pageStep = 15;
+        this.hour24 = null; // 0–23
+        this.minute = null; // 0–59
+        this.focused = null;
+        /** Buffer de dígitos del segmento en edición (se resetea al cambiar de foco). */
+        this.buffer = '';
+        this.onSegKeyDown = (seg) => (e) => {
+            var _a;
+            if (this.disabled)
+                return;
+            const k = e.key;
+            if (k === 'Enter') {
+                e.preventDefault();
+                const m = this.minutesOfDay();
+                if (m != null)
+                    this.coCommit.emit(m);
+                return;
+            }
+            if (k === 'Escape') {
+                // stopPropagation NO: el host (picker) también escucha Escape en su root;
+                // acá solo se anuncia la intención y el host decide.
+                e.preventDefault();
+                this.coEscape.emit();
+                return;
+            }
+            if (k === 'ArrowUp' || k === 'ArrowDown') {
+                e.preventDefault();
+                this.buffer = '';
+                this.stepSegment(seg, k === 'ArrowUp' ? 1 : -1);
+                return;
+            }
+            if (k === 'PageUp' || k === 'PageDown') {
+                e.preventDefault();
+                this.buffer = '';
+                const step = Math.max(1, Math.round(this.pageStep)) * (k === 'PageUp' ? 1 : -1);
+                const cur = (_a = this.minutesOfDay()) !== null && _a !== void 0 ? _a : 9 * 60;
+                const next = (cur + step + 1440) % 1440;
+                this.hour24 = Math.floor(next / 60);
+                this.minute = next % 60;
+                this.emitDraft();
+                return;
+            }
+            if (k === 'ArrowLeft' || k === 'ArrowRight') {
+                e.preventDefault();
+                this.buffer = '';
+                const order = this.hour12 ? ['hour', 'minute', 'period'] : ['hour', 'minute'];
+                const i = order.indexOf(seg) + (k === 'ArrowRight' ? 1 : -1);
+                const target = order[Math.max(0, Math.min(order.length - 1, i))];
+                if (target !== seg)
+                    this.focusSegment(target);
+                return;
+            }
+            if (k === 'Backspace' || k === 'Delete') {
+                e.preventDefault();
+                this.buffer = '';
+                if (seg === 'hour') {
+                    this.hour24 = null;
+                    this.coInput.emit(null);
+                }
+                else if (seg === 'minute') {
+                    this.minute = null;
+                    this.coInput.emit(null);
+                }
+                return;
+            }
+            if (seg === 'period' && this.hour12 && /^[ap]$/i.test(k)) {
+                e.preventDefault();
+                const wantPm = k.toLowerCase() === 'p';
+                if (this.hour24 == null)
+                    this.hour24 = wantPm ? 21 : 9;
+                else if (wantPm !== this.isPm)
+                    this.hour24 = (this.hour24 + 12) % 24;
+                if (this.minute == null)
+                    this.minute = 0;
+                this.emitDraft();
+                return;
+            }
+            if (/^\d$/.test(k) && seg !== 'period') {
+                e.preventDefault();
+                this.typeDigit(seg, Number(k));
+            }
+        };
+        this.onStepperClick = (delta) => (e) => {
+            var _a;
+            // No robar el foco del segmento en edición.
+            e.preventDefault();
+            if (this.disabled)
+                return;
+            this.buffer = '';
+            this.stepSegment((_a = this.focused) !== null && _a !== void 0 ? _a : 'hour', delta);
+        };
+    }
+    componentWillLoad() {
+        this.syncFromValue(this.value);
+    }
+    syncFromValue(v) {
+        if (v == null || !Number.isFinite(v)) {
+            // El host limpió el value: sí vacía el estado, así que también invalida
+            // cualquier dígito a medio teclear.
+            this.buffer = '';
+            this.hour24 = null;
+            this.minute = null;
+            return;
+        }
+        const m = Math.max(0, Math.min(1439, Math.round(v)));
+        // No pisar el estado si ya representa este valor (evita loops host↔campo:
+        // el host suele hacer eco de cada `coInput` de vuelta en `value`, y ese
+        // eco NO debe borrar un dígito a medio teclear — este guard protege el
+        // buffer tanto como el estado).
+        if (this.minutesOfDay() === m)
+            return;
+        // El value externo sí difiere del estado actual: invalida el buffer.
+        this.buffer = '';
+        this.hour24 = Math.floor(m / 60);
+        this.minute = m % 60;
+    }
+    async focusInput() {
+        var _a;
+        (_a = this.hourEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // ── Derivados ──────────────────────────────────────────────
+    minutesOfDay() {
+        if (this.hour24 == null || this.minute == null)
+            return null;
+        return this.hour24 * 60 + this.minute;
+    }
+    get isPm() {
+        var _a;
+        return ((_a = this.hour24) !== null && _a !== void 0 ? _a : 0) >= 12;
+    }
+    /** Hora mostrada: 1–12 en 12 h, 0–23 en 24 h. */
+    displayHour() {
+        if (this.hour24 == null)
+            return null;
+        if (!this.hour12)
+            return this.hour24;
+        return this.hour24 % 12 || 12;
+    }
+    emitDraft() {
+        const m = this.minutesOfDay();
+        if (m != null)
+            this.coInput.emit(m);
+    }
+    // ── Edición ────────────────────────────────────────────────
+    setDisplayHour(h12) {
+        if (!this.hour12) {
+            this.hour24 = Math.max(0, Math.min(23, h12));
+        }
+        else {
+            const base = h12 % 12; // 12 → 0
+            this.hour24 = this.isPm ? base + 12 : base;
+        }
+        if (this.minute == null)
+            this.minute = 0;
+        this.emitDraft();
+    }
+    stepSegment(seg, delta) {
+        var _a, _b, _c;
+        if (seg === 'hour') {
+            const cur = (_a = this.hour24) !== null && _a !== void 0 ? _a : 9; // vacío: arranca en el default del picker (09)
+            this.hour24 = (cur + delta + 24) % 24;
+            if (this.minute == null)
+                this.minute = 0;
+        }
+        else if (seg === 'minute') {
+            const cur = (_b = this.minute) !== null && _b !== void 0 ? _b : 0;
+            this.minute = (cur + delta + 60) % 60;
+            if (this.hour24 == null)
+                this.hour24 = 9;
+        }
+        else {
+            this.hour24 = (((_c = this.hour24) !== null && _c !== void 0 ? _c : 9) + 12) % 24;
+            if (this.minute == null)
+                this.minute = 0;
+        }
+        this.emitDraft();
+    }
+    typeDigit(seg, d) {
+        this.buffer += String(d);
+        const n = Number(this.buffer);
+        if (seg === 'hour') {
+            const max = this.hour12 ? 12 : 23;
+            if (n > max) {
+                // El buffer se pasó: el dígito arranca una hora nueva.
+                this.buffer = String(d);
+            }
+            const v = Number(this.buffer);
+            if (this.hour12) {
+                if (v >= 1)
+                    this.setDisplayHour(v);
+            }
+            else if (this.buffer.length === 2 || v > 2) {
+                this.hour24 = Math.min(23, v);
+                if (this.minute == null)
+                    this.minute = 0;
+                this.emitDraft();
+            }
+            else if (v > 0) {
+                this.hour24 = v;
+                if (this.minute == null)
+                    this.minute = 0;
+                this.emitDraft();
+            }
+            // Avance automático: 2 dígitos, o el próximo dígito ya no puede extender.
+            const done = this.buffer.length === 2 || (this.hour12 ? v * 10 > 12 : v * 10 > 23);
+            if (done)
+                this.advanceFrom('hour');
+        }
+        else if (seg === 'minute') {
+            if (n > 59)
+                this.buffer = String(d);
+            const v = Number(this.buffer);
+            this.minute = v;
+            if (this.hour24 == null)
+                this.hour24 = 9;
+            this.emitDraft();
+            if (this.buffer.length === 2 || v > 5)
+                this.advanceFrom('minute');
+        }
+    }
+    advanceFrom(seg) {
+        this.buffer = '';
+        const order = this.hour12 ? ['hour', 'minute', 'period'] : ['hour', 'minute'];
+        const i = order.indexOf(seg);
+        const next = order[i + 1];
+        if (next)
+            this.focusSegment(next);
+    }
+    focusSegment(seg) {
+        var _a;
+        (_a = this.el.shadowRoot.querySelector(`.co-time-field__seg--${seg}`)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // ── Render ─────────────────────────────────────────────────
+    renderSeg(seg, t) {
+        const label = seg === 'hour' ? t.hourLabel : seg === 'minute' ? t.minuteLabel : t.dayPeriodLabel;
+        let text;
+        let now = null;
+        let min = 0;
+        let max = 59;
+        if (seg === 'hour') {
+            const dh = this.displayHour();
+            text = dh == null ? '––' : String(dh).padStart(2, '0');
+            now = dh;
+            min = this.hour12 ? 1 : 0;
+            max = this.hour12 ? 12 : 23;
+        }
+        else if (seg === 'minute') {
+            text = this.minute == null ? '––' : String(this.minute).padStart(2, '0');
+            now = this.minute;
+        }
+        else {
+            const empty = this.hour24 == null;
+            const { am, pm } = dayPeriodLabels(this.locale);
+            text = this.isPm ? pm : am;
+            now = empty ? null : this.isPm ? 1 : 0;
+            min = 0;
+            max = 1;
+        }
+        const isEmpty = (seg === 'hour' && this.hour24 == null) ||
+            (seg === 'minute' && this.minute == null) ||
+            (seg === 'period' && this.hour24 == null);
+        return (h("span", { ref: seg === 'hour' ? (el) => (this.hourEl = el) : undefined, class: {
+                'co-time-field__seg': true,
+                [`co-time-field__seg--${seg}`]: true,
+                'co-time-field__seg--empty': isEmpty,
+            }, role: "spinbutton", tabIndex: this.disabled ? -1 : 0, "aria-label": label, "aria-valuemin": String(min), "aria-valuemax": String(max), "aria-valuenow": now == null ? undefined : String(now), "aria-valuetext": isEmpty ? undefined : text, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.onSegKeyDown(seg), onFocus: () => {
+                this.focused = seg;
+                this.buffer = '';
+            }, onBlur: () => {
+                if (this.focused === seg)
+                    this.focused = null;
+            } }, text));
+    }
+    render() {
+        const t = getDateStrings(this.locale);
+        return (h("div", { key: 'e9feeca94b48ef78597c8a8aeb56e147cc639cac', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'a1b992c5bbb5dfd2dfec4aedadf7f432a218a36c', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: 'dbc63905e7c40a17e01dd2a7e69b914c9d5359e3', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: 'b48347646ac193984b5d247709280ef00569c5d8', class: "co-time-field__steppers" }, h("button", { key: '594b11fc3e26a3a6f72becbb6eed0896304dd773', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: 'd7467c53e0e863633c5efc0ce1574e43f2f317ad', name: "caret-up", size: 10 })), h("button", { key: 'c8a0e2aeeb202d09d7f6b96fadc10c96d2cd5b7c', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '4358757b857d4011f0b05dcb14b82f35057c7e64', name: "caret-down", size: 10 })))));
+    }
+    static get is() { return "co-time-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-time-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-time-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minutos del d\u00EDa (0\u20131439) o null (vac\u00EDo)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "hour12": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reloj de 12 h. `false` = 00\u201323 sin segmento de per\u00EDodo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-1-2",
+                "defaultValue": "true"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "pageStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Paso de PageUp/PageDown sobre el minuto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-step",
+                "defaultValue": "15"
+            },
+            "fieldLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del grupo cuando el host no pinta label visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hour24": {},
+            "minute": {},
+            "focused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Draft: cada edici\u00F3n v\u00E1lida (d\u00EDgitos, flechas, stepper, a/p).\n`null` = draft incompleto (el segmento qued\u00F3 vaciado por Backspace/Delete);\nel host conserva su \u00FAltimo draft v\u00E1lido en ese caso."
+                },
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                }
+            }, {
+                "method": "coCommit",
+                "name": "coCommit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enter: el host committea y cierra."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coEscape",
+                "name": "coEscape",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Escape: el host cierra sin aplicar."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFromValue"
+            }];
+    }
+}

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

@@ -235,26 +235,32 @@
 
 .co-toast {
   opacity: 0;
-  transform: translateY(8px) scale(0.98);
+  transform: translateY(16px) scale(0.97);
+  filter: blur(var(--co-motion-blur-sm));
 }
 
 .co-toast--in {
   opacity: 1;
   transform: none;
+  filter: none;
   transition:
-    opacity var(--co-motion-duration-base) var(--co-motion-ease-out),
-    transform var(--co-motion-duration-base) var(--co-motion-ease-out);
+    opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-slow) var(--co-motion-ease-out),
+    filter var(--co-motion-duration-slow) var(--co-motion-ease-out);
 }
 
-/* Success entra con pop: el transform rebota (spring) y dura un poco más.
- * La opacidad se queda en base/ease-out — un spring sobre opacity
- * sobrepasaría de 1 y el rebote no se vería, solo se recortaría.
+/* Success entra con pop: el transform rebota (spring). La duración es la
+ * MISMA (slow) que el resto de los toasts — solo cambia la curva del
+ * transform a spring; la opacidad se queda en base/ease-out porque un
+ * spring sobre opacity sobrepasaría de 1 y el rebote no se vería, solo se
+ * recortaría.
  * Ambas clases caen en el MISMO nodo, así que el selector compuesto tiene
  * más especificidad (0,2,0) que `.co-toast--in` (0,1,0) y gana sin depender
  * del orden. */
 .co-toast--in.co-toast--success {
   transition:
-    opacity var(--co-motion-duration-base) var(--co-motion-ease-out),
+    opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),
+    filter var(--co-motion-duration-slow) var(--co-motion-ease-out),
     transform var(--co-motion-duration-slow) var(--co-motion-ease-spring);
 }
 

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

@@ -180,7 +180,7 @@ export class CoToast {
                     "references": {
                         "CoToastActionsLayout": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
                         }
                     }
@@ -206,7 +206,7 @@ export class CoToast {
                     "references": {
                         "CoToastVariant": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastVariant"
                         }
                     }

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

@@ -26,8 +26,8 @@
   border-bottom-right-radius: var(--co-tbr-br, var(--co-toggle-button-radius));
   border-bottom-left-radius:  var(--co-tbr-bl, var(--co-toggle-button-radius));
   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));
+  -webkit-backdrop-filter: var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+          backdrop-filter: var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
   color: var(--co-semantic-text-default);
   font-family: var(--co-font-family-primary);
   font-weight: 500;
@@ -85,13 +85,17 @@
 /* Track variant — detached rounded pills that sit on the group's sunken track.
    The parent co-toggle-button-group[variant='track'] reflects variant='track'
    onto each child, so all styling below is fully self-contained per pill.
-   Connected variant is untouched. */
+   Connected variant is untouched.
+   Contraste: los NO seleccionados van en text-secondary (gray-600), no en muted
+   (gray-500 sobre gray-100 quedaba ilegible); todo semántico para que el track
+   se tematice en dark (las primitivas gray-* no tienen contraparte). */
 :host([variant='track']) .co-toggle-button {
-  height: 30px;
-  border-radius: 8px;
+  /* Knobs heredables (ver co-toggle-button-group.css): alto y radio de la pill. */
+  height: var(--co-toggle-pill-height, 30px);
+  border-radius: var(--co-toggle-pill-radius, 8px);
   border-color: transparent;
   background: transparent;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-secondary);
   box-shadow: none;
   padding: 0 12px;
   -webkit-backdrop-filter: none;
@@ -104,18 +108,20 @@
 }
 
 :host([variant='track']) .co-toggle-button:hover:not(:disabled) {
-  background: transparent;
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-hover);
+  color: var(--co-semantic-text-default);
 }
 
+/* Pill seleccionada: superficie de página + hairline (la sombra sola no la
+   separaba del track). */
 :host([variant='track']) .co-toggle-button--selected {
-  background: var(--co-color-base-blanco, #fff);
-  color: var(--co-color-base-negro, #1f1c1b);
-  border-color: transparent;
-  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04));
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+  border-color: var(--co-toggle-pill-border, var(--co-semantic-border-default));
+  box-shadow: var(--co-toggle-pill-shadow, var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)));
 }
 
 :host([variant='track']) .co-toggle-button--selected:hover:not(:disabled) {
-  background: var(--co-color-base-blanco, #fff);
-  border-color: transparent;
+  background: var(--co-semantic-surface-page);
+  border-color: var(--co-toggle-pill-border, var(--co-semantic-border-default));
 }

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

@@ -18,13 +18,13 @@ export class CoToggleButton {
     render() {
         const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: '01e466c86b14cbd508881c85a833e30281345a30', class: {
+        return (h("button", { key: '9f8e5b8b74b68e3682acf0b395474e1d9a8016d7', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: '395d8fb745fbcc903ce45bc5bba9b13b06f2ff7f', name: "leading" }), this.iconLeft && h("co-icon", { key: '372b60a45fc545e525162ff3760896ab77da36eb', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '6e37705d4e3911fc2333ba2929dbd0c06aeddbfa', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'a6390c8abc9d2e889485d9bf3a3f441af85fb13c', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'f955045a685046231355cb38bd4760022a68d726', name: "leading" }), this.iconLeft && h("co-icon", { key: '5b3d98920f33d46ab969c28adb94cf538cc1c0cb', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '05baa968d95fe2a2d573a290f453eadc86640417', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '8ed550925d947d56563c9dd9534b4e9941abb31a', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }