@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -0,0 +1,329 @@
+import { h } from "@stencil/core";
+/**
+ * co-drive-card — a selectable Drive item card.
+ *
+ * A plain flex/grid surface that `co-card` cannot host: `co-card` projects its
+ * children into a shadow-DOM body that forces block flow, clips with
+ * `overflow:hidden`, locks a 16px radius + a real 1px border, and paints an
+ * opaque surface that occludes the selected accent tint. This component renders
+ * two faithful layouts instead — a `folder` flex row and a `file` column with a
+ * thumbnail — with an absolute corner select-chip, a 1.5px inset selection ring,
+ * and a shadow-sm + hairline hover.
+ *
+ * @slot thumb    - (file) The thumbnail region at the top of the card.
+ * @slot type     - (file) The file-type tile in the foot row. Falls back to
+ *                  <co-file-type-tile> when `ext` is set.
+ * @slot trailing - (folder) Trailing content after the star (e.g. a dots menu).
+ * @slot actions  - (file) The fading action affordance in the foot row.
+ */
+export class CoDriveCard {
+    constructor() {
+        /** Which layout to render. */
+        this.variant = 'folder';
+        /** Vertical rhythm / sizing. */
+        this.density = 'comfy';
+        /** Accent CSS color driving the icon tile, selection ring and select chip. */
+        this.accent = 'var(--co-color-primary-azul)';
+        /** Primary label (name). */
+        this.name = '';
+        /** Muted secondary line (meta). */
+        this.meta = '';
+        /** Whether the item is selected. Controlled — parent updates it on coToggleSelect. */
+        this.selected = false;
+        /** Whether the item is starred. */
+        this.starred = false;
+        /** (file) Whether the item is the active/current item — draws a heavier inset ring. */
+        this.active = false;
+        this.handleOpen = () => {
+            this.coOpen.emit();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.coOpen.emit();
+            }
+        };
+        this.handleToggleSelect = (e) => {
+            e.stopPropagation();
+            this.coToggleSelect.emit(!this.selected);
+        };
+        this.handleStar = (e) => {
+            e.stopPropagation();
+            this.coStar.emit();
+        };
+    }
+    renderSelectChip(checkSize) {
+        return (h("span", { class: "co-drive-card__select", part: "select", role: "checkbox", "aria-checked": String(this.selected), "aria-label": "Select item", onClick: this.handleToggleSelect }, this.selected && (h("svg", { class: "co-drive-card__check", width: checkSize, height: checkSize, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    renderFolder() {
+        const iconSize = this.density === 'compact' ? 20 : 24;
+        return [
+            this.renderSelectChip(12),
+            h("span", { class: "co-drive-card__tile", part: "tile" }, h("co-icon", { name: "folder", size: iconSize, weight: "fill" })),
+            h("div", { class: "co-drive-card__text" }, h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && h("span", { class: "co-drive-card__meta", part: "meta" }, this.meta)),
+            h("div", { class: "co-drive-card__trailing", part: "trailing" }, this.starred && (h("co-icon", { class: "co-drive-card__star", name: "star", size: 15, weight: "fill" })), h("slot", { name: "trailing" })),
+        ];
+    }
+    renderFile() {
+        return [
+            h("div", { class: "co-drive-card__thumb", part: "thumb" }, h("slot", { name: "thumb" })),
+            this.renderSelectChip(13),
+            h("span", { class: "co-drive-card__star-overlay", part: "star", role: "button", "aria-label": this.starred ? 'Unstar item' : 'Star item', onClick: this.handleStar }, h("co-icon", { name: "star", size: 17, weight: this.starred ? 'fill' : 'regular' })),
+            h("div", { class: "co-drive-card__foot", part: "foot" }, h("span", { class: "co-drive-card__type" }, h("slot", { name: "type" }, this.ext ? h("co-file-type-tile", { ext: this.ext, size: 26, radius: 7 }) : null)), h("div", { class: "co-drive-card__foot-text" }, h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && h("span", { class: "co-drive-card__sub", part: "meta" }, this.meta)), h("span", { class: "co-drive-card__actions", part: "actions" }, h("slot", { name: "actions" }))),
+        ];
+    }
+    render() {
+        const isFile = this.variant === 'file';
+        return (h("div", { key: 'f9e2b706825032260ad30201232bd9cf0d04d1ac', class: {
+                'co-drive-card': true,
+                [`co-drive-card--${this.variant}`]: true,
+                [`co-drive-card--${this.density}`]: true,
+                'co-drive-card--selected': this.selected,
+                'co-drive-card--starred': this.starred,
+                'co-drive-card--active': this.active && isFile,
+            }, part: "card", role: "button", tabIndex: 0, style: { '--dc-accent': this.accent }, onClick: this.handleOpen, onKeyDown: this.handleKeyDown }, isFile ? this.renderFile() : this.renderFolder()));
+    }
+    static get is() { return "co-drive-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-drive-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-drive-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'folder' | 'file'",
+                    "resolved": "\"file\" | \"folder\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which layout to render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'folder'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'comfy' | 'compact'",
+                    "resolved": "\"comfy\" | \"compact\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical rhythm / sizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "density",
+                "defaultValue": "'comfy'"
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent CSS color driving the icon tile, selection ring and select chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent",
+                "defaultValue": "'var(--co-color-primary-azul)'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary label (name)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "meta": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muted secondary line (meta)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meta",
+                "defaultValue": "''"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is selected. Controlled \u2014 parent updates it on coToggleSelect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "starred": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is starred."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "starred",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "(file) Whether the item is the active/current item \u2014 draws a heavier inset ring."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "ext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(file) File extension used to render a default <co-file-type-tile> in the foot when the `type` slot is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ext"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coOpen",
+                "name": "coOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the card is activated (click / Enter / Space)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coToggleSelect",
+                "name": "coToggleSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the select chip is toggled \u2014 emits the NEW selected state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "coStar",
+                "name": "coStar",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the star affordance is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/co-drop-zone/co-drop-zone.css

@@ -0,0 +1,49 @@
+/* co-drop-zone — drag overlay. Spec: audit-report lines 135–136 (3.17). */
+
+:host {
+  position: relative;
+  display: block;
+}
+
+/* Absolute overlay painted over the slotted content while dragging. */
+.co-drop-zone__overlay {
+  position: absolute;
+  inset: 12px;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  border-radius: 16px;
+  border: 2px dashed var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));
+  background: color-mix(
+    in srgb,
+    var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb)) 8%,
+    rgba(255, 255, 255, 0.85)
+  );
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  pointer-events: none;
+}
+
+/* 72×72 white rounded badge holding the upload icon, tinted by the accent. */
+.co-drop-zone__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 20px;
+  background: var(--co-color-base-blanco, #fff);
+  color: var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04));
+}
+
+.co-drop-zone__label {
+  font-family: var(--co-font-family-primary);
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--co-color-base-negro, #1f1c1b);
+}

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -0,0 +1,197 @@
+import { Host, h } from "@stencil/core";
+/**
+ * co-drop-zone — a drag-to-upload overlay.
+ *
+ * Wraps arbitrary slotted content and paints an absolute dashed overlay on top
+ * of it while a drag is in progress. Can be driven two ways:
+ *  1. Controlled — the consumer toggles `active` (e.g. from its own drag state).
+ *  2. Self-managed — the host listens for native dragenter/over/leave/drop and
+ *     flips `active` itself, emitting `coDragStateChange` and `coDrop`.
+ *
+ * Report ref: 3.17 (446–449); drag overlay spec: report lines 135–136.
+ */
+export class CoDropZone {
+    constructor() {
+        /** Whether the drag-to-upload overlay is visible. */
+        this.active = false;
+        /** Accent color for the dashed border, badge icon and tinted background. */
+        this.accent = 'var(--co-color-primary-azul)';
+        /** Overlay label text. */
+        this.label = 'Suelta para subir';
+        /** Phosphor icon name shown in the badge. */
+        this.icon = 'upload-simple';
+        /**
+         * Nested dragenter/dragleave counter. Without it, moving the cursor over a
+         * slotted child fires `dragleave` (from the parent) then `dragenter` (from the
+         * child), which would flicker the overlay off and on.
+         */
+        this.dragDepth = 0;
+        this.handleDragEnter = (e) => {
+            e.preventDefault();
+            this.dragDepth++;
+            this.setActive(true);
+        };
+        this.handleDragOver = (e) => {
+            // Required so the browser will fire a `drop` event on this element.
+            e.preventDefault();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = 'copy';
+        };
+        this.handleDragLeave = (e) => {
+            e.preventDefault();
+            this.dragDepth = Math.max(0, this.dragDepth - 1);
+            if (this.dragDepth === 0)
+                this.setActive(false);
+        };
+        this.handleDrop = (e) => {
+            e.preventDefault();
+            this.dragDepth = 0;
+            const files = e.dataTransfer ? Array.from(e.dataTransfer.files) : [];
+            this.setActive(false);
+            this.coDrop.emit(files);
+        };
+    }
+    setActive(next) {
+        if (this.active === next)
+            return;
+        this.active = next;
+        this.coDragStateChange.emit(next);
+    }
+    render() {
+        return (h(Host, { key: 'd226ecd72105f1d7123224a73cbd97815278d92a', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'bd89c2a02c19a463bbd1123b359a1c96f4652454' }), this.active && (h("div", { key: '7293c928999e6be658f79f653d2a886933250a8b', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'd30b7f79f026830e838a4814cd0c6e37f0fea5d5', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'e9e7276fb71e4b7af92f4408342ac0da95ab349b', name: this.icon, size: 34 })), h("span", { key: 'd7384806639985414c1178d4b239e1a52d7af87f', class: "co-drop-zone__label", part: "label" }, this.label)))));
+    }
+    static get is() { return "co-drop-zone"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-drop-zone.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-drop-zone.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the drag-to-upload overlay is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent color for the dashed border, badge icon and tinted background."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent",
+                "defaultValue": "'var(--co-color-primary-azul)'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overlay label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Suelta para subir'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Phosphor icon name shown in the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'upload-simple'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coDrop",
+                "name": "coDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the dropped files."
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "coDragStateChange",
+                "name": "coDragStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the internal drag-over state flips."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/co-empty-state/co-empty-state.css

@@ -47,3 +47,41 @@
 }
 
 .co-empty-state__actions:empty { display: none; }
+
+/* ---- variant: card ---------------------------------------------------- */
+.co-empty-state--card {
+  gap: var(--co-spacing-3xl, 32px);
+  padding: var(--co-spacing-5xl, 48px) var(--co-spacing-3xl, 32px);
+  background: var(--co-color-base-blanco, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8);
+  border-radius: var(--co-border-radius-lg, 16px);
+}
+
+.co-empty-state--card .co-empty-state__icon {
+  margin-bottom: 0;
+  background: var(--co-color-gray-100, #f6f6f6);
+  color: var(--co-color-gray-600, #585858);
+}
+
+.co-empty-state--card .co-empty-state__heading {
+  margin-bottom: 0;
+}
+
+.co-empty-state--card .co-empty-state__description {
+  margin-bottom: 0;
+  line-height: 1.35;
+  color: var(--co-color-gray-600, #585858);
+  max-width: 366px;
+}
+
+/* ---- size: l ---------------------------------------------------------- */
+.co-empty-state--l .co-empty-state__icon {
+  width: 98px;
+  height: 98px;
+}
+
+.co-empty-state--l .co-empty-state__heading {
+  font-size: var(--co-font-size-24, 24px);
+  font-weight: 500;
+  line-height: 1.25;
+}