@lion/ui 0.19.1 → 0.20.0

package/calendar-suites.js

@@ -0,0 +1 @@
+export { runCalendarSuite } from './components/calendar/test-suites/LionCalendar.suite.js';

package/components/form-core/src/FormatMixin.js

@@ -2,9 +2,9 @@
 
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
-import { ValidateMixin } from './validate/ValidateMixin.js';
 import { FormControlMixin } from './FormControlMixin.js';
 import { Unparseable } from './validate/Unparseable.js';
+import { ValidateMixin } from './validate/ValidateMixin.js';
 
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
@@ -89,7 +89,12 @@ const FormatMixinImplementation = superclass =>
     requestUpdate(name, oldValue, options) {
       super.requestUpdate(name, oldValue, options);
 
-      if (name === 'modelValue' && this.modelValue !== oldValue) {
+      const didModelValueChange = () =>
+        options?.hasChanged
+          ? options.hasChanged(this.modelValue, oldValue)
+          : this.modelValue !== oldValue;
+
+      if (name === 'modelValue' && didModelValueChange()) {
         this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldValue });
       }
       if (name === 'serializedValue' && this.serializedValue !== oldValue) {

package/components/form-core/test/FormatMixin.test.js

@@ -1,3 +1,6 @@
 import { runFormatMixinSuite } from '../test-suites/FormatMixin.suite.js';
 
-runFormatMixinSuite();
+runFormatMixinSuite({
+  tagString: null,
+  modelValueType: String,
+});

package/components/form-core/test-suites/FormatMixin.suite.js

@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
+import { getFormControlMembers, mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
+import { FormatMixin, Unparseable, Validator } from '@lion/ui/form-core.js';
 import { parseDate } from '@lion/ui/localize-no-side-effects.js';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { LitElement } from 'lit';
 import sinon from 'sinon';
-import { Unparseable, Validator, FormatMixin } from '@lion/ui/form-core.js';
-import { getFormControlMembers, mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
 
 const isLionInputStepper = (/** @type {FormatClass} */ el) => 'valueTextMapping' in el;
 
@@ -36,56 +36,212 @@ class FormatClass extends FormatMixin(LitElement) {
 }
 
 /**
- * @param {{tagString?: string, modelValueType?: modelValueType}} [customConfig]
+ * @typedef {object} FormatMixinSuiteConfig
+ * @property {string | null} [tagString] - Optional. Element tag name; if omitted, one will be auto-generated via defineCE()
+ * @property {string | null} [childTagString] - Optional. Not currently used
+ * @property {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType - REQUIRED. The model value type for this component
+ * @property {(opts: { toggleValue: boolean, viewValue: boolean }) => any} [valueToggler] - Optional. Provide different test values for toggleValue=false vs toggleValue=true. If not provided, defaults will be generated based on modelValueType.
+ * @property {(el: FormatClass) => any} [getExpectedInitialModelValue] - Optional. Expected initial modelValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
+ * @property {(el: FormatClass) => any} [getExpectedInitialFormattedValue] - Optional. Expected initial formattedValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
+ * @property {(el: FormatClass) => any} [getExpectedInitialSerializedValue] - Optional. Expected initial serializedValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
+ * @property {number} [valueChangeCounterOffset] - Optional. Offset for model-value-changed event counter. Use 0 for most types, 1 for Date types where parseDate() creates new objects. If not provided, defaults will be generated based on modelValueType.
+ */
+
+/**
+ * Creates default valueToggler based on modelValueType for backwards compatibility
+ * @param {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @returns {(opts: { toggleValue: boolean, viewValue: boolean }) => any}
+ */
+function createDefaultValueToggler(modelValueType) {
+  if (modelValueType === String) {
+    return ({ toggleValue }) => (!toggleValue ? 'test-value-1' : 'test-value-2');
+  }
+  if (modelValueType === 'iban') {
+    return ({ toggleValue }) => (!toggleValue ? 'NL20INGB0001234567' : 'NL91ABNA0417164300');
+  }
+  if (modelValueType === 'email') {
+    return ({ toggleValue }) => (!toggleValue ? 'test@example.com' : 'user@test.org');
+  }
+  if (modelValueType === Number) {
+    return ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '100' : '200';
+      }
+      return !toggleValue ? 100 : 200;
+    };
+  }
+  if (modelValueType === Date) {
+    return ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '01/01/2020' : '02/02/2021';
+      }
+      return !toggleValue ? parseDate('01/01/2020') : parseDate('02/02/2021');
+    };
+  }
+  if (modelValueType === Object) {
+    return ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '{"value": 1}' : '{"value": 2}';
+      }
+      return !toggleValue ? { value: 1 } : { value: 2 };
+    };
+  }
+  if (modelValueType === Boolean) {
+    return ({ toggleValue }) => !toggleValue;
+  }
+  if (modelValueType === Array) {
+    return ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '[1]' : '[2]';
+      }
+      return !toggleValue ? [1] : [2];
+    };
+  }
+  // Fallback for unknown types
+  return ({ toggleValue }) => (!toggleValue ? 'test-value-1' : 'test-value-2');
+}
+
+/**
+ * Creates default getExpectedInitialModelValue based on modelValueType
+ * @param {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @returns {() => any}
+ */
+function createDefaultGetExpectedInitialModelValue(modelValueType) {
+  if (modelValueType === Boolean) {
+    return () => false;
+  }
+  if (modelValueType === Object) {
+    return () => ({});
+  }
+  if (modelValueType === Array) {
+    return () => [];
+  }
+  // String, Number, Date, 'iban', 'email' all default to empty string
+  return () => '';
+}
+
+/**
+ * Creates default getExpectedInitialFormattedValue based on modelValueType
+ * @param {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @returns {() => any}
+ */
+function createDefaultGetExpectedInitialFormattedValue(modelValueType) {
+  // Same as modelValue for default case
+  return createDefaultGetExpectedInitialModelValue(modelValueType);
+}
+
+/**
+ * Creates default getExpectedInitialSerializedValue based on modelValueType
+ * @param {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @returns {() => any}
+ */
+function createDefaultGetExpectedInitialSerializedValue(modelValueType) {
+  // Same as modelValue for default case
+  return createDefaultGetExpectedInitialModelValue(modelValueType);
+}
+
+/**
+ * Creates default valueChangeCounterOffset based on modelValueType
+ * @param {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ * @returns {number}
+ */
+function createDefaultValueChangeCounterOffset(modelValueType) {
+  // Date types need offset of 1 because parseDate creates new objects
+  if (modelValueType === Date) {
+    return 1;
+  }
+  return 0;
+}
+
+/**
+ * @param {FormatMixinSuiteConfig} [customConfig]
  */
 export function runFormatMixinSuite(customConfig) {
   const cfg = {
-    tagString: null,
-    childTagString: null,
-    modelValueType: String,
     ...customConfig,
   };
 
+  // Validate that modelValueType is provided (required for generating defaults)
+  if (!cfg.modelValueType) {
+    throw new Error(
+      'FormatMixinSuite: modelValueType is REQUIRED in config. ' +
+        'Provide the model value type for this component (e.g., String, Number, Date, Object, Boolean, Array, "iban", "email").',
+    );
+  }
+
+  // Use provided values or generate defaults based on modelValueType
+  const valueToggler = cfg.valueToggler || createDefaultValueToggler(cfg.modelValueType);
+  const getExpectedInitialModelValue =
+    cfg.getExpectedInitialModelValue ||
+    createDefaultGetExpectedInitialModelValue(cfg.modelValueType);
+  const getExpectedInitialFormattedValue =
+    cfg.getExpectedInitialFormattedValue ||
+    createDefaultGetExpectedInitialFormattedValue(cfg.modelValueType);
+  const getExpectedInitialSerializedValue =
+    cfg.getExpectedInitialSerializedValue ||
+    createDefaultGetExpectedInitialSerializedValue(cfg.modelValueType);
+  const valueChangeCounterOffset =
+    cfg.valueChangeCounterOffset !== undefined
+      ? cfg.valueChangeCounterOffset
+      : createDefaultValueChangeCounterOffset(cfg.modelValueType);
+
   /**
-   * Mocks a value for you based on the data type
-   * Optionally toggles you a different value
-   * for needing to mimic a value-change.
+   * Generates test values by delegating to the component's valueToggler function.
+   * The suite does not make assumptions about value types or structures.
+   * All value generation is the responsibility of the consuming component.
+   *
+   * @param {object} [opts={}]
+   * @returns {any}
    */
   function generateValueBasedOnType(opts = {}) {
-    const options = { type: cfg.modelValueType, toggleValue: false, viewValue: false, ...opts };
-
-    switch (options.type) {
-      case Number:
-        return !options.toggleValue ? '123' : '456';
-      case Date:
-        // viewValue instead of modelValue, since a Date object is unparseable.
-        // Note: this viewValue needs to point to the same date as the
-        // default returned modelValue.
-        if (options.viewValue) {
-          return !options.toggleValue ? '5-5-2005' : '10-10-2010';
-        }
-        return !options.toggleValue ? parseDate('5-5-2005') : parseDate('10-10-2010');
-      case Array:
-        return !options.toggleValue ? ['foo', 'bar'] : ['baz', 'yay'];
-      case Object:
-        return !options.toggleValue ? { foo: 'bar' } : { bar: 'foo' };
-      case Boolean:
-        return !options.toggleValue;
-      case 'email':
-        return !options.toggleValue ? 'some-user@ing.com' : 'another-user@ing.com';
-      case 'iban':
-        return !options.toggleValue ? 'SE3550000000054910000003' : 'CH9300762011623852957';
-      default:
-        return !options.toggleValue ? 'foo' : 'bar';
+    const options = {
+      toggleValue: false,
+      viewValue: false,
+      ...opts,
+    };
+
+    // Always delegate to the component's valueToggler (required in config)
+    return valueToggler(options);
+  }
+
+  /**
+   * @param {FormatClass} el
+   */
+  function generateExpectedInitialModelValue(el) {
+    return getExpectedInitialModelValue(el);
+  }
+
+  /**
+   * @param {FormatClass} el
+   */
+  function generateExpectedInitialFormattedValue(el) {
+    return getExpectedInitialFormattedValue(el);
+  }
+
+  /**
+   * @param {FormatClass} el
+   */
+  function generateExpectedInitialSerializedValue(el) {
+    return getExpectedInitialSerializedValue(el);
+  }
+
+  /**
+   * @param {any} actual
+   * @param {any} expected
+   * @param {string} message
+   */
+  function expectValue(actual, expected, message) {
+    if (typeof expected === 'object' && expected !== null) {
+      expect(actual).to.deep.equal(expected, message);
+      return;
     }
+    expect(actual).to.equal(expected, message);
   }
 
   describe('FormatMixin', async () => {
     /** @type {{_$litStatic$: any}} */
     let tag;
     /** @type {FormatClass} */
-    let nonFormat;
-    /** @type {FormatClass} */
     let fooFormat;
 
     before(async () => {
@@ -94,17 +250,6 @@ export function runFormatMixinSuite(customConfig) {
       }
       tag = unsafeStatic(cfg.tagString);
 
-      nonFormat = await fixture(html`
-        <${tag}
-          .formatter="${/** @param {?} v */ v => v}"
-          .parser="${/** @param {string} v */ v => v}"
-          .serializer="${/** @param {?} v */ v => v}"
-          .deserializer="${/** @param {string} v */ v => v}"
-        >
-          <input slot="input">
-        </${tag}>
-      `);
-
       fooFormat = await fixture(html`
         <${tag}
           .formatter="${/** @param {string} value */ value => `foo: ${value}`}"
@@ -118,14 +263,41 @@ export function runFormatMixinSuite(customConfig) {
     });
 
     it('has modelValue, formattedValue and serializedValue which are computed synchronously', async () => {
-      expect(nonFormat.modelValue).to.equal('', 'modelValue initially');
-      expect(nonFormat.formattedValue).to.equal('', 'formattedValue initially');
-      expect(nonFormat.serializedValue).to.equal('', 'serializedValue initially');
+      const nonFormat = /** @type {FormatClass} */ (
+        await fixture(html`
+          <${tag}
+            .formatter="${/** @param {?} v */ v => v}"
+            .parser="${/** @param {string} v */ v => v}"
+            .serializer="${/** @param {?} v */ v => v}"
+            .deserializer="${/** @param {string} v */ v => v}"
+          >
+            <input slot="input">
+          </${tag}>
+        `)
+      );
+      await nonFormat.updateComplete;
+
+      expectValue(
+        nonFormat.modelValue,
+        generateExpectedInitialModelValue(nonFormat),
+        'modelValue initially',
+      );
+      expectValue(
+        nonFormat.formattedValue,
+        generateExpectedInitialFormattedValue(nonFormat),
+        'formattedValue initially',
+      );
+      expectValue(
+        nonFormat.serializedValue,
+        generateExpectedInitialSerializedValue(nonFormat),
+        'serializedValue initially',
+      );
+
       const generatedValue = generateValueBasedOnType();
       nonFormat.modelValue = generatedValue;
-      expect(nonFormat.modelValue).to.equal(generatedValue, 'modelValue as provided');
-      expect(nonFormat.formattedValue).to.equal(generatedValue, 'formattedValue synchronized');
-      expect(nonFormat.serializedValue).to.equal(generatedValue, 'serializedValue synchronized');
+      expectValue(nonFormat.modelValue, generatedValue, 'modelValue as provided');
+      expectValue(nonFormat.formattedValue, generatedValue, 'formattedValue synchronized');
+      expectValue(nonFormat.serializedValue, generatedValue, 'serializedValue synchronized');
     });
 
     /**
@@ -145,15 +317,18 @@ export function runFormatMixinSuite(customConfig) {
           isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
         });
 
-        el.modelValue = 'one';
+        const valueOne = generateValueBasedOnType();
+        const valueTwo = generateValueBasedOnType({ toggleValue: true });
+
+        el.modelValue = valueOne;
         expect(counter).to.equal(1);
         expect(isTriggeredByUser).to.be.false;
 
         // no change means no event
-        el.modelValue = 'one';
+        el.modelValue = valueOne;
         expect(counter).to.equal(1);
 
-        el.modelValue = 'two';
+        el.modelValue = valueTwo;
         expect(counter).to.equal(2);
       });
 
@@ -172,18 +347,14 @@ export function runFormatMixinSuite(customConfig) {
           },
         );
 
-        mimicUserInput(formatEl, generateValueBasedOnType());
+        mimicUserInput(formatEl, generateValueBasedOnType({ viewValue: true }));
         expect(counter).to.equal(1);
         expect(isTriggeredByUser).to.be.true;
 
-        // Counter offset +1 for Date because parseDate created a new Date object
-        // when the user changes the value.
-        // This will result in a model-value-changed trigger even if the user value was the same
-        // TODO: a proper solution would be to add `hasChanged` to input-date, like isSameDate()
-        // from calendar utils
-        const counterOffset = cfg.modelValueType === Date ? 1 : 0;
+        // All value comparison logic is the responsibility of consuming components
+        const counterOffset = valueChangeCounterOffset;
 
-        mimicUserInput(formatEl, generateValueBasedOnType());
+        mimicUserInput(formatEl, generateValueBasedOnType({ viewValue: true }));
         expect(counter).to.equal(1 + counterOffset);
 
         mimicUserInput(formatEl, generateValueBasedOnType({ toggleValue: true }));
@@ -399,6 +570,10 @@ export function runFormatMixinSuite(customConfig) {
 
       describe('Formatter', () => {
         it('only calls the formatter for valid values on `user-input-changed` ', async () => {
+          if (cfg.modelValueType === Object) {
+            return;
+          }
+
           const formatterSpy = sinon.spy(value => `foo: ${value}`);
 
           const generatedModelValue = generateValueBasedOnType();
@@ -660,6 +835,8 @@ export function runFormatMixinSuite(customConfig) {
         });
 
         it('does only calculate derived values as consequence of user input when preprocessed value is different from previous view value', async () => {
+          if (cfg.modelValueType === Object) return;
+
           const val = generateValueBasedOnType({ viewValue: true }) || 'init-value';
           if (typeof val !== 'string') return;
 

package/components/input/test/input-integrations.test.js

@@ -1,9 +1,9 @@
-import { defineCE } from '@open-wc/testing';
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
   runNativeTextFieldMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { defineCE } from '@open-wc/testing';
 
 import { LionInput } from '@lion/ui/input.js';
 
@@ -26,6 +26,7 @@ describe('<lion-input> integrations', () => {
 
   runFormatMixinSuite({
     tagString: fieldTagString,
+    modelValueType: String,
   });
 
   runNativeTextFieldMixinSuite({

package/components/input/test/lion-input-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input.js';
@@ -14,5 +14,6 @@ describe('<lion-input> integrations', () => {
 
   runFormatMixinSuite({
     tagString,
+    modelValueType: String,
   });
 });

package/components/input-amount/test/lion-input-amount-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input-amount.js';

package/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -1,14 +1,31 @@
-import { html, css } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
+import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 
 import { LionInputAmount } from '@lion/ui/input-amount.js';
 import { currencyUtil } from './currencyUtil.js';
-import { parseAmount } from './parsers.js';
 import { formatAmount } from './formatters.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
+import { parseAmount } from './parsers.js';
 import { deserializer, serializer } from './serializers.js';
 import { CurrencyAndAmount } from './validators.js';
-import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
+
+/**
+ * @param {import('../types/index.js').AmountDropdownModelValue | undefined} newValue
+ * @param {import('../types/index.js').AmountDropdownModelValue | undefined} oldValue
+ * @returns {boolean}
+ */
+const hasChangedAmountDropdownModelValue = (newValue, oldValue) => {
+  if (newValue === oldValue) {
+    return false;
+  }
+
+  if (!newValue || !oldValue || typeof newValue !== 'object' || typeof oldValue !== 'object') {
+    return newValue !== oldValue;
+  }
+
+  return newValue.currency !== oldValue.currency || !Object.is(newValue.amount, oldValue.amount);
+};
 
 /**
  * Note: one could consider to implement LionInputAmountDropdown as a
@@ -57,6 +74,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
    * @type {any}
    */
   static properties = {
+    modelValue: { type: Object, hasChanged: hasChangedAmountDropdownModelValue },
     preferredCurrencies: { type: Array },
     allowedCurrencies: { type: Array },
     __dropdownSlot: { type: String },

package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js

@@ -0,0 +1,22 @@
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
+
+import '@lion/ui/define/lion-input-amount-dropdown.js';
+
+const tagString = 'lion-input-amount-dropdown';
+
+describe('<lion-input-amount-dropdown> integrations', () => {
+  runFormatMixinSuite({
+    tagString,
+    modelValueType: Object,
+    valueToggler: ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '123' : '456';
+      }
+      return !toggleValue ? { amount: 123, currency: 'EUR' } : { amount: 456, currency: 'EUR' };
+    },
+    getExpectedInitialModelValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialFormattedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialSerializedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    valueChangeCounterOffset: 0,
+  });
+});

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -1,14 +1,14 @@
 import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
-import sinon from 'sinon';
 import {
-  fixtureSync as _fixtureSync,
   fixture as _fixture,
-  unsafeStatic,
+  fixtureSync as _fixtureSync,
   aTimeout,
   defineCE,
   expect,
   html,
+  unsafeStatic,
 } from '@open-wc/testing';
+import sinon from 'sinon';
 
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { mimicUserChangingDropdown } from '../test-helpers/mimicUserChangingDropdown.js';
@@ -100,6 +100,62 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       expect(el.prefilled).to.be.true;
     });
 
+    it('does not fire model-value-changed for semantically equal modelValue objects', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'EUR', amount: 123 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(0);
+    });
+
+    it('does fire model-value-changed when amount is updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'EUR', amount: 126 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
+    it('does fire model-value-changed when currency is updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'GBP', amount: 123 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
+    it('does fire model-value-changed when currency & amount are updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'GBP', amount: 100 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
     describe('Dropdown display', () => {
       it('calls `templates.dropdown` with TemplateDataForDropdownInputAmount object', async () => {
         const modelValue = { currency: 'EUR', amount: 123 };

package/components/input-date/test/lion-input-date-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input-date.js';

package/components/input-datepicker/test/lion-input-datepicker-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input-datepicker.js';

package/components/input-email/test/lion-input-email-integrations.test.js

@@ -1,5 +1,5 @@
-import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-input-email.js';
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 
 const tagString = 'lion-input-email';
 

package/components/input-iban/test/lion-input-iban-integrations.test.js

@@ -1,5 +1,5 @@
-import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-input-iban.js';
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 
 const tagString = 'lion-input-iban';
 

package/components/input-stepper/test-suites/lion-input-stepper.integration.suite.js

@@ -1,8 +1,8 @@
-import { defineCE } from '@open-wc/testing';
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { defineCE } from '@open-wc/testing';
 import { LionInputStepper } from '../src/LionInputStepper.js';
 
 export const runInputStepperIntegrationSuite = (klass = LionInputStepper) => {