@prolibu-suite/cobalt-core 0.7.0 → 0.9.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: '3548a603f2b815a2fd08c49325645d18da63300d', 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: '113c8106d50409e1feb1a3393bd6bfee512eae53', class: "co-action-bar__live", "aria-live": "polite" }, this.liveText), h("span", { key: 'a1d97aca67706c3d5260af28ea5bd6e5c2bce224', class: "co-action-bar__label", part: "label" }, h("slot", { key: '91d58fee83bf5b234481e8bc9353e7fb94faf946', name: "label" }, this.label)), h("div", { key: 'cc710ea2bdabe99bab3e2b03dbfe0d79b9508f42', class: "co-action-bar__actions", part: "actions" }, h("slot", { key: '41e26a49665ed6294826b1630cd27039abd1240f' })), this.dismissible !== false && (h("co-icon-button", { key: '1b7253ca63195f9169144634984d5da3c8142f7d', 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.css

@@ -19,7 +19,7 @@
   height: 100%;
   flex-shrink: 0;
   overflow: hidden;
-  transition: width 0.2s ease;
+  transition: width var(--co-motion-duration-base) var(--co-motion-ease-out);
   padding: var(--co-spacing-sm);
   padding-right: 0;
   box-sizing: border-box;

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: 'b81530338deb27cbf6cd7477f68c39bc9218bc00' }, h("aside", { key: '023cd3028d18aad6d3ad18c17dd9ae66560e167c', class: "sidebar", part: "sidebar" }, h("div", { key: '3287855013349c3e75b315ea6f8da35a28e473dd', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: 'bd82a6bca22dcb0058fe08f7e4b0fb3a5ed51fae', name: "sidebar-header" })), h("div", { key: '0226a4f9f41645ab7e89da48e6e5324c2755334d', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: '151d6e2dfb2ba62627d8f30d89fd0a7827b28429', name: "sidebar" })), h("div", { key: 'a5d1e73173da9a4b08bfe56fc22ed4a3ec494abe', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: '5531392bd7d8fd37407d6b423a125e4db168e7cd', name: "sidebar-footer" }))), h("div", { key: '542b36579d0aa7703c5509d96c29d180ca4477ca', class: "main", part: "main" }, h("div", { key: '9dc426144097434cf92c936aa9ff1495300a113f', class: "main__card", part: "card" }, h("header", { key: '1045a59aab51c9bcbdc81d270fd67f68f037164a', class: "main__header", part: "header" }, h("slot", { key: '5770b6d5ec74a4a66dbbd78975e56166f3ae7481', name: "navbar" })), h("main", { key: 'c9e972900a046985f29004fa637e26149bb8d7de', class: {
                 'main__content': true,
                 'main__content--card': this.contentCard,
-            }, part: "content" }, h("slot", { key: '7ccab85592e8e9efdc2802f0147ad8b5ad749899' }))))));
+            }, part: "content" }, h("slot", { key: 'f7fec778bc6365da00b6c780c948618c88be489b' }))))));
     }
     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,57 @@
+: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 var(--co-motion-duration-fast); }
+.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;
+}
+