@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

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

@@ -49,9 +49,8 @@ export class CoMenu {
          *  `co-menu-item`/`co-menu-divider` las consumen con fallback al valor claro
          *  de siempre, así que sin `surface="dark"` no cambia nada. */
         this.surface = 'light';
-        /** Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10,
-         *  Fase 2 Cobalt — fix round 1). Reenviada tal cual al `co-popover`
-         *  interno. Default `0` = sin cambio. */
+        /** Desplazamiento en px sobre el eje CRUZADO del `placement`. Reenviada tal
+         *  cual al `co-popover` interno. Default `0` = sin cambio. */
         this.shift = 0;
         this.handleKeydown = (e) => {
             if (!this.open)
@@ -120,6 +119,7 @@ export class CoMenu {
     disconnectedCallback() {
         document.removeEventListener('keydown', this.handleKeydown, true);
     }
+    /** Enfoca la primera fila del panel raíz (lo hace solo al abrir). */
     async focusFirstItem() {
         var _a, _b;
         const items = this.getMenuItems();
@@ -163,14 +163,14 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '9ad32ee1adf1436a4ff266db44a34c0b4e9b5293', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
+        return (h("co-popover", { key: '66b0e90463829343152d2a9bdb821e19e70fa4d4', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
             // `co-menu` SIEMPRE pinta su propio chrome (`.co-menu`: fondo +
             // shadow-lg + anillo, o el panel sólido de `surface="dark"`) — el
             // `co-popover` interno tiene que ir SIEMPRE bare, sin condición, para
-            // no sumarle un fondo/borde/sombra propios detrás (Task C10, Fase 2
-            // Cobalt — fix round 1; antes de esto el panel del menú tenía doble
+            // no sumarle un fondo/borde/sombra propios detrás (antes de esto el
+            // panel del menú tenía doble
             // chrome SIEMPRE, no solo en un caso opcional).
-            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, h("slot", { key: 'b093c29c2e8a6773843a030282cc9e06af54f8c7', name: "trigger", slot: "trigger" }), h("div", { key: '00baf22b70a5f0544a134c170549b31fb46baf38', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '2307edc81be264fe4e8a76fb2e1bc14b59538cc2' }))));
+            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, h("slot", { key: 'b78bcba7bc9542a82c78c1b8026bd4aa56629667', name: "trigger", slot: "trigger" }), h("div", { key: '0515763cb0b89320d4831befe1b6d984029ce309', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'baf72944333c4e912fe0a0aa58d8affb8e923a3e' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -329,7 +329,7 @@ export class CoMenu {
                 "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 fix round 1).\nReenviada tal cual al `co-popover` interno; sin `anchor`, cae al\ntrigger (comportamiento de siempre). \u00DAtil para alinear el men\u00FA contra\nun contenedor m\u00E1s grande que el bot\u00F3n que lo abre (p.ej. la p\u00EDldora del\nzoom del toolbar)."
+                    "text": "Elemento (o selector resuelto contra `document`) al que se alinea el\npanel EN VEZ del trigger.\nReenviada tal cual al `co-popover` interno; sin `anchor`, cae al\ntrigger (comportamiento de siempre). \u00DAtil para alinear el men\u00FA contra\nun contenedor m\u00E1s grande que el bot\u00F3n que lo abre (p.ej. la p\u00EDldora del\nzoom del toolbar)."
                 },
                 "getter": false,
                 "setter": false,
@@ -348,7 +348,7 @@ export class CoMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10,\nFase 2 Cobalt \u2014 fix round 1). Reenviada tal cual al `co-popover`\ninterno. Default `0` = sin cambio."
+                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement`. Reenviada tal\ncual al `co-popover` interno. Default `0` = sin cambio."
                 },
                 "getter": false,
                 "setter": false,
@@ -367,7 +367,7 @@ export class CoMenu {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se abri\u00F3 el men\u00FA (toma el foco y el teclado). No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -382,7 +382,7 @@ export class CoMenu {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se cerr\u00F3 el men\u00FA (Escape, click afuera o selecci\u00F3n con `autoClose`). No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -406,7 +406,7 @@ export class CoMenu {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Enfoca la primera fila del panel ra\u00EDz (lo hace solo al abrir).",
                     "tags": []
                 }
             }
@@ -433,7 +433,7 @@ export class CoMenu {
  *  ancestro más cercano sea ESTE panel — los del menú raíz no tienen ninguno y
  *  los de un submenú cuelgan del ítem que lo abre.
  *
- *  Se mira el ancestro y no los hijos directos a propósito (fix round 1): con
+ *  Se mira el ancestro y no los hijos directos a propósito: con
  *  hijos directos, un consumidor que envuelva sus filas en un `<div>` (un
  *  grupo, un `v-for` con wrapper, un fragmento con contenedor) se quedaba sin
  *  navegación por flechas **en silencio**. Así el envoltorio da igual y los

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

@@ -1,3 +1,7 @@
+/**
+ * @prop --co-menu-divider-color: Color de la línea (un `co-menu` con `surface="dark"` lo asigna).
+ * @prop --co-menu-divider-margin: Margen del separador (default `4px 0`).
+ */
 :host {
   display: block;
 }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -2,10 +2,11 @@ import { h } from "@stencil/core";
 /**
  * Thin horizontal separator between groups of `co-menu-item` rows. Renders an
  * accessible `<hr>` with `role="separator"`.
+ * Wrapper Vue: `CoMenuDivider` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: '7ec669cd5b23822d5ac9e94bf6f9d729222bc107', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '08a30fe0fba8fbbab4a6fce1bc92c700aa767b2d', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,17 @@
+/**
+ * Dentro de un `co-menu` con `surface="dark"`, el menú asigna las de color a sus filas.
+ * @prop --co-menu-item-height: Alto mínimo de la fila (default 36px).
+ * @prop --co-menu-item-padding: Padding de la fila.
+ * @prop --co-menu-item-gap: Separación entre ícono, texto y sufijos.
+ * @prop --co-menu-item-font-size: Tamaño del texto (default 14px).
+ * @prop --co-menu-item-font-weight: Peso del texto.
+ * @prop --co-menu-item-letter-spacing: Espaciado de letras del texto.
+ * @prop --co-menu-item-line-height: Interlineado del texto (default `normal`).
+ * @prop --co-menu-item-color: Color del texto.
+ * @prop --co-menu-item-icon-color: Color del ícono (default: el del texto).
+ * @prop --co-menu-item-hover-bg: Fondo de la fila en hover o con foco.
+ * @prop --co-menu-item-selected-bg: Fondo de la fila `selected`.
+ */
 :host {
   display: block;
 }

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

@@ -13,6 +13,8 @@ import { SUBMENU_SIDE_ATTR, inheritedSubmenuSide, menuOpensUp, sideOfPlacement,
  *      `coSelect` — only the leaf items inside do.
  *
  * Submenu nesting is unbounded — submenu items can themselves have submenus.
+ *
+ * Wrapper Vue: `CoMenuItem` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoMenuItem {
     constructor() {

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

@@ -83,6 +83,12 @@
 }
 
 
+/**
+ * @prop --co-modal-width: Ancho fijo del modal con `size="xs"` (default 369px).
+ * @prop --co-modal-z-index: z-index del modal con `inline` o `backdrop="none"` (sin top layer; default 1000).
+ * @prop --co-modal-r: Radio del panel squircle de `appearance="default"`. Se asigna en el panel, así que se sobrescribe vía `co-modal::part(modal) { --co-modal-r: … }`.
+ */
+
 :host {
   display: contents;
   /* Frosted-glass backdrop for modals — stronger blur than the overlay default

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

@@ -3,15 +3,27 @@ import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
 import { clampDragOffset, dragOffsetOf, isInteractiveDragTarget, } from "../../utils/dragMove";
 /**
+ * Ventana modal con header (título, descripción, ✕), cuerpo y footer de
+ * acciones, sobre un scrim que bloquea la página (`co-overlay`). Es
+ * controlada: la ✕, el scrim y Escape solo emiten `coClose`; quien la usa pone
+ * `open` en `false`. Wrapper Vue: `CoModal` de `@prolibu-suite/cobalt-vue`.
+ *
  * @slot        - Modal body content
  * @slot header-leading - Control before the heading (e.g. a back arrow on a
  *                        second screen of the same modal)
  * @slot header-actions - Controls at the right end of the header (e.g. a settings
  *                        icon-button), before the close button
  * @slot footer - Footer with action buttons
- * @part modal | header | header-text | heading | description | body | footer -
- *       layout/typography hooks for a consumer that must match a specific spec
- *       (paddings, heading weight); colors stay on semantic tokens
+ *
+ * Los parts son ganchos de layout y tipografía (paddings, peso del título) para
+ * ajustar a una spec puntual; los colores siguen en tokens semánticos.
+ * @part modal - Panel del modal (superficie, radio y sombra).
+ * @part header - Header completo; con `movable` es la zona de arrastre.
+ * @part header-text - Contenedor del título y la descripción.
+ * @part heading - Título (`heading`).
+ * @part description - Descripción bajo el título.
+ * @part body - Cuerpo (slot por defecto).
+ * @part footer - Footer de acciones (slot `footer`).
  */
 export class CoModal {
     constructor() {
@@ -34,8 +46,8 @@ export class CoModal {
          */
         this.closeOnEscape = false;
         /**
-         * Modal width: xs (369px, vía `--co-modal-width` — Task C12, paneles
-         * anclados como "Tipografía y color"), sm (400px), md (540px), lg (680px),
+         * Modal width: xs (369px, vía `--co-modal-width` — paneles anclados como
+         * "Tipografía y color"), sm (400px), md (540px), lg (680px),
          * full (min(1400px, 95vw) × 92vh — media/document viewers).
          *
          * `full` also drops the body padding and lets the body grow, so a slotted
@@ -49,12 +61,12 @@ export class CoModal {
          *  under the heading (Figma modals whose first row is a segmented control). */
         this.headerDivider = true;
         /**
-         * Visual treatment (Task C12). `default` = superficie squircle actual
+         * Visual treatment. `default` = superficie squircle actual
          * (radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie
          * plana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),
          * SIN máscara squircle — look de panel anclado, no de diálogo centrado.
          *
-         * `dialog` (Task M1) = la anatomía del componente "Modal" del design system
+         * `dialog` = la anatomía del componente "Modal" del design system
          * (Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16
          * (`--co-border-radius-lg`) sin borde ni sombra propios, título 22/500 y
          * cuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32
@@ -64,7 +76,7 @@ export class CoModal {
          */
         this.appearance = 'default';
         /**
-         * Control del scrim (Task C12). `none` = sin fondo oscuro y sin cierre por
+         * Control del scrim. `none` = sin fondo oscuro y sin cierre por
          * clic afuera — independiente de `closeOnOverlay` (que solo aplica cuando
          * SÍ hay scrim). `co-overlay` es quien posee el único `<div>` de scrim del
          * árbol, así que `none` implica no montar `<co-overlay>` (ver `inline`).
@@ -72,21 +84,21 @@ export class CoModal {
         this.backdrop = 'default';
         /**
          * Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez
-         * de promoverse al TOP LAYER del browser (Task C12). `co-overlay` promueve
+         * de promoverse al TOP LAYER del browser. `co-overlay` promueve
          * su scrim al top layer vía Popover API (`showPopover()`); el top layer
          * SIEMPRE pinta por encima de cualquier `z-index` normal, así que un
          * portal propio del consumidor (selector de fuente/color del editor) con
          * z-index alto quedaría igual TAPADO detrás del modal. `inline` evita eso.
          *
          * `co-overlay` es también quien posee la promoción a top layer — no hay
-         * forma de pedirle "no te promuevas" sin tocar ese componente (fuera de
-         * alcance de esta task), así que, igual que `backdrop="none"`, `inline`
+         * forma de pedirle "no te promuevas" sin tocar ese componente, así que,
+         * igual que `backdrop="none"`, `inline`
          * implica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse
          * solo (`.co-modal__frame--standalone`, ver co-modal.css).
          */
         this.inline = false;
         /**
-         * Opt-in: el modal se MUEVE arrastrando su header (Task D1). Default false →
+         * Opt-in: el modal se MUEVE arrastrando su header. Default false →
          * los consumidores actuales quedan byte-idénticos (ni DOM ni CSS cambian).
          *
          * Con `movable`, el `part="header"` entero es la zona de agarre (`cursor:
@@ -101,6 +113,19 @@ export class CoModal {
          * mismo nombre taparía `HTMLElement.draggable` con dos semánticas encimadas.
          */
         this.movable = false;
+        /**
+         * Opt-in: trampa de foco accesible (QA 2026-09-24, «Generar contrato»). Con
+         * `true`, al abrir el foco ENTRA al modal (el primer `[autofocus]`; si no
+         * hay, el primer control), Tab / Shift+Tab ciclan adentro y al cerrar vuelve
+         * a donde estaba. El recorrido es compuesto: ve el contenido proyectado por
+         * los slots y el `<button>` interno de cada co-button. Default false → los
+         * consumidores actuales no cambian.
+         *
+         * La trampa es de `<co-overlay>`, así que sin overlay (`inline` o
+         * `backdrop="none"`) NO aplica: esos modos son paneles no bloqueantes y la
+         * página de atrás sigue operable.
+         */
+        this.trapFocus = false;
         /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
         this.hasFooter = false;
         this.handleFooterSlotChange = (e) => {
@@ -216,6 +241,18 @@ export class CoModal {
         if (e.key === 'Escape')
             this.coClose.emit();
     }
+    /**
+     * Re-promueve el modal al TOPE del top layer (QA 2026-09-24, «Generar
+     * contrato»): un drawer que se abre DESPUÉS del modal (cambio de URL,
+     * historial) pinta encima, porque en el top layer gana el último promovido.
+     * Delega en su `<co-overlay>`: sin cerrar el modal, sin eventos (`coClose` /
+     * `coAfterClose` / `coAfterOpen`), sin soltar el scroll lock y sin re-animar
+     * la entrada. No-op sin overlay (`inline`, `backdrop="none"`) o cerrado.
+     */
+    async bringToFront() {
+        var _a, _b, _c;
+        await ((_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('co-overlay')) === null || _b === void 0 ? void 0 : _b.bringToFront) === null || _c === void 0 ? void 0 : _c.call(_b));
+    }
     /**
      * La posición no se persiste: cada APERTURA arranca desde la posición por
      * defecto. El reset va al abrir y no al cerrar a propósito — reseteando al
@@ -331,7 +368,7 @@ export class CoModal {
             }, part: "header", ref: (el) => (this.headerEl = el), onPointerDown: this.movable ? this.handleDragDown : undefined, onPointerMove: this.movable ? this.handleDragMove : undefined, onPointerUp: this.movable ? this.handleDragUp : undefined, onPointerCancel: this.movable ? this.handleDragCancel : undefined }, h("slot", { name: "header-leading" }), h("div", { class: "co-modal__header-text", part: "header-text" }, h("h2", { class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { class: "co-modal__description", part: "description" }, this.description))), h("slot", { name: "header-actions" }), this.closable && (h("button", { class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: closeIconSize })))), !this.noDividers && (h("div", { class: "co-modal__body", part: "body" }, h("slot", null))), h("div", { class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
         if (!this.usesOverlay)
             return frame;
-        return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClick }, frame));
+        return (h("co-overlay", { open: this.open, trapFocus: this.trapFocus, onCoClose: this.handleOverlayClick }, frame));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -478,7 +515,7 @@ export class CoModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal width: xs (369px, v\u00EDa `--co-modal-width` \u2014 Task C12, paneles\nanclados como \"Tipograf\u00EDa y color\"), sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
+                    "text": "Modal width: xs (369px, v\u00EDa `--co-modal-width` \u2014 paneles anclados como\n\"Tipograf\u00EDa y color\"), sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
                 },
                 "getter": false,
                 "setter": false,
@@ -538,7 +575,7 @@ export class CoModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual treatment (Task C12). `default` = superficie squircle actual\n(radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie\nplana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),\nSIN m\u00E1scara squircle \u2014 look de panel anclado, no de di\u00E1logo centrado.\n\n`dialog` (Task M1) = la anatom\u00EDa del componente \"Modal\" del design system\n(Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16\n(`--co-border-radius-lg`) sin borde ni sombra propios, t\u00EDtulo 22/500 y\ncuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32\n(`--co-spacing-3xl`), footer 16/24 con hairline `border-subtle` y botones\ncuadrados de radio 12. Sin m\u00E1scara squircle. El \u2715 (si `closable`) es el\nredondo de 32 del modo `panel`."
+                    "text": "Visual treatment. `default` = superficie squircle actual\n(radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie\nplana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),\nSIN m\u00E1scara squircle \u2014 look de panel anclado, no de di\u00E1logo centrado.\n\n`dialog` = la anatom\u00EDa del componente \"Modal\" del design system\n(Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16\n(`--co-border-radius-lg`) sin borde ni sombra propios, t\u00EDtulo 22/500 y\ncuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32\n(`--co-spacing-3xl`), footer 16/24 con hairline `border-subtle` y botones\ncuadrados de radio 12. Sin m\u00E1scara squircle. El \u2715 (si `closable`) es el\nredondo de 32 del modo `panel`."
                 },
                 "getter": false,
                 "setter": false,
@@ -558,7 +595,7 @@ export class CoModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Control del scrim (Task C12). `none` = sin fondo oscuro y sin cierre por\nclic afuera \u2014 independiente de `closeOnOverlay` (que solo aplica cuando\nS\u00CD hay scrim). `co-overlay` es quien posee el \u00FAnico `<div>` de scrim del\n\u00E1rbol, as\u00ED que `none` implica no montar `<co-overlay>` (ver `inline`)."
+                    "text": "Control del scrim. `none` = sin fondo oscuro y sin cierre por\nclic afuera \u2014 independiente de `closeOnOverlay` (que solo aplica cuando\nS\u00CD hay scrim). `co-overlay` es quien posee el \u00FAnico `<div>` de scrim del\n\u00E1rbol, as\u00ED que `none` implica no montar `<co-overlay>` (ver `inline`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -578,7 +615,7 @@ export class CoModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez\nde promoverse al TOP LAYER del browser (Task C12). `co-overlay` promueve\nsu scrim al top layer v\u00EDa Popover API (`showPopover()`); el top layer\nSIEMPRE pinta por encima de cualquier `z-index` normal, as\u00ED que un\nportal propio del consumidor (selector de fuente/color del editor) con\nz-index alto quedar\u00EDa igual TAPADO detr\u00E1s del modal. `inline` evita eso.\n\n`co-overlay` es tambi\u00E9n quien posee la promoci\u00F3n a top layer \u2014 no hay\nforma de pedirle \"no te promuevas\" sin tocar ese componente (fuera de\nalcance de esta task), as\u00ED que, igual que `backdrop=\"none\"`, `inline`\nimplica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse\nsolo (`.co-modal__frame--standalone`, ver co-modal.css)."
+                    "text": "Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez\nde promoverse al TOP LAYER del browser. `co-overlay` promueve\nsu scrim al top layer v\u00EDa Popover API (`showPopover()`); el top layer\nSIEMPRE pinta por encima de cualquier `z-index` normal, as\u00ED que un\nportal propio del consumidor (selector de fuente/color del editor) con\nz-index alto quedar\u00EDa igual TAPADO detr\u00E1s del modal. `inline` evita eso.\n\n`co-overlay` es tambi\u00E9n quien posee la promoci\u00F3n a top layer \u2014 no hay\nforma de pedirle \"no te promuevas\" sin tocar ese componente, as\u00ED que,\nigual que `backdrop=\"none\"`, `inline`\nimplica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse\nsolo (`.co-modal__frame--standalone`, ver co-modal.css)."
                 },
                 "getter": false,
                 "setter": false,
@@ -598,13 +635,33 @@ export class CoModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Opt-in: el modal se MUEVE arrastrando su header (Task D1). Default false \u2192\nlos consumidores actuales quedan byte-id\u00E9nticos (ni DOM ni CSS cambian).\n\nCon `movable`, el `part=\"header\"` entero es la zona de agarre (`cursor:\ngrab`), salvo los controles que contenga (el \u2715, y cualquier bot\u00F3n, enlace\no campo: ver `isInteractiveDragTarget`). Soltar confirma la posici\u00F3n;\n`pointercancel` o perder el foco de la ventana la CANCELAN y dejan la\nanterior. La posici\u00F3n no se persiste: cerrar y reabrir devuelve el panel a\nsu lugar por defecto.\n\nSe llama `movable` y no `draggable` a prop\u00F3sito: `draggable` es un atributo\nglobal de HTML (arrastre nativo HTML5) y una prop de React, y una prop del\nmismo nombre tapar\u00EDa `HTMLElement.draggable` con dos sem\u00E1nticas encimadas."
+                    "text": "Opt-in: el modal se MUEVE arrastrando su header. Default false \u2192\nlos consumidores actuales quedan byte-id\u00E9nticos (ni DOM ni CSS cambian).\n\nCon `movable`, el `part=\"header\"` entero es la zona de agarre (`cursor:\ngrab`), salvo los controles que contenga (el \u2715, y cualquier bot\u00F3n, enlace\no campo: ver `isInteractiveDragTarget`). Soltar confirma la posici\u00F3n;\n`pointercancel` o perder el foco de la ventana la CANCELAN y dejan la\nanterior. La posici\u00F3n no se persiste: cerrar y reabrir devuelve el panel a\nsu lugar por defecto.\n\nSe llama `movable` y no `draggable` a prop\u00F3sito: `draggable` es un atributo\nglobal de HTML (arrastre nativo HTML5) y una prop de React, y una prop del\nmismo nombre tapar\u00EDa `HTMLElement.draggable` con dos sem\u00E1nticas encimadas."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "movable",
                 "defaultValue": "false"
+            },
+            "trapFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in: trampa de foco accesible (QA 2026-09-24, \u00ABGenerar contrato\u00BB). Con\n`true`, al abrir el foco ENTRA al modal (el primer `[autofocus]`; si no\nhay, el primer control), Tab / Shift+Tab ciclan adentro y al cerrar vuelve\na donde estaba. El recorrido es compuesto: ve el contenido proyectado por\nlos slots y el `<button>` interno de cada co-button. Default false \u2192 los\nconsumidores actuales no cambian.\n\nLa trampa es de `<co-overlay>`, as\u00ED que sin overlay (`inline` o\n`backdrop=\"none\"`) NO aplica: esos modos son paneles no bloqueantes y la\np\u00E1gina de atr\u00E1s sigue operable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trap-focus",
+                "defaultValue": "false"
             }
         };
     }
@@ -662,6 +719,28 @@ export class CoModal {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "bringToFront": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-promueve el modal al TOPE del top layer (QA 2026-09-24, \u00ABGenerar\ncontrato\u00BB): un drawer que se abre DESPU\u00C9S del modal (cambio de URL,\nhistorial) pinta encima, porque en el top layer gana el \u00FAltimo promovido.\nDelega en su `<co-overlay>`: sin cerrar el modal, sin eventos (`coClose` /\n`coAfterClose` / `coAfterOpen`), sin soltar el scroll lock y sin re-animar\nla entrada. No-op sin overlay (`inline`, `backdrop=\"none\"`) o cerrado.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "open",

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

@@ -1,3 +1,10 @@
+/**
+ * @prop --co-navbar-padding-x: Padding horizontal en las tallas `sm` y `md`.
+ * @prop --co-navbar-padding-x-start: Padding izquierdo en la talla `lg` (default 12px).
+ * @prop --co-navbar-padding-x-end: Padding derecho en la talla `lg` (default 24px).
+ * @prop --co-navbar-bg: Fondo de la barra; cada `variant` lo asigna en el elemento interno, así que se sobrescribe vía `co-navbar::part(navbar)`.
+ * @prop --co-navbar-color: Color de texto de la barra; igual que el fondo, vía `::part(navbar)`.
+ */
 :host {
   display: block;
 }

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 /**
  * Horizontal toolbar container. Place any content inside the default slot.
  * Works like Quasar's q-toolbar — a styled flex row.
+ * Wrapper Vue: `CoNavbar` de `@prolibu-suite/cobalt-vue`.
  * @slot - Content (buttons, titles, icons, etc.)
+ * @part navbar - La barra.
  */
 export class CoNavbar {
     constructor() {
@@ -14,12 +16,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'd313d8d23b4b4f2d0250fedf8762bdda47464fe2', class: {
+        return (h("div", { key: '68c78b33434a32372eef9763b0c11c9a185f6ef8', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '737e1bfc2c3254fed53e590cba18932dc1d04f5d' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'a9d05ff60065f85dc24e941478a18fa40466143f' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,17 +33,31 @@ const caretAfterSignificant = (text, count) => {
     }
     return text.length;
 };
+/**
+ * Campo numérico con botones −/+, flechas del teclado para escalonar, límites
+ * `min`/`max` y formatos de tasa, porcentaje o monto. Wrapper Vue:
+ * `CoNumberField` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part row - Fila del campo: input y botones −/+.
+ * @part input - El `<input>` nativo.
+ */
 export class CoNumberField {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
+        /** Valor numérico (reflejado); `null` = vacío (solo alcanzable con `clearable`). El componente lo actualiza. */
         this.value = 0;
+        /** Paso de los botones −/+ y de las flechas (default 1). */
         this.step = 1;
+        /** Deshabilita el campo y los botones. */
         this.disabled = false;
+        /** Placeholder del campo vacío (default `'0'`). */
         this.placeholder = '0';
+        /** Alto del campo: `s` 28 · `sm` 32 · `md` 40 (default) · `lg` 48. */
         this.size = 'md';
         /** Show clear button when the field has a value */
         this.clearable = false;
@@ -323,18 +337,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: 'cfe8c799eba592d7eab1bf8fc7dfc3a143123206', class: {
+        return (h("div", { key: 'cf4d63ce0278fd8f429aa4bf541497b7cf178ffe', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b15f9ddc1de6c026d92ee4776dc9209359d9a33b', class: "co-number-field__labels" }, this.label && h("label", { key: '449cb18609fa0aafe53cfd8eea7f2ea30e1b822c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '87e3da885243de08bce2e63c6d94eaf0b5ec374c', required: this.required })), this.secondaryLabel && h("span", { key: 'eccc1dba84e28783d2c15f442ec7713e24b0a4e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '6afdf37dd4e52fe7ec168bea6cb84a15f7f67414', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'b858fc8ae0c6cfcf4e4ee7c30e11d967a0aa2e0e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '37e7b6b9ddeb72ed33f9131ee010149e64cdf509', name: "minus", size: 16 }))), h("input", { key: 'a9656744984f93fe8955fb46afd28735a31b439a', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ecf9fd16f18a3ebbaef5b81b0c8ae41b80f04abf', class: "co-number-field__labels" }, this.label && h("label", { key: '7602d901e085e3380dff2a355d61ac1dc515428b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '361743bf41c66ff28ceec00aba583328f2404713', required: this.required })), this.secondaryLabel && h("span", { key: 'ec9af4b27f3915704ef89ed6f51e7184eb5e1dd4', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '30f1716aed06da03f924fa1da2b2ab29dbede0bb', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '1dbee1178df2a86e54ae42572a20ecf30484b8bc', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '40f61bd3774fb03b6aaceaef006dd45f2df260d3', name: "minus", size: 16 }))), h("input", { key: '254a74cd61a2776a69953965f8b289267b25fbb2', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'a2a7a46bc8e2ad04a4577d0ab32444deab4f4948', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '4123b22bb2412768a68daaedf02585209f605998', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '103adae6937baaa8b9ce6abb8c5b4a262b18a237', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'e55d3dc0bbe1fc1cb4a46356c6851f508d04e73b', name: "suffix" }), !this.hideControls && (h("button", { key: '37c01ae815d19c01dfb977175cea070486964670', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '02d8b9b44d3a3193d8036e7ce46be922bc1304e3', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '2f72a4dcdfb96e186534c7ada315dad9dbd8b874', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a7ad565fedf3799847b884f187ec8c9992ce4c0a', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '122017cba05350b34dfbf2f9f6f7d14c41550904', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '836ea4e4cba0b21a36b1017d6fc0c4d621d69e56', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '5eefa937a055dea1855d1bc3bae675003d8382c8', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '096dec8d88b7b241cd83a04788bc4db05feec585', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '1ea7d1ff2c61d74b0884e7b8f1b7b54de4978876', name: "suffix" }), !this.hideControls && (h("button", { key: '9ae95697534b85dcd928c0d0e7f72a3b8c5402c7', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'af526ac4278865052f32ae7359a571aa485492af', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '9bad3ffd8c70ce49205132f9f73294a83b6ebbc3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '4987bc82011c4bb93e1bd00ef1ffd45d2e8681f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '8eac5821653dc0110113f94833e13f27411188a7', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -362,7 +376,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +415,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta."
                 },
                 "getter": false,
                 "setter": false,
@@ -420,7 +434,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -459,7 +473,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: pinta el borde y el `helperText` con el color del estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -479,7 +493,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Valor num\u00E9rico (reflejado); `null` = vac\u00EDo (solo alcanzable con `clearable`). El componente lo actualiza."
                 },
                 "getter": false,
                 "setter": false,
@@ -499,7 +513,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00EDnimo: los valores se recortan a este l\u00EDmite."
                 },
                 "getter": false,
                 "setter": false,
@@ -518,7 +532,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00E1ximo: los valores se recortan a este l\u00EDmite."
                 },
                 "getter": false,
                 "setter": false,
@@ -537,7 +551,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Paso de los botones \u2212/+ y de las flechas (default 1)."
                 },
                 "getter": false,
                 "setter": false,
@@ -557,7 +571,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo y los botones."
                 },
                 "getter": false,
                 "setter": false,
@@ -577,7 +591,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del campo vac\u00EDo (default `'0'`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -597,7 +611,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto del campo: `s` 28 \u00B7 `sm` 32 \u00B7 `md` 40 (default) \u00B7 `lg` 48."
                 },
                 "getter": false,
                 "setter": false,
@@ -699,7 +713,7 @@ export class CoNumberField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 el valor (ya recortado a `min`/`max`; `value` ya est\u00E1 actualizado): `detail` = n\u00FAmero, o `null` al vaciar con `clearable`."
                 },
                 "complexType": {
                     "original": "number | null",