@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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: 'ec349a2beeea1fb9195d9e117056270c125dce4c', 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: 'e89a935967628ef58775a1449a44b19dea35bfe4', class: "co-file-field__labels" }, h("label", { key: 'e24cccf041b29fc39706dacb8d3eb3c06fd8ee9d', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'ae32e17c9411158e0f69cd508f12e56bd56ed7a4', required: this.required })))), showDropzone && (h("div", { key: '6216f8858dc7195dfe3999a8ac636409ef12eb3d', 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: 'ee667570d661b19a8fbd43f8673fc4817c95c6db', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '8f6663547642c9005f706e8f7289ffe58f6226c5', name: "file-arrow-up", size: 18 }), h("span", { key: '39e1d8c2a875b9e6249138d4b4b9ce0d2dbf4ad4' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '2f317b69e38a99ec24d661145efbdb9d77ff2f67', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'ba3c34747e83aa42e3eb0a821ed49dd4b27457b1', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'b44d49306d37ec6569ee85047b57298dbf97bf96', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '36a17ecbc89b70cc140045ce1b2c6b251d5363e7', name: "actions" })), h("input", { key: '07d10d77c3673fd8f92b5eacadf342469400c1cb', 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: '5fb766f14920218f0cc3cfa80256af8542dbc44e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'a133328f198a7d7947cbfb1e77b822f70310ec1a', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'cef939986d1f70d907dcb6f3f048b4fb1fe5156d', 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: 'db43db11520f245328ee76de839112d7a4c766e5', 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: 'ce339d27da1fd8a224bebd1a7d7ed16a3571cfec', 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: '691ff2e82d45ee55e8087dd86c4389f05ecee268', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '0f35c1734cbfd2bae2be1d85948fcca8ad92e5c2', 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: '730e2f2657f5656ea6992bff86be3903615c51d1', class: {
+        return (h("div", { key: '732ca77f8a91d2f2f44f297034c08d3145ef1915', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '8612481e2e111104047506dc8ca93980723ed6b2', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9842f85b0f184f4d5e05c989535add23d4c423cc', class: "co-helper-text__message" }, h("slot", { key: '940cf28c1c0f5033c16970ac469029d1ebb1e5e4' }, 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

@@ -1,36 +1,5 @@
 import { h, Host } from "@stencil/core";
-/** Module-level cache shared across all instances */
-const iconCache = new Map();
-const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
-function getBasePath() {
-    return globalThis.__cobaltIconBasePath || CDN_BASE;
-}
-/**
- * File naming convention in @phosphor-icons/core:
- *   regular → "plus.svg"
- *   bold/thin/light/fill/duotone → "plus-bold.svg", "plus-fill.svg", etc.
- */
-function toFilename(kebab, weight) {
-    return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
-}
-async function loadSvg(name, weight) {
-    const key = `${weight}/${name}`;
-    if (iconCache.has(key))
-        return iconCache.get(key);
-    const filename = toFilename(name, weight);
-    const url = `${getBasePath()}/${weight}/${filename}`;
-    try {
-        const res = await fetch(url);
-        if (!res.ok)
-            return '';
-        const svg = await res.text();
-        iconCache.set(key, svg);
-        return svg;
-    }
-    catch (_a) {
-        return '';
-    }
-}
+import { loadSvg } from "./iconLoader";
 /**
  * co-icon — Phosphor icon renderer.
  *
@@ -62,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '0fad4d5acc013ca70b12384477cb5413615c23d2', "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: '7e5199c496bb07aade0400b61415260f5fd2ee2a', 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"; }
@@ -111,9 +80,10 @@ export class CoIcon {
                     "resolved": "\"bold\" | \"duotone\" | \"fill\" | \"light\" | \"regular\" | \"thin\"",
                     "references": {
                         "IconWeight": {
-                            "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-icon/co-icon.tsx",
-                            "id": "src/components/co-icon/co-icon.tsx::IconWeight"
+                            "location": "import",
+                            "path": "./iconLoader",
+                            "id": "src/components/co-icon/iconLoader.ts::IconWeight",
+                            "referenceLocation": "IconWeight"
                         }
                     }
                 },

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

@@ -0,0 +1,39 @@
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
+/** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
+const iconCache = new Map();
+function getBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}
+/**
+ * Convención de nombres en @phosphor-icons/core:
+ *   regular → "plus.svg" | otros → "plus-bold.svg", "plus-fill.svg", …
+ */
+function toFilename(kebab, weight) {
+    return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
+}
+/**
+ * Devuelve (y cachea) la PROMESA del SVG para `(weight, name)`. Las llamadas
+ * concurrentes para el mismo icono comparten un único fetch.
+ */
+export function loadSvg(name, weight) {
+    const key = `${weight}/${name}`;
+    const cached = iconCache.get(key);
+    if (cached)
+        return cached; // hit incluso si el fetch sigue en vuelo
+    // Cache-bust opcional: ?v=<version> (ver setIconVersion). Permite Cache-Control
+    // immutable/largo en los SVG sin servir iconos stale al subir de versión de Phosphor.
+    const version = globalThis.__cobaltIconVersion;
+    const base = `${getBasePath()}/${weight}/${toFilename(name, weight)}`;
+    const url = version ? `${base}?v=${version}` : base;
+    // priority:'low' → los iconos ceden ante JS/CSS/datos críticos del boot
+    // (Fetch Priority API; ignorado sin daño donde no se soporta).
+    const p = fetch(url, { priority: 'low' })
+        .then((res) => (res.ok ? res.text() : '')) // 404 → '' (queda cacheado, no reintenta)
+        .catch(() => {
+        // Error de red: no envenenar el caché — permitir reintento futuro.
+        iconCache.delete(key);
+        return '';
+    });
+    iconCache.set(key, p); // se guarda ANTES del await
+    return p;
+}

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

@@ -7,39 +7,51 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease, background 0.15s ease;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  backdrop-filter: var(--co-icon-button-backdrop-filter, none);
-  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, none);
+  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+  backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
 /* Figma "Secundario" = dark / filled */
 .co-icon-button--filled {
-  background: var(--co-semantic-surface-primary);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);
   color: var(--co-semantic-on-primary);
+  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
 
 /* Figma "Primario" = light / outlined */
 .co-icon-button--outlined {
-  background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary));
+  background: color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);
   color: var(--co-icon-button-color, var(--co-semantic-on-secondary));
   border: 1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle));
 }
 
-/* Ghost = fully transparent, no border */
+/* 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));
   border: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 .co-icon-button--ghost:hover:not(:disabled) {
-  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04));
+  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 ───────────────────────────────────────── */
@@ -110,3 +122,9 @@
   pointer-events: none;
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
+
+/* ─── FALLBACK: no backdrop-filter → solid surfaces ──────────── */
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-icon-button--filled { background: var(--co-semantic-surface-primary); }
+  .co-icon-button--outlined { background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary)); }
+}

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';
         /**
@@ -21,19 +27,29 @@ export class CoIconButton {
         this.iconWeight = 'regular';
     }
     render() {
-        var _a;
+        var _a, _b;
         const iconSizeMap = {
             xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
-        const iconSize = (_a = iconSizeMap[this.size]) !== null && _a !== void 0 ? _a : 24;
-        return (h("button", { key: 'd21f938003cb69f4747b94566a2054e4e2af4a04', 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,
@@ -86,7 +122,7 @@ export class CoIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -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,

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

@@ -85,7 +85,9 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, 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));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -395,3 +397,65 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@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;
+}