@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -28,6 +28,8 @@ function dayPeriodLabels(locale) {
  * (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).
+ *
+ * Wrapper Vue: `CoTimeField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoTimeField {
     constructor() {
@@ -35,7 +37,9 @@ export class CoTimeField {
         this.value = null;
         /** Reloj de 12 h. `false` = 00–23 sin segmento de período. */
         this.hour12 = true;
+        /** Locale BCP-47: textos del período (a. m./p. m.) y nombres accesibles de los segmentos. */
         this.locale = 'es-CO';
+        /** Deshabilita el campo. */
         this.disabled = false;
         /** Paso de PageUp/PageDown sobre el minuto. */
         this.pageStep = 15;
@@ -154,6 +158,7 @@ export class CoTimeField {
         this.hour24 = Math.floor(m / 60);
         this.minute = m % 60;
     }
+    /** Enfoca el segmento de la hora. */
     async focusInput() {
         var _a;
         (_a = this.hourEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -313,7 +318,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: 'b35cb03c86b6073d7af850316ef15754bedc059c', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'dd3325ea0193f0819f4e8c2341eab0c0671cf421', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '4bfae37879f6cb2fa00d26bdabdbdc04eb7701ad', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '196fcdc84979ee4631cefd208ef78b8d7a46d0c8', class: "co-time-field__steppers" }, h("button", { key: '1e2dbe2b2746048f6a1de6bdff3304180028bb90', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '7b3a75bfb9b8038667dc709b65b1b1ea8ebecc0e', name: "caret-up", size: 10 })), h("button", { key: '948ae31bfe775c72269ff2bbdea8839c15d2f076', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '357072a670ee75c74569bd59e6ea4bcdebf216ac', name: "caret-down", size: 10 })))));
     }
     static get is() { return "co-time-field"; }
     static get encapsulation() { return "shadow"; }
@@ -381,7 +386,7 @@ export class CoTimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Locale BCP-47: textos del per\u00EDodo (a. m./p. m.) y nombres accesibles de los segmentos."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +406,7 @@ export class CoTimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -520,7 +525,7 @@ export class CoTimeField {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Enfoca el segmento de la hora.",
                     "tags": []
                 }
             }

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

@@ -1,3 +1,14 @@
+/**
+ * Cada variante las reasigna en el elemento interno, así que se sobrescriben vía
+ * `co-toast::part(toast) { --co-toast-bg: … }`.
+ * @prop --co-toast-bg: Fondo de la tarjeta.
+ * @prop --co-toast-border: Color del borde.
+ * @prop --co-toast-text: Color del mensaje.
+ * @prop --co-toast-text-secondary: Color de la descripción.
+ * @prop --co-toast-icon: Color del ícono inicial.
+ * @prop --co-toast-dismiss-bg: Fondo del botón ✕.
+ * @prop --co-toast-dismiss-color: Color del ícono del botón ✕.
+ */
 :host {
   display: block;
 

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

@@ -8,6 +8,11 @@ const DEFAULT_ICON = {
 };
 const ALERT_VARIANTS = ['error', 'warning'];
 /**
+ * Notificación breve con mensaje, descripción opcional, ícono, acciones y ✕,
+ * con variantes semánticas y barra de progreso opcional. Es solo la tarjeta:
+ * mostrarla, apilarla y ocultarla es del host. Wrapper Vue: `CoToast` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot action - Action area (buttons, icon buttons)
  *
  * Figma variants (Tipos) are layout choices:
@@ -17,6 +22,10 @@ const ALERT_VARIANTS = ['error', 'warning'];
  * - Tipo=04 → message + inline icon action + dismiss
  *
  * Semantic `variant` adds a colored left accent + tinted icon + default icon when none provided.
+ *
+ * @part toast - Tarjeta del toast.
+ * @part track - Riel de la barra de progreso (`progress`).
+ * @part fill - Relleno de la barra de progreso.
  */
 export class CoToast {
     constructor() {
@@ -76,8 +85,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: '77bab740efb16eb862d74d3a072baa0399ac5cdc', class: "co-toast__content" }, h("span", { key: '5677e36f94c873b634e211aa7918ed44ace21b34', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'ca564a3e80564ac91a260d288f38a2ce28db66bb', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: 'd065c88d1d5e6465dab56a2fd59849051e0682d8', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: 'ee73223250c29067ee3e1a40140a3f8ef44aed4f', 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: '5aad9debc4e7b0a319e50b0f75ef10ac0b903a73', 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: 'f7b7332e1dd67f2f4b1a2d5b97785f8f9593f14f', class: "co-toast__actions" }, h("slot", { key: 'c4238c8ee27dc2211419f0c8af77021cb7a35ec2', name: "action" })))), !isStacked && (h("div", { key: '06b844a254ecd51dcb21c9cf84f2a7e5094a08bc', class: "co-toast__actions" }, h("slot", { key: 'c15f765d10ae12b38d081f3ad4b403c98ecd54c5', name: "action" }))), this.dismissible && (h("button", { key: '52482f3d953e68c7b6108bdedb889aa136739316', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '9c92e6bcc6ef0bc346a1f9104d382af5bf50c3a6', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +189,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-docs-2026-09-24/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
                         }
                     }
@@ -206,7 +215,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-docs-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

@@ -1,5 +1,10 @@
 /* co-toggle-button */
 
+/**
+ * @prop --co-toggle-button-width: Ancho del botón (default auto); útil para pastillas de ancho fijo.
+ * @prop --co-toggle-button-radius: Radio del botón (default según la talla); se sobrescribe sobre el elemento.
+ */
+
 :host {
   display: inline-flex;
   /* Squircle radius, size-aware — mirrors co-button shape="square".
@@ -74,6 +79,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 +166,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,46 @@
 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`.
+ * Wrapper Vue: `CoToggleButton` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @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() {
+        /** Activado (reflejado). El click lo invierte; dentro de un `co-toggle-button-group` lo coordina el grupo. */
         this.selected = false;
+        /** Valor que identifica al botón dentro de su grupo y que viaja en `coToggle`. */
         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';
+        /** Deshabilita el botón. */
         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 +49,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: 'a0b0aa7d128e4ee66a91a223851b126684d8e997',
+            /* 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: 'd683a91a68fb3820a01b8bd91dc3b81b8d8994f0', name: "leading" }), this.iconLeft && h("co-icon", { key: '6894633951caa68a614824af931a33dc46a552ab', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '96d902f0f28a8ea8a810425cf775ff6a9437be4d', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4e5db3f34af24fffce2ec95e4a7767c82768db39', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +127,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Activado (reflejado). El click lo invierte; dentro de un `co-toggle-button-group` lo coordina el grupo."
                 },
                 "getter": false,
                 "setter": false,
@@ -72,7 +147,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Valor que identifica al bot\u00F3n dentro de su grupo y que viaja en `coToggle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -92,7 +167,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -111,7 +186,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor antes del texto."
                 },
                 "getter": false,
                 "setter": false,
@@ -130,7 +205,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor despu\u00E9s del texto."
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +224,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,
@@ -169,7 +244,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el bot\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -181,15 +256,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,
@@ -227,7 +302,7 @@ export class CoToggleButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en el bot\u00F3n: `{ value, selected }` con el estado nuevo."
                 },
                 "complexType": {
                     "original": "{ value: string; selected: boolean }",
@@ -236,4 +311,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

@@ -1,17 +1,42 @@
 import { h } from "@stencil/core";
+/**
+ * Grupo de `co-toggle-button` que coordina la selección: única (default) o
+ * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
+ * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+ * `@prolibu-suite/cobalt-vue`.
+ */
 export class CoToggleButtonGroup {
     constructor() {
         /** Current selected value(s). Single string or JSON array for multiple. */
         this.value = '';
+        /** Selección múltiple: `value` y `coChange` llevan un array de valores. */
         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 compactas del editor
+         *  — `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';
+        /** Deshabilita todos los botones del grupo. */
         this.disabled = false;
+        /** Disposición de los botones: `row` (default) o `column`. */
         this.direction = 'row';
         /** Stretch the group to fill its container; each button shares the width equally. */
         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 +81,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 +92,16 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: 'ecad72f14ff7abb4ea6d1d13bf99bd112cd50e37', class: {
+        return (h("div", { key: '876d581e3c53b790f1e89ba3917325ccc7b5e8ba', 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: '9e791ede02a818a5fbe0bf571cc185cc3ea609a6' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -119,7 +149,7 @@ export class CoToggleButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple: `value` y `coChange` llevan un array de valores."
                 },
                 "getter": false,
                 "setter": false,
@@ -139,7 +169,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 compactas del editor\n\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,
@@ -159,7 +189,7 @@ export class CoToggleButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita todos los botones del grupo."
                 },
                 "getter": false,
                 "setter": false,
@@ -179,7 +209,7 @@ export class CoToggleButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disposici\u00F3n de los botones: `row` (default) o `column`."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,15 +241,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,
@@ -238,7 +268,7 @@ export class CoToggleButtonGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 la selecci\u00F3n (`value` ya est\u00E1 actualizado): el valor elegido, o el array en `multiple`."
                 },
                 "complexType": {
                     "original": "string | string[]",