@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

package/dist/collection/components/co-action-bar/co-action-bar.js

@@ -0,0 +1,247 @@
+import { h } from "@stencil/core";
+/**
+ * co-action-bar — pill flotante oscuro para acciones masivas (selection bar).
+ *
+ * Superficie INVERSA (surface-primary) + texto inverso, SOLID (regla del DS
+ * para flotantes: nada de glass). El host queda SIEMPRE montado (DOM
+ * persistente): `open` togglea la clase `co-action-bar--open` con transición
+ * translateY(8px)+opacity (~180ms). Con un `v-if` del consumidor la
+ * transición y el primer anuncio aria-live serían código muerto — NO usar.
+ *
+ * Anclaje opt-in (calca el contrato de co-fab): `position="bottom-center"`
+ * aplica fixed + centrado en el HOST, separado del borde inferior por
+ * `--co-action-bar-offset` (fallback 24px) y clampado en ancho por
+ * `--co-action-bar-inline-margin` (fallback 24px, VAR PROPIA — desacoplada
+ * a propósito del offset vertical: un consumidor que sube el offset para
+ * despejar toasts/FAB [ej. 92px] no debe perder 2× esos px de ancho
+ * disponible, o la barra desborda con varias acciones). La política de
+ * contenido cuando no cabe (colapsar labels a icon-only, abreviar el conteo)
+ * es del CONSUMIDOR — el componente no scrollea ni reordena.
+ *
+ * @slot - Acciones de la barra (co-button surface="dark", divisores <hr>, …)
+ * @slot label - Presentación custom del label. SOLO presentación: el anuncio
+ *               aria-live SIEMPRE sale del nodo sr-only prop-driven del
+ *               shadow, así que el consumidor que slottea label DEBE seguir
+ *               pasando la prop `label` para que el anuncio exista.
+ * @part bar - Contenedor pill
+ * @part label - Nodo de presentación del label
+ * @part actions - Contenedor del slot de acciones
+ * @part dismiss - Botón X de descarte (host del co-icon-button interno)
+ */
+export class CoActionBar {
+    constructor() {
+        /** 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 (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' }, h("span", { key: '9f2d3d5729fd150e5aa0c487067c7c8ad6cd8b59', class: "co-action-bar__live", "aria-live": "polite" }, this.liveText), h("span", { key: 'd2617507df8f2b48a743c1bb20482d9cc2e227df', class: "co-action-bar__label", part: "label" }, h("slot", { key: 'aad415247f017bd8ea38e38f84a0cd768a2f6f38', name: "label" }, this.label)), h("div", { key: '8999cd574e430246824effda0bfa531d62a3530a', class: "co-action-bar__actions", part: "actions" }, h("slot", { key: 'f06636fd076da38bc07982637f7def5d75df733e' })), this.dismissible !== false && (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 is() { return "co-action-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-action-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-action-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visibilidad. El DOM persiste; open solo togglea la clase --open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del conteo/estado (\"3 elementos seleccionados\"). Fuente \u00DANICA del anuncio aria-live."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra la X de descarte (emite coDismiss)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom-center' | 'none'",
+                    "resolved": "\"bottom-center\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Anclaje opt-in: 'bottom-center' aplica fixed+centrado en el HOST v\u00EDa\n:host([position='bottom-center']) \u2014 por eso la prop se REFLEJA a\natributo. 'none' deja el flujo normal (consumidores draggable/absolute\nposicionan ellos, como co-fab)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'none'"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del role=\"group\". Cae al `label` si no se pasa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "liveText": {},
+            "animated": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coDismiss",
+                "name": "coDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en la X de descarte."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "onLabelChange"
+            }];
+    }
+}

package/dist/collection/components/co-app-shell/co-app-shell.js

@@ -16,10 +16,10 @@ export class CoAppShell {
         this.contentCard = true;
     }
     render() {
-        return (h(Host, { key: 'eba2c0de5107ee99f46dd0f58e93c7957b635fc6' }, h("aside", { key: 'd70fd877fb8b0341f1a93d0c96f7e94ccc67a5bc', class: "sidebar", part: "sidebar" }, h("div", { key: '712d562d0137d49073264464a4656efa13505080', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: '3414826e8939d2cd01f1fcdca7dadf1ec6c6921e', name: "sidebar-header" })), h("div", { key: '2f9ec77ce51b77048130c042a7c275b8f1169b68', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: '6291e33cce9afcfb59fac200629f899206d667eb', name: "sidebar" })), h("div", { key: 'e3314bda8652362d2570960a0ee65fb843d6e07f', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: 'e2b09d7a7435e0c29f3ac43b9a4200763964d52e', name: "sidebar-footer" }))), h("div", { key: '73081c14cf2f04ad4b0062007287edea09bb3a88', class: "main", part: "main" }, h("div", { key: '5e3dbe0b27716f815972ea39dda4479b2072872c', class: "main__card", part: "card" }, h("header", { key: '3df713d4c3a015ba14366433770cfba66e9b8bbc', class: "main__header", part: "header" }, h("slot", { key: '8e36000c6195f22fb7abe54d1adfb026374d9248', name: "navbar" })), h("main", { key: '63cda7e07239d551fb950e12cce998e2fe9271c7', class: {
+        return (h(Host, { key: '7a45ab21e3ad256e25f05df33ad827931532c34a' }, h("aside", { key: '5ca5469a35e630b4ab01be23cae46efc43cb1519', class: "sidebar", part: "sidebar" }, h("div", { key: 'f4243197b46e67b4d632aa8abad803b07f471bb2', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: 'b609c8272c05f7e4cbb2c8ae1ab0c24430541f84', name: "sidebar-header" })), h("div", { key: '72ca1118e1eeb6b5f3467c16c82dac60c4dc4042', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: '48c65d150a4836996cf7406f32142bcb86e545df', name: "sidebar" })), h("div", { key: 'be09567b81d7abae1738decfd30b9b7b6edb47f2', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: 'd202466aa14916d7fd3be163a615ce1156151150', name: "sidebar-footer" }))), h("div", { key: 'd8b6f0cfdf0c4123b413d5d8bad78813fb7ba1a9', class: "main", part: "main" }, h("div", { key: '0efa85801eaa0cd339875ff4a1fd9cedcd715751', class: "main__card", part: "card" }, h("header", { key: 'befa647b3822ed055166c3e2da9aca9fb54c1204', class: "main__header", part: "header" }, h("slot", { key: 'b08034b07963d178f3b8e9cee16d3975f97a7b90', name: "navbar" })), h("main", { key: '3b0adfc33dd08b08fb2edf84a5f098c0ff7d1003', class: {
                 'main__content': true,
                 'main__content--card': this.contentCard,
-            }, part: "content" }, h("slot", { key: '7ccab85592e8e9efdc2802f0147ad8b5ad749899' }))))));
+            }, part: "content" }, h("slot", { key: '4c38a0a04548bc6cd2cc04d9b3fb095f5548fdde' }))))));
     }
     static get is() { return "co-app-shell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,58 @@
+: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; }
+/* On load failure, make the (disabled) play button read as an error, not just a
+   dimmed play: error surface + warning icon. Placed after `:disabled` so it wins
+   the equal-specificity tie and overrides the dim. */
+.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; } }