@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.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}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.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)}`;
 
@@ -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: 'b3c7932fb6c4574e66ddb3ccbc139ebcd86cce41', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("slot", { key: 'aa6546808d38973f71d12575ac62106a4e4c2c1f', name: "trigger", slot: "trigger" }), index.h("div", { key: '376d8202add51e08dd9361fa4fd6d4840c1d61ce', class: "co-menu", role: "menu" }, index.h("slot", { key: '2e1df74c20f44e98dc51474b9009e8dc12f9b403' }))));
+        return (index.h("co-popover", { key: 'dcdcbba45a201fbd121c94fa10cfbfe9c5d3792b', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("slot", { key: '44d999a9fad8f6950ded890c97b047733aff4080', name: "trigger", slot: "trigger" }), index.h("div", { key: 'd4ea139be0a26e84e50207f332c2e4f00126d717', class: "co-menu", role: "menu" }, index.h("slot", { key: 'c00f197bae58f3e8e0fe56fda4489fe7878fd995' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
-const coModalCss = () => `:host{display:contents}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-xl);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12);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--open{transform:translateY(0);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-md) var(--co-spacing-xl);overflow-y:auto;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6}.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)}.co-modal__footer:empty{display:none}`;
+const coModalCss = () => `:host{display:contents}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);border-radius:var(--co-border-radius-xl);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12);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;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) {
@@ -16,6 +16,10 @@ const CoModal = class {
         this.closable = true;
         /** Close when clicking the overlay backdrop */
         this.closeOnOverlay = true;
+        /** Modal width: sm (400px), md (540px), lg (680px) */
+        this.size = 'md';
+        /** Hide body section and all border dividers (compact confirm dialogs) */
+        this.noDividers = false;
         this.handleOverlayClick = () => {
             if (this.closeOnOverlay)
                 this.coClose.emit();
@@ -28,7 +32,13 @@ const CoModal = class {
         };
     }
     render() {
-        return (index.h("co-overlay", { key: '5f3801c0c05b279dc74757dd2d8f716a539d0fb9', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '86805a8d5d51363231a2376ea0a5d5ec303af9fa', class: { 'co-modal': true, 'co-modal--open': this.open }, part: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, index.h("div", { key: '360a11aeb0681a2b8b5a58b0b1e4cbd0e1238d4b', class: "co-modal__header", part: "header" }, index.h("div", { key: 'a0f9d269b62015c03e24aca95be8897aa7694cf9', class: "co-modal__header-text" }, index.h("h2", { key: 'd33d895a09c3653200ac2cedb914360707438d12', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: '10ec973d66bd6d28c994eb98b444dded32cdddc2', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: '9005317d5e6a0611b2e30455ad04450393015a0d', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: '13d2f893a2d34cec9fd7dd04d61c17230af88339', name: "x", size: 20 })))), index.h("div", { key: 'b482deada782191e1c1c156256f18427147f87dc', class: "co-modal__body", part: "body" }, index.h("slot", { key: '0e33f4340bbf6ab3334b7f5034eae1394ae07871' })), index.h("div", { key: 'a5ab52491c22c8a5c51e00fbcafb6286e0be2b12', class: "co-modal__footer", part: "footer" }, index.h("slot", { key: '5f3fa7189cea7a8ff246ecd2129a79f35adee6b9', name: "footer" })))));
+        return (index.h("co-overlay", { key: '8b8d87da7d6d0cc1f8758dc85d536901c1b8e559', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '21406763f2a69fbb8d6deca46d06e5d470aa3238', class: {
+                'co-modal': true,
+                'co-modal--open': this.open,
+                'co-modal--sm': this.size === 'sm',
+                'co-modal--lg': this.size === 'lg',
+                'co-modal--no-dividers': this.noDividers,
+            }, part: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, index.h("div", { key: 'e0cbf1b770a791d94185500e98550de7428cf61d', class: "co-modal__header", part: "header" }, index.h("div", { key: '493aaaed168299eb167514dae238e218ce53b78e', class: "co-modal__header-text" }, index.h("h2", { key: 'de76fdc6f85420119170425b7166807c2c81df0f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: 'c5c0ec7113a1715c4db372b6641fcac2989ff113', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: '64bae9c3dcac4e036671d36863f419eb051a986c', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: '74fffda310bb8c09812239218f6ee0ca413be44a', name: "x", size: 20 })))), !this.noDividers && (index.h("div", { key: '448b9b55b2bf70b57d478938ab9bb3704d3bcf10', class: "co-modal__body", part: "body" }, index.h("slot", { key: '77ac168d42a68fac4dd240f2b8dfa5f2ff2ce2bc' }))), index.h("div", { key: 'd72a9dfdb6a8b1f5f182746eb2df3551bb27f884', class: "co-modal__footer", part: "footer" }, index.h("slot", { key: '97b3f2d7f2838388f80817d123a9970b159c9223', name: "footer" })))));
     }
 };
 CoModal.style = coModalCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.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-opacity-negro-80, rgba(31,28,27,0.8)));--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}`;
+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}`;
 
 const CoNavbar = class {
     constructor(hostRef) {
@@ -15,12 +15,12 @@ const CoNavbar = class {
         this.rounded = false;
     }
     render() {
-        return (index.h("div", { key: 'bf36fdff69c691f99a420fc9e782df9b75517052', class: {
+        return (index.h("div", { key: 'ec767e2bc0b048666ee78670729a851ab99b2ddb', 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: '62f1bc0ba7c1cd61727cd01f7d540643fbe44575' })));
+            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: '72fab32c330d1688e9f34b8d712b17f35d5aa513' })));
     }
 };
 CoNavbar.style = coNavbarCss();

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

@@ -1,42 +1,68 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.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:var(--co-semantic-surface-secondary);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--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__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__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)}`;
+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:var(--co-semantic-surface-secondary);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__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)')}`;
 
 const CoNumberField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coChange = index.createEvent(this, "coChange", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.status = 'default';
         this.value = 0;
         this.step = 1;
         this.disabled = false;
         this.placeholder = '0';
+        this.size = 'md';
+        /** Show clear button when the field has a value */
+        this.clearable = false;
         this.focused = false;
         this.handleDecrement = () => {
             if (!this.canDecrement)
                 return;
-            this.emitValue(this.value - this.step);
+            this.emitValue(this.current - this.step);
         };
         this.handleIncrement = () => {
             if (!this.canIncrement)
                 return;
-            this.emitValue(this.value + this.step);
+            this.emitValue(this.current + this.step);
         };
         this.handleInput = (e) => {
             const raw = e.target.value;
-            if (raw === '' || raw === '-')
+            if (raw === '') {
+                // Deleting all content clears the field (parity with the clear button),
+                // but only when clearing is enabled — otherwise keep prior behavior.
+                if (this.clearable) {
+                    this.value = null;
+                    this.coChange.emit(null);
+                }
+                return;
+            }
+            if (raw === '-')
                 return;
             const num = parseFloat(raw);
             if (!isNaN(num)) {
                 this.emitValue(num);
             }
         };
+        this.handleClear = () => {
+            var _a;
+            this.value = null;
+            this.coClear.emit();
+            this.coChange.emit(null);
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.handleBlur = () => {
             this.focused = false;
-            // Re-clamp on blur
-            this.emitValue(this.value);
+            // Re-clamp on blur, but keep an empty field empty.
+            if (!this.isEmpty)
+                this.emitValue(this.value);
         };
         this.handleFocus = () => {
             this.focused = true;
@@ -52,6 +78,15 @@ const CoNumberField = class {
             }
         };
     }
+    /** True when there is no numeric value (cleared / empty). */
+    get isEmpty() {
+        return this.value === null || this.value === undefined || Number.isNaN(this.value);
+    }
+    /** Numeric value to step from, treating an empty field as min (or 0). */
+    get current() {
+        var _a;
+        return this.isEmpty ? ((_a = this.min) !== null && _a !== void 0 ? _a : 0) : this.value;
+    }
     get statusIcon() {
         const map = {
             error: 'warning-circle', success: 'check-circle', warning: 'warning', info: 'info',
@@ -62,14 +97,14 @@ const CoNumberField = class {
         if (this.disabled)
             return false;
         if (this.min !== undefined)
-            return this.value > this.min;
+            return this.current > this.min;
         return true;
     }
     get canIncrement() {
         if (this.disabled)
             return false;
         if (this.max !== undefined)
-            return this.value < this.max;
+            return this.current < this.max;
         return true;
     }
     clamp(v) {
@@ -85,12 +120,13 @@ const CoNumberField = class {
         this.coChange.emit(clamped);
     }
     render() {
-        return (index.h("div", { key: '9f90d445ff118b9927d1947d05d72efdbdc33bcc', class: {
+        return (index.h("div", { key: '6c3e5ede75a2e025c330a6bdd0f49bfd7642222f', 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: 'c1104f3441b2e126bcf3f279de265b182b00b248', class: "co-number-field__labels" }, this.label && index.h("label", { key: '25e03a8bf88964c3ea1305d0a7af2b892b1e14dd', class: "co-number-field__label" }, this.label), this.secondaryLabel && index.h("span", { key: '4e8e2668b6eaf159e09ca1ca61514b52fc951908', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'ac29df6c61cb2a5d54e896b1ede50f5fed27d42d', class: "co-number-field__row" }, index.h("button", { key: '390b456584b531c390479b843e13b095ba63dd7e', 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: '24a61a2fa7c89b3d932dcce7d5f8f6bcb13492b5', name: "minus", size: 16 })), index.h("input", { key: '013a70c99e5a1012d503c185e48199a2bd91c732', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: String(this.value), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), index.h("button", { key: '3f553d6a9a844a857da479e9fa69648b14eb4057', 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: '86615e73f7ffad75d7b3270f662c018e6ff9090b', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '9027cece2ec51e6683d8ceb293e36a2f13b9e663', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '66d7cca5a530272a4cf7f15a7689fc699f0dffe5', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: 'e3069cfe059f0ac02e407c589627a36f1471c937', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'd5157ffa7731d38668d70ef2245ee5f950f59393', class: "co-number-field__labels" }, this.label && index.h("label", { key: 'e9ecc51032f92c1f599b4790ee186402d86d4c18', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '627e98d1f9b8786f842778d6006211f42b2ca500', required: this.required })), this.secondaryLabel && index.h("span", { key: 'ca6a7dea5e8c2f6b2e097ba84a5bb691fc87e09d', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: '0a72931f013e988bc383c1f92435add49edb1381', class: "co-number-field__row" }, index.h("button", { key: '6e5a27347ee3b2784de029214daa386bb8903894', 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: '7cecf82f04ed32ff66e144dd31a6b1902dbd1cb5', name: "minus", size: 16 })), index.h("input", { key: '0c37512501cb9ab2aeff6924d3064c038c6f8696', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.value), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '36225c2e660a2fba12ece5f96d878c35da8a7697', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '903d40fef1429d5098c5515087867a23cbceb584', name: "x-circle", size: 16, weight: "fill" }))), index.h("button", { key: '8b4d787655ceb69fe0d7e1b023cd9e4f91ba2174', 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: '7e786b1eb699103670ea3e4d2a5b234221c64100', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: 'ef12fdcb24ca9ade4ef43b25afc2d76561d5b7f7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '1a5ce842cb1d01c3d392ea66f6d78b43b689ae65', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: 'e3581ef5219df87b5d5cb188bc2afd459f06f776', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-overlay--open{opacity:1;pointer-events:auto}`;
 
@@ -15,7 +15,7 @@ const CoOverlay = class {
         };
     }
     render() {
-        return (index.h("div", { key: '8f2a8e4ca27d43e10f797265a4b25fea1ef92445', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, index.h("slot", { key: '6099310206111ba414b3e9f35edf8ba598d6ef4e' })));
+        return (index.h("div", { key: '65b20d04a50324ef37a5a9f0ff726ead15d0d757', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, index.h("slot", { key: '64d6abebb8d812d4c638b14608ba2982aae43a19' })));
     }
 };
 CoOverlay.style = coOverlayCss();

package/dist/cjs/co-page-header.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coPageHeaderCss = () => `:host{display:block}.co-page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-lg) var(--co-spacing-xl);font-family:var(--co-font-family-primary);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-page);min-height:72px;box-sizing:border-box}.co-page-header__left{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__icon{display:flex;color:var(--co-semantic-text-muted)}.co-page-header__title{font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default)}.co-page-header__actions{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__actions:empty{display:none}`;
 
@@ -9,7 +9,7 @@ const CoPageHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '1a1d93d47a677a42f201b9433604c20e952b36df', class: "co-page-header", part: "page-header" }, index.h("div", { key: '2c634b9ba352ba4bf0097f81aa51331f8d0fd4d1', class: "co-page-header__left" }, this.icon && (index.h("span", { key: 'e88bb93d1cbb37ee1c3f4e57a00c72156377a434', class: "co-page-header__icon" }, index.h("co-icon", { key: '01282c4e2c61789c8f1b95b9a15e7e683cbaf0a7', name: this.icon, size: 24 }))), index.h("span", { key: '4d3f7b4f86cf178c9a11c91e0da17c3293a911ff', class: "co-page-header__title" }, index.h("slot", { key: '2291559692047e954b3984f738d6751c9b39ed76' }, this.heading))), index.h("div", { key: '780971b9a144f8daa53619df25fe69325b12d9da', class: "co-page-header__actions" }, index.h("slot", { key: 'dc2a010be24395703942b658af059299a92c7fea', name: "actions" }))));
+        return (index.h("div", { key: 'bb91fd19e0570998c5017cd5de3b6388c2e53a12', class: "co-page-header", part: "page-header" }, index.h("div", { key: 'efcaed2b33a7038f8a08deabde95c5891afa5f74', class: "co-page-header__left" }, this.icon && (index.h("span", { key: 'ef332057fc621d14195977fdec57c6d398646159', class: "co-page-header__icon" }, index.h("co-icon", { key: '1fffba2e767a51530c9489c7672532d9a653302d', name: this.icon, size: 24 }))), index.h("span", { key: 'cbc7c3d8a3088e5b4ea30af142c887a3ada7bed9', class: "co-page-header__title" }, index.h("slot", { key: '57a2fa4a291f96e31ba97bbdcc1104ca2dd1e275' }, this.heading))), index.h("div", { key: '11be9907895d13091a7e264aca84a383c3dcebcf', class: "co-page-header__actions" }, index.h("slot", { key: 'dd00a986940145d4afcb4f0fbd23a2edc02523e3', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();