@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

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

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

@@ -17,6 +17,12 @@ export class CoMenuItem {
     constructor() {
         /** 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. */
@@ -120,14 +126,16 @@ export class CoMenuItem {
         this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
     render() {
+        var _a;
         const row = (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 && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), 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" }, 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 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
@@ -162,13 +170,32 @@ export class CoMenuItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name (Phosphor) rendered before the label."
+                    "text": "Icon name (Phosphor) rendered before the label. Optional \u2014 rows may be\nlabel-only."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the leading icon size (px). Defaults to 16."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -208,6 +235,46 @@ export class CoMenuItem {
                 "attribute": "dense",
                 "defaultValue": "false"
             },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected \u2014 paints an at-rest gray-100 background. Used by\nsingle-select menus (sort/type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "trailingCheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a trailing check (size 15) after the label. Pair with `selected`\nto mark the chosen option in a single-select menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-check",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -60,6 +60,23 @@
 .co-modal--sm { max-width: 400px; }
 .co-modal--lg { max-width: 680px; }
 
+/* Media/document viewer. `height` is set (not just max-height) so the body has
+   a definite box to grow into — a <video> or <iframe> would otherwise collapse
+   to its intrinsic height and leave the panel half empty. */
+.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; /* let the flex child shrink; without it the body overflows the panel */
+  padding: 0;    /* the viewer fills edge-to-edge */
+  overflow: hidden;
+}
+
 .co-modal--open {
   transform: none;
   opacity: 1;

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

@@ -14,7 +14,24 @@ export class CoModal {
         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;
@@ -38,14 +55,21 @@ export class CoModal {
                 this.coAfterClose.emit();
         };
     }
+    handleKeydown(e) {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (e.key === 'Escape')
+            this.coClose.emit();
+    }
     render() {
-        return (h("co-overlay", { key: '2fee2b3d1249611a053b917e7d56cb9550e5f3b8', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '68cd9017ea7b89c2a3c3a5a6be81a4a1760588be', class: "co-modal__frame" }, h("div", { key: 'cb97ce8eb1bb4ca47b9f81dd8c72878eec383928', class: {
+        return (h("co-overlay", { key: '3560ee34e7edb62cd0ae34572bac0afbb5b02a74', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'ba68e320e4e0a0881193f1d85f2d5a2ef287e324', class: "co-modal__frame" }, h("div", { key: '7d3748b4b0f8fc5a4715bd075d2d9f74e2ada0ed', class: {
                 '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: '85b3c3616ec370427f30832aaec9674fa3651205', class: "co-modal__header", part: "header" }, h("div", { key: '4bcab7c1022aeaa357feae91999120e5b4dc2d30', class: "co-modal__header-text" }, h("h2", { key: '40879cdb0533f481e4807d8510937eec0de46317', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ba57a406a257ce0a969da6a508a287f28ffc64b4', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'e5eb0cbcf8cbe53b02991b41a2b2e4e75ae0d5b3', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f11fd06c1a6b3cd41254324e44dcfb70b2058003', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '8e189a09c8418f1646650c57748855d805d9bd7e', class: "co-modal__body", part: "body" }, h("slot", { key: '8c8363b3405295c7823feb6196c4c72a1724a6d5' }))), h("div", { key: 'fdd675455b1391ea7d3456321a1fb03104f14b49', class: "co-modal__footer", part: "footer" }, 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 }, h("div", { key: '48239c6af5968213349a4f3516a96ab66d7aa744', class: "co-modal__header", part: "header" }, h("div", { key: 'c807b66cb3d2a1a5b84ee70677f5d33ceaa83a7c', class: "co-modal__header-text" }, h("h2", { key: '7fa46d607d26d0904014ad20209838bd237492f2', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '7e53e9b13ea2cc8eca07dc17cb240f19ce6eb1a1', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '3af5d2c54faa331a6017cd19b96aea1f97baef03', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'd8f58ed52f686df6663515d38fa98d30a45392ee', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'd69ffa8c7726633b744b014b3f7744822ffa6448', class: "co-modal__body", part: "body" }, h("slot", { key: '5d3faeee4f96f314a8045c0482f88da2f7f328c3' }))), h("div", { key: '5ff15a6387c186e2425ca08dc4b9085588f83f61', class: "co-modal__footer", part: "footer" }, h("slot", { key: '5742d36c7a46f3b4b535d9224f747bbca0d82305', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -160,19 +184,39 @@ export class CoModal {
                 "attribute": "close-on-overlay",
                 "defaultValue": "true"
             },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in: close when Escape is pressed. Default false \u2192 existing consumers\nare unchanged.\n\nHandled here rather than by forwarding co-overlay's own `closeOnEscape`:\nco-overlay emits the SAME `coClose` for a backdrop click and for Escape,\nand this component gates that event on `closeOnOverlay`. Forwarding would\ntherefore swallow Escape whenever `closeOnOverlay` is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "original": "'sm' | 'md' | 'lg' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal width: sm (400px), md (540px), lg (680px)"
+                    "text": "Modal width: sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
                 },
                 "getter": false,
                 "setter": false,
@@ -250,4 +294,13 @@ export class CoModal {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'b2af21d1a45ce64e859c5eee4565bed3acf59af9', class: {
+        return (h("div", { key: '0215148d2cd901a2b60f5ab14704891e97ff98dd', 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: '70eabcdbfdae15af12cc9bfd8aea140ca37176c9' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '6985aaea372d26291422e5533313c6d6dad85b08' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,10 +51,10 @@
   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);
+  /* Figma Text Field parity (same box as co-input): solid page surface +
+     Negro 25% border — tinted glass didn't read as editable on white. */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   overflow: hidden;
@@ -64,11 +64,11 @@
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
 .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--s .co-number-field__btn { width: 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--sm .co-number-field__btn { width: 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--lg .co-number-field__btn { width: 48px; }
 
 .co-number-field--focused .co-number-field__row {
   border-color: var(--co-semantic-border-focus);
@@ -91,7 +91,9 @@
   align-items: center;
   justify-content: center;
   width: 40px;
-  height: 40px;
+  /* Fill the row's CONTENT height (row is border-box: 40px minus 1px borders
+     = 38px). A fixed 40px here inflated the whole field to 42px. */
+  align-self: stretch;
   flex-shrink: 0;
   border: none;
   background: transparent;
@@ -261,6 +263,3 @@
   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); }
-}

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: '56f049b125c4b28824da9980446b6152c5e8c34e', class: {
+        return (h("div", { key: '3c875500165c314b0080a19a7d33f8b1fc5f9724', 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: 'd3f6c497870029283454a4d63b200a27177184e6', class: "co-number-field__labels" }, this.label && h("label", { key: '6b82e4e85e29a15c4f046fbe1d2b31c64033fb1b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'd693455773f18e4cabba3877101ea25fcb3722bb', required: this.required })), this.secondaryLabel && h("span", { key: 'f10989ce282441f76b91a7b7ef82f6b71112f15c', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'b823d6cf7f93bb93376926c43798412e2f88aba2', class: "co-number-field__row" }, 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" }, h("co-icon", { key: 'fb389e8a57d6c5dc9876f4e2afc1ad64755fae3d', name: "minus", size: 16 })), 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 && (h("span", { key: '9d1fc8d04c53ac7a7776704a8085465464ee8a50', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'aa1f118276413e287b62464377aeecadaedbb9b6', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '606f25ab748be9a5c79680889c9d9f6029cbe921', name: "x-circle", size: 16, weight: "fill" }))), 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" }, h("co-icon", { key: '3011737898ecc6e89d654840089e89fc3ef0ae36', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '2d31e1e4e17ec0cd98c0e74e2cc2a253558990e5', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '3e0c5b98a63d08a6dc85444f5d23194f79f8b703', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '8b9b2f4fcb5d2832f9bf2e3088d62652cbe6759d', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'fe4c1d6e76adcda77f4a78697a7ce04c4f7e6b5d', class: "co-number-field__labels" }, this.label && h("label", { key: '69b9c4dde23541cbb2b8afdff97b6154bba8ab3c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '8238966acaffee1c909ad0adee140e75aa458a72', required: this.required })), this.secondaryLabel && h("span", { key: '1f5ed492a1028f79eddf207ba29f40211f3934e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '95e65fe2e0634b4009cac07770b20b96431bceae', class: "co-number-field__row" }, h("button", { key: '45d3317ff00d91e1b259a69cd5a81d26ae4bb36e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '457e2c19673b7a3ce73cf5f9c23bd69466065943', name: "minus", size: 16 })), h("input", { key: '03e01bd9bb518003d6895e6749ad80a5be3e7a86', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: 'd67834e59678f73ce4a9afb7074cfc248d34adb3', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'e26cb4d5f271c480380f8e912e8c760bafd02d27', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '908c2c60b3044d9032c4bdd5d41bcd25f406aa20', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'fe62938d48bc8df10bb364d5295f9ee192265f97', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '227ec402b4280f1062ea13a8772ec8cf36dd4508', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '87fd291f5db445c0ef2877cda10ed38d4af7a5d7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '344cfac2028d8e1ea402a68df83ade83c52b1bab', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'b12282d57952bae2f528505c92c4a216723d26fd', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }