@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

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

@@ -0,0 +1,162 @@
+import { Host, h } from "@stencil/core";
+/**
+ * co-tile — tarjeta de 96×80 con ícono + etiqueta, usada en la grilla de
+ * "Plantillas de página" del editor. El host (el propio elemento
+ * personalizado) es el nodo focuseable/arrastrable: no declara eventos
+ * propios (`click`/`dragstart`/`pointerdown`) porque el consumidor
+ * (dnd-kit) los escucha directamente sobre el host — el componente solo
+ * pone `role`/`tabindex`/`aria-disabled` para que ese nodo sea accesible
+ * por teclado, y traduce Enter/Space a un `click` nativo sobre el host
+ * (semántica de `<button>`: Enter en keydown; Space frena el scroll en
+ * keydown y activa en keyup) para que el mismo listener del consumidor
+ * sirva con teclado.
+ *
+ * @slot icon - Reemplaza el `co-icon` por defecto (renderizado a partir de
+ *              `icon`/`iconSize`) por contenido propio del consumidor.
+ */
+export class CoTile {
+    constructor() {
+        /** Etiqueta visible debajo del ícono. Soporta `\n` (se renderiza en dos líneas). */
+        this.label = '';
+        /** Tamaño del ícono por defecto, en px. */
+        this.iconSize = 32;
+        /** Deshabilitada: pierde el `tabindex` y queda `aria-disabled`, pero conserva `role="button"`. */
+        this.disabled = false;
+        /** Space quedó presionada SOBRE esta tile (el keyup solo activa si el
+         *  keydown fue acá — un <button> nativo tampoco dispara por un keyup
+         *  suelto). */
+        this.spaceArmed = false;
+        this.handleKeyDown = (e) => {
+            if (!this.ownsKeyEvent(e))
+                return;
+            if (e.key === 'Enter') {
+                this.el.click();
+            }
+            else if (e.key === ' ') {
+                // Sin esto la página scrollea con Space; el click va en keyup.
+                e.preventDefault();
+                this.spaceArmed = true;
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key !== ' ')
+                return;
+            const armed = this.spaceArmed;
+            this.spaceArmed = false;
+            if (!armed || !this.ownsKeyEvent(e))
+                return;
+            e.preventDefault();
+            this.el.click();
+        };
+        /** Perder el foco entre el keydown y el keyup de Space desarma (un
+         *  <button> nativo tampoco dispara si el keyup cae en otro lado). */
+        this.handleBlur = () => {
+            this.spaceArmed = false;
+        };
+    }
+    /** Solo eventos que nacen en el host (o en su shadow, retargeteados al
+     *  host): un control proyectado en el slot `icon` maneja sus propias
+     *  teclas y no debe activar la tile por rebote. */
+    ownsKeyEvent(e) {
+        return !this.disabled && e.target === this.el;
+    }
+    render() {
+        return (h(Host, { key: '7b6d2066f36837c836bcac75c98c7472451a3b0a', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: '275cc5dd82f17bc1380b52ee88780844d7937692', class: "co-tile", part: "tile" }, h("slot", { key: '9418db0eba2a388829f3245bf51392583e60eec1', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: 'c235396aca36babd67c68c3e1363931f21c285cb', class: "co-tile__label", part: "label" }, this.label))));
+    }
+    static get is() { return "co-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Etiqueta visible debajo del \u00EDcono. Soporta `\\n` (se renderiza en dos l\u00EDneas)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre del \u00EDcono Phosphor (e.g. \"file\", \"calculator\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del \u00EDcono por defecto, en px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "32"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitada: pierde el `tabindex` y queda `aria-disabled`, pero conserva `role=\"button\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -313,7 +313,7 @@ export class CoTimeField {
     }
     render() {
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '782a8fbbbd967cb652ef4ea7d8aea0e2cc273a4b', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: '1f46be0e62e2515d70e079193c1107cfcff35d11', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '9eb83d59c644c113dab23b4af0521a719e43a497', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: 'e18183e6e92530649a24d0f05bd8f7acb4403a47', class: "co-time-field__steppers" }, h("button", { key: '9a78bb64915a9e83bcbe2b9bf024c239fdefc44c', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: 'bbc82c66044327c5c631d9dd601b5232cebb8d75', name: "caret-up", size: 10 })), h("button", { key: 'a20091c8d3aeb118111014f9dc20d6fd517d276c', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: 'cefec7ee6a579373324c4fc20552bf09a9764aa4', name: "caret-down", size: 10 })))));
+        return (h("div", { key: '375a0cd95c1ee8a3b2851f5b327c2d30be9220e7', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'c87319645a6394877a35061abdfcef3d15931443', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '15ae5505e3cbff685ae53bf0d8b4a87e9e3c15af', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '0ab99ad2423f8ee2330074679019ec0b76e59de0', class: "co-time-field__steppers" }, h("button", { key: 'ae2e8581f575b5d734bfd81c8f2f3d12da5751a0', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '5186d550bd67c6d13d0c60b3a301a58e85effbbf', name: "caret-up", size: 10 })), h("button", { key: 'c8fbf199ab71e6bbd10a1ed570470befbe652f1e', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '19515539265a74798904e01e7692366574a8ca6b', name: "caret-down", size: 10 })))));
     }
     static get is() { return "co-time-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,8 +76,8 @@ export class CoToast {
             'co-toast--progress': hasProgress,
             'co-toast--in': this.entered,
         };
-        const content = (h("div", { key: '5479799fdc6e1290192530a8cbda7308a610821e', class: "co-toast__content" }, h("span", { key: '7d3b310377e78b8e5551cc80f2941aa621ea9bcb', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f3d0a88cc99ba0884875217454192bf285480b65', class: "co-toast__description" }, this.description))));
-        return (h("div", { key: '1194ce0b8e6b279dcf747467df23903c9f79770d', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '46c9ed361690be9f2ad60235efbefbd9ab30bb0d', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: 'e277b37fccc9c3770e3c102cb0039cd97f83223a', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '029587321c2cd209fa838c24a435027b7a029a90', class: "co-toast__actions" }, h("slot", { key: 'c937442479f63185efc37428b9c25680ed72248d', name: "action" })))), !isStacked && (h("div", { key: 'b4f2be5646b30478315256d04cf86e4eb939fcb9', class: "co-toast__actions" }, h("slot", { key: '689ef19ee688a4f4abc38b4c8ec7918aed4338bf', name: "action" }))), this.dismissible && (h("button", { key: '7424c7bacc165e5e6828fa28233c3e8151c769f3', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '64149b651baa0cdd39a4ed17a865d5624872d4a9', name: "x", size: 16 })))));
+        const content = (h("div", { key: '5b3b8dadd6bd941ddf25040eb57312a70e145e70', class: "co-toast__content" }, h("span", { key: '76f47b49b5e901085a5fdcd924070f6c25b0a7bf', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f229757cd675ae71df88adcab2cec65edbcb0411', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '1beb456e9e1ddc4be05de95757cd161bd3df913c', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '40a22c4eef4c1c1f0238fb2a37eb1e837a40a571', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '8f540383dea5dc817808be67047b5ea0f41c9516', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '5c48be7ff509be0656e204b195bc0420b6cc1d13', class: "co-toast__actions" }, h("slot", { key: 'fbc1a01ad868662991dd078873231ea2ee4cdd18', name: "action" })))), !isStacked && (h("div", { key: 'ba679ff96baf4e45c9c662c5b58a0eada104733d', class: "co-toast__actions" }, h("slot", { key: '33cf02247d346fcee55b5eb277d4230452017ee0', name: "action" }))), this.dismissible && (h("button", { key: 'ab7c8d00ea6763a1d7c9a12ae24b3a0c29dbc65f', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'b865eb66ffaffe8e1930cbc07a240e47ff276aef', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +180,7 @@ export class CoToast {
                     "references": {
                         "CoToastActionsLayout": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/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-release-0.10.3/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/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

@@ -74,6 +74,42 @@
   cursor: not-allowed;
 }
 
+/* Anillo de foco por teclado (m-18). Antes no había NINGUNA regla de foco acá y
+   tampoco hay reset global de `outline`, así que al tabular caía el anillo del
+   navegador.
+
+   Va POR DENTRO de la pastilla (`outline-offset` negativo: el anillo ocupa de 1
+   a 3px hacia adentro, justo después del borde). En el grupo `connected` —el
+   default— las pastillas se tocan (`margin-left: -1px` del grupo) y cada una es
+   su propio stacking context (`backdrop-filter`): un anillo que sale del borde
+   queda tapado por la vecina siguiente. Subirle el `z-index` no alcanza —
+   verificado en Chromium—: sobre una vecina seleccionada, que es negra, un
+   anillo oscuro se pierde igual y queda una "C" abierta. Por dentro no toca a
+   nadie, y se cierra en los cuatro lados en las tres variantes.
+
+   Color: la tinta del tema (`--co-semantic-text-default`: negro en claro,
+   blanco en oscuro), bastante más contraste que el azul nativo al que
+   reemplaza (~16:1 contra ~6:1 sobre blanco). En la pastilla SELECCIONADA
+   toma la tinta de la propia pastilla (`currentColor`), porque su superficie
+   puede ser inversa (negra en `connected`) y su texto, por diseño, se lee
+   sobre ella. Esa regla pesa lo mismo (0,2,0) que la base y va después.
+
+   Por `outline` y no por `box-shadow`: `outline` no lo escribe ninguna
+   variante, mientras que `:host([variant='track']) .co-toggle-button` (0,3,0)
+   pone `box-shadow: none` en todas las pastillas de `track`.
+
+   `:focus-visible` y no `:focus`: el clic con el mouse no lo enciende. Lo fija
+   `co-toggle-button.css.test.ts`, que además impide que una variante o estado
+   lo apague o lo saque del borde. */
+.co-toggle-button:focus-visible {
+  outline: 2px solid var(--co-semantic-text-default);
+  outline-offset: -3px;
+}
+
+.co-toggle-button--selected:focus-visible {
+  outline-color: currentColor;
+}
+
 .co-toggle-button__label {
   line-height: 1;
 }
@@ -125,3 +161,68 @@
   background: var(--co-semantic-surface-page);
   border-color: var(--co-toggle-pill-border, var(--co-semantic-border-default));
 }
+
+/* Track + xs — pastilla más compacta (Task C7): mayor especificidad que las
+   reglas [variant='track'] de arriba, así que gana sin importar el orden.
+   Geometría (alto/radio) aplica a ambos estados; el color va en una regla
+   aparte acotada con :not(--selected) — sin esa exclusión, esta clase de
+   selector (0,4,0) le gana en especificidad a :host([variant='track'])
+   .co-toggle-button--selected (0,3,0) y pisaría el color del texto activo;
+   hoy "funcionaba" solo porque text-default y base-negro resuelven al mismo
+   hex (ver fix round 1 de code review). */
+/* Los knobs publicados en 0.10.1 (--co-toggle-pill-height/-radius/-shadow,
+   ver arriba) siguen mandando también en xs: el valor compacto es solo su
+   fallback. Sin knobs, la pastilla xs es exactamente la de Task C7. */
+:host([variant='track'][size='xs']) .co-toggle-button {
+  height: var(--co-toggle-pill-height, 20px);
+  border-radius: var(--co-toggle-pill-radius, var(--co-border-radius-xxs));
+}
+
+:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected) {
+  color: var(--co-semantic-text-default);
+}
+
+:host([variant='track'][size='xs']) .co-toggle-button.co-toggle-button--icon-only {
+  width: 20px;
+}
+
+:host([variant='track'][size='xs']) .co-toggle-button--selected {
+  box-shadow: var(--co-toggle-pill-shadow, none);
+}
+
+/* Soft variant — chip separado, --co-semantic-surface-control sólido; seleccionado usa el par
+   celeste-100/primary-azul. El border-radius shorthand de acá gana sobre las
+   longhands por-esquina que el grupo setea para achatar la costura del
+   'connected' (misma técnica que 'track' ya usa arriba). */
+:host([variant='soft']) .co-toggle-button {
+  height: 24px;
+  border-radius: var(--co-border-radius-xxs);
+  border-color: transparent;
+  background: var(--co-semantic-surface-control, #f6f6f6);
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-12);
+  font-weight: var(--co-font-weight-regular);
+  /* El diseño pide el contenido a 8px del borde de la pastilla. El borde de
+     1px de `.co-toggle-button` sigue existiendo —`soft` solo lo vuelve
+     transparente, para que la caja mida lo mismo con y sin variante— y con
+     `box-sizing: border-box` SUMA al inset: con `padding: 0 8px` el texto
+     arrancaba a 9px. Se descuenta el borde del padding: 1 + 7 = 8. */
+  padding: 0 calc(var(--co-spacing-sm2) - 1px);
+  gap: var(--co-spacing-sm2);
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+}
+
+:host([variant='soft']) .co-toggle-button:hover:not(:disabled) {
+  background: var(--co-semantic-surface-control, #f6f6f6);
+}
+
+:host([variant='soft']) .co-toggle-button--selected {
+  background: var(--co-color-celeste-100);
+  color: var(--co-color-primary-azul);
+  border-color: transparent;
+}
+
+:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled) {
+  background: var(--co-color-celeste-100);
+}

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

@@ -1,12 +1,42 @@
 import { h } from "@stencil/core";
+/** Tallas que entiende este botón. El grupo puede traer una fuera de esta
+ *  lista (el host usa `<co-toggle-button-group size="sm">`): nunca se adopta. */
+const SIZES = new Set(['l', 'm', 's', 'xs']);
+/** true SOLO para `variant="soft"` (cualquier talla) o `variant="track"` +
+ *  `size="xs"` — las combinaciones nuevas de la Fase 2 Cobalt — y con una talla
+ *  dentro de la unión. Fuera de eso el botón ignora la talla del grupo, como
+ *  siempre lo hizo (aditivo: los usos actuales del host quedan intactos). */
+const groupSizeApplies = (variant, size) => SIZES.has(size !== null && size !== void 0 ? size : '') && (variant === 'soft' || (variant === 'track' && size === 'xs'));
+/**
+ * co-toggle-button — pastilla de un `co-toggle-button-group`.
+ *
+ * @part button - El `<button>` interno. El hook para lo que el CSS deja
+ *                hardcodeado y no tiene prop, empezando por su
+ *                `justify-content: center`: `::part(button) { justify-content:
+ *                flex-start }` alinea el contenido a la izquierda sin tener que
+ *                mover el texto a un slot.
+ * @slot leading - Contenido propio antes del label (logos a color, banderas):
+ *                 lo espacia el mismo `gap` que a `iconLeft`.
+ */
 export class CoToggleButton {
     constructor() {
         this.selected = false;
         this.value = '';
+        /** Talla del botón. Si no se indica (ni atributo ni propiedad) y el botón
+         *  está dentro de un `co-toggle-button-group` con `variant="soft"` (cualquier
+         *  talla) o `variant="track"` + `size="xs"`, adopta la talla del grupo al
+         *  montarse — la lee el propio botón en `componentWillLoad`, ver
+         *  `adoptGroupSize()`. Un `size` propio siempre manda. En cualquier otra
+         *  combinación (`connected`, `track` con `l|m|s`, o una talla fuera de
+         *  `l|m|s|xs`) el grupo no influye, exactamente como antes. La talla se
+         *  adopta UNA vez, al montar: cambiar después el `size` del grupo no
+         *  re-talla a los botones ya montados (el editor lo fija estáticamente). */
         this.size = 'm';
         this.disabled = false;
         /** Visual variant. 'track' renders the button as a detached rounded pill for a
-         *  sunken toggle-button-group track. Normally set by the parent group. */
+         *  sunken toggle-button-group track. 'soft' renders it as a separated gray-100
+         *  chip whose selected state uses the celeste-100/primary-azul accent pair.
+         *  Normally set by the parent group. */
         this.variant = 'connected';
         this.handleClick = () => {
             if (this.disabled)
@@ -15,16 +45,57 @@ export class CoToggleButton {
             this.coToggle.emit({ value: this.value, selected: this.selected });
         };
     }
+    componentWillLoad() {
+        this.adoptGroupSize();
+    }
+    /** Adopta la talla del grupo contenedor en las combinaciones nuevas de la
+     *  Fase 2 (`soft`, o `track` + `xs`) SOLO si este botón no trae `size`
+     *  propio. Vive en el hijo y corre ANTES del primer render a propósito:
+     *  `size` es `reflect: true`, así que en el primer render Stencil escribe el
+     *  default `m` como atributo del host — y ese render ocurre antes del
+     *  `componentDidLoad` del grupo. Propagar desde el grupo (versión anterior,
+     *  chequeaba `hasAttribute('size')` en el hijo) nunca actuaba en el browser:
+     *  a esa altura el atributo ya estaba y no se puede distinguir un `m`
+     *  explícito de uno reflejado. Los specs en jsdom no lo detectaban porque
+     *  `@stencil/vitest` no siembra el default de un class-field `@Prop`. */
+    adoptGroupSize() {
+        var _a, _b;
+        // Un `size` propio manda: como atributo (el default todavía no se reflejó)
+        // o como propiedad distinta del default (`undefined` cuenta como ausente).
+        const explicitSize = this.el.hasAttribute('size') || (this.size != null && this.size !== 'm');
+        if (explicitSize)
+            return;
+        const grupo = this.el.closest('co-toggle-button-group');
+        if (!grupo)
+            return;
+        // Si el grupo ya está upgradeado responden sus @Prop (el `size` del grupo no
+        // se refleja, así que la propiedad es la única fuente cuando lo setea un
+        // framework); si todavía no, quedan los atributos del markup.
+        const variant = (_a = grupo.variant) !== null && _a !== void 0 ? _a : grupo.getAttribute('variant');
+        const size = (_b = grupo.size) !== null && _b !== void 0 ? _b : grupo.getAttribute('size');
+        if (groupSizeApplies(variant, size))
+            this.size = size;
+    }
     render() {
-        const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
+        // 'track' ignoraba el size y siempre usaba 18 — xs ahora tiene su propia
+        // pastilla compacta (Task C7), el resto de tamaños de track no cambia.
+        const iconSize = this.variant === 'track'
+            ? this.size === 'xs' ? 14 : 18
+            : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: '11a4789dc751aac946ac5b1ddadfeb18d4da8087', class: {
+        return (h("button", { key: '3828e83bec19f945ca1ee06eb1c9ba5a6744c6c9',
+            /* El `<button>` vive en shadow DOM: sin `part` el consumidor no podía
+               tocarlo desde afuera — ni su `justify-content: center`, que está
+               hardcodeado en el CSS (el editor terminó moviendo el texto a un slot
+               solo para alinearlo a la izquierda). `::part(button)` es el hook.
+               Aditivo: ni el render ni el CSS cambian. */
+            part: "button", 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: '8a1b00c785043b986e73c36c152c5e7aa83b6c4d', name: "leading" }), this.iconLeft && h("co-icon", { key: '3e0d9d2491e09abe72acfc8668e57cbf126f92c7', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '7f17ae9159cf0db65aa2b2b0b5b1c6cc7b3196c6', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '78ea47dc026144ea6be486998be2679c345ab4c6', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'd3406d430fedc50ee415434a5a66f58322f4005d', name: "leading" }), this.iconLeft && h("co-icon", { key: '127a0993ae5ede97325fa357920f6681e2188b22', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '5219aec0d041d9d1b71496aeb0e608eeca08c4b3', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'f90dc967120e060e9de331239e8b531fee859164', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +220,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Talla del bot\u00F3n. Si no se indica (ni atributo ni propiedad) y el bot\u00F3n\nest\u00E1 dentro de un `co-toggle-button-group` con `variant=\"soft\"` (cualquier\ntalla) o `variant=\"track\"` + `size=\"xs\"`, adopta la talla del grupo al\nmontarse \u2014 la lee el propio bot\u00F3n en `componentWillLoad`, ver\n`adoptGroupSize()`. Un `size` propio siempre manda. En cualquier otra\ncombinaci\u00F3n (`connected`, `track` con `l|m|s`, o una talla fuera de\n`l|m|s|xs`) el grupo no influye, exactamente como antes. La talla se\nadopta UNA vez, al montar: cambiar despu\u00E9s el `size` del grupo no\nre-talla a los botones ya montados (el editor lo fija est\u00E1ticamente)."
                 },
                 "getter": false,
                 "setter": false,
@@ -181,15 +252,15 @@ export class CoToggleButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'connected' | 'track'",
-                    "resolved": "\"connected\" | \"track\"",
+                    "original": "'connected' | 'track' | 'soft'",
+                    "resolved": "\"connected\" | \"soft\" | \"track\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant. 'track' renders the button as a detached rounded pill for a\nsunken toggle-button-group track. Normally set by the parent group."
+                    "text": "Visual variant. 'track' renders the button as a detached rounded pill for a\nsunken toggle-button-group track. 'soft' renders it as a separated gray-100\nchip whose selected state uses the celeste-100/primary-azul accent pair.\nNormally set by the parent group."
                 },
                 "getter": false,
                 "setter": false,
@@ -236,4 +307,5 @@ export class CoToggleButton {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -103,3 +103,24 @@
 .co-toggle-button-group--track ::slotted(co-toggle-button) {
   margin: 0 !important;
 }
+
+/* Track + xs — pista más compacta (Task C7); la pastilla ajusta su propio
+   alto/radio/ícono en co-toggle-button[variant='track'][size='xs']. Los knobs
+   de la pista (0.10.1) siguen mandando en xs: lo compacto es su fallback. */
+.co-toggle-button-group--track.co-toggle-button-group--xs {
+  gap: var(--co-toggle-track-gap, var(--co-spacing-xxs));
+  padding: var(--co-toggle-track-padding, var(--co-spacing-xxs));
+  border-radius: var(--co-toggle-track-radius, var(--co-border-radius-xxs));
+}
+
+/* Soft variant — chips separados con gap fijo; el fondo/radio/estado
+   'selected' de cada botón vive en co-toggle-button[variant='soft'] (misma
+   técnica que 'track': un override de mayor especificidad ahí gana sobre el
+   achatado de esquinas seam-collapse de --row/--column de acá abajo). */
+.co-toggle-button-group--soft {
+  gap: var(--co-spacing-sm2);
+}
+
+.co-toggle-button-group--soft ::slotted(co-toggle-button) {
+  margin: 0 !important;
+}

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

@@ -4,6 +4,20 @@ export class CoToggleButtonGroup {
         /** Current selected value(s). Single string or JSON array for multiple. */
         this.value = '';
         this.multiple = false;
+        /** Talla del grupo. El grupo NO la empuja a sus hijos: cada `co-toggle-button`
+         *  sin `size` propio la LEE al montarse (`componentWillLoad`, antes de su
+         *  primer render) y la adopta SOLO en las combinaciones nuevas de la Fase 2
+         *  Cobalt — `variant="soft"` (cualquier talla) o `variant="track"` +
+         *  `size="xs"` — y nunca con un valor fuera de la unión del hijo (`l|m|s|xs`).
+         *  Fuera de eso los hijos la ignoran, como siempre: el host ya usa
+         *  `size="sm"` (fuera de la unión) y `size="s"` con la variante default, y
+         *  esos casos quedan intactos (aditivo). Por qué lo lee el hijo y no lo
+         *  empuja el grupo: `size` del hijo es `reflect: true` y su primer render —
+         *  que escribe el default `m` como atributo — ocurre ANTES del
+         *  `componentDidLoad` del grupo, así que el grupo ya no puede distinguir un
+         *  `m` explícito de uno reflejado. Consecuencia: se adopta una vez, al
+         *  montar; cambiar `size` del grupo después no re-talla a los hijos ya
+         *  montados (aquí solo actualiza la clase `--xs` de la pista). */
         this.size = 'm';
         this.disabled = false;
         this.direction = 'row';
@@ -11,7 +25,9 @@ export class CoToggleButtonGroup {
         this.fullWidth = false;
         /** 'connected' (default) keeps the seamless dark-fill segmented control.
          *  'track' turns the group into a sunken gray track carrying detached rounded
-         *  pills (white + shadow when selected) — e.g. an icon-only view toggle. */
+         *  pills (white + shadow when selected) — e.g. an icon-only view toggle.
+         *  'soft' separates each button into its own gray-100 chip (gap between them);
+         *  the selected chip gets the celeste-100/primary-azul accent pair. */
         this.variant = 'connected';
     }
     get selectedValues() {
@@ -56,6 +72,8 @@ export class CoToggleButtonGroup {
         }
         this.updateChildStates();
     }
+    /** Sincroniza `selected` y `variant` en los hijos. `size` NO se toca acá a
+     *  propósito: lo adopta cada hijo al montarse (ver doc del @Prop `size`). */
     updateChildStates() {
         const sel = this.selectedValues;
         const children = this.el.querySelectorAll('co-toggle-button');
@@ -65,13 +83,16 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: 'ecad72f14ff7abb4ea6d1d13bf99bd112cd50e37', class: {
+        return (h("div", { key: '7e878199a5ac13867f51c16995403b0c57c7a6cb', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 [`co-toggle-button-group--${this.variant}`]: true,
+                /* Solo 'xs' recibe clase propia por ahora (Task C7: track+xs más
+                   compacto); l/m/s no cambian el default. */
+                'co-toggle-button-group--xs': this.size === 'xs',
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: '2d6bcc71774fada54426a6fcf0e3eef016f27ea2' })));
+            }, role: "group" }, h("slot", { key: '396df51b811c8841c2e1786be107fcdc1abd4b69' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -139,7 +160,7 @@ export class CoToggleButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Talla del grupo. El grupo NO la empuja a sus hijos: cada `co-toggle-button`\nsin `size` propio la LEE al montarse (`componentWillLoad`, antes de su\nprimer render) y la adopta SOLO en las combinaciones nuevas de la Fase 2\nCobalt \u2014 `variant=\"soft\"` (cualquier talla) o `variant=\"track\"` +\n`size=\"xs\"` \u2014 y nunca con un valor fuera de la uni\u00F3n del hijo (`l|m|s|xs`).\nFuera de eso los hijos la ignoran, como siempre: el host ya usa\n`size=\"sm\"` (fuera de la uni\u00F3n) y `size=\"s\"` con la variante default, y\nesos casos quedan intactos (aditivo). Por qu\u00E9 lo lee el hijo y no lo\nempuja el grupo: `size` del hijo es `reflect: true` y su primer render \u2014\nque escribe el default `m` como atributo \u2014 ocurre ANTES del\n`componentDidLoad` del grupo, as\u00ED que el grupo ya no puede distinguir un\n`m` expl\u00EDcito de uno reflejado. Consecuencia: se adopta una vez, al\nmontar; cambiar `size` del grupo despu\u00E9s no re-talla a los hijos ya\nmontados (aqu\u00ED solo actualiza la clase `--xs` de la pista)."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,15 +232,15 @@ export class CoToggleButtonGroup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'connected' | 'track'",
-                    "resolved": "\"connected\" | \"track\"",
+                    "original": "'connected' | 'track' | 'soft'",
+                    "resolved": "\"connected\" | \"soft\" | \"track\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "'connected' (default) keeps the seamless dark-fill segmented control.\n'track' turns the group into a sunken gray track carrying detached rounded\npills (white + shadow when selected) \u2014 e.g. an icon-only view toggle."
+                    "text": "'connected' (default) keeps the seamless dark-fill segmented control.\n'track' turns the group into a sunken gray track carrying detached rounded\npills (white + shadow when selected) \u2014 e.g. an icon-only view toggle.\n'soft' separates each button into its own gray-100 chip (gap between them);\nthe selected chip gets the celeste-100/primary-azul accent pair."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -165,3 +165,39 @@
 .co-tooltip__content {
   display: block;
 }
+
+/* ── Variant: label (compact pill for a labeled trigger) ───── */
+/* Aditivo: solo aplica con variant="label"; el panel default (arriba) no cambia. */
+.co-tooltip__panel--label {
+  padding: 4px 8px;
+  border-radius: var(--co-border-radius-xs, 8px);
+  font-weight: var(--co-font-weight-medium, 500);
+  line-height: 1;
+  box-shadow: none;
+}
+
+/* La flecha sigue montada en el DOM (el default de `arrow` no cambia); acá
+   solo se apaga visualmente para esta variante. */
+.co-tooltip__panel--label .co-tooltip__arrow {
+  display: none;
+}
+
+/* ── Shortcut chip (co-kbd) ─────────────────────────────────── */
+.co-tooltip__panel--with-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Panel default + shortcut: +4px sobre el padding derecho base, para separar
+   el chip del borde (brief: "gap 6 y padding derecho 4"). */
+.co-tooltip__panel--with-shortcut:not(.co-tooltip__panel--label) {
+  padding-right: 10px; /* spacing-sm (6px) + 4 */
+}
+/* Label + shortcut: el chip `co-kbd` va a 4px del borde derecho del pill
+   (diseño Fase 4 del editor: el chip es el que cierra el pill, no el texto).
+   Antes quedaba en 12 (8 del label + 4) y el editor lo parchaba vía
+   `::part(panel)`. Solo esta variante cambia. */
+.co-tooltip__panel--label.co-tooltip__panel--with-shortcut {
+  padding-right: 4px;
+}