@prolibu-suite/cobalt-core 0.5.0 → 0.7.0

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

@@ -23,10 +23,10 @@
 }
 
 /* ── 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); }
+.co-fab--xl { --co-fab-size: 64px; width: 64px; height: 64px; font-size: var(--co-font-size-16); } /* Figma FAB */
+.co-fab--l  { --co-fab-size: 56px; width: 56px; height: 56px; font-size: var(--co-font-size-16); }
+.co-fab--m  { --co-fab-size: 48px; width: 48px; height: 48px; font-size: var(--co-font-size-14); }
+.co-fab--s  { --co-fab-size: 40px; width: 40px; height: 40px; font-size: var(--co-font-size-14); }
 
 .co-fab--extended {
   width: auto;
@@ -38,15 +38,75 @@
 .co-fab--extended.co-fab--m  { padding: 0 var(--co-spacing-lg); }
 .co-fab--extended.co-fab--s  { padding: 0 var(--co-spacing-md); }
 
+/* ── Hover-expand ("liquid" morph) ──────────────────────────── */
+/* Círculo en reposo → pill con rebote en hover/focus-visible. El ancho
+   expandido debe ser EXPLÍCITO (width:auto no anima; max-width/0fr clampean
+   y matan el overshoot): el componente mide el label y setea --co-fab-label-w
+   en pointerenter/focusin. El padding horizontal = (size − icon)/2 deja el
+   icono centrado en reposo con justify-content:flex-start, así no salta al
+   expandir. border-radius-full ya hace pill a cualquier ancho. */
+.co-fab--hover-expand {
+  justify-content: flex-start;
+  overflow: hidden;
+  /* Colapso rápido y SIN rebote — el spring vive solo en el estado expandido. */
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease,
+    box-shadow 0.15s ease, transform 0.1s ease;
+}
+
+.co-fab--hover-expand.co-fab--xl { padding: 0 20px; }
+.co-fab--hover-expand.co-fab--l  { padding: 0 16px; }
+.co-fab--hover-expand.co-fab--m  { padding: 0 14px; }
+.co-fab--hover-expand.co-fab--s  { padding: 0 11px; }
+
+.co-fab--hover-expand:hover:not(:disabled),
+.co-fab--hover-expand:focus-visible {
+  width: calc(var(--co-fab-size) + var(--co-spacing-sm2) + var(--co-fab-label-w, 0px));
+  transition: width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease,
+    box-shadow 0.15s ease, transform 0.1s ease;
+}
+
+.co-fab--hover-expand co-icon {
+  flex-shrink: 0;
+  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.co-fab--hover-expand:hover:not(:disabled) co-icon,
+.co-fab--hover-expand:focus-visible co-icon {
+  /* 90° acompaña el estiramiento y el + sigue siendo un + (45° = ✕ de cerrar). */
+  transform: rotate(90deg);
+}
+
+/* El label vive siempre en el flow (flex-shrink:0 + nowrap del .co-fab) y el
+   overflow:hidden lo clipea en reposo — así offsetWidth mide el ancho real y
+   el texto se REVELA sin reflow por frame durante la animación. */
+.co-fab--hover-expand .co-fab__label {
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.co-fab--hover-expand:hover:not(:disabled) .co-fab__label,
+.co-fab--hover-expand:focus-visible .co-fab__label {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-fab--hover-expand,
+  .co-fab--hover-expand co-icon,
+  .co-fab--hover-expand .co-fab__label {
+    transition: none;
+  }
+}
+
 /* ── Variants ───────────────────────────────────────────────── */
 .co-fab--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)));
+  /* Negro sólido (pedido design 2026-07-22 — antes Negro 80% + blur, se veía
+     gris sobre fondos claros). --co-fab-bg sigue disponible como override. */
+  background: var(--co-fab-bg, var(--co-color-base-negro, #1f1c1b));
   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

@@ -7,22 +7,36 @@ export class CoFab {
         this.disabled = false;
         /** Fixed position on screen */
         this.position = 'none';
+        /** With `label`: icon-only circle at rest that stretches into the extended
+         *  pill on hover/focus-visible (springy "liquid" morph). */
+        this.expandOnHover = false;
         this.handleClick = () => {
             if (!this.disabled)
                 this.coClick.emit();
         };
+        /* width:auto no anima — el CSS necesita el ancho expandido explícito. Se mide
+           el label (nowrap + flex-shrink:0 → offsetWidth = ancho completo aunque esté
+           clipeado) en cada entrada de hover/foco: barato y siempre fresco aunque la
+           fuente web cargue después del primer render. */
+        this.handleExpandMeasure = () => {
+            if (!this.expandOnHover || !this.labelEl)
+                return;
+            this.el.style.setProperty('--co-fab-label-w', `${this.labelEl.offsetWidth}px`);
+        };
     }
     render() {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
-        const isExtended = !!this.label;
-        return (h("button", { key: '508484d86d0d65218b8e5039ce81b6a1860347db', class: {
+        const hasLabel = !!this.label;
+        const hoverExpand = hasLabel && this.expandOnHover;
+        return (h("button", { key: 'e321a7455329a1401504cf93f1761a37d7d45eff', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
-                'co-fab--extended': isExtended,
+                'co-fab--extended': hasLabel && !this.expandOnHover,
+                'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "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)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '66a36ba9144cf10b7ad8b4bef6a821ef92257892', name: this.icon, size: iconSize }), this.label && (h("span", { key: 'c01018d61ca455a0d1952082b94ec0e5efd807b8', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -175,6 +189,26 @@ export class CoFab {
                 "reflect": false,
                 "attribute": "position",
                 "defaultValue": "'none'"
+            },
+            "expandOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "With `label`: icon-only circle at rest that stretches into the extended\npill on hover/focus-visible (springy \"liquid\" morph)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-on-hover",
+                "defaultValue": "false"
             }
         };
     }
@@ -196,4 +230,5 @@ export class CoFab {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -61,7 +61,7 @@
   background: color-mix(in srgb, var(--co-semantic-surface-hover) 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 dashed var(--co-semantic-border-default);
+  border: 1px dashed var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-sm);
   cursor: pointer;
   text-align: center;
@@ -286,7 +286,7 @@
   inset: 0;
   width: 40%;
   border-radius: var(--co-border-radius-full);
-  background: var(--co-semantic-border-focus);
+  background: var(--co-semantic-status-info);
   transition: width 0.2s ease;
 }
 

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: '31d820478276fee18bf2df79dd277ef1cbcf2ac2', class: {
+        return (h("div", { key: '6f0c0d55291904a925ddf87b444279443b123414', 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: '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: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'e3d624d4b904358132fcbdcf68c283a6fb1bcabb', class: "co-file-field__labels" }, h("label", { key: 'd96a9d10db3c9eaae4bf5e4d1bc3986f3f111c3c', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '6810c17061391ead3343daf9cd06d71d3b03706c', required: this.required })))), showDropzone && (h("div", { key: 'b910dfaa918f1c6d04d4d817a67100b74b6f156f', 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: '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) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'a2a02be018cc925718943411aa28da509a2a2a96', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'bb1879d1397ae93c5da975cbdbe6b7c1c907c490', name: "file-arrow-up", size: 18 }), h("span", { key: 'e4ad56d293a8bfcc082b7b6579dfefd9a02846bc' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'e9c32bdcd65a3138b08b38e52aa909c82b8d2047', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '417fa71efaf202fc7a1483e02bca170d35d4bf9f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '3697aa6c3ccc065ea9bf999f931bd8efb46ea26f', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'b6cfb211a32883ca0a37a775a8442f1d7a60b1d2', name: "actions" })), h("input", { key: '2c8a8a4c7a5ec3b633d78f3d2194d5457a3c1be3', 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: '793833955268b59bb86366b578558b0a25af3faf', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'd4141eed0257861c6640d0c91e4599278591619b', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '22e632b0c0050bab853d481366ae970db13935cf', 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: 'f4ae0f81158f1d69ca0dbde29a2358c13f7dce20', 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: 'e171dcd572d9b82734433eaa20f44c85c2c24735', class: {
+        })))), helper && (h("div", { key: '3c08efc8106a55cb9b52cca4b85a460b03284fbb', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, 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)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '3e011f947147f1af67cd21222e26cd2ac3860c4a', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '788a4a68794a0474289798cb5c48f75403d06bac', 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.js

@@ -54,7 +54,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: 'e894b848be911777d8a91388050c10a678bdaa1c', class: {
+        return (h("span", { key: 'dbb3fd6c1a09210ee166cbe08e10f0d96cbdfedf', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -64,7 +64,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'd7dd6f61ba7155b4e2c0f38cc59a93ea647217b1', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '787435edb87ccc8cd435e187613566779a90722a', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: 'edb5f0cdd150dcaa06230b90d3385d18684e2261', class: {
+        return (h("div", { key: 'eebe2fd2d26c909c1523e10d2fa7dfb115cc8bd6', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, 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))));
+            }, part: "helper-text" }, h("co-icon", { key: 'b70b0c859fb54e8ca45e5f236620930e1120bb2b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'fa646c0828b21706fabe21b3d20b3c38536308d5', class: "co-helper-text__message" }, h("slot", { key: '9527e9abb17fff628bdc2d5ca729d201ac7915ef' }, 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: 'abc90edf4c13e2de7d28f88f99b694dd8aecbdc9', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'd4dcafabbc956f3b5e8099fa30092d0d535c5d06', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: 'c0248eb38058439bbd5213df838ced7d7cc62bc0', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'cd9008987f65922b0c770e1f080dc0a0764d62dd', 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.js

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: 'bf9aad13fe7360a7135da123ba555b64ee90cadc', class: {
+        return (h("button", { key: '5349ec99f898a9cc19df7a53fc01b3acb37f31f6', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

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

@@ -88,7 +88,7 @@
   /* Figma Text Field: fondo sólido de página + borde Negro 25% (los campos
      tenues negro-8 + glass no leen como editables sobre el drawer blanco). */
   background: var(--co-semantic-surface-page);
-  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -98,6 +98,18 @@
   min-width: 0;
 }
 
+/* ---- Variant: flat (no border/background — reads as content) ----
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before the size variants and ahead of the States/Validation sections
+   below) so the equal-specificity (0,2,0) state selectors — focused/
+   disabled/error/success/warning/info — win their cascade tie by source
+   order and keep showing through on top of flat, same as they do today. */
+.co-input--flat .co-input__field {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ---- Size variants ---- */
 .co-input--s .co-input__field {
   min-height: 28px;

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

@@ -28,12 +28,23 @@ export class CoInput {
         this.type = 'text';
         /** Whether the field is required */
         this.required = false;
+        /** Focus the inner input as soon as the component finishes hydrating.
+         *  Consumers can't reliably focus the shadow input themselves — Stencil's
+         *  lazy hydration replaces the shadow content AFTER mount, so an early
+         *  focus() lands on a node that gets thrown away. `componentDidLoad` runs
+         *  after hydration, which is exactly the right moment. */
+        this.autoFocus = false;
         /** Validation status */
         this.status = 'default';
         /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px).
          *  In the filled search-pill variant (`fill`) this drives the pill height
          *  instead (s ≈ 38px). */
         this.size = 'md';
+        /** Visual style. `flat` strips the field's border and background so it
+         *  reads as plain content instead of a boxed input — padding, label, focus
+         *  ring, disabled and status states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         /** Filled search-pill variant. When true the field renders as a minimal gray
          *  pill (background gray-100, no border/box-shadow, 10px radius) with a search
          *  glyph on the left and a plain-`x` clear — the floating label, helper text and
@@ -75,6 +86,16 @@ export class CoInput {
             this.coAction.emit();
         };
     }
+    /** Programmatically focus the inner input (post-hydration safe). */
+    async setFocus() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.autoFocus)
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     get hasAction() {
         return !!(this.actionLabel || this.actionIcon);
     }
@@ -131,6 +152,7 @@ export class CoInput {
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
+                'co-input--flat': this.variant === 'flat',
             }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
@@ -424,6 +446,26 @@ export class CoInput {
                 "attribute": "required",
                 "defaultValue": "false"
             },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus the inner input as soon as the component finishes hydrating.\nConsumers can't reliably focus the shadow input themselves \u2014 Stencil's\nlazy hydration replaces the shadow content AFTER mount, so an early\nfocus() lands on a node that gets thrown away. `componentDidLoad` runs\nafter hydration, which is exactly the right moment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,
@@ -483,6 +525,26 @@ export class CoInput {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the field's border and background so it\nreads as plain content instead of a boxed input \u2014 padding, label, focus\nring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "fill": {
                 "type": "boolean",
                 "mutable": false,
@@ -641,5 +703,26 @@ export class CoInput {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focus the inner input (post-hydration safe).",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -55,10 +55,10 @@
 /* ---- Field ---- */
 .co-json-field__field {
   display: flex;
-  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);
+  /* Figma Text Field: fondo sólido de página + borde Negro 25% (los campos
+     tenues negro-8 + glass no leen como editables sobre el drawer blanco). */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   box-sizing: border-box;
@@ -187,7 +187,3 @@
   grid-column: 2;
   min-width: 0;
 }
-
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-json-field__field { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -97,17 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '6b5f24ad2f616fa1b4e9d2fcf8c6e9dddc85b5e7', class: {
+        return (h("div", { key: 'ce1a39e0f1489b46e9610b060ca652e8896746b9', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'df075fb85235c8c607580a2f2825047252998ec3', class: "co-json-field__labels" }, h("label", { key: '77f9b5da9f1667331242b601ba5941818408e866', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '25bfbe4ecd2c97938cc8b36f915f8219396935f6', required: this.required })))), h("div", { key: 'bf06e69915f1705a310cb0c115d0ee3c8e5ee3f8', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'c317495385581e32f779e4a243794a5493ebc28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: 'd68efdf098beb43710572d10517159597181b2f5', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'd5aa71be869d4731e5807f43abb47ae84c3eb0cb', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'e5ec0e7d2f454f1d671ed3929c2b5eb7dc4b8cf9', class: "co-json-field__labels" }, h("label", { key: 'd9961499b8d91c385d9278cbd856e04a44b28940', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '8ba3b3249e0fa1cb3a1b2946ac6a1b7561d30ef1', required: this.required })))), h("div", { key: 'e6f28cf374cc9ad2714505854572504a59c7258c', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'd380a4c0758152c5e39da71d61f5f81e28c22563', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '97f76e4ffd9e8b3242515ca2d2d13b786cd390db', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '310540578b3a2152a1c3f34b0d2f1a00677b5e76', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '2612ac57f2f0593a2f7438f26a99e78cd841ed35', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'bdee3108962929c93b67551636f0d8514cbc2979', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e604c4e4489ace1f2c189fb532f091f26962b5ff', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'eb0567a78a33fd41917c090f6aaccecac49f2519', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,18 @@
 .co-lightbox {
   position: fixed;
   inset: 0;
-  /* Above co-overlay (1000, hardcoded there too — no z-index tokens). */
+  /* Above co-overlay (1000, hardcoded there too — no z-index tokens).
+     NOTA: contra superficies en el TOP LAYER (co-overlay del drawer modal usa
+     popover) el z-index es irrelevante — por eso el root es popover="manual"
+     y se promueve al abrir (ver syncTopLayer). Estas reglas neutralizan la
+     hoja UA de [popover] en lo que .co-lightbox no pisa ya. */
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  color: inherit;
   z-index: 1100;
   display: flex;
   align-items: center;

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

@@ -44,6 +44,31 @@ export class CoLightbox {
         this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
         /** Focus the close button on the render that follows opening. */
         this.pendingFocus = false;
+        this.syncTopLayer = (el) => {
+            if (el)
+                this.rootEl = el;
+            const root = this.rootEl;
+            if (!root || typeof root.showPopover !== 'function')
+                return;
+            if (this.open) {
+                clearTimeout(this.demoteTimer);
+                try {
+                    if (!root.matches(':popover-open'))
+                        root.showPopover();
+                }
+                catch ( /* not connected yet — the ref call retries */_a) { /* not connected yet — the ref call retries */ }
+            }
+            else if (root.matches(':popover-open')) {
+                // Let the opacity fade-out run before display:none kicks in.
+                clearTimeout(this.demoteTimer);
+                this.demoteTimer = setTimeout(() => {
+                    try {
+                        root.hidePopover();
+                    }
+                    catch ( /* already gone */_a) { /* already gone */ }
+                }, 220);
+            }
+        };
         this.handleKey = (e) => {
             if (!this.open)
                 return;
@@ -147,6 +172,7 @@ export class CoLightbox {
     }
     disconnectedCallback() {
         this.detachKeyListener();
+        clearTimeout(this.demoteTimer);
     }
     componentDidRender() {
         var _a;
@@ -157,6 +183,7 @@ export class CoLightbox {
     }
     onOpenChange(open) {
         var _a, _b, _c;
+        this.syncTopLayer();
         if (open) {
             this.index = this.clampIndex(this.startIndex);
             this.resetView();
@@ -286,17 +313,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: 'd48b05f652170cd961637700458eea0d56ded15a', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: '0c158b9cca8743480d189ee6abb1445d6892ebc1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'c26684772cfd9ae9dd5c2393e54bc8366d3cc470', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '393614be92d88b31cab04cd8a5f21cb021fe6cda', class: "co-lightbox__zoom" }, h("button", { key: '5e4d5a1fc24a7aaeee4d11927c0ddb208b08fe71', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '3caea68581b64d395d31d0ed2cd27d255ed9d402', name: "minus", size: 16 })), h("button", { key: '28df86fa8703245818fb60c4ee9e2d05dc19b1dd', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '3e6307614505a720cba72214cc8e2f8c89d7be68', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '80f4f47e8768815d158d30e8ce29ad074d56bec6', name: "plus", size: 16 }))), h("button", { key: '97acb23668d83caae3923fde3dfaa6b2232ced0a', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b69d3de0a9912c71e2803272575d03d76d4d1d77', name: "arrow-square-out", size: 16 })), h("button", { key: '6a1cd64d3b5852d2707c0f01a8f16306b6cfd150', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '22b97a92c4d3651d0fadcbdbbdbda9581eee721b', name: "x", size: 16 })))), img && (h("div", { key: '41fce41bf57c1c4a0a765134f7cf4a1d57677e67', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '9b96e949be261813af8c44802e7a85c9892696c7', class: {
+        return (h("div", { key: 'f29ff8f043b148f1f47fd477e3a12628e292f780', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '8d258c9fb5f5c7ac7cd17b7195f3f5589030e5fe', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'fa246addb464b12803399c22fd7ecc7d47fdf424', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '05e9748c4b561c8f7169c87ab897192427531ac4', class: "co-lightbox__zoom" }, h("button", { key: 'c87d84e63161ff23f1b514f992781ff3ccc9d375', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '80e9bf45f296b0c5ac16d265c19e88969511ccc6', name: "minus", size: 16 })), h("button", { key: 'aaecee75b60643d885376dee92a8773faf989a3a', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '4ad7e8d83c933f0563304911facc8ef32ec88556', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '7f5d57def9d10437913bb25f577a475eccf41851', name: "plus", size: 16 }))), h("button", { key: '32d00a606ccdc9b2694d8da797064e4f07b997a6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '492f83405006a9642c9f6dd22e02c04a9b871909', name: "arrow-square-out", size: 16 })), h("button", { key: '14241c12b7f3cb4a07c2c22af2f8316c360c1541', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '44a2cdbfd7d79274f06f54663840776c05a95581', name: "x", size: 16 })))), img && (h("div", { key: '20bd42e8d80e481fec492b1cfdcd3fc54ea1e10f', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '1ba1c0942f2cd13f7f302777f28d961660c07fa8', class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '605186deca28fb6455e5f72ae0d0fd1380482947', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '61decb40ac1ee12a1d81d8a4da397860fe7ee116', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '5a782d3e4ae8578b2e3579db2a9b710f0219ce51', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '3695eb0397a9a13a48c66c3f502746ae86b1ffbe', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: '340f39ae3b741560bc3dc0eb6296dfa701699438', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '04cec8b520c3416ce5e38aefda815a18247b79fa', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: 'd39568adf357c46fd7445c070b9fcdcd6bbab845', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '8b1acaa692c196615f6f00641ba86c14687f6a2b', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '1bb15d7437610cfad3003af07849edd8618b04c2', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '786357f804681f37cc1603e926b33ec3b8b7a76c', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-footer/co-list-footer.js

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'f2b6a2b71a038b5a2077d5bb4cb8f4b57aa85ebb', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'cfb849d4e483b104dd0d20c7241126bf2151c1cb', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '6edb490a4a7864056b07bb18b156e3674d785dfc', name: this.secondaryIcon, size: 16 }), h("span", { key: 'ac7501438e06aa52e215e6b8aea549aaf098d0b6' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '6589a1a226b25f8393578ae11209c3388ea637b8', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '6665e17ca3bb9d439ef89f05973086d0a7bd7a8d', name: this.primaryIcon, size: 16 }), h("span", { key: '205c5f6653c264881a010a3def5ae65239b5333c' }, this.primaryLabel))), h("slot", { key: '48a894d428459f179161a1eb3fcbd5463ca760a6' })));
+        return (h("div", { key: '6b63ecd9bc5ba3a85bb379b825c23c8eac2dcfd6', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '2e73e9e4918dbe1d05a13f8cc0989a14d3228fb7', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a408433a6d0bcf3b732538931e3adde214127ed0', name: this.secondaryIcon, size: 16 }), h("span", { key: 'de1b3807ed56be80732eb3b2867f85287f9833ae' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '5d88aea121289757aeee5bf30619322bdd2c3371', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'b5d3ab5e406bdf097bbbfeb182753c103cde81b4', name: this.primaryIcon, size: 16 }), h("span", { key: 'a089130f639fe642d11cbc1a5c80b21de9bbd038' }, this.primaryLabel))), h("slot", { key: 'd821c3e281bd10a66a67ae714f77fba1454214c9' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }