@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -0,0 +1,285 @@
+:host {
+  display: block;
+}
+
+/* ─── Shared surface ─────────────────────────────────────────── */
+.co-drive-card {
+  --dc-accent: var(--co-color-primary-azul, #2563eb);
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 14px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--co-font-family-primary);
+  background: var(--co-color-base-blanco, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card:focus-visible {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* ─── FOLDER layout — flex row ───────────────────────────────── */
+.co-drive-card--folder {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: box-shadow 0.14s ease, background 0.12s ease;
+}
+
+.co-drive-card--folder.co-drive-card--comfy {
+  padding: 14px;
+}
+
+.co-drive-card--folder.co-drive-card--compact {
+  padding: 10px 12px;
+}
+
+.co-drive-card--folder:hover:not(.co-drive-card--selected) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--folder.co-drive-card--selected {
+  background: color-mix(in srgb, var(--dc-accent) 7%, white);
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Icon tile */
+.co-drive-card__tile {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--dc-accent) 12%, white);
+  color: var(--dc-accent);
+}
+
+.co-drive-card--comfy .co-drive-card__tile {
+  width: 44px;
+  height: 44px;
+}
+
+.co-drive-card--compact .co-drive-card__tile {
+  width: 38px;
+  height: 38px;
+}
+
+/* Name + meta text block */
+.co-drive-card__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.co-drive-card__name {
+  font-family: var(--co-font-family-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--co-color-base-negro, #1f1c1b);
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-drive-card__meta {
+  font-family: var(--co-font-family-primary);
+  font-size: 12px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 2px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Trailing region (star + slot) */
+.co-drive-card__trailing {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.co-drive-card__star {
+  display: inline-flex;
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── FILE layout — column with thumb ────────────────────────── */
+.co-drive-card--file {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: box-shadow 0.14s ease;
+}
+
+.co-drive-card--file.co-drive-card--comfy {
+  padding: 10px;
+}
+
+.co-drive-card--file.co-drive-card--compact {
+  padding: 8px;
+}
+
+.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected) {
+  box-shadow: inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+}
+
+.co-drive-card--file.co-drive-card--selected {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Thumb region */
+.co-drive-card__thumb {
+  display: block;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+.co-drive-card--comfy .co-drive-card__thumb {
+  height: 132px;
+}
+
+.co-drive-card--compact .co-drive-card__thumb {
+  height: 96px;
+}
+
+.co-drive-card__thumb ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.co-drive-card__thumb ::slotted(img) {
+  object-fit: cover;
+}
+
+/* File name overrides folder size */
+.co-drive-card--file .co-drive-card__name {
+  font-size: 13px;
+}
+
+.co-drive-card__sub {
+  font-family: var(--co-font-family-primary);
+  font-size: 11.5px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 1px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Foot row */
+.co-drive-card__foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px 2px;
+}
+
+.co-drive-card__type {
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.co-drive-card__foot-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fading action affordance — stays in layout, no reflow */
+.co-drive-card__actions {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--co-color-gray-400, #a0a0a0);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__actions {
+  opacity: 1;
+}
+
+/* Star overlay (file) */
+.co-drive-card__star-overlay {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--co-color-base-blanco, #fff);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__star-overlay,
+.co-drive-card--starred .co-drive-card__star-overlay {
+  opacity: 1;
+}
+
+.co-drive-card--starred .co-drive-card__star-overlay {
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── Corner select chip (both layouts) ──────────────────────── */
+.co-drive-card__select {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
+}
+
+.co-drive-card:hover .co-drive-card__select,
+.co-drive-card--selected .co-drive-card__select {
+  opacity: 1;
+}
+
+.co-drive-card--folder .co-drive-card__select {
+  top: 8px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+.co-drive-card--file .co-drive-card__select {
+  top: 16px;
+  left: 16px;
+  width: 22px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+/* Checked fill — placed after the variant rules so it wins on ties */
+.co-drive-card--selected .co-drive-card__select {
+  background: var(--dc-accent);
+  box-shadow: none;
+}
+
+.co-drive-card__check {
+  display: block;
+  pointer-events: none;
+}

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);
+}