@lion/ui 0.2.2 → 0.3.1

package/components/combobox/test/lion-combobox.test.js

@@ -12,6 +12,7 @@ import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
 
@@ -2678,6 +2679,57 @@ describe('lion-combobox', () => {
       mimicKeyPress(visibleOptions[1], 'Enter');
       expect(el.opened).to.equal(true);
     });
+
+    it('submits form on [Enter] when listbox is closed', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo" multiple-choice>
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(1);
+    });
+
+    it('does not submit form on [Enter] when listbox is opened', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo" multiple-choice>
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      combobox.opened = true;
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(0);
+    });
   });
 
   describe('Match Mode', () => {

package/components/core/src/SlotMixin.js

@@ -83,6 +83,7 @@ const SlotMixinImplementation = superclass =>
         slotName,
         shouldRerender: true,
       });
+      // TODO: this is deprecated, remove later
       slotFunctionResult.afterRender?.();
     }
 
@@ -90,8 +91,8 @@ const SlotMixinImplementation = superclass =>
      * Here we rerender slots defined with a `SlotRerenderObject`
      * @param {import('lit-element').PropertyValues } changedProperties
      */
-    updated(changedProperties) {
-      super.updated(changedProperties);
+    update(changedProperties) {
+      super.update(changedProperties);
 
       if (this.__slotsThatNeedRerender.size) {
         for (const slotName of Array.from(this.__slotsThatNeedRerender)) {

package/components/core/test/SlotMixin.test.js

@@ -383,7 +383,7 @@ describe('SlotMixin', () => {
       expect(slot.tagName).to.equal('SPAN');
     });
 
-    it('supports afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
+    it('supports (deprecated) afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
       let varThatProvesAfterRenderIsCalled = 'not called';
 
       const tag = defineCE(

package/components/core/types/SlotMixinTypes.ts

@@ -6,7 +6,10 @@ import { TemplateResult, LitElement } from 'lit';
  */
 export type SlotRerenderObject = {
   template: TemplateResult;
-  /* Add logic that will be performed after the render */
+  /**
+   * Add logic that will be performed after the render
+   * @deprecated
+   */
   afterRender?: Function;
 };
 

package/components/dialog/test/lion-dialog.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import '@lion/ui/define/lion-dialog.js';
@@ -72,4 +73,59 @@ describe('lion-dialog', () => {
       expect(nestedDialogEl.opened).to.be.true;
     });
   });
+
+  describe('focus', () => {
+    it('sets focus on contentSlot by default', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      const contentNode = el.querySelector('[slot="content"]');
+      expect(document.activeElement).to.equal(contentNode);
+    });
+
+    it('sets focus on autofocused element', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      const input = el.querySelector('input');
+      expect(document.activeElement).to.equal(input);
+    });
+
+    it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      expect(document.activeElement).to.equal(invokerNode);
+    });
+  });
 });

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

@@ -27,6 +27,7 @@ const FocusMixinImplementation = superclass =>
       return {
         focused: { type: Boolean, reflect: true },
         focusedVisible: { type: Boolean, reflect: true, attribute: 'focused-visible' },
+        autofocus: { type: Boolean, reflect: true }, // Required in Lit to observe autofocus
       };
     }
 
@@ -47,11 +48,16 @@ const FocusMixinImplementation = superclass =>
        * @type {boolean}
        */
       this.focusedVisible = false;
+      this.autofocus = false;
     }
 
-    connectedCallback() {
-      super.connectedCallback();
+    /**
+     * @param {import('lit').PropertyValues } changedProperties
+     */
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
       this.__registerEventsForFocusMixin();
+      this.__syncAutofocusToFocusableElement();
     }
 
     disconnectedCallback() {
@@ -59,6 +65,31 @@ const FocusMixinImplementation = superclass =>
       this.__teardownEventsForFocusMixin();
     }
 
+    /**
+     * @param {import('lit').PropertyValues } changedProperties
+     */
+    updated(changedProperties) {
+      super.updated(changedProperties);
+      if (changedProperties.has('autofocus')) {
+        this.__syncAutofocusToFocusableElement();
+      }
+    }
+
+    /**
+     * @private
+     */
+    __syncAutofocusToFocusableElement() {
+      if (!this._focusableNode) {
+        return;
+      }
+
+      if (this.hasAttribute('autofocus')) {
+        this._focusableNode.setAttribute('autofocus', '');
+      } else {
+        this._focusableNode.removeAttribute('autofocus');
+      }
+    }
+
     /**
      * Calls `focus()` on focusable element within
      */

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

@@ -72,9 +72,11 @@ export class LionField extends FormControlMixin(
 
   /**
    * Dispatches custom bubble event
+   * @param {Event=} ev
    * @protected
    */
-  _onChange() {
+  // eslint-disable-next-line no-unused-vars
+  _onChange(ev) {
     /** @protectedEvent user-input-changed */
     this.dispatchEvent(new Event('user-input-changed', { bubbles: true }));
   }

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -3,10 +3,7 @@ import { html, LitElement } from 'lit';
 /**
  * @typedef {import('./Validator.js').Validator} Validator
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {Object} messageMap
- * @property {string | Node} message
- * @property {string} type
- * @property {Validator} [validator]
+ * @typedef {import('../../types/validate/ValidateMixinTypes.js').FeedbackMessage} FeedbackMessage
  */
 
 /**
@@ -47,7 +44,7 @@ export class LionValidationFeedback extends LitElement {
       if (this.currentType === 'success') {
         this.removeMessage = window.setTimeout(() => {
           this.removeAttribute('type');
-          /** @type {messageMap[]} */
+          /** @type {FeedbackMessage[]} */
           this.feedbackData = [];
         }, 3000);
       }

package/components/form-core/src/validate/ResultValidator.js

@@ -1,7 +1,7 @@
 import { Validator } from './Validator.js';
 
 /**
- * @desc Instead of evaluating the result of a regular validator, a ResultValidator looks
+ * Instead of evaluating the result of a regular Validator, a ResultValidator looks
  * at the total result of regular Validators. Instead of an execute function, it uses a
  * 'executeOnResults' Validator.
  * ResultValidators cannot be async, and should not contain an execute method.

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

@@ -323,6 +323,39 @@ describe('FocusMixin', () => {
         spy4.restore();
         restoreMock4();
       });
+
+      it('has mirrors syncs autofocus on the focusable element when autofocus changes', async () => {
+        const el = /** @type {Focusable} */ (
+          await fixture(html`
+          <${tag}><input slot="input"></${tag}>
+        `)
+        );
+
+        // @ts-ignore [allow-protected] in test
+        const { _focusableNode } = el;
+
+        el.setAttribute('autofocus', '');
+        await el.updateComplete;
+        expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
+
+        el.removeAttribute('autofocus');
+        await el.updateComplete;
+        expect(_focusableNode.hasAttribute('autofocus')).not.to.be.true;
+      });
+
+      it('has mirrors syncs autofocus on the focusable element when autofocus was set on render', async () => {
+        const el = /** @type {Focusable} */ (
+          await fixture(html`
+          <${tag} autofocus><input slot="input"></${tag}>
+        `)
+        );
+
+        // @ts-ignore [allow-protected] in test
+        const { _focusableNode } = el;
+
+        expect(el.hasAttribute('autofocus')).to.be.true;
+        expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
+      });
     });
   });
 });

package/components/form-core/types/validate/ValidateMixinTypes.ts

@@ -9,9 +9,9 @@ import { FormControlHost } from '../FormControlMixinTypes.js';
 import { SyncUpdatableHost } from '../utils/SyncUpdatableMixinTypes.js';
 import { Validator } from '../../src/validate/Validator.js';
 
-type FeedbackMessage = {
+export type FeedbackMessage = {
   message: string | Node;
-  type: string;
+  type: ValidationType | string;
   validator?: Validator;
 };
 

package/components/form-integrations/test/dialog-integrations.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { getAllTagNames } from './helpers/helpers.js';
@@ -36,6 +37,7 @@ describe('Form inside dialog Integrations', () => {
       'lion-input-amount',
       'lion-input-iban',
       'lion-input-email',
+      'lion-input-file',
       'lion-input-tel',
       'lion-input-tel-dropdown',
       'lion-checkbox-group',
@@ -70,4 +72,21 @@ describe('Form inside dialog Integrations', () => {
       'lion-textarea',
     ]);
   });
+
+  it('sets focus on first focusable element with autofocus', async () => {
+    const el = /** @type {LionDialog} */ await fixture(html`
+      <lion-dialog>
+        <button slot="invoker">invoker button</button>
+        <div slot="content">
+          <lion-input label="label" name="input" autofocus></lion-input>
+          <lion-textarea label="label" name="textarea" autofocus></lion-textarea>
+        </div>
+      </lion-dialog>
+    `);
+    // @ts-expect-error [allow-protected-in-tests]
+    el._overlayInvokerNode.click();
+    const lionInput = el.querySelector('[name="input"]');
+    // @ts-expect-error [allow-protected-in-tests]
+    expect(document.activeElement).to.equal(lionInput._focusableNode);
+  });
 });

package/components/form-integrations/test/form-group-methods.test.js

@@ -1,49 +1,20 @@
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import './helpers/umbrella-form.js';
 import { getAllFieldsAndFormGroups } from './helpers/helpers.js';
-
-import '@lion/ui/define/lion-button.js';
-import '@lion/ui/define/lion-button-submit.js';
-import '@lion/ui/define/lion-button-reset.js';
-
-import '@lion/ui/define/lion-checkbox.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-combobox.js';
-
-import '@lion/ui/define/lion-dialog.js';
-
-import '@lion/ui/define/lion-form.js';
-import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-select.js';
-
-import '@lion/ui/define/lion-input-stepper.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-input-date.js';
-import '@lion/ui/define/lion-input-iban.js';
-import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-input-datepicker.js';
-
-import '@lion/ui/define/lion-textarea.js';
-
-import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-radio-group.js';
-
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-options.js';
-
-import '@lion/ui/define/lion-validation-feedback.js';
+import './helpers/umbrella-form.js';
 /**
  * @typedef {import('../../form-core/src/LionField.js').LionField} LionField
+ * @typedef {import('../../input-file/types/input-file.js').InputFile} InputFile
  * @typedef {import('../../button/src/LionButton.js').LionButton} LionButton
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  */
 
+const file = /** @type {InputFile} */ (
+  new File(['foo'], 'foo.txt', {
+    type: 'text/plain',
+  })
+);
+
 const fullyPrefilledSerializedValue = {
   fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
   date: '2000-12-12',
@@ -57,6 +28,7 @@ const fullyPrefilledSerializedValue = {
   favoriteFruit: 'Banana',
   favoriteMovie: 'Rocky',
   favoriteColor: 'hotpink',
+  file: [],
   lyrics: '1',
   notifications: {
     checked: true,
@@ -81,6 +53,7 @@ const fullyChangedSerializedValue = {
   favoriteFruit: '',
   favoriteMovie: '',
   favoriteColor: '',
+  file: [file],
   lyrics: '2',
   notifications: {
     checked: false,
@@ -189,6 +162,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
       favoriteFruit: '',
       favoriteMovie: '',
       favoriteColor: '',
+      file: [],
       lyrics: '',
       notifications: {
         checked: false,

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

@@ -41,6 +41,7 @@ describe('Form Integrations', () => {
       favoriteFruit: 'Banana',
       favoriteMovie: 'Rocky',
       favoriteColor: 'hotpink',
+      file: [],
       lyrics: '1',
       range: 2.3,
       terms: [],
@@ -74,6 +75,7 @@ describe('Form Integrations', () => {
       favoriteFruit: 'Banana',
       favoriteMovie: 'Rocky',
       favoriteColor: 'hotpink',
+      file: '',
       lyrics: 'Fire up that loud',
       range: 2.3,
       terms: [],
@@ -98,6 +100,7 @@ describe('Form Integrations', () => {
               money: '',
               iban: '',
               email: '',
+              file: [],
               checkers: ['foo', 'bar'],
               dinosaurs: 'brontosaurus',
               favoriteFruit: 'Banana',
@@ -129,6 +132,7 @@ describe('Form Integrations', () => {
       'lion-input-amount',
       'lion-input-iban',
       'lion-input-email',
+      'lion-input-file',
       'lion-input-tel',
       'lion-input-tel-dropdown',
       'lion-checkbox-group',

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -1,29 +1,31 @@
-import { LitElement, html } from 'lit';
-import { Required, MinLength } from '@lion/ui/form-core.js';
-import '@lion/ui/define/lion-form.js';
+import '@lion/ui/define/lion-button-reset.js';
+import '@lion/ui/define/lion-button-submit.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-form.js';
+import '@lion/ui/define/lion-input-amount.js';
 import '@lion/ui/define/lion-input-date.js';
 import '@lion/ui/define/lion-input-datepicker.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input-iban.js';
 import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input-file.js';
+import '@lion/ui/define/lion-input-iban.js';
+import '@lion/ui/define/lion-input-range.js';
+import '@lion/ui/define/lion-input-stepper.js';
 import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-radio-group.js';
 import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-textarea.js';
-import '@lion/ui/define/lion-button.js';
+import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-switch.js';
-import '@lion/ui/define/lion-input-stepper.js';
+import '@lion/ui/define/lion-textarea.js';
+import { MinLength, Required } from '@lion/ui/form-core.js';
+import { html, LitElement } from 'lit';
 
 export class UmbrellaForm extends LitElement {
   get _lionFormNode() {
@@ -83,6 +85,7 @@ export class UmbrellaForm extends LitElement {
           <lion-input-amount name="money" label="Money"></lion-input-amount>
           <lion-input-iban name="iban" label="Iban"></lion-input-iban>
           <lion-input-email name="email" label="Email"></lion-input-email>
+          <lion-input-file name="file" label="File"></lion-input-file>
           <lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
           <lion-input-tel-dropdown
             name="tel-dropdown"
@@ -151,7 +154,7 @@ export class UmbrellaForm extends LitElement {
             .validators="${[new Required()]}"
           >
             <lion-checkbox
-              .choiceValue="agreed"
+              .choiceValue="${'agreed'}"
               label="I blindly accept all terms and conditions"
             ></lion-checkbox>
           </lion-checkbox-group>

package/components/input-amount/src/LionInputAmount.js

@@ -31,6 +31,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
        * validators.
        */
       modelValue: Number,
+      /**
+       * The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
+       * Default will be 'after'.
+       */
+      _currencyDisplayNodeSlot: { attribute: false },
       locale: { attribute: false },
     };
   }
@@ -38,7 +43,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   get slots() {
     return {
       ...super.slots,
-      after: () => {
+      [this._currencyDisplayNodeSlot]: () => {
         const el = document.createElement('span');
         // The data-label attribute will make sure that FormControl adds this to
         // input[aria-labelledby]
@@ -70,6 +75,8 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     this.locale = undefined;
     this.__currencyDisplayNodeIsConnected = true;
     this.defaultValidators.push(new IsNumber());
+    /** @protected */
+    this._currencyDisplayNodeSlot = 'after';
   }
 
   connectedCallback() {
@@ -103,14 +110,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
 
   /**
    * Upon connecting slot mixin, we should check if
-   * the after slot was created by the slot mixin,
+   * the required slot was created by the slot mixin,
    * and if so, we should execute the currency changed flow
    * which evaluates whether the slot node should be
    * removed for invalid currencies
    */
   _connectSlotMixin() {
     super._connectSlotMixin();
-    if (this._isPrivateSlot('after')) {
+    if (this._isPrivateSlot(this._currencyDisplayNodeSlot)) {
       this._onCurrencyChanged({ currency: this.currency || null });
     }
   }
@@ -179,7 +186,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
    * @private
    */
   get __currencyDisplayNode() {
-    const node = Array.from(this.children).find(child => child.slot === 'after');
+    const node = Array.from(this.children).find(
+      child => child.slot === this._currencyDisplayNodeSlot,
+    );
     if (node) {
       this.__storedCurrencyDisplayNode = node;
     }

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

@@ -3,13 +3,12 @@ import { html } from 'lit';
 import { localize } from '@lion/ui/localize.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { formatAmount, parseAmount } from '@lion/ui/input-amount.js';
+import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
 
 import '@lion/ui/define/lion-input-amount.js';
 
 /**
  * @typedef {import('../../input/src/LionInput.js').LionInput} LionInput
- * @typedef {import('../src/LionInputAmount.js').LionInputAmount} LionInputAmount
  */
 
 describe('<lion-input-amount>', () => {
@@ -187,24 +186,6 @@ describe('<lion-input-amount>', () => {
     ).to.equal('USD');
   });
 
-  it('ignores currency if a suffix is already present', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(
-        `<lion-input-amount currency="EUR"><span slot="suffix">my-currency</span></lion-input-amount>`,
-      )
-    );
-    expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
-        ?.innerText,
-    ).to.equal('my-currency');
-    el.currency = 'EUR';
-    await el.updateComplete;
-    expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
-        ?.innerText,
-    ).to.equal('my-currency');
-  });
-
   it('reformats on locale changes', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(
@@ -275,6 +256,24 @@ describe('<lion-input-amount>', () => {
     expect(currLabel?.innerText).to.equal('EUR');
   });
 
+  it('can override the currency label slot', async () => {
+    customElements.define(
+      'my-input-amount',
+      class extends LionInputAmount {
+        constructor() {
+          super();
+          // Put the currency label in the suffix slot
+          this._currencyDisplayNodeSlot = 'suffix';
+        }
+      },
+    );
+    const el = await fixture(html`<my-input-amount currency="EUR"></my-input-amount>`);
+    expect(
+      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
+        ?.innerText,
+    ).to.equal('EUR');
+  });
+
   describe('Accessibility', () => {
     it('is accessible', async () => {
       const el = await fixture(