@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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: '68397ba09dd6d82282d7db563661336ccc486386', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '85b31861da503e36312d14a941d3cc143cc07806', class: "co-empty-state__icon" }, h("co-icon", { key: '2592b0d3f395455a4bf9986ce91e7df38506baec', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: 'f949906b9403693d90b7591fa92232cb65820fcd', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '229b1ec71c70b1fdd5caa1e00b8013e5d0b55c8f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b24817feb623386a92d4c7442631f624828f9f4a', class: "co-empty-state__actions" }, h("slot", { key: 'f5819e1b60a761950b2f1c7d16ac40db9f120d97' }))));
+        var _a;
+        const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
+        return (h("div", { key: '4cf85c1fd72560c3fde039901adbac86a4fc147f', 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: '4f8e8922631a5b88a9e158c2a6235515e8d09022', class: "co-empty-state__icon" }, h("co-icon", { key: '66fe90f142047bd3c03f901443e91b9a654e2bfa', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: 'fba5fe8abb82a90902e069d2f06730a3240b3cff', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '82bb5115feb16737e9a6658a508ba6faa1ab1e24', class: "co-empty-state__description" }, this.description)), h("div", { key: '048fb44e84e107232753f0d203f512dba556338b', class: "co-empty-state__actions" }, h("slot", { key: 'd7b1111baa84f9eeda18606f18b721865678bfd5' }))));
     }
     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.js

@@ -146,10 +146,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: 'dca7d290407d0815ed127e9ea85bd9581ca1238d', class: "cal" }, h("div", { key: '739c0374461233ea08fb1d7ba9dd9104194d4348', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '70bc5571180aba131a52a6a46041f0a3a8227819', class: "cal__nav-group" }, h("button", { key: 'f0308bd1a9eb83b98aaabc9fcc7e08536f34e630', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '8979b382c37384f59f00f566afb9ade636944811', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'cb83fb82be3f902315c6d1072a3706dc0716fb9a', name: "caret-left", size: 16 })), h("button", { key: '4505ac7e1fdbe452349f36a696bde9a2f6a8b63e', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'fee0a868c53fc92ac1e31f8a6e582e3c651a727c', name: "caret-right", size: 16 }))), h("h2", { key: '4641c225889d32834236e4ff22d60b4777e1625d', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: 'dce81390ee349de59285e31506ec397aead8c1c5', class: "cal" }, h("div", { key: '58f3acb8a74558505aab88e95fbea15bc65cce2f', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '9249edf79de99180871667f813aa40e288f130b7', class: "cal__nav-group" }, h("button", { key: '2cb250065f64860466b141b6dcaffeef60158dcc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '15ebc01c5be71b48042735ee6247ad16a957493b', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'dc74fc8780144c952c7012cf0e984998650e96a7', name: "caret-left", size: 16 })), h("button", { key: 'e4d2ee75a2c8fa818d327a9d82fa23051ec8a24c', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'd489365423552d000655898ac267fdbfddd216c0', name: "caret-right", size: 16 }))), h("h2", { key: '370e61c61a12860d36b4a04cdbc5dee447fdfe46', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '152eacc1320a7b3d0e33c31e9c6cbf04cd756855', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '26677d79d63d957315c09df9b18597009c9681cc', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,6 +23,7 @@
 }
 
 /* ── Sizes ──────────────────────────────────────────────────── */
+.co-fab--xl { width: 64px; height: 64px; font-size: var(--co-font-size-16); } /* Figma FAB */
 .co-fab--l  { width: 56px; height: 56px; font-size: var(--co-font-size-16); }
 .co-fab--m  { width: 48px; height: 48px; font-size: var(--co-font-size-14); }
 .co-fab--s  { width: 40px; height: 40px; font-size: var(--co-font-size-14); }
@@ -32,14 +33,20 @@
   border-radius: var(--co-border-radius-lg);
 }
 
+.co-fab--extended.co-fab--xl { padding: 0 var(--co-spacing-xl); }
 .co-fab--extended.co-fab--l  { padding: 0 var(--co-spacing-xl); }
 .co-fab--extended.co-fab--m  { padding: 0 var(--co-spacing-lg); }
 .co-fab--extended.co-fab--s  { padding: 0 var(--co-spacing-md); }
 
 /* ── Variants ───────────────────────────────────────────────── */
 .co-fab--primary {
-  background: var(--co-semantic-surface-primary);
+  /* Figma FAB: Negro 80% + Blur_1 — vidrio oscuro. El backdrop-filter vive en
+     .co-fab (tiene border-radius propio) para que el esmerilado quede clipeado
+     a las esquinas redondeadas. */
+  background: var(--co-fab-bg, var(--co-color-opacity-negro-80, rgba(31, 28, 27, 0.8)));
   color: var(--co-semantic-on-primary);
+  -webkit-backdrop-filter: blur(40px);
+  backdrop-filter: blur(40px);
 }
 
 .co-fab--primary:hover:not(:disabled) {

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

@@ -13,16 +13,16 @@ export class CoFab {
         };
     }
     render() {
-        const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
+        const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: '4e5be05c3e525fa2de4930300f562d2da993cd60', class: {
+        return (h("button", { key: '508484d86d0d65218b8e5039ce81b6a1860347db', 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: 'a827e3c5bfc7fdd162c8618443eb6696a4659709', name: this.icon, size: iconSize }), this.label && h("span", { key: '879b3be3bc35fc7b2eeeebc9263e2d9a10e3f5ba', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '47e47f74b93a1cdbe706d6e0a577f4396a68507c', name: this.icon, size: iconSize }), this.label && h("span", { key: 'a4fd981b11c467261eba9de0731b37e01aae0ed2', class: "co-fab__label" }, this.label)));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -101,8 +101,8 @@ export class CoFab {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'l' | 'm' | 's'",
-                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "original": "'xl' | 'l' | 'm' | 's'",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
                     "references": {}
                 },
                 "required": false,
@@ -117,6 +117,25 @@ export class CoFab {
                 "attribute": "size",
                 "defaultValue": "'m'"
             },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for icon-only FABs (falls back to `label`/`icon`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: 'a4bc53a3deccc7ef04de56356583a8fbcbe39649', class: {
+        return (h("div", { key: '31d820478276fee18bf2df79dd277ef1cbcf2ac2', 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: '4d4c418ff76f72ac7b491dc5173078ebcecdfbb7', class: "co-file-field__labels" }, h("label", { key: 'afe9d0d47d50178270a4a4a7f9a90af4f8472958', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e4879bd87853fcbb0552d9e6835fb3934916c29f', required: this.required })))), showDropzone && (h("div", { key: 'f60920fe11c3d1020ffb6043f20f3a82e6905cb2', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'b7df2e7f427fb6306191c07aebd41b2a2c7303c6', class: "co-file-field__labels" }, h("label", { key: 'd3dcd5886777a09fea5d4082f4a941a24056184e', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '6cf4505b762c9335798de30362e1eac8bc6e123c', required: this.required })))), showDropzone && (h("div", { key: 'af761f6f87b10397bc3e5ebf3ee4c43c0c815449', 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) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'f9152f578e99a926a3b81996917f2a592b8d14cd', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '93a116c81906b5daaac81feb6d671d942d085bd8', name: "file-arrow-up", size: 18 }), h("span", { key: 'fb09b9218d6185d116d75368591b6b7e2be399b6' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'd4287e8a0070536125f09dfdd73925476a6cebcf', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '5626df4c28f2f5c4967abeb839db53a39bc547d8', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '40ec0e991be663ffe5f55618ed97de44221e9780', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '2037922c65407155a051533050bab4bbaa908633', name: "actions" })), h("input", { key: '74e2fd73161811ef41eec79786598f3bc86075d8', 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: 'cff78c1550847e20bcfe5b24fd6d14a5e80033d9', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'fa99dad43c4982f14bc330598d27d99d44e6516c', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '83cc2ebec6af1b1baa66a74eb620c82a8eff5569', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'acc3232ccadc13f72a84cc4e3dd2281499a583b7', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '72ab595ccd9a7f275cd214fcb17c15972057557a', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '686287ddfba61763e98e8753f078f8bc1ac98460', name: "file-arrow-up", size: 18 }), h("span", { key: '8faab79ab89c6a2fc83069ae7bcafb4b21feb416' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '761ab4b4e58490fe8e0024e6881a8d73fef5e7fd', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'c6a88193c0aacefa6bd1534600ad56d3577b2228', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'ecd504e94b4ab9a1784868a357399e766b2dd68c', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '4e6572288387694e7e43cfa7fd58b4fb1952be2c', name: "actions" })), h("input", { key: '708ef841bab08935f125e6aa4338f67502b8689f', 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: 'f7423a91e47af3fbc4eb8257569df98da889bebf', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'da179d8d456ac934ee0d88679cb9866f3d9af3a9', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '73ffb49c6090eb21c471f9cfe145df23b8fb8592', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'ecbc35245db8e66eca656423657a0223e33a156e', 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: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'ef2efaa2264b229e372679c00a554a88fed804a0', class: {
+        })))), helper && (h("div", { key: 'e171dcd572d9b82734433eaa20f44c85c2c24735', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7b9ddbcc88296ddb30cf6fe3d651afba544ef991', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '1090e1cd4508413ebda4ed649df1852be46f5fb5', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '3ba44c6324cd56a470dc4668a15b31c61b58b990', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '24c06c19e336ddb0f6a5266d9a9b84f7fbf3b80e', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,14 @@
+/* co-file-type-tile — extension-keyed icon on a tinted rounded square.
+   Size / radius / background / color are applied inline (dynamic per instance). */
+
+:host {
+  display: inline-flex;
+}
+
+.co-file-type-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,164 @@
+import { h } from "@stencil/core";
+/** Extension → type bucket. Unknown extensions fall back to `file`. */
+const EXT_TO_TYPE = {
+    pdf: 'pdf',
+    doc: 'doc',
+    docx: 'doc',
+    txt: 'txt',
+    md: 'txt',
+    xls: 'sheet',
+    xlsx: 'sheet',
+    csv: 'sheet',
+    png: 'image',
+    jpg: 'image',
+    jpeg: 'image',
+    gif: 'image',
+    svg: 'image',
+    webp: 'image',
+    mp4: 'video',
+    mov: 'video',
+    webm: 'video',
+    fig: 'design',
+    ai: 'design',
+    psd: 'design',
+    sketch: 'design',
+    zip: 'zip',
+    rar: 'zip',
+};
+/** Type → { icon, accent (foreground), tint (background) }. Exact values per design spec (audit 1.6). */
+const TYPE_META = {
+    pdf: { icon: 'file-pdf', accent: 'var(--co-color-secondary-rojo-100)', tint: 'rgb(255,236,236)' },
+    doc: { icon: 'file-text', accent: 'var(--co-color-primary-azul)', tint: 'var(--co-color-azul-100)' },
+    sheet: { icon: 'table', accent: 'var(--co-color-status-success)', tint: 'var(--co-color-verde-100)' },
+    image: { icon: 'image', accent: 'var(--co-color-secondary-violeta-100)', tint: 'rgb(233,232,255)' },
+    video: { icon: 'broadcast', accent: 'var(--co-color-secondary-naranja-100)', tint: 'rgb(255,236,220)' },
+    txt: { icon: 'text-align-left', accent: 'var(--co-color-gray-600)', tint: 'var(--co-color-gray-100)' },
+    design: { icon: 'sparkle', accent: 'var(--co-color-primary-rosado)', tint: 'var(--co-color-rosado-100)' },
+    zip: { icon: 'package', accent: 'var(--co-color-status-pending)', tint: 'var(--co-color-status-bg-pending)' },
+    file: { icon: 'file', accent: 'var(--co-color-gray-600)', tint: 'var(--co-color-gray-100)' },
+};
+export class CoFileTypeTile {
+    constructor() {
+        /** Tile edge length in px (React uses 44 / 34 / 26). */
+        this.size = 44;
+        /** Corner radius in px (React uses 11 / 9 / 7). */
+        this.radius = 11;
+        /** When true, use the type's tint/accent colors; when false, neutral gray-100 / gray-600. */
+        this.colorTags = true;
+    }
+    render() {
+        var _a, _b;
+        const key = ((_a = this.ext) !== null && _a !== void 0 ? _a : '').trim().toLowerCase().replace(/^\./, '');
+        const type = (_b = EXT_TO_TYPE[key]) !== null && _b !== void 0 ? _b : 'file';
+        const meta = TYPE_META[type];
+        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: 'e894b848be911777d8a91388050c10a678bdaa1c', class: {
+                'co-file-type-tile': true,
+                [`co-file-type-tile--${type}`]: true,
+                'co-file-type-tile--mono': !this.colorTags,
+            }, part: "tile", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: `${this.radius}px`,
+                background,
+                color,
+            } }, h("co-icon", { key: 'd7dd6f61ba7155b4e2c0f38cc59a93ea647217b1', name: meta.icon, size: iconSize, weight: "fill" })));
+    }
+    static get is() { return "co-file-type-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-file-type-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-file-type-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "File extension (e.g. \"pdf\", \"docx\", \"png\"). Case-insensitive; a leading dot is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ext"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tile edge length in px (React uses 44 / 34 / 26)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "44"
+            },
+            "radius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner radius in px (React uses 11 / 9 / 7)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "11"
+            },
+            "colorTags": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, use the type's tint/accent colors; when false, neutral gray-100 / gray-600."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-tags",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: 'fb1894ff2656d74d2c892a6c857d98269604b04e', class: {
+        return (h("div", { key: 'edb5f0cdd150dcaa06230b90d3385d18684e2261', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'd56c274e9f44ae16b13a02ec262d0d14b109fc5b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '5e776db146922fc1271bff50b1b45245baf088b3', class: "co-helper-text__message" }, h("slot", { key: 'c3f93747e7b903296d24f60f87c9e3c29c2cb1cd' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '7f9cce7182cd39893e0f6abfab2d1a27c266ea17', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '38757c70aca1891bfd43b505d57d7455b22512b3', class: "co-helper-text__message" }, h("slot", { key: '9382e95880c71e3da4eed22ed6c14589c4890252' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '65fc20ae25aff18456c778d69454259755477cc8', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'abc90edf4c13e2de7d28f88f99b694dd8aecbdc9', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '867d361c4cd66611a38ccca0910ac93e9b41ed18', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'c0248eb38058439bbd5213df838ced7d7cc62bc0', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -33,7 +33,7 @@
   border: 1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle));
 }
 
-/* Ghost = fully transparent, no border, no frost until hover */
+/* Ghost = fully transparent, no border, no frost; tinted hover fill only */
 .co-icon-button--ghost {
   background: transparent;
   color: var(--co-icon-button-color, var(--co-semantic-text-default));
@@ -42,9 +42,16 @@
   backdrop-filter: none;
 }
 .co-icon-button--ghost:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 60%, transparent);
-  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  background: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+/* ─── SURFACE · DARK (on-dark theming) ──────────────────────── */
+/* Placed after the variants so it wins on icon color; opt-in via surface="dark" */
+.co-icon-button--dark {
+  color: var(--co-icon-button-color, var(--co-color-base-blanco, #fff));
+}
+.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled) {
+  background: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
 }
 
 /* ─── SIZES · ROUNDED ───────────────────────────────────────── */

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -2,10 +2,16 @@ import { h } from "@stencil/core";
 export class CoIconButton {
     constructor() {
         /**
-         * filled = dark background (negro), outlined = light background (blanco + border)
+         * filled = dark background (negro), outlined = light background (blanco + border),
+         * ghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark).
          * Matches Figma: Secundario → filled, Primario → outlined
          */
         this.variant = 'filled';
+        /**
+         * Surface the button sits on. `dark` → white icon + blanco-16 hover (on-dark theming).
+         * Defaults to `light` (no extra class → identical to previous behavior).
+         */
+        this.surface = 'light';
         /** Shape: pill or straight corners */
         this.shape = 'rounded';
         /**
@@ -25,15 +31,25 @@ export class CoIconButton {
         const iconSizeMap = {
             xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
-        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24;
-        return (h("button", { key: '3e53ed7dbb6d68bfecd22f29b16bb792bcc9c565', class: {
+        const resolvedIconSize = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ((_b = iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24);
+        const boxStyle = this.boxSize != null
+            ? {
+                width: `${this.boxSize}px`,
+                height: `${this.boxSize}px`,
+                borderRadius: this.shape === 'square'
+                    ? 'var(--co-border-radius-xs, 8px)'
+                    : 'var(--co-border-radius-full)',
+            }
+            : undefined;
+        return (h("button", { key: 'bf9aad13fe7360a7135da123ba555b64ee90cadc', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
                 [`co-icon-button--${this.size}`]: true,
+                'co-icon-button--dark': this.surface === 'dark',
                 'co-icon-button--disabled': this.disabled,
-            }, disabled: this.disabled, "aria-label": this.label || this.icon, part: "button" }, this.icon
-            ? h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })
+            }, style: boxStyle, disabled: this.disabled, "aria-label": this.label || this.icon, part: "button" }, this.icon
+            ? h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })
             : null));
     }
     static get is() { return "co-icon-button"; }
@@ -62,7 +78,7 @@ export class CoIconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "filled = dark background (negro), outlined = light background (blanco + border)\nMatches Figma: Secundario \u2192 filled, Primario \u2192 outlined"
+                    "text": "filled = dark background (negro), outlined = light background (blanco + border),\nghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark).\nMatches Figma: Secundario \u2192 filled, Primario \u2192 outlined"
                 },
                 "getter": false,
                 "setter": false,
@@ -70,6 +86,26 @@ export class CoIconButton {
                 "attribute": "variant",
                 "defaultValue": "'filled'"
             },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface the button sits on. `dark` \u2192 white icon + blanco-16 hover (on-dark theming).\nDefaults to `light` (no extra class \u2192 identical to previous behavior)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
             "shape": {
                 "type": "string",
                 "mutable": false,
@@ -110,6 +146,44 @@ export class CoIconButton {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "boxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the container box in px (width === height). When set, takes precedence\nover the `size` class dimensions \u2014 lets you hit 32/36/40 rounded squares.\nWhen omitted, the `size` class dimensions apply (unchanged behavior)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "box-size"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the rendered icon size in px. When set, takes precedence over the\nper-`size` icon default (which is otherwise unchanged \u2014 e.g. 16px at xs)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -188,25 +262,6 @@ export class CoIconButton {
                 "reflect": false,
                 "attribute": "icon-weight",
                 "defaultValue": "'regular'"
-            },
-            "iconSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Override the size-derived glyph px (e.g. 24). Falls back to the size default."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-size"
             }
         };
     }