@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

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

@@ -9,6 +9,7 @@ import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncat
  * in-memory CustomEvent detail, never a serialized attribute); the host uploads
  * them and feeds the resulting state back through the controlled `files` prop.
  * This mirrors `co-ref-field` (the WC emits intent, the host does the I/O).
+ * Wrapper Vue: `CoFileField` de `@prolibu-suite/cobalt-vue`.
  *
  * @part wrapper - Root container
  * @part label - The field label
@@ -28,9 +29,13 @@ import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncat
  */
 export class CoFileField {
     constructor() {
+        /** Deshabilita el campo: no acepta archivos ni acciones. */
         this.disabled = false;
+        /** Solo lectura: muestra los archivos sin permitir subir, quitar ni reordenar. */
         this.readonly = false;
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Varios archivos: lista de subidos (con `max` y reordenamiento opcional); sin él, un solo archivo. */
         this.multiple = false;
         /** Max number of files (multiple mode). */
         this.maxFiles = 100;
@@ -358,12 +363,12 @@ export class CoFileField {
         const previews = this.previewItems();
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: 'af16871d531125d82a3fc5ba0ab5a08ca6e67756', class: {
+        return (h("div", { key: 'ee6fa70ea7fd466ec315eff1b6f3d044b1c6c6d9', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '9eb9c80a6c23b24be12b2410fd5713c4ab62965d', class: "co-file-field__labels" }, h("label", { key: '3b577dd00ea6cfa4635bd016dcde4604f6b01dd3', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '2d41558573a614e7f7fa654dad622d36e6e35ffa', required: this.required })))), showDropzone && (h("div", { key: 'ad4215799a768078703d78b4b38689d987e8a13b', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '48a181a0cb1e0c53da9d61a856f3d2cc5e97d079', class: "co-file-field__labels" }, h("label", { key: '47f162d9fdad44d4c8c8f7756c901eea216b7627', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '4549d57f016e2874ea7b141d9dc83e09c38bdbf3', required: this.required })))), showDropzone && (h("div", { key: '3d16ff2e38de335e5fba78931cd6b1b009603a70', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -371,7 +376,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'e32603408a107ad2fbd5ab158b1ca52c7c858833', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'dd5e41181e235722531cca15f289c54754a301ee', name: "file-arrow-up", size: 18 }), h("span", { key: '842ac546197c761eb9732504ae0dbae7967ceb49' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '1f53b0376ff5ff0b6b0adecf808a846af7628d9a', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '2df578f0c6717255ba18cc5da64f5fda34f3714f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '0f0cd178f617119623edb6bc042d8f0647e48527', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'a2238c3ae9732e96574447aeab9948959e27445a', name: "actions" })), h("input", { key: '2ad962b5becf263b05ebb72492afa89db9e81e47', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'd49f51126e68860782ca184eef99b6f74a0fd94b', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'bbc88a36167076a64d244886b3d8c6f388e065d5', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '108e8dbcb0fb47d397c765400ea2333d83fb0d57', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'e9a2c51a238455e7887e8310c02ac739ebf89e4e', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '5a6fe016b2e26896a8b788bb1473c5434d71e85f', name: "file-arrow-up", size: 18 }), h("span", { key: 'e69793c228fef62c5c0aec07f5f038aa3e931b3b' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '7343bd26d1132ac6b0b0ded57f1a2a32f228d0e8', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'd7b68c8723c91b80b124298e29c9165c2489f59f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '38318d6e86a90cc8faf6955ea480b39d242d8122', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'ad9f134cd0f01b1ed61d8d8966d5a7d40bda0812', name: "actions" })), h("input", { key: '8a3b769794a89213a1f02f0b82899e624a5578d6', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '8040d77615d29a691bc2087eddd7298b3922066c', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e4660cdfe20c1b4669b57a4474234161bac4c812', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '636e3e35dcb8ad263361e1b652dca23b499e5354', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
             const key = this.keyFor(item);
             const video = isVideo(item);
             // A video without a usable poster still gets a card — the
@@ -382,7 +387,7 @@ export class CoFileField {
                     'co-file-field__preview': true,
                     'co-file-field__preview--video': video,
                 }, part: "preview", type: "button", key: `prev-${key}`, title: item.name, "aria-label": `${video ? s.playVideo : s.openPreview}: ${item.name}`, onClick: () => this.handlePreviewOpen(item) }, showImg && (h("img", { src: video ? poster : item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })), video && (h("span", { class: "co-file-field__preview-play", "aria-hidden": "true" }, h("span", { class: "co-file-field__preview-play-badge" }, h("co-icon", { name: "play", size: 20, weight: "fill" })), !poster && (h("span", { class: "co-file-field__preview-ext" }, fileExtension(item).toUpperCase()))))));
-        }))), h("ul", { key: '876616fa30a35a3f3597d2043fb1ce09cf6d12b5', class: "co-file-field__list", part: "list" }, items.map((item) => {
+        }))), h("ul", { key: 'b67b8c43f8c02c65e780b3fa644123bf0f29d69b', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -406,10 +411,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
-        })))), helper && (h("div", { key: 'b6600a528ff6e9e3302bf889e58fac59edfeab2d', class: {
+        })))), helper && (h("div", { key: 'ff75602503a198d8598d2b35fd881c848a7b76d6', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '22d4218f3df57544633322761c905af8c4398f26', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'c7e02e0931ba3ea0bb6e3a6f5381e86ddbf982f1', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'af79e0b999c781560c316023897aaa850b1d6ae0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'b5af4dab0d3c7dc317265604159a95f3bf8d200d', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }
@@ -437,7 +442,7 @@ export class CoFileField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -456,7 +461,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo: no acepta archivos ni acciones."
                 },
                 "getter": false,
                 "setter": false,
@@ -476,7 +481,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra los archivos sin permitir subir, quitar ni reordenar."
                 },
                 "getter": false,
                 "setter": false,
@@ -496,7 +501,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -516,7 +521,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Varios archivos: lista de subidos (con `max` y reordenamiento opcional); sin \u00E9l, un solo archivo."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,5 +1,12 @@
 import { h } from "@stencil/core";
 import { resolveFileTileType, TYPE_META } from "./co-file-type-tile.utils";
+/**
+ * Ícono de tipo de archivo (según la extensión) sobre un cuadrado redondeado
+ * tintado: PDF, documento, planilla, imagen… Wrapper Vue: `CoFileTypeTile` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part tile - El cuadrado con el ícono.
+ */
 export class CoFileTypeTile {
     constructor() {
         /** Tile edge length in px (React uses 44 / 34 / 26). */
@@ -15,7 +22,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: 'bf16f0141f09189575a7333030affb4e365f7de5', class: {
+        return (h("span", { key: 'da0b0b3e48e1847bd7c74e32bec23abc074f53a7', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -25,7 +32,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'e194cb5de679470c57774c83d852522b9ce77b31', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '70034ff2279181498ba2481fb3709cae3016901d', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-gradient-bar/co-gradient-bar.css

@@ -1,5 +1,10 @@
 /* co-gradient-bar — barra de paradas de un degradado (popover de relleno) */
 
+/**
+ * @prop --co-gradient-bar-handle-halo: Anillo exterior de 1px de los tiradores (default transparente); da silueta sobre fondos oscuros.
+ * @prop --co-gradient-bar-handle-shadow: Sombra de los tiradores (default `--co-shadow-sm2`; `none` la quita).
+ */
+
 :host {
   display: block;
   width: 100%;

package/dist/collection/components/co-gradient-bar/co-gradient-bar.js

@@ -18,6 +18,11 @@ import { getGradientBarStrings } from "../../utils/gradientBarI18n";
  * El componente es controlado: `stops` los pinta el host. Durante el arrastre
  * el handle se pinta en la posición viva aunque el host no aplique cada
  * `coStopMove`.
+ *
+ * Wrapper Vue: `CoGradientBar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part track - La barra con el degradado.
+ * @part handle - Cada tirador de parada.
  */
 export class CoGradientBar {
     constructor() {
@@ -175,12 +180,12 @@ export class CoGradientBar {
         const live = this.liveStops();
         const n = live.length;
         const hasSelection = this.selected != null && this.selected >= 0 && this.selected < n;
-        return (h("div", { key: '9e11e4891bbe0fc312d9122e215c5516630b6901', class: {
+        return (h("div", { key: '10e1f78165d061dd08141de0a0ca885f15b7ff83', class: {
                 'co-gradient-bar': true,
                 'co-gradient-bar--disabled': this.disabled,
                 'co-gradient-bar--dragging': this.dragIndex >= 0,
                 'co-gradient-bar--transparent': hasTransparentStop(live),
-            }, role: "group", "aria-label": this.label || s.barLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '51bee4cadd25fab6502bb14f7f88f2c6e0fd8d7c', class: "co-gradient-bar__track", part: "track", ref: (el) => (this.trackEl = el), onClick: this.handleTrackClick }, h("div", { key: 'c1332cbca2d2208970f8c259400d0470ffb56eac', class: "co-gradient-bar__fill", style: { background: gradientCss(live) } }), live.map((stop, i) => {
+            }, role: "group", "aria-label": this.label || s.barLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e591b6e6d74ee9c9f3b9992f6d12cfd360f9fa49', class: "co-gradient-bar__track", part: "track", ref: (el) => (this.trackEl = el), onClick: this.handleTrackClick }, h("div", { key: 'fd5b93939df8988a08b8ab9f1fab36cc3eb24096', class: "co-gradient-bar__fill", style: { background: gradientCss(live) } }), live.map((stop, i) => {
             const selected = i === this.selected;
             // Roving tabindex: una sola parada de tab (la seleccionada, o la primera).
             const tabbable = hasSelection ? selected : i === 0;

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 /**
  * Helper / validation text shown below form fields.
+ * Wrapper Vue: `CoHelperText` de `@prolibu-suite/cobalt-vue`.
+ * @part helper-text - La fila del texto (ícono de estado + texto).
  */
 export class CoHelperText {
     constructor() {
@@ -15,10 +17,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '67e1311461c3d867a06acbf89a91b98c5995c60d', class: {
+        return (h("div", { key: '12a67e485fed5d931c4325a0139d3ae7669b8de4', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '73c07b3907cc637c73c83bc7fc795c433bc79b6d', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '5450e82fc0b8e5ce35fbb224aa43b274120e1b77', class: "co-helper-text__message" }, h("slot", { key: '4b33fc9c386bcd88c47eed25b9b7b597e3c3bd31' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '5bdb8635fa1654a9e10176c9818ba4197fc252e8', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'c2f165cc0226ea1d799c62d0929d6acbf5cc1b98', class: "co-helper-text__message" }, h("slot", { key: 'd8315ea3ea6c002f83f1d936f9a3521831593b3d' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,10 @@ import { loadSvg } from "./iconLoader";
  * Usage:
  *   <co-icon name="plus" />
  *   <co-icon name="arrow-right" weight="bold" size="24" />
+ *
+ * Wrapper Vue: `CoIcon` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part svg - Contenedor del SVG (toma `currentColor`).
  */
 export class CoIcon {
     constructor() {
@@ -31,12 +35,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '66a4583c6d57b57eaee720026f40453653048d8d', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'e6f8302d22e1fbeac4e82d199b9214063c7b2313', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '423686acaa97e3c78163f79f98a38234b319c050', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '7967a0787112955036f6f88231a2a635e647e218', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -1,3 +1,12 @@
+/**
+ * @prop --co-icon-button-bg: Superficie de las variantes `filled`/`outlined` (se mezcla con transparencia).
+ * @prop --co-icon-button-color: Color del ícono.
+ * @prop --co-icon-button-border: Borde de la variante `filled`.
+ * @prop --co-icon-button-selected-bg: Fondo con `selected` (default el acento).
+ * @prop --co-icon-button-selected-color: Color del ícono con `selected` (default on-accent).
+ * @prop --co-icon-button-radius: Radio del botón, en todas las tallas y formas.
+ * @prop --co-icon-button-backdrop-filter: Reemplaza el `backdrop-filter` del botón. Ojo: queda fuera del interruptor `--co-glass-filter` y de `prefers-reduced-transparency`; para ajustar el frost usá `--co-glass-blur`/`--co-glass-saturate`.
+ */
 :host {
   display: inline-flex;
 }

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

@@ -1,5 +1,11 @@
 import { h } from "@stencil/core";
 /**
+ * Botón que solo muestra un ícono. Como no tiene texto visible, `label` es
+ * obligatorio (es su nombre accesible) y conviene envolverlo en un `co-tooltip`.
+ * Wrapper Vue: `CoIconButton` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part button - El `<button>` nativo interno.
+ *
  * @slot - Glifo propio (p.ej. un `<svg>` inline de 16px) que ocupa el lugar del
  *         `co-icon` cuando NO se pasa `icon`. Va dentro del `<button>`, así que
  *         hereda `color`/`currentColor`, la opacidad de hover/disabled, el
@@ -56,10 +62,9 @@ export class CoIconButton {
         /**
          * Agrega un `caret-down` de 8px a la derecha del icono principal (botones-disclosure).
          * Ensancha la caja +8px (el alto no cambia) para que el caret no le robe espacio
-         * al icono — fix round 1: la primera versión usaba `padding-right`, que con
-         * `box-sizing: border-box` y ancho fijo por talla ENCOGE el área de contenido en
-         * vez de agrandar la caja (overflow real en xs/xxs). Sin `caret`, el DOM/CSS
-         * quedan idénticos al comportamiento anterior.
+         * al icono (un `padding-right` con `box-sizing: border-box` y ancho fijo por talla
+         * encogería el área de contenido en vez de agrandar la caja). Sin `caret`, el
+         * DOM/CSS quedan idénticos al comportamiento anterior.
          */
         this.caret = false;
     }
@@ -92,7 +97,7 @@ export class CoIconButton {
         const usesSlot = !this.icon;
         const style = usesSlot
             ? Object.assign(Object.assign({}, (boxStyle !== null && boxStyle !== void 0 ? boxStyle : {})), { '--co-icon-button-glyph-size': `${resolvedIconSize}px` }) : boxStyle;
-        return (h("button", { key: '4ae94400d9f54425b1aa844a651fbe441f545645', class: {
+        return (h("button", { key: 'd04a7878b984d9613603801b0b18285d02e71f7e', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
@@ -103,7 +108,7 @@ export class CoIconButton {
                 'co-icon-button--disabled': this.disabled,
             }, style: style, disabled: this.disabled, "aria-label": this.label || (this.toggled && this.toggleIcon ? this.toggleIcon : this.icon), "aria-pressed": this.selected ? 'true' : undefined, part: "button" }, this.icon && this.toggleIcon ? (h("span", { class: { 'co-icon-button__swap': true, 'co-icon-button__swap--toggled': this.toggled }, "aria-hidden": "true" }, h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize }), h("co-icon", { name: this.toggleIcon, weight: this.iconWeight, size: resolvedIconSize }))) : this.icon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })) : (
         // Sin `icon`: el consumidor proyecta su propio glifo (ver @slot).
-        h("slot", null)), this.caret && h("co-icon", { key: 'f8a026ec97d9d37f9f62c81a3ae484d2a8b09665', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
+        h("slot", null)), this.caret && h("co-icon", { key: 'db59eb79e6609b237ed3a642f5c44f2a046a4efe', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
     }
     static get is() { return "co-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -407,7 +412,7 @@ export class CoIconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Agrega un `caret-down` de 8px a la derecha del icono principal (botones-disclosure).\nEnsancha la caja +8px (el alto no cambia) para que el caret no le robe espacio\nal icono \u2014 fix round 1: la primera versi\u00F3n usaba `padding-right`, que con\n`box-sizing: border-box` y ancho fijo por talla ENCOGE el \u00E1rea de contenido en\nvez de agrandar la caja (overflow real en xs/xxs). Sin `caret`, el DOM/CSS\nquedan id\u00E9nticos al comportamiento anterior."
+                    "text": "Agrega un `caret-down` de 8px a la derecha del icono principal (botones-disclosure).\nEnsancha la caja +8px (el alto no cambia) para que el caret no le robe espacio\nal icono (un `padding-right` con `box-sizing: border-box` y ancho fijo por talla\nencoger\u00EDa el \u00E1rea de contenido en vez de agrandar la caja). Sin `caret`, el\nDOM/CSS quedan id\u00E9nticos al comportamiento anterior."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,6 @@
+/**
+ * @prop --co-input-suffix-color: Color del contenido del slot `suffix` (default: hereda).
+ */
 /* ============================================================
    co-input  —  Text Field component
    Figma: Text Fields (Estado × Posición × Tipo)

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

@@ -9,6 +9,17 @@ import { RequiredMark } from "../../utils/requiredMark";
  * @slot suffix - Slot for suffix content (e.g. toggle password icon) rendered after the input
  * @slot action - Slot for action button, rendered flush-right inside the field (Botón variant)
  * @slot chips - Slot for chip/tag elements rendered before the input (Chips variant)
+ *
+ * Wrapper Vue: `CoInput` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part wrapper - Contenedor raíz del campo.
+ * @part label - Etiqueta.
+ * @part secondary-label - Texto secundario junto a la etiqueta.
+ * @part field - Caja con borde que contiene el input.
+ * @part input - El `<input>` nativo.
+ * @part clear - Botón × (`clearable`).
+ * @part action - Botón de acción (`actionIcon`/`actionLabel`).
+ * @part helper - Texto de ayuda o de error.
  */
 export class CoInput {
     constructor() {

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

@@ -18,15 +18,22 @@ import { RequiredMark } from "../../utils/requiredMark";
  * @part field - The bordered textarea wrapper
  * @part input - The native textarea
  * @part helper - The helper/error text row
+ *
+ * Wrapper Vue: `CoJsonField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoJsonField {
     constructor() {
         /** Committed JSON text. */
         this.value = '';
+        /** Placeholder del editor vacío (default `'{ }'`). */
         this.placeholder = '{ }';
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Solo lectura: muestra el JSON sin permitir editarlo. */
         this.readonly = false;
+        /** Alto del editor en líneas (default 8). */
         this.rows = 8;
         /** External validation status (e.g. from a form controller). */
         this.status = 'default';
@@ -97,17 +104,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: 'b7cc05a2cf7bcac484ef35923b873d487f9cf818', class: {
+        return (h("div", { key: '116c07e036c670e20dd461a907a3bc46e0120b74', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '5e6829693907789665f54851df8ac012bbe9d9c9', class: "co-json-field__labels" }, h("label", { key: 'e19ba3d715acd5b505147ef6e0c173dbaf1dbae8', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e45feaa1a58875adc64ab58e77d1cef498042574', required: this.required })))), h("div", { key: '7b5ed251a4c7f3456f1a5c36c7800aae60b8e602', class: "co-json-field__field", part: "field" }, h("textarea", { key: '03b4e34fabc26829c823f5dea01c987e5fc1a1f8', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: 'e7659c214e65fb97de486f442a170e11fb917587', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '744697ecde8364833b3dfb4656602a5c8bb6192a', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'aecaf5025db4a5fe4030e513b57df1b98121b62e', class: "co-json-field__labels" }, h("label", { key: '2f23f19d1fa5cd9f324c67a6fe93ac3d5df98c66', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'cf1dad000ccfd9de7598c2891413f2564d5e3f6e', required: this.required })))), h("div", { key: '0c43c4df775b1a854f10db5a0531d5e0817a916c', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'f9472a1dbc02388214d0c51277dcc838289e2b79', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '6c365c240716d857fc026e4c58c08c59722b95f9', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'e97c531fbd3a1c3dbec67d0de3f90ba632fe64cb', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8b80af75ce8f27fb68fa5760e584ce7aeedd67a7', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'f79da7c507e282694367d602dac6e99e534579f0', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ae9751723abb04b19127d93a4fd798f5e03e8b90', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '8d44b589ba7d923476e7fd94f572d04452585977', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +162,7 @@ export class CoJsonField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,7 +181,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del editor vac\u00EDo (default `'{ }'`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +201,7 @@ export class CoJsonField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Atributo `name` del textarea nativo."
                 },
                 "getter": false,
                 "setter": false,
@@ -213,7 +220,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -233,7 +240,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +260,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra el JSON sin permitir editarlo."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,7 +280,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto del editor en l\u00EDneas (default 8)."
                 },
                 "getter": false,
                 "setter": false,
@@ -443,7 +450,7 @@ export class CoJsonField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor gan\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",
@@ -458,7 +465,7 @@ export class CoJsonField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor perdi\u00F3 el foco (lo sigue `coChange`)."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -76,6 +76,13 @@ function detectsMacPlatform() {
  *   <co-kbd keys="mod+0" />
  *   <co-kbd keys="v" surface="dark" size="xs" />
  *   <co-kbd keys="mod+0" chord />
+ *
+ * Wrapper Vue: `CoKbd` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part group - Contenedor de la combinación (`role="group"`).
+ * @part key - Cada tecla (en `chord`, el único chip).
+ * @part sep - Separador «+» entre teclas (sin `chord`).
+ * @part cell - Cada token dentro del chip de `chord`.
  */
 export class CoKbd {
     constructor() {
@@ -146,7 +153,7 @@ export class CoKbd {
                 keyNodes.push(h("kbd", { class: "co-kbd__key", part: "key", key: `key-${index}` }, renderToken(token, iconSize)));
             });
         }
-        return (h("span", { key: '7a99812a76e02cf357694da3bbea990118c8fff5', class: {
+        return (h("span", { key: 'd2b28cba40938051dd4488ceb0e06391e9e4b31d', class: {
                 'co-kbd': true,
                 [`co-kbd--${this.size}`]: true,
                 [`co-kbd--${this.surface}`]: true,

package/dist/collection/components/co-list-footer/co-list-footer.js

@@ -6,6 +6,9 @@ import { h } from "@stencil/core";
  * primary/secondary actions, or the default slot for fully custom content.
  *
  * @slot - Custom footer content (rendered after the prop buttons).
+ *
+ * Wrapper Vue: `CoListFooter` de `@prolibu-suite/cobalt-vue`.
+ * @part footer - La fila del footer.
  */
 export class CoListFooter {
     constructor() {
@@ -17,7 +20,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'f0c91f1eb20fbbd57da3a9de3ee9596b1c726ccf', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'c43b6137c82ab5ecb8493dcabb93a0b6e1fb8527', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '4723de7f0236643d8ecee7041144c058478237b6', name: this.secondaryIcon, size: 16 }), h("span", { key: '798e8a622a2b0784849e8040501ae92f87a9fab9' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '0ce5cdab965ede9ad2489354f31d0f0d55e3fba5', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '50e5fb43c0966cb939ba3daced28916e1fe766dd', name: this.primaryIcon, size: 16 }), h("span", { key: 'd2bf250cb31ae5e7ff3595ecbb4234a493744e67' }, this.primaryLabel))), h("slot", { key: 'dd002081999ed611aef5a411e7011b804e7036ff' })));
+        return (h("div", { key: '61546eeb0e5103393b4cd92f5621dc7be8850dc8', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '1cd3d7d6fd76363ce833ad67d89763e208d24c17', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '4a7d628520bfb739de5b007fef48e64fe248ad2f', name: this.secondaryIcon, size: 16 }), h("span", { key: '7e8e2f8397c0b265e66a429da7218bdc2644c3bc' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ed329dc5b328487ad4da2d737fcb82860c5e21a0', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '8eb46e472523447eda9e6034aae5ea7ddd747946', name: this.primaryIcon, size: 16 }), h("span", { key: '102b70dbf80bd01085b77324e9504d582c48d5a1' }, this.primaryLabel))), h("slot", { key: '676f9c2b6d3f26ebdface52181dcaf9717c69240' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-item/co-list-item.js

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  * @slot prefix  - Leading content (icon, checkbox, avatar)
  * @slot         - Main content (default slot)
  * @slot suffix  - Trailing content (icon, badge, action)
+ *
+ * Wrapper Vue: `CoListItem` de `@prolibu-suite/cobalt-vue`.
+ * @part item - La fila.
  */
 export class CoListItem {
     constructor() {
@@ -70,21 +73,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '1b41a6b63153b67dc59394f292bf100ff3e32a89', class: {
+        return (h("div", { key: 'b00bba3c362b7fded6dbb54a3a77204fd6f12f06', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '7cad6103ab3087a0c9b6156bfeb2049f796acca4', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '7b9934bad5ec591f82b733451317a6d7e1622ff1', name: this.icon, size: 18 }), h("slot", { key: '5e5e97b0392f181f442bf6bd3915f001bd95e54c', name: "prefix" })), h("div", { key: '5a64e8895ef52a3aed341307ce36b6a83edfc602', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: 'dde0ef8d6141a123200e92f431a8478d2abaec0d', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '566e69fd926005ec57b3b2314ccc2323c77de916', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '12df4e650ce79eb1a1081cbaa8d8a0df472bd60f', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '6d0b024a833e411784c6c1aec18d2e170657bff5', name: this.icon, size: 18 }), h("slot", { key: '6d920565296d083b5ebd1683452b54cb18d7cc02', name: "prefix" })), h("div", { key: '9f1ee9f1a8d09ede38cdf56fe6f34bb389d3a008', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '320ce0919f79ed00a189c19c890cdd31ec8f4fad', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: 'c735e984ef6b50d4b075829e496282123463b20a', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: '435997357a7370731d90a3e6c636aab5463cd364', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '58ca1721f60f68c3725759f2f14f15c2c4639991', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '729e862dc61a4c342e850b4453916bc3c477bdd2', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'b593f33d3b0122ab535a94c7ce259add9069323c', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '38cff2270b737756895da1b692f42557e9396b54' })), h("span", { key: 'df206f44faabbc30306509ad7651558c976ecb10', class: "co-list-item__suffix" }, h("slot", { key: '48bfb58fc0e74ae5647425472279b92e6b1ce30d', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '55c7bc86e9aea170a37862642531d01203071e0a' })), h("span", { key: 'bef781667653254040abbfbdc518ce6086c17248', class: "co-list-item__suffix" }, h("slot", { key: '349cde2b81c10eb9e9c425b96808ad6bcb86d527', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,11 @@ import { h } from "@stencil/core";
  * Three-ball Google-style loader. Inline by default; pass `overlay` to fill
  * the nearest positioned ancestor with a backdrop (drop-in replacement for
  * q-inner-loading from V1's SkLoader).
+ * Wrapper Vue: `CoLoader` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part root - Contenedor del loader (o del overlay).
+ * @part balls - Las tres esferas animadas.
+ * @part text - Texto opcional bajo las esferas.
  */
 export class CoLoader {
     constructor() {

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -5,6 +5,13 @@ import { h } from "@stencil/core";
  * slot fallback (for a type-icon box) when there is no `src`.
  *
  * @slot - Fallback content shown when `src` is not set (e.g. a type-icon box).
+ *
+ * Wrapper Vue: `CoMediaThumb` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part thumb - La caja de la vista previa.
+ * @part img - La imagen de portada.
+ * @part scrim - Velo oscuro sobre un video.
+ * @part play - Botón de play (`video`).
  */
 export class CoMediaThumb {
     constructor() {
@@ -23,13 +30,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: 'ce38519a6f2e10a54e70cec300f7229c28d12207', class: {
+        return (h("div", { key: '715a75c2d9bf586503838952ce1db8ba0a3b74ea', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '6fd5a47d1f3443cf2c7f47e24a2e70a4a6930f62', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'fde9e8f4d4bf3bfa11221887a3b0edc458684b64', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '99f2e4947a475348c2302a6949e8607b0c50177e', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '8bb6cd16e6a91aab6cf331fda06fc8cc1a8e8ca9', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '8a6e21bb26be30746d05a00b5fffca7c6992abd1', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '67bf73c8a6a14581b47809efac7e1d4b2628324d', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'a0f530d26561a4e7256d5f5ee20e6a7d91d8f6e0', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '86ef92454cdcca6096cd3dc435833138c46e2e39', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,13 @@
+/**
+ * @prop --co-menu-padding: Padding del panel (default 4px).
+ * @prop --co-menu-gap: Separación entre filas (default 2px).
+ * @prop --co-menu-min-width: Ancho mínimo del panel (default 200px; en `surface="dark"`, auto).
+ * @prop --co-menu-border-color: Color del anillo interno del panel claro.
+ * @prop --co-menu-radius: Radio del panel (default 12px en claro, 8px en `surface="dark"`).
+ * @prop --co-menu-max-height: Alto máximo del panel (default sin tope); junto con `--co-menu-overflow: auto` hace que un menú largo scrollee.
+ * @prop --co-menu-overflow: Recorte del panel (default `visible`).
+ * @prop --co-menu-shadow: Sombra del panel con `surface="dark"` (default ninguna).
+ */
 :host {
   display: contents;
 }
@@ -40,7 +50,7 @@
    re-declara acá para poder pisarlo desde el consumidor SIN tocar la regla
    original. `overflow` va detrás de SU PROPIA variable con fallback `visible`:
    un `overflow: auto` fijo cambiaba el recorte de TODOS los `co-menu` del
-   sistema con o sin `--co-menu-max-height` (fix round 1), y el contrato de
+   sistema con o sin `--co-menu-max-height`, y el contrato de
    estos hooks es que sin la variable nada cambie. Quien quiera un panel que
    scrollee —el menú contextual del canvas, que es más largo que la pantalla—
    pide las dos: `--co-menu-max-height` y `--co-menu-overflow: auto`. */