@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

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

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

@@ -51,7 +51,9 @@
   display: flex;
   align-items: center;
   gap: 0;
-  background: var(--co-semantic-surface-secondary);
+  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;
@@ -60,6 +62,14 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── 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--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);
@@ -112,6 +122,26 @@
   border-left: 1px solid var(--co-semantic-border-subtle);
 }
 
+/* ── Clear button ───────────────────────────────────────────── */
+.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);
+}
+
 /* ── Input ──────────────────────────────────────────────────── */
 .co-number-field__input {
   flex: 1;
@@ -133,6 +163,18 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* Unit suffix for format='rate'|'percent' (the input keeps the bare number) */
+.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;
@@ -176,3 +218,49 @@
 
 .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); }
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+: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); }
+}

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

@@ -1,35 +1,60 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
 export class CoNumberField {
     constructor() {
+        /** 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.emitValue(this.fromDisplay(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;
@@ -45,6 +70,15 @@ export class CoNumberField {
             }
         };
     }
+    /** 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',
@@ -55,14 +89,14 @@ export class CoNumberField {
         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) {
@@ -72,18 +106,31 @@ export class CoNumberField {
             return this.max;
         return v;
     }
+    /** Whether the value↔display conversion (×100) is active. */
+    get scaled() {
+        return this.format === 'rate' || this.format === 'percent';
+    }
+    /** Stored decimal → shown number (0.15 → 15). toFixed avoids FP artifacts. */
+    toDisplay(v) {
+        return this.scaled ? Number((v * 100).toFixed(6)) : v;
+    }
+    /** Typed number → stored decimal (15 → 0.15). */
+    fromDisplay(n) {
+        return this.scaled ? n / 100 : n;
+    }
     emitValue(next) {
         const clamped = this.clamp(next);
         this.value = clamped;
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '9f90d445ff118b9927d1947d05d72efdbdc33bcc', class: {
+        return (h("div", { key: '56f049b125c4b28824da9980446b6152c5e8c34e', 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: 'c1104f3441b2e126bcf3f279de265b182b00b248', class: "co-number-field__labels" }, this.label && h("label", { key: '25e03a8bf88964c3ea1305d0a7af2b892b1e14dd', class: "co-number-field__label" }, this.label), this.secondaryLabel && h("span", { key: '4e8e2668b6eaf159e09ca1ca61514b52fc951908', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'ac29df6c61cb2a5d54e896b1ede50f5fed27d42d', class: "co-number-field__row" }, 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" }, h("co-icon", { key: '24a61a2fa7c89b3d932dcce7d5f8f6bcb13492b5', name: "minus", size: 16 })), 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 }), 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" }, h("co-icon", { key: '86615e73f7ffad75d7b3270f662c018e6ff9090b', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9027cece2ec51e6683d8ceb293e36a2f13b9e663', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '66d7cca5a530272a4cf7f15a7689fc699f0dffe5', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'e3069cfe059f0ac02e407c589627a36f1471c937', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (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)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -118,6 +165,26 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -156,6 +223,26 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -180,8 +267,8 @@ export class CoNumberField {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
                     "references": {}
                 },
                 "required": false,
@@ -293,6 +380,65 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "placeholder",
                 "defaultValue": "'0'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear button when the field has a value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rate' | 'percent'",
+                    "resolved": "\"percent\" | \"rate\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display format. With 'rate' | 'percent' the `value` stays a DECIMAL\n(e.g. 0.15) but the field shows/edits the PERCENT (15) with a \"%\" suffix.\nvalue/min/max/step are always in the underlying (decimal) unit.\nReflected so it survives lazy hydration when set via the Vue wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format"
             }
         };
     }
@@ -313,8 +459,23 @@ export class CoNumberField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }];

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

@@ -6,10 +6,23 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
+  /* Reset the [popover] UA defaults so the top-layer scrim fills the viewport
+     (the popover promotion is what lets it escape any ancestor containing
+     block from app-shell `filter`/`mask`). */
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--co-overlay-bg, rgba(0, 0, 0, 0.4));
+  -webkit-backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  backdrop-filter: blur(var(--co-overlay-blur, 2px));
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
@@ -18,4 +31,5 @@
 .co-overlay--open {
   opacity: 1;
   pointer-events: auto;
+  transition: opacity 0.12s ease;
 }