@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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: '3694e74443cabde9c86e37a38d2ab93f49e2a239', 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: '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: {
                 '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: '1771161363b23da8aac7f1c70ab56b32f208f5cd', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'ce965e666a8107027249647a256c4e46d72d2db4', 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.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: '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: {
                 '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: '8578fbfa008878324b15f2d7ade346f86f465bea', 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: '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) => {
                 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: 'e591fcabe8c3f3c81c276c95d40e5dc6189bd4e0', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'fd55eb538aa57b89ddf17598a1c58cfc8bbcc04b', 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: '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' })));
     }
     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: '1c6124749c2bc07f1f5118adf3a906d0316db256', 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: '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) => {
                 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: '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.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: '2e35ea5289301048d967b4b9bf11743101927118' })), h("span", { key: 'cd33f25a15fb3ad3a747fad14cccb3141967cc4b', class: "co-list-item__suffix" }, h("slot", { key: '25b6881aacf68e7b0e927d367ce9492a642d8224', 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: '003a31fad075f90eb6097f3a9c4844d7bb15285f', 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)" })))))));
+    }
+    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: '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' }))));
     }
     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: 'dd21fada7235dda4e64c2a3a003b26c4dd65501e', 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

@@ -10,8 +10,11 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm, 8px);
-  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  /* Tunable metrics — defaults reproduce the original 8px gap / 8px 12px pad /
+     36px row. Header rows use gap 10 + pad "0 10" + height 38; sort/type rows
+     use pad "0 10" + height 36. */
+  gap: var(--co-menu-item-gap, var(--co-spacing-sm, 8px));
+  padding: var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));
   background: transparent;
   border: 0;
   border-radius: var(--co-border-radius-xs, 8px);
@@ -21,7 +24,7 @@
   text-align: left;
   cursor: pointer;
   transition: background 0.1s ease, color 0.1s ease;
-  min-height: 36px;
+  min-height: var(--co-menu-item-height, 36px);
   box-sizing: border-box;
 }
 
@@ -30,6 +33,11 @@
   min-height: 32px;
 }
 
+/* At-rest selected highlight. Declared before :hover so hover still wins. */
+.co-menu-item--selected {
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
 .co-menu-item:hover,
 .co-menu-item--submenu-open {
   background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
@@ -57,7 +65,17 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  color: currentColor;
+  /* Default follows text color; Header rows override to gray-600. */
+  color: var(--co-menu-item-icon-color, currentColor);
+}
+
+/* Trailing check (single-select menus). After the flex:1 label, so it sits at
+   the row's trailing edge. */
+.co-menu-item__check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--co-semantic-text-default);
 }
 
 .co-menu-item__label {
@@ -86,12 +104,12 @@
 .co-menu-item__submenu {
   /* 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);
+  /* Match the co-menu panel: shadow-lg + 1px inset hairline ring. */
   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));
+  padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 180px;
   display: flex;
   flex-direction: column;