@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

package/dist/cjs/co-accordion.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coAccordionCss = () => `:host{display:block}.co-accordion{display:flex;flex-direction:column;width:100%}.co-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm, 6px);width:100%;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-accordion__heading-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-accordion__heading{font-size:var(--co-font-size-24);font-weight:500;line-height:1.25;letter-spacing:-0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__subheading{font-size:var(--co-font-size-14);font-weight:400;line-height:1.3;letter-spacing:normal;color:var(--co-semantic-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__caret{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:var(--co-border-radius-full, 9999px);color:var(--co-semantic-text-default);cursor:pointer;transition:transform 0.2s ease, background-color 0.15s ease;transform:rotate(180deg);}.co-accordion__caret:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-accordion--open .co-accordion__caret{transform:rotate(0deg);}.co-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}.co-accordion__body-inner{min-height:0;overflow:hidden;padding-top:var(--co-spacing-2xl);}.co-accordion--open .co-accordion__body{grid-template-rows:1fr}.co-accordion:not(.co-accordion--open) .co-accordion__body-inner{visibility:hidden;transition:visibility 0s linear 0.25s}.co-accordion--open .co-accordion__body-inner{visibility:visible;transition:visibility 0s linear 0s}.co-accordion__caret:focus-visible{outline:2px solid var(--co-color-primary-azul, #2563eb);outline-offset:2px}.co-accordion--disabled .co-accordion__header{opacity:0.5}.co-accordion--disabled .co-accordion__caret{cursor:not-allowed}`;
 

package/dist/cjs/co-action-bar.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var index = require('./index-kBiXCEE7.js');
+
+const coActionBarCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);pointer-events:none}:host([position='bottom-center']){position:fixed;left:50%;transform:translateX(-50%);bottom:var(--co-action-bar-offset, 24px);z-index:var(--co-action-bar-z, 1000);max-width:calc(100vw - 2 * var(--co-action-bar-inline-margin, 24px))}.co-action-bar{position:relative;display:flex;align-items:center;box-sizing:border-box;max-width:100%;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-lg);border-radius:var(--co-border-radius-lg);background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);box-shadow:var(--co-shadow-lg);opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden}.co-action-bar--open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.co-action-bar--animated{transition:opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms}.co-action-bar--animated.co-action-bar--open{transition:opacity 180ms ease, transform 180ms ease, visibility 0s}@media (prefers-reduced-motion: reduce){.co-action-bar{transform:none}.co-action-bar--animated{transition:opacity 180ms ease, visibility 0s linear 180ms}.co-action-bar--animated.co-action-bar--open{transition:opacity 180ms ease, visibility 0s}}.co-action-bar__label{font-size:var(--co-font-size-14);font-weight:500;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;padding-right:var(--co-spacing-xs)}.co-action-bar__actions{display:flex;align-items:center;gap:var(--co-spacing-xs);min-width:0}::slotted(hr){width:1px;height:24px;flex-shrink:0;align-self:center;margin:0 var(--co-spacing-xs);border:none;padding:0;background:color-mix(in srgb, var(--co-color-base-blanco, #fff) 28%, transparent)}.co-action-bar__dismiss{flex-shrink:0}.co-action-bar__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap}`;
+
+const CoActionBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coDismiss = index.createEvent(this, "coDismiss", 7);
+        /** Visibilidad. El DOM persiste; open solo togglea la clase --open. */
+        this.open = false;
+        /** Muestra la X de descarte (emite coDismiss). */
+        this.dismissible = true;
+        /**
+         * Anclaje opt-in: 'bottom-center' aplica fixed+centrado en el HOST vía
+         * :host([position='bottom-center']) — por eso la prop se REFLEJA a
+         * atributo. 'none' deja el flujo normal (consumidores draggable/absolute
+         * posicionan ellos, como co-fab).
+         */
+        this.position = 'none';
+        /**
+         * Texto del nodo aria-live sr-only. Se muta DIFERIDO (coalescing ~600ms):
+         * seleccionar filas rápido produce una ráfaga de labels, y un live region
+         * que muta por cada una spamea al lector de pantalla. El timer difiere la
+         * mutación del nodo de texto y solo el último valor de la ráfaga se anuncia.
+         */
+        this.liveText = '';
+        /** Transiciones apagadas hasta después del primer paint (ver componentDidLoad). */
+        this.animated = false;
+        this.handleDismiss = () => {
+            this.coDismiss.emit();
+        };
+    }
+    onLabelChange(newLabel) {
+        if (this.liveTimer !== undefined)
+            clearTimeout(this.liveTimer);
+        this.liveTimer = setTimeout(() => {
+            this.liveTimer = undefined;
+            this.liveText = newLabel !== null && newLabel !== void 0 ? newLabel : '';
+        }, 600);
+    }
+    componentWillLoad() {
+        var _a;
+        // Valor inicial SIN timer: montar no es un cambio que anunciar (los live
+        // regions solo anuncian mutaciones posteriores) y Stencil NO dispara
+        // @Watch para el valor inicial (gotcha, ver co-popover.tsx:67-74).
+        this.liveText = (_a = this.label) !== null && _a !== void 0 ? _a : '';
+    }
+    componentDidLoad() {
+        // Estado inicial SIN transición: la clase --open ya salió del primer
+        // render derivada de la prop (@Watch no corre para el valor inicial —
+        // mismo gotcha) y las transiciones se habilitan recién DESPUÉS del primer
+        // paint. Así un mount con open=true aparece en su lugar sin animar desde
+        // translateY(8px)+opacity:0.
+        const enable = () => (this.animated = true);
+        if (typeof requestAnimationFrame === 'function') {
+            this.rafId = requestAnimationFrame(enable);
+        }
+        else {
+            enable();
+        }
+    }
+    disconnectedCallback() {
+        if (this.liveTimer !== undefined) {
+            clearTimeout(this.liveTimer);
+            this.liveTimer = undefined;
+        }
+        if (this.rafId !== undefined && typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'c350ea38a12157a5cefe26f303ef7100938d55c9', class: {
+                'co-action-bar': true,
+                'co-action-bar--open': this.open,
+                'co-action-bar--animated': this.animated,
+            }, part: "bar", role: "group", "aria-label": this.ariaLabelText || this.label, "aria-hidden": this.open ? null : 'true' }, index.h("span", { key: '9f2d3d5729fd150e5aa0c487067c7c8ad6cd8b59', class: "co-action-bar__live", "aria-live": "polite" }, this.liveText), index.h("span", { key: 'd2617507df8f2b48a743c1bb20482d9cc2e227df', class: "co-action-bar__label", part: "label" }, index.h("slot", { key: 'aad415247f017bd8ea38e38f84a0cd768a2f6f38', name: "label" }, this.label)), index.h("div", { key: '8999cd574e430246824effda0bfa531d62a3530a', class: "co-action-bar__actions", part: "actions" }, index.h("slot", { key: 'f06636fd076da38bc07982637f7def5d75df733e' })), this.dismissible !== false && (index.h("co-icon-button", { key: '4227fa464073430c67190ac4afc6c6534b627934', class: "co-action-bar__dismiss", part: "dismiss", icon: "x", variant: "ghost", surface: "dark", size: "xs", label: "Dismiss", onClick: this.handleDismiss }))));
+    }
+    static get watchers() { return {
+        "label": [{
+                "onLabelChange": 0
+            }]
+    }; }
+};
+CoActionBar.style = coActionBarCss();
+
+exports.co_action_bar = CoActionBar;

package/dist/cjs/co-app-shell.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coAppShellCss = () => `:host{display:flex;height:100vh;overflow:hidden;background:var(--co-app-shell-bg, linear-gradient(     180deg,     var(--co-color-base-off-white) 0%,     var(--co-color-neutral-100) 50%,     var(--co-color-neutral-100) 100%   ));font-family:var(--co-font-family-primary)}.sidebar{display:flex;flex-direction:column;width:256px;height:100%;flex-shrink:0;overflow:hidden;transition:width 0.2s ease;padding:var(--co-spacing-sm);padding-right:0;box-sizing:border-box}:host([sidebar-mode="min"]) .sidebar{--co-sidebar-min-width:64px;width:var(--co-sidebar-min-width);align-items:flex-start;padding:var(--co-spacing-sm) 0}.sidebar__header{flex-shrink:0}.sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.sidebar__body:hover{scrollbar-color:var(--co-color-opacity-blanco-16) transparent}.sidebar__body::-webkit-scrollbar{width:6px}.sidebar__body::-webkit-scrollbar-track{background:transparent}.sidebar__body::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}.sidebar__body:hover::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}.sidebar__body:hover::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}.sidebar__body:hover::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}.sidebar__footer{flex-shrink:0}:host([sidebar-mode="min"]) .sidebar__header,:host([sidebar-mode="min"]) .sidebar__body,:host([sidebar-mode="min"]) .sidebar__footer{display:flex;flex-direction:column;align-items:center;width:var(--co-sidebar-min-width, 64px)}:host([sidebar-mode="min"]) .sidebar__header{gap:var(--co-spacing-sm);padding-bottom:var(--co-spacing-md)}:host([sidebar-mode="min"]) .sidebar__body{scrollbar-width:none}:host([sidebar-mode="min"]) .sidebar__body::-webkit-scrollbar{width:0}.main{display:flex;flex-direction:column;flex:1;min-width:0;padding:0;margin:var(--co-spacing-sm);margin-left:0;min-height:0;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));--co-shell-r:var(--co-border-radius-md);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>")}.main__card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:0;-webkit-mask:var(--co-sq-tl) top left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-tr) top right / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-shell-r) var(--co-shell-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-shell-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-shell-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-tr) top right / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-shell-r) var(--co-shell-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-shell-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-shell-r) + 2px) 100% no-repeat}.main__header{flex-shrink:0}.main__content{flex:1;min-height:0;overflow:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.main__content:hover{scrollbar-color:var(--co-color-opacity-negro-16) transparent}.main__content::-webkit-scrollbar{width:6px;height:6px}.main__content::-webkit-scrollbar-track{background:transparent}.main__content::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}.main__content:hover::-webkit-scrollbar-thumb{background:var(--co-color-opacity-negro-16)}.main__content:hover::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-negro-25)}.main__content:hover::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-negro-50)}.main__content--card{background:var(--co-semantic-surface-secondary)}`;
 
@@ -14,10 +14,10 @@ const CoAppShell = class {
         this.contentCard = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'eba2c0de5107ee99f46dd0f58e93c7957b635fc6' }, index.h("aside", { key: 'd70fd877fb8b0341f1a93d0c96f7e94ccc67a5bc', class: "sidebar", part: "sidebar" }, index.h("div", { key: '712d562d0137d49073264464a4656efa13505080', class: "sidebar__header", part: "sidebar-header" }, index.h("slot", { key: '3414826e8939d2cd01f1fcdca7dadf1ec6c6921e', name: "sidebar-header" })), index.h("div", { key: '2f9ec77ce51b77048130c042a7c275b8f1169b68', class: "sidebar__body", part: "sidebar-body" }, index.h("slot", { key: '6291e33cce9afcfb59fac200629f899206d667eb', name: "sidebar" })), index.h("div", { key: 'e3314bda8652362d2570960a0ee65fb843d6e07f', class: "sidebar__footer", part: "sidebar-footer" }, index.h("slot", { key: 'e2b09d7a7435e0c29f3ac43b9a4200763964d52e', name: "sidebar-footer" }))), index.h("div", { key: '73081c14cf2f04ad4b0062007287edea09bb3a88', class: "main", part: "main" }, index.h("div", { key: '5e3dbe0b27716f815972ea39dda4479b2072872c', class: "main__card", part: "card" }, index.h("header", { key: '3df713d4c3a015ba14366433770cfba66e9b8bbc', class: "main__header", part: "header" }, index.h("slot", { key: '8e36000c6195f22fb7abe54d1adfb026374d9248', name: "navbar" })), index.h("main", { key: '63cda7e07239d551fb950e12cce998e2fe9271c7', class: {
+        return (index.h(index.Host, { key: '7a45ab21e3ad256e25f05df33ad827931532c34a' }, index.h("aside", { key: '5ca5469a35e630b4ab01be23cae46efc43cb1519', class: "sidebar", part: "sidebar" }, index.h("div", { key: 'f4243197b46e67b4d632aa8abad803b07f471bb2', class: "sidebar__header", part: "sidebar-header" }, index.h("slot", { key: 'b609c8272c05f7e4cbb2c8ae1ab0c24430541f84', name: "sidebar-header" })), index.h("div", { key: '72ca1118e1eeb6b5f3467c16c82dac60c4dc4042', class: "sidebar__body", part: "sidebar-body" }, index.h("slot", { key: '48c65d150a4836996cf7406f32142bcb86e545df', name: "sidebar" })), index.h("div", { key: 'be09567b81d7abae1738decfd30b9b7b6edb47f2', class: "sidebar__footer", part: "sidebar-footer" }, index.h("slot", { key: 'd202466aa14916d7fd3be163a615ce1156151150', name: "sidebar-footer" }))), index.h("div", { key: 'd8b6f0cfdf0c4123b413d5d8bad78813fb7ba1a9', class: "main", part: "main" }, index.h("div", { key: '0efa85801eaa0cd339875ff4a1fd9cedcd715751', class: "main__card", part: "card" }, index.h("header", { key: 'befa647b3822ed055166c3e2da9aca9fb54c1204', class: "main__header", part: "header" }, index.h("slot", { key: 'b08034b07963d178f3b8e9cee16d3975f97a7b90', name: "navbar" })), index.h("main", { key: '3b0adfc33dd08b08fb2edf84a5f098c0ff7d1003', class: {
                 'main__content': true,
                 'main__content--card': this.contentCard,
-            }, part: "content" }, index.h("slot", { key: '7ccab85592e8e9efdc2802f0147ad8b5ad749899' }))))));
+            }, part: "content" }, index.h("slot", { key: '4c38a0a04548bc6cd2cc04d9b3fb095f5548fdde' }))))));
     }
 };
 CoAppShell.style = coAppShellCss();

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

@@ -0,0 +1,279 @@
+'use strict';
+
+var index = require('./index-kBiXCEE7.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) {
+        index.registerInstance(this, hostRef);
+        this.coPlay = index.createEvent(this, "coPlay", 7);
+        this.coPause = index.createEvent(this, "coPause", 7);
+        this.coEnded = index.createEvent(this, "coEnded", 7);
+        this.coError = index.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) => (index.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 (index.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" }, index.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 }, index.h("co-icon", { key: 'e0e0d2dd5f6e0578ba80a3c235e5c221a6e8fe21', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), index.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 }, index.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)), index.h("clipPath", { key: 'c2901cfe7c7e910bd53c8c92894b2d2395cde270', id: "co-ap-clip" }, index.h("rect", { key: '8129a85201e09ba6646b08ed0075798b0a0b0dfc', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), index.h("g", { key: '69bc1780122d48f1a545d1c59bf7ed6536285ed2', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), index.h("span", { key: '3747622619bd81545f85e7eb2f9c19b1aca6e7c2', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (index.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 && (index.h("button", { key: 'd6767d185317f20299b40c4050a806d88165682f', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, index.h("co-icon", { key: 'a0f0a09cdf705ecf15e0156cf93011f89f41ffa5', name: "download-simple", size: 14 })))));
+    }
+    static get watchers() { return {
+        "src": [{
+                "onSrcChange": 0
+            }]
+    }; }
+};
+CoAudioPlayer.style = coAudioPlayerCss();
+
+exports.co_audio_player = CoAudioPlayer;

package/dist/cjs/co-autocomplete.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var requiredMark = require('./requiredMark-B3pKyqYI.js');
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
 
-const coAutocompleteCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));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}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;padding:var(--co-spacing-sm2)}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coAutocompleteCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);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}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;padding:var(--co-spacing-sm2)}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
 
 const CoAutocomplete = class {
     constructor(hostRef) {

package/dist/cjs/co-avatar-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coAvatarGroupCss = () => `:host{display:inline-flex}.co-avatar-group{display:inline-flex;align-items:center}.co-avatar-group--interactive{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:var(--co-border-radius-full);outline:none;transition:opacity 0.12s ease}.co-avatar-group--interactive:hover{opacity:0.88}.co-avatar-group--interactive:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-avatar-group__slot{display:inline-flex;align-items:center;line-height:0}.co-avatar-group>*:not(:first-child){margin-left:calc(-1 * var(--co-avatar-group-overlap, var(--co-spacing-sm)))}.co-avatar-group__avatar::part(avatar),.co-avatar-group__overflow{box-shadow:0 0 0 var(--co-avatar-group-ring-width, 2px) var(--co-semantic-surface-page)}.co-avatar-group__avatar,.co-avatar-group__overflow{vertical-align:middle}.co-avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);font-family:var(--co-font-family-primary);font-weight:600;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);flex-shrink:0;user-select:none;-webkit-font-smoothing:antialiased}`;
 
@@ -68,8 +68,8 @@ const CoAvatarGroup = class {
                 'co-avatar-group--interactive': this.interactive,
             } }, interactiveAttrs), visible.map((it, i) => {
             var _a, _b, _c;
-            return (index.h("co-tooltip", { key: i, class: "co-avatar-group__slot", content: it.name || it.text || '', placement: "bottom" }, index.h("co-avatar", { class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor })));
-        }), extra > 0 && (index.h("co-tooltip", { key: 'c2888162dd23d0b1a2c853e6adbe7a8f5f61efe5', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, index.h("div", { key: '5f0d9a321b52db23356b107564605b18b8c75692', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
+            return (index.h("co-avatar", { key: i, class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor, name: it.name || it.text || '' }));
+        }), extra > 0 && (index.h("co-tooltip", { key: 'b6dffe856f5984d2e2731e84d9d4a46cfcfa0c7b', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, index.h("div", { key: 'b7fe90ee1800ede2bdc3b8674d6ab0dcdfa4ac48', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
     }
 };
 CoAvatarGroup.style = coAvatarGroupCss();

package/dist/cjs/{co-tooltip.cjs.entry.js → co-avatar_2.cjs.entry.js}

@@ -1,7 +1,98 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var positioning = require('./positioning-DwHW399W.js');
+var index = require('./index-kBiXCEE7.js');
+var positioning = require('./positioning-DCj_AJ2T.js');
+
+/**
+ * Shared color utilities for Cobalt components.
+ * WCAG sRGB relative luminance for contrast detection.
+ */
+function parseHex(hex) {
+    if (!hex || typeof hex !== 'string')
+        return null;
+    const h = hex.replace('#', '');
+    if (h.length === 3) {
+        return { r: parseInt(h[0] + h[0], 16), g: parseInt(h[1] + h[1], 16), b: parseInt(h[2] + h[2], 16) };
+    }
+    if (h.length === 6) {
+        return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
+    }
+    return null;
+}
+/** WCAG sRGB relative luminance (0–1). */
+function luminance(hex) {
+    const c = parseHex(hex);
+    if (!c)
+        return 0;
+    const [rs, gs, bs] = [c.r / 255, c.g / 255, c.b / 255].map((v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/** Returns true when the color is perceptually light (needs dark foreground). */
+function isLightColor(hex) {
+    return luminance(hex) > 0.4;
+}
+
+const coAvatarCss = () => `:host{display:inline-flex;--co-avatar-squircle:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M100 50L99.94 68.06L99.75 73.81L99.44 77.94L99.01 81.26L98.44 84.05L97.74 86.46L96.91 88.57L95.94 90.43L94.81 92.07L93.53 93.53L92.07 94.81L90.43 95.94L88.57 96.91L86.46 97.74L84.05 98.44L81.26 99.01L77.94 99.44L73.81 99.75L68.06 99.94L50 100L31.94 99.94L26.19 99.75L22.06 99.44L18.74 99.01L15.95 98.44L13.54 97.74L11.43 96.91L9.57 95.94L7.93 94.81L6.47 93.53L5.19 92.07L4.06 90.43L3.09 88.57L2.26 86.46L1.56 84.05L0.99 81.26L0.56 77.94L0.25 73.81L0.06 68.06L0 50L0.06 31.94L0.25 26.19L0.56 22.06L0.99 18.74L1.56 15.95L2.26 13.54L3.09 11.43L4.06 9.57L5.19 7.93L6.47 6.47L7.93 5.19L9.57 4.06L11.43 3.09L13.54 2.26L15.95 1.56L18.74 0.99L22.06 0.56L26.19 0.25L31.94 0.06L50 0L68.06 0.06L73.81 0.25L77.94 0.56L81.26 0.99L84.05 1.56L86.46 2.26L88.57 3.09L90.43 4.06L92.07 5.19L93.53 6.47L94.81 7.93L95.94 9.57L96.91 11.43L97.74 13.54L98.44 15.95L99.01 18.74L99.44 22.06L99.75 26.19L99.94 31.94Z' fill='%23fff'/></svg>")}.co-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);font-family:var(--co-font-family-primary);font-weight:600;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);overflow:hidden;flex-shrink:0;user-select:none;-webkit-font-smoothing:antialiased}.co-avatar::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 var(--co-avatar-border-width, 1px) var(--co-avatar-border-color, transparent)}.co-avatar__text{text-transform:uppercase}.co-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.co-avatar--square{border-radius:0;-webkit-mask:var(--co-avatar-squircle) center / 100% 100% no-repeat;mask:var(--co-avatar-squircle) center / 100% 100% no-repeat}.co-avatar--square::after{--co-avatar-bw:var(--co-avatar-border-width, 1px);box-shadow:none;background:var(--co-avatar-border-color, transparent);-webkit-mask:var(--co-avatar-squircle) center / 100% 100% no-repeat,     var(--co-avatar-squircle) center / calc(100% - 2 * var(--co-avatar-bw)) calc(100% - 2 * var(--co-avatar-bw)) no-repeat;-webkit-mask-composite:xor;mask:var(--co-avatar-squircle) center / 100% 100% no-repeat,     var(--co-avatar-squircle) center / calc(100% - 2 * var(--co-avatar-bw)) calc(100% - 2 * var(--co-avatar-bw)) no-repeat;mask-composite:exclude}.co-avatar--light{color:rgba(0, 0, 0, 0.87)}co-tooltip{display:inline-flex;align-items:center;line-height:0}`;
+
+const SIZE_MAP = {
+    xl: 80, lg: 64, md: 56, sm: 48, xs: 32, xxs: 24,
+};
+const ICON_SIZE_MAP = {
+    xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 12,
+};
+const FONT_SIZE_MAP = {
+    xl: 'var(--co-font-size-26)',
+    lg: 'var(--co-font-size-22)',
+    md: 'var(--co-font-size-18)',
+    sm: 'var(--co-font-size-16)',
+    xs: 'var(--co-font-size-12)',
+    xxs: 'var(--co-font-size-10)',
+};
+const CoAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Display type: text shows initials, icon shows a Phosphor icon, image shows a picture */
+        this.type = 'text';
+        /** Size of the avatar */
+        this.size = 'md';
+        /** Phosphor icon name (type="icon"), defaults to "user" */
+        this.icon = 'user';
+        /** Icon weight */
+        this.iconWeight = 'regular';
+        /** Shape of the avatar */
+        this.shape = 'circle';
+        this.imgFailed = false;
+        this.handleImgError = () => {
+            this.imgFailed = true;
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : 56;
+        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;
+        const ariaLabel = this.type === 'text'
+            ? this.text
+            : this.type === 'image'
+                ? (_e = (_d = this.alt) !== null && _d !== void 0 ? _d : this.text) !== null && _e !== void 0 ? _e : this.icon
+                : this.icon;
+        const disc = (index.h("div", { class: {
+                'co-avatar': true,
+                [`co-avatar--${this.size}`]: true,
+                [`co-avatar--${this.type}`]: true,
+                'co-avatar--square': this.shape === 'square',
+                '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 ? (index.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' ? (index.h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (index.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;
+        return index.h("co-tooltip", { content: this.name }, disc);
+    }
+};
+CoAvatar.style = coAvatarCss();
 
 const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity 0.15s ease, transform 0.15s ease}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}`;
 
@@ -220,7 +311,7 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (index.h("div", { key: '6edc432c3bbc66db6044b28d38305242eaa939fb', class: "co-tooltip" }, index.h("div", { key: '58dcaedfd4f0f6584c6b634cf525d139ffbe3013', 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 }, index.h("slot", { key: 'de10b7bfdbdabfe2b79e2e7735e3dc372273cd5d' })), this.visible && this.content && (index.h("div", { key: '52f65ebaf96fd74adc37374302b0412999db6c39', id: "tooltip-panel", class: {
+        return (index.h("div", { key: '8ab4d7116108f417bbab303c915ddb3c043f6a17', class: "co-tooltip" }, index.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 }, index.h("slot", { key: 'd24dca7da5d8d25e6bb153fd224f3a2dbe15c2bd' })), this.visible && this.content && (index.h("div", { key: '7b1b9e5629d57f54345889f6b79f0cd40957d916', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
             }, role: "tooltip", popover: "manual", ref: (el) => {
@@ -229,7 +320,7 @@ const CoTooltip = class {
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && index.h("div", { key: '987c9d5483b847dfc44a6aee787e7586ead0a53e', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), index.h("span", { key: '48ff0c4dca75f96bfd3d03e31207ebb16a5c7773', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && index.h("div", { key: 'a2bb874fff12aba894ae13fb3cfddb6e5c2558c5', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), index.h("span", { key: '429590eda59470e35fc9dd005a97fb53af39c9e2', class: "co-tooltip__content" }, this.content)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -243,4 +334,5 @@ const CoTooltip = class {
 };
 CoTooltip.style = coTooltipCss();
 
+exports.co_avatar = CoAvatar;
 exports.co_tooltip = CoTooltip;