@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

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

@@ -0,0 +1,277 @@
+import { r as registerInstance, c as createEvent, h } from './index-BCEz3S-z.js';
+
+/** Seconds → "m:ss" (floors; 0 for NaN/negative). */
+function formatTime(seconds) {
+    const s = Math.max(0, Math.floor(seconds || 0));
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m}:${sec.toString().padStart(2, '0')}`;
+}
+/** Downsample raw PCM to `bars` peak heights, each normalized to a 0..1 fraction. */
+function resamplePeaks(channelData, bars) {
+    const len = channelData.length;
+    if (!len || bars <= 0)
+        return [];
+    const step = Math.max(1, Math.floor(len / bars));
+    const peaks = [];
+    for (let i = 0; i < bars; i++) {
+        let max = 0;
+        const start = i * step;
+        for (let j = start; j < start + step && j < len; j++) {
+            const abs = Math.abs(channelData[j]);
+            if (abs > max)
+                max = abs;
+        }
+        peaks.push(0.12 + max * 0.88); // floor of 0.12 so silent buckets still show a sliver
+    }
+    return peaks;
+}
+/** Deterministic pseudo-waveform (stable render + testable — no Math.random). */
+function fallbackPeaks(bars) {
+    if (bars <= 0)
+        return [];
+    const peaks = [];
+    for (let i = 0; i < bars; i++) {
+        const envelope = Math.sin((i / Math.max(1, bars)) * Math.PI) * 0.6 + 0.3;
+        const wobble = 0.75 + 0.25 * Math.abs(Math.sin(i * 1.7));
+        peaks.push(0.12 + envelope * wobble * 0.88);
+    }
+    return peaks;
+}
+/** Clamped 0..1 position of a click within a track rect. */
+function scrubFraction(clientX, rect) {
+    if (!rect.width)
+        return 0;
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+}
+
+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 .15s}.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}@media (prefers-reduced-motion: reduce){.co-audio-player__bar{transition:none}}`;
+
+const CoAudioPlayer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coPlay = createEvent(this, "coPlay", 7);
+        this.coPause = createEvent(this, "coPause", 7);
+        this.coEnded = createEvent(this, "coEnded", 7);
+        this.coError = createEvent(this, "coError", 7);
+        /** Compact variant: narrower, hides the download button. */
+        this.compact = false;
+        /** Fallback bar count used before the container width is measured. Once
+         *  measured, the real bar count is derived from the width via `barDensity`
+         *  (V1 parity: a dense, detail-rich waveform rather than a fixed count). */
+        this.bars = 64;
+        /** Pixels per waveform bar (bar + gap). Lower = denser/more detailed, like V1
+         *  (`SkAudioPlayer` used 3). The measured bar count = floor(width / barDensity). */
+        this.barDensity = 3;
+        /** Passthrough to the underlying <audio> preload. */
+        this.preload = 'metadata';
+        /** Filename for the download button. */
+        this.downloadFilename = 'audio';
+        /** Hide the download button even in full mode. */
+        this.noDownload = false;
+        this.isPlaying = false;
+        this.isLoading = false;
+        this.hasError = false;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.peaks = [];
+        /** Measured wave width (px); 0 until the ResizeObserver reports it. */
+        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;
+        this.onMeta = () => { var _a; this.duration = ((_a = this.audio) === null || _a === void 0 ? void 0 : _a.duration) || 0; };
+        this.onCanPlay = () => { this.isLoading = false; };
+        this.onWaiting = () => { this.isLoading = true; };
+        this.onTime = () => { var _a; this.currentTime = ((_a = this.audio) === null || _a === void 0 ? void 0 : _a.currentTime) || 0; };
+        this.onEnded = () => { this.isPlaying = false; this.currentTime = 0; this.coEnded.emit(); };
+        this.onErr = (e) => { this.isLoading = false; this.hasError = true; this.coError.emit(e); };
+        this.toggle = () => {
+            if (!this.audio || this.hasError)
+                return;
+            if (this.isPlaying) {
+                this.audio.pause();
+                this.isPlaying = false;
+                this.coPause.emit();
+            }
+            else {
+                this.audio.play().then(() => { this.isPlaying = true; this.coPlay.emit(); }).catch(() => { });
+            }
+        };
+        // Playback-speed cycle (V1 SkAudioPlayer parity): the label shows the current
+        // rate and clicking it advances to the next.
+        this.SPEEDS = [1, 1.5, 2, 0.5];
+        this.cycleSpeed = () => {
+            const i = this.SPEEDS.indexOf(this.playbackRate);
+            this.playbackRate = this.SPEEDS[(i + 1) % this.SPEEDS.length];
+            if (this.audio)
+                this.audio.playbackRate = this.playbackRate;
+        };
+        this.seekAt = (clientX) => {
+            if (!this.audio || !this.waveEl || !this.duration)
+                return;
+            const frac = scrubFraction(clientX, this.waveEl.getBoundingClientRect());
+            this.audio.currentTime = frac * this.duration;
+            this.currentTime = this.audio.currentTime;
+        };
+        this.onWaveKey = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.toggle();
+                return;
+            }
+            if (!this.audio || !this.duration)
+                return;
+            if (e.key === 'ArrowRight')
+                this.audio.currentTime = Math.min(this.duration, this.audio.currentTime + 5);
+            else if (e.key === 'ArrowLeft')
+                this.audio.currentTime = Math.max(0, this.audio.currentTime - 5);
+            else
+                return;
+            this.currentTime = this.audio.currentTime;
+        };
+    }
+    /** Bar count: derived from the measured width (V1-style density) once known,
+     *  else the `bars` fallback. Floored at 24 so a narrow player still reads as a wave. */
+    get effectiveBars() {
+        return this.containerWidth > 0
+            ? Math.max(24, Math.floor(this.containerWidth / this.barDensity))
+            : this.bars;
+    }
+    // componentWillLoad (not componentDidLoad) so `init()` seeds @State before the
+    // FIRST render pass. Under @stencil/vitest's test-bundle transform, class-field
+    // defaults for @Prop/@State are not seeded on the element ahead of render (see
+    // the co-tab-group.spec.tsx comment on this repo's harness gap) — running before
+    // the first render, not after, is what keeps this.peaks/duration/etc. defined.
+    componentWillLoad() { this.init(); }
+    // Measure the wave width so the bar count tracks it (V1 density). The wave
+    // element exists only after the first render, hence componentDidLoad.
+    componentDidLoad() {
+        if (typeof ResizeObserver === 'undefined' || !this.waveEl)
+            return;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            var _a;
+            for (const entry of entries) {
+                const w = ((_a = entry.contentRect) === null || _a === void 0 ? void 0 : _a.width) || entry.target.clientWidth || 0;
+                if (w > 2 && Math.abs(w - this.containerWidth) > 2) {
+                    this.containerWidth = w;
+                    this.rebuildBars();
+                }
+            }
+        });
+        this.resizeObserver.observe(this.waveEl);
+        const w0 = this.waveEl.clientWidth || 0;
+        if (w0 > 2) {
+            this.containerWidth = w0;
+            this.rebuildBars();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        this.teardown();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    onSrcChange() { this.init(); }
+    // Re-derive bars for the current width: from cached PCM if decoded, else the
+    // deterministic fallback shape. Reassign the array so Stencil re-renders.
+    rebuildBars() {
+        this.peaks = this.rawChannelData
+            ? resamplePeaks(this.rawChannelData, this.effectiveBars)
+            : fallbackPeaks(this.effectiveBars);
+    }
+    init() {
+        this.teardown();
+        this.rawChannelData = null;
+        this.peaks = fallbackPeaks(this.effectiveBars); // draw immediately; refine with real peaks
+        this.currentTime = 0;
+        this.duration = 0;
+        this.playbackRate = 1; // a fresh source starts at 1x (new <audio> defaults to 1)
+        this.hasError = false;
+        if (!this.src)
+            return;
+        this.isLoading = true;
+        this.extractPeaks(this.src);
+        if (typeof Audio === 'undefined')
+            return; // test/SSR guard
+        const el = new Audio();
+        el.preload = this.preload;
+        el.crossOrigin = 'anonymous';
+        el.src = this.src;
+        el.addEventListener('loadedmetadata', this.onMeta);
+        el.addEventListener('timeupdate', this.onTime);
+        el.addEventListener('ended', this.onEnded);
+        el.addEventListener('error', this.onErr);
+        el.addEventListener('canplay', this.onCanPlay);
+        el.addEventListener('waiting', this.onWaiting);
+        this.audio = el;
+    }
+    teardown() {
+        if (this.audio) {
+            this.audio.pause();
+            this.audio.removeEventListener('loadedmetadata', this.onMeta);
+            this.audio.removeEventListener('timeupdate', this.onTime);
+            this.audio.removeEventListener('ended', this.onEnded);
+            this.audio.removeEventListener('error', this.onErr);
+            this.audio.removeEventListener('canplay', this.onCanPlay);
+            this.audio.removeEventListener('waiting', this.onWaiting);
+            this.audio.src = '';
+            this.audio = undefined;
+        }
+        this.isPlaying = false;
+    }
+    async extractPeaks(url) {
+        try {
+            const Ctx = window.AudioContext || window.webkitAudioContext;
+            if (!Ctx || typeof fetch === 'undefined')
+                return; // keep fallback
+            const ctx = new Ctx();
+            const buf = await (await fetch(url)).arrayBuffer();
+            const audioBuf = await ctx.decodeAudioData(buf);
+            this.rawChannelData = audioBuf.getChannelData(0);
+            this.peaks = resamplePeaks(this.rawChannelData, this.effectiveBars);
+            ctx.close();
+        }
+        catch (_a) {
+            this.rawChannelData = null;
+            this.peaks = fallbackPeaks(this.effectiveBars); // stays functional
+        }
+    }
+    async download() {
+        if (!this.src || typeof fetch === 'undefined')
+            return;
+        try {
+            const blob = await (await fetch(this.src)).blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = this.downloadFilename;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    render() {
+        const H = 40, UNIT = 3, W = 1.8, R = 0.6;
+        const vbW = Math.max(1, this.peaks.length * UNIT);
+        const pct = this.duration ? (this.currentTime / this.duration) * 100 : 0;
+        const bar = (hFrac, i, played = false) => (h("rect", { key: 'ffe5ce97626e52c12e60b953b62d237f14acb582', 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: '012710aded6ca183e80d7fde087cb0fdf413249b', 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: '2505b88e97e73fd39aa31e3dad5e7fe0c1b94c80', 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: 'e0e0d2dd5f6e0578ba80a3c235e5c221a6e8fe21', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: 'd2b32119c69c64d2f68d469fe4ae056780446322', class: "co-audio-player__wave", part: "wave", role: "slider", tabindex: "0", "aria-label": "Progreso de reproducci\u00F3n", "aria-valuemin": 0, "aria-valuemax": Math.floor(this.duration), "aria-valuenow": Math.floor(this.currentTime), ref: (el) => (this.waveEl = el), onClick: (e) => this.seekAt(e.clientX), onKeyDown: this.onWaveKey }, h("svg", { key: 'fb9643df152d2d0b119580954f639cb3a9c2cd66', 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: 'c2901cfe7c7e910bd53c8c92894b2d2395cde270', id: "co-ap-clip" }, h("rect", { key: '8129a85201e09ba6646b08ed0075798b0a0b0dfc', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '69bc1780122d48f1a545d1c59bf7ed6536285ed2', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: '3747622619bd81545f85e7eb2f9c19b1aca6e7c2', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: '84341856fb2e0b6a094c673a727370b148190e30', 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: 'd6767d185317f20299b40c4050a806d88165682f', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'a0f0a09cdf705ecf15e0156cf93011f89f41ffa5', name: "download-simple", size: 14 })))));
+    }
+    static get watchers() { return {
+        "src": [{
+                "onSrcChange": 0
+            }]
+    }; }
+};
+CoAudioPlayer.style = coAudioPlayerCss();
+
+export { CoAudioPlayer as co_audio_player };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as getElement } from './index-BCEz3S-z.js';
-import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-C2mZ7x_Y.js';
+import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-BMdapAL8.js';
 
 /**
  * Shared color utilities for Cobalt components.
@@ -309,7 +309,7 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: 'e51e866b88dc6b36ef797c4ea8694bd5ba1ca352', class: "co-tooltip" }, h("div", { key: '711f7b0804b4fe283b2ce8eb45846d00c9d51022', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '655c2ccfbab1ab99ed91e93bae26782ead9b2e17' })), this.visible && this.content && (h("div", { key: '7ce0ad2c565285aaf25810151ecfea1f74657c5a', id: "tooltip-panel", class: {
+        return (h("div", { key: '8ab4d7116108f417bbab303c915ddb3c043f6a17', class: "co-tooltip" }, h("div", { key: '8706169462a807aacfb9c3ec102e51d35749ac4a', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: 'd24dca7da5d8d25e6bb153fd224f3a2dbe15c2bd' })), this.visible && this.content && (h("div", { key: '7b1b9e5629d57f54345889f6b79f0cd40957d916', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
             }, role: "tooltip", popover: "manual", ref: (el) => {
@@ -318,7 +318,7 @@ const CoTooltip = class {
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'd752ed1a61541a006b24142219b9e296a9c8b062', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'b073b093fae892708c9d5a1dfb84cf9071b3cc5c', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'a2bb874fff12aba894ae13fb3cfddb6e5c2558c5', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '429590eda59470e35fc9dd005a97fb53af39c9e2', class: "co-tooltip__content" }, this.content)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -14,7 +14,7 @@ const CoBadge = class {
         this.color = 'default';
     }
     render() {
-        return (h("span", { key: '7c3421c8ace895670435fc85850877a5b38771de', class: {
+        return (h("span", { key: 'f0a6e6e5bd63a5ce3ffac291312880ab7baad1be', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/esm/co-bottom-sheet.entry.js

@@ -303,13 +303,13 @@ const CoBottomSheet = class {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: 'ccd802fd80f14dfa7b2e3998d1ae1936db0a03b1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '6838b998e719fc99ab35f87fa250986d1eeb60a1', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'd621eac2f34e19a6a2c0fc91e13b17ea832b5c83', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: '2c304cb9f8ed0672327dcc6d638b2d849d6774c6', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '0210a476819c8938bb8c075305a27744b87f0ef9', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '6daf41852652d8edd478c22a24444d3b040e8799', class: {
+        return (h("div", { key: 'ba3db3d99801b70af3d5adc93c83868e2b2df3e2', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '1003cdf6554d5594a3cd6ce51850cf767e76f5e2', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '8474a75c0b2bcf05e91f56274bbeef93e471b28f', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a0c45bd9389353b7c28a85cf02002e417e9295cd', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '36251f7b8031cb20ac95b9b8f674d094a5240789', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f6533a7ed9bf8985cf3712f6587fd129557aed75', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: 'a94f197b04d719b5a7b1a542872f0dd2bed5dfea', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '800ffa106c145984ff78871a74f92156df05976c', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '36642b98971f32641b72066689f0f773854e2fcc', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '8a4977dc85e78cd9d27ff6a2ce40841267592341' })), h("footer", { key: '70217d27c09544adc56e751163033e25d5d72e69', class: {
+            }, part: "header" }, h("slot", { key: 'b7061e6c4d48b1a221805962ab55153e06edecf7', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '8180cb9cc8e1c234475cc02d7fdab3bc94fa7f31', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'e8094b7c7c0919b0cc724404b2c97c4c18b031c9', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '0b9271b2ad92c1a8f7bcfde66955ceb026b0fffd' })), h("footer", { key: '016e2c9974dc2a1c88aacfd0d5a7a6b6e10f1033', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: '6aa16a159e2161c491015ae0c88c542506f632a2', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: '5d571808b9b49eca346b7ce30525cab841b3ff4a', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-breadcrumb-item.entry.js

@@ -23,10 +23,10 @@ const CoBreadcrumbItem = class {
         };
     }
     render() {
-        return (h(Host, { key: 'e7eea637e057de29afed6c742df7c2576781391d', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '16deecfc675429362263d3afb7257025e9170b26', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '241fe723b758d9daabfd53f676998e0d2abceac8', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: 'a6e4c54dfecbb25f6e1b1377d3a9b10fb7abdd73', name: this.separator, size: 13 })), h("span", { key: 'a8c960f9e45681520f2e6ad9c80343701219211d', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '8f585b1d2c212c5820aad49deee512fcf11fb7f2', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: '8c3b5eae1e0459fe9184973e1fb097f849ebd2eb', name: this.icon, size: 16 }))), h("span", { key: '30892098c3b834213fbab6fa49ce2a87a24a0096', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'fa8d5d15b3773fcc085eeb932b6dcc154aed5829' })))));
+            } }, h("span", { key: '795723b3d89d48356ffe8f9a35df63d9d5dea836', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: 'a1bc3a756d0b2ead8a9f150f60688ae19f46cae0', name: this.separator, size: 13 })), h("span", { key: '6dada7bc4a556af7f3b9dc63d2b2d001c13e173e', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '63424dc201114b2a589559ee10324ee4cc9cc305', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'be25f19369d9f6d0459acd255793782c1580256e', name: this.icon, size: 16 }))), h("span", { key: 'e8f0919b4ab1ba60ae632ccd21e3f353b04deac7', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '0ac8d7d59e7828f939f637ef73ab7787a5c820d8' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -37,7 +37,7 @@ const CoBreadcrumb = class {
     }
     render() {
         const data = this.parseItems();
-        return (h(Host, { key: 'a673dfd80990deed0263168a4dc9cac5029e4956', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: '8ab383589f78948c7f11d38d4e25fa5509a56dbc', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
             ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
             : h("slot", { onSlotchange: this.handleSlotChange })));
     }

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

@@ -14,12 +14,12 @@ const CoButtonGroup = class {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '420d7fa2d9322ef3ec77e87343367f05a0de3d17', class: {
+        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'ede5ab0f16e003619e2aa51945c748bbe7414523' })));
+            }, role: "group" }, h("slot", { key: 'c583ee5dd23aceea08c3178b93b6f1227101e96e' })));
     }
 };
 CoButtonGroup.style = coButtonGroupCss();

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as getElement } from './index-BCEz3S-z.js';
 
-const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-button--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-button--secondary{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);color:var(--co-semantic-on-secondary);border-color:var(--co-semantic-border-subtle)}.co-button--stroke{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger{background:var(--co-semantic-status-error);color:var(--co-color-base-blanco);border-color:transparent}.co-button--success{background:var(--co-semantic-status-success);color:var(--co-color-base-blanco);border-color:transparent}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover) 60%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-button--danger:hover:not(:disabled),.co-button--success:hover:not(:disabled){opacity:0.88}.co-button--secondary.co-button--elevated{box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8)}.co-button--ghost.co-button--surface-dark,.co-button--stroke.co-button--surface-dark{color:var(--co-color-base-blanco, #fff)}.co-button--ghost.co-button--surface-dark:hover:not(:disabled),.co-button--stroke.co-button--surface-dark:hover:not(:disabled){background:var(--co-color-opacity-blanco-16);-webkit-backdrop-filter:none;backdrop-filter:none}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-button--primary{background:var(--co-semantic-surface-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary)}.co-button--stroke{background:transparent}}`;
+const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-button--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-button--secondary{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);color:var(--co-semantic-on-secondary);border-color:var(--co-semantic-border-subtle)}.co-button--stroke{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger{background:var(--co-semantic-status-error);color:var(--co-color-base-blanco);border-color:transparent}.co-button--success{background:var(--co-semantic-status-success);color:var(--co-color-base-blanco);border-color:transparent}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover) 60%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-button--danger:hover:not(:disabled),.co-button--success:hover:not(:disabled){opacity:0.88}.co-button--secondary.co-button--elevated{box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8)}.co-button--ghost.co-button--surface-dark,.co-button--stroke.co-button--surface-dark{color:var(--co-color-base-blanco, #fff)}.co-button--ghost.co-button--surface-dark:hover:not(:disabled),.co-button--stroke.co-button--surface-dark:hover:not(:disabled){background:var(--co-color-opacity-blanco-16);-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger.co-button--surface-dark:hover:not(:disabled){opacity:1;background:color-mix(in srgb, var(--co-semantic-status-error) 84%, var(--co-color-base-blanco, #fff))}.co-button--danger.co-button--surface-dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-button--primary{background:var(--co-semantic-surface-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary)}.co-button--stroke{background:transparent}}`;
 
 const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14 };
 const CoButton = class {
@@ -14,7 +14,14 @@ const CoButton = class {
         this.size = 'm';
         /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
         this.elevated = false;
-        /** Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover. */
+        /**
+         * Surface the button sits on. On "dark", ghost/stroke variants switch to
+         * white ink + blanco-16 hover; danger keeps its solid error fill but swaps
+         * the fade-hover for a lighten-hover + white focus ring (dark bars dim a
+         * faded red). Receta oficial de acciones de barra (co-action-bar):
+         * `variant="ghost"|"stroke" surface="dark"`; Eliminar =
+         * `variant="danger" surface="dark"`.
+         */
         this.surface = 'light';
         /** Disabled state */
         this.disabled = false;
@@ -47,7 +54,7 @@ const CoButton = class {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '97c11bee8f9bb11bb6585439c3c12698b0d95ecb', class: {
+        return (h("button", { key: 'e765a1fcb3b4efcc7c43e155015b3c178a536d3c', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -55,9 +62,9 @@ const CoButton = class {
                 [`co-button--surface-${this.surface}`]: true,
                 'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
-            }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
+            }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabelText || undefined, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '092f58acb6dfa810ce4f5bcdc19ab15dff69104a' }, this.label), this.iconRight
+            : null, h("slot", { key: '8dd3e816276a67ba6072eeed1ad34a982b60389e' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }