@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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

@@ -0,0 +1,453 @@
+import { h } from "@stencil/core";
+import { formatTime, resamplePeaks, fallbackPeaks, scrubFraction } from "./co-audio-player.utils";
+export class CoAudioPlayer {
+    constructor() {
+        /** 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: '4775b84d9af61824dcd56d79aca4d198802fd9ab', 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: 'b1e8e33109602b0f88c2d95a1bc004d282ae1985', 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: '37c0b83df324d87382aa6c3c1793597f74f9cefe', 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: '5dd0f24e7ca67fa080e4e9dd8b0512b322d5e53e', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: 'ad0e201fec15d2cebf9d049c83a19221f9a00f68', 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: '2407820a1b05cfd4f433a15824be006698353d05', 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: 'ef30411f2c3db0167adbe22828c3eff9fbc9faf9', id: "co-ap-clip" }, h("rect", { key: 'c63779f30c3cc18b5e44d33f243ab8ddf209bb06', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '0d56c6299e0affdea922048205365ced7e5b135b', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: 'd123e909e5c0641968d5d5c18f11a48e416a9ccc', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: 'ec9bf8ec5d81105dfc8346d69f6cd63b127a3d72', 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: '28be3e9a09967e836fde4a4422971edb576998f0', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'fad58b255cc75b70f692136c516913131c25677c', name: "download-simple", size: 14 })))));
+    }
+    static get is() { return "co-audio-player"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-audio-player.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-audio-player.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Audio URL (use a signedUrl for private buckets)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact variant: narrower, hides the download button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "bars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fallback bar count used before the container width is measured. Once\nmeasured, the real bar count is derived from the width via `barDensity`\n(V1 parity: a dense, detail-rich waveform rather than a fixed count)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bars",
+                "defaultValue": "64"
+            },
+            "barDensity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pixels per waveform bar (bar + gap). Lower = denser/more detailed, like V1\n(`SkAudioPlayer` used 3). The measured bar count = floor(width / barDensity)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bar-density",
+                "defaultValue": "3"
+            },
+            "preload": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'metadata'",
+                    "resolved": "\"metadata\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passthrough to the underlying <audio> preload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preload",
+                "defaultValue": "'metadata'"
+            },
+            "downloadFilename": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Filename for the download button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "download-filename",
+                "defaultValue": "'audio'"
+            },
+            "noDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the download button even in full mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-download",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPlaying": {},
+            "isLoading": {},
+            "hasError": {},
+            "currentTime": {},
+            "duration": {},
+            "peaks": {},
+            "containerWidth": {},
+            "playbackRate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coPlay",
+                "name": "coPlay",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coPause",
+                "name": "coPause",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coEnded",
+                "name": "coEnded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coError",
+                "name": "coError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "onSrcChange"
+            }];
+    }
+}

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

@@ -0,0 +1,44 @@
+/** Seconds → "m:ss" (floors; 0 for NaN/negative). */
+export 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. */
+export 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). */
+export 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. */
+export function scrubFraction(clientX, rect) {
+    if (!rect.width)
+        return 0;
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+}

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

@@ -62,7 +62,7 @@
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
@@ -148,7 +148,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-autocomplete__clear:hover {

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

@@ -61,6 +61,15 @@ export class CoAutocomplete {
             this.coChange.emit({ value: sel, item: { _id: val, label: val } });
         };
         this.handleListChange = (detail) => {
+            // co-option-list emite value:null al DESELECCIONAR → limpiar y PROPAGAR el
+            // deselect (value:null) para que el host distinga "vacío" de "sin cambio".
+            if (detail.value == null) {
+                this.value = this.multiple ? '[]' : '';
+                this.query = '';
+                this.isOpen = false;
+                this.coChange.emit({ value: null, item: null });
+                return;
+            }
             if (this.multiple) {
                 this.value = JSON.stringify(detail.value);
                 this.coChange.emit({ value: detail.value, item: detail.item });
@@ -159,16 +168,16 @@ export class CoAutocomplete {
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'a152ee025b4c76813f8783ba1cd0e6791a7372ee', class: {
+        return (h("div", { key: '0fad340e2daa5ee4b56e28325d5eaec4d60d7188', class: {
                 'co-autocomplete': true,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
                 [`co-autocomplete--${this.size}`]: true,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '484443890da0c01c028716095ef2215f56b64e93', class: "co-autocomplete__labels" }, this.label && h("label", { key: '24fc760c0fa0322e1952d948e8daf463a4999226', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '250f449b8d860d5476652dd906b5405e76cba1d1', required: this.required })), this.secondaryLabel && h("span", { key: '5f7b6c3b0308cc031336d945ce629aa06495404d', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '632abdc8eb131cf8f5c482487d377d9297c11ad6', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '7c1f1af01c2a9b9686de933a38d4da0302f40cbc', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: 'bfe9c9fbce1c7050f928128fb77f8bf5018903d1', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'a724b6267fd6dbe267725f3619677e043843c96c', class: "co-autocomplete__labels" }, this.label && h("label", { key: '45c176c82f0967c6ff0f1f323d36834d247f8ac6', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '52940ac88fa7ba5f2b662990a66b0ad84d728ecc', required: this.required })), this.secondaryLabel && h("span", { key: '5eac2ccf44d59067f7ca070561c18c9b45b4cfc1', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '4837e011ac491a34efdfb84bd80f2baa52c4f451', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '1a46dba433dec3b8dec82b6d2e93cee0575f5673', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '95054c8e5ec371ba04f6fa5938d74babffef473f', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: 'fc621839dde68853a1b28231551e6cb0a6f415e7', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'fbe41e89ca6202a4de04a09437f1f11f756f25eb', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e3096cd897d7a98fa7cd203d21eb57dc6ce961a5', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '3211cf54fcdae0a73afb62e2b6cb25081486f3a7', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '9c5e500a17c9486b6834c46be9e95c0e0fea6beb', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: 'b44c39253a07c470dc5e059223fce58548e8d02d', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '30ac040bfef45e66d1b18bfdda9b5b07b8f2c3d5', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a4fc8c4c9695c13cd515d9b7562986a62bf07110', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '4a7f3031b62c451e0561024d232331b1c7679a07', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        }))), h("input", { key: '016887bf4fa1872bafd1ba60a7fb960ca89e8b76', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'eac7e752a8d8f18b866c5fe4283707e851355328', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'aac8dcfced13e8abf3bb6beb0fa56124814804ea', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8a5605cfe09eb17ca65c9fd97662ceec893431b7', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '7263c42e73656db3ee8d1c1c2f5f5cd941b0e40b', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: '32071562943c992b0013451c8b89da20590554cf', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '47ba4956d829c700700a7509e8fd2fc58dd6e4d9', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b4363e83a7258241d23f4911c1f6fb352330c19d', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '952777047bd27a6604daea9531f26ce5aab0c475', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -582,8 +591,8 @@ export class CoAutocomplete {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ value: string | string[]; item: { _id: string; label: string } | null }",
-                    "resolved": "{ value: string | string[]; item: { _id: string; label: string; } | null; }",
+                    "original": "{ value: string | string[] | null; item: { _id: string; label: string } | null }",
+                    "resolved": "{ value: string | string[] | null; item: { _id: string; label: string; } | null; }",
                     "references": {}
                 }
             }, {

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

@@ -22,7 +22,7 @@
   cursor: pointer;
   border-radius: var(--co-border-radius-full);
   outline: none;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-avatar-group--interactive:hover {

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

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

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.css

@@ -16,13 +16,13 @@
   backdrop-filter: blur(var(--co-overlay-blur, 2px));
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.25s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-in);
 }
 
 .co-bottom-sheet-root--open .co-bottom-sheet__backdrop {
   opacity: 1;
   pointer-events: auto;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-bottom-sheet {
@@ -40,7 +40,7 @@
   border-radius: var(--co-border-radius-xl) var(--co-border-radius-xl) 0 0;
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
   transform: translateY(100%);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform;
   overflow: hidden;
   visibility: hidden;
@@ -53,7 +53,7 @@
 
 /* keep the slide-out visible while it animates */
 .co-bottom-sheet:not(.co-bottom-sheet--open) {
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out), visibility 0s linear var(--co-motion-duration-slow);
 }
 
 /* while the finger drives the sheet, nothing animates */
@@ -126,11 +126,3 @@
   background: var(--co-semantic-surface-page);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  /* near-zero (not zero) so transitionend still fires coAfterOpen/Close */
-  .co-bottom-sheet,
-  .co-bottom-sheet:not(.co-bottom-sheet--open),
-  .co-bottom-sheet__backdrop {
-    transition-duration: 0.01s !important;
-  }
-}