@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/collection/components/co-swatch-grid/co-swatch-grid.js

@@ -0,0 +1,293 @@
+import { h } from "@stencil/core";
+import { isLightSwatch } from "../../utils/gradientStops";
+import { getSwatchGridStrings } from "../../utils/swatchGridI18n";
+/** Medidas por defecto. También cubren un `undefined` explícito (los wrappers
+ *  React/Vue lo pasan por las props omitidas y eso pisa el default de Stencil). */
+const DEFAULTS = { columns: 8, swatchSize: 24, gap: 8, radius: 6 };
+/**
+ * Grilla de muestras de color ("Colores recientes" del popover de relleno).
+ * Listbox de una sola selección: click (o Enter/Espacio) emite `coSelect` con
+ * el color; las flechas solo mueven el foco (roving tabindex).
+ *
+ * Los colores claros (luminancia WCAG > 0,85) reciben un borde automático
+ * para no fundirse con el fondo del panel.
+ * Wrapper Vue: `CoSwatchGrid` de `@prolibu-suite/cobalt-vue`.
+ */
+export class CoSwatchGrid {
+    constructor() {
+        /** Colores a mostrar (hex/rgba), en orden de lectura. */
+        this.colors = [];
+        /** Columnas de la grilla. */
+        this.columns = DEFAULTS.columns;
+        /** Lado de cada swatch en px. */
+        this.swatchSize = DEFAULTS.swatchSize;
+        /** Separación entre swatches en px. */
+        this.gap = DEFAULTS.gap;
+        /** Radio de cada swatch en px. */
+        this.radius = DEFAULTS.radius;
+        this.swatchEls = [];
+        this.handleKeyDown = (index, e) => {
+            var _a;
+            const last = this.colorList.length - 1;
+            if (last < 0)
+                return;
+            const cols = this.columnCount;
+            let next;
+            switch (e.key) {
+                case 'ArrowRight':
+                    next = Math.min(last, index + 1);
+                    break;
+                case 'ArrowLeft':
+                    next = Math.max(0, index - 1);
+                    break;
+                case 'ArrowDown':
+                    next = index + cols > last ? index : index + cols;
+                    break;
+                case 'ArrowUp':
+                    next = index - cols < 0 ? index : index - cols;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = last;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            (_a = this.swatchEls[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    static normalize(color) {
+        return (color !== null && color !== void 0 ? color : '').trim().toLowerCase();
+    }
+    get colorList() {
+        var _a;
+        return (_a = this.colors) !== null && _a !== void 0 ? _a : [];
+    }
+    get columnCount() {
+        var _a;
+        return Math.max(1, Math.floor((_a = this.columns) !== null && _a !== void 0 ? _a : DEFAULTS.columns) || 1);
+    }
+    selectedIndex() {
+        const v = CoSwatchGrid.normalize(this.value);
+        if (!v)
+            return -1;
+        return this.colorList.findIndex((c) => CoSwatchGrid.normalize(c) === v);
+    }
+    render() {
+        var _a, _b, _c;
+        const s = getSwatchGridStrings(this.locale);
+        const size = (_a = this.swatchSize) !== null && _a !== void 0 ? _a : DEFAULTS.swatchSize;
+        const gap = (_b = this.gap) !== null && _b !== void 0 ? _b : DEFAULTS.gap;
+        const radius = (_c = this.radius) !== null && _c !== void 0 ? _c : DEFAULTS.radius;
+        const selected = this.selectedIndex();
+        // Roving tabindex: una sola parada de tab (el seleccionado, o el primero).
+        const tabbableIndex = selected >= 0 ? selected : 0;
+        this.swatchEls = [];
+        return (h("div", { key: '37b221ff9dbebc184310f1cd51d539b833876adf', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
+                if (el)
+                    this.swatchEls[i] = el;
+            }, class: {
+                'co-swatch-grid__swatch': true,
+                'co-swatch-grid__swatch--selected': i === selected,
+                'co-swatch-grid__swatch--light': isLightSwatch(color),
+            }, role: "option", "aria-selected": i === selected ? 'true' : 'false', "aria-label": color, tabIndex: i === tabbableIndex ? 0 : -1, style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: `${radius}px`,
+                '--co-swatch-grid-color': color,
+            }, onClick: () => this.coSelect.emit(color), onKeyDown: (e) => this.handleKeyDown(i, e) })))));
+    }
+    static get is() { return "co-swatch-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-swatch-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-swatch-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colores a mostrar (hex/rgba), en orden de lectura."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color seleccionado (anillo `accent`); se compara sin distinguir may\u00FAsculas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columnas de la grilla."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "DEFAULTS.columns"
+            },
+            "swatchSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lado de cada swatch en px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swatch-size",
+                "defaultValue": "DEFAULTS.swatchSize"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Separaci\u00F3n entre swatches en px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "DEFAULTS.gap"
+            },
+            "radius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Radio de cada swatch en px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "DEFAULTS.radius"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del listbox. 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 events() {
+        return [{
+                "method": "coSelect",
+                "name": "coSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color elegido (el string tal cual vino en `colors`)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -1,5 +1,9 @@
 /* Figma: 44×24px track, radius-full, thumb 20×20px white circle */
 
+/**
+ * @prop --co-switch-label-gap: Separación entre el interruptor y la etiqueta.
+ */
+
 :host {
   display: inline-flex;
   font-family: var(--co-font-family-primary);

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

@@ -1,5 +1,14 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Interruptor on/off para activar o desactivar una opción al instante, con
+ * etiqueta y texto secundario. Wrapper Vue: `CoSwitch` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part track - Riel del interruptor.
+ * @part thumb - Círculo que se desplaza.
+ * @part label - Etiqueta.
+ * @part secondary-label - Texto secundario bajo la etiqueta.
+ */
 export class CoSwitch {
     constructor() {
         /** Whether the switch is on */
@@ -29,16 +38,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '94410fce797382a4b25356d8b1325b5a75508d84', class: {
+        return (h("div", { key: 'ea7d325ff800a4f4db50c46cc4d2198cd9fd4417', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '9b0d491e7e33faaa476dedd4f0e8826c4fde1249', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '6c7cc4ece2aff5fa089271cf47908cfcbc3d5827', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'a1f781028f45bdb9aa7d7dfc23e16b0f7fdc6eea', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '97177558e46e8fd58636339ac3a2c6990a473cfe', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '3a55c9aa1cc925dd09ac4d2b7367f8fd627b9e19', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '450cf6e28979b72e7821c0fa6130333410207343', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '509f09430837fcba73ff248d80a44e8bb7e2175f', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'ff017ff012f698b054db7f43832e3fb94b3eec01', required: this.required })), this.secondaryLabel && (h("span", { key: 'd5d33606934cd0d69f0faa3eb8afe2c962a1f5ab', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '1111d3b03f846f524b53510dd3c638db2a0d7753', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0deb3c0d9e2b6a4e7a5b791b8f739ed0d1dc9f91', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'f769d1b5c2217f84517b58baf91b0db7952c9062', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '0227ea14f20b836226e5c9af5115c09bbec833d6', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '4abd7d4ca1a3defc7c77c5ea3f79cb615e651c53', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '255b45047435c01f5b99c66c123faa19c4ac2f0e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7d1754be733fed89bd5cdb57175a68bd84bcb59b', required: this.required })), this.secondaryLabel && (h("span", { key: 'd790d306315a1ffa5601c775133de433f708e3ea', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '0fa80b2cea84d461d1bd95d598cf56b3c021c487', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f8b55daf30cdad200f57baa316c841acd2387e7', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '297f6d425ebc33eb752d140df2aa6aa4288dfe37', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,6 +20,16 @@
   box-sizing: border-box;
 }
 
+/* ─── Full width (lo setea co-tab-group full-width) ──────────── */
+/* El grupo estira el HOST con `::slotted(co-tab) { flex: 1 }`, pero el
+   botón de adentro seguía al ancho de su contenido (pastilla segmentada de
+   75px dentro de un host de 95). Con el atributo reflejado, el `part="tab"`
+   ocupa todo el host y centra el label. Aditivo: sin `full-width` no matchea. */
+:host([full-width]) .co-tab {
+  width: 100%;
+  justify-content: center;
+}
+
 /* ─── Sizes ─────────────────────────────────────────────────── */
 .co-tab--small {
   padding: 0 var(--co-spacing-sm2);
@@ -145,3 +155,53 @@
   background: var(--co-color-base-blanco, #fff);
   color: var(--co-color-base-negro, #1f1c1b);
 }
+
+/* ─── Segmented size s (28px, escala unificada D-19) ────────────── */
+/* Dos clases (segmented+s) le ganan por especificidad a `.co-tab--segmented`
+   sin importar el orden en la hoja — mismo mecanismo que `--underline`.
+   Altura EXPLÍCITA (no padding vertical + line-height): con `box-sizing:
+   border-box` (heredado de `.co-tab`) y el `border: 1px solid transparent`
+   de `.co-tab--segmented`, un padding vertical de 6px daba 26px reales
+   (12 padding + 12 línea + 2 borde), no 28 — y el de `xs` (8px) daba 28,
+   invirtiendo la escala D-19. `height` fija hace el resultado determinista
+   sin depender de cómo el navegador mide la línea de texto. */
+.co-tab--segmented.co-tab--s {
+  height: 28px;
+  padding: 0 var(--co-spacing-md, 12px);
+  line-height: 1;
+  border-radius: var(--co-spacing-sm, 6px);
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: 500;
+  color: var(--co-color-gray-600, #585858);
+  background: transparent;
+}
+
+.co-tab--segmented.co-tab--s.co-tab--selected {
+  background: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  box-shadow: var(--co-shadow-lg);
+  color: var(--co-color-base-negro, #1f1c1b);
+  font-weight: 500;
+}
+
+/* ─── Segmented size xs (26px, excepción aceptada D-19) ─────────── */
+/* Misma razón que `--s`: altura explícita en vez de padding vertical, ver
+   comentario arriba. */
+.co-tab--segmented.co-tab--xs {
+  height: 26px;
+  padding: 0 var(--co-spacing-md, 12px);
+  line-height: 1;
+  border-radius: var(--co-spacing-sm, 6px);
+  font-size: var(--co-font-size-10, 10px);
+  font-weight: 500;
+  color: var(--co-color-gray-600, #585858);
+  background: transparent;
+}
+
+.co-tab--segmented.co-tab--xs.co-tab--selected {
+  background: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  box-shadow: var(--co-shadow-lg);
+  color: var(--co-color-base-negro, #1f1c1b);
+  font-weight: 500;
+}

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

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * Pestaña individual; va dentro de un `co-tab-group`, que le propaga `variant`,
+ * `size` y `fullWidth` y marca `selected` según su `value`. Wrapper Vue: `CoTab`
+ * de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part tab - El botón de la pestaña.
+ * @part badge - Contador junto al texto (`badge`).
+ */
 export class CoTab {
     constructor() {
         /** Tab label */
@@ -7,12 +15,22 @@ export class CoTab {
         this.value = '';
         /** Whether this tab is active/selected */
         this.selected = false;
-        /** Size */
+        /** Tamaño: `large`/`small` (default) son los de las variantes pill y underline;
+         *  `s` (28px) y `xs` (26px) solo tienen estilo propio en `variant="segmented"`.
+         *  Dentro de un `co-tab-group` con `size`, el grupo lo fija. */
         this.size = 'small';
         /** Visual variant: filled pill (default), underline tab, or segmented-control pill */
         this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
+        /** Estira el botón interno (`part="tab"`) al 100% del host y centra su
+            contenido. Lo setea `co-tab-group` con `full-width` (se propaga a los
+            hijos igual que `size`, ver `syncTabs()`: el grupo sin `fullWidth` nunca
+            pisa uno puesto a mano acá): el grupo ya estiraba el host con
+            `::slotted(co-tab) { flex: 1 }`, pero el `.co-tab` de adentro seguía al
+            ancho del contenido. Reflejado para que `:host([full-width])` lo vea
+            desde el CSS. Sin él, nada cambia. */
+        this.fullWidth = false;
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -21,13 +39,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '0d7312af81807baec7f7b0899d9a92186175b8eb', class: {
+        return (h("button", { key: '7b388ddd5338499064d43f30c0fa854d0be6773c', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '8bef8688e8ea0ce2befc12efcbe5683de02f808d', name: this.iconLeft, size: iconSize })), h("span", { key: '860469720e5396d353e0a548b9526fbf64a3ac2d' }, this.label), this.badge && (h("span", { key: 'eb9b9749b6f56a1cb98044ccd5817f016a7e9747', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '001337e6ec2235244be4acffb930003f02acaf47', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'ae4c8bd29005e3d51a882eb1104b5e63a6ef69e5', name: this.iconLeft, size: iconSize })), h("span", { key: '6617a4e1af257a3b9d847a77915f202560940733' }, this.label), this.badge && (h("span", { key: 'a2b327941ab6e7578113b5ef05a2e3725132fcb0', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '8a41a7df2c8f37c281c97bf4ab3c81f8ea476a45', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -107,15 +125,15 @@ export class CoTab {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'large' | 'small'",
-                    "resolved": "\"large\" | \"small\"",
+                    "original": "'large' | 'small' | 's' | 'xs'",
+                    "resolved": "\"large\" | \"s\" | \"small\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size"
+                    "text": "Tama\u00F1o: `large`/`small` (default) son los de las variantes pill y underline;\n`s` (28px) y `xs` (26px) solo tienen estilo propio en `variant=\"segmented\"`.\nDentro de un `co-tab-group` con `size`, el grupo lo fija."
                 },
                 "getter": false,
                 "setter": false,
@@ -219,6 +237,26 @@ export class CoTab {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estira el bot\u00F3n interno (`part=\"tab\"`) al 100% del host y centra su\ncontenido. Lo setea `co-tab-group` con `full-width` (se propaga a los\nhijos igual que `size`, ver `syncTabs()`: el grupo sin `fullWidth` nunca\npisa uno puesto a mano ac\u00E1): el grupo ya estiraba el host con\n`::slotted(co-tab) { flex: 1 }`, pero el `.co-tab` de adentro segu\u00EDa al\nancho del contenido. Reflejado para que `:host([full-width])` lo vea\ndesde el CSS. Sin \u00E9l, nada cambia."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/co-tab-group/co-tab-group.css

@@ -33,6 +33,22 @@
   flex-shrink: 0;
 }
 
+/* ─── Full width ─────────────────────────────────────────────── */
+/* Host y track al 100% del contenedor; cada co-tab hijo reparte el ancho
+   por igual. Aditivo: sin el atributo, el host sigue clippeando por
+   contenido (`max-width: 100%` de arriba), igual que antes. */
+:host([full-width]) {
+  width: 100%;
+}
+
+:host([full-width]) .co-tab-group {
+  width: 100%;
+}
+
+:host([full-width]) ::slotted(co-tab) {
+  flex: 1;
+}
+
 /* ─── Underline variant ─────────────────────────────────────── */
 /* Full-width hairline rail under the tabs; children overlap it with
    their own `margin-bottom: -1px`. */
@@ -54,3 +70,11 @@
   border-bottom: 1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));
   border-radius: var(--co-border-radius-sm, 12px);
 }
+
+/* Track compacto para pestañas size="s" (28px, D-19) — dos clases le ganan
+   por especificidad a `.co-tab-group--segmented` sin importar el orden. */
+.co-tab-group--segmented.co-tab-group--size-s {
+  padding: 4px;
+  border-radius: var(--co-border-radius-xs, 8px);
+  border-bottom: none;
+}