@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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: 'ce1a39e0f1489b46e9610b060ca652e8896746b9', class: {
+        return (h("div", { key: '37c5b552e44d19e321bfd64a35da61e54418013c', 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: 'e5ec0e7d2f454f1d671ed3929c2b5eb7dc4b8cf9', class: "co-json-field__labels" }, h("label", { key: 'd9961499b8d91c385d9278cbd856e04a44b28940', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '8ba3b3249e0fa1cb3a1b2946ac6a1b7561d30ef1', required: this.required })))), h("div", { key: 'e6f28cf374cc9ad2714505854572504a59c7258c', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'd380a4c0758152c5e39da71d61f5f81e28c22563', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '97f76e4ffd9e8b3242515ca2d2d13b786cd390db', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '310540578b3a2152a1c3f34b0d2f1a00677b5e76', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '5ab03329fc4828abf624e473aef67bfa6878a4b1', class: "co-json-field__labels" }, h("label", { key: '14babf193d87564b813174f34df4ae4fc299155b', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '635dd453ef2ed9ee720cc1c3f1c07a7b744d61ec', required: this.required })))), h("div", { key: '83763a2b5438b74da65e51bcbbdd6e6776eda45a', class: "co-json-field__field", part: "field" }, h("textarea", { key: '1f3929e95d98aca26d8f47b3fbce6c2c37aea3fa', 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: '1dd77538a40085b72ba6b407e88d31faa73cd8dc', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '6fb332624ab9dfa6b21af159ad3153eea4066c9a', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e604c4e4489ace1f2c189fb532f091f26962b5ff', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'eb0567a78a33fd41917c090f6aaccecac49f2519', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'f4da415f949ee8d127eece321f4d8feecdd3a1ff', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '7e3b458f7173be6ac4fdcf7df42d3a132ab5082b', 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

@@ -31,7 +31,7 @@
   background: var(--co-color-opacity-negro-80);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-lightbox--open {
@@ -87,7 +87,7 @@
   font-family: inherit;
   font-size: var(--co-font-size-13, 13px);
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-lightbox__btn:hover {
@@ -116,7 +116,7 @@
   max-height: calc(100vh - var(--co-spacing-5xl) * 2);
   border-radius: var(--co-border-radius-xs);
   user-select: none;
-  transition: transform 0.18s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-lightbox__img--zoomed {
@@ -144,7 +144,7 @@
   background: var(--co-color-opacity-blanco-8);
   color: var(--co-color-base-blanco);
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-lightbox__nav:hover {

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

@@ -313,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: 'f29ff8f043b148f1f47fd477e3a12628e292f780', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '8d258c9fb5f5c7ac7cd17b7195f3f5589030e5fe', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'fa246addb464b12803399c22fd7ecc7d47fdf424', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '05e9748c4b561c8f7169c87ab897192427531ac4', class: "co-lightbox__zoom" }, h("button", { key: 'c87d84e63161ff23f1b514f992781ff3ccc9d375', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '80e9bf45f296b0c5ac16d265c19e88969511ccc6', name: "minus", size: 16 })), h("button", { key: 'aaecee75b60643d885376dee92a8773faf989a3a', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '4ad7e8d83c933f0563304911facc8ef32ec88556', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '7f5d57def9d10437913bb25f577a475eccf41851', name: "plus", size: 16 }))), h("button", { key: '32d00a606ccdc9b2694d8da797064e4f07b997a6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '492f83405006a9642c9f6dd22e02c04a9b871909', name: "arrow-square-out", size: 16 })), h("button", { key: '14241c12b7f3cb4a07c2c22af2f8316c360c1541', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '44a2cdbfd7d79274f06f54663840776c05a95581', name: "x", size: 16 })))), img && (h("div", { key: '20bd42e8d80e481fec492b1cfdcd3fc54ea1e10f', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '1ba1c0942f2cd13f7f302777f28d961660c07fa8', class: {
+        return (h("div", { key: 'c1743a4e71ebdb84af2271962ba1b76a434bbe24', 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: 'f12555c4b7e8f4f061b7a449d3cb6665c4846cda', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '4bb66de1922f388886d000342f983ab852db0045', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '9fbdc078e7dbe0af9813a91a60155c1545e7309e', class: "co-lightbox__zoom" }, h("button", { key: 'b780571cec8da08b9ae069e1ffb6be1d933c4ea1', 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: '05ffc5137ff964d4159fed49191c2af17abec51f', name: "minus", size: 16 })), h("button", { key: 'b3d6751bb3b81233ccfb61b9692b9d14dda3307f', 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: '34ffc666558698b6e8dd3c0559ed1c5372c7947b', 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: 'a0c066dfb0cf6026b08f85821e197e2340963979', name: "plus", size: 16 }))), h("button", { key: '12f8f66333d043214c57cebb81d1a153be72f9b3', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'c60b9a9856aa62728576c356af09880ca2d7710d', name: "arrow-square-out", size: 16 })), h("button", { key: '8a7caebb371e5f509051b92a730712f6e304eac2', 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: 'efcd1f9672c2fa61b74f75b25771574ec6108004', name: "x", size: 16 })))), img && (h("div", { key: 'fc99ed851d5ffd99fb09b7c98fb4d317bcaa1f2a', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '7e43afbd4e170ab2b1a818501b7e34d4147c143e', 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: '61decb40ac1ee12a1d81d8a4da397860fe7ee116', 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: '461444963dde42d1d72af6bd88fe2013ab3858ee', 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: '340f39ae3b741560bc3dc0eb6296dfa701699438', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '04cec8b520c3416ce5e38aefda815a18247b79fa', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: 'a69c348080ac70da9d5af641c502e6a1f206f7dd', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '56504889f11cb56cea40aef5676ea6916aade850', 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: '1bb15d7437610cfad3003af07849edd8618b04c2', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '786357f804681f37cc1603e926b33ec3b8b7a76c', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '44cb0a0c644aa75c581bdd863df98590dbd0ebc3', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6642109e875532fea123fc75fe0cf0ea6129be85', 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.css

@@ -23,7 +23,7 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
   cursor: pointer;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   min-height: 32px;
 }

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: '6b63ecd9bc5ba3a85bb379b825c23c8eac2dcfd6', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '2e73e9e4918dbe1d05a13f8cc0989a14d3228fb7', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a408433a6d0bcf3b732538931e3adde214127ed0', name: this.secondaryIcon, size: 16 }), h("span", { key: 'de1b3807ed56be80732eb3b2867f85287f9833ae' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '5d88aea121289757aeee5bf30619322bdd2c3371', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'b5d3ab5e406bdf097bbbfeb182753c103cde81b4', name: this.primaryIcon, size: 16 }), h("span", { key: 'a089130f639fe642d11cbc1a5c80b21de9bbd038' }, this.primaryLabel))), h("slot", { key: 'd821c3e281bd10a66a67ae714f77fba1454214c9' })));
+        return (h("div", { key: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@
   font-family: var(--co-font-family-primary);
   cursor: pointer;
   border-radius: var(--co-border-radius-sm);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   min-height: 40px;
 }

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: '6a80f6ea8ce1dcf4053aac0445956455f4d062e6', class: {
+        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', 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: '71f567cab5e06b8d579af25254fe0b491ae707f0', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '4c3312fa17aef519e2325d54e827f2f112ca6e50', name: this.icon, size: 18 }), h("slot", { key: 'f34a13461dc35afdee8cadd2bf4cfff4a7f92f70', name: "prefix" })), h("div", { key: '18f6a08c1311197e0572e83511b2aa193a05f0a6', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '1862887315c011e64a20b54b275dd0dffc30371d', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '0944e54c5cc7e587083092b802d3c59259b2782a', 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: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '778b003dc31bc196a770a7dc6c4eebe649faf8c3', 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: '72ed627f3de4bb7dcbed17f156db8a89f2ab8ac3', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '1b4152152b72abddd00c92bff66be48d65b6f2ce', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '623ddfa43f748e64ebd8ec8d3eea2301da57c448' })), h("span", { key: 'd4f663c8cfa8b4effb02e9708b7dd2ae6178f9fd', class: "co-list-item__suffix" }, h("slot", { key: '3287804582ca42d1d19283ea501e92782e9fad85', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', 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: '4ec4b72a39a7a7e2e741a6eb4322aae3d5d3d311', class: {
+        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', 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: 'e1395ef9f3d637b055fad0b5a5b7bc42da448b76', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '52e3e782bf7c3068042ef4adf3e56788bc02a68a', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'c2ccdf296b70c891e4567c94c50ed24d206fb742', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '45abe6f8deabe45557adc7035e74b3425e9fcbae', 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: 'a6ec84bed9d75673b7b917b2cb513f01545d5bf2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '9ce636bf0a3d9e53eb271803fc0bbd60f4314989', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '07016dfed6ee4ff793650d830f152d2555731550', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '825b3921b94248f28b30ce91b63525fd2fda5b35', 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: '1796401a56db5a123525da420b515349fa7e637f', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'a81ef8c2fc0bbc3d34f2745f19c657633f168ee3', name: "trigger", slot: "trigger" }), h("div", { key: 'a5b1324c7814922e18e92845257f7d2e5c638d13', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '8fef31bd0da92c62c4d196fcd8394df82898cf1c' }))));
+        return (h("co-popover", { key: 'a386ccd371e9eb5627b6c70f43e66d6844df0b8a', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '9115ac2e7689183d9d397bd602d1a8651dcf364d', name: "trigger", slot: "trigger" }), h("div", { key: 'a56a14dfc5810144b93ca68ce54aceb7e5c2b85c', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '045510a7bbde56d841eee17d7561249a090e6de3' }))));
     }
     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: 'e47780a9d8f80cf8a9b1b4585e71bb20b2bebf5d', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', 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

@@ -23,7 +23,7 @@
   color: var(--co-semantic-text-default);
   text-align: left;
   cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: var(--co-menu-item-height, 36px);
   box-sizing: border-box;
 }
@@ -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.css

@@ -54,7 +54,7 @@
   font-family: var(--co-font-family-primary);
   transform: translateY(8px);
   opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-slow) var(--co-motion-ease-out);
 }
 
 .co-modal--sm { max-width: 400px; }
@@ -124,7 +124,7 @@
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
   flex-shrink: 0;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-modal__close:hover {

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: '05ef9c3f53b155899f4838db0c0fca818f542731', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '46dbcfb7b8073c2ca11114fe049d55842bd9cb94', class: "co-modal__frame" }, h("div", { key: '75a703ddeb451e3afc4392990c10040423f0f7c7', class: {
+        return (h("co-overlay", { key: 'ff50cf55b239e9b98ecfd047f612b0ccbe53812d', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '344ca11c6dca11be7f130316979a0042c58a2727', class: "co-modal__frame" }, h("div", { key: 'd91ac84494926b9bee4f347dd14a9f1ca900c997', 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: '3ebedf6549d81d4515abef9cd406688d82d583dd', class: "co-modal__header", part: "header" }, h("div", { key: '8c08be60fe1cac72a2351acbd26f93c4aa2178f4', class: "co-modal__header-text" }, h("h2", { key: '8235568540f5c09941790d203ae43c94393f4c3c', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'bda3dc9a4eea2b60c9728e01b83771ea921dec57', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '10bf91d47ce12f40e3d7ede6adc788ac5952e928', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '3eb98394355c5d60ca633c55f6c26111b046bfa7', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '1fa27604b8f29d2271b4c4291a52949a1a57dcba', class: "co-modal__body", part: "body" }, h("slot", { key: '1524ac17115286ee90e4ffd251e3407edb1ecb94' }))), h("div", { key: 'f65aae95cdbc156285e3837187b161a65d8772ef', class: "co-modal__footer", part: "footer" }, h("slot", { key: '936d4e2f0b52553abf4edec689ff13e8d0bc1940', 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: '9c2e4c0abfb160f422db6c048ba291fbfe403eb6', class: "co-modal__header", part: "header" }, h("div", { key: 'e35895ad9eca4b1ef77530353e86f1ea06e853dd', class: "co-modal__header-text" }, h("h2", { key: 'd628fe5b03db72fd8b632ff05df78deeeef1e85e', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '388698d018ccae8c14c3280c30e3039efe6285ed', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '9a9e313e0f6f39aa25ebbcf12a3893afc5dc48c9', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'ae3d4a26f37c459c9ecd9badb037fe4dfb8d1b20', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '13a32d3db0aed81e11670d64c41fb7022e26e16d', class: "co-modal__body", part: "body" }, h("slot", { key: '68edd276b236c35f73652ea8c676e736a9b939dc' }))), h("div", { key: '2346c64810c60f47424383c5e8cbccc909e2dcf6', class: "co-modal__footer", part: "footer" }, h("slot", { key: '8e824c5d5b8042046b0fa8605cb21b5081f5f97c', 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: '93279a4c80cd3c050fe5bd5bb10b0c56fa942bdc', class: {
+        return (h("div", { key: '2bfd8f245fd8e93a2d085c5cecbe729a32f10754', 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: '643f397c092a3ad3961158c641bab0d4edb27e47' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'a07380f56382e9b96b335ab9169a16c8ed9e042e' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@
   min-height: 40px;
   overflow: hidden;
   box-sizing: border-box;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
@@ -100,7 +100,7 @@
   color: var(--co-semantic-text-default);
   cursor: pointer;
   padding: 0;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-number-field__btn:hover:not(:disabled) {
@@ -137,7 +137,7 @@
   background: transparent;
   color: var(--co-semantic-text-muted);
   cursor: pointer;
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-number-field__clear:hover {

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: '81d578bdeaefc9f6176ab68ca38b5e831ad636cd', class: {
+        return (h("div", { key: '5778de74c2122527e5e1dd5374ca7462c9777602', 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: '0010a5984faa5c26d3ed18a29c43679422158529', class: "co-number-field__labels" }, this.label && h("label", { key: '1744b37b776c36e6c105f6537e9bc0eff427f3c3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '24b51fde19384d3de672b6c1aa1c54c408078b98', required: this.required })), this.secondaryLabel && h("span", { key: '752dca236f11f65a78ab0f2e35bae1a0dcb81ba8', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'a88c171a1349972ed78452b0c304cac207921a8f', class: "co-number-field__row" }, h("button", { key: '4a781c675e97937288f641d55e821fa30104a180', 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: '12f82a9f0f8c1b0c9f51264006084d4e80d81715', name: "minus", size: 16 })), h("input", { key: '6f440216843a93d124723b18e0f6f1e7ce98791c', 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: '6672a63fc024e9d33661fee37deb04debe2aaa25', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'a0ad4682f949dab538db35348282a3cab52fcb75', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '2beb8574b79926c54665081e4ed06e191932bed6', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'd6e01ce20f596ff102899680f7234d35042e2d49', 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: '27e33390bc7f3baaf9caed056e8e3e6e64b291c9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9cc415d2a5f5be410a0677ed7067c7d9bb8368df', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7cf249285dcd15680f6e21840adcfc81dfd16298', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '6791bb8f9789af7b878d7c5aa27047d905238e48', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '13944093fe31d72ffc4ed4170dfb756224d22e41', class: "co-number-field__labels" }, this.label && h("label", { key: '1bc489c56bb27e91da2f81e56632d3a7ae3fdf13', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'e69950bb76c776673c758086777fdf6329850981', required: this.required })), this.secondaryLabel && h("span", { key: 'd7418acba4cc4f4f585f339c74ff65ef2e7925eb', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '2c48d204e0f73570a6e8fb7fc1e62bc4edece3e5', class: "co-number-field__row" }, h("button", { key: '2c8e1a93f645b4abea04f3c1208420b33360dac3', 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: '5b97f5ee852aa45ad2a23479de2935a3bded9949', name: "minus", size: 16 })), h("input", { key: '71a9b87401cd8ae246feb7a11b6ade377449737b', 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: '8d1f92d1a292095a025123df72cbb1eddd856554', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'acfbb71c7e6da0f6af4a202453ab41d71f00cc0b', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '17ab4abf993d782e607a112d6eace5dcf98634d4', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '30d79b2b4e5ad4d9dd2d5c11b0ed176de32d3447', 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: '333ced48d340087501dce733c6e54708de8b5ac9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: 'fdeab7f5a8f87c4374e4d1c19dd722b013df093d', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '959111c29e78996eba76e0e4dc0b9a81139536e8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '57696fb113011d84e158cc3dfcbd619a0951c002', 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

@@ -778,7 +778,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   font-size: var(--co-font-size-12, 12px);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-default, #1f1c1b);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* Filas virtualizadas: alto FIJO 32 + margen 2 = pitch 34 exacto
@@ -890,13 +890,31 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: 0;
   cursor: pointer;
   color: var(--co-semantic-text-muted, #888888);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-option-list__row-action:hover {
   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 {