@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,9 +1,18 @@
 import { h } from "@stencil/core";
+/**
+ * Botón de acción flotante para la acción principal de una pantalla: círculo
+ * con ícono o, con `label`, pastilla extendida. `position` lo fija a una esquina
+ * de la ventana. Wrapper Vue: `CoFab` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoFab {
     constructor() {
+        /** Ícono Phosphor (default `plus`). */
         this.icon = 'plus';
+        /** Estilo: `primary` (negro sólido), `secondary` o `stroke`. */
         this.variant = 'primary';
+        /** Diámetro: `xl` 64 · `l` 56 · `m` 48 (default) · `s` 40 px. */
         this.size = 'm';
+        /** Deshabilita el botón: no emite `coClick`. */
         this.disabled = false;
         /** Fixed position on screen */
         this.position = 'none';
@@ -28,7 +37,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: 'f0d1612601922430df403628c5349b322ee8e88d', class: {
+        return (h("button", { key: 'cae304a87d9ad88c7ea2f1d2f926d018250e6128', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +45,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'fc53d94af9263b20cfce36656608962158d480ab', name: this.icon, size: iconSize }), this.label && (h("span", { key: '5a16cdace79b8fb7b6ead260d14ee4ae018ed02b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'a1384ce9899fb2cbf5f4917cca49fb41480d82f6', name: this.icon, size: iconSize }), this.label && (h("span", { key: 'c5d7370d87478218dcce73c3c1d3edbf1c5c4a01', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -64,7 +73,7 @@ export class CoFab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor (default `plus`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -84,7 +93,7 @@ export class CoFab {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto: convierte el c\u00EDrculo en una pastilla extendida (o se revela con `expandOnHover`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +112,7 @@ export class CoFab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estilo: `primary` (negro s\u00F3lido), `secondary` o `stroke`."
                 },
                 "getter": false,
                 "setter": false,
@@ -123,7 +132,7 @@ export class CoFab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Di\u00E1metro: `xl` 64 \u00B7 `l` 56 \u00B7 `m` 48 (default) \u00B7 `s` 40 px."
                 },
                 "getter": false,
                 "setter": false,
@@ -162,7 +171,7 @@ export class CoFab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el bot\u00F3n: no emite `coClick`."
                 },
                 "getter": false,
                 "setter": false,
@@ -221,7 +230,7 @@ export class CoFab {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en el bot\u00F3n (no se emite con `disabled`). Sin `detail`."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -9,6 +9,7 @@ import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncat
  * in-memory CustomEvent detail, never a serialized attribute); the host uploads
  * them and feeds the resulting state back through the controlled `files` prop.
  * This mirrors `co-ref-field` (the WC emits intent, the host does the I/O).
+ * Wrapper Vue: `CoFileField` de `@prolibu-suite/cobalt-vue`.
  *
  * @part wrapper - Root container
  * @part label - The field label
@@ -28,9 +29,13 @@ import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncat
  */
 export class CoFileField {
     constructor() {
+        /** Deshabilita el campo: no acepta archivos ni acciones. */
         this.disabled = false;
+        /** Solo lectura: muestra los archivos sin permitir subir, quitar ni reordenar. */
         this.readonly = false;
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Varios archivos: lista de subidos (con `max` y reordenamiento opcional); sin él, un solo archivo. */
         this.multiple = false;
         /** Max number of files (multiple mode). */
         this.maxFiles = 100;
@@ -358,12 +363,12 @@ export class CoFileField {
         const previews = this.previewItems();
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '47a8258c141901fcb3621a24d638f0849946172e', class: {
+        return (h("div", { key: 'ee6fa70ea7fd466ec315eff1b6f3d044b1c6c6d9', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '603d04815a5730f45a2462d6c2904de4c7aa83af', class: "co-file-field__labels" }, h("label", { key: 'e280970feef1f6fad7c9ce336a5002746231a7c6', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '075b35392df1a5be556dcc9dcbd2130d0a3c91a1', required: this.required })))), showDropzone && (h("div", { key: 'd9dec9f08bc063239bd7b75acc43813ab3f9aebb', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '48a181a0cb1e0c53da9d61a856f3d2cc5e97d079', class: "co-file-field__labels" }, h("label", { key: '47f162d9fdad44d4c8c8f7756c901eea216b7627', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '4549d57f016e2874ea7b141d9dc83e09c38bdbf3', required: this.required })))), showDropzone && (h("div", { key: '3d16ff2e38de335e5fba78931cd6b1b009603a70', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -371,7 +376,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '61afb508be3e46257e2ffdb2bdc62d66e37055ed', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '96bb8ef3107abbee44fb5bd7c80ff2cbf39915ec', name: "file-arrow-up", size: 18 }), h("span", { key: '53950664f09064e29d1427530058e0634b287a92' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'de085f9dac492ea1b7db278a34e25ec2a8baa1d3', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '1617a52c9773a31ff8617e7310401a95911ecc2f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'f6f07691b5ec339f2ae0fa302415dd3dba04fe69', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'b5332b03438a34a82ffb565b1d2901a69729af61', name: "actions" })), h("input", { key: '5d0089ebcd857f1fa97bedcd743ab0530e75715a', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'cec19c438ec510dbae564c33dd3e6b739e156294', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e97f2fe09fb30521d5b22238d2714d8f1002a2ed', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '569f37799d34182ff00996dd011232daf7f141a8', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'e9a2c51a238455e7887e8310c02ac739ebf89e4e', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '5a6fe016b2e26896a8b788bb1473c5434d71e85f', name: "file-arrow-up", size: 18 }), h("span", { key: 'e69793c228fef62c5c0aec07f5f038aa3e931b3b' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '7343bd26d1132ac6b0b0ded57f1a2a32f228d0e8', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'd7b68c8723c91b80b124298e29c9165c2489f59f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '38318d6e86a90cc8faf6955ea480b39d242d8122', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'ad9f134cd0f01b1ed61d8d8966d5a7d40bda0812', name: "actions" })), h("input", { key: '8a3b769794a89213a1f02f0b82899e624a5578d6', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '8040d77615d29a691bc2087eddd7298b3922066c', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e4660cdfe20c1b4669b57a4474234161bac4c812', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '636e3e35dcb8ad263361e1b652dca23b499e5354', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
             const key = this.keyFor(item);
             const video = isVideo(item);
             // A video without a usable poster still gets a card — the
@@ -382,7 +387,7 @@ export class CoFileField {
                     'co-file-field__preview': true,
                     'co-file-field__preview--video': video,
                 }, part: "preview", type: "button", key: `prev-${key}`, title: item.name, "aria-label": `${video ? s.playVideo : s.openPreview}: ${item.name}`, onClick: () => this.handlePreviewOpen(item) }, showImg && (h("img", { src: video ? poster : item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })), video && (h("span", { class: "co-file-field__preview-play", "aria-hidden": "true" }, h("span", { class: "co-file-field__preview-play-badge" }, h("co-icon", { name: "play", size: 20, weight: "fill" })), !poster && (h("span", { class: "co-file-field__preview-ext" }, fileExtension(item).toUpperCase()))))));
-        }))), h("ul", { key: '2de5c71b79f82cd50c5aea5818d9848956eeb1eb', class: "co-file-field__list", part: "list" }, items.map((item) => {
+        }))), h("ul", { key: 'b67b8c43f8c02c65e780b3fa644123bf0f29d69b', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -406,10 +411,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
-        })))), helper && (h("div", { key: 'a6a14de91f12490b54717153520e3f59b9c9ef10', class: {
+        })))), helper && (h("div", { key: 'ff75602503a198d8598d2b35fd881c848a7b76d6', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '500ff53b0e1b4f894891bfc3f442ca170a2da2d0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'c723bcbf23a6bcecb9f781aede09120f78fe9b55', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'af79e0b999c781560c316023897aaa850b1d6ae0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'b5af4dab0d3c7dc317265604159a95f3bf8d200d', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }
@@ -437,7 +442,7 @@ export class CoFileField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -456,7 +461,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo: no acepta archivos ni acciones."
                 },
                 "getter": false,
                 "setter": false,
@@ -476,7 +481,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra los archivos sin permitir subir, quitar ni reordenar."
                 },
                 "getter": false,
                 "setter": false,
@@ -496,7 +501,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -516,7 +521,7 @@ export class CoFileField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Varios archivos: lista de subidos (con `max` y reordenamiento opcional); sin \u00E9l, un solo archivo."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -1,5 +1,12 @@
 import { h } from "@stencil/core";
 import { resolveFileTileType, TYPE_META } from "./co-file-type-tile.utils";
+/**
+ * Ícono de tipo de archivo (según la extensión) sobre un cuadrado redondeado
+ * tintado: PDF, documento, planilla, imagen… Wrapper Vue: `CoFileTypeTile` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part tile - El cuadrado con el ícono.
+ */
 export class CoFileTypeTile {
     constructor() {
         /** Tile edge length in px (React uses 44 / 34 / 26). */
@@ -15,7 +22,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: '0cbc40f94f5d917b4f3c35e0a9678daa81a58624', class: {
+        return (h("span", { key: 'da0b0b3e48e1847bd7c74e32bec23abc074f53a7', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -25,7 +32,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'c5245ababcc734116d4e71dd48e41bf66d02fdff', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '70034ff2279181498ba2481fb3709cae3016901d', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-gradient-bar/co-gradient-bar.css

@@ -0,0 +1,143 @@
+/* co-gradient-bar — barra de paradas de un degradado (popover de relleno) */
+
+/**
+ * @prop --co-gradient-bar-handle-halo: Anillo exterior de 1px de los tiradores (default transparente); da silueta sobre fondos oscuros.
+ * @prop --co-gradient-bar-handle-shadow: Sombra de los tiradores (default `--co-shadow-sm2`; `none` la quita).
+ */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Inset de 8px a cada lado: un handle de 16 centrado en 0% o 100% queda justo
+   dentro del host, sin sobresalir. Arriba, 9px: el cuadrado va centrado sobre
+   el borde superior del track (maqueta Figma 05-rect-gradiente), así que
+   sobresale 8px + 1px de halo opcional. */
+.co-gradient-bar {
+  position: relative;
+  padding: 9px 8px 0;
+  box-sizing: border-box;
+}
+
+/* ── Track ─────────────────────────────────────────────────────────────── */
+.co-gradient-bar__track {
+  position: relative;
+  height: 24px;
+  border-radius: 6px;
+  cursor: copy;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Damero debajo del degradado cuando alguna parada es translúcida. */
+.co-gradient-bar--transparent .co-gradient-bar__track {
+  background: conic-gradient(var(--co-color-gray-200) 25%, #ffffff 0 50%, var(--co-color-gray-200) 0 75%, #ffffff 0) 0 0 / 12px 12px;
+}
+
+.co-gradient-bar__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+/* Borde hairline por encima del degradado; como box-shadow interior no corre
+   el contenido (0% y 100% coinciden con los bordes del track). */
+.co-gradient-bar__track::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-hairline);
+  pointer-events: none;
+}
+
+/* ── Handles ───────────────────────────────────────────────────────────── */
+/* Cuadrado de 16 centrado SOBRE EL BORDE SUPERIOR del track (centro = y del
+   borde), como en la maqueta: la mitad de arriba queda fuera de la barra y el
+   puntero apunta hacia abajo, dentro del degradado. */
+.co-gradient-bar__handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  border-radius: 3px;
+  border: 2px solid var(--co-color-opacity-negro-16);
+  /* Chip partido como en Figma: mitad izquierda el color opaco, mitad derecha
+     el color real (con su alpha) sobre un damero. En un stop opaco ambas
+     mitades son iguales y el chip se ve liso. */
+  background:
+    linear-gradient(to right, var(--co-gradient-bar-stop-opaque, var(--co-gradient-bar-stop-color)) 50%, transparent 50%),
+    linear-gradient(var(--co-gradient-bar-stop-color), var(--co-gradient-bar-stop-color)),
+    conic-gradient(var(--co-color-gray-200) 25%, #ffffff 0 50%, var(--co-color-gray-200) 0 75%, #ffffff 0) 0 0 / 6px 6px;
+  /* Halo de 1px por fuera, opcional: el export de Figma no lo trae, así que el
+     default es transparent; el host lo enciende con
+     --co-gradient-bar-handle-halo (p.ej. blanco-80) si necesita silueta sobre
+     un tramo del degradado del mismo color. No cambia los 16px.
+     Sombra del handle: variable con el default de siempre (--co-shadow-sm2)
+     como fallback; el export de Figma (05-rect-gradiente) NO lleva sombra en
+     los handles, así que el host que quiera el look exacto pone
+     `--co-gradient-bar-handle-shadow: none`. Sin la variable, cero cambio. */
+  box-shadow:
+    0 0 0 1px var(--co-gradient-bar-handle-halo, transparent),
+    var(--co-gradient-bar-handle-shadow, var(--co-shadow-sm2));
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  z-index: 1;
+}
+
+/* Puntero 6×2 colgando del cuadrado hacia abajo (justo bajo el borde
+   exterior; el containing block es la caja de padding, de ahí el +2px del
+   borde), del color del trazo. */
+.co-gradient-bar__handle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 2px);
+  width: 6px;
+  height: 2px;
+  transform: translateX(-50%);
+  border-radius: 1px;
+  background: var(--co-color-opacity-negro-16);
+}
+
+.co-gradient-bar__handle--selected {
+  border-color: var(--co-semantic-accent);
+  z-index: 2;
+}
+
+.co-gradient-bar__handle--selected::after {
+  background: var(--co-semantic-accent);
+}
+
+/* Anillo de foco por teclado — solo :focus-visible (misma regla que co-icon-button). */
+.co-gradient-bar__handle:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--co-gradient-bar-handle-halo, transparent),
+    0 0 0 2px var(--co-semantic-border-focus),
+    var(--co-gradient-bar-handle-shadow, var(--co-shadow-sm2));
+}
+
+.co-gradient-bar--dragging .co-gradient-bar__handle {
+  cursor: grabbing;
+}
+
+/* ── Disabled ──────────────────────────────────────────────────────────── */
+.co-gradient-bar--disabled {
+  opacity: 0.4;
+}
+
+.co-gradient-bar--disabled .co-gradient-bar__track,
+.co-gradient-bar--disabled .co-gradient-bar__handle {
+  cursor: not-allowed;
+}