@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

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

@@ -4,8 +4,20 @@ import { h } from "@stencil/core";
  * @slot - Action buttons
  */
 export class CoEmptyState {
+    constructor() {
+        /** Visual style: `plain` (default, current behavior) or `card` (framed white card). */
+        this.variant = 'plain';
+        /** Size scale. `l` grows the medallion (98px) and heading (24/500). */
+        this.size = 'm';
+    }
     render() {
-        return (h("div", { key: '6ceb9e648d3afd9d00d235be09c062b2271abf81', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '126201691f3b95f58c2e1e6a299bd76c6e2469a8', class: "co-empty-state__icon" }, h("co-icon", { key: '60e803bec3cac493264240203003f0b76a58b751', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '9b3a6fc68f92680fe93af4e17defd01979117e92', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'b78224486e9c3b12bb6c4ecccf937f613cc9853e', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b7c66fe9a617b553244f33d35ec515b2c00511ff', class: "co-empty-state__actions" }, h("slot", { key: '6e5cf479c0ecc6ccb0c718d5a062fbbc0836e6d8' }))));
+        var _a;
+        const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
+        return (h("div", { key: 'c7336e586fbce927c39b6f7e8d852849e0312e83', class: {
+                'co-empty-state': true,
+                [`co-empty-state--${this.variant}`]: true,
+                [`co-empty-state--${this.size}`]: true,
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'f58b6073926822e44fa22862ea907b664a61395e', class: "co-empty-state__icon" }, h("co-icon", { key: 'a4269c6f9926407f22dd1200b75186c0f37f7af1', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '94f7bc1e6c270253ab80c7dc54b2c3b080826d2f', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'fa263779ebe981cdbe4944883337a9daf8eaef2f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'e41f7fa89d2ee5d99793dedc377c50c0f983e8ab', class: "co-empty-state__actions" }, h("slot", { key: 'f81de2fc06cd14a6793fc1e5613d73f499482df3' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -77,6 +89,65 @@ export class CoEmptyState {
                 "setter": false,
                 "reflect": false,
                 "attribute": "description"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'plain' | 'card'",
+                    "resolved": "\"card\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style: `plain` (default, current behavior) or `card` (framed white card)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'plain'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'m' | 'l'",
+                    "resolved": "\"l\" | \"m\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size scale. `l` grows the medallion (98px) and heading (24/500)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'m'"
+            },
+            "iconWeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'",
+                    "resolved": "\"bold\" | \"duotone\" | \"fill\" | \"light\" | \"regular\" | \"thin\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Phosphor icon weight. Defaults to `light` (plain) / `regular` (card) when unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-weight"
             }
         };
     }

package/dist/collection/components/co-event-calendar/co-event-calendar.css

@@ -0,0 +1,146 @@
+/*
+ * co-event-calendar — shell chrome (toolbar + body). The grid itself is themed
+ * by co-calendar-month via --co-cal-* tokens; the shell only styles the toolbar,
+ * reusing semantic Cobalt tokens so dark mode and brand overrides apply for free.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  font-family: var(--co-font-family-primary);
+  color: var(--co-semantic-text-default);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+.cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────── */
+.cal__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-md);
+}
+
+.cal__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+}
+
+.cal__title {
+  flex: 1 1 auto;
+  margin: 0;
+  text-align: center;
+  font-size: var(--co-font-size-16, 16px);
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--co-semantic-text-default);
+}
+
+.cal__views-spacer {
+  /* keeps the title visually centered when no view switcher is shown */
+  flex: 0 0 auto;
+  inline-size: 1px;
+}
+
+.cal__btn {
+  height: 32px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+.cal__icon-btn {
+  height: 32px;
+  width: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__icon-btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__icon-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── View switcher ───────────────────────────────────────────── */
+.cal__views {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--co-semantic-surface-hover);
+  border-radius: var(--co-border-radius-xs);
+}
+.cal__view-btn {
+  height: 28px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xxs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.cal__view-btn--active {
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.cal__view-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── Body ────────────────────────────────────────────────────── */
+.cal__body {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
+}
+.cal__body co-calendar-month {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.cal__placeholder {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  color: var(--co-semantic-text-muted);
+  text-transform: capitalize;
+}