@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -40,6 +40,11 @@ export class CoInput {
          *  In the filled search-pill variant (`fill`) this drives the pill height
          *  instead (s ≈ 38px). */
         this.size = 'md';
+        /** Visual style. `flat` strips the field's border and background so it
+         *  reads as plain content instead of a boxed input — padding, label, focus
+         *  ring, disabled and status states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         /** Filled search-pill variant. When true the field renders as a minimal gray
          *  pill (background gray-100, no border/box-shadow, 10px radius) with a search
          *  glyph on the left and a plain-`x` clear — the floating label, helper text and
@@ -147,6 +152,7 @@ export class CoInput {
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
+                'co-input--flat': this.variant === 'flat',
             }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
@@ -519,6 +525,26 @@ export class CoInput {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the field's border and background so it\nreads as plain content instead of a boxed input \u2014 padding, label, focus\nring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "fill": {
                 "type": "boolean",
                 "mutable": false,

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

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

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

@@ -97,17 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '6b5f24ad2f616fa1b4e9d2fcf8c6e9dddc85b5e7', class: {
+        return (h("div", { key: 'd8b9c23bee6f09946081ce7cb91c1697941087e0', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'df075fb85235c8c607580a2f2825047252998ec3', class: "co-json-field__labels" }, h("label", { key: '77f9b5da9f1667331242b601ba5941818408e866', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '25bfbe4ecd2c97938cc8b36f915f8219396935f6', required: this.required })))), h("div", { key: 'bf06e69915f1705a310cb0c115d0ee3c8e5ee3f8', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'c317495385581e32f779e4a243794a5493ebc28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: 'd68efdf098beb43710572d10517159597181b2f5', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'd5aa71be869d4731e5807f43abb47ae84c3eb0cb', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'f2ed5ce77d91b1387241a1094d56a75cb23ffe56', class: "co-json-field__labels" }, h("label", { key: 'bb29ba11182753c531d9c32a54312a85c82d79be', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f43ada2a1eedea7338022114dcd1a9f3678a2eac', required: this.required })))), h("div", { key: 'c49bbb7fbebfb654bad666d651229fefc4fa1527', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'e79137036d429efa440931e7b46f1d7e72cf8194', 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: 'f84bb6f034b7fe724af92d42b8d19fe6b9e183b1', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '077147072123742355123df6e56fbbff44b12037', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '2612ac57f2f0593a2f7438f26a99e78cd841ed35', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'bdee3108962929c93b67551636f0d8514cbc2979', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ba83b63c2283eb2ce26e43ceed41a7806f7a7b6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '7da6904539ed1ae85b2ceac2432824d0b9a7fbe2', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -44,6 +44,31 @@ export class CoLightbox {
         this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
         /** Focus the close button on the render that follows opening. */
         this.pendingFocus = false;
+        this.syncTopLayer = (el) => {
+            if (el)
+                this.rootEl = el;
+            const root = this.rootEl;
+            if (!root || typeof root.showPopover !== 'function')
+                return;
+            if (this.open) {
+                clearTimeout(this.demoteTimer);
+                try {
+                    if (!root.matches(':popover-open'))
+                        root.showPopover();
+                }
+                catch ( /* not connected yet — the ref call retries */_a) { /* not connected yet — the ref call retries */ }
+            }
+            else if (root.matches(':popover-open')) {
+                // Let the opacity fade-out run before display:none kicks in.
+                clearTimeout(this.demoteTimer);
+                this.demoteTimer = setTimeout(() => {
+                    try {
+                        root.hidePopover();
+                    }
+                    catch ( /* already gone */_a) { /* already gone */ }
+                }, 220);
+            }
+        };
         this.handleKey = (e) => {
             if (!this.open)
                 return;
@@ -147,6 +172,7 @@ export class CoLightbox {
     }
     disconnectedCallback() {
         this.detachKeyListener();
+        clearTimeout(this.demoteTimer);
     }
     componentDidRender() {
         var _a;
@@ -157,6 +183,7 @@ export class CoLightbox {
     }
     onOpenChange(open) {
         var _a, _b, _c;
+        this.syncTopLayer();
         if (open) {
             this.index = this.clampIndex(this.startIndex);
             this.resetView();
@@ -286,17 +313,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: 'd48b05f652170cd961637700458eea0d56ded15a', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: '0c158b9cca8743480d189ee6abb1445d6892ebc1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'c26684772cfd9ae9dd5c2393e54bc8366d3cc470', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '393614be92d88b31cab04cd8a5f21cb021fe6cda', class: "co-lightbox__zoom" }, h("button", { key: '5e4d5a1fc24a7aaeee4d11927c0ddb208b08fe71', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '3caea68581b64d395d31d0ed2cd27d255ed9d402', name: "minus", size: 16 })), h("button", { key: '28df86fa8703245818fb60c4ee9e2d05dc19b1dd', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '3e6307614505a720cba72214cc8e2f8c89d7be68', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '80f4f47e8768815d158d30e8ce29ad074d56bec6', name: "plus", size: 16 }))), h("button", { key: '97acb23668d83caae3923fde3dfaa6b2232ced0a', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b69d3de0a9912c71e2803272575d03d76d4d1d77', name: "arrow-square-out", size: 16 })), h("button", { key: '6a1cd64d3b5852d2707c0f01a8f16306b6cfd150', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '22b97a92c4d3651d0fadcbdbbdbda9581eee721b', name: "x", size: 16 })))), img && (h("div", { key: '41fce41bf57c1c4a0a765134f7cf4a1d57677e67', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '9b96e949be261813af8c44802e7a85c9892696c7', class: {
+        return (h("div", { key: '409eeaf562838f77035c1ec68db8de59aa862f5e', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '1e92d6f50ab44b6a70407a2c55acba360c0c66c0', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '0181054cd227183e0b942e1262d42a29125852b5', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '97cb4d596a790dc1fe41cda38bdd4b0b4a7d873f', class: "co-lightbox__zoom" }, h("button", { key: '8c37c4b6978b8bfb1ce7a33a52fce30e2d740d4b', 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: '294ee562bfe7be7bb2a181a8411045a4d0c1b684', name: "minus", size: 16 })), h("button", { key: 'f32438655d3a7e81a08196720471212443594d7d', 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: 'c82db20eda5ef0bd671f551f24ff96771f30a579', 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: '855559de89e53c3aa8ae34802fbc04da8a04e28d', name: "plus", size: 16 }))), h("button", { key: '00cbfeec37137ba3a5c86801caf5e41e17a25c57', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '62f5c52bd92b3470b3940f59e61c4f89fad7e86b', name: "arrow-square-out", size: 16 })), h("button", { key: '800b50c607772142b2229b4a19fe970998a8e886', 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: '9850ddfb8c2aa409fa35ea9f357bbea2ace3aa41', name: "x", size: 16 })))), img && (h("div", { key: '4b669e9c6599a25743ba6d194c80faf1cdbfceec', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '34218bfdd2691dc399ed03ca25d64ee81106114c', class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '605186deca28fb6455e5f72ae0d0fd1380482947', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: 'dc9a8e78cfdf8e220e2173a8960f06a8bdeaea59', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '5a782d3e4ae8578b2e3579db2a9b710f0219ce51', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '3695eb0397a9a13a48c66c3f502746ae86b1ffbe', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: '020e87affb9ad79b48ec9d77a7796923127b45b4', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '5dd82a8b66cc3b2abc4c04483141032a7a07bf2d', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: 'd39568adf357c46fd7445c070b9fcdcd6bbab845', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '8b1acaa692c196615f6f00641ba86c14687f6a2b', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '85e8aaebc526455e22eb635b2e64f5105730b56e', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6976d3bb7f5594e8d40cf01b05cc7611cb6066cb', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'f2b6a2b71a038b5a2077d5bb4cb8f4b57aa85ebb', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'cfb849d4e483b104dd0d20c7241126bf2151c1cb', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '6edb490a4a7864056b07bb18b156e3674d785dfc', name: this.secondaryIcon, size: 16 }), h("span", { key: 'ac7501438e06aa52e215e6b8aea549aaf098d0b6' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '6589a1a226b25f8393578ae11209c3388ea637b8', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '6665e17ca3bb9d439ef89f05973086d0a7bd7a8d', name: this.primaryIcon, size: 16 }), h("span", { key: '205c5f6653c264881a010a3def5ae65239b5333c' }, this.primaryLabel))), h("slot", { key: '48a894d428459f179161a1eb3fcbd5463ca760a6' })));
+        return (h("div", { key: '54b813b714dbcdfb535349f6f49c715e53bdadd7', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '6fdf4c75f1803532e43b0609fd765aeb79ae3d89', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'e4199ccd7f50044b12aa7bc16b3233fbc4ffd9bf', name: this.secondaryIcon, size: 16 }), h("span", { key: 'f6f81eaf8ae03526fd3cf5e31946d1470523adb3' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '5ab90aceea926978ef73f6be77b7c9aa8fd45156', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '2693de047b35e795ee24932612b4b01c8050ef1f', name: this.primaryIcon, size: 16 }), h("span", { key: 'e29b11a48ee4bf3acda5a7a4f493cafdd6fc691d' }, this.primaryLabel))), h("slot", { key: '7f9ed9622ff7ed6486b5c253f9c3bd4e5c2ce1e3' })));
     }
     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: '9e287e86942493229ae39c750c8d53056795d844', class: {
+        return (h("div", { key: '2833a06b0f1ced02b1c1d7b4002757985e5f6184', 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: '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) => {
+            }, 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: '74bdab766a1820cb43b88b9a994ea158e1a8f0ae', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'f8b117b8b9e1d6db47785783acab5e60e4bb9e7a', name: this.icon, size: 18 }), h("slot", { key: '4c96820ce0925af1a2fec623c4038cc117d2f5c6', name: "prefix" })), h("div", { key: '3c988300fe272d3da9b2ae6a463a4fdc6b683224', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '6f3d61fb883dc3d6fe4751044569ef791a87db03', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '37edcae63b25f9c54e27349cfcc121804255c83e', 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: '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.label))), this.description && (h("co-tooltip", { key: '609ad1694738508bed362594fc34609565eb5559', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '4c2231492bab190bda98189ae5d770aaf3aec3e0', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '61914fe8d8701e99d6a6f8b5e596c410d90544c7' })), h("span", { key: 'dbf531af497bf9f191351288894c4284582cc384', class: "co-list-item__suffix" }, h("slot", { key: '1a3c7df388d987a3b9835220bb847f3952c838d7', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: 'edc4e2d138c4a888fa78981568a57beb9a5ef7e1' })), h("span", { key: 'ed100617bd1d7f54df33b05696948a187f5df07a', class: "co-list-item__suffix" }, h("slot", { key: '7f76f1a12a0b6c8f2e71e3140125797b62626e90', 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: 'daac4e719cbee00b1561e1c177e1c10c41c9b176', class: {
+        return (h("div", { key: '787947d309049a7ca5fa739a7748993833dfb80c', 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)" })))))));
+            } }, 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: '74c58b90643aa7cc33be7b42081a48e9f89127ed', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '752f888648a9c7dcbedadf880566646ff8280331', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'ee76649c415fbe00737d00584099bf359c1abcca', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dd160a9aec688bc4d97fb3a9245bcd613ff85cb4', 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: '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' }))));
+        return (h("co-popover", { key: '92d59b733eb81e53e003ebcbe4324480fbcb4475', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'd8e70f68b13dd8f96a75d2f5c96b87651e1afc18', name: "trigger", slot: "trigger" }), h("div", { key: '2787503b2711a88baafcacad615814c0abbeceb0', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'f3e4139845c8f77970b735631e26f5cfc6710405' }))));
     }
     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: '9e29bc7905c4b9d83846ea9e85021ae0f1e34fc3', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: 'a305638c4f791be63278b343966cb22d92448ad9', 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

@@ -88,6 +88,27 @@
   text-overflow: ellipsis;
 }
 
+/* Caption: segunda línea bajo el label (fila apilada). La fila crece sola
+   (min-height). El icono queda centrado verticalmente — igual que V1. */
+.co-menu-item__label--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+
+.co-menu-item__label-main {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-menu-item__caption {
+  font-size: var(--co-font-size-11, 11px);
+  color: var(--co-semantic-text-muted);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
 .co-menu-item__suffix {
   display: inline-flex;
   align-items: center;

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

@@ -135,7 +135,7 @@ export class CoMenuItem {
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: { 'co-menu-item__label': true, 'co-menu-item__label--stacked': !!this.caption } }, h("span", { class: "co-menu-item__label-main" }, this.label, h("slot", { name: "label" })), this.caption && h("span", { class: "co-menu-item__caption" }, this.caption)), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
@@ -215,6 +215,25 @@ export class CoMenuItem {
                 "reflect": false,
                 "attribute": "label"
             },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional second line under the label (muted, smaller) \u2014 e.g. what an\nexport method means. The row auto-grows (min-height, not height)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption"
+            },
             "dense": {
                 "type": "boolean",
                 "mutable": false,

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: '3560ee34e7edb62cd0ae34572bac0afbb5b02a74', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'ba68e320e4e0a0881193f1d85f2d5a2ef287e324', class: "co-modal__frame" }, h("div", { key: '7d3748b4b0f8fc5a4715bd075d2d9f74e2ada0ed', class: {
+        return (h("co-overlay", { key: 'aef8eefd5790e210ada8e53f1d904dd7652b75dd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'dcf89aa4a6e783e16e99b3c350b917e073c26b76', class: "co-modal__frame" }, h("div", { key: 'c579fe7b0ac3b92c4a413eac9cc4a9da3ec06f69', 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: '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" }))))));
+            }, 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: '37bcab4a7d73d99ed199a4dc3ddbcb5d452f7f67', class: "co-modal__header", part: "header" }, h("div", { key: '1761b1fa2761ec89b74da943652533873ffb041d', class: "co-modal__header-text" }, h("h2", { key: 'f8ee41c7c122956431c388222cdde6263089118f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f719d9f6b3f974f0f677ac9daba1611e8e90d162', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'c893a1c5f36631743061ad71f5c120ba6d695081', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'afcce2e70b4045188ee37897798d8f54add996c2', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'ab2890e8f0e3308d9fe989107eebb6ca24161f6d', class: "co-modal__body", part: "body" }, h("slot", { key: '2991f8166a1fc52dbb58350ab5573d67a35ed2ad' }))), h("div", { key: '3d2a5f9aa2ba1eac6d11828e0653be775d9f9152', class: "co-modal__footer", part: "footer" }, h("slot", { key: '62ff2668995d3d9d33719b29a85a8afd31013042', 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: '0215148d2cd901a2b60f5ab14704891e97ff98dd', class: {
+        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', 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: '6985aaea372d26291422e5533313c6d6dad85b08' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@
   /* 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: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   overflow: hidden;

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: '3c875500165c314b0080a19a7d33f8b1fc5f9724', class: {
+        return (h("div", { key: '851b1d89af98cc8a0ad9c925576b12fac545721d', 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: '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)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ccb5f1b7e75e65b732d31c8f9fe7abb1ca127a21', class: "co-number-field__labels" }, this.label && h("label", { key: 'e5121754db6dff01c1e62a3b27503df9c8dcafa3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'ebaf4bf7d26267bf96e0d99ea1f1b4f448f801ca', required: this.required })), this.secondaryLabel && h("span", { key: '77b800626376802d8e25baa9af81eeb84298d175', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'da070461da5fc2be02dfde4a2196c910f406d459', class: "co-number-field__row" }, h("button", { key: '522b084d7582c7e223db943b96009bc75cc77c2d', 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: 'b598a702578fe0b10ea7a7adde0a9ef638d177ff', name: "minus", size: 16 })), h("input", { key: 'f061fc874dfcd886f9e20132f10359476741dbaa', 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: 'e007c2d1d46408bc961cbfdf316b49fbf2f6b2c8', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '73f440263698c26a25495e408529417e0ee80690', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '577021788bca76984f2bca56ff6cdec34ef47ac5', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '82f1be58f496c76d218c6d5550615ec03691c564', 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: '42f83b44defa32ec4efb9af84518fa1a0cbc6caa', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '68c4300d1b5fb9010bc07457cba7d1628c9d5dc7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'aef962d0b62920215685af9c4cd06bdc63fff92d', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'ea5a62af95585e27a791e43a2038036c098069b6', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.css

@@ -897,6 +897,24 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   color: var(--co-semantic-text-default, #1f1c1b);
 }
 
+/* ── Reorder (drag del bloque selected-first) ────────────── */
+.co-option-list__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+  color: var(--co-semantic-text-muted);
+  margin-right: var(--co-spacing-xs);
+  flex: 0 0 auto;
+}
+.co-option-list__drag-handle:active { cursor: grabbing; }
+.co-option-list__option--dragging { opacity: 0.5; }
+.co-option-list__option--drop-before {
+  box-shadow: inset 0 2px 0 0 var(--co-semantic-border-focus);
+}
+.co-option-list__option--drop-after {
+  box-shadow: inset 0 -2px 0 0 var(--co-semantic-border-focus);
+}
+
 /* ── Group headers ───────────────────────────────────────── */
 /* Figma: Geist Mono 10px uppercase, tracking 0.8px, color default. */
 .co-option-list__group {