@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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 */
@@ -53,7 +63,9 @@ export class CoOverlay {
         /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
         this.hasLock = false;
         // Origen de la pulsación en curso (ver isBackdropDismiss): un drag que
-        // empieza dentro del contenido y suelta en el fondo NO es un cierre.
+        // empieza dentro del contenido y suelta en el fondo NO es un cierre —el
+        // navegador despacha ese `click` al ancestro común, el propio scrim—, ni
+        // uno que empieza en el fondo y suelta en el contenido (Tarea QA 94).
         this.pressDownTarget = null;
         this.pressUpTarget = null;
         this.handlePointerDown = (e) => {
@@ -65,9 +77,11 @@ export class CoOverlay {
             var _a;
             this.pressUpTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
         };
+        // Sólo cierra una pulsación completa sobre el scrim mismo, no sobre el contenido.
         this.handleClick = (e) => {
             var _a;
-            const dismiss = isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null);
+            const clickTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
+            const dismiss = clickTarget === this.overlayEl && isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, clickTarget);
             this.pressDownTarget = null;
             this.pressUpTarget = null;
             if (dismiss)
@@ -208,7 +222,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '74051ac6a35eff0b9c873bafe2141b0a9486f83e', 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: '8ed7f244bfe88f3d38b9e1f6720b0a191529f6f1' })));
+        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: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', 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-phone-field/co-phone-field.js

@@ -159,7 +159,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '007dbe9a20cd410cb818f512d9f698afba6e821f', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'a4c5c1b7e10de3098f7f50d74a3ca8703d41f465', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'bcd04f54711067258d1270814141b4b81324ee21', required: this.required }))), h("div", { key: 'a04a6996610ccd5007c54f5728a1158c951c50e9', class: "co-phone-field__container" }, h("button", { key: '317348de58e74afb6f545749c83670ed92eb61bb', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '122cd3a7b4f363554410c7a37df3331b91e4bc81', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '3d3d8691ba489bbe093f99a6141323f2620fd6a8', class: "co-phone-field__chevron" }, h("co-icon", { key: 'adab28c8fb4f1d6838dd0e400494656d0bc50812', name: "caret-down", size: 14 }))), h("input", { key: '13214ef8043c4984fcab73e7971e836039d8b469', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'b993dff8a4ad5ef53b7f50849591310ec3df54f5', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '95db7d412dbb49ebebda43e7dc13b9f763f2e3e1', class: "co-phone-field__search" }, h("input", { key: 'cd97d9422f0b2ee04de398a4ddd38500664d3828', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'f0a8c53ed8a8a2e212f6bb2da2883c3efa7eab1e', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'c2b32d573c9c94720a403280a84547ad08c8a686', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '9199cc2660052d07753d3a12b28a3ff60724c3ea', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '27462c9a1cefa4aa4cf43ab19924c1f59a399b68', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '46c764eaa95e5948b860341cd1a1a1468bc26920', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '25b5a320625765b5ce9ebca165c165b6b7423a0a', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'b04b160b13504030159a51cb6bc8e2c258dab0a8', required: this.required }))), h("div", { key: '3bbe98a398007123d7ad405f16e0c5093829999e', class: "co-phone-field__container" }, h("button", { key: '58b43e162f7966cd11ac5c3b4ece75612769863b', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '78b26caa474d9f3df6f0f39bcb3c731761354786', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'd2753d9b70c19ce15b525e2bb6ed02d61aa15045', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd94cffbcf3d0348c11a69cc3c7554dbe11d001b2', name: "caret-down", size: 14 }))), h("input", { key: 'ee111f5cb76785ebcbae917f9cd00d08e00d62c1', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '9d86bccfa1643b1e6703b300a74587bed334cbc2', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '8dfeb48d11dc7d70e3acc499ad1390805aa7889d', class: "co-phone-field__search" }, h("input", { key: '1e673f71acfea7a50915dfa7a0e9e5d67a6e76cf', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'e28014f19f7002049657884b4d5ff0caf81eb3d8', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '2033c1184dbb72d5705d9e0ba392d77bc9629f4c', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'b3204decf888ec35cc0bf3f044ea5a8037fa8a53', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '697323bd25dbd70a4dc9872d1678d80e6c7bdeff', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-phone-field"; }
     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,12 +50,25 @@
   opacity: 0;
   transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
-  border: 1px solid var(--co-semantic-border-subtle);
+  /* 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));
   border-radius: var(--co-border-radius-sm, 12px);
-  box-shadow: 0 4px 16px rgba(31, 28, 27, 0.08);
+  box-shadow: var(--co-popover-shadow, 0 4px 16px rgba(31, 28, 27, 0.08));
   overflow: visible;
 }
 
+/* `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. */
+:host([bare]) .co-popover__panel {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
 /* Transición de entrada. La de salida vive en --closing, declarada DESPUÉS
    (misma especificidad, gana por orden de cascada) — el nodo sigue montado
    durante el cierre (tsx difiere el unmount hasta transitionend). */

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

@@ -1,8 +1,19 @@
 import { h } from "@stencil/core";
-import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
+import { computePosition, findScrollParents, getOffsetAncestor, isAnchorVisible } from "../../utils/positioning";
 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 ──────────────────────────────────────────────────
@@ -27,8 +38,28 @@ export class CoPopover {
         this.closeOnEscape = true;
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
+        /**
+         * 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` /
+         * `--co-popover-shadow`), sin cambio.
+         */
+        this.bare = false;
+        /**
+         * 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
+         * `computePosition` en `utils/positioning.ts`) — un `shift` grande cerca de
+         * un borde puede quedar clampeado igual que hoy, no lo evita. No hay forma
+         * de pedir un `shift` que se salga de pantalla a propósito.
+         */
+        this.shift = 0;
         /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
         this.closing = false;
+        /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
+        this.anchorSeenVisible = false;
         this.scrollParents = [];
         // Cached offset ancestor + a flag to distinguish "not computed yet" from
         // "computed and there is none". Avoids re-walking the DOM + calling
@@ -103,6 +134,21 @@ export class CoPopover {
             if (!this.open || !this.triggerEl || !this.panelEl)
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
+            // El trigger salió de la vista de su scroller (la columna de un kanban, el body
+            // de una tabla): seguirlo deja el panel pegado al borde del viewport por el
+            // clamp de `computePosition`, flotando sobre la cabecera sin su ancla. Se
+            // cierra, como un menú nativo. Solo si alguna vez estuvo visible (una apertura
+            // programática con el ancla ya fuera de vista queda como antes) y solo en los
+            // popovers descartables: uno persistente (`closeOnClickOutside=false`) no se
+            // cierra por sí solo.
+            const clipRects = this.scrollParents.map((p) => p.getBoundingClientRect());
+            if (isAnchorVisible(triggerRect, clipRects)) {
+                this.anchorSeenVisible = true;
+            }
+            else if (this.anchorSeenVisible && this.closeOnClickOutside) {
+                this.open = false;
+                return;
+            }
             // ⚠️ El panel arrastra el `transform: scale()` de la entrada, y
             // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.97× al montar y
             // ~0.972× en la segunda pasada del watcher (~16ms de los `base` 250ms). Medir con
@@ -118,10 +164,17 @@ export class CoPopover {
                 width: this.panelEl.offsetWidth,
                 height: this.panelEl.offsetHeight,
             });
+            // `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();
+            const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
             const { top, left, actualPlacement } = computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
                 flip: this.flip,
+                anchorRect,
+                shift: this.shift,
             });
             let finalTop = top;
             let finalLeft = left;
@@ -146,7 +199,9 @@ export class CoPopover {
                 left: `${finalLeft}px`,
             };
             if (this.matchWidth) {
-                style.width = `${triggerRect.width}px`;
+                // Con `anchor`, "match width" es contra el ancho del anchor (la píldora
+                // completa) — no del trigger chico que solo dispara el popover.
+                style.width = `${(anchorRect !== null && anchorRect !== void 0 ? anchorRect : triggerRect).width}px`;
             }
             // Apply styles directly to DOM to avoid triggering a re-render loop
             if (this.panelEl) {
@@ -203,6 +258,7 @@ export class CoPopover {
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
+        this.anchorSeenVisible = false;
         if (isOpen) {
             this.closing = false;
             clearTimeout(this.closeFallbackTimer);
@@ -256,15 +312,33 @@ 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:
+     *   - `HTMLElement` → se usa tal cual.
+     *   - `string` → selector resuelto contra `document`; sin match, `null`
+     *     (el llamador cae a `triggerRect`, el comportamiento de siempre).
+     *   - sin `anchor` → `null` (mismo fallback).
+     */
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.querySelector(this.anchor);
+        }
+        return this.anchor;
+    }
     /**
      * Promote the panel to the browser top layer (Popover API) so an ancestor's
      * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.
@@ -321,13 +395,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'f4f13f06a95f02735c615e896d367ca671270a68', class: "co-popover" }, h("div", { key: '504af8cebb0f83e7f882f09096a5bfba37e2ac56', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'd5853c372f2bda3f5c57718b5869ca8919c1dfcc', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '3b9c2aa2feaab08eb5f03d36cc25a464600da7fe', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, 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: '81e2b8070b4912bab1654e957890c92244ca83b8' })))));
+            } }, h("slot", { key: 'fb635cf42e7866b055a59aaf471bab5bca995afb' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -372,7 +446,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/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"
                         }
                     }
@@ -488,6 +562,70 @@ export class CoPopover {
                 "reflect": false,
                 "attribute": "flip",
                 "defaultValue": "true"
+            },
+            "bare": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "reflect": true,
+                "attribute": "bare",
+                "defaultValue": "false"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | string",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "shift": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "reflect": false,
+                "attribute": "shift",
+                "defaultValue": "0"
             }
         };
     }
@@ -505,7 +643,7 @@ export class CoPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se abri\u00F3 el panel. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -520,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",
@@ -566,7 +704,7 @@ export class CoPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Abre o cierra el panel.",
                     "tags": []
                 }
             },
@@ -583,7 +721,7 @@ export class CoPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Abre el panel.",
                     "tags": []
                 }
             },
@@ -600,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: 'bcf5e566cfa6726eac8578288797d1004e4003fb', 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: '932537ab1521b2d7fcd0e1bb57c027a276dacaf3', 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: 'bc100ca3ef731aab3168a247098102b8e9ab9537', 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: '48862f1f57c0bb8cd6e03c2f0a84a1ae324d3ec1', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0ff2c6995740504e1df9b11dfa10e0a9f9d368c5', 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: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
+        return (h("div", { key: '637efb5c90e6f1f2c205a9c97c020c609f72a093', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', 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: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', 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: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', 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: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', 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: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', 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-0.10.3/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"
                         }
                     }