@ctrliq/quantic-components 1.63.2 → 1.63.4

package/dist/number-input/index.js

@@ -15,6 +15,7 @@ import { LucideIconCircleAlert } from '../icon/__generated__/lucide/circle-alert
 import { NumberInputSize } from './index.constants';
 import { A11yAttributesMixin } from '../shared/a11y-attributes.mixin';
 import { event, prop } from '../shared/component-meta.decorators';
+import { emitValueChanged } from '../shared/shared.utils';
 export { NumberInputSize } from './index.constants';
 LucideIconChevronUp.ensureDefined();
 LucideIconChevronDown.ensureDefined();
@@ -48,6 +49,7 @@ let NumberInput = class NumberInput extends A11yAttributesMixin(QuanticElement)
         if (changedProperties.has('value')) {
             this.updateValidity();
         }
+        emitValueChanged(this, changedProperties, this.value);
     }
     stepUp() {
         this.inputRef.value?.stepUp();
@@ -60,12 +62,6 @@ let NumberInput = class NumberInput extends A11yAttributesMixin(QuanticElement)
     syncValue() {
         const raw = this.inputRef.value?.valueAsNumber;
         this.value = raw !== undefined && !isNaN(raw) ? raw : null;
-        this.updateValidity();
-        this.dispatchEvent(new CustomEvent('value-changed', {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-        }));
     }
     updateValidity() {
         const inputEl = this.inputRef.value;
@@ -417,7 +413,7 @@ __decorate([
 ], NumberInput.prototype, "invalid", void 0);
 NumberInput = __decorate([
     event('value-changed', {
-        description: "Fired whenever the input's value is updated (on input, change, or stepper click).",
+        description: 'Fired whenever the value changes, from user input, stepper click, or a programmatic update. Not fired on initial render.',
         detail: '{ value: number | null }',
     }),
     event('input', { forwarded: true }),

package/dist/quantic-components.js

@@ -4598,6 +4598,33 @@
     function compact(items) {
         return items.filter((item) => item != null && item !== '');
     }
+    /**
+     * Dispatches the standard `value-changed` event for a form control from its
+     * `updated()` lifecycle, so it fires on real changes — user input *and*
+     * programmatic `el.value = ...` updates — but not on the initial render.
+     *
+     * Lit records the old value as `undefined` for any change made before the first
+     * update, so `changed.get(key) !== undefined` reliably skips initial hydration
+     * even when the value was set imperatively beforehand.
+     *
+     * @example
+     * updated(changed: Map<string, unknown>) {
+     *   if (changed.has('value')) {
+     *     this.internals.setFormValue(this.value);
+     *     this.updateValidity();
+     *   }
+     *   emitValueChanged(this, changed, this.value);
+     * }
+     */
+    function emitValueChanged(host, changed, value, key = 'value') {
+        if (changed.has(key) && changed.get(key) !== undefined) {
+            host.dispatchEvent(new CustomEvent('value-changed', {
+                detail: { value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
 
     const ComboboxSize = {
         ExtraSmall: 'xs',
@@ -4758,8 +4785,8 @@
             this._activeIndex = -1;
             this.cleanup?.();
             this.cleanup = undefined;
-            if (this.allowCustomValue && commit) {
-                this.commitCustomValue();
+            if (commit && (this.allowCustomValue || !this._inputValue.trim())) {
+                this.commitInputValue();
             }
             else {
                 const selected = this.options.find((o) => o.value === this.value);
@@ -4767,7 +4794,7 @@
                     selected?.label ?? (this.allowCustomValue ? this.value : '');
             }
         }
-        commitCustomValue() {
+        commitInputValue() {
             const trimmed = this._inputValue.trim();
             this._inputValue = trimmed;
             if (trimmed === this.value)
@@ -4865,10 +4892,10 @@
                             this.selectOption(opt);
                         }
                     }
-                    else if (this.allowCustomValue && this._inputValue.trim()) {
+                    else if (this._open &&
+                        (this.allowCustomValue || !this._inputValue.trim())) {
                         e.preventDefault();
                         this.closeList(true);
-                        this.commitCustomValue();
                     }
                     break;
                 case 'Escape':
@@ -5399,7 +5426,7 @@
     ], exports.Combobox.prototype, "_activeIndex", void 0);
     exports.Combobox = __decorate([
         event('value-changed', {
-            description: 'Fired when the user selects an option from the list, or commits a custom value when allowCustomValue is enabled.',
+            description: 'Fired when the user selects an option from the list, clears the field, or commits a custom value when allowCustomValue is enabled.',
             detail: '{ value: string }',
         }),
         event('input-changed', {
@@ -7350,18 +7377,10 @@
                 this.updateValidity();
                 this.lineCount = Math.max(1, this.value.split('\n').length);
             }
+            emitValueChanged(this, changedProperties, this.value);
         }
         handleInput(e) {
-            const textarea = e.target;
-            this.value = textarea.value;
-            this.lineCount = Math.max(1, this.value.split('\n').length);
-            this.internals.setFormValue(this.value);
-            this.updateValidity();
-            this.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
+            this.value = e.target.value;
         }
         forwardNative(e) {
             const baseInit = {
@@ -7717,7 +7736,7 @@
     ], exports.CodeInput.prototype, "lineCount", void 0);
     exports.CodeInput = __decorate([
         event('value-changed', {
-            description: "Fired whenever the textarea's value is updated (on input).",
+            description: 'Fired whenever the value changes, from user input or a programmatic update. Not fired on initial render.',
             detail: '{ value: string }',
         }),
         event('change', { forwarded: true }),
@@ -12289,6 +12308,7 @@
                 this.internals.setFormValue(this.value);
                 this.updateValidity();
             }
+            emitValueChanged(this, changedProperties, this.value);
         }
         forwardNative(e) {
             const target = e.target;
@@ -12302,16 +12322,7 @@
             }
         }
         dispatchValueChanged(e) {
-            const inputEl = e.target;
-            this.value = inputEl.value;
-            // Update form value
-            this.internals.setFormValue(this.value);
-            this.updateValidity();
-            this.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
+            this.value = e.target.value;
         }
         formResetCallback() {
             this.value = '';
@@ -12611,7 +12622,7 @@
     ], exports.TextInput.prototype, "showPassword", void 0);
     exports.TextInput = __decorate([
         event('value-changed', {
-            description: 'Fired on every input and change event.',
+            description: 'Fired whenever the value changes, from user input or a programmatic update. Not fired on initial render.',
             detail: '{ value: string }',
         }),
         event('input', { forwarded: true }),
@@ -12681,13 +12692,7 @@
             this._slottedOptions = [];
         }
         dispatchValueChanged(e) {
-            const selectEl = e.target;
-            this.value = selectEl.value;
-            this.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
+            this.value = e.target.value;
         }
         openDropdown(e) {
             if (!this.disabled) {
@@ -12706,6 +12711,7 @@
                     select.value = option[1];
                 }
             }
+            emitValueChanged(this, changed, this.value);
         }
         forwardNative(e) {
             this.dispatchEvent(new Event(e.type, { bubbles: true, composed: true }));
@@ -12935,7 +12941,7 @@
     ], exports.Select.prototype, "invalid", void 0);
     exports.Select = __decorate([
         event('value-changed', {
-            description: "Fired whenever the input's value is updated (on input & change).",
+            description: 'Fired whenever the value changes, from user selection or a programmatic update. Not fired on initial render.',
             detail: '{ value: string }',
         }),
         event('focus', { forwarded: true }),
@@ -62213,6 +62219,7 @@
             if (changedProperties.has('value')) {
                 this.updateValidity();
             }
+            emitValueChanged(this, changedProperties, this.value);
         }
         stepUp() {
             this.inputRef.value?.stepUp();
@@ -62225,12 +62232,6 @@
         syncValue() {
             const raw = this.inputRef.value?.valueAsNumber;
             this.value = raw !== undefined && !isNaN(raw) ? raw : null;
-            this.updateValidity();
-            this.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
         }
         updateValidity() {
             const inputEl = this.inputRef.value;
@@ -62582,7 +62583,7 @@
     ], exports.NumberInput.prototype, "invalid", void 0);
     exports.NumberInput = __decorate([
         event('value-changed', {
-            description: "Fired whenever the input's value is updated (on input, change, or stepper click).",
+            description: 'Fired whenever the value changes, from user input, stepper click, or a programmatic update. Not fired on initial render.',
             detail: '{ value: number | null }',
         }),
         event('input', { forwarded: true }),
@@ -68534,6 +68535,7 @@
                 this.internals.setFormValue(this.value);
                 this.updateValidity();
             }
+            emitValueChanged(this, changedProperties, this.value);
         }
         forwardNative(e) {
             const target = e.target;
@@ -68541,15 +68543,7 @@
             this.dispatchEvent(new Event(e.type, { bubbles: true, composed: true }));
         }
         dispatchValueChanged(e) {
-            const textareaEl = e.target;
-            this.value = textareaEl.value;
-            this.internals.setFormValue(this.value);
-            this.updateValidity();
-            this.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
+            this.value = e.target.value;
         }
         formResetCallback() {
             this.value = '';
@@ -68810,7 +68804,7 @@
     ], exports.Textarea.prototype, "autoComplete", void 0);
     exports.Textarea = __decorate([
         event('value-changed', {
-            description: 'Fired on every input and change event.',
+            description: 'Fired whenever the value changes, from user input or a programmatic update. Not fired on initial render.',
             detail: '{ value: string }',
         }),
         event('input', { forwarded: true }),