@prolibu-suite/cobalt-core 0.11.4 → 0.11.6

package/dist/esm/co-audio-player.entry.js

@@ -51,6 +51,67 @@ function resamplePeaks(channelData, bars) {
     }
     return peaks;
 }
+/**
+ * Resolución de la envolvente que se retiene por grabación, en bloques.
+ *
+ * Las barras EXACTAS del ancho vigente se calculan del PCM antes de soltarlo (ver
+ * `co-audio-player.peaks-cache`); la envolvente solo sirve los anchos que aparecen
+ * DESPUÉS (resize, o una segunda instancia que llega con el caché ya caliente). El
+ * reproductor deriva las barras del ancho (`floor(ancho / barDensity)`, ~853 a
+ * 2560 px), así que la envolvente tiene que ir muy por encima de eso: 65 536 bloques
+ * = ≥ 76 bloques por barra hasta 2560 px, y pesan 256 KB (Float32) frente a ~32 MB
+ * del PCM de 3 min a 44,1 kHz. Medido contra el exacto con PCM sintético de 3 min:
+ * desvío máx. ≈ 1 px de 40 en las barras que difieren (≈ 0,8 px con ruido blanco).
+ */
+const PEAK_ENVELOPE_BINS = 65536;
+/** PCM → envolvente de a lo sumo `maxBins` bloques. Con `length ≤ maxBins` el bloque
+ *  es de 1 muestra y la envolvente ES |PCM| (sin pérdida). */
+function buildPeakEnvelope(channelData, maxBins = PEAK_ENVELOPE_BINS) {
+    const length = channelData.length;
+    const blockSize = Math.max(1, Math.ceil(length / Math.max(1, maxBins)));
+    const bins = Math.ceil(length / blockSize);
+    const peaks = new Float32Array(bins);
+    for (let b = 0; b < bins; b++) {
+        let max = 0;
+        const end = Math.min(length, (b + 1) * blockSize);
+        for (let j = b * blockSize; j < end; j++) {
+            const abs = Math.abs(channelData[j]);
+            if (abs > max)
+                max = abs;
+        }
+        peaks[b] = max;
+    }
+    return { peaks, blockSize, length };
+}
+/**
+ * Las mismas barras que `resamplePeaks(pcm, bars)`, calculadas desde la envolvente:
+ * mismo paso (`floor(length / bars)` muestras), mismo recorte de la cola y misma
+ * fórmula de altura. Cada barra toma el máximo de los bloques que TOCA su rango de
+ * muestras, así que el resultado es IDÉNTICO cuando `blockSize` es 1 o divide el
+ * paso, y en el caso general solo puede sumar el pico de un bloque parcial en cada
+ * borde (nunca queda por debajo del exacto).
+ */
+function resampleEnvelope(env, bars) {
+    const { peaks: blocks, blockSize, length: len } = env;
+    if (!len || bars <= 0)
+        return [];
+    const step = Math.max(1, Math.floor(len / bars));
+    const peaks = [];
+    for (let i = 0; i < bars; i++) {
+        const start = i * step;
+        const end = Math.min(start + step, len); // exclusivo, como el bucle de resamplePeaks
+        let max = 0;
+        if (start < end) {
+            const last = Math.floor((end - 1) / blockSize);
+            for (let b = Math.floor(start / blockSize); b <= last; b++) {
+                if (blocks[b] > max)
+                    max = blocks[b];
+            }
+        }
+        peaks.push(0.12 + max * 0.88);
+    }
+    return peaks;
+}
 /** Deterministic pseudo-waveform (stable render + testable — no Math.random). */
 function fallbackPeaks(bars) {
     if (bars <= 0)
@@ -70,6 +131,105 @@ function scrubFraction(clientX, rect) {
     return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
 }
 
+/** Tope de entradas. Cada una pesa ≤ 256 KB (`PEAK_ENVELOPE_BINS` Float32) más unas
+ *  pocas listas de barras exactas, así que el caché lleno queda en ~4 MB. Una
+ *  instancia montada conserva SU envolvente aunque la entrada se desaloje (es la
+ *  misma referencia, no una copia). */
+const PEAKS_CACHE_MAX = 16;
+// Map conserva el orden de inserción: la primera clave es la menos usada (LRU).
+const cache = new Map();
+const inflight = new Map();
+function remember(url, value) {
+    cache.delete(url);
+    cache.set(url, value);
+    while (cache.size > PEAKS_CACHE_MAX)
+        cache.delete(cache.keys().next().value);
+}
+/**
+ * Picos + duración de `url`: del caché si están, uniéndose a la carga en vuelo si
+ * otra instancia ya la pidió, o cargándolos. Solo se cachea un resultado real: un
+ * error (CORS, red, códec) o un `null` se devuelven tal cual y el próximo pedido
+ * reintenta.
+ */
+function loadAudioPeaks(url, wantBars, loader = decodeAudioPeaks) {
+    const hit = cache.get(url);
+    if (hit) {
+        remember(url, hit); // refresca su posición LRU
+        return Promise.resolve(hit);
+    }
+    const pending = inflight.get(url);
+    if (pending) {
+        if (wantBars)
+            pending.wanted.add(wantBars);
+        return pending.promise;
+    }
+    const wanted = new Set(wantBars ? [wantBars] : []);
+    const p = loader(url, wanted).then((res) => {
+        inflight.delete(url);
+        if (res)
+            remember(url, res);
+        return res;
+    }, (err) => {
+        inflight.delete(url);
+        throw err;
+    });
+    inflight.set(url, { promise: p, wanted });
+    return p;
+}
+/**
+ * Descarga + decode con Web Audio, reducido a la envolvente. El `AudioBuffer`
+ * (y con él el PCM completo) no sale de esta función: queda sin referencias
+ * apenas se calcula la envolvente.
+ */
+async function decodeAudioPeaks(url, wanted = new Set()) {
+    var _a;
+    let ctx;
+    try {
+        /**
+         * `OfflineAudioContext` FIRST, and a live `AudioContext` only as the
+         * fallback: decoding a waveform needs no audio OUTPUT, and a live context
+         * created before the user has interacted trips the browser's autoplay
+         * policy — "The AudioContext was not allowed to start. It must be resumed
+         * (or created) after a user gesture on the page", once per player. A page
+         * with 15 recordings logged it 15 times. The offline one has no output
+         * device, so the policy does not apply to it.
+         *
+         * Its arguments are placeholders: nothing is ever rendered through this
+         * context, it is only the host for `decodeAudioData`.
+         */
+        const OfflineCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+        const Ctx = window.AudioContext || window.webkitAudioContext;
+        if ((!OfflineCtx && !Ctx) || typeof fetch === 'undefined')
+            return null;
+        ctx = OfflineCtx ? new OfflineCtx(1, 1, 44100) : new Ctx();
+        const buf = await (await fetch(url)).arrayBuffer();
+        const audioBuf = await ctx.decodeAudioData(buf);
+        const pcm = audioBuf.getChannelData(0);
+        return { envelope: buildPeakEnvelope(pcm), exact: exactBarsFor(pcm, wanted), duration: audioBuf.duration };
+    }
+    finally {
+        // Always release the context. Chrome caps concurrent AudioContexts per
+        // document, so leaking one per failed decode would eventually stop every
+        // later player on the page from decoding at all. `close()` lives on
+        // AudioContext, not on every BaseAudioContext (an OfflineAudioContext
+        // needs no closing and may not implement it): optional call, not a cast.
+        try {
+            await ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.close) === null || _a === void 0 ? void 0 : _a.call(ctx));
+        }
+        catch ( /* already closed */_b) { /* already closed */ }
+    }
+}
+/** Barras exactas para cada ancho que las instancias en espera quieren ahora mismo. */
+function exactBarsFor(pcm, wanted) {
+    const exact = new Map();
+    for (const want of wanted) {
+        const bars = want();
+        if (bars > 0 && !exact.has(bars))
+            exact.set(bars, resamplePeaks(pcm, bars));
+    }
+    return exact;
+}
+
 const coAudioPlayerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-audio-player{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-sm) var(--co-spacing-md);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);min-width:180px}.co-audio-player--compact{gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-sm);min-width:140px}.co-audio-player__play{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);display:inline-flex;align-items:center;justify-content:center}.co-audio-player--compact .co-audio-player__play{width:24px;height:24px}.co-audio-player__play:disabled{opacity:.5;cursor:not-allowed}.co-audio-player__play:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player__wave{flex:1;height:40px;min-width:0;cursor:pointer;display:flex;align-items:center}.co-audio-player__wave:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__svg{width:100%;height:100%;display:block}.co-audio-player__bar{fill:var(--co-semantic-border-field);transition:fill var(--co-motion-duration-fast)}.co-audio-player__wave:hover .co-audio-player__bar{fill:var(--co-semantic-text-muted)}.co-audio-player__bar--played{fill:var(--co-semantic-surface-primary)}.co-audio-player__time{flex:0 0 auto;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}.co-audio-player__speed{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px 4px;color:var(--co-semantic-text-muted);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}.co-audio-player__speed:hover{color:var(--co-semantic-text-default)}.co-audio-player__speed:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__dl{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px;color:var(--co-semantic-text-muted);display:inline-flex}.co-audio-player__dl:hover{color:var(--co-semantic-text-default)}.co-audio-player__dl:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player--error .co-audio-player__wave{opacity:.5}.co-audio-player--error .co-audio-player__play{background:var(--co-color-status-error);color:var(--co-semantic-text-inverse);opacity:1}`;
 
 const CoAudioPlayer = class {
@@ -108,8 +268,15 @@ const CoAudioPlayer = class {
         this.containerWidth = 0;
         /** Current playback rate; the speed control cycles through `SPEEDS`. */
         this.playbackRate = 1;
-        // Decoded mono PCM, kept so bars can be re-resampled on resize without re-fetching.
-        this.rawChannelData = null;
+        // Envolvente acotada del decode (≤ PEAK_ENVELOPE_BINS máximos por bloque), para
+        // re-derivar las barras al redimensionar sin volver a descargar. NUNCA el PCM
+        // completo: ese pesaba ~32 MB por 3 min de audio y por instancia. La envolvente es
+        // la misma referencia que guarda el caché de módulo (compartida, no copiada).
+        this.peakEnvelope = null;
+        // Barras exactas (del PCM, calculadas dentro del decode) para los anchos que esta
+        // instancia —u otra con la misma src— tenía mientras el decode estaba en vuelo.
+        // Un ancho que no esté acá sale de la envolvente.
+        this.exactPeaks = null;
         // Length reported by the WebAudio decode; NaN when nothing has decoded (yet).
         // It is the only trustworthy duration for a container without a duration header.
         this.decodedDuration = NaN;
@@ -238,17 +405,22 @@ const CoAudioPlayer = class {
         this.resizeObserver = undefined;
     }
     onSrcChange() { this.init(); }
-    // Re-derive bars for the current width: from cached PCM if decoded, else the
+    // Re-derive bars for the current width: from the decoded envelope if any, else the
     // deterministic fallback shape. Reassign the array so Stencil re-renders.
     rebuildBars() {
-        this.peaks = this.rawChannelData
-            ? resamplePeaks(this.rawChannelData, this.effectiveBars)
+        this.peaks = this.peakEnvelope
+            ? this.decodedBars(this.effectiveBars)
             : fallbackPeaks(this.effectiveBars);
     }
+    decodedBars(bars) {
+        var _a, _b;
+        return (_b = (_a = this.exactPeaks) === null || _a === void 0 ? void 0 : _a.get(bars)) !== null && _b !== void 0 ? _b : resampleEnvelope(this.peakEnvelope, bars);
+    }
     init() {
         this.teardown();
         const token = ++this.loadToken;
-        this.rawChannelData = null;
+        this.peakEnvelope = null;
+        this.exactPeaks = null;
         this.decodedDuration = NaN;
         this.peaks = fallbackPeaks(this.effectiveBars); // draw immediately; refine with real peaks
         this.currentTime = 0;
@@ -287,56 +459,36 @@ const CoAudioPlayer = class {
         }
         this.isPlaying = false;
     }
+    /**
+     * Picos + duración del decode, vía el caché de módulo (`co-audio-player.peaks-cache`):
+     * dos instancias con la misma `src` comparten UNA descarga y UN decode, y lo que
+     * vuelve es la envolvente acotada, no el PCM.
+     */
     async extractPeaks(url, token) {
-        var _a;
-        let ctx;
         try {
-            /**
-             * `OfflineAudioContext` FIRST, and a live `AudioContext` only as the
-             * fallback: decoding a waveform needs no audio OUTPUT, and a live context
-             * created before the user has interacted trips the browser's autoplay
-             * policy — "The AudioContext was not allowed to start. It must be resumed
-             * (or created) after a user gesture on the page", once per player. A page
-             * with 15 recordings logged it 15 times. The offline one has no output
-             * device, so the policy does not apply to it.
-             *
-             * Its arguments are placeholders: nothing is ever rendered through this
-             * context, it is only the host for `decodeAudioData`.
-             */
-            const OfflineCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
-            const Ctx = window.AudioContext || window.webkitAudioContext;
-            if ((!OfflineCtx && !Ctx) || typeof fetch === 'undefined')
-                return; // keep fallback
-            ctx = OfflineCtx ? new OfflineCtx(1, 1, 44100) : new Ctx();
-            const buf = await (await fetch(url)).arrayBuffer();
-            const audioBuf = await ctx.decodeAudioData(buf);
+            // El ancho se consulta al TERMINAR el decode (no ahora: acá todavía no se midió);
+            // 0 si esta carga ya no es la vigente, para no pagar barras que nadie pinta.
+            const res = await loadAudioPeaks(url, () => (token === this.loadToken ? this.effectiveBars : 0));
             if (token !== this.loadToken)
                 return; // a newer src superseded this decode
-            this.rawChannelData = audioBuf.getChannelData(0);
-            this.decodedDuration = audioBuf.duration;
-            this.peaks = resamplePeaks(this.rawChannelData, this.effectiveBars);
+            if (!res)
+                return; // no WebAudio/fetch here: keep the fallback
+            this.peakEnvelope = res.envelope;
+            this.exactPeaks = res.exact;
+            this.decodedDuration = res.duration;
+            this.peaks = this.decodedBars(this.effectiveBars);
         }
-        catch (_b) {
+        catch (_a) {
             if (token !== this.loadToken)
                 return;
             // Undecodable (codec WebAudio can't handle, CORS, network): keep the
             // deterministic fallback wave and let <audio> own the duration — playback,
             // seek and the time readout all still work, or degrade to `--:--`.
-            this.rawChannelData = null;
+            this.peakEnvelope = null;
+            this.exactPeaks = null;
             this.decodedDuration = NaN;
             this.peaks = fallbackPeaks(this.effectiveBars); // stays functional
         }
-        finally {
-            // Always release the context. Chrome caps concurrent AudioContexts per
-            // document, so leaking one per failed decode would eventually stop every
-            // later player on the page from decoding at all. `close()` lives on
-            // AudioContext, not on every BaseAudioContext (an OfflineAudioContext
-            // needs no closing and may not implement it): optional call, not a cast.
-            try {
-                await ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.close) === null || _a === void 0 ? void 0 : _a.call(ctx));
-            }
-            catch ( /* already closed */_c) { /* already closed */ }
-        }
         if (token === this.loadToken)
             this.syncDuration();
     }
@@ -417,13 +569,13 @@ const CoAudioPlayer = class {
         // below `aria-valuenow` the moment playback advances. ARIA 1.2 makes valuemax
         // optional for `slider`, so leaving it off while unknown is well-formed.
         const ariaMax = total ? Math.floor(total) : undefined;
-        const bar = (hFrac, i, played = false) => (h("rect", { key: '4b294190b3be5e7cf15282d43e7e51164a3dda4c', x: i * UNIT, y: H / 2 - (hFrac * H) / 2, width: W, height: Math.max(hFrac * H, 2), rx: R, class: { 'co-audio-player__bar': true, 'co-audio-player__bar--played': played } }));
-        return (h("div", { key: '0758a438c4a71e822de94f8b41219945f62ae62d', class: {
+        const bar = (hFrac, i, played = false) => (h("rect", { key: 'a3d5a225a904e22ba9905ef8198fa7e1b14e0e2f', x: i * UNIT, y: H / 2 - (hFrac * H) / 2, width: W, height: Math.max(hFrac * H, 2), rx: R, class: { 'co-audio-player__bar': true, 'co-audio-player__bar--played': played } }));
+        return (h("div", { key: 'afbbf524713a1146653e69928ee21e263202315f', class: {
                 'co-audio-player': true,
                 'co-audio-player--compact': this.compact,
                 'co-audio-player--error': this.hasError,
                 'co-audio-player--playing': this.isPlaying,
-            }, part: "player" }, h("button", { key: '4c4161e7ba7344a9c6a32dcc8fd92c300b750d95', type: "button", class: "co-audio-player__play", part: "play", "aria-label": this.hasError ? 'Audio no disponible' : this.isPlaying ? 'Pausar' : 'Reproducir', "aria-busy": this.isLoading ? 'true' : 'false', disabled: this.hasError || !this.src, onClick: this.toggle }, h("co-icon", { key: 'ea749ee1cf627a49e3859029ca274170c8d69c63', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: 'f39bf8bf114860a672979fa53287672dccea1b7f', class: "co-audio-player__wave", part: "wave", role: "slider", tabindex: "0", "aria-label": "Progreso de reproducci\u00F3n", "aria-valuemin": 0, "aria-valuemax": ariaMax, "aria-valuenow": Math.floor(this.currentTime), ref: (el) => (this.waveEl = el), onClick: (e) => this.seekAt(e.clientX), onKeyDown: this.onWaveKey }, h("svg", { key: '2145f303271ca676988999b5ea7d76ab384c5e2d', class: "co-audio-player__svg", viewBox: `0 0 ${vbW} ${H}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.peaks.map((hFrac, i) => bar(hFrac, i)), h("clipPath", { key: '6014c9f96f5df60086265a5e01344be80ebff741', id: "co-ap-clip" }, h("rect", { key: '5857fa3098fc0eb9df58b643c2b44316cf819ae8', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '241608ddfdb863ba5b18444ed2bffb39e72abeb5', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: '18f190b8b23f8939da5dd2c230214d42a5b330c1', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: '4a29cae938ab347997bc76e0cfe5621b402730f7', type: "button", class: "co-audio-player__speed", part: "speed", "aria-label": `Velocidad de reproducción ${this.playbackRate}x`, onClick: this.cycleSpeed }, this.playbackRate, "x")), !this.compact && !this.noDownload && (h("button", { key: 'c451449e629584bc3937b27b31b1124e510af91e', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'f4d014129829ab57ddae0d3e32b1e0930f1bc288', name: "download-simple", size: 14 })))));
+            }, part: "player" }, h("button", { key: '5918385fbd8fb6fad4795e1a75eed5d073e0654c', type: "button", class: "co-audio-player__play", part: "play", "aria-label": this.hasError ? 'Audio no disponible' : this.isPlaying ? 'Pausar' : 'Reproducir', "aria-busy": this.isLoading ? 'true' : 'false', disabled: this.hasError || !this.src, onClick: this.toggle }, h("co-icon", { key: 'e7a566257df253914593712bd20029bb8f1bcdfd', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: '70488015726d0c966fa3e738d9f2893d71b99ebf', class: "co-audio-player__wave", part: "wave", role: "slider", tabindex: "0", "aria-label": "Progreso de reproducci\u00F3n", "aria-valuemin": 0, "aria-valuemax": ariaMax, "aria-valuenow": Math.floor(this.currentTime), ref: (el) => (this.waveEl = el), onClick: (e) => this.seekAt(e.clientX), onKeyDown: this.onWaveKey }, h("svg", { key: '8c70e4f74537e5f8ab6f66bc0da464a72507e81c', class: "co-audio-player__svg", viewBox: `0 0 ${vbW} ${H}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.peaks.map((hFrac, i) => bar(hFrac, i)), h("clipPath", { key: 'f0d37d76b3d6ab09dbd09582c8657b3fe7cb8c4c', id: "co-ap-clip" }, h("rect", { key: '436de0ce10f98c868760c76505d134f3db2dbb54', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '939a1a8851d6e41b4d3c37d7201f87a6403830bb', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: 'bd57bdd97a780864aa633ec5174d4f733799a278', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: 'd1f559546da0b0f97009afca79fe922ce569e67f', type: "button", class: "co-audio-player__speed", part: "speed", "aria-label": `Velocidad de reproducción ${this.playbackRate}x`, onClick: this.cycleSpeed }, this.playbackRate, "x")), !this.compact && !this.noDownload && (h("button", { key: 'a1503b85bb2edf02566dcad9b8e83b1fea20b159', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'dc96b8afdb8036e76a0c515d76c625460f4fc44d', name: "download-simple", size: 14 })))));
     }
     static get watchers() { return {
         "src": [{

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

@@ -179,7 +179,7 @@ const CoKbd = class {
 };
 CoKbd.style = coKbdCss();
 
-const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;text-transform:none;letter-spacing:var(--co-font-letter-spacing-body, normal);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--closing{visibility:visible;opacity:0;transition:opacity var(--co-motion-duration-instant) var(--co-motion-ease-in),     transform var(--co-motion-duration-instant) var(--co-motion-ease-in)}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}.co-tooltip__panel--label{padding:4px 8px;border-radius:var(--co-border-radius-xs, 8px);font-weight:var(--co-font-weight-medium, 500);line-height:1;box-shadow:none}.co-tooltip__panel--label .co-tooltip__arrow{display:none}.co-tooltip__panel--with-shortcut{display:flex;align-items:center;gap:6px}.co-tooltip__panel--with-shortcut:not(.co-tooltip__panel--label){padding-right:10px;}.co-tooltip__panel--label.co-tooltip__panel--with-shortcut{padding-right:4px}`;
+const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;--co-tooltip-surface:var(--co-color-base-negro, #1f1c1b);background:var(--co-tooltip-surface);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;text-transform:none;letter-spacing:var(--co-font-letter-spacing-body, normal);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--closing{visibility:visible;opacity:0;transition:opacity var(--co-motion-duration-instant) var(--co-motion-ease-in),     transform var(--co-motion-duration-instant) var(--co-motion-ease-in)}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-tooltip-surface);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-tooltip-surface);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-tooltip-surface);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-tooltip-surface);border-left:none}.co-tooltip__panel--tone-error{--co-tooltip-surface:var(--co-semantic-status-error, #aa2e1b)}.co-tooltip__content{display:block}.co-tooltip__panel--label{padding:4px 8px;border-radius:var(--co-border-radius-xs, 8px);font-weight:var(--co-font-weight-medium, 500);line-height:1;box-shadow:none}.co-tooltip__panel--label .co-tooltip__arrow{display:none}.co-tooltip__panel--with-shortcut{display:flex;align-items:center;gap:6px}.co-tooltip__panel--with-shortcut:not(.co-tooltip__panel--label){padding-right:10px;}.co-tooltip__panel--label.co-tooltip__panel--with-shortcut{padding-right:4px}`;
 
 const CoTooltip = class {
     constructor(hostRef) {
@@ -214,6 +214,12 @@ const CoTooltip = class {
          * arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
          */
         this.variant = 'default';
+        /**
+         * Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error`
+         * surface with white text, for a record/state warning (e.g. "Inactive").
+         * Independent of `variant`.
+         */
+        this.tone = 'default';
         // ── State ──────────────────────────────────────────────────
         this.visible = false;
         this.actualPlacement = 'top';
@@ -445,11 +451,12 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '816e80ee775d782c3827fb3ba43187992e348429', class: "co-tooltip" }, h("div", { key: 'd4d3b56ae5502ccc4fc5c30c5191860ebef51140', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '357ff69bca524ce8c5f3ec21936fef944733cd22' })), (this.visible || this.closing) && this.content && (h("div", { key: '7d379c2ddafa6e84fbe5d5a4d3e9192a3ddfac87', id: "tooltip-panel", class: {
+        return (h("div", { key: '53c8dbd21619fd8caa4105b86b4b1765c2361252', class: "co-tooltip" }, h("div", { key: 'f9e5e3b352b37c69a67538c6db3d10f9fc945976', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '067ac53e5b491c7990acfa7c236ae2090a6657fc' })), (this.visible || this.closing) && this.content && (h("div", { key: '42436edfbd802bfd8c23dea5b8cfdd290fa150c7', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
                 'co-tooltip__panel--closing': this.closing,
                 'co-tooltip__panel--label': this.variant === 'label',
+                'co-tooltip__panel--tone-error': this.tone === 'error',
                 'co-tooltip__panel--with-shortcut': !!this.shortcut,
             }, role: "tooltip", popover: "manual", part: "panel", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
@@ -457,7 +464,7 @@ const CoTooltip = class {
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '0898aa009807ee6d48cdb01a5db9f4ef773804b9', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '07678a78b9fdf0955c54d4dc2c491e5205e7937d', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '24aa138140da114eed006f3488dc6cbc105ccee3', keys: this.shortcut, surface: "dark", size: "xs" })))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '7520aaa3245fea55a7fcac31f33c56247b1fb5d8', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'd3797d1c3a31c64cb30d4d8f448204e3a9f8c017', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '01354b1fd110de3000d48ad9eaef0e3329a64e48', keys: this.shortcut, surface: "dark", size: "xs" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {