@ctrliq/quantic-components 1.63.2 → 1.63.4

package/dist/select/index.js

@@ -15,6 +15,7 @@ export { SelectSize } from './index.constants';
 import { LucideIconCircleAlert } from '../icon/__generated__/lucide/circle-alert';
 import { LucideIconChevronDown } from '../icon/__generated__/lucide/chevron-down';
 import { event, prop } from '../shared/component-meta.decorators';
+import { emitValueChanged } from '../shared/shared.utils';
 LucideIconCircleAlert.ensureDefined();
 LucideIconChevronDown.ensureDefined();
 let Select = class Select extends A11yAttributesMixin(QuanticElement) {
@@ -32,13 +33,7 @@ let Select = class Select extends A11yAttributesMixin(QuanticElement) {
         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) {
@@ -57,6 +52,7 @@ let Select = class Select extends A11yAttributesMixin(QuanticElement) {
                 select.value = option[1];
             }
         }
+        emitValueChanged(this, changed, this.value);
     }
     forwardNative(e) {
         this.dispatchEvent(new Event(e.type, { bubbles: true, composed: true }));
@@ -286,7 +282,7 @@ __decorate([
 ], Select.prototype, "invalid", void 0);
 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 }),

package/dist/shared/shared.utils.d.ts

@@ -10,6 +10,28 @@ export declare function generateId(prefix?: string): string;
  * Removes null, undefined and empty string values from an array.
  */
 export declare function compact<T>(items: (T | null | undefined)[]): T[];
+/**
+ * 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);
+ * }
+ */
+export declare function emitValueChanged(host: EventTarget, changed: {
+    has(key: string): boolean;
+    get(key: string): unknown;
+}, value: unknown, key?: string): void;
 /**
  * Ensure a custom element is defined
  *

package/dist/shared/shared.utils.js

@@ -33,6 +33,33 @@ export function generateId(prefix) {
 export 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);
+ * }
+ */
+export 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,
+        }));
+    }
+}
 /**
  * Ensure a custom element is defined
  *

package/dist/shared/shared.utils.test.js

@@ -1,5 +1,9 @@
-import { describe, expect, it } from 'vitest';
-import { clamp } from './shared.utils';
+import { describe, expect, it, vi } from 'vitest';
+import { clamp, emitValueChanged } from './shared.utils';
+function fakeHost() {
+    const dispatchEvent = vi.fn();
+    return { host: { dispatchEvent }, dispatchEvent };
+}
 describe('clamp', () => {
     it('returns value when within range', () => {
         expect(clamp(5, 0, 10)).toBe(5);
@@ -26,3 +30,36 @@ describe('clamp', () => {
         expect(clamp(10, 5, 5)).toBe(5);
     });
 });
+describe('emitValueChanged', () => {
+    it('dispatches value-changed carrying the given value on a real change', () => {
+        const { host, dispatchEvent } = fakeHost();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        emitValueChanged(host, new Map([['value', 'old']]), 'new');
+        expect(dispatchEvent).toHaveBeenCalledTimes(1);
+        const event = dispatchEvent.mock.calls[0][0];
+        expect(event.type).toBe('value-changed');
+        expect(event.detail).toEqual({ value: 'new' });
+        expect(event.bubbles).toBe(true);
+        expect(event.composed).toBe(true);
+    });
+    it('does not dispatch on the initial render (Lit reports undefined old value)', () => {
+        const { host, dispatchEvent } = fakeHost();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        emitValueChanged(host, new Map([['value', undefined]]), 'preset');
+        expect(dispatchEvent).not.toHaveBeenCalled();
+    });
+    it('does not dispatch when the key did not change', () => {
+        const { host, dispatchEvent } = fakeHost();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        emitValueChanged(host, new Map([['other', 'x']]), 'same');
+        expect(dispatchEvent).not.toHaveBeenCalled();
+    });
+    it('supports gating on a custom key', () => {
+        const { host, dispatchEvent } = fakeHost();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        emitValueChanged(host, new Map([['count', 0]]), 42, 'count');
+        expect(dispatchEvent).toHaveBeenCalledTimes(1);
+        const event = dispatchEvent.mock.calls[0][0];
+        expect(event.detail).toEqual({ value: 42 });
+    });
+});

package/dist/text-input/index.js

@@ -16,6 +16,7 @@ import { Button } from '../button';
 import { TextInputSize } 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 { TextInputSize } from './index.constants';
 LucideIconCircleAlert.ensureDefined();
 LucideIconEye.ensureDefined();
@@ -54,6 +55,7 @@ let TextInput = class TextInput extends A11yAttributesMixin(QuanticElement) {
             this.internals.setFormValue(this.value);
             this.updateValidity();
         }
+        emitValueChanged(this, changedProperties, this.value);
     }
     forwardNative(e) {
         const target = e.target;
@@ -67,16 +69,7 @@ let TextInput = class TextInput extends A11yAttributesMixin(QuanticElement) {
         }
     }
     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 = '';
@@ -376,7 +369,7 @@ __decorate([
 ], TextInput.prototype, "showPassword", void 0);
 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 }),

package/dist/textarea/index.js

@@ -13,6 +13,7 @@ import { LucideIconCircleAlert } from '../icon/__generated__/lucide/circle-alert
 import { TextareaSize, TextareaResize } 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 { TextareaSize, TextareaResize } from './index.constants';
 LucideIconCircleAlert.ensureDefined();
 let Textarea = class Textarea extends A11yAttributesMixin(QuanticElement) {
@@ -36,6 +37,7 @@ let Textarea = class Textarea extends A11yAttributesMixin(QuanticElement) {
             this.internals.setFormValue(this.value);
             this.updateValidity();
         }
+        emitValueChanged(this, changedProperties, this.value);
     }
     forwardNative(e) {
         const target = e.target;
@@ -43,15 +45,7 @@ let Textarea = class Textarea extends A11yAttributesMixin(QuanticElement) {
         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 = '';
@@ -312,7 +306,7 @@ __decorate([
 ], Textarea.prototype, "autoComplete", void 0);
 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 }),

package/dist/types/combobox/index.d.ts

@@ -46,7 +46,7 @@ export declare class Combobox extends Combobox_base {
     private nextNavigableIndex;
     private openList;
     private closeList;
-    private commitCustomValue;
+    private commitInputValue;
     private positionListbox;
     private selectOption;
     private handleInput;

package/dist/types/shared/shared.utils.d.ts

@@ -10,6 +10,28 @@ export declare function generateId(prefix?: string): string;
  * Removes null, undefined and empty string values from an array.
  */
 export declare function compact<T>(items: (T | null | undefined)[]): T[];
+/**
+ * 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);
+ * }
+ */
+export declare function emitValueChanged(host: EventTarget, changed: {
+    has(key: string): boolean;
+    get(key: string): unknown;
+}, value: unknown, key?: string): void;
 /**
  * Ensure a custom element is defined
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.63.2",
+  "version": "1.63.4",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {