@prolibu-suite/cobalt-core 0.11.1 → 0.11.3

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

@@ -55,20 +55,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.
@@ -96,6 +188,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);
@@ -115,6 +217,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;
         /**
@@ -124,6 +231,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
@@ -165,27 +276,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)
@@ -223,19 +362,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();
         });
@@ -244,8 +407,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() {
@@ -264,12 +428,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();
@@ -284,12 +452,15 @@ const CoOverlay = class {
         focusables[nextIndex].focus();
     }
     render() {
-        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' })));
+        return (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 }, h("slot", { key: '2f29233d44de8a0cc3100cfa08233cdc10ebf352' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "open": [{
                 "onOpenChange": 0
+            }],
+        "trapFocus": [{
+                "onTrapFocusChange": 0
             }]
     }; }
 };

package/dist/esm/co-rich-text-editor.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
-import { R as RichText } from './index-Cpo8HTwr.js';
+import { R as RichText } from './index-CgyOJePd.js';
 import { g as getRichTextStrings } from './richTextI18n-xnrKkNWQ.js';
 import { E as EchoGuard, p as parseEditorValue, a as applyExternalValue, b as parseFeatures, c as buildOutput, s as syncToolbarEditor, d as syncImageLayouts } from './rich-text-host-BmdKHBZP.js';
-import './pagination-D9OfZUnY.js';
+import './pagination-BzrIQtrk.js';
 import './purify.es-B2QLgWrz.js';
 import './toolbar-config-CRxTFT_z.js';
 

package/dist/esm/co-rich-text-viewer.entry.js

@@ -133,7 +133,7 @@ const CoRichTextViewer = class {
         // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
         try {
             const doc = JSON.parse(this.value);
-            const rt = await import('./index-Cpo8HTwr.js').then(function (n) { return n.R; });
+            const rt = await import('./index-CgyOJePd.js').then(function (n) { return n.R; });
             this.html = rt.jsonToHtml(doc, this.preset);
         }
         catch (_a) {

package/dist/esm/co-toggle-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 
-const coToggleButtonCss = () => `:host{display:inline-flex;--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='l']){--co-toggle-button-radius:var(--co-border-radius-lg)}:host([size='m']){--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='s']){--co-toggle-button-radius:var(--co-border-radius-xs)}:host([size='xs']){--co-toggle-button-radius:var(--co-border-radius-xs)}.co-toggle-button{display:inline-flex;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-top-left-radius:var(--co-tbr-tl, var(--co-toggle-button-radius));border-top-right-radius:var(--co-tbr-tr, var(--co-toggle-button-radius));border-bottom-right-radius:var(--co-tbr-br, var(--co-toggle-button-radius));border-bottom-left-radius:var(--co-tbr-bl, var(--co-toggle-button-radius));background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);-webkit-backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));color:var(--co-semantic-text-default);font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-14)}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14)}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-800, #0a0a0a);border-color:var(--co-color-gray-800, #0a0a0a)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button:focus-visible{outline:2px solid var(--co-semantic-text-default);outline-offset:-3px}.co-toggle-button--selected:focus-visible{outline-color:currentColor}.co-toggle-button__label{line-height:1}@supports not (background: color-mix(in srgb, red, transparent)){.co-toggle-button{background:var(--co-semantic-surface-secondary)}}:host([variant='track']) .co-toggle-button{height:var(--co-toggle-pill-height, 30px);border-radius:var(--co-toggle-pill-radius, 8px);border-color:transparent;background:transparent;color:var(--co-semantic-text-secondary);box-shadow:none;padding:0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='track']) .co-toggle-button.co-toggle-button--icon-only{width:34px;padding:0}:host([variant='track']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default);border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default));box-shadow:var(--co-toggle-pill-shadow, var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)))}:host([variant='track']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-semantic-surface-page);border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default))}:host([variant='track'][size='xs']) .co-toggle-button{height:var(--co-toggle-pill-height, 20px);border-radius:var(--co-toggle-pill-radius, var(--co-border-radius-xxs))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected){color:var(--co-semantic-text-default)}:host([variant='track'][size='xs']) .co-toggle-button.co-toggle-button--icon-only{width:20px}:host([variant='track'][size='xs']) .co-toggle-button--selected{box-shadow:var(--co-toggle-pill-shadow, none)}:host([variant='soft']) .co-toggle-button{height:24px;border-radius:var(--co-border-radius-xxs);border-color:transparent;background:var(--co-semantic-surface-control, #f6f6f6);color:var(--co-semantic-text-default);font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-regular);padding:0 calc(var(--co-spacing-sm2) - 1px);gap:var(--co-spacing-sm2);-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='soft']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-control, #f6f6f6)}:host([variant='soft']) .co-toggle-button--selected{background:var(--co-color-celeste-100);color:var(--co-color-primary-azul);border-color:transparent}:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-celeste-100)}`;
+const coToggleButtonCss = () => `:host{display:inline-flex;--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='l']){--co-toggle-button-radius:var(--co-border-radius-lg)}:host([size='m']){--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='s']){--co-toggle-button-radius:var(--co-border-radius-xs)}:host([size='xs']){--co-toggle-button-radius:var(--co-border-radius-xs)}.co-toggle-button{display:inline-flex;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-top-left-radius:var(--co-tbr-tl, var(--co-toggle-button-radius));border-top-right-radius:var(--co-tbr-tr, var(--co-toggle-button-radius));border-bottom-right-radius:var(--co-tbr-br, var(--co-toggle-button-radius));border-bottom-left-radius:var(--co-tbr-bl, var(--co-toggle-button-radius));background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);-webkit-backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-toggle-button-font-size, var(--co-font-size-16))}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-toggle-button-font-size, var(--co-font-size-12))}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-toggle-button-color-selected, var(--co-color-base-blanco, #fff));border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-800, #0a0a0a);border-color:var(--co-color-gray-800, #0a0a0a)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button:focus-visible{outline:2px solid var(--co-semantic-text-default);outline-offset:-3px}.co-toggle-button--selected:focus-visible{outline-color:currentColor}.co-toggle-button__label{line-height:1}@supports not (background: color-mix(in srgb, red, transparent)){.co-toggle-button{background:var(--co-semantic-surface-secondary)}}:host([variant='track']) .co-toggle-button{height:var(--co-toggle-pill-height, 30px);border-radius:var(--co-toggle-pill-radius, 8px);border-color:transparent;background:transparent;color:var(--co-toggle-button-color, var(--co-semantic-text-secondary));box-shadow:none;padding:0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='track']) .co-toggle-button.co-toggle-button--icon-only{width:34px;padding:0}:host([variant='track']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover);color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default));box-shadow:var(--co-toggle-pill-shadow, var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)))}:host([variant='track']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default))}:host([variant='track'][size='xs']) .co-toggle-button{height:var(--co-toggle-pill-height, 20px);border-radius:var(--co-toggle-pill-radius, var(--co-border-radius-xxs))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected){color:var(--co-toggle-button-color, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected):hover:not(:disabled){color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button.co-toggle-button--icon-only{width:20px}:host([variant='track'][size='xs']) .co-toggle-button--selected{box-shadow:var(--co-toggle-pill-shadow, none)}:host([variant='soft']) .co-toggle-button{height:24px;border-radius:var(--co-border-radius-xxs);border-color:transparent;background:var(--co-semantic-surface-control, #f6f6f6);color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-regular);padding:0 calc(var(--co-spacing-sm2) - 1px);gap:var(--co-spacing-sm2);-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='soft']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-control, #f6f6f6)}:host([variant='soft']) .co-toggle-button--selected{background:var(--co-color-celeste-100);color:var(--co-toggle-button-color-selected, var(--co-color-primary-azul));border-color:transparent}:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-celeste-100)}`;
 
 /** Tallas que entiende este botón. El grupo puede traer una fuera de esta
  *  lista (el host usa `<co-toggle-button-group size="sm">`): nunca se adopta. */