@prolibu-suite/cobalt-core 0.3.0 → 0.4.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: '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.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: '0c5af4d184497f5fc8c04cc62d66f572db2a7a01', class: "cal" }, h("div", { key: 'c75f5290fd13d52d82eb639d6aff951c13e40ed3', class: "cal__toolbar", part: "toolbar" }, h("div", { key: 'eca46b8aa1cd485dbeacf235a868065af736aee3', class: "cal__nav-group" }, h("button", { key: 'e9f1e03c8c94698d66aea9ee7a292e82c132d603', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '017d7b8a2f19cfe4785213d5d77f90ee895fbad5', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '296bdcdf30e130a085cc859a84eb3d590b9ef5b7', name: "caret-left", size: 16 })), h("button", { key: '53baaddc224a924fc06a5555cb297e05ee8785d9', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '736ae81e00e458fd1c71414ad8dcf309a13faee0', name: "caret-right", size: 16 }))), h("h2", { key: '87261ba9a5b7d7dd0ba3c3641c21d15ce37eebed', 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: 'f0962c6de9446110ef52455839a7cf5cb570cee0', 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.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: '4e5be05c3e525fa2de4930300f562d2da993cd60', class: {
+        return (h("button", { key: 'a3dd864b2e80488b07b9fc4214281a34045c3968', 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.label || this.icon }, h("co-icon", { key: '3d2e12a325d1ca7b006579f34e9c0c2d6f792a40', name: this.icon, size: iconSize }), this.label && h("span", { key: 'f209c549b6960bc4737763f8a47efb2771bb8aff', 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.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: '5f851ab10c6bae9b2f06ef5f1a7acd130eebf40b', 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: 'c97389b2d98e3c97e367425a354b7184c0915c0b', class: "co-file-field__labels" }, h("label", { key: '5ee9359c1d07c30179330fe8921aab9b4633d165', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0cc79f6ae165e74600152c1e1adaa2bd9a8133ee', required: this.required })))), showDropzone && (h("div", { key: '80be725bcd67b24d0fa086dabb82d033b6e68f9f', 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: '6378b733d6de2dfbefacfae2a33ebabe3557b013', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '6b6fd92b0ca0230375020952e05aee09c0d5d3f6', name: "file-arrow-up", size: 18 }), h("span", { key: 'de33f04a2715781a3a5853d051856b17625eac31' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '881304671a167b3052b37749457aa6d77773b3a9', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '331c798170b47a0fbe48fd6bb9c742c1927222e5', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '821977df4fd123864ebe2bef8576711addd89578', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'cab4df18f87f2b4f70790451ad7bcf4d83d66142', name: "actions" })), h("input", { key: 'fe9afd3562558f9a03d3f7fc1cfe8fbde84d290a', 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: '635ec6cd392c6e28e01ce90c1386db5c233de07f', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '433ef13bc077e247bd72601ce1e6b5f76ac3dba3', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '92f9a138e2317751554cd5c4a5a6c33c730ac909', 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: 'fc600da498880f6d07402204c5edadb87aa94d0c', 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: '6393f353fff2597d24e91850525068646d4563cc', 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: '7bd66efa2c2d2f35b3c11283fc28cd672a77e4e5', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '7744d3bd75b84354db79bb0796f4e3d2bc293d2e', 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: 'dd64643dbab1f850840ba3c6045284e42af0655f', 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: '816be0fe4d7934b7a45014c2ffb77850ba2ad4a5', 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: '732ca77f8a91d2f2f44f297034c08d3145ef1915', 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: '75913515f01d48a7075b2f222333dfc00db4a3aa', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '1598b419be64573b6e6c48f0f84be7ffebd7da48', class: "co-helper-text__message" }, h("slot", { key: '03c83e97d4690edb32ae1f88738a6baa7438d656' }, 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: '246bcceba97f0ebf49e12085dd57ea7cfff8824e', "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: 'fe485e37bf4942653906a587799c3e7ab9638783', 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: '7990e81b633e1a4c69527ffd393f33301903611f', 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"
             }
         };
     }

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

@@ -401,3 +401,61 @@
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-input__field { background: var(--co-semantic-surface-secondary); }
 }
+
+/* ============================================================
+   Fill — filled search-pill variant (fill=true)
+   Bespoke gray pill: no border/shadow, 10px radius, height by size.
+   Render layer already suppresses labels / helper / status / chips /
+   action, so only the field + its icon/input/clear are styled here.
+   Rules live at the end of the file so their (0,2,0) selectors win the
+   source-order tie against the equal-specificity size variants above.
+   ============================================================ */
+
+.co-input--fill .co-input__field {
+  background: var(--co-color-gray-100, #f6f6f6);
+  border: none;
+  box-shadow: none;
+  border-radius: 10px;
+  padding: 0 12px;
+  gap: var(--co-spacing-sm2);
+  min-height: 46px; /* md (default) */
+  font-size: 13.5px;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* Height by size — the search pill anchors at s = 38px */
+.co-input--fill.co-input--s .co-input__field  { min-height: 38px; }
+.co-input--fill.co-input--sm .co-input__field { min-height: 42px; }
+.co-input--fill.co-input--lg .co-input__field { min-height: 52px; }
+
+/* Native input: 13.5px, primary family, body tracking */
+.co-input--fill .co-input__native {
+  font-size: 13.5px;
+  font-family: var(--co-font-family-primary);
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+.co-input--fill .co-input__native::placeholder {
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+/* Search glyph — gray-400 */
+.co-input--fill .co-input__icon {
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+/* Plain-x clear — gray-400, darkens on hover */
+.co-input--fill .co-input__clear {
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+.co-input--fill .co-input__clear:hover {
+  color: var(--co-color-gray-600, #585858);
+}
+
+/* No focus ring in pill mode — the design is a flat gray pill */
+.co-input--fill.co-input--focused .co-input__field {
+  border-color: transparent;
+  box-shadow: none;
+}