@prolibu-suite/cobalt-core 0.9.3 → 0.9.4

package/dist/collection/components/co-audio-player/co-audio-player.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { formatTime, resamplePeaks, fallbackPeaks, scrubFraction } from "./co-audio-player.utils";
+import { formatTime, resamplePeaks, fallbackPeaks, scrubFraction, resolveDuration } from "./co-audio-player.utils";
 export class CoAudioPlayer {
     constructor() {
         /** Compact variant: narrower, hides the download button. */
@@ -21,7 +21,10 @@ export class CoAudioPlayer {
         this.isLoading = false;
         this.hasError = false;
         this.currentTime = 0;
-        this.duration = 0;
+        /** Playback length in seconds, or `NaN` while it is not known — which is the
+         *  normal state for a `MediaRecorder` blob until the decode lands. Everything
+         *  that does arithmetic with it goes through `knownDuration`. */
+        this.duration = NaN;
         this.peaks = [];
         /** Measured wave width (px); 0 until the ResizeObserver reports it. */
         this.containerWidth = 0;
@@ -29,7 +32,13 @@ export class CoAudioPlayer {
         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; };
+        // 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;
+        // Bumped by every init(); an in-flight extractPeaks whose token no longer matches
+        // belongs to a superseded `src` and must not write peaks/duration.
+        this.loadToken = 0;
+        this.onMeta = () => { this.syncDuration(); };
         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; };
@@ -56,11 +65,15 @@ export class CoAudioPlayer {
             if (this.audio)
                 this.audio.playbackRate = this.playbackRate;
         };
+        // Scrubbing needs a real total to map the click fraction onto: with an unknown
+        // duration `frac * duration` is Infinity (or NaN at frac 0), and assigning that
+        // to `currentTime` throws. No total → no scrub.
         this.seekAt = (clientX) => {
-            if (!this.audio || !this.waveEl || !this.duration)
+            const total = this.knownDuration;
+            if (!this.audio || !this.waveEl || !total)
                 return;
             const frac = scrubFraction(clientX, this.waveEl.getBoundingClientRect());
-            this.audio.currentTime = frac * this.duration;
+            this.audio.currentTime = frac * total;
             this.currentTime = this.audio.currentTime;
         };
         this.onWaveKey = (e) => {
@@ -69,17 +82,29 @@ export class CoAudioPlayer {
                 this.toggle();
                 return;
             }
-            if (!this.audio || !this.duration)
+            if (!this.audio)
                 return;
+            // Relative nudges stay available even with an unknown duration (the media
+            // element clamps a forward seek to its own seekable end); only the upper
+            // clamp needs a total, and both operands stay finite either way.
+            const total = this.knownDuration;
+            const at = this.audio.currentTime;
             if (e.key === 'ArrowRight')
-                this.audio.currentTime = Math.min(this.duration, this.audio.currentTime + 5);
+                this.audio.currentTime = total ? Math.min(total, at + 5) : at + 5;
             else if (e.key === 'ArrowLeft')
-                this.audio.currentTime = Math.max(0, this.audio.currentTime - 5);
+                this.audio.currentTime = Math.max(0, at - 5);
             else
                 return;
             this.currentTime = this.audio.currentTime;
         };
     }
+    /** Duration usable for arithmetic (seek target, progress %, ARIA): `0` when it
+     *  is not known, so every caller can bail on a plain falsy check instead of
+     *  letting `Infinity`/`NaN` reach `audio.currentTime` — that setter takes a
+     *  restricted `double` and THROWS a TypeError on a non-finite value. */
+    get knownDuration() {
+        return Number.isFinite(this.duration) && this.duration > 0 ? this.duration : 0;
+    }
     /** 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() {
@@ -117,6 +142,7 @@ export class CoAudioPlayer {
     }
     disconnectedCallback() {
         var _a;
+        this.loadToken++; // orphan any in-flight decode so it can't write to a dead instance
         this.teardown();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = undefined;
@@ -131,16 +157,18 @@ export class CoAudioPlayer {
     }
     init() {
         this.teardown();
+        const token = ++this.loadToken;
         this.rawChannelData = null;
+        this.decodedDuration = NaN;
         this.peaks = fallbackPeaks(this.effectiveBars); // draw immediately; refine with real peaks
         this.currentTime = 0;
-        this.duration = 0;
+        this.duration = NaN; // unknown until `loadedmetadata` or the decode says otherwise
         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);
+        this.extractPeaks(this.src, token);
         if (typeof Audio === 'undefined')
             return; // test/SSR guard
         const el = new Audio();
@@ -169,22 +197,52 @@ export class CoAudioPlayer {
         }
         this.isPlaying = false;
     }
-    async extractPeaks(url) {
+    async extractPeaks(url, token) {
+        let ctx;
         try {
             const Ctx = window.AudioContext || window.webkitAudioContext;
             if (!Ctx || typeof fetch === 'undefined')
                 return; // keep fallback
-            const ctx = new Ctx();
+            ctx = new Ctx();
             const buf = await (await fetch(url)).arrayBuffer();
             const audioBuf = await ctx.decodeAudioData(buf);
+            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);
-            ctx.close();
         }
         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.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.
+            try {
+                await (ctx === null || ctx === void 0 ? void 0 : ctx.close());
+            }
+            catch ( /* already closed */_b) { /* already closed */ }
+        }
+        if (token === this.loadToken)
+            this.syncDuration();
+    }
+    /** Re-derive the shown duration from whichever source knows it. Called from both
+     *  `loadedmetadata` and the end of the decode, because either can land first. */
+    syncDuration() {
+        var _a, _b;
+        const next = resolveDuration((_b = (_a = this.audio) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : NaN, this.decodedDuration);
+        // Object.is, not !==: Stencil's @State setter re-renders on any `oldVal !== newVal`,
+        // and NaN !== NaN — so a plain assignment would re-render on every no-op sync.
+        if (!Object.is(next, this.duration))
+            this.duration = next;
     }
     async download() {
         if (!this.src || typeof fetch === 'undefined')
@@ -205,14 +263,20 @@ export class CoAudioPlayer {
     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: {
+        const total = this.knownDuration; // 0 while unknown → no progress fill, no ARIA max
+        const pct = total ? (this.currentTime / total) * 100 : 0;
+        // Undefined drops the attribute (Stencil removes null/undefined attrs). An
+        // `aria-valuemax="Infinity"`/`"NaN"` is invalid, and a stand-in `"0"` would sit
+        // 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: '997dcefc32f5188c41afa0a7b5135c70cceeed1d', 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: '8ac91ab3f8eb417df5e7cf4d1e016d6ca7eb45a3', 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 })))));
+            }, part: "player" }, h("button", { key: '0e5897dc64c91ee67432f17d7b0d57a27f44cd0e', 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: '4843751a2a3709942a49ae03ff9ba0eb08ab7d97', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: 'b7aebd0e0c5197b0dec6257bbec7c9dd8dd55d6f', 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: 'a504d058a27bb33dd57733ec32db306eb0ed87e9', 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: '9cfa69ba28801893baf62c8f66b18a31319fdebe', id: "co-ap-clip" }, h("rect", { key: '6e5cb34baeb2b7dddd6ef7e94f8585ef912e0315', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '4b78a29dde762cabc85d7921aacbcd261d8fa6b5', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: '9067d22b0e2994e46ef49c60356292ec59f61a21', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: 'f6149a9996e6ce15230221c2f6fcec95fec5f485', 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: '73d291d31d92bcb0e18e230fe0ac35d3ab4077b2', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: '9ab09f5d6b975f4f5544019f70bd2ca1ee521068', name: "download-simple", size: 14 })))));
     }
     static get is() { return "co-audio-player"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-audio-player/co-audio-player.utils.js

@@ -1,10 +1,35 @@
-/** Seconds → "m:ss" (floors; 0 for NaN/negative). */
+/** Rendered in place of `m:ss` while a time is not known.
+ *
+ *  Not an error state: `<audio>.duration` is `Infinity` for any container whose
+ *  header carries no duration — every blob `MediaRecorder` produces, i.e. every
+ *  freshly recorded voice note — and Chrome keeps it that way until the clip has
+ *  been played end to end. `0:00` there would read as a zero-length recording;
+ *  `--:--` reads as "not known yet", which is the truth. */
+export const UNKNOWN_TIME = '--:--';
+/** Seconds → "m:ss" (floors). Anything that is not a finite, non-negative number
+ *  (`Infinity`, `NaN`, negatives) → `UNKNOWN_TIME` — never `"Infinity:NaN"`. */
 export function formatTime(seconds) {
-    const s = Math.max(0, Math.floor(seconds || 0));
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return UNKNOWN_TIME;
+    const s = Math.floor(seconds);
     const m = Math.floor(s / 60);
     const sec = s % 60;
     return `${m}:${sec.toString().padStart(2, '0')}`;
 }
+/** Picks the duration to trust (seconds), or `NaN` when neither source knows it.
+ *
+ *  `<audio>.duration` is authoritative *when it is a real number*. It is not for
+ *  a duration-less container (see `UNKNOWN_TIME`), where it reports `Infinity`.
+ *  The WebAudio decode the player already runs to draw the waveform does know the
+ *  real length (`AudioBuffer.duration`), so it is the fallback. `0` from either
+ *  source means "empty/unknown" too, so it never wins. */
+export function resolveDuration(fromAudio, fromDecode) {
+    if (Number.isFinite(fromAudio) && fromAudio > 0)
+        return fromAudio;
+    if (Number.isFinite(fromDecode) && fromDecode > 0)
+        return fromDecode;
+    return NaN;
+}
 /** Downsample raw PCM to `bars` peak heights, each normalized to a 0..1 fraction. */
 export function resamplePeaks(channelData, bars) {
     const len = channelData.length;

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

@@ -418,7 +418,7 @@ export class CoAutocomplete {
                     "references": {
                         "AutocompleteOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
                             "id": "src/components/co-autocomplete/co-autocomplete.tsx::AutocompleteOption"
                         }
                     }

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

@@ -37,6 +37,10 @@ export class CoAvatar {
         const iconSize = (_b = ICON_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : 24;
         const fontSize = (_c = FONT_SIZE_MAP[this.size]) !== null && _c !== void 0 ? _c : 'var(--co-font-size-18)';
         const showImage = this.type === 'image' && this.src && !this.imgFailed;
+        // Broken/missing image without initials falls back to the ICON (default
+        // "user") — never an empty disc. With `text` present, initials win (they
+        // identify the record better than a generic glyph).
+        const showIcon = this.type === 'icon' || (this.type === 'image' && !showImage && !this.text);
         const ariaLabel = this.type === 'text'
             ? this.text
             : this.type === 'image'
@@ -50,7 +54,7 @@ export class CoAvatar {
                 'co-avatar--light': !!this.color && isLightColor(this.color),
             }, style: Object.assign(Object.assign({ width: `var(--co-avatar-size, ${dim}px)`, height: `var(--co-avatar-size, ${dim}px)`, fontSize }, (this.color ? { background: this.color } : {})), (this.ringColor
                 ? { '--co-avatar-border-color': this.ringColor, '--co-avatar-border-width': '2px' }
-                : {})), part: "avatar", role: "img", "aria-label": ariaLabel }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: (_g = (_f = this.alt) !== null && _f !== void 0 ? _f : this.text) !== null && _g !== void 0 ? _g : '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
+                : {})), part: "avatar", role: "img", "aria-label": ariaLabel }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: (_g = (_f = this.alt) !== null && _f !== void 0 ? _f : this.text) !== null && _g !== void 0 ? _g : '', onError: this.handleImgError })) : showIcon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
         // No tooltip when `name` is unset/empty — renders exactly as before, no wrapper.
         if (!this.name)
             return disc;

package/dist/collection/components/co-avatar-group/co-avatar-group.js

@@ -87,7 +87,7 @@ export class CoAvatarGroup {
                     "references": {
                         "CoAvatarGroupItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
                             "id": "src/components/co-avatar-group/co-avatar-group.tsx::CoAvatarGroupItem"
                         }
                     }

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

@@ -2,6 +2,13 @@
   display: inline-flex;
 }
 
+/* Disabled must block clicks AT THE HOST: the inner button's
+   pointer-events:none re-targets clicks to the host element, where consumer
+   listeners (Vue @click) live — without this, "disabled" buttons still fire. */
+:host([disabled]) {
+  pointer-events: none;
+}
+
 .co-button {
   display: inline-flex;
   align-items: center;

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

@@ -22,7 +22,9 @@ export class CoButton {
          * `variant="danger" surface="dark"`.
          */
         this.surface = 'light';
-        /** Disabled state */
+        /** Disabled state. Reflected so :host([disabled]) can kill pointer-events —
+         *  the inner button's own pointer-events:none re-targets clicks to the host,
+         *  where consumers' click listeners live. */
         this.disabled = false;
         /** Icon weight applied to both iconLeft and iconRight */
         this.iconWeight = 'regular';
@@ -53,7 +55,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: 'e765a1fcb3b4efcc7c43e155015b3c178a536d3c', class: {
+        return (h("button", { key: '651f8d079c09cf21d076aa20564a462a15ca8c4a', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -63,7 +65,7 @@ export class CoButton {
                 'co-button--disabled': this.disabled,
             }, 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: '8dd3e816276a67ba6072eeed1ad34a982b60389e' }, this.label), this.iconRight
+            : null, h("slot", { key: 'b8c5b230a473fe4a57aa087533186e410db64bed' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -193,11 +195,11 @@ export class CoButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Disabled state. Reflected so :host([disabled]) can kill pointer-events \u2014\nthe inner button's own pointer-events:none re-targets clicks to the host,\nwhere consumers' click listeners live."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },

package/dist/collection/components/co-calendar-month/co-calendar-month.js

@@ -2,6 +2,11 @@ import { h, } from "@stencil/core";
 import { addDays, compareYMD, getMonthMatrix, getWeekdayLabels, isDisabled, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
 import { layoutMonth, getWallClock, wallClockToEpoch, toUtcISO, zonedDateKey, zonedMinutesOfDay, } from "@prolibu-suite/cobalt-calendar-utils";
 import { readableTextToken } from "../../utils/eventColor";
+// Distancia (px) que el puntero debe recorrer tras el pointerdown para que un drag
+// de evento se comprometa. Por debajo de esto el gesto es un CLICK: el drag no
+// arranca, el chip conserva sus pointer-events y su click abre el popover. Mismo
+// literal/mecanismo que co-calendar-timegrid.tsx (DRAG_THRESHOLD_PX ahí, línea ~28).
+const DRAG_THRESHOLD_PX = 5;
 /**
  * Month grid for the event calendar. Forks the day grid, roving-tabindex and
  * keyboard model from `co-calendar`, then overlays multi-day event bars laid out
@@ -38,6 +43,21 @@ export class CoCalendarMonth {
         /** Epoch ms of "now", refreshed on a 60s timer so `past` styling stays live. */
         this.nowMs = 0;
         this.onPointerUp = () => this.finishDrag();
+        this.onPointerMove = (e) => this.trackDrag(e);
+        // Drag ARMADO pero aún no comprometido: `startDrag` guarda el id y el punto de
+        // agarre acá; el drag pasa a activo (`dragId`) recién cuando el puntero cruza
+        // DRAG_THRESHOLD_PX en `trackDrag` (mismo patrón que co-calendar-timegrid.tsx,
+        // `dragArmedId`/`startMove`). Así un click simple en un evento arrastrable no
+        // arranca drag (que pone `pointer-events:none` en los chips vía
+        // `cal-month--interacting`) y su popover abre normal.
+        this.dragArmedId = null;
+        this.dragStartPointer = null;
+        // Set right before coEventDrop so the trailing click no-ops (mismo patrón que
+        // co-calendar-timegrid.tsx#suppressNextClick): un drag COMPROMETIDO deja el
+        // chip con pointer-events restaurados (`setInteracting(false)`) ANTES de que
+        // el navegador dispare el `click` sintético que sigue al `pointerup` — sin
+        // este flag ese click reabriría el popover justo después de soltar.
+        this.suppressNextClick = false;
         // ── Selection / activation ──────────────────────────────────────────────
         /** Día seleccionado que PERSISTE resaltado mientras el host tiene abierto su
          * form/bubble de creación (referencia visual, paridad Google). */
@@ -82,9 +102,11 @@ export class CoCalendarMonth {
     }
     connectedCallback() {
         window.addEventListener('pointerup', this.onPointerUp);
+        window.addEventListener('pointermove', this.onPointerMove);
     }
     disconnectedCallback() {
         window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('pointermove', this.onPointerMove);
         if (this.nowTimer)
             window.clearInterval(this.nowTimer);
     }
@@ -141,16 +163,43 @@ export class CoCalendarMonth {
             return;
         // Ver la nota en co-calendar-timegrid#startMove: preventDefault en
         // pointerdown mata el click y el chip arrastrable no podía activarse.
+        // Tampoco se toca dragId/interacting acá: eso arrancaba
+        // `cal-month--interacting` (pointer-events:none en los chips, css:249) en el
+        // pointerdown mismo y se comía el click de todo evento FUTURO arrastrable —
+        // el chip nunca veía el click nativo. Se arma un candidato nada más; el
+        // commit real ocurre en `trackDrag` al cruzar DRAG_THRESHOLD_PX.
         e.stopPropagation();
-        this.dragId = id;
+        this.dragArmedId = id;
+        this.dragStartPointer = { x: e.clientX, y: e.clientY };
+    }
+    /** Arma → activa el drag al cruzar el umbral (ver DRAG_THRESHOLD_PX). Antes de
+     * eso no toca dragId/interacting, así el click nativo del chip sigue vivo. */
+    trackDrag(e) {
+        if (!this.dragArmedId || this.dragId)
+            return;
+        const sp = this.dragStartPointer;
+        if (!sp)
+            return;
+        if (Math.hypot(e.clientX - sp.x, e.clientY - sp.y) < DRAG_THRESHOLD_PX)
+            return;
+        this.dragId = this.dragArmedId;
+        this.dragArmedId = null;
         this.dragOverDate = null;
         this.setInteracting(true);
     }
     finishDrag() {
+        // pointerup habiendo solo ARMADO (sin cruzar el umbral) = fue un click, no un
+        // drag: desarmar en silencio y dejar pasar el click nativo → abre el popover.
+        if (this.dragArmedId && !this.dragId) {
+            this.dragArmedId = null;
+            this.dragStartPointer = null;
+            return;
+        }
         const id = this.dragId;
         const target = this.dragOverDate;
         this.dragId = null;
         this.dragOverDate = null;
+        this.dragStartPointer = null;
         this.setInteracting(false);
         if (!id || !target)
             return;
@@ -165,6 +214,10 @@ export class CoCalendarMonth {
             return;
         if (!this.isDayInteractable(target))
             return;
+        this.suppressNextClick = true;
+        // Clear on the next macrotask: a same-target synthetic click fires before this
+        // (and is suppressed); a later unrelated click is not.
+        setTimeout(() => { this.suppressNextClick = false; }, 0);
         const shifted = shiftEventByDays(ev, deltaDays, this.timeZone);
         this.coEventDrop.emit({
             id,
@@ -256,6 +309,10 @@ export class CoCalendarMonth {
                 'cal-chip--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
             }, style: style, title: ev.title, "aria-label": ev.title, onClick: (e) => {
                 e.stopPropagation();
+                if (this.suppressNextClick) {
+                    this.suppressNextClick = false;
+                    return;
+                }
                 this.activateEvent(ev.id, e.currentTarget.getBoundingClientRect());
             }, onDblClick: (e) => {
                 e.stopPropagation();
@@ -269,7 +326,7 @@ export class CoCalendarMonth {
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: 'f8bcb53b7ef7c47a1ff59caee0305dfc1a3f1fc2', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '11acf9973a13ad661590a04dd934c86ceaa10f5d', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: '7cb63a84f7005ee7b5552a5d9b88c598f579b7be', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '70281a5799b9b95957d152e15a374001a2ec8fa2', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);

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

@@ -219,3 +219,25 @@
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-checkbox:not(.co-checkbox--checked) { background: transparent; }
 }
+
+/* Anillo de foco por teclado — solo :focus-visible, el click no lo enciende.
+   Clase repetida a propósito: la regla del chip overlay apagado
+   (.co-checkbox--overlay:not(--checked):not(--indeterminate)) pesa 0,3,0 y con un
+   solo .co-checkbox este bloque quedaba por debajo — el foco no se pintaba en el
+   estado más frecuente del overlay (WCAG 2.4.7). Con la clase duplicada empata en
+   0,3,0 y gana por orden de fuente, por eso este bloque debe quedarse AL FINAL.
+
+   El halo va a --co-semantic-border-focus (50%), NO al --...-focus-ring (8%):
+   en los hermanos (input/select/…) el foco se percibe porque SUMAN el flip del
+   borde al 50% y el halo solo lo acompaña; acá el borde está anulado por los
+   propios estados (checked / indeterminate / overlay: `border: none`), así que
+   el border-color de abajo es un no-op y el halo al 8% (~1,1:1) quedaba
+   invisible justo en los estados más frecuentes. Con el 50% el anillo es la
+   única señal, y es perceptible.
+   NOTA: si diseño decide subir globalmente --co-semantic-border-focus-ring,
+   esta regla vuelve al token de halo — la decisión global sigue abierta. */
+.co-checkbox.co-checkbox:focus-visible {
+  outline: none;
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}

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

@@ -30,6 +30,12 @@ export class CoCheckbox {
                 }
             }
         };
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault(); // Space no debe scrollear la página
+                this.handleClick(); // ya guarda disabled y resuelve indeterminate
+            }
+        };
     }
     render() {
         const isOverlay = this.appearance === 'overlay';
@@ -37,17 +43,17 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
-        return (h("div", { key: '31690de633689da0b273e3c88cc200cabb4cee75', class: {
+        return (h("div", { key: 'caf200e3c53efa2a00d28db0e149da953e4432da', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '2b0c4ebbe4c7a7a8046cf726e682a3d42ae3ebbe', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: 'a8fe01958d81587129f304ce33f1f5fef882dd9f', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, h("svg", { key: 'a127c176e0233460f14c4261d8d2157e657689a9', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ad7dc0018cdae31156884cd04326bbcdba132b4f', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd665144b25aa51339cf9f6ce0e0edf65cfbe5a9', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '08d6c695e2cbb8188564dc8bb5aab9b569c24838', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, h("svg", { key: 'd9ea60be2c2e58c227aeca8ae3b8e8f459f3522d', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd25f835b95a2200d44b5e4afdeb727d758e0650f', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'b7a043b9910736a8bdd15720fd7857c01250086d', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '2e256fb7fd1515bf9dbe3dc380a0d7d09d5347ac', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-checkbox-group/co-checkbox-group.js

@@ -231,7 +231,7 @@ export class CoCheckboxGroup {
                     "references": {
                         "CheckboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
                             "id": "src/components/co-checkbox-group/co-checkbox-group.tsx::CheckboxOption"
                         }
                     }

package/dist/collection/components/co-color-picker/co-color-picker.css

@@ -100,6 +100,13 @@
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
 }
 
+/* Anillo de foco por teclado — mismo trazo que el estado abierto. */
+.co-color-picker__trigger:focus-visible {
+  outline: none;
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
+}
+
 .co-color-picker--error .co-color-picker__trigger {
   border-color: var(--co-color-status-error);
 }

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -38,6 +38,19 @@ export class CoColorPicker {
         };
         this.handlePopoverClose = () => {
             this.isOpen = false;
+            this.restoreTriggerFocus();
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+            else if (e.key === 'ArrowDown' && !this.isOpen) {
+                e.preventDefault();
+                this.isOpen = true;
+            }
         };
     }
     get parsedPresets() {
@@ -55,10 +68,21 @@ export class CoColorPicker {
         }
         return DEFAULT_PRESETS;
     }
+    /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
+     *  salvo que el cierre venga de un click-outside que ya movió el foco a
+     *  otro elemento — en ese caso no robarlo. */
+    restoreTriggerFocus() {
+        var _a;
+        const active = document.activeElement;
+        if (active === this.el || this.el.contains(active)) {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
     handleSwatchClick(hex) {
         this.value = hex;
         this.coChange.emit(hex);
         this.isOpen = false;
+        this.restoreTriggerFocus();
     }
     get statusIcon() {
         const map = {
@@ -82,10 +106,10 @@ export class CoColorPicker {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: '41a7a80f81aeaf71e1f8429e66aa5511437882fa', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '96404f15d058b7bc0b2d2c13b6744404cc11769a', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '16af407f56b58ad6ea649a19aa8a3c96f2caae04', required: this.required }))), h("co-popover", { key: '8eb3b862b8618b32d76e862ce003e667801c3262', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '0314b0dbf7404fdb23a0b5cd837b07b5879f85a1', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '0d08254d17a15786834c5de548526b6b359a09be', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'afbfa48cb5bd140767acdf2e1df35d7e8985948d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '9e0d22b668546a175c6e6559c2af5dd0de2a1843', class: "co-color-picker__panel" }, h("div", { key: '018fec91282680d660be82b01f340b29f13c73f7', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: '5b99c6a39399a6731d09115e7fd2ce2d64baffb2', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '816392c0b3cebcb2e84ea28ea7e6b7976503b6f9', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'e0e1c97522f4516763fc663878203e2dafb783b3', required: this.required }))), h("co-popover", { key: 'd49ba1f9cd64d2498940247f3ba02897dcc9d2d7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '1121b429c89fb9cc066cc66564ae547687bf8ed3', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '2567db35022b5ffdd9921d8bec263c90103fd5f3', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '7fecc93b5ecc91acf2c874a26ed1f9d8770d9adf', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '44d904e4156fac15b302ffe86d68cef72bc7518e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, h("div", { key: 'a566f189c87792f0af3e493c00eed7240dcd49c9', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (h("div", { key: '83420abbf343f57fa57804c676fd22e91d2f6816', class: "co-color-picker__hex-row" }, h("span", { key: '1b9ce2cdb091734c9d34003c8ce48a165e8763a8', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '5733ec9110227e3ffa45c15c294629cfe420c485', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: '249b0f7eb80517c89ecaa11c09cf64ae70fd3d52', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: 'aed9a2fe68c39047e6027c76c185a1cfc5abb097', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '276d4f39ca9f5be6add8bd2ae423a02960f82581', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '4f4323dc9f3d26581fb6ec1f5bd1e668e9a45011', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'ee725d0ce3a30985a71bf2d34e5e64124f89891b', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: 'bae8ffe387fe30710b654975379e70a4b3724ec9', class: "co-color-picker__hex-row" }, h("span", { key: '671a5a64abc2f824c8d1ef8c2404023d8d51c28d', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '3a6742eb528c5a92fe16b2f2e5d8b2ebdf885450', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'f53957b494dbed0648d32fcb743673a2ada063b4', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: 'c99e611beddc2108f3973ecee4f6012423cffd23', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '1d6a6e97eab1eafcb9265944693cb0d1121e04ee', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'bcf943836fddf264cede2f339844f35aa167002f', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'a439c4d102d17d0d6c9e55757dcf43ec8b3ade8f', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -353,3 +377,12 @@ export class CoColorPicker {
     }
     static get elementRef() { return "el"; }
 }
+/**
+ * Id del panel de presets, target de `aria-controls` del trigger. Constante
+ * (no aleatoria): vive en el shadow root de ESTA instancia, donde los ids no
+ * colisionan con los de otras.
+ *
+ * El trigger solo emite `aria-controls` mientras `isOpen`: el panel se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoColorPicker.PANEL_ID = 'co-color-picker-panel';