@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

package/dist/cjs/co-lightbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 
 /**
@@ -314,17 +314,17 @@ const CoLightbox = class {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (index.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 && (index.h("div", { key: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, index.h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), index.h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, index.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) }, index.h("co-icon", { key: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), index.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), "%"), index.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) }, index.h("co-icon", { key: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), index.h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, index.h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), index.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 }, index.h("co-icon", { key: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (index.h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, index.h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', class: {
+        return (index.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 && (index.h("div", { key: 'aaa047087d36959105b86c7dde558155f3c68a69', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, index.h("span", { key: '32fb4ca4e93b26f24817db3c0aa2751be1de60d6', class: "co-lightbox__caption", title: img.alt }, img.alt), index.h("div", { key: '33c8ab802bd2d23e43adb02bb0428d302a07db74', class: "co-lightbox__zoom" }, index.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) }, index.h("co-icon", { key: 'fccd37212da128bcb4d1dae7278d305e376fbdbb', name: "minus", size: 16 })), index.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), "%"), index.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) }, index.h("co-icon", { key: '017e7627ed2563c76e6b5dcf8dddee16ee37b9ec', name: "plus", size: 16 }))), index.h("button", { key: '2f57b78ea0d5ad1cde4d10e874681dfc1279c333', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, index.h("co-icon", { key: 'f3de0f4b04e07966784efd3e87775f1add854578', name: "arrow-square-out", size: 16 })), index.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 }, index.h("co-icon", { key: '6208dfb164d75cbecb490b3237bc2350c224d7c3', name: "x", size: 16 })))), img && (index.h("div", { key: '1ba614d572e39b9e6f08a5810d129bca7b7b4f9b', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, index.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 && (index.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 && (index.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);
-            } }, index.h("co-icon", { key: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (index.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) => {
+            } }, index.h("co-icon", { key: 'e2ea791a38889d458c30155c3c6f65ea734ff1c8', name: "caret-left", size: 24 }))), img && multi && (index.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);
-            } }, index.h("co-icon", { key: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (index.h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, index.h("co-icon", { key: 'e591fcabe8c3f3c81c276c95d40e5dc6189bd4e0', name: "caret-right", size: 24 }))), img && multi && (index.h("div", { key: 'fd55eb538aa57b89ddf17598a1c58cfc8bbcc04b', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-list-footer.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coListFooterCss = () => `:host{display:block}.co-list-footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-list-footer__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-list-footer__btn:hover{opacity:0.85}.co-list-footer__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-list-footer__btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-list-footer__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
 
@@ -17,7 +17,7 @@ const CoListFooter = class {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (index.h("div", { key: '408e27a26e9d2d1802ba336690c84c745a79a22d', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (index.h("button", { key: '9a597df6466ebf5c5720b50d0d4d2993ba3af9ab', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && index.h("co-icon", { key: 'c743c1399b14d175c51ea553d508110e8bcaef05', name: this.secondaryIcon, size: 16 }), index.h("span", { key: '3c32ad1ea326da99debeb716980b38cf9777b168' }, this.secondaryLabel))), this.primaryLabel && (index.h("button", { key: 'ce57a3fe3456d4cd3959d556304de9de7558ec40', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && index.h("co-icon", { key: '584416793ecbf91a960b2b55f54e703ba1d0ca5c', name: this.primaryIcon, size: 16 }), index.h("span", { key: 'f227d58236ab0f4d31b398cfc9bf7419efd57d02' }, this.primaryLabel))), index.h("slot", { key: '601ef71ed5374dab62a79ad875da9b6f7a0fcfed' })));
+        return (index.h("div", { key: '89ebd30358e2c8b1e1461adb9a294862719dac2f', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (index.h("button", { key: '877ee7f795c35c5b2845b606c40518a98f691d00', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && index.h("co-icon", { key: '2ecba284a7ac5b1789900a6ab6f66d3e1692d894', name: this.secondaryIcon, size: 16 }), index.h("span", { key: '5a864d3d85e7a10fb66afd67805527d04cf496ae' }, this.secondaryLabel))), this.primaryLabel && (index.h("button", { key: '65281886aee6037f7386e6c92a0e9e158945b496', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && index.h("co-icon", { key: 'cafc1fbda58a3b3d0dbbe9202e872bd1a96cfbf6', name: this.primaryIcon, size: 16 }), index.h("span", { key: 'd230a2a1edfe02c75c555f635be0dae8015cdfb9' }, this.primaryLabel))), index.h("slot", { key: '5f1bec4894b87226198d6154dd9c5f5e86272d4b' })));
     }
 };
 CoListFooter.style = coListFooterCss();

package/dist/cjs/co-list-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__content>.co-list-item__tip{min-width:0;max-width:100%}.co-list-item__label{display:block;font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{display:block;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 
@@ -71,21 +71,21 @@ const CoListItem = class {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (index.h("div", { key: '984e2c7fcb5f4124c871dda103e450b858143c0f', class: {
+        return (index.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 }, index.h("span", { key: 'd1a3466d6ecc565435d3918a596bc7620cce2197', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: '2374265eac83fb8d86ee26ab3317da2c2c9d2998', name: this.icon, size: 18 }), index.h("slot", { key: '6bb538d2212c2bd25d61c54a59120295ff55692b', name: "prefix" })), index.h("div", { key: '052ed53fb59580780a0d1c2b1dbdff7711fbb585', class: "co-list-item__content" }, this.label && (index.h("co-tooltip", { key: '027cb3026c0ac2efdfb76f7eeb9600d21899e865', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, index.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 }, index.h("span", { key: 'd452e5ce3b962eebd63fb99d858192e56390e4fe', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: '1f2451697758c49bcce76c417ecdd1069a3b923c', name: this.icon, size: 18 }), index.h("slot", { key: '0366ddc338f487ebfda19c8455009ec7d547a768', name: "prefix" })), index.h("div", { key: '38e01734e0b6a16f7020eae8d6cf1731c59b3c64', class: "co-list-item__content" }, this.label && (index.h("co-tooltip", { key: '353d8e6ca59dbd957473cd8b60d51d9652c79780', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, index.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 && (index.h("co-tooltip", { key: '220243aafd77d681315f0847cb3db72110330b7e', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, index.h("span", { key: 'fb8543457be7e67c7eca8461f207dad833503462', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (index.h("co-tooltip", { key: 'c08d96031518a7c96ab0d6bb71b147f3aa769d50', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, index.h("span", { key: '33e4c5c76a1d066d408b07ff5dbe13e0dbea691a', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), index.h("slot", { key: 'ed7e997155bec808ef01c6300109f435a5e698b1' })), index.h("span", { key: '1601e81a0d25f685b69ebea30a13b1dac9337866', class: "co-list-item__suffix" }, index.h("slot", { key: 'f23ac07bc12c9a02810574bcb30b2a323b07b3ee', name: "suffix" }))));
+            } }, this.description))), index.h("slot", { key: '2e35ea5289301048d967b4b9bf11743101927118' })), index.h("span", { key: 'cd33f25a15fb3ad3a747fad14cccb3141967cc4b', class: "co-list-item__suffix" }, index.h("slot", { key: '25b6881aacf68e7b0e927d367ce9492a642d8224', name: "suffix" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-loader.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.js');
+
+const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:#4285f4}.co-loader__ball--yellow{background-color:#fdbd00;animation-delay:0.4s}.co-loader__ball--red{background-color:#d4145a;animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
+
+const CoLoader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Show the loader. When false the component renders nothing so it doesn't
+         *  hold layout space or run animations while hidden. */
+        this.visible = true;
+        /** Render as an absolute-positioned overlay over the nearest positioned
+         *  ancestor. When false (default) the loader is inline. */
+        this.overlay = false;
+        /** Size of the ball animation. `sm` ~42px wide for tight UI like dropdown
+         *  bodies; `md` (default) ~75px for drawers/boot; `lg` ~100px for big
+         *  empty screens. */
+        this.size = 'md';
+        /** Optional text label below the balls. Multi-line is supported. */
+        this.text = '';
+        /** CSS color for the overlay backdrop. Only applied when `overlay=true`. */
+        this.background = '';
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const style = this.overlay && this.background ? { background: this.background } : undefined;
+        return (index.h("div", { class: { 'co-loader': true, 'co-loader--overlay': this.overlay }, style: style, part: "root", role: "status", "aria-live": "polite" }, index.h("div", { class: "co-loader__balls", part: "balls" }, index.h("span", { class: "co-loader__ball co-loader__ball--blue" }), index.h("span", { class: "co-loader__ball co-loader__ball--yellow" }), index.h("span", { class: "co-loader__ball co-loader__ball--red" })), this.text && index.h("p", { class: "co-loader__text", part: "text" }, this.text)));
+    }
+};
+CoLoader.style = coLoaderCss();
+
+exports.co_loader = CoLoader;

package/dist/cjs/co-media-thumb.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.js');
+
+const coMediaThumbCss = () => `: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}.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;}`;
+
+const CoMediaThumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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 (index.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 ? (index.h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (index.h("slot", null)), this.video && (index.h("div", { key: '11419e55099d3098081d33de77b372f545be8be2', class: "co-media-thumb__scrim", part: "scrim" }, index.h("div", { key: 'bd9249783989b073dfb21ac973bedbfc43ea655c', class: "co-media-thumb__play", part: "play" }, index.h("svg", { key: '6610a414fd2ad05f11aa810dd0703e7fab30ec8d', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'b005c7540600ad137f159392f94c437eaf91c0d8', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+    }
+};
+CoMediaThumb.style = coMediaThumbCss();
+
+exports.co_media_thumb = CoMediaThumb;

package/dist/cjs/co-menu-divider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coMenuDividerCss = () => `:host{display:block}.co-menu-divider{border:0;border-top:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));margin:var(--co-spacing-xs, 4px) 0}`;
 
@@ -9,7 +9,7 @@ const CoMenuDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("hr", { key: '08549f09b4a76d1bc2cd572a8f09ed9289551175', class: "co-menu-divider", role: "separator" });
+        return index.h("hr", { key: 'dd21fada7235dda4e64c2a3a003b26c4dd65501e', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();

package/dist/cjs/co-menu-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background 0.1s ease, color 0.1s ease;min-height:36px;box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item:hover,.co-menu-item--submenu-open{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-error-bg, rgba(170, 46, 27, 0.08))}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:currentColor}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__submenu{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);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);min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
+const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;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);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background 0.1s ease, color 0.1s ease;min-height:var(--co-menu-item-height, 36px);box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.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))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-error-bg, rgba(170, 46, 27, 0.08))}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-icon-color, currentColor)}.co-menu-item__check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-semantic-text-default)}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow: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;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
 
 const CoMenuItem = class {
     constructor(hostRef) {
@@ -11,6 +11,12 @@ const CoMenuItem = class {
         this.coMenuSelect = index.createEvent(this, "coMenuSelect", 7);
         /** Tighter row metrics (32px instead of 36px). */
         this.dense = false;
+        /** Marks the row as selected — paints an at-rest gray-100 background. Used by
+         *  single-select menus (sort/type). */
+        this.selected = false;
+        /** Renders a trailing check (size 15) after the label. Pair with `selected`
+         *  to mark the chosen option in a single-select menu. */
+        this.trailingCheck = false;
         /** Visually disabled — pointer events ignored, opacity reduced. */
         this.disabled = false;
         /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */
@@ -114,14 +120,16 @@ const CoMenuItem = class {
         this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
     render() {
+        var _a;
         const row = (index.h("button", { ref: (el) => (this.rowEl = el), class: {
                 'co-menu-item': true,
                 'co-menu-item--dense': this.dense,
+                'co-menu-item--selected': this.selected,
                 'co-menu-item--disabled': this.disabled,
                 '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 && (index.h("span", { class: "co-menu-item__icon" }, index.h("co-icon", { name: this.icon, size: 16 }))), index.h("span", { class: "co-menu-item__label" }, this.label, index.h("slot", { name: "label" })), index.h("span", { class: "co-menu-item__suffix" }, index.h("slot", { name: "suffix" }), this.hasSubmenu && index.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 && (index.h("span", { class: "co-menu-item__icon" }, index.h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), index.h("span", { class: "co-menu-item__label" }, this.label, index.h("slot", { name: "label" })), this.trailingCheck && (index.h("span", { class: "co-menu-item__check" }, index.h("co-icon", { name: "check", size: 15 }))), index.h("span", { class: "co-menu-item__suffix" }, index.h("slot", { name: "suffix" }), this.hasSubmenu && index.h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return index.h("div", { class: "co-menu-item__wrap" }, row);

package/dist/cjs/co-menu.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coMenuCss = () => `:host{display:contents}.co-menu{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);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);min-width:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}`;
+const coMenuCss = () => `:host{display:contents}.co-menu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow: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:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}`;
 
 const CoMenu = class {
     constructor(hostRef) {
@@ -92,7 +92,7 @@ const CoMenu = class {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (index.h("co-popover", { key: 'b6d6cd9511cc0ce9d2025ca162aaeb7d962b96a2', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("slot", { key: '91085adedc753afe8f6f9ba2b137ecde1af0155d', name: "trigger", slot: "trigger" }), index.h("div", { key: 'f7bf1839cc05d7d5ba5c8ea7f5fcb10d50f37ede', class: "co-menu", role: "menu" }, index.h("slot", { key: 'c11fa45f19630d6568fb66e4df38301b40f83031' }))));
+        return (index.h("co-popover", { key: '69e82f6a6eec310ca8ab45d1716eee124f4127f9', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("slot", { key: 'f03a749106eb2c3b566c5179fb7b43c88c6887ed', name: "trigger", slot: "trigger" }), index.h("div", { key: 'a133998147e906f1b96c79baccb345e6cc3aad57', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, index.h("slot", { key: 'bdc28c804d63632df5849b82904741074fc161ef' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-modal.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 var overlayAfterClose = require('./overlayAfterClose-BdeXrhVY.js');
 
-const coModalCss = () => `:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;border-radius:0;max-width:540px;width:90vw;max-height:80vh;overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px);opacity:0;transition:transform 0.2s ease, opacity 0.2s ease}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--open{transform:none;opacity:1}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background 0.1s ease}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer:empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
+const coModalCss = () => `:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;border-radius:0;max-width:540px;width:90vw;max-height:80vh;overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px);opacity:0;transition:transform 0.2s ease, opacity 0.2s ease}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:none;opacity:1}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background 0.1s ease}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer:empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
 
 const CoModal = class {
     constructor(hostRef) {
@@ -19,7 +19,24 @@ const CoModal = class {
         this.closable = true;
         /** Close when clicking the overlay backdrop */
         this.closeOnOverlay = true;
-        /** Modal width: sm (400px), md (540px), lg (680px) */
+        /**
+         * Opt-in: close when Escape is pressed. Default false → existing consumers
+         * are unchanged.
+         *
+         * Handled here rather than by forwarding co-overlay's own `closeOnEscape`:
+         * co-overlay emits the SAME `coClose` for a backdrop click and for Escape,
+         * and this component gates that event on `closeOnOverlay`. Forwarding would
+         * therefore swallow Escape whenever `closeOnOverlay` is false.
+         */
+        this.closeOnEscape = false;
+        /**
+         * Modal width: sm (400px), md (540px), lg (680px),
+         * full (min(1400px, 95vw) × 92vh — media/document viewers).
+         *
+         * `full` also drops the body padding and lets the body grow, so a slotted
+         * <video>/<iframe> fills the panel edge-to-edge instead of sitting in a
+         * content-height box.
+         */
         this.size = 'md';
         /** Hide body section and all border dividers (compact confirm dialogs) */
         this.noDividers = false;
@@ -43,14 +60,21 @@ const CoModal = class {
                 this.coAfterClose.emit();
         };
     }
+    handleKeydown(e) {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (e.key === 'Escape')
+            this.coClose.emit();
+    }
     render() {
-        return (index.h("co-overlay", { key: '2fee2b3d1249611a053b917e7d56cb9550e5f3b8', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '68cd9017ea7b89c2a3c3a5a6be81a4a1760588be', class: "co-modal__frame" }, index.h("div", { key: 'cb97ce8eb1bb4ca47b9f81dd8c72878eec383928', class: {
+        return (index.h("co-overlay", { key: 'db9ac94c8fd2fe2e348fdee437aee9ddccdf85cb', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: 'b2f0c174b09e2582c9e17ef18133b3e9057ace74', class: "co-modal__frame" }, index.h("div", { key: 'a3ae4c2a30d52b3c651ca80387f49f9344d9e89c', 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 }, index.h("div", { key: '85b3c3616ec370427f30832aaec9674fa3651205', class: "co-modal__header", part: "header" }, index.h("div", { key: '4bcab7c1022aeaa357feae91999120e5b4dc2d30', class: "co-modal__header-text" }, index.h("h2", { key: '40879cdb0533f481e4807d8510937eec0de46317', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: 'ba57a406a257ce0a969da6a508a287f28ffc64b4', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: 'e5eb0cbcf8cbe53b02991b41a2b2e4e75ae0d5b3', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'f11fd06c1a6b3cd41254324e44dcfb70b2058003', name: "x", size: 20 })))), !this.noDividers && (index.h("div", { key: '8e189a09c8418f1646650c57748855d805d9bd7e', class: "co-modal__body", part: "body" }, index.h("slot", { key: '8c8363b3405295c7823feb6196c4c72a1724a6d5' }))), index.h("div", { key: 'fdd675455b1391ea7d3456321a1fb03104f14b49', class: "co-modal__footer", part: "footer" }, index.h("slot", { key: 'a05ba1229c4fa147c582ad7d06fb4a27d4a42ef5', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: 'e90b7e7aa085ff53675586e66ee0ac5473a69cbc', class: "co-modal__header", part: "header" }, index.h("div", { key: 'e7ffccb3b8658e213d92f1a7873eebf6de42ef7d', class: "co-modal__header-text" }, index.h("h2", { key: '431e22f5bd933ee3052750e7e9abb7911fe24d9a', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: 'f8e83dafce7ef899e5931902b568807063ea9ae3', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: '938dbc0df49067f359aa431ba0d16b89ad41a751', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'f1421d7d4441fff67259e21cf2a0107b6a57f746', name: "x", size: 20 })))), !this.noDividers && (index.h("div", { key: 'faf612d93e95232b46ebfb45089768bf09366a80', class: "co-modal__body", part: "body" }, index.h("slot", { key: '3c4dd9d1f3613a2f308cbc714426739a3aa6523d' }))), index.h("div", { key: '35546891b1847627de68a8f012e23fbfbdc1760b', class: "co-modal__footer", part: "footer" }, index.h("slot", { key: '263bd761b09998b9cc1f5f53d7dee87ccb5f4367', name: "footer" }))))));
     }
 };
 CoModal.style = coModalCss();

package/dist/cjs/co-navbar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));--co-navbar-color:var(--co-theme-on-navbar, #fff);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
 
@@ -15,12 +15,12 @@ const CoNavbar = class {
         this.rounded = false;
     }
     render() {
-        return (index.h("div", { key: 'b2af21d1a45ce64e859c5eee4565bed3acf59af9', class: {
+        return (index.h("div", { key: 'ed73dbf77742c009fbd37602925a43f217044027', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: '70eabcdbfdae15af12cc9bfd8aea140ca37176c9' })));
+            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: '60235bb4ac473f67371094a735701fe40362db66' })));
     }
 };
 CoNavbar.style = coNavbarCss();

package/dist/cjs/co-number-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
-var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var index = require('./index-NNvye1ul.js');
+var requiredMark = require('./requiredMark-DyjZzUCd.js');
 
 const coNumberFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-number-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-number-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-number-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-number-field__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-number-field--disabled .co-number-field__label,.co-number-field--disabled .co-number-field__secondary-label{color:var(--co-semantic-text-disabled)}.co-number-field__row{display:flex;align-items:center;gap:0;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;overflow:hidden;box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-number-field--s .co-number-field__row{min-height:28px}.co-number-field--s .co-number-field__btn{width:28px;height:28px}.co-number-field--sm .co-number-field__row{min-height:32px}.co-number-field--sm .co-number-field__btn{width:32px;height:32px}.co-number-field--lg .co-number-field__row{min-height:48px}.co-number-field--lg .co-number-field__btn{width:48px;height:48px}.co-number-field--focused .co-number-field__row{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-number-field--disabled .co-number-field__row{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-number-field--error .co-number-field__row{border-color:var(--co-semantic-status-error)}.co-number-field--success .co-number-field__row{border-color:var(--co-semantic-status-success)}.co-number-field--warning .co-number-field__row{border-color:var(--co-color-status-review)}.co-number-field--info .co-number-field__row{border-color:var(--co-semantic-status-info)}.co-number-field__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:none;background:transparent;color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background 0.1s ease}.co-number-field__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-number-field__btn:active:not(:disabled){background:var(--co-semantic-surface-muted)}.co-number-field__btn:disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__btn--minus{border-right:1px solid var(--co-semantic-border-subtle)}.co-number-field__btn--plus{border-left:1px solid var(--co-semantic-border-subtle)}.co-number-field__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;transition:color 0.15s ease}.co-number-field__clear:hover{color:var(--co-semantic-text-default)}.co-number-field__input{flex:1;min-width:0;border:none;background:transparent;text-align:center;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:var(--co-spacing-sm2) var(--co-spacing-sm2);outline:none;-moz-appearance:textfield}.co-number-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-number-field__affix{flex-shrink:0;padding-right:var(--co-spacing-sm2);color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;pointer-events:none;user-select:none}.co-number-field__input::-webkit-outer-spin-button,.co-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-number-field--disabled .co-number-field__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-number-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-number-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-number-field__helper--error .co-number-field__helper-icon,.co-number-field__helper--error .co-number-field__helper-text{color:var(--co-semantic-status-error)}.co-number-field__helper--success .co-number-field__helper-icon,.co-number-field__helper--success .co-number-field__helper-text{color:var(--co-semantic-status-success)}.co-number-field__helper--warning .co-number-field__helper-icon,.co-number-field__helper--warning .co-number-field__helper-text{color:var(--co-color-status-review)}.co-number-field__helper--info .co-number-field__helper-icon,.co-number-field__helper--info .co-number-field__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-number-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-number-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-number-field__label{white-space:normal}:host([layout='horizontal']) .co-number-field>:not(.co-number-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-number-field__row{background:var(--co-semantic-surface-secondary)}}`;
 
@@ -132,13 +132,13 @@ const CoNumberField = class {
         this.coChange.emit(clamped);
     }
     render() {
-        return (index.h("div", { key: '56f049b125c4b28824da9980446b6152c5e8c34e', class: {
+        return (index.h("div", { key: 'b9d2918682c1943728aa412b5abb4e17c842d9bd', 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) && (index.h("div", { key: 'd3f6c497870029283454a4d63b200a27177184e6', class: "co-number-field__labels" }, this.label && index.h("label", { key: '6b82e4e85e29a15c4f046fbe1d2b31c64033fb1b', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'd693455773f18e4cabba3877101ea25fcb3722bb', required: this.required })), this.secondaryLabel && index.h("span", { key: 'f10989ce282441f76b91a7b7ef82f6b71112f15c', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'b823d6cf7f93bb93376926c43798412e2f88aba2', class: "co-number-field__row" }, index.h("button", { key: 'c6e249efe8ae029b173e565bc8340311e35780b1', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, index.h("co-icon", { key: 'fb389e8a57d6c5dc9876f4e2afc1ad64755fae3d', name: "minus", size: 16 })), index.h("input", { key: 'e1dfa2b5817667a6f8a139007eb177d9b871824c', 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 && (index.h("span", { key: '9d1fc8d04c53ac7a7776704a8085465464ee8a50', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: 'aa1f118276413e287b62464377aeecadaedbb9b6', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '606f25ab748be9a5c79680889c9d9f6029cbe921', name: "x-circle", size: 16, weight: "fill" }))), index.h("button", { key: 'edd378d01cc079a623250143bb2ded5107019e62', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, index.h("co-icon", { key: '3011737898ecc6e89d654840089e89fc3ef0ae36', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '2d31e1e4e17ec0cd98c0e74e2cc2a253558990e5', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '3e0c5b98a63d08a6dc85444f5d23194f79f8b703', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: '8b9b2f4fcb5d2832f9bf2e3088d62652cbe6759d', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'baa117f0cfeba73015fe6a396b7001c83db76079', class: "co-number-field__labels" }, this.label && index.h("label", { key: '2593906b02ca0935ab1b3e8bcf51d8867a2b416a', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '40cc658fedb70c38e92e07cf1cd0b8a628fd6ca6', required: this.required })), this.secondaryLabel && index.h("span", { key: 'b495275c3f9108442d6a4cc1d36b23b510e9f151', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'ac482c099f7952d26142b4e8aacac74fad2cd469', class: "co-number-field__row" }, index.h("button", { key: '617f9d33a8371bce87c9d8e56df88aef77dcc724', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, index.h("co-icon", { key: '3242ac9dbbbcfeca024812b69d5f17a00fe4928a', name: "minus", size: 16 })), index.h("input", { key: 'beaab19de433dcc7b6ffd13678b68f2b229d8311', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (index.h("span", { key: '5426965b700dccf1387071138d8dae113cf4fdf4', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: 'f6f2e6a7f9a5a77fc96a8223a0eaad7880599e55', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '1c29c52af8720ffd2dbd5c5aa960107ad16c7613', name: "x-circle", size: 16, weight: "fill" }))), index.h("button", { key: '3a1265f41fcf4ca88b25e88f3921d0087aeede99', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, index.h("co-icon", { key: 'ac97bb8ee26e535b2c278e647b2edb1d3dbaac1b', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '714e6fcd1f7ac625ec6702d97f72487b0448e8ed', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '69cf83620410820ca2eaf3e473a0f815c812c69e', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: 'e185964aaa4a7410e5f5e78da88bd6b78de072b4', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };