@prolibu-suite/cobalt-core 0.4.0 → 0.5.0

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

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

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

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '5f851ab10c6bae9b2f06ef5f1a7acd130eebf40b', class: {
+        return (h("div", { key: '31d820478276fee18bf2df79dd277ef1cbcf2ac2', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '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: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'b7df2e7f427fb6306191c07aebd41b2a2c7303c6', class: "co-file-field__labels" }, h("label", { key: 'd3dcd5886777a09fea5d4082f4a941a24056184e', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '6cf4505b762c9335798de30362e1eac8bc6e123c', required: this.required })))), showDropzone && (h("div", { key: 'af761f6f87b10397bc3e5ebf3ee4c43c0c815449', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '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) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '72ab595ccd9a7f275cd214fcb17c15972057557a', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '686287ddfba61763e98e8753f078f8bc1ac98460', name: "file-arrow-up", size: 18 }), h("span", { key: '8faab79ab89c6a2fc83069ae7bcafb4b21feb416' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '761ab4b4e58490fe8e0024e6881a8d73fef5e7fd', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'c6a88193c0aacefa6bd1534600ad56d3577b2228', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'ecd504e94b4ab9a1784868a357399e766b2dd68c', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '4e6572288387694e7e43cfa7fd58b4fb1952be2c', name: "actions" })), h("input", { key: '708ef841bab08935f125e6aa4338f67502b8689f', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'f7423a91e47af3fbc4eb8257569df98da889bebf', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'da179d8d456ac934ee0d88679cb9866f3d9af3a9', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '73ffb49c6090eb21c471f9cfe145df23b8fb8592', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'ecbc35245db8e66eca656423657a0223e33a156e', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: '6393f353fff2597d24e91850525068646d4563cc', class: {
+        })))), helper && (h("div", { key: 'e171dcd572d9b82734433eaa20f44c85c2c24735', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7bd66efa2c2d2f35b3c11283fc28cd672a77e4e5', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '7744d3bd75b84354db79bb0796f4e3d2bc293d2e', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '3ba44c6324cd56a470dc4668a15b31c61b58b990', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '24c06c19e336ddb0f6a5266d9a9b84f7fbf3b80e', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.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: 'dd64643dbab1f850840ba3c6045284e42af0655f', class: {
+        return (h("span", { key: 'e894b848be911777d8a91388050c10a678bdaa1c', 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: '816be0fe4d7934b7a45014c2ffb77850ba2ad4a5', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: 'd7dd6f61ba7155b4e2c0f38cc59a93ea647217b1', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '7990e81b633e1a4c69527ffd393f33301903611f', class: {
+        return (h("button", { key: 'bf9aad13fe7360a7135da123ba555b64ee90cadc', 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

@@ -85,10 +85,10 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  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-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -150,8 +150,11 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  min-height: 24px;
-  padding: var(--co-spacing-xxs) 0;
+  /* 22px content + sm2 field padding (8×2) + 1px borders = the 40px md box —
+     the old 24px + xxs padding pushed the default field to 46px, out of step
+     with every other 40px field (co-select/co-ref-field/co-date-*). */
+  min-height: 22px;
+  padding: 0;
 }
 
 .co-input__native {

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: '3694e74443cabde9c86e37a38d2ab93f49e2a239', class: {
+        return (h("div", { key: '6b5f24ad2f616fa1b4e9d2fcf8c6e9dddc85b5e7', 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: '806b6b2e0aa1fc4cade79fec7111e7afa4f23faf', class: "co-json-field__labels" }, h("label", { key: 'c01947ab92bb4849469e70b3077fa0af5fa953bd', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f91fd778dba0cdb233872dcace643112e0d3c4de', required: this.required })))), h("div", { key: '4070579d2d8fe149c19163133d7ea549f965725e', class: "co-json-field__field", part: "field" }, h("textarea", { key: '91e21766aae9f39e76c003720207bebfb087af4f', 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: '87736d190c59a59a46ae0a341f28135892f109d0', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '304a65252877ae80e52278bea82128a8f7df3c90', class: {
+            }, 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: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '1771161363b23da8aac7f1c70ab56b32f208f5cd', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'ce965e666a8107027249647a256c4e46d72d2db4', class: "co-json-field__helper-text" }, helper)))));
+            }, 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)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,7 @@
   background: transparent;
   color: var(--co-color-base-blanco);
   font-family: inherit;
-  font-size: var(--co-font-size-13);
+  font-size: var(--co-font-size-13, 13px);
   cursor: pointer;
   transition: background 0.15s ease;
 }
@@ -159,6 +159,6 @@
   border-radius: var(--co-border-radius-full);
   background: var(--co-color-opacity-blanco-8);
   color: var(--co-color-base-blanco);
-  font-size: var(--co-font-size-13);
+  font-size: var(--co-font-size-13, 13px);
   font-variant-numeric: tabular-nums;
 }

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

@@ -286,17 +286,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: '52c5a63a5b289a012b4abe1c36836443e411e6f7', 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: 'aaa047087d36959105b86c7dde558155f3c68a69', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '32fb4ca4e93b26f24817db3c0aa2751be1de60d6', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '33c8ab802bd2d23e43adb02bb0428d302a07db74', class: "co-lightbox__zoom" }, h("button", { key: '9dc29e565c5dda21e746b6811a45ce6d4d4452d7', 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: 'fccd37212da128bcb4d1dae7278d305e376fbdbb', name: "minus", size: 16 })), h("button", { key: 'c3119bb1829926d9426d5420504f9b48b600160c', 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: 'cf38c2ad754af4d4faa9fb7ba824344578939c82', 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: '017e7627ed2563c76e6b5dcf8dddee16ee37b9ec', name: "plus", size: 16 }))), h("button", { key: '2f57b78ea0d5ad1cde4d10e874681dfc1279c333', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'f3de0f4b04e07966784efd3e87775f1add854578', name: "arrow-square-out", size: 16 })), h("button", { key: '459a464214f1b75ee1e7f9ec810f35e0d0ba426b', 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: '6208dfb164d75cbecb490b3237bc2350c224d7c3', name: "x", size: 16 })))), img && (h("div", { key: '1ba614d572e39b9e6f08a5810d129bca7b7b4f9b', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'a61b425df6441845abbfaa3ae308bb16b7ac8813', class: {
+        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: {
                 '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: '8578fbfa008878324b15f2d7ade346f86f465bea', 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: '605186deca28fb6455e5f72ae0d0fd1380482947', 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: 'e2ea791a38889d458c30155c3c6f65ea734ff1c8', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '1e3232f6fc181eb9444ee5ea7bdfe688ede28b55', 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: '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) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: 'e591fcabe8c3f3c81c276c95d40e5dc6189bd4e0', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'fd55eb538aa57b89ddf17598a1c58cfc8bbcc04b', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, 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))));
     }
     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: '89ebd30358e2c8b1e1461adb9a294862719dac2f', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '877ee7f795c35c5b2845b606c40518a98f691d00', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '2ecba284a7ac5b1789900a6ab6f66d3e1692d894', name: this.secondaryIcon, size: 16 }), h("span", { key: '5a864d3d85e7a10fb66afd67805527d04cf496ae' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '65281886aee6037f7386e6c92a0e9e158945b496', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'cafc1fbda58a3b3d0dbbe9202e872bd1a96cfbf6', name: this.primaryIcon, size: 16 }), h("span", { key: 'd230a2a1edfe02c75c555f635be0dae8015cdfb9' }, this.primaryLabel))), h("slot", { key: '5f1bec4894b87226198d6154dd9c5f5e86272d4b' })));
+        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' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '1c6124749c2bc07f1f5118adf3a906d0316db256', class: {
+        return (h("div", { key: '9e287e86942493229ae39c750c8d53056795d844', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'd452e5ce3b962eebd63fb99d858192e56390e4fe', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '1f2451697758c49bcce76c417ecdd1069a3b923c', name: this.icon, size: 18 }), h("slot", { key: '0366ddc338f487ebfda19c8455009ec7d547a768', name: "prefix" })), h("div", { key: '38e01734e0b6a16f7020eae8d6cf1731c59b3c64', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '353d8e6ca59dbd957473cd8b60d51d9652c79780', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '6d12b514cec487ec071a968787f1a0d94847be13', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'da8fd1370809682631096a21da839a4092314a1b', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '74c1a4cd94f272ff08f2236b130e60420e39aaf5', name: this.icon, size: 18 }), h("slot", { key: 'e70c4aa6c6498b410e2a4e88e5ab31b833d1ed81', name: "prefix" })), h("div", { key: 'b3e358b51214013373dc0b357ca9456ce96e23d3', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '4fe172f4d48b26883edc4455f06a7b6f2127314d', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '3885043ecaa5b3a302b2c1d34bce6c50546deaf0', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: 'c08d96031518a7c96ab0d6bb71b147f3aa769d50', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '33e4c5c76a1d066d408b07ff5dbe13e0dbea691a', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: 'b57c867bd1e925fb1778caf8d7bd27ad31ede8f4', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '40b8331ec57e572bad8e774b51e251a2671fc3b1', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '2e35ea5289301048d967b4b9bf11743101927118' })), h("span", { key: 'cd33f25a15fb3ad3a747fad14cccb3141967cc4b', class: "co-list-item__suffix" }, h("slot", { key: '25b6881aacf68e7b0e927d367ce9492a642d8224', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '61914fe8d8701e99d6a6f8b5e596c410d90544c7' })), h("span", { key: 'dbf531af497bf9f191351288894c4284582cc384', class: "co-list-item__suffix" }, h("slot", { key: '1a3c7df388d987a3b9835220bb847f3952c838d7', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -23,13 +23,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: '003a31fad075f90eb6097f3a9c4844d7bb15285f', class: {
+        return (h("div", { key: 'daac4e719cbee00b1561e1c177e1c10c41c9b176', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '11419e55099d3098081d33de77b372f545be8be2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'bd9249783989b073dfb21ac973bedbfc43ea655c', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '6610a414fd2ad05f11aa810dd0703e7fab30ec8d', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b005c7540600ad137f159392f94c437eaf91c0d8', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: 'eb18d3023fe5d0ed32157f29b9237ad817ddb9ba', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '17746010acbdae2dfb6e6493ea283a8213bbfc66', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'ba88d6ce47d207c74982da22130f7d3df5f2b989', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '6b92c3bfa258ec5937d1c649d379a0f79a4fd8d6', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '69e82f6a6eec310ca8ab45d1716eee124f4127f9', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'f03a749106eb2c3b566c5179fb7b43c88c6887ed', name: "trigger", slot: "trigger" }), h("div", { key: 'a133998147e906f1b96c79baccb345e6cc3aad57', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'bdc28c804d63632df5849b82904741074fc161ef' }))));
+        return (h("co-popover", { key: 'fed7e38cf377fd31af692cd62bbfe98c47cf3afd', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'e45e443625aaa9923fbd833e14894d3f4beae7ba', name: "trigger", slot: "trigger" }), h("div", { key: 'c36809a4dba4a4bd7e2fde1e1a2d835f163431f0', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '0e59202b728f97083e8c0b2d127a29bf8c90861b' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: 'dd21fada7235dda4e64c2a3a003b26c4dd65501e', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '9e29bc7905c4b9d83846ea9e85021ae0f1e34fc3', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-item/co-menu-item.css

@@ -58,7 +58,7 @@
   color: var(--co-color-status-error, #aa2e1b);
 }
 .co-menu-item--danger:hover {
-  background: var(--co-color-status-error-bg, rgba(170, 46, 27, 0.08));
+  background: var(--co-color-status-bg-error, #ffefef);
 }
 
 .co-menu-item__icon {

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

@@ -62,14 +62,14 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: 'db9ac94c8fd2fe2e348fdee437aee9ddccdf85cb', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'b2f0c174b09e2582c9e17ef18133b3e9057ace74', class: "co-modal__frame" }, h("div", { key: 'a3ae4c2a30d52b3c651ca80387f49f9344d9e89c', class: {
+        return (h("co-overlay", { key: '3560ee34e7edb62cd0ae34572bac0afbb5b02a74', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'ba68e320e4e0a0881193f1d85f2d5a2ef287e324', class: "co-modal__frame" }, h("div", { key: '7d3748b4b0f8fc5a4715bd075d2d9f74e2ada0ed', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: 'e90b7e7aa085ff53675586e66ee0ac5473a69cbc', class: "co-modal__header", part: "header" }, h("div", { key: 'e7ffccb3b8658e213d92f1a7873eebf6de42ef7d', class: "co-modal__header-text" }, h("h2", { key: '431e22f5bd933ee3052750e7e9abb7911fe24d9a', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f8e83dafce7ef899e5931902b568807063ea9ae3', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '938dbc0df49067f359aa431ba0d16b89ad41a751', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f1421d7d4441fff67259e21cf2a0107b6a57f746', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'faf612d93e95232b46ebfb45089768bf09366a80', class: "co-modal__body", part: "body" }, h("slot", { key: '3c4dd9d1f3613a2f308cbc714426739a3aa6523d' }))), h("div", { key: '35546891b1847627de68a8f012e23fbfbdc1760b', class: "co-modal__footer", part: "footer" }, h("slot", { key: '263bd761b09998b9cc1f5f53d7dee87ccb5f4367', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '48239c6af5968213349a4f3516a96ab66d7aa744', class: "co-modal__header", part: "header" }, h("div", { key: 'c807b66cb3d2a1a5b84ee70677f5d33ceaa83a7c', class: "co-modal__header-text" }, h("h2", { key: '7fa46d607d26d0904014ad20209838bd237492f2', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '7e53e9b13ea2cc8eca07dc17cb240f19ce6eb1a1', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '3af5d2c54faa331a6017cd19b96aea1f97baef03', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'd8f58ed52f686df6663515d38fa98d30a45392ee', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'd69ffa8c7726633b744b014b3f7744822ffa6448', class: "co-modal__body", part: "body" }, h("slot", { key: '5d3faeee4f96f314a8045c0482f88da2f7f328c3' }))), h("div", { key: '5ff15a6387c186e2425ca08dc4b9085588f83f61', class: "co-modal__footer", part: "footer" }, h("slot", { key: '5742d36c7a46f3b4b535d9224f747bbca0d82305', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'ed73dbf77742c009fbd37602925a43f217044027', class: {
+        return (h("div", { key: '0215148d2cd901a2b60f5ab14704891e97ff98dd', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '60235bb4ac473f67371094a735701fe40362db66' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '6985aaea372d26291422e5533313c6d6dad85b08' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,10 +51,10 @@
   display: flex;
   align-items: center;
   gap: 0;
-  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 parity (same box as co-input): solid page surface +
+     Negro 25% border — tinted glass didn't read as editable on white. */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   overflow: hidden;
@@ -64,11 +64,11 @@
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
 .co-number-field--s .co-number-field__row { min-height: 28px; }
-.co-number-field--s .co-number-field__btn { width: 28px; height: 28px; }
+.co-number-field--s .co-number-field__btn { width: 28px; }
 .co-number-field--sm .co-number-field__row { min-height: 32px; }
-.co-number-field--sm .co-number-field__btn { width: 32px; height: 32px; }
+.co-number-field--sm .co-number-field__btn { width: 32px; }
 .co-number-field--lg .co-number-field__row { min-height: 48px; }
-.co-number-field--lg .co-number-field__btn { width: 48px; height: 48px; }
+.co-number-field--lg .co-number-field__btn { width: 48px; }
 
 .co-number-field--focused .co-number-field__row {
   border-color: var(--co-semantic-border-focus);
@@ -91,7 +91,9 @@
   align-items: center;
   justify-content: center;
   width: 40px;
-  height: 40px;
+  /* Fill the row's CONTENT height (row is border-box: 40px minus 1px borders
+     = 38px). A fixed 40px here inflated the whole field to 42px. */
+  align-self: stretch;
   flex-shrink: 0;
   border: none;
   background: transparent;
@@ -261,6 +263,3 @@
   content: var(--co-field-required-text, ' (required)');
 }
 
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-number-field__row { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -124,13 +124,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: 'b9d2918682c1943728aa412b5abb4e17c842d9bd', class: {
+        return (h("div", { key: '3c875500165c314b0080a19a7d33f8b1fc5f9724', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'baa117f0cfeba73015fe6a396b7001c83db76079', class: "co-number-field__labels" }, this.label && h("label", { key: '2593906b02ca0935ab1b3e8bcf51d8867a2b416a', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '40cc658fedb70c38e92e07cf1cd0b8a628fd6ca6', required: this.required })), this.secondaryLabel && h("span", { key: 'b495275c3f9108442d6a4cc1d36b23b510e9f151', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'ac482c099f7952d26142b4e8aacac74fad2cd469', class: "co-number-field__row" }, h("button", { key: '617f9d33a8371bce87c9d8e56df88aef77dcc724', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '3242ac9dbbbcfeca024812b69d5f17a00fe4928a', name: "minus", size: 16 })), h("input", { key: 'beaab19de433dcc7b6ffd13678b68f2b229d8311', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '5426965b700dccf1387071138d8dae113cf4fdf4', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'f6f2e6a7f9a5a77fc96a8223a0eaad7880599e55', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1c29c52af8720ffd2dbd5c5aa960107ad16c7613', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '3a1265f41fcf4ca88b25e88f3921d0087aeede99', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'ac97bb8ee26e535b2c278e647b2edb1d3dbaac1b', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '714e6fcd1f7ac625ec6702d97f72487b0448e8ed', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '69cf83620410820ca2eaf3e473a0f815c812c69e', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'e185964aaa4a7410e5f5e78da88bd6b78de072b4', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'fe4c1d6e76adcda77f4a78697a7ce04c4f7e6b5d', class: "co-number-field__labels" }, this.label && h("label", { key: '69b9c4dde23541cbb2b8afdff97b6154bba8ab3c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '8238966acaffee1c909ad0adee140e75aa458a72', required: this.required })), this.secondaryLabel && h("span", { key: '1f5ed492a1028f79eddf207ba29f40211f3934e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '95e65fe2e0634b4009cac07770b20b96431bceae', class: "co-number-field__row" }, h("button", { key: '45d3317ff00d91e1b259a69cd5a81d26ae4bb36e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '457e2c19673b7a3ce73cf5f9c23bd69466065943', name: "minus", size: 16 })), h("input", { key: '03e01bd9bb518003d6895e6749ad80a5be3e7a86', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: 'd67834e59678f73ce4a9afb7074cfc248d34adb3', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'e26cb4d5f271c480380f8e912e8c760bafd02d27', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '908c2c60b3044d9032c4bdd5d41bcd25f406aa20', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'fe62938d48bc8df10bb364d5295f9ee192265f97', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '227ec402b4280f1062ea13a8772ec8cf36dd4508', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '87fd291f5db445c0ef2877cda10ed38d4af7a5d7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '344cfac2028d8e1ea402a68df83ade83c52b1bab', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'b12282d57952bae2f528505c92c4a216723d26fd', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }