@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-drawer/co-drawer.css

@@ -89,6 +89,17 @@
 
 .co-drawer__header-content { flex: 1; min-width: 0; }
 
+.co-drawer__heading-row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+}
+
+.co-drawer__icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-secondary);
+}
+
 .co-drawer__heading {
   margin: 0;
   font-size: var(--co-font-size-18);
@@ -100,6 +111,14 @@
   white-space: nowrap;
 }
 
+.co-drawer__description {
+  margin: var(--co-spacing-xs) 0 0;
+  font-size: var(--co-font-size-13);
+  font-weight: 400;
+  color: var(--co-semantic-text-muted);
+  line-height: 1.4;
+}
+
 .co-drawer__close {
   display: flex;
   align-items: center;

package/dist/collection/components/co-drawer/co-drawer.js

@@ -15,6 +15,10 @@ export class CoDrawer {
         this.size = 'md';
         /** Drawer title (used when `header` slot is empty) */
         this.heading = '';
+        /** Optional description shown below the heading */
+        this.description = '';
+        /** Optional Phosphor icon name shown before the heading */
+        this.icon = '';
         /** Show close (X) button in header */
         this.closable = true;
         /** Close when clicking the backdrop */
@@ -52,12 +56,12 @@ export class CoDrawer {
         }
     }
     render() {
-        return (h("co-overlay", { key: '7f8f76010bc12983c86d0d38bbdb2f73d4f9a30f', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '690c564145cf4b6dcad6f2fd69837f215cc9dff1', class: {
+        return (h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '25bde1a909e3193f58b69b51a96ddc7047b127ad', class: "co-drawer__header", part: "header" }, h("div", { key: '8275159a2f5014beeccfa91e3f38e4553a8d4767', class: "co-drawer__header-content" }, h("slot", { key: 'c2c820b841b5db2967a33d14a95e17a4ab81c85a', name: "header" }, h("h2", { key: '9dd5bc6c6e5a7f82693a44b5ce3b325bf46df2d5', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading))), this.closable && (h("button", { key: 'e9f45d205e7ebf8518b7648b4173d265a781f692', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '35f4e707c886934c2bbc197e82e9962d0a0239ac', name: "x", size: 20 })))), h("div", { key: '7aa4cb9b859aead97347f2a9b2a95f905fee2c8d', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '76337250192da2fac77af76c0ea05d16acb6ea80', name: "tabs" })), h("div", { key: '7ed67e52ee496ab545d40c0869a427a50fc1b4d5', class: "co-drawer__body", part: "body" }, h("slot", { key: '433ba3a19c5a8b534907c2ca366b05e63fcf3e20' }), h("co-loader", { key: '0e0c33ca5205450f700e35e5664fb0d55c8ec0a6', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '88e2e9a8f5fc3b8e8fc4875d0eaf5a0953000f01', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'edf5528718a7ddd392776241efc248af028bbecf', name: "footer" })))));
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '3569d4b2a581eedc42637a769ab0d1e46f818c66', class: "co-drawer__header", part: "header" }, h("div", { key: '0e811a18325188b4e3ef4105370a88126ad1d98b', class: "co-drawer__header-content" }, h("slot", { key: '00f0249a2683fefc712de952055a229abdff2247', name: "header" }, h("div", { key: '8e817ae4ef809410799c66892a22f99f5f2bb053', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '4a1b54a9686c173c28e039cb54ba5d40a9327754', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: 'a09b2e8ffc080f8d73d8b480c32911bc1a36451f', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'bf2c3b8fca185608120387bbccb007317b34d09a', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: 'b1bb85ea967aac2c14e5d86324c222ce44d168ef', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'dd95e54ae9b3152d001b864cceba60cd65561580', name: "x", size: 20 })))), h("div", { key: '5049854b50e2e1f42faca4fc8c2fca705e4731a5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '13f4acf903542f287d7f8047280dfe4c211de1d3', name: "tabs" })), h("div", { key: '208ff3f785ae347a385518ac217eb05927366836', class: "co-drawer__body", part: "body" }, h("slot", { key: '938e78913ef13925b67512512a35a79f3f1a87c4' }), h("co-loader", { key: '624228401019ad3b8d3b14907268702c46c996e8', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '283d37c8784f59e77fc7009d98cf5dd83e71ed81', class: "co-drawer__footer", part: "footer" }, h("slot", { key: '85dfa2065ddca4b2ac6079aa50f85b0f61fdc8d0', name: "footer" })))));
     }
     static get is() { return "co-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -153,6 +157,46 @@ export class CoDrawer {
                 "attribute": "heading",
                 "defaultValue": "''"
             },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description shown below the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional Phosphor icon name shown before the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
             "closable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoEmptyState {
     render() {
-        return (h("div", { key: 'd414a4b9c7336d6f7cdd467a25be8287cbc61688', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '482eac0c4337a7b8eba92018a8a8f898f44793e1', class: "co-empty-state__icon" }, h("co-icon", { key: '8cb46703a9c8f34277fffd95ffbb1b14c0e89366', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '2517c9b2524aef5db6516908d63c8c9b4287a53d', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'a4793896bc598d7fbe92b367b8412f18d2643595', class: "co-empty-state__description" }, this.description)), h("div", { key: 'c68653bbc2012b6b8a967400ce3e49e29bc9ef9f', class: "co-empty-state__actions" }, h("slot", { key: '665dccd15ed54b78a0d3f13a94dcd8e65720c8c5' }))));
+        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' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-fab/co-fab.js

@@ -15,14 +15,14 @@ export class CoFab {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: 'd013eaa32fce0e86c428695f172cec6a268452cc', class: {
+        return (h("button", { key: '90ffc7d273a4aca5bbe3214d9f6ba3a8c5d063da', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
                 'co-fab--extended': isExtended,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '1fa1468cf3a1087a4bc4facc8a29553fe1073812', name: this.icon, size: iconSize }), this.label && h("span", { key: '0c2417e1af3a944dc13a879f39e4d0dd1d1f5e41', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '29745cdc0f20d21d4d5a130d523f7a6839a9927c', name: this.icon, size: iconSize }), this.label && h("span", { key: '9314aa4e634e2bb3280bc9015e6a60b265afca43', class: "co-fab__label" }, this.label)));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.css

@@ -0,0 +1,389 @@
+/* ============================================================
+   co-file-field — Figma "Adjuntos": dropzone with pill CTA +
+   previews grid + reorderable file rows.
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-file-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+/* ---- Labels ---- */
+.co-file-field__labels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-file-field__label {
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}
+
+/* ---- Drop-zone ---- */
+.co-file-field__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-md);
+  padding: var(--co-spacing-4xl) var(--co-spacing-2xl);
+  background: var(--co-semantic-surface-hover);
+  border: 1px dashed var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-sm);
+  cursor: pointer;
+  text-align: center;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.co-file-field__dropzone:hover {
+  border-color: var(--co-semantic-border-focus);
+}
+
+.co-file-field__dropzone--drag {
+  border-color: var(--co-semantic-border-focus);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-file-field__upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-md) var(--co-spacing-xl);
+  margin-bottom: var(--co-spacing-xs);
+  background: var(--co-semantic-surface-secondary);
+  color: var(--co-semantic-text-default);
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  box-shadow: var(--co-shadow-lg);
+  font-family: inherit;
+  font-size: var(--co-font-size-16);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.co-file-field__upload-btn:hover {
+  box-shadow: var(--co-shadow-xl, var(--co-shadow-lg));
+  transform: translateY(-1px);
+}
+
+.co-file-field__upload-btn co-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.co-file-field__dropzone-text {
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-18);
+  line-height: 1.25;
+}
+
+.co-file-field__dropzone-hint {
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-14);
+  line-height: 1.25;
+}
+
+/* Slotted host actions participate in the dropzone column directly. */
+.co-file-field__actions {
+  display: contents;
+}
+
+.co-file-field__input {
+  display: none;
+}
+
+/* ---- Uploaded section ---- */
+.co-file-field__uploaded {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-lg);
+  margin-top: var(--co-spacing-sm2);
+}
+
+.co-file-field__uploaded-title {
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-22);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.25;
+}
+
+/* ---- Previews grid ---- */
+/* Cards cap at the Figma size (~282px wide, 3/2): in the 576px design width
+   that yields the 2-col grid; wider fields gain columns instead of letting a
+   single preview balloon to half the form. */
+.co-file-field__previews {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 282px));
+  gap: var(--co-spacing-md);
+}
+
+.co-file-field__preview {
+  padding: 0;
+  border: none;
+  border-radius: var(--co-border-radius-sm);
+  overflow: hidden;
+  aspect-ratio: 3 / 2;
+  background: var(--co-semantic-surface-hover);
+  cursor: pointer;
+}
+
+.co-file-field__preview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+}
+
+.co-file-field__preview:hover img {
+  transform: scale(1.02);
+}
+
+/* ---- File rows ---- */
+.co-file-field__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+.co-file-field__row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-lg);
+  padding: var(--co-spacing-xl);
+  background: var(--co-semantic-surface-hover);
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-sm);
+}
+
+.co-file-field__row--error {
+  border-color: var(--co-semantic-status-error);
+}
+
+.co-file-field__row--dragging {
+  opacity: 0.5;
+}
+
+.co-file-field__row--drop-target {
+  border-color: var(--co-semantic-border-focus);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-file-field__drag-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--co-semantic-text-secondary);
+  cursor: grab;
+}
+
+.co-file-field__drag-handle:active {
+  cursor: grabbing;
+}
+
+.co-file-field__row-icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.co-file-field__row--error .co-file-field__row-icon {
+  color: var(--co-semantic-status-error);
+}
+
+.co-file-field__row-icon--spin {
+  animation: co-file-spin 0.8s linear infinite;
+}
+
+@keyframes co-file-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.co-file-field__row-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs);
+}
+
+.co-file-field__row-name {
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-14);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-file-field__row-error {
+  color: var(--co-semantic-status-error);
+  font-size: var(--co-font-size-12);
+}
+
+.co-file-field__row-size {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* ---- Progress bar ---- */
+.co-file-field__progress {
+  position: relative;
+  height: 4px;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-surface-hover);
+  overflow: hidden;
+}
+
+.co-file-field__progress-bar {
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-border-focus);
+  transition: width 0.2s ease;
+}
+
+/* When the host doesn't report progress, animate an indeterminate sweep. */
+.co-file-field__progress-bar:not([style]) {
+  animation: co-file-indeterminate 1.2s ease-in-out infinite;
+}
+
+@keyframes co-file-indeterminate {
+  0% {
+    left: -40%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* ---- Row action buttons (copy / remove) ---- */
+.co-file-field__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-secondary);
+  transition: color 0.15s ease;
+}
+
+.co-file-field__action:hover {
+  color: var(--co-semantic-text-default);
+}
+
+.co-file-field__action--copied,
+.co-file-field__action--copied:hover {
+  color: var(--co-color-primary-verde);
+}
+
+/* ---- Helper text ---- */
+.co-file-field__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-file-field__helper-icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+.co-file-field__helper-text {
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+}
+
+/* ---- States ---- */
+.co-file-field--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.co-file-field--invalid .co-file-field__dropzone,
+.co-file-field--error .co-file-field__dropzone {
+  border-color: var(--co-semantic-status-error);
+}
+
+.co-file-field__helper--error .co-file-field__helper-icon,
+.co-file-field__helper--error .co-file-field__helper-text {
+  color: var(--co-semantic-status-error);
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-file-field {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-file-field__labels {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-file-field__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-file-field > :not(.co-file-field__labels) {
+  grid-column: 2;
+  min-width: 0;
+}