@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

package/dist/cjs/co-menu.cjs.entry.js

@@ -32,9 +32,8 @@ const CoMenu = class {
          *  `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)
@@ -101,6 +100,7 @@ const CoMenu = class {
     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();
@@ -144,14 +144,14 @@ const CoMenu = class {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (index.h("co-popover", { key: '9ad32ee1adf1436a4ff266db44a34c0b4e9b5293', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
+        return (index.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 }, index.h("slot", { key: 'b093c29c2e8a6773843a030282cc9e06af54f8c7', name: "trigger", slot: "trigger" }), index.h("div", { key: '00baf22b70a5f0544a134c170549b31fb46baf38', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, index.h("slot", { key: '2307edc81be264fe4e8a76fb2e1bc14b59538cc2' }))));
+            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, index.h("slot", { key: 'b78bcba7bc9542a82c78c1b8026bd4aa56629667', name: "trigger", slot: "trigger" }), index.h("div", { key: '0515763cb0b89320d4831befe1b6d984029ce309', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, index.h("slot", { key: 'baf72944333c4e912fe0a0aa58d8affb8e923a3e' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -164,7 +164,7 @@ const CoMenu = class {
  *  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/cjs/co-modal.cjs.entry.js

@@ -127,8 +127,8 @@ const CoModal = class {
          */
         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
@@ -142,12 +142,12 @@ const CoModal = class {
          *  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
@@ -157,7 +157,7 @@ const CoModal = class {
          */
         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`).
@@ -165,21 +165,21 @@ const CoModal = class {
         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:
@@ -194,6 +194,19 @@ const CoModal = class {
          * 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) => {
@@ -309,6 +322,18 @@ const CoModal = class {
         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
@@ -424,8 +449,9 @@ const CoModal = class {
             }, 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 }, index.h("slot", { name: "header-leading" }), index.h("div", { class: "co-modal__header-text", part: "header-text" }, index.h("h2", { class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { class: "co-modal__description", part: "description" }, this.description))), index.h("slot", { name: "header-actions" }), this.closable && (index.h("button", { class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { name: "x", size: closeIconSize })))), !this.noDividers && (index.h("div", { class: "co-modal__body", part: "body" }, index.h("slot", null))), index.h("div", { class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
         if (!this.usesOverlay)
             return frame;
-        return (index.h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClick }, frame));
+        return (index.h("co-overlay", { open: this.open, trapFocus: this.trapFocus, onCoClose: this.handleOverlayClick }, frame));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": [{
                 "resetPositionOnOpen": 0

package/dist/cjs/co-navbar.cjs.entry.js

@@ -15,12 +15,12 @@ const CoNavbar = class {
         this.rounded = false;
     }
     render() {
-        return (index.h("div", { key: 'd313d8d23b4b4f2d0250fedf8762bdda47464fe2', class: {
+        return (index.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" }, index.h("slot", { key: '737e1bfc2c3254fed53e590cba18932dc1d04f5d' })));
+            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: 'a9d05ff60065f85dc24e941478a18fa40466143f' })));
     }
 };
 CoNavbar.style = coNavbarCss();

package/dist/cjs/co-number-field.cjs.entry.js

@@ -142,11 +142,17 @@ const CoNumberField = class {
         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;
@@ -426,18 +432,18 @@ const CoNumberField = class {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (index.h("div", { key: 'cfe8c799eba592d7eab1bf8fc7dfc3a143123206', class: {
+        return (index.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) && (index.h("div", { key: 'b15f9ddc1de6c026d92ee4776dc9209359d9a33b', class: "co-number-field__labels" }, this.label && index.h("label", { key: '449cb18609fa0aafe53cfd8eea7f2ea30e1b822c', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '87e3da885243de08bce2e63c6d94eaf0b5ec374c', required: this.required })), this.secondaryLabel && index.h("span", { key: 'eccc1dba84e28783d2c15f442ec7713e24b0a4e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: '6afdf37dd4e52fe7ec168bea6cb84a15f7f67414', class: "co-number-field__row", part: "row" }, !this.hideControls && (index.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" }, index.h("co-icon", { key: '37e7b6b9ddeb72ed33f9131ee010149e64cdf509', name: "minus", size: 16 }))), index.h("input", { key: 'a9656744984f93fe8955fb46afd28735a31b439a', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'ecf9fd16f18a3ebbaef5b81b0c8ae41b80f04abf', class: "co-number-field__labels" }, this.label && index.h("label", { key: '7602d901e085e3380dff2a355d61ac1dc515428b', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '361743bf41c66ff28ceec00aba583328f2404713', required: this.required })), this.secondaryLabel && index.h("span", { key: 'ec9af4b27f3915704ef89ed6f51e7184eb5e1dd4', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: '30f1716aed06da03f924fa1da2b2ab29dbede0bb', class: "co-number-field__row", part: "row" }, !this.hideControls && (index.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" }, index.h("co-icon", { key: '40f61bd3774fb03b6aaceaef006dd45f2df260d3', name: "minus", size: 16 }))), index.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 && (index.h("span", { key: 'a2a7a46bc8e2ad04a4577d0ab32444deab4f4948', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '4123b22bb2412768a68daaedf02585209f605998', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '103adae6937baaa8b9ce6abb8c5b4a262b18a237', name: "x-circle", size: 16, weight: "fill" }))), index.h("slot", { key: 'e55d3dc0bbe1fc1cb4a46356c6851f508d04e73b', name: "suffix" }), !this.hideControls && (index.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" }, index.h("co-icon", { key: '02d8b9b44d3a3193d8036e7ce46be922bc1304e3', name: "plus", size: 16 })))), this.helperText && (index.h("div", { key: '2f72a4dcdfb96e186534c7ada315dad9dbd8b874', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'a7ad565fedf3799847b884f187ec8c9992ce4c0a', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.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 && (index.h("span", { key: '836ea4e4cba0b21a36b1017d6fc0c4d621d69e56', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '5eefa937a055dea1855d1bc3bae675003d8382c8', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '096dec8d88b7b241cd83a04788bc4db05feec585', name: "x-circle", size: 16, weight: "fill" }))), index.h("slot", { key: '1ea7d1ff2c61d74b0884e7b8f1b7b54de4978876', name: "suffix" }), !this.hideControls && (index.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" }, index.h("co-icon", { key: 'af526ac4278865052f32ae7359a571aa485492af', name: "plus", size: 16 })))), this.helperText && (index.h("div", { key: '9bad3ffd8c70ce49205132f9f73294a83b6ebbc3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '4987bc82011c4bb93e1bd00ef1ffd45d2e8681f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: '8eac5821653dc0110113f94833e13f27411188a7', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-overlay.cjs.entry.js

@@ -57,20 +57,112 @@ function resolveTabIndex(count, activeIndex, shiftKey) {
     // Forward: from the last element (or from outside) wrap to the first.
     return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
 }
+// ── Recorrido compuesto (QA 2026-09-24, «Generar contrato» de contratos V2) ──
+// El foco nunca entraba ni quedaba atrapado en un co-modal: `getFocusableElements`
+// solo mira el light DOM de co-overlay (el frame del modal: el ✕). El contenido
+// del consumidor llega por DOS <slot> (el de co-overlay y el del frame) y los
+// controles reales viven en el shadow de cada co-* (el <button> de co-button, el
+// <input> de co-input). El recorrido sigue el árbol PLANO: baja por shadowRoots
+// y, en cada <slot>, por sus asignados — o por su contenido por defecto si no
+// tiene. Todo esto corre solo en el navegador (abrir la trampa / cada Tab).
+/** Hijos en el árbol plano: el shadow del host, los asignados de un slot o los hijos. */
+function composedChildren(el) {
+    if (el.shadowRoot)
+        return Array.from(el.shadowRoot.children);
+    if (el.tagName === 'SLOT') {
+        const assigned = el.assignedElements({ flatten: true });
+        return assigned.length ? assigned : Array.from(el.children);
+    }
+    return Array.from(el.children);
+}
+/** Subárbol fuera de la trampa entero: oculto a AT o inerte. */
+function isExcludedSubtree(el) {
+    return el.getAttribute('aria-hidden') === 'true' || el.hasAttribute('inert');
+}
+/**
+ * Parada de Tab: matchea el selector, no está deshabilitado, no se sacó del
+ * orden con tabindex negativo (los botones internos de un trigger co-* —clear,
+ * chips— van con `tabIndex={-1}`, y `button:not([disabled])` los matchearía
+ * igual), tiene caja (offsetParent null = display:none; getClientRects cubre
+ * position:fixed) y no es `visibility:hidden`: un acordeón o fieldset colapsado
+ * conserva la caja pero el navegador no le da el foco, y la trampa lo elegiría
+ * igual → Tab clavado (WCAG 2.1.2). Sin la API (navegador viejo, jsdom) no filtra.
+ */
+function isTabStop(el) {
+    var _a, _b;
+    if (!((_a = el.matches) === null || _a === void 0 ? void 0 : _a.call(el, FOCUSABLE_SELECTOR)) || el.hasAttribute('disabled'))
+        return false;
+    const tabindex = el.getAttribute('tabindex');
+    if (tabindex !== null && Number(tabindex) < 0)
+        return false;
+    if (el.offsetParent === null && el.getClientRects().length === 0)
+        return false;
+    return ((_b = el.checkVisibility) === null || _b === void 0 ? void 0 : _b.call(el, { visibilityProperty: true })) !== false;
+}
 /**
- * Collect the tabbable elements slotted into the overlay's light DOM, skipping
- * hidden / aria-hidden ones. (Focusables nested inside further shadow roots are
- * out of scope — the common dialog/modal content lives in the slotted subtree.)
+ * Recorre en orden del árbol plano los descendientes compuestos de `root` (sin
+ * incluirlo) hasta que `visit` devuelve true. Poda aria-hidden / inert.
  */
-function getFocusableElements(root) {
-    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
-    return nodes.filter((el) => !el.hasAttribute('disabled') &&
-        el.getAttribute('aria-hidden') !== 'true' &&
-        // offsetParent is null for display:none; getClientRects covers position:fixed.
-        (el.offsetParent !== null || el.getClientRects().length > 0));
+function walkComposed(root, visit) {
+    const step = (node) => {
+        if (isExcludedSubtree(node))
+            return false;
+        if (visit(node))
+            return true;
+        return composedChildren(node).some(step);
+    };
+    composedChildren(root).some(step);
+}
+/** Primer descendiente compuesto que cumple `match`, en orden del árbol plano. */
+function findComposed(root, match) {
+    let found = null;
+    walkComposed(root, (el) => {
+        if (!match(el))
+            return false;
+        found = el;
+        return true;
+    });
+    return found;
+}
+/**
+ * Paradas de Tab dentro de `root` en el árbol COMPUESTO (shadowRoots + slots
+ * asignados), con las mismas exclusiones que `getFocusableElements`.
+ */
+function getComposedFocusables(root) {
+    const out = [];
+    walkComposed(root, (el) => {
+        if (isTabStop(el))
+            out.push(el);
+        return false;
+    });
+    return out;
+}
+/**
+ * Dónde cae el foco al abrir la trampa: el primer `[autofocus]` del recorrido
+ * compuesto —si es un host con shadow (`<co-input autofocus>`), su primer
+ * enfocable compuesto—; si no hay, la primera parada de Tab. `null` = nada
+ * enfocable (el llamador cae al contenedor).
+ */
+function resolveInitialFocus(root) {
+    const autofocus = findComposed(root, (el) => el.hasAttribute('autofocus'));
+    if (autofocus) {
+        if (isTabStop(autofocus))
+            return autofocus;
+        const inner = autofocus.shadowRoot ? getComposedFocusables(autofocus)[0] : undefined;
+        if (inner)
+            return inner;
+    }
+    return findComposed(root, isTabStop);
+}
+/**
+ * Con dos trampas abiertas (un confirm sobre un modal, un modal anidado) las dos
+ * escuchan el keydown de document: solo la capa MÁS RECIENTE maneja Tab.
+ */
+function isTopTrap(stack, id) {
+    return stack.length > 0 && stack[stack.length - 1] === id;
 }
 
-const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;margin:0;border:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center;background:var(--co-overlay-bg, rgba(0, 0, 0, 0.4));-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-overlay--open{opacity:1;pointer-events:auto;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}`;
+const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;margin:0;border:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center;background:var(--co-overlay-bg, rgba(0, 0, 0, 0.4));-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-overlay--open{opacity:1;pointer-events:auto;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-overlay--refront{transition:none !important}`;
 
 /**
  * Module-level body-scroll lock shared by every overlay instance.
@@ -98,6 +190,16 @@ function unlockBodyScroll() {
         document.body.style.overflow = savedOverflow;
     }
 }
+/**
+ * Pila de trampas de foco ABIERTAS, compartida por todas las instancias (como el
+ * scroll lock). Todas escuchan el keydown de document: con un confirm encima de
+ * un modal, las dos movían el foco en el mismo Tab. Solo la capa más reciente
+ * (`isTopTrap`) maneja Tab y el foco inicial.
+ */
+const trapStack = [];
+let trapSeq = 0;
+/** Clase del div mientras dura el re-apilado de `bringToFront()` (ver co-overlay.css). */
+const REFRONT_CLASS = 'co-overlay--refront';
 function nextFrame(cb) {
     if (typeof requestAnimationFrame === 'function')
         requestAnimationFrame(cb);
@@ -117,6 +219,11 @@ const CoOverlay = class {
          * previously-focused element, moves focus into the overlay, cycles Tab /
          * Shift+Tab within the slotted content, and restores focus on close.
          * Default false → existing consumers are unchanged.
+         *
+         * The walk is COMPOSED (shadow roots + assigned slots): it reaches the
+         * consumer's content projected through a host's slots and the inner control
+         * of every co-* (a co-button's `<button>`). With several traps open, only the
+         * most recent one handles Tab.
          */
         this.trapFocus = false;
         /**
@@ -126,6 +233,10 @@ const CoOverlay = class {
         this.closeOnEscape = false;
         /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
         this.hasLock = false;
+        /** Identidad de esta instancia en `trapStack`. */
+        this.trapId = `co-overlay-trap-${++trapSeq}`;
+        /** Whether THIS instance is currently in `trapStack` (prevents double push). */
+        this.trapping = 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 —el
         // navegador despacha ese `click` al ancestro común, el propio scrim—, ni
@@ -167,27 +278,55 @@ const CoOverlay = class {
         else
             this.releaseLock();
         this.syncPopover();
-        if (this.trapFocus) {
-            if (isOpen)
-                this.captureAndFocus();
-            else
-                this.restoreFocus();
-        }
+        this.syncTrap();
+    }
+    onTrapFocusChange() {
+        this.syncTrap();
     }
     componentDidLoad() {
         // Handle the case where the overlay mounts already open.
         if (this.open)
             this.acquireLock();
         this.syncPopover();
-        if (this.open && this.trapFocus)
-            this.captureAndFocus();
+        this.syncTrap();
     }
     disconnectedCallback() {
         // Safety: never leave the body locked if removed while open.
         this.releaseLock();
-        // Safety: return focus if we were removed while trapping.
-        if (this.trapFocus)
-            this.restoreFocus();
+        // Safety: leave the trap stack and return focus if removed while trapping.
+        this.releaseTrap();
+    }
+    /**
+     * Re-promueve el scrim al TOPE del top layer (QA 2026-09-24, «Generar
+     * contrato»): un drawer abierto DESPUÉS de un modal pintaba encima, porque en
+     * el top layer gana el último promovido y no hay z-index que lo corrija.
+     * `hidePopover()` + `showPopover()` lo vuelven a meter último.
+     *
+     * No es un cierre: no emite `coClose` / `coAfterClose` / `coAfterOpen`, no
+     * toca `open` ni el scroll lock, y no re-anima la entrada (la clase
+     * `co-overlay--refront` anula la transición durante el re-show y se retira en
+     * el frame siguiente). Tampoco mueve el foco: si el re-show dispara los
+     * «popover focusing steps» (un `[autofocus]` adentro), se devuelve a donde
+     * estaba. No-op cerrado, sin Popover API o fuera del top layer.
+     */
+    async bringToFront() {
+        const el = this.overlayEl;
+        if (!this.open || !el || typeof el.showPopover !== 'function')
+            return;
+        if (!el.matches(':popover-open'))
+            return;
+        const active = this.deepActiveElement();
+        el.classList.add(REFRONT_CLASS);
+        try {
+            el.hidePopover();
+            el.showPopover();
+        }
+        catch (_a) {
+            /* desconectado entre medio: no hay nada que re-apilar */
+        }
+        if (active && active.isConnected && this.deepActiveElement() !== active)
+            active.focus({ preventScroll: true });
+        nextFrame(() => el.classList.remove(REFRONT_CLASS));
     }
     acquireLock() {
         if (this.hasLock)
@@ -225,19 +364,43 @@ const CoOverlay = class {
             /* not connected yet, or already in the desired state */
         }
     }
-    /** Record the current focus and move it into the overlay (guarded by trapFocus). */
+    /** La trampa está activa exactamente mientras el overlay está abierto con `trapFocus`. */
+    syncTrap() {
+        if (this.open && this.trapFocus)
+            this.engageTrap();
+        else
+            this.releaseTrap();
+    }
+    engageTrap() {
+        if (this.trapping)
+            return;
+        this.trapping = true;
+        trapStack.push(this.trapId);
+        this.captureAndFocus();
+    }
+    releaseTrap() {
+        if (!this.trapping)
+            return;
+        this.trapping = false;
+        const i = trapStack.indexOf(this.trapId);
+        if (i >= 0)
+            trapStack.splice(i, 1);
+        this.restoreFocus();
+    }
+    /** Record the current focus and move it into the overlay (only while trapping). */
     captureAndFocus() {
-        if (typeof document !== 'undefined') {
-            this.returnFocusEl = document.activeElement;
-        }
+        // El activo PROFUNDO: `document.activeElement` se queda en el host de un
+        // co-* (co-button), cuyo focus() no llega al <button> interno.
+        this.returnFocusEl = this.deepActiveElement();
         // Defer so slotted content / the open transition is ready to take focus.
         nextFrame(() => {
             var _a;
-            if (!this.open)
+            // Una trampa abierta en el mismo frame por ENCIMA (confirm) se queda el foco.
+            if (!this.open || !this.trapping || !isTopTrap(trapStack, this.trapId))
                 return;
-            const focusables = getFocusableElements(this.el);
-            if (focusables.length > 0)
-                focusables[0].focus();
+            const target = resolveInitialFocus(this.el);
+            if (target)
+                target.focus();
             else
                 (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
         });
@@ -246,8 +409,9 @@ const CoOverlay = class {
     restoreFocus() {
         const target = this.returnFocusEl;
         this.returnFocusEl = null;
-        if (target && typeof target.focus === 'function')
-            target.focus();
+        // Desmontado mientras el overlay estaba abierto (el paso de un wizard): no hay adónde volver.
+        if (target && target.isConnected && typeof target.focus === 'function')
+            target.focus({ preventScroll: true });
     }
     /** Deepest active element, descending through nested shadow roots. */
     deepActiveElement() {
@@ -266,12 +430,16 @@ const CoOverlay = class {
             this.coClose.emit();
             return;
         }
-        if (this.trapFocus && e.key === 'Tab')
+        if (this.trapping && e.key === 'Tab' && isTopTrap(trapStack, this.trapId))
             this.trapTab(e);
     }
     trapTab(e) {
         var _a;
-        const focusables = getFocusableElements(this.el);
+        // Tab ya manejado por un control de adentro (co-tags-field agrega el tag, las listas de co-rich-text y
+        // CodeMirror indentan): el listener de document corre DESPUÉS y no le roba el foco.
+        if (e.defaultPrevented)
+            return;
+        const focusables = getComposedFocusables(this.el);
         if (focusables.length === 0) {
             // Nothing to move to — keep focus pinned to the overlay container.
             e.preventDefault();
@@ -286,12 +454,15 @@ const CoOverlay = class {
         focusables[nextIndex].focus();
     }
     render() {
-        return (index.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 }, index.h("slot", { key: '645b336ce50938672fc09a27a15ef314250beaf2' })));
+        return (index.h("div", { key: 'e18d7b0e3ebd4933a78a9f2d39af6058ce429105', 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 }, index.h("slot", { key: '2f29233d44de8a0cc3100cfa08233cdc10ebf352' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": [{
                 "onOpenChange": 0
+            }],
+        "trapFocus": [{
+                "onTrapFocusChange": 0
             }]
     }; }
 };

package/dist/cjs/co-page-header.cjs.entry.js

@@ -9,7 +9,7 @@ const CoPageHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'e3a67a921d1a5c5ac8a91d1bbf76efc5d1dc6e54', class: "co-page-header", part: "page-header" }, index.h("div", { key: 'c1487cedf194477595bb176c381d5e839a70571e', class: "co-page-header__left" }, this.icon && (index.h("span", { key: 'd07f12f586c1e42fb85a06c8a7cc634778a939e5', class: "co-page-header__icon" }, index.h("co-icon", { key: '0224fac27acc073beccd0d59b39e3714732b3fcc', name: this.icon, size: 24 }))), index.h("span", { key: 'c19700b850224b46a175c4a5fb082a7898842c7e', class: "co-page-header__title" }, index.h("slot", { key: '3e7426edb3999085f9791ed7fb9fb74b82e4227e' }, this.heading))), index.h("div", { key: 'ca4dd0bd5c5d553eb6adb80cc3d2093ea9dd4d2b', class: "co-page-header__actions" }, index.h("slot", { key: '3f108386752ebd1a740ab97c5f7fc8535a55f853', name: "actions" }))));
+        return (index.h("div", { key: '18d15d7b241f92bbd121fd6547832a30f4404928', class: "co-page-header", part: "page-header" }, index.h("div", { key: 'cbf4427991e3b43775a1d47c95f953ef79d71c77', class: "co-page-header__left" }, this.icon && (index.h("span", { key: '647701102f261fc214a0a4347894ba275da1ed7d', class: "co-page-header__icon" }, index.h("co-icon", { key: 'd377f2f5cbfa190cb483fe4a6ff2a483f9053f7b', name: this.icon, size: 24 }))), index.h("span", { key: 'ccf59184d2154c89fc90ccddfffc8dfc8c07b72b', class: "co-page-header__title" }, index.h("slot", { key: '34dd64e79e72cb154c63b16f72c2ec58193d9988' }, this.heading))), index.h("div", { key: 'e2f1d119629a3b9479896cf2338625ad775b8556', class: "co-page-header__actions" }, index.h("slot", { key: '62ee162b3388968ee1930a2c3ab20e45b34a2d65', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();

package/dist/cjs/co-popover.cjs.entry.js

@@ -61,7 +61,7 @@ const CoPopover = class {
         /** 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` /
@@ -69,8 +69,7 @@ const CoPopover = class {
          */
         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
@@ -187,7 +186,7 @@ const CoPopover = class {
                 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();
@@ -335,17 +334,20 @@ const CoPopover = class {
         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).
@@ -415,13 +417,13 @@ const CoPopover = class {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (index.h("div", { key: '662c5cf02c52e80ab1367b7bf5418a5314449b93', class: "co-popover" }, index.h("div", { key: '067b11518b303acbfdb695d339d5fc3a1c709413', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: 'b186427b3c97ff65beda554f0c54e0e4bd91b44b', name: "trigger" })), (this.open || this.closing) && (index.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 (index.h("div", { key: 'f9c23cf5b7beb42230fbc37e6aacb9d8423a2c34', class: "co-popover" }, index.h("div", { key: '255b7a3b713719283e3b4a6d65ed520661b4e40b', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: '82c7133648e7c55db263f1abae8902c3ab579d27', name: "trigger" })), (this.open || this.closing) && (index.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();
                 }
-            } }, index.h("slot", { key: '2220a6e8efdee1ec51c4c3d33eb1b016f0619f48' })))));
+            } }, index.h("slot", { key: 'fb635cf42e7866b055a59aaf471bab5bca995afb' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {