@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/collection/components/co-gradient-bar/co-gradient-bar.js

@@ -0,0 +1,412 @@
+import { h } from "@stencil/core";
+import { gradientCss, hasTransparentStop, interpolateStopColor, opaqueColor, positionFromPointer, stepPosition, } from "../../utils/gradientStops";
+import { getGradientBarStrings } from "../../utils/gradientBarI18n";
+/**
+ * Barra de paradas de un degradado (popover de relleno del editor): arrastrar
+ * una parada, agregar una con click sobre la barra y seleccionar.
+ *
+ * Contrato de eventos (pensado para el historial de deshacer del host):
+ * - `coStopMove` — continuo, en cada movimiento del arrastre (preview en vivo).
+ * - `coStopsChange` — UNA vez al terminar el gesto (siempre que hubo al menos
+ *   un `coStopMove`, aunque el stop vuelva a su posición inicial: el host cierra
+ *   ahí su transacción) y una vez por cada paso de teclado.
+ * - `coStopSelect` — al hacer pointerdown sobre un handle.
+ * - `coStopAdd` — al hacer click sobre el track fuera de un handle; `color` es
+ *   el interpolado en esa posición.
+ * Con `disabled` no se emite nada.
+ *
+ * El componente es controlado: `stops` los pinta el host. Durante el arrastre
+ * el handle se pinta en la posición viva aunque el host no aplique cada
+ * `coStopMove`.
+ *
+ * Wrapper Vue: `CoGradientBar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part track - La barra con el degradado.
+ * @part handle - Cada tirador de parada.
+ */
+export class CoGradientBar {
+    constructor() {
+        /** Paradas del degradado: `position` 0–100, `color` hex/rgba. */
+        this.stops = [];
+        /** Deshabilita toda interacción; no se emite ningún evento. */
+        this.disabled = false;
+        /** Índice de la parada en arrastre; -1 sin gesto. */
+        this.dragIndex = -1;
+        /** Posición viva de la parada en arrastre. */
+        this.dragPosition = 0;
+        this.pointerId = -1;
+        /** Desplazamiento entre el puntero y el centro del handle al agarrarlo, para que no salte. */
+        this.grabOffset = 0;
+        /** Hubo al menos un `coStopMove` en el gesto → al soltar se emite `coStopsChange`. */
+        this.dragMoved = false;
+        // ── Agregar parada ────────────────────────────────────────────────────
+        this.handleTrackClick = (e) => {
+            var _a;
+            if (this.disabled)
+                return;
+            // El click que sigue a un pointerdown/up sobre un handle también burbujea
+            // hasta el track: ahí no se agrega nada.
+            const target = e.target;
+            if ((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.co-gradient-bar__handle'))
+                return;
+            const position = this.positionAt(e.clientX);
+            this.coStopAdd.emit({ position, color: interpolateStopColor(this.stopList, position) });
+        };
+        // ── Seleccionar + arrastrar ───────────────────────────────────────────
+        this.handleHandlePointerDown = (index, e) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this.disabled)
+                return;
+            // Un segundo puntero (multitouch) durante un arrastre no selecciona ni
+            // secuestra el gesto en curso.
+            if (this.dragIndex >= 0)
+                return;
+            if (e.button !== undefined && e.button !== 0)
+                return;
+            // preventDefault evita la selección de texto; el foco se da a mano.
+            e.preventDefault();
+            const handle = e.currentTarget;
+            (_a = handle === null || handle === void 0 ? void 0 : handle.focus) === null || _a === void 0 ? void 0 : _a.call(handle);
+            this.selected = index;
+            this.coStopSelect.emit(index);
+            // jsdom no implementa setPointerCapture; en el browser retarget-ea el
+            // puntero al handle aunque salga del elemento.
+            if (handle === null || handle === void 0 ? void 0 : handle.setPointerCapture) {
+                try {
+                    handle.setPointerCapture(e.pointerId);
+                }
+                catch (_g) {
+                    /* puntero ya inactivo */
+                }
+            }
+            const start = (_c = (_b = this.stopList[index]) === null || _b === void 0 ? void 0 : _b.position) !== null && _c !== void 0 ? _c : 0;
+            const rect = (_d = this.trackEl) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
+            const centerX = ((_e = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _e !== void 0 ? _e : 0) + (((_f = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _f !== void 0 ? _f : 0) * start) / 100;
+            this.grabOffset = rect && rect.width > 0 ? e.clientX - centerX : 0;
+            this.pointerId = e.pointerId;
+            this.dragIndex = index;
+            this.dragPosition = start;
+            this.dragMoved = false;
+            this.bindWindow();
+        };
+        this.handleWindowPointerMove = (e) => {
+            if (e.pointerId !== this.pointerId || this.dragIndex < 0)
+                return;
+            const position = this.positionAt(e.clientX - this.grabOffset);
+            if (position === this.dragPosition)
+                return;
+            this.dragPosition = position;
+            this.dragMoved = true;
+            this.coStopMove.emit({ index: this.dragIndex, position });
+        };
+        this.handleWindowPointerUp = (e) => {
+            if (e.pointerId !== this.pointerId)
+                return;
+            this.endDrag();
+        };
+        // ── Teclado ───────────────────────────────────────────────────────────
+        this.handleHandleKeyDown = (index, e) => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            const current = (_b = (_a = this.stopList[index]) === null || _a === void 0 ? void 0 : _a.position) !== null && _b !== void 0 ? _b : 0;
+            let next;
+            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                const delta = (e.key === 'ArrowRight' ? 1 : -1) * (e.shiftKey ? 10 : 1);
+                next = stepPosition(current, delta);
+            }
+            else if (e.key === 'Home') {
+                next = 0;
+            }
+            else if (e.key === 'End') {
+                next = 100;
+            }
+            else {
+                return;
+            }
+            e.preventDefault();
+            // Acotado en el borde: sin cambio real no hay paso de historial.
+            if (next === current)
+                return;
+            this.coStopsChange.emit(this.withPosition(index, next));
+        };
+    }
+    disconnectedCallback() {
+        this.unbindWindow();
+    }
+    // ── Geometría ──────────────────────────────────────────────────────────
+    positionAt(clientX) {
+        var _a, _b, _c;
+        const rect = (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return positionFromPointer(clientX, (_b = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _b !== void 0 ? _b : 0, (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0);
+    }
+    /** `stops` del host; un `undefined` explícito (wrappers React/Vue) cuenta como vacío. */
+    get stopList() {
+        var _a;
+        return (_a = this.stops) !== null && _a !== void 0 ? _a : [];
+    }
+    withPosition(index, position) {
+        return this.stopList.map((s, i) => (i === index ? Object.assign(Object.assign({}, s), { position }) : s));
+    }
+    /** Paradas a pintar: las del host, con la que se arrastra en su posición viva. */
+    liveStops() {
+        return this.dragIndex >= 0 ? this.withPosition(this.dragIndex, this.dragPosition) : this.stopList;
+    }
+    endDrag() {
+        this.unbindWindow();
+        const index = this.dragIndex;
+        const position = this.dragPosition;
+        const moved = this.dragMoved;
+        this.pointerId = -1;
+        this.dragIndex = -1;
+        this.dragMoved = false;
+        if (index >= 0 && moved) {
+            this.coStopsChange.emit(this.withPosition(index, position));
+        }
+    }
+    bindWindow() {
+        window.addEventListener('pointermove', this.handleWindowPointerMove);
+        window.addEventListener('pointerup', this.handleWindowPointerUp);
+        window.addEventListener('pointercancel', this.handleWindowPointerUp);
+    }
+    unbindWindow() {
+        window.removeEventListener('pointermove', this.handleWindowPointerMove);
+        window.removeEventListener('pointerup', this.handleWindowPointerUp);
+        window.removeEventListener('pointercancel', this.handleWindowPointerUp);
+    }
+    // ── Render ────────────────────────────────────────────────────────────
+    render() {
+        const s = getGradientBarStrings(this.locale);
+        const live = this.liveStops();
+        const n = live.length;
+        const hasSelection = this.selected != null && this.selected >= 0 && this.selected < n;
+        return (h("div", { key: '10e1f78165d061dd08141de0a0ca885f15b7ff83', class: {
+                'co-gradient-bar': true,
+                'co-gradient-bar--disabled': this.disabled,
+                'co-gradient-bar--dragging': this.dragIndex >= 0,
+                'co-gradient-bar--transparent': hasTransparentStop(live),
+            }, role: "group", "aria-label": this.label || s.barLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e591b6e6d74ee9c9f3b9992f6d12cfd360f9fa49', class: "co-gradient-bar__track", part: "track", ref: (el) => (this.trackEl = el), onClick: this.handleTrackClick }, h("div", { key: 'fd5b93939df8988a08b8ab9f1fab36cc3eb24096', class: "co-gradient-bar__fill", style: { background: gradientCss(live) } }), live.map((stop, i) => {
+            const selected = i === this.selected;
+            // Roving tabindex: una sola parada de tab (la seleccionada, o la primera).
+            const tabbable = hasSelection ? selected : i === 0;
+            return (h("div", { key: i, class: {
+                    'co-gradient-bar__handle': true,
+                    'co-gradient-bar__handle--selected': selected,
+                }, part: "handle", role: "slider", "aria-label": s.stopLabel.replace('{i}', String(i + 1)).replace('{n}', String(n)).replace('{p}', String(stop.position)), "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(stop.position), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled || !tabbable ? -1 : 0, style: {
+                    left: `${stop.position}%`,
+                    '--co-gradient-bar-stop-color': stop.color,
+                    // Mitad "sólida" del chip partido (Figma): el color sin alpha.
+                    '--co-gradient-bar-stop-opaque': opaqueColor(stop.color),
+                }, onPointerDown: (e) => this.handleHandlePointerDown(i, e), onKeyDown: (e) => this.handleHandleKeyDown(i, e) }));
+        }))));
+    }
+    static get is() { return "co-gradient-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-gradient-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-gradient-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stops": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GradientStop[]",
+                    "resolved": "GradientStop[]",
+                    "references": {
+                        "GradientStop": {
+                            "location": "import",
+                            "path": "../../utils/gradientStops",
+                            "id": "src/utils/gradientStops.ts::GradientStop",
+                            "referenceLocation": "GradientStop"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Paradas del degradado: `position` 0\u2013100, `color` hex/rgba."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selected": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDndice de la parada seleccionada (anillo `accent`). Se actualiza al hacer pointerdown en un handle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita toda interacci\u00F3n; no se emite ning\u00FAn evento."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del grupo. Vac\u00EDo = el del `locale`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale de los strings integrados (es/en/pt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragIndex": {},
+            "dragPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coStopMove",
+                "name": "coStopMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`{ index, position }` en cada movimiento del arrastre."
+                },
+                "complexType": {
+                    "original": "GradientStopMoveDetail",
+                    "resolved": "GradientStopMoveDetail",
+                    "references": {
+                        "GradientStopMoveDetail": {
+                            "location": "import",
+                            "path": "../../utils/gradientStops",
+                            "id": "src/utils/gradientStops.ts::GradientStopMoveDetail",
+                            "referenceLocation": "GradientStopMoveDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "coStopsChange",
+                "name": "coStopsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paradas resultantes al soltar (una vez por gesto) o tras cada paso de\nteclado. Conserva el ORDEN e \u00CDNDICES del `stops` del host (solo cambia\n`position` de la parada movida): un host que ordene por posici\u00F3n al\nconfirmar debe remapear `selected` al \u00EDndice nuevo."
+                },
+                "complexType": {
+                    "original": "GradientStop[]",
+                    "resolved": "GradientStop[]",
+                    "references": {
+                        "GradientStop": {
+                            "location": "import",
+                            "path": "../../utils/gradientStops",
+                            "id": "src/utils/gradientStops.ts::GradientStop",
+                            "referenceLocation": "GradientStop"
+                        }
+                    }
+                }
+            }, {
+                "method": "coStopSelect",
+                "name": "coStopSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDndice de la parada al hacer pointerdown sobre su handle."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coStopAdd",
+                "name": "coStopAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`{ position, color }` al hacer click sobre el track fuera de un handle."
+                },
+                "complexType": {
+                    "original": "GradientStopAddDetail",
+                    "resolved": "GradientStopAddDetail",
+                    "references": {
+                        "GradientStopAddDetail": {
+                            "location": "import",
+                            "path": "../../utils/gradientStops",
+                            "id": "src/utils/gradientStops.ts::GradientStopAddDetail",
+                            "referenceLocation": "GradientStopAddDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 /**
  * Helper / validation text shown below form fields.
+ * Wrapper Vue: `CoHelperText` de `@prolibu-suite/cobalt-vue`.
+ * @part helper-text - La fila del texto (ícono de estado + texto).
  */
 export class CoHelperText {
     constructor() {
@@ -15,10 +17,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '2c4ae2b671b16dfda50eea3dd33b92c5661812fb', class: {
+        return (h("div", { key: '12a67e485fed5d931c4325a0139d3ae7669b8de4', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '18a15852e651204d06279be5a685c79ed927c6d0', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '62c3d084abd1b62f90b2631953f51306293b23b7', class: "co-helper-text__message" }, h("slot", { key: '06604123763ac0f84fe1bc2ec1dd840d6ee2756d' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '5bdb8635fa1654a9e10176c9818ba4197fc252e8', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'c2f165cc0226ea1d799c62d0929d6acbf5cc1b98', class: "co-helper-text__message" }, h("slot", { key: 'd8315ea3ea6c002f83f1d936f9a3521831593b3d' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,10 @@ import { loadSvg } from "./iconLoader";
  * Usage:
  *   <co-icon name="plus" />
  *   <co-icon name="arrow-right" weight="bold" size="24" />
+ *
+ * Wrapper Vue: `CoIcon` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part svg - Contenedor del SVG (toma `currentColor`).
  */
 export class CoIcon {
     constructor() {
@@ -31,12 +35,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: 'a1f3cfef2067bd672a17c19666821b6fac0b3027', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'e6f8302d22e1fbeac4e82d199b9214063c7b2313', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: 'cc92c6ea6d2ab5f59a7e793f166f2ae685f7928c', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '7967a0787112955036f6f88231a2a635e647e218', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,12 @@
+/**
+ * @prop --co-icon-button-bg: Superficie de las variantes `filled`/`outlined` (se mezcla con transparencia).
+ * @prop --co-icon-button-color: Color del ícono.
+ * @prop --co-icon-button-border: Borde de la variante `filled`.
+ * @prop --co-icon-button-selected-bg: Fondo con `selected` (default el acento).
+ * @prop --co-icon-button-selected-color: Color del ícono con `selected` (default on-accent).
+ * @prop --co-icon-button-radius: Radio del botón, en todas las tallas y formas.
+ * @prop --co-icon-button-backdrop-filter: Reemplaza el `backdrop-filter` del botón. Ojo: queda fuera del interruptor `--co-glass-filter` y de `prefers-reduced-transparency`; para ajustar el frost usá `--co-glass-blur`/`--co-glass-saturate`.
+ */
 :host {
   display: inline-flex;
 }
@@ -9,6 +18,18 @@
   pointer-events: none;
 }
 
+/* fluid: cede el ancho fijo por `size` y se reparte el espacio disponible del
+   flex padre (fila de N botones al 100%). min-width:0 permite que se achique
+   por debajo del contenido intrínseco, como cualquier item flex que necesite
+   truncar/encoger en vez de forzar overflow del contenedor. */
+:host([fluid]) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+:host([fluid]) .co-icon-button {
+  width: 100%;
+}
+
 .co-icon-button {
   display: inline-flex;
   align-items: center;
@@ -62,6 +83,20 @@
   background: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
 }
 
+/* Soft = fondo sólido `--co-semantic-surface-control` (gray-100 en claro /
+   gray-700 en oscuro), sin borde visible (queda en transparent, mismo grosor
+   que el default — no cambia el tamaño), sin frost. */
+.co-icon-button--soft {
+  background: var(--co-semantic-surface-control);
+  color: var(--co-icon-button-color, var(--co-semantic-text-default));
+  border-color: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.co-icon-button--soft:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--co-semantic-surface-control), var(--co-semantic-surface-hover));
+}
+
 /* ─── SURFACE · DARK (on-dark theming) ──────────────────────── */
 /* Placed after the variants so it wins on icon color; opt-in via surface="dark" */
 .co-icon-button--dark {
@@ -71,65 +106,115 @@
   background: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
 }
 
+/* ─── SELECTED (transversal: gana sobre cualquier variant/surface) ───── */
+/* Colocada después de VARIANTS y SURFACE·DARK para pisar su background/color
+   sin importar qué variant esté activa (filled/outlined/ghost/soft) — es el
+   mismo orden-de-fuente que ya usa `--dark` para pisar el color de icono.
+   Fix round 1: `.co-icon-button--selected` sola (especificidad 0,1,0) perdía
+   el hover contra `--ghost:hover:not(:disabled)`, `--soft:hover:not(:disabled)`
+   y `--dark.--ghost:hover:not(:disabled)` (0,3,0 / 0,4,0) — el fondo de acento
+   desaparecía al pasar el mouse. Se agregan variantes `:hover:not(:disabled)`
+   con la MISMA especificidad que esas reglas; como esta sección ya viene
+   después de todas ellas en el archivo, gana por orden de fuente. */
+.co-icon-button--selected,
+.co-icon-button--selected:hover:not(:disabled),
+.co-icon-button--dark.co-icon-button--selected:hover:not(:disabled) {
+  background: var(--co-icon-button-selected-bg, var(--co-semantic-accent));
+  color: var(--co-icon-button-selected-color, var(--co-semantic-on-accent));
+}
+
 /* ─── SIZES · ROUNDED ───────────────────────────────────────── */
+/* --co-icon-button-radius unifica el radio en las 12 combinaciones talla×shape
+   (y en el boxStyle inline de `boxSize`, ver .tsx) — el fallback es el valor
+   que ya tenía cada regla, así que sin la variable el resultado es idéntico. */
 .co-icon-button--rounded.co-icon-button--xl {
   width: 80px; height: 80px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 .co-icon-button--rounded.co-icon-button--lg {
   width: 64px; height: 64px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 .co-icon-button--rounded.co-icon-button--md {
   width: 56px; height: 56px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 .co-icon-button--rounded.co-icon-button--sm {
   width: 48px; height: 48px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 .co-icon-button--rounded.co-icon-button--xs {
   width: 32px; height: 32px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 .co-icon-button--rounded.co-icon-button--xxs {
   width: 24px; height: 24px;
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-full));
 }
 
 /* ─── SIZES · SQUARE ────────────────────────────────────────── */
 .co-icon-button--square.co-icon-button--xl {
   width: 80px; height: 80px;
-  border-radius: var(--co-border-radius-xl); /* 24px */
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-xl)); /* 24px */
 }
 .co-icon-button--square.co-icon-button--lg {
   width: 64px; height: 64px;
-  border-radius: var(--co-border-radius-lg); /* 16px */
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-lg)); /* 16px */
 }
 .co-icon-button--square.co-icon-button--md {
   width: 56px; height: 56px;
-  border-radius: var(--co-border-radius-lg); /* 16px */
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-lg)); /* 16px */
 }
 .co-icon-button--square.co-icon-button--sm {
   width: 48px; height: 48px;
-  border-radius: var(--co-border-radius-sm); /* 12px */
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-sm)); /* 12px */
 }
 .co-icon-button--square.co-icon-button--xs {
   width: 32px; height: 32px;
-  border-radius: var(--co-border-radius-xs); /* 8px */
+  border-radius: var(--co-icon-button-radius, var(--co-border-radius-xs)); /* 8px */
 }
 .co-icon-button--square.co-icon-button--xxs {
   width: 24px; height: 24px;
-  border-radius: var(--co-spacing-sm); /* 6px */
+  border-radius: var(--co-icon-button-radius, var(--co-spacing-sm)); /* 6px */
 }
 
-/* ─── ICON SLOT SIZING ──────────────────────────────────────── */
-.co-icon-button--xl ::slotted(*) { width: 32px; height: 32px; }
-.co-icon-button--lg ::slotted(*) { width: 24px; height: 24px; }
-.co-icon-button--md ::slotted(*) { width: 20px; height: 20px; }
-.co-icon-button--sm ::slotted(*) { width: 18px; height: 18px; }
-.co-icon-button--xs ::slotted(*) { width: 16px; height: 16px; }
-.co-icon-button--xxs ::slotted(*) { width: 12px; height: 12px; }
+/* ─── GLIFO PROYECTADO (slot default, solo sin `icon`) ─────────── */
+/* El `<slot/>` solo se monta cuando NO hay `icon` (ver .tsx): el consumidor
+   proyecta su propio glifo (SVG inline) en el lugar del co-icon. Vive dentro
+   del <button>, así que hereda color/currentColor, la opacidad de hover y
+   disabled, el scale de :active y el color de `selected` sin reglas extra.
+   Mide lo que mediría el co-icon de esa talla (o `iconSize`): el .tsx publica
+   `--co-icon-button-glyph-size` inline en el botón SOLO en modo slot.
+   Reemplaza las seis reglas `.co-icon-button--<size> ::slotted(*)` que
+   quedaron muertas desde 94a242a (el slot se quitó del render y nada se
+   proyectaba) y cuyas medidas ya no coincidían con las del co-icon
+   (lg 24 vs 28, md 20 vs 24, sm 18 vs 20, xxs 12 vs 16). Sin slot montado
+   —o sea, con `icon`— esta regla no matchea nada. */
+::slotted(*) {
+  width: var(--co-icon-button-glyph-size);
+  height: var(--co-icon-button-glyph-size);
+  flex-shrink: 0;
+}
+
+/* ─── CARET (disclosure) ──────────────────────────────────────── */
+/* Fix round 1: `padding-right: 8px` NO agranda la caja — con
+   `box-sizing: border-box` (regla base `.co-icon-button`) y un `width` FIJO por
+   talla, un padding extra le ROBA espacio al área de contenido en vez de sumar
+   ancho, y a xs (32px: icono 16 + gap 4 + caret 8 = 28 vs 22 disponibles tras
+   el padding) y xxs desborda. El fix real es crecer el `width` mismo +8px por
+   talla — mismos dos-clases de especificidad que `.co-icon-button--rounded/
+   --square.co-icon-button--<size>`, así que gana por ORDEN DE FUENTE (viene
+   después de esas reglas), sin necesidad de repetir por shape porque el ancho
+   ya es igual en rounded y square para cada talla. */
+.co-icon-button--caret {
+  gap: 4px;
+}
+.co-icon-button--caret.co-icon-button--xl { width: calc(80px + 8px); }
+.co-icon-button--caret.co-icon-button--lg { width: calc(64px + 8px); }
+.co-icon-button--caret.co-icon-button--md { width: calc(56px + 8px); }
+.co-icon-button--caret.co-icon-button--sm { width: calc(48px + 8px); }
+.co-icon-button--caret.co-icon-button--xs { width: calc(32px + 8px); }
+.co-icon-button--caret.co-icon-button--xxs { width: calc(24px + 8px); }
 
 /* ─── STATES ────────────────────────────────────────────────── */
 .co-icon-button--disabled,