@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

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

@@ -30,8 +30,16 @@ export class CoInput {
         this.required = false;
         /** Validation status */
         this.status = 'default';
-        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px) */
+        /** 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';
+        /** 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
+         *  status chrome are suppressed. When false (default) the field renders
+         *  IDENTICALLY to the standard text field. */
+        this.fill = false;
         this.hasFocus = false;
         this.handleInput = (e) => {
             const target = e.target;
@@ -91,9 +99,30 @@ export class CoInput {
             default: return null;
         }
     }
+    /** Filled search-pill variant (fill=true). Minimal chrome: icon-left + native
+     *  input + plain-x clear. No labels, helper text, status icons, chips or action.
+     *  The default field render path is left untouched. */
+    renderFill() {
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const leftIcon = this.iconLeft || 'magnifying-glass';
+        return (h("div", { class: {
+                'co-input': true,
+                'co-input--fill': true,
+                [`co-input--${this.size}`]: true,
+                'co-input--disabled': this.disabled,
+                'co-input--focused': this.hasFocus,
+                'co-input--filled': this.hasValue,
+            }, part: "wrapper" }, h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, h("co-icon", { name: leftIcon, size: 17, class: "co-input__icon co-input__icon--left" }), 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,
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x", size: 14 })))))));
+    }
     render() {
+        if (this.fill) {
+            return this.renderFill();
+        }
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (h("div", { key: '3c628ddcc708f39637038f25118918fbe0f9cff2', class: {
+        return (h("div", { class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
                 [`co-input--${this.size}`]: true,
@@ -102,10 +131,10 @@ export class CoInput {
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '89513c64c7d590c77159f6a983ed4973289be0d2', class: "co-input__labels" }, this.label && h("label", { key: '4a0874ec1828c5a19ef87c23878d2317f3d441df', class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { key: 'e7a72a5c861923f43968ad95a6c47b46ae13b9ed', required: this.required })), this.secondaryLabel && (h("span", { key: '87911501ccb15a2bd4ef4e58e3537bc968e0f0d2', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '0c1a530d1a687798f0803564be36409b23d5a1fd', class: "co-input__field-row" }, h("div", { key: 'bb731973f9406d649c3aff55071bd50fd7ebc991', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: '4d244ba725651414653c531e3017f8d3a6ccbfd4', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: '9c2c242a1887a05c4fcc88dbbb99c86ce0b5113f', name: "chips" }), h("div", { key: '8568e8abdc2c37b565b2446126638b43a649d721', class: "co-input__input-wrapper" }, h("input", { key: '6f311f448b23a936e1da7fe547e7510e236bcf99', 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", { key: '5826d5d68a03b1cec942a004578f969920a13609', class: {
+            }, 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,
-            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { key: 'b987c7ceeb51c7a2bde1a53b6e80484b1fe2ff90', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '07e2d8f0ffca417ed82d95b97cf42efaf24212e9', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: '7f1ce796c3d8fda6e3d5b5f63ffa819c6925daef', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: '7294036e68f6f2ff1efe57c957765415691b7d21', name: "suffix" }), h("slot", { key: 'ca865d10565b3b1f140b5d23c52781ea71f5f0ae' }), h("slot", { key: '2422fd84d5ce0f4d1c4eacedeaa72ea259cb1580', name: "action" })), this.hasAction && (h("button", { key: '5dd232fc1a449cf73ddda1e06d28c9d8a9dc4a0d', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: '7cada4fa70ea0ec79754c5a46a59367ea8c66fad', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: 'f27e5c1ea7ff1f83714ae5f542558518dc00a937', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: 'd806c9e918ac1edac3eb703926c0c405019190e1', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { key: '80f6b84d4354ccf965596cb9546a531cbbc932e0', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { key: '8f01456c3cfec988ffc6f7c6a03c1ecc43ee4c2c', class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { name: "suffix" }), h("slot", null), h("slot", { name: "action" })), this.hasAction && (h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { class: "co-input__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-input"; }
     static get encapsulation() { return "shadow"; }
@@ -446,7 +475,7 @@ export class CoInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px)"
+                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px).\nIn the filled search-pill variant (`fill`) this drives the pill height\ninstead (s \u2248 38px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -454,6 +483,26 @@ export class CoInput {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Filled search-pill variant. When true the field renders as a minimal gray\npill (background gray-100, no border/box-shadow, 10px radius) with a search\nglyph on the left and a plain-`x` clear \u2014 the floating label, helper text and\nstatus chrome are suppressed. When false (default) the field renders\nIDENTICALLY to the standard text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill",
+                "defaultValue": "false"
+            },
             "actionLabel": {
                 "type": "string",
                 "mutable": false,

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: '0f1319b6cd930e576dbba45dfb3bbb9050c8a4c0', 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: '50cfffd0dedb3b091cebadf7b908594d855c1e92', class: "co-json-field__labels" }, h("label", { key: '77410a04bc4ca4f61dd8be107acb159a918f811c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '21f0c872f95b39e38e16388a0935aebe333640ad', required: this.required })))), h("div", { key: 'f7da7b3e56bc9bb1bfe1759f4e6ea260bd45b19e', class: "co-json-field__field", part: "field" }, h("textarea", { key: '8f5413bb82906a15d83130ca963b771e6539d7f6', 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: '5c844c980cafec58d64ff473022ace4b11f10b26', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'af8b770be33f336be652e0b6b567a602a59d8e63', 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: '8ed6b6f2444fbf408818b1ac9911f4513c963dee', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '9282196dfd8f2662c073d7589dd7fd93447101f8', 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: 'bfffaae28680b214a562aa3c3ec52aaf16a61571', 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: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, h("button", { key: '94aa9ab08f21bf7d9e77e4ad31325cd13a80bb4d', 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: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), h("button", { key: 'd4333d0c970e71012786915be49be6c0efada12f', 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: 'b9efbf3e3912fb557eba59cce0300468a8e86861', 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: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), h("button", { key: '984f9d2b9498d9715dabff254d2f3da9a42d9172', 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: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', 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: '0b35f47557bf3e05db3c98e0df2c6e8d6f5cef94', 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: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '7c1a9f250bb4b881112a57a2f3455b3c82fc77cc', 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: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', 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: '408e27a26e9d2d1802ba336690c84c745a79a22d', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '9a597df6466ebf5c5720b50d0d4d2993ba3af9ab', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'c743c1399b14d175c51ea553d508110e8bcaef05', name: this.secondaryIcon, size: 16 }), h("span", { key: '3c32ad1ea326da99debeb716980b38cf9777b168' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ce57a3fe3456d4cd3959d556304de9de7558ec40', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '584416793ecbf91a960b2b55f54e703ba1d0ca5c', name: this.primaryIcon, size: 16 }), h("span", { key: 'f227d58236ab0f4d31b398cfc9bf7419efd57d02' }, this.primaryLabel))), h("slot", { key: '601ef71ed5374dab62a79ad875da9b6f7a0fcfed' })));
+        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: '984e2c7fcb5f4124c871dda103e450b858143c0f', 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: 'd1a3466d6ecc565435d3918a596bc7620cce2197', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '2374265eac83fb8d86ee26ab3317da2c2c9d2998', name: this.icon, size: 18 }), h("slot", { key: '6bb538d2212c2bd25d61c54a59120295ff55692b', name: "prefix" })), h("div", { key: '052ed53fb59580780a0d1c2b1dbdff7711fbb585', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '027cb3026c0ac2efdfb76f7eeb9600d21899e865', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '3b27db5590486bab2c4b8819548dbb13c332a13b', 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: '220243aafd77d681315f0847cb3db72110330b7e', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'fb8543457be7e67c7eca8461f207dad833503462', 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: 'ed7e997155bec808ef01c6300109f435a5e698b1' })), h("span", { key: '1601e81a0d25f685b69ebea30a13b1dac9337866', class: "co-list-item__suffix" }, h("slot", { key: 'f23ac07bc12c9a02810574bcb30b2a323b07b3ee', 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.css

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.co-media-thumb {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background: var(--co-color-gray-100, #f6f6f6);
+  box-sizing: border-box;
+}
+
+.co-media-thumb__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ─── VIDEO OVERLAY ─────────────────────────────────────────── */
+.co-media-thumb__scrim {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(31, 28, 27, 0.28);
+}
+
+.co-media-thumb__play {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.co-media-thumb__play-icon {
+  display: block;
+  margin-left: 2px; /* optical centering of the triangle */
+}

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

@@ -0,0 +1,148 @@
+import { h } from "@stencil/core";
+/**
+ * An image / video preview region. Renders a cover image when `src` is set,
+ * an optional dark scrim + play button when `video` is true, and a default
+ * slot fallback (for a type-icon box) when there is no `src`.
+ *
+ * @slot - Fallback content shown when `src` is not set (e.g. a type-icon box).
+ */
+export class CoMediaThumb {
+    constructor() {
+        /** Show the video overlay (dark scrim + centered play button). */
+        this.video = false;
+        /** Height of the region. Accepts a CSS length or a bare number (→ px). */
+        this.height = '132px';
+        /** Corner radius in px. */
+        this.radius = 10;
+    }
+    toCss(value) {
+        if (typeof value === 'number')
+            return `${value}px`;
+        const v = String(value).trim();
+        return /^-?\d*\.?\d+$/.test(v) ? `${v}px` : v;
+    }
+    render() {
+        var _a;
+        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: '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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-media-thumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-media-thumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL. When set, a cover image is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "video": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the video overlay (dark scrim + centered play button)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "video",
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the region. Accepts a CSS length or a bare number (\u2192 px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'132px'"
+            },
+            "radius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner radius in px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "10"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            }
+        };
+    }
+}

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

@@ -5,12 +5,14 @@
 .co-menu {
   /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
   background: var(--co-semantic-surface-secondary, #fff);
-  border: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   border-radius: var(--co-border-radius-sm, 12px);
+  /* shadow-lg drop shadow + a 1px inset hairline ring (replaces the old 1px
+     border so it never adds to the panel box). */
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.04);
-  padding: var(--co-spacing-xs, 4px);
+    var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  /* Tunable panel padding — default 4px; design (Header "Nuevo" menu) uses 6px. */
+  padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 200px;
   display: flex;
   flex-direction: column;

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: 'b6d6cd9511cc0ce9d2025ca162aaeb7d962b96a2', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '91085adedc753afe8f6f9ba2b137ecde1af0155d', name: "trigger", slot: "trigger" }), h("div", { key: 'f7bf1839cc05d7d5ba5c8ea7f5fcb10d50f37ede', class: "co-menu", role: "menu" }, h("slot", { key: 'c11fa45f19630d6568fb66e4df38301b40f83031' }))));
+        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"; }
@@ -213,6 +213,25 @@ export class CoMenu {
                 "reflect": true,
                 "attribute": "open",
                 "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixes the panel to an exact width (e.g. `'210px'`). When unset, the panel\nkeeps its intrinsic auto width (min-width 200px). Also tune padding with the\n`--co-menu-padding` CSS var (default 4px; design uses 6px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             }
         };
     }

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: '08549f09b4a76d1bc2cd572a8f09ed9289551175', 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"; }