@prolibu-suite/cobalt-core 0.11.0 → 0.11.1

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

@@ -9,9 +9,16 @@ import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveInd
  *
  * NO renderiza trigger ni chrome de panel (popover/dialog/ancho): eso es del
  * host. Es 100% controlada: no muta `value`; emite y el host decide.
+ * Wrapper Vue: `CoOptionList` de `@prolibu-suite/cobalt-vue`. Sus eventos NO
+ * burbujean ni cruzan el shadow DOM: se escuchan sobre el propio elemento.
  *
  * @slot header - Entre el buscador y la lista (filtros por categoría de una paleta). UN elemento siempre montado.
  * @slot footer - Footer del panel (normalmente <co-list-footer>).
+ *
+ * @part search - Contenedor del buscador integrado (solo con `searchable`).
+ * @part options - Contenedor scrolleable de las filas.
+ * @part icon-tile - Recuadro tintado del ícono de una fila (`item.icon` + `item.iconTint`).
+ * @part drag-handle - Tirador de arrastre de una fila (con `reorderable` o `listReorderable`).
  */
 export class CoOptionList {
     constructor() {
@@ -22,6 +29,8 @@ export class CoOptionList {
         this.value = '';
         /** Display-items de la selección (para selected-first con ids fuera de página). */
         this.selectedItems = '[]';
+        /** Selección múltiple: `value` es un JSON array de ids y `coChange` emite el
+         *  array completo; con `false` (default) la selección es un solo id. */
         this.multiple = false;
         /** Partición selected-first (snapshot al llamar snapshotOrder()). */
         this.selectedFirst = false;
@@ -39,17 +48,24 @@ export class CoOptionList {
          *  Independiente de multiple/selectedFirst. No soportado con `virtual`. */
         this.listReorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
+        /** Muestra el buscador integrado arriba de la lista (reflejado como atributo).
+         *  El filtrado lo hace el host al recibir `coSearch`. */
         this.searchable = false;
+        /** Placeholder del buscador integrado. */
         this.searchPlaceholder = 'Search…';
+        /** Espera en ms entre la última tecla y el `coSearch` (default 350). */
         this.searchDebounce = 350;
         /** Pre-seed del término (modo convert de las celdas). */
         this.initialTerm = '';
         // ── Estados ────────────────────────────────────────────────
+        /** Cargando: sin filas muestra un loader en lugar de la lista; con filas,
+         *  un loader al pie. Mientras está activo no se emite `coLoadMore`. */
         this.loading = false;
         /** Total del server: deriva hasMore + hint "N more results". */
         this.total = 0;
         /** Fallback cuando el host no conoce totales (⌘K). total>0 manda. */
         this.hasMore = false;
+        /** Texto cuando no hay filas y no se está cargando. */
         this.emptyMessage = 'No results found';
         /** Si se setea y hay selección, fila "quitar selección" al tope. */
         this.clearOptionLabel = '';
@@ -60,6 +76,7 @@ export class CoOptionList {
         this.highlightMatches = false;
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
+        /** Forma del `co-avatar` de las filas que traen avatar: `circle` (default) o `square`. */
         this.avatarShape = 'circle';
         /** `end` pinta el suffix como columna a la derecha de la fila (precio/meta),
          *  sin el guion; `inline` = junto al label (default). */
@@ -308,7 +325,6 @@ export class CoOptionList {
         this.activeIndex = activeId ? this.orderedItems.findIndex((i) => i._id === activeId) : -1;
     }
     // ── Métodos públicos ───────────────────────────────────────
-    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     /**
      * Vacía el buscador (texto, término y cualquier coSearch en vuelo) y emite
      * `coSearch('')`. Para hosts que reabren el panel (co-popover): el término
@@ -328,6 +344,7 @@ export class CoOptionList {
             this.takeSnapshot();
         this.coSearch.emit('');
     }
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     async snapshotOrder() {
         this.takeSnapshot();
     }
@@ -764,11 +781,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: 'af6891bdf933b74b6e680b81387764c3c2a0f2b9', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '68cfffc9df1d3061d38063f6b0502afc58c668c4', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'abfc569cce22f30146cc714f4157ce12819a729a', name: "magnifying-glass", size: 16 }), h("input", { key: '5150055db79ef22253e0103998fde0c79d3b5eda', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '1d858e33c3a6971b4abf6dd614603c4e01cba1c6', name: "header" }), h("div", { key: '28fd86f22a7f8e95fdfee4f33f1af0b441ca4c38', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '3002c5216cac79d5d39aab2b349f6853e6517535', class: "co-option-list__inner" }, showClear && (h("button", { key: 'f6e15aeb7ea9422daf38d65611df3ca4dbb243e2', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '2f22f2b31291145b36721e923c3a422fadcabb50', name: "x-circle", size: 14 }), h("span", { key: 'd4c6b7ad4dd8df4725b763929f34da6793b29649' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'c9cb5cf8095ed45d71a143878bd9ed524c6dbf25', class: "co-option-list__loading" }, h("co-loader", { key: '550b8014bec75fb16c9c7b29dd5589355abee9be', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '40ffc1f2945a0acd0a9c7ee4e83a1f23a93ebbd2', class: "co-option-list__empty" }, h("co-icon", { key: '639e88bb241fd79fca5481505d5cab36e89b89df', name: "magnifying-glass", size: 20 }), h("span", { key: '8f01fb62e21ad0fd6c2e367bd14d88cb09fa425e' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'ca480a23b7127ff745ee57002a71dea707e32e95', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'de6a96f09450c05c9194933f3e5f732e158437c7', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'f99a19e0a194d6a0bcce6d40a736197593af8fdf', name: "magnifying-glass", size: 16 }), h("input", { key: '26fabd78b4660523e25b40bc8e92740df2677244', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '05dc7fb2d632ba58b3b960e9355b1e48a71df32c', name: "header" }), h("div", { key: 'b3edc8acf06c7f433da9584249be73d25c5f1fee', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '8abe9a20998f35332ee320512a433d8fb8196875', class: "co-option-list__inner" }, showClear && (h("button", { key: '9b420f4a08d94c7588657ec73102253dc3aace29', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '5e0d86b76f5b85ee41a4534284c4e05fec4f2df1', name: "x-circle", size: 14 }), h("span", { key: 'ff554cd331978bbe2e6aaef44b590a9de66c67d5' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1db10de6bf8b6cda7b7ca13f5969400ab420a3e7', class: "co-option-list__loading" }, h("co-loader", { key: 'd724879c38f755067e544503c233c740f932f46e', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '95f42f0028e6f7a1641bc45f6a294fe2ded5a29f', class: "co-option-list__empty" }, h("co-icon", { key: '1bed6dbd8c0c4e0722f6c28c2867331bba4e3879', name: "magnifying-glass", size: 20 }), h("span", { key: '7f2d01d6eed6e91ab14ace418f52167713963976' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'e0146742e08a49e0c297ab795e3eb283daedf281', class: "co-option-list__loading-more" }, h("co-loader", { key: '1bdd97a2c79d4fab0ea75be2bc4c7c4254de7638', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'cd336459aded62f27957888595c53475ba2d7664', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '767d9b82e7afbea41f196e110d7a6fd720637df9', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9fb95c0193357bf50eabc21dae3f8ca0bb2b3a9f', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dddf472d61b1c14f281212b02538bd576dce09d1', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6d4f16d14d67b137fe37b67fe1590d209b51b800', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '9091482eaf2228e93b3eeb893e804d5fcd8c3d44', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -870,7 +887,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple: `value` es un JSON array de ids y `coChange` emite el\narray completo; con `false` (default) la selecci\u00F3n es un solo id."
                 },
                 "getter": false,
                 "setter": false,
@@ -1010,7 +1027,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Muestra el buscador integrado arriba de la lista (reflejado como atributo).\nEl filtrado lo hace el host al recibir `coSearch`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1030,7 +1047,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del buscador integrado."
                 },
                 "getter": false,
                 "setter": false,
@@ -1050,7 +1067,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Espera en ms entre la \u00FAltima tecla y el `coSearch` (default 350)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1090,7 +1107,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cargando: sin filas muestra un loader en lugar de la lista; con filas,\nun loader al pie. Mientras est\u00E1 activo no se emite `coLoadMore`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1150,7 +1167,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto cuando no hay filas y no se est\u00E1 cargando."
                 },
                 "getter": false,
                 "setter": false,
@@ -1250,7 +1267,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Forma del `co-avatar` de las filas que traen avatar: `circle` (default) o `square`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1321,7 +1338,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "T\u00E9rmino del buscador integrado, con debounce (`searchDebounce`); `''` al vaciarlo\no tras `clearSearch()`. No burbujea."
                 },
                 "complexType": {
                     "original": "string",
@@ -1336,7 +1353,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n pedida (el componente no muta `value`). `detail.value`: el id elegido,\nel array completo en `multiple`, o `null` al deseleccionar en single;\n`detail.item`: la fila involucrada. No burbujea."
                 },
                 "complexType": {
                     "original": "{ value: string | string[] | null; item: OptionListItem }",
@@ -1358,7 +1375,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Pide la p\u00E1gina siguiente: al acercarse el scroll al final, o si las filas\ncargadas no llenan el panel. Solo con m\u00E1s resultados (`total`/`hasMore`) y\nsin `loading`. Sin `detail`. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -1373,7 +1390,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en la fila \u00ABquitar selecci\u00F3n\u00BB (`clearOptionLabel`). Sin `detail`. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -1388,7 +1405,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en la X de una fila seleccionada (`removableItems`); `detail` = id de la fila. No burbujea."
                 },
                 "complexType": {
                     "original": "string",
@@ -1495,7 +1512,7 @@ export class CoOptionList {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Re-toma el snapshot selected-first. El host la llama al abrir su panel.",
                     "tags": []
                 }
             },

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

@@ -1,3 +1,7 @@
+/**
+ * @prop --co-overlay-bg: Color del fondo (default negro al 40%).
+ * @prop --co-overlay-blur: Desenfoque del fondo (default 2px); queda fuera del interruptor `--co-glass-filter`.
+ */
 :host {
   display: contents;
 }

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

@@ -34,6 +34,16 @@ function nextFrame(cb) {
     else
         cb();
 }
+/**
+ * Capa de fondo (scrim) para contenido modal: bloquea el scroll de la página
+ * (compartido entre overlays apilados), sube al top layer y puede atrapar el
+ * foco. Es controlado: un click en el fondo o Escape (`closeOnEscape`) solo
+ * emiten `coClose`. Base de `co-modal`, `co-drawer` y `co-command-search`.
+ * Wrapper Vue: `CoOverlay` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Contenido centrado sobre el fondo.
+ * @part overlay - El fondo oscuro.
+ */
 export class CoOverlay {
     constructor() {
         /** Whether the overlay is visible */
@@ -212,7 +222,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '842f23e0829dcb9138f3fd35c86471035949517c', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '645b336ce50938672fc09a27a15ef314250beaf2' })));
+        return (h("div", { key: '1edc956747aa0c79bcc7863fd3530c4f64fd6746', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'b17930138f924657b21511b95bd152e90a53a04a' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-page-header/co-page-header.js

@@ -3,10 +3,13 @@ import { h } from "@stencil/core";
  * Page-level header bar with icon, title, and right actions.
  * @slot        - Title area (default slot)
  * @slot actions - Right-side actions (switches, buttons)
+ *
+ * Wrapper Vue: `CoPageHeader` de `@prolibu-suite/cobalt-vue`.
+ * @part page-header - La fila del encabezado.
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: 'e3a67a921d1a5c5ac8a91d1bbf76efc5d1dc6e54', class: "co-page-header", part: "page-header" }, h("div", { key: 'c1487cedf194477595bb176c381d5e839a70571e', class: "co-page-header__left" }, this.icon && (h("span", { key: 'd07f12f586c1e42fb85a06c8a7cc634778a939e5', class: "co-page-header__icon" }, h("co-icon", { key: '0224fac27acc073beccd0d59b39e3714732b3fcc', name: this.icon, size: 24 }))), h("span", { key: 'c19700b850224b46a175c4a5fb082a7898842c7e', class: "co-page-header__title" }, h("slot", { key: '3e7426edb3999085f9791ed7fb9fb74b82e4227e' }, this.heading))), h("div", { key: 'ca4dd0bd5c5d553eb6adb80cc3d2093ea9dd4d2b', class: "co-page-header__actions" }, h("slot", { key: '3f108386752ebd1a740ab97c5f7fc8535a55f853', name: "actions" }))));
+        return (h("div", { key: '18d15d7b241f92bbd121fd6547832a30f4404928', class: "co-page-header", part: "page-header" }, h("div", { key: 'cbf4427991e3b43775a1d47c95f953ef79d71c77', class: "co-page-header__left" }, this.icon && (h("span", { key: '647701102f261fc214a0a4347894ba275da1ed7d', class: "co-page-header__icon" }, h("co-icon", { key: 'd377f2f5cbfa190cb483fe4a6ff2a483f9053f7b', name: this.icon, size: 24 }))), h("span", { key: 'ccf59184d2154c89fc90ccddfffc8dfc8c07b72b', class: "co-page-header__title" }, h("slot", { key: '34dd64e79e72cb154c63b16f72c2ec58193d9988' }, this.heading))), h("div", { key: 'e2f1d119629a3b9479896cf2338625ad775b8556', class: "co-page-header__actions" }, h("slot", { key: '62ee162b3388968ee1930a2c3ab20e45b34a2d65', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,10 @@
 /* co-popover — floating panel primitive */
 
+/**
+ * @prop --co-popover-border-color: Color del borde del panel (default border-subtle).
+ * @prop --co-popover-shadow: Sombra del panel (default `0 4px 16px` suave).
+ */
+
 :host {
   display: inline-block;
   position: relative;
@@ -45,7 +50,7 @@
   opacity: 0;
   transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
-  /* Task C10 (Fase 2 Cobalt): variables con el default de siempre como
+  /* Variables con el default de siempre como
      fallback — sin --co-popover-border-color/--co-popover-shadow, cero
      cambio visual. */
   border: 1px solid var(--co-popover-border-color, var(--co-semantic-border-subtle));
@@ -54,7 +59,7 @@
   overflow: visible;
 }
 
-/* `bare` (Task C10, Fase 2 Cobalt): sin fondo/borde/sombra propios, para
+/* `bare`: sin fondo/borde/sombra propios, para
    alojar un `co-menu` (u otro contenido con su propio chrome) sin "doble
    chrome". El resto del panel (posicionamiento, transición de entrada/salida)
    no cambia. */

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

@@ -3,6 +3,17 @@ import { computePosition, findScrollParents, getOffsetAncestor, isAnchorVisible
 import { pushLayer, removeLayer, isTopLayer } from "../../utils/popover-stack";
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
+/**
+ * Panel flotante anclado a un disparador (slot `trigger`) con posicionamiento,
+ * volteo si no cabe y cierre por click afuera o Escape. Base de menús, selects y
+ * pickers. Sus eventos no burbujean. Wrapper Vue: `CoPopover` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot trigger - Elemento que abre y cierra el panel al hacer click.
+ * @slot - Contenido del panel.
+ *
+ * @part panel - El panel flotante (fondo, borde, sombra).
+ */
 export class CoPopover {
     constructor() {
         // ── Props ──────────────────────────────────────────────────
@@ -28,7 +39,7 @@ export class CoPopover {
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
         /**
-         * El panel no pinta fondo/borde/sombra propios (Task C10, Fase 2 Cobalt):
+         * El panel no pinta fondo/borde/sombra propios:
          * para alojar un `co-menu` (u otro contenido con su propio chrome) sin
          * "doble chrome". Reflejado como atributo `bare`. Default `false` = panel
          * con el fondo/borde/sombra de siempre (`--co-popover-border-color` /
@@ -36,8 +47,7 @@ export class CoPopover {
          */
         this.bare = false;
         /**
-         * Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10, Fase
-         * 2 Cobalt): con un placement vertical (`top*`/`bottom*`) mueve `left`; con
+         * Desplazamiento en px sobre el eje CRUZADO del `placement`: con un placement vertical (`top*`/`bottom*`) mueve `left`; con
          * uno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.
          *
          * ⚠️ Se aplica ANTES del clamp de 4px a los bordes del viewport (ver
@@ -154,7 +164,7 @@ export class CoPopover {
                 width: this.panelEl.offsetWidth,
                 height: this.panelEl.offsetHeight,
             });
-            // Task C10 (Fase 2 Cobalt): `anchor` sin resolver (prop ausente, o
+            // `anchor` sin resolver (prop ausente, o
             // selector sin match en `document`) → `anchorRect` queda undefined y
             // computePosition cae a `triggerRect` — mismo resultado que hoy.
             const anchorEl = this.resolveAnchor();
@@ -302,17 +312,20 @@ export class CoPopover {
         this.pressStartedInside = false;
     }
     // ── Public methods ─────────────────────────────────────────
+    /** Abre o cierra el panel. */
     async toggle() {
         this.open = !this.open;
     }
+    /** Abre el panel. */
     async show() {
         this.open = true;
     }
+    /** Cierra el panel. */
     async hide() {
         this.open = false;
     }
     /**
-     * Resuelve la prop `anchor` a un elemento (Task C10, Fase 2 Cobalt):
+     * Resuelve la prop `anchor` a un elemento:
      *   - `HTMLElement` → se usa tal cual.
      *   - `string` → selector resuelto contra `document`; sin match, `null`
      *     (el llamador cae a `triggerRect`, el comportamiento de siempre).
@@ -382,13 +395,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: '662c5cf02c52e80ab1367b7bf5418a5314449b93', class: "co-popover" }, h("div", { key: '067b11518b303acbfdb695d339d5fc3a1c709413', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'b186427b3c97ff65beda554f0c54e0e4bd91b44b', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '2e905ee909de4e8c89baefd0ad5218f5a5446ec9', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+        return (h("div", { key: 'f9c23cf5b7beb42230fbc37e6aacb9d8423a2c34', class: "co-popover" }, h("div", { key: '255b7a3b713719283e3b4a6d65ed520661b4e40b', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '82c7133648e7c55db263f1abae8902c3ab579d27', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '990ca1400e5e19d6614dbc7b43e78b116626e1b0', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '2220a6e8efdee1ec51c4c3d33eb1b016f0619f48' })))));
+            } }, h("slot", { key: 'fb635cf42e7866b055a59aaf471bab5bca995afb' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -433,7 +446,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }
@@ -562,7 +575,7 @@ export class CoPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "El panel no pinta fondo/borde/sombra propios (Task C10, Fase 2 Cobalt):\npara alojar un `co-menu` (u otro contenido con su propio chrome) sin\n\"doble chrome\". Reflejado como atributo `bare`. Default `false` = panel\ncon el fondo/borde/sombra de siempre (`--co-popover-border-color` /\n`--co-popover-shadow`), sin cambio."
+                    "text": "El panel no pinta fondo/borde/sombra propios:\npara alojar un `co-menu` (u otro contenido con su propio chrome) sin\n\"doble chrome\". Reflejado como atributo `bare`. Default `false` = panel\ncon el fondo/borde/sombra de siempre (`--co-popover-border-color` /\n`--co-popover-shadow`), sin cambio."
                 },
                 "getter": false,
                 "setter": false,
@@ -587,7 +600,7 @@ export class CoPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Elemento (o selector resuelto contra `document`) al que se alinea el\npanel EN VEZ del trigger (Task C10, Fase 2 Cobalt) \u2014 p.ej. la p\u00EDldora\ncompleta del zoom, no solo el bot\u00F3n \"\u25BE\" que abre el men\u00FA. Un selector sin\nmatch cae al trigger (comportamiento actual). Sin `anchor`, cero cambio."
+                    "text": "Elemento (o selector resuelto contra `document`) al que se alinea el\npanel EN VEZ del trigger \u2014 p.ej. la p\u00EDldora\ncompleta del zoom, no solo el bot\u00F3n \"\u25BE\" que abre el men\u00FA. Un selector sin\nmatch cae al trigger (comportamiento actual). Sin `anchor`, cero cambio."
                 },
                 "getter": false,
                 "setter": false,
@@ -606,7 +619,7 @@ export class CoPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10, Fase\n2 Cobalt): con un placement vertical (`top*`/`bottom*`) mueve `left`; con\nuno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.\n\n\u26A0\uFE0F Se aplica ANTES del clamp de 4px a los bordes del viewport (ver\n`computePosition` en `utils/positioning.ts`) \u2014 un `shift` grande cerca de\nun borde puede quedar clampeado igual que hoy, no lo evita. No hay forma\nde pedir un `shift` que se salga de pantalla a prop\u00F3sito."
+                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement`: con un placement vertical (`top*`/`bottom*`) mueve `left`; con\nuno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.\n\n\u26A0\uFE0F Se aplica ANTES del clamp de 4px a los bordes del viewport (ver\n`computePosition` en `utils/positioning.ts`) \u2014 un `shift` grande cerca de\nun borde puede quedar clampeado igual que hoy, no lo evita. No hay forma\nde pedir un `shift` que se salga de pantalla a prop\u00F3sito."
                 },
                 "getter": false,
                 "setter": false,
@@ -630,7 +643,7 @@ export class CoPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se abri\u00F3 el panel. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -645,7 +658,7 @@ export class CoPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se cerr\u00F3 el panel (click afuera, Escape, m\u00E9todo o el ancla sali\u00F3 de la vista). No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -691,7 +704,7 @@ export class CoPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Abre o cierra el panel.",
                     "tags": []
                 }
             },
@@ -708,7 +721,7 @@ export class CoPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Abre el panel.",
                     "tags": []
                 }
             },
@@ -725,7 +738,7 @@ export class CoPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Cierra el panel.",
                     "tags": []
                 }
             }

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

@@ -1,6 +1,9 @@
 import { h } from "@stencil/core";
 /**
  * A horizontal progress bar with status colors.
+ * Wrapper Vue: `CoProgressBar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part bar - Contenedor de la barra (pista y relleno).
  */
 export class CoProgressBar {
     constructor() {
@@ -18,12 +21,12 @@ export class CoProgressBar {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: 'c2286f839f8f8f472e76bcad9d3f77962112bf8f', class: {
+        return (h("div", { key: '73ffc3d2dedc7a87e2552a75b61a56199f60edb6', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '2fe1138f2caac250117c14cc51aec68be76f48d8', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: 'da42344ce3d88c2a1eec058b4bb57a7b8380a2aa', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-circle/co-progress-circle.js

@@ -1,6 +1,9 @@
 import { h } from "@stencil/core";
 /**
  * A circular progress indicator with status colors and optional label.
+ * Wrapper Vue: `CoProgressCircle` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part circle - Contenedor del círculo (SVG y etiqueta).
  */
 export class CoProgressCircle {
     constructor() {
@@ -19,7 +22,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: '93f0e78b8f51342146367c35fb4a1238e6381fa4', class: {
+        return (h("div", { key: 'a3d5bc7d287ef18ad5d1d2f23373d25ea2509476', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -27,7 +30,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '433ddb015c524bc9fead3540a71a3c514d66a64c', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '6951e520d786e0d22af5163d116464faa7be171a', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '3b922058d72dcb0d1a7a9f59b122b8a2d54c4d4a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '083498504b05357660f593c128258a2be8ca359e', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-provider-logo/co-provider-logo.js

@@ -28,6 +28,9 @@ const BRANDS = {
  * `plated` lo monta sobre un disco blanco: es lo que hace legible una marca a
  * color cuando va encima de una superficie teñida (el badge de un evento de
  * calendario externo, que hereda el color del calendario).
+ * Wrapper Vue: `CoProviderLogo` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part root - Contenedor del logo (el disco blanco con `plated`).
  */
 export class CoProviderLogo {
     constructor() {

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

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * Botón de opción individual con etiqueta; normalmente se agrupa en un
+ * `co-radio-group`, que coordina la selección única. Wrapper Vue: `CoRadio` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part circle - El círculo del radio.
+ * @part label - La etiqueta.
+ */
 export class CoRadio {
     constructor() {
         /** Whether the radio is selected */
@@ -17,15 +25,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: 'e919e4c950b39acb06eab78a8a22d5d5d3acb211', class: {
+        return (h("div", { key: '637efb5c90e6f1f2c205a9c97c020c609f72a093', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '9f52728498ff3092f994410a948e9e52cc83b0cb', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '7311c200f5b2e2029acfe2642aa59c850087a7b3', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '989a97802b68aabe45b5b5e983f10bb2bbf9b01e', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '067c567f9d70642c11ccb1a8d0b30c17323fb476', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+/**
+ * Grupo de opciones de selección única con etiqueta, ayuda y estado de
+ * validación: `options` define los radios y `value` el elegido. Wrapper Vue:
+ * `CoRadioGroup` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoRadioGroup {
     constructor() {
         /** Label layout: vertical (label above) or horizontal (label beside) */
@@ -59,11 +64,11 @@ export class CoRadioGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: 'aed7b7da65c9115ab36df5e8ac883de54c95c9e6', class: {
+        return (h("div", { key: 'b1c5880c1f9faca27b89189de5d64e36569d5b4f', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a9bebb49089cd496da9766edc80170d285f3e0f4', class: "co-radio-group__labels" }, this.label && h("span", { key: '07b2fa433d6414e69862ba88bb95485fa59e3cb0', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '2fce367eb0415d3d030d0c5385d15a304a4ac2dd', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '22bed181fb344e6954afa82bd2e7d67814c87175', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '0e6088377e3cd361749b9aa98f2e6485a76fb577', class: "co-radio-group__labels" }, this.label && h("span", { key: '411bf1ec096311df2b25fac0b39c402d01365e5c', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '917cc0dd87362d7add21d407869872a14378a0b9', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '6459fee05efb04d402c0c98dfcbad83fc7da7f06', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -78,7 +83,7 @@ export class CoRadioGroup {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: '8377e98a33fc79ae642110aded1e8061b7f5a47e', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '3699789297cd963755d3855fda23e3884d85e6e0', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'bcec0afba4852a80296ec04ece33708e17309f8b', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: '9cec80138190321eafb700039b2d33d24e420e30', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '8be3d15ffa7d528927f907b4c9523b7f2a6cdb94', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: '6ccf0cfeea7f6e00047b2849edff9fd988eb36a6', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -219,7 +224,7 @@ export class CoRadioGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-radio-group/co-radio-group.tsx",
                             "id": "src/components/co-radio-group/co-radio-group.tsx::RadioOption"
                         }
                     }