@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

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

@@ -29,16 +29,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: 'cb5bdf31569ecb25bc8511d6aed95b8479439449', 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: '455228c9ab3e7dbb15f491771d645ae2d535ab00', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '4aef8c522cbeacea52921c691d0dd13c1431eb99', 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: '14d1298fda1435774c9e2c2c7f0c520a38ee56fd', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '092325cff854533520244d8bb783e917fcfc5827', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '354f905fe663ecfab517f251adfd8a956f598244', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7c79bc7214fc1dfa4188d7d3c7c67014e54d2892', required: this.required })), this.secondaryLabel && (h("span", { key: '66d5b233028700c142c9b5122a448ade37dd941f', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '7ee1c73c19a4cc030489e21e444b0a6caecb7d5a', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '089f18ba17c3b72e9368241593e39d54bdeb3b1e', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '082109f28c774a2f53290cd7e168347ab3e35b8a', 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

@@ -7,12 +7,22 @@ export class CoTab {
         this.value = '';
         /** Whether this tab is active/selected */
         this.selected = false;
-        /** Size */
+        /** Size. 'large'/'small' son los tamaños históricos (pill/underline). 's' (28px)
+            y 'xs' (26px, excepción D-19 a la escala unificada) solo tienen chrome propio
+            en `variant="segmented"` — ver co-tab.css. */
         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 +31,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: '61f50639e0a59faa103390bd34b478bbe947bb90', 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: '6148d93a09063c8bcaf31969657aaef573818469', name: this.iconLeft, size: iconSize })), h("span", { key: 'f0103e87ab5978dc77b30ab161122565b11b8675' }, this.label), this.badge && (h("span", { key: '76ed839028bbf536ea0ae3dde81d959e3f2c9fa1', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'd2fa1dec20135e2466a3ad546590216e1f7eb4a1', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -107,15 +117,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": "Size. 'large'/'small' son los tama\u00F1os hist\u00F3ricos (pill/underline). 's' (28px)\ny 'xs' (26px, excepci\u00F3n D-19 a la escala unificada) solo tienen chrome propio\nen `variant=\"segmented\"` \u2014 ver co-tab.css."
                 },
                 "getter": false,
                 "setter": false,
@@ -219,6 +229,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;
+}

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

@@ -1,13 +1,27 @@
 import { h } from "@stencil/core";
+import { revealScrollLeft, tabEdgesInTrack } from "./revealTab";
 export class CoTabGroup {
     constructor() {
         /** Visual variant, propagated to slotted co-tab children */
         this.variant = 'pill';
+        /** Estira el host y el track al 100% del contenedor; cada `co-tab` hijo
+            reparte el ancho por igual (`::slotted(co-tab) { flex: 1 }`) y, como se
+            propaga a los hijos igual que `size` (`syncTabs()`), cada `co-tab`
+            estira además su `part="tab"` al 100% del host (`:host([full-width])
+            .co-tab` en co-tab.css). Mismo contrato que `size`: un grupo sin
+            `fullWidth` nunca pisa un `fullWidth` puesto a mano en un hijo, y al
+            apagarlo baja solo a los hijos que él mismo subió. */
+        this.fullWidth = false;
+        /** Hijos a los que ESTE grupo les subió `fullWidth` — al apagar `fullWidth`
+            en el grupo se baja solo a estos, nunca a uno puesto a mano (M1). */
+        this.raisedFullWidth = new WeakSet();
         /** Slotted tabs can mount AFTER the group (async v-for data): re-propagate
             variant/selection whenever the slot content changes, or late tabs render
             with the default pill variant. */
         this.onSlotChange = () => {
             this.syncTabs();
+            this.observeTabSizes();
+            this.revealSelected();
         };
         /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
             `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
@@ -34,25 +48,88 @@ export class CoTabGroup {
     }
     watchValue() {
         this.syncTabs();
+        this.revealSelected();
     }
     watchVariant() {
         this.syncTabs();
     }
+    watchSize() {
+        this.syncTabs();
+    }
+    watchFullWidth() {
+        this.syncTabs();
+    }
     componentDidLoad() {
         this.syncTabs();
+        this.observeTabSizes();
+        this.revealSelected();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.tabsObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.tabsObserver = undefined;
+    }
+    observeTabSizes() {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        (_a = this.tabsObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.tabsObserver = new ResizeObserver(() => this.revealSelected());
+        this.el.querySelectorAll('co-tab').forEach((tab) => this.tabsObserver.observe(tab));
+    }
+    /** Lleva la pestaña activa a la vista dentro del track (sólo scroll horizontal
+        del track: la página no se mueve). Sin esto, abrir con una pestaña del final
+        activa (deep-link `?tab=`) la dejaba fuera de la tira. En rAF: al cargar y
+        con tabs async todavía no hay layout. */
+    revealSelected() {
+        requestAnimationFrame(() => {
+            var _a;
+            const track = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.co-tab-group');
+            if (!track || track.clientWidth === 0 || track.scrollWidth <= track.clientWidth)
+                return;
+            const selected = Array.from(this.el.querySelectorAll('co-tab')).find((tab) => tab.selected);
+            if (!selected)
+                return;
+            const { track: area, tab } = tabEdgesInTrack(track.getBoundingClientRect(), selected.getBoundingClientRect(), track);
+            const next = revealScrollLeft(track.scrollLeft, area, tab);
+            if (next !== track.scrollLeft)
+                track.scrollLeft = next;
+        });
     }
     syncTabs() {
         const tabs = this.el.querySelectorAll('co-tab');
         tabs.forEach((tab) => {
             tab.selected = (tab.value || tab.label) === this.value;
             tab.variant = this.variant;
+            if (this.size) {
+                tab.size = this.size;
+            }
+            this.syncFullWidth(tab);
         });
     }
+    /** Propaga `fullWidth` con el contrato de `size`: con el grupo en true, sube
+        al hijo (y lo anota); con el grupo en false, baja SOLO a los que subió
+        este grupo — un `fullWidth` puesto a mano en el hijo queda intacto. Sin
+        `fullWidth` en el grupo y sin hijos anotados, no toca nada: el DOM del
+        hijo queda como siempre (aditivo). */
+    syncFullWidth(tab) {
+        if (this.fullWidth) {
+            if (!tab.fullWidth) {
+                tab.fullWidth = true;
+                this.raisedFullWidth.add(tab);
+            }
+        }
+        else if (this.raisedFullWidth.has(tab)) {
+            tab.fullWidth = false;
+            this.raisedFullWidth.delete(tab);
+        }
+    }
     render() {
-        return (h("div", { key: 'f08c8fd752d5496f2699eeb3c67fa5d6dc106077', class: {
+        return (h("div", { key: 'a68d2cecdbce222f14100ebbde2b49001cb799f3', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: 'ffc3a7bfbf2efdd40e3f7e6dcf02e3b9e5026dc4', onSlotchange: this.onSlotChange })));
+                [`co-tab-group--size-${this.size}`]: !!this.size,
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '321c8f8b5110a818d34d1eaccb60fc416e5ad57a', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -106,6 +183,45 @@ export class CoTabGroup {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'pill'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'xs'",
+                    "resolved": "\"s\" | \"xs\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Track/tab size \u2014 solo tiene chrome propio en `variant=\"segmented\"`\n('s' = 28px, 'xs' = 26px, ver co-tab-group.css / co-tab.css). Se propaga\na los `co-tab` hijos igual que `variant` (mismo mecanismo, `syncTabs()`),\npero solo cuando est\u00E1 seteado: un grupo sin `size` nunca pisa un `size`\npuesto a mano en un `co-tab` hijo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estira el host y el track al 100% del contenedor; cada `co-tab` hijo\nreparte el ancho por igual (`::slotted(co-tab) { flex: 1 }`) y, como se\npropaga a los hijos igual que `size` (`syncTabs()`), cada `co-tab`\nestira adem\u00E1s su `part=\"tab\"` al 100% del host (`:host([full-width])\n.co-tab` en co-tab.css). Mismo contrato que `size`: un grupo sin\n`fullWidth` nunca pisa un `fullWidth` puesto a mano en un hijo, y al\napagarlo baja solo a los hijos que \u00E9l mismo subi\u00F3."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }
@@ -135,6 +251,12 @@ export class CoTabGroup {
             }, {
                 "propName": "variant",
                 "methodName": "watchVariant"
+            }, {
+                "propName": "size",
+                "methodName": "watchSize"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "watchFullWidth"
             }];
     }
     static get listeners() {

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

@@ -0,0 +1,26 @@
+/**
+ * `scrollLeft` del track para que la pestaña quede ENTERA a la vista (con `pad`
+ * de aire). Rects en coordenadas de viewport (getBoundingClientRect). Si ya se
+ * ve, devuelve el mismo `scrollLeft`: no hay salto.
+ */
+export function revealScrollLeft(scrollLeft, track, tab, pad = 8) {
+    if (tab.left < track.left)
+        return Math.max(0, scrollLeft - (track.left - tab.left) - pad);
+    if (tab.right > track.right)
+        return scrollLeft + (tab.right - track.right) + pad;
+    return scrollLeft;
+}
+/**
+ * Bordes de la pestaña y del área visible del track en px CSS relativos al
+ * borde interno del track (el mismo espacio que `scrollLeft`). Los rects de
+ * getBoundingClientRect salen ESCALADOS si un ancestro tiene transform (el
+ * drawer entra con escala): se dividen por la escala visual del track.
+ */
+export function tabEdgesInTrack(trackRect, tabRect, box) {
+    const scale = box.offsetWidth ? trackRect.width / box.offsetWidth || 1 : 1;
+    const toCss = (x) => (x - trackRect.left) / scale - box.clientLeft;
+    return {
+        track: { left: 0, right: box.clientWidth },
+        tab: { left: toCss(tabRect.left), right: toCss(tabRect.right) },
+    };
+}

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

@@ -186,14 +186,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '338b791cca6cbf885ef92bedd7cd349c120a611a', class: {
+        return (h("div", { key: '1ef89376f12003afa4250411b6dee524412ff880', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '1dc6616c53f7d3dd88d64b660746542c2742b3c3', class: "co-tags-field__labels" }, h("label", { key: 'c74138b4f45a22e5a59208694625042621098270', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'de34b1cb65244eb272720323dedab06079869238', required: this.required })))), h("div", { key: '670ec7a0f79a4300da5ca016ae1c8cb0a0fdc67e', class: "co-tags-field__field-row" }, h("div", { key: '03e8bd9d9380c80ca3f551df5482afe7d1b64ad5', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '00cd8a5cd078d1a4c20fa0a8f39aba8849b832a8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '31156258ceeee2b6086c53a27cdeb7fce2658e76', class: "co-tags-field__labels" }, h("label", { key: '0263770cef191ed7517011d12e5c8508be6e4ebd', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '358289e81e6cdafb0e1eca09de82ca7d46280f8f', required: this.required })))), h("div", { key: '72997e42dd6596f716df5a7c19dbe8e897244b00', class: "co-tags-field__field-row" }, h("div", { key: '1a2357d85e58cf87fb7aa24014e6fd25c69666db', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '58e7f2d2ead8c6624e03b8bf3a5dbdcbd171671c', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +201,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '4e420fa07aed79feb6d36ebce6ac739ad6f5fee1', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: 'e80b49d80a9a2655cdda8acd3035ee88bec2e976', class: {
+                : undefined }))), showInput && (h("input", { key: '4528c6c129e2a398e1e711aa292643b29bf636c3', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '3279bfa9651cc45c702567f0c1323562b338775d', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '15035d33ff47ad095f4cb4189cc694aaf4e0e901', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'e15557c8531957998d5afabf98e4da1dd7d32811', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '4f16febfdc7d8543267e07fa140a2c81b7e15a25', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '69a902c55a325c4b559ebf050d8d7de03e0b2074', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'eaec02e8a0af3cb98020a621d7ceae38107c9cdf', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '602738e23f55dea8388fa73760e5b612be24dc21', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '201a84c536b5404c43d7abbbbb6a96562348dcdd', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: 'a5a305ee228753d5693902df2739064f0e548aa2', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '4950c001e2604cd0dc35d4f4def640d89e18129e', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '5b2456911fe3aa83cca47781817a4a38258749d7', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: '669fe8eb16769774e3f9501eb8c6c533463cd8db', class: {
+        return (h("div", { key: 'e5e01322a905a357de6f2d509b7aca83cea49047', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '89109724e8325d67c42a26f2997d752e9a3f6152', class: "co-textarea__labels" }, this.label && (h("label", { key: '38f2d2fd52e02eb43b7381e2d257bd3d09ccd702', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '70e789e90f6b77676649c4ba3388e8f4293daf1f', required: this.required }))), this.secondaryLabel && (h("span", { key: 'dc9ba43690ff46be7e4db91f9ceca95c9c54d7f1', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '2f92be15a4199500dbf241246ceea5d3dcab041f', class: "co-textarea__field", part: "field" }, h("textarea", { key: '597a77679c34d1b5c9dbb818f7df316fee47c31a', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '62466350843dafc15c75c6e4c29b13faec7b5639', class: "co-textarea__labels" }, this.label && (h("label", { key: '06059b9f859cc62b7f7673c354577d504a2c2b45', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '2a48d38ac6b87dfd158eb0d7d9b1b3b2b1f95b5d', required: this.required }))), this.secondaryLabel && (h("span", { key: 'b24adbb11cf6ec84250ff3ce7552a9a519d53c3e', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '115cbef3d79afead80004feffde7b2ad7cc48f2d', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'a77b4842c08dc16e36cdb900aa35ddecb4663b57', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'fe9c62fc4f101aaccb152e4d7b005499c711477d', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '48eb2ab762af82f70548655fcc5ed809c462cc77', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'bdc8b371a0b870f4947fdaecbe2dfc032adf6539', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'd6674a0bf0672c2718b924bee4609b30afe95780', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'bcd4b99d6be969a6a8e9d8b8be5ab9f5f70ad872', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1c5feae936fb38feb4476074f0b440f44f7baad8', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '6bdef97075337ced6529246ca7aa367c4e79e031', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'b72d17d0ceede08590afe947b0b99c789c91305e', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '9b16efe568db1f6ec93d76908fdac7b5800ee59d', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '233601dfb3cf443a56f228deabfac87cca54d4c2', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'f587b4d8a744c0c0fd26ff45ee54982b90994dde', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '446fc7cd38b8bd6f65c4695c3b600b5a9ae9919e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '52035f4b099e808c0318205060492749a161a426', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '176b97555fad8ce83a38ee2af66b68edf0b26319', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -0,0 +1,63 @@
+/* co-tile — tarjeta 96×80 de ícono + etiqueta (grilla "Plantillas de página") */
+
+:host {
+  display: block;
+  width: 100%;
+  outline: none;
+}
+
+/* El host es el nodo focuseable/arrastrable (dnd-kit lo escucha directo);
+   deshabilitado bloquea el pointer AL HOST, no solo a la caja interna —
+   sin esto un consumidor con listener en el host seguiría recibiendo
+   pointerdown/click. */
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host(:focus-visible) .co-tile {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
+}
+
+.co-tile {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm2, 8px);
+  /* Aire lateral: sin él la etiqueta llega al borde. En la grilla de 96px del
+     panel "Elementos" del editor, "Tarjeta de agente" (91px a 12/400) y
+     "Acordeón FAQ" (75,4px) entraban en UNA línea pegadas al borde; el Figma
+     las envuelve a dos. Con `box-sizing: border-box`: 96 − 2×1 de borde −
+     2×12 = 70px de contenido, más angosto que las dos y con lugar de sobra
+     para el ícono de 32. Solo LATERAL: un padding de cuatro lados movería el
+     centrado vertical de los 80px de alto mínimo. */
+  padding-inline: var(--co-spacing-md, 12px);
+  background: transparent;
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-sm);
+  cursor: pointer;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+:host(:not([disabled])) .co-tile:hover {
+  background: var(--co-semantic-surface-hover);
+}
+
+:host([disabled]) .co-tile {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.co-tile__label {
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12);
+  font-weight: var(--co-font-weight-regular, 400);
+  line-height: 1.3;
+  color: var(--co-semantic-text-default);
+  text-align: center;
+  white-space: pre-line;
+}