@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,13 +1,36 @@
 import { h } from "@stencil/core";
+import { revealScrollLeft, tabEdgesInTrack } from "./revealTab";
+/**
+ * Grupo de pestañas (`co-tab`) que controla cuál está activa: `value` marca la
+ * pestaña, al elegir otra se actualiza y emite `coTabChange`. Propaga `variant`,
+ * `size` y `fullWidth` a sus pestañas y, si desbordan, lleva la activa a la
+ * vista. Wrapper Vue: `CoTabGroup` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Los `co-tab` del grupo.
+ * @part tab-group - La pista que contiene las pestañas.
+ */
 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 +57,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: 'e226f6ba6da4566f95011d121a176697218ffaba', 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: '93689e301da64a7ca850571cb623c339294c2122', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -106,6 +192,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 +260,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

@@ -21,15 +21,22 @@ import { FieldChip } from "../../utils/fieldChip";
  * @part input - The native text input
  * @part clear - The clear-all button
  * @part helper - The helper/error text row
+ *
+ * Wrapper Vue: `CoTagsField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoTagsField {
     constructor() {
         /** Committed value as a JSON array of strings (or an actual `string[]`). */
         this.value = '[]';
+        /** Placeholder del input para escribir un tag nuevo. */
         this.placeholder = '';
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Solo lectura: muestra los tags sin permitir agregar ni quitar. */
         this.readonly = false;
+        /** Botón × que quita todos los tags (default `true`); emite `coClear`. */
         this.clearable = true;
         /** Allow the same value to be added more than once. */
         this.allowDuplicates = false;
@@ -186,14 +193,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: '81725f6d5bd9c22fa799825abf44d1e71a34b33a', 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: 'c5c913633aa37306acccbd0ca15abb3e265a60cd', class: "co-tags-field__labels" }, h("label", { key: '5898720b85700f9d6f3567c1399806bfa3e28d2d', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c95129fbedfa41a2d735bc4f912f4a98b83c796f', required: this.required })))), h("div", { key: '940a2cd420b5b2e1cb981c21ff2df0957b7c39d6', class: "co-tags-field__field-row" }, h("div", { key: 'a100b3644ac42d71034d99be426d594b37275e71', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '3eac2458a1cf8e4bdbad67c57f323cfa4d7a5c85', 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 +208,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: '4bda12b201fd72a40a3b6edd900373890d2d84be', 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: '1dedc650b5688bdd820e5253bad57c5a6c5a1725', 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: '21dcfc3fe3e72ba8d1557fcd9a9c3d4c774e942e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '7f829d899b73f76f8a66ce5766e0906756ebb5fa', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'c5a053f84171586ca0902815996430359647aadf', 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: 'fcdb85825b3b54b126ed055832bd1e509901ca87', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '8f6845e58e30c2f5a62f715b7e9b4b12566c4402', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +262,7 @@ export class CoTagsField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +281,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del input para escribir un tag nuevo."
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +301,7 @@ export class CoTagsField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Atributo `name` del input nativo."
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +320,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +340,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +360,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra los tags sin permitir agregar ni quitar."
                 },
                 "getter": false,
                 "setter": false,
@@ -373,7 +380,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bot\u00F3n \u00D7 que quita todos los tags (default `true`); emite `coClear`."
                 },
                 "getter": false,
                 "setter": false,
@@ -582,7 +589,7 @@ export class CoTagsField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El input gan\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",
@@ -597,7 +604,7 @@ export class CoTagsField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El input perdi\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",

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;
+}

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

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