@lion/ui 0.5.3 → 0.5.5

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

@@ -276,6 +276,10 @@ const FormControlMixinImplementation = superclass =>
     updated(changedProperties) {
       super.updated(changedProperties);
 
+      if (changedProperties.has('disabled')) {
+        this._inputNode?.setAttribute('aria-disabled', this.disabled.toString());
+      }
+
       if (changedProperties.has('_ariaLabelledNodes')) {
         this.__reflectAriaAttr(
           'aria-labelledby',
@@ -390,8 +394,20 @@ const FormControlMixinImplementation = superclass =>
           const insideNodes = nodes.filter(n => this.contains(n));
           const outsideNodes = nodes.filter(n => !this.contains(n));
 
+          const insideSlots = insideNodes.map(n => n.assignedSlot || n);
+          const orderedInsideSlots = [...getAriaElementsInRightDomOrder(insideSlots)];
+          /** @type {Element[]} */
+          const orderedInsideNodes = [];
+          orderedInsideSlots.forEach(assignedNode => {
+            insideNodes.forEach(node => {
+              // @ts-ignore
+              if (assignedNode.name === node.slot) {
+                orderedInsideNodes.push(node);
+              }
+            });
+          });
           // eslint-disable-next-line no-param-reassign
-          nodes = [...getAriaElementsInRightDomOrder(insideNodes), ...outsideNodes];
+          nodes = [...orderedInsideNodes, ...outsideNodes];
         }
         const string = nodes.map(n => n.id).join(' ');
         this._inputNode.setAttribute(attrName, string);

package/components/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -1,6 +1,7 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
 import { InteractionStateMixin } from '../InteractionStateMixin.js';
+import { ValidateMixin } from '../validate/ValidateMixin.js';
 
 /**
  * @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes.js').ChoiceGroupMixin} ChoiceGroupMixin
@@ -8,6 +9,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes.js').ElementWithParentFormGroup} ElementWithParentFormGroup
  * @typedef {import('../../types/form-group/FormGroupMixinTypes.js').FormControl} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes.js').ChoiceInputHost} ChoiceInputHost
+ * @typedef {import('../validate/Validator.js').Validator} Validator
  */
 
 /**
@@ -22,7 +24,9 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  */
 const ChoiceGroupMixinImplementation = superclass =>
   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
-  class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
+  class ChoiceGroupMixin extends FormRegistrarMixin(
+    ValidateMixin(InteractionStateMixin(superclass)),
+  ) {
     /** @type {any} */
     static get properties() {
       return {
@@ -123,6 +127,11 @@ const ChoiceGroupMixinImplementation = superclass =>
       }
     }
 
+    get operationMode() {
+      // @ts-ignore
+      return this._repropagationRole === 'choice-group' ? 'select' : 'enter';
+    }
+
     constructor() {
       super();
 

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -46,7 +46,7 @@ const FormGroupMixinImplementation = superclass =>
     }
 
     /**
-     * The host element with role group (or radigroup or form) containing neccessary aria attributes
+     * The host element with role group (or radio-group or form) containing necessary aria attributes
      * @protected
      */
     get _inputNode() {
@@ -478,7 +478,7 @@ const FormGroupMixinImplementation = superclass =>
 
     /**
      * Traverses the _parentFormGroup tree, and gathers all aria description elements
-     * (feedback and helptext) that should be provided to children.
+     * (feedback) that should be provided to children.
      *
      * In the example below, when the input for 'street' has focus, a screenreader user
      * would hear the #group-error.
@@ -503,7 +503,9 @@ const FormGroupMixinImplementation = superclass =>
         const descriptionElements = parent._getAriaDescriptionElements();
         const orderedEls = getAriaElementsInRightDomOrder(descriptionElements, { reverse: true });
         orderedEls.forEach(el => {
-          this.__descriptionElementsInParentChain.add(el);
+          if (el.getAttribute('slot') === 'feedback') {
+            this.__descriptionElementsInParentChain.add(el);
+          }
         });
         // Also check if the newly added child needs to refer grandparents
         parent = parent._parentFormGroup;
@@ -549,9 +551,6 @@ const FormGroupMixinImplementation = superclass =>
       this.__linkParentMessages(child);
       this.validate({ clearCurrentResult: true });
 
-      if (typeof child.addToAriaLabelledBy === 'function' && this._labelNode) {
-        child.addToAriaLabelledBy(this._labelNode, { reorder: false });
-      }
       if (!child.modelValue) {
         const pVals = this.__pendingValues;
         if (pVals.modelValue && pVals.modelValue[child.name]) {

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

@@ -20,6 +20,7 @@ import { FormControlMixin } from '../FormControlMixin.js';
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidateMixin} ValidateMixin
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidationType} ValidationType
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidateHost} ValidateHost
+ * @typedef {import('../../types/validate/ValidateMixinTypes.js').OperationMode} OperationMode
  * @typedef {import('../../types/validate/index.js').ValidatorOutcome} ValidatorOutcome
  * @typedef {typeof import('../../types/validate/ValidateMixinTypes.js').ValidateHost} ValidateHostConstructor
  * @typedef {{validator:Validator; outcome:boolean|string}} ValidationResultEntry
@@ -98,6 +99,15 @@ export const ValidateMixinImplementation = superclass =>
       return ['error'];
     }
 
+    /**
+     * Types of input interaction of the FormControl (for instance 'enter'|'select'|'upload')
+     * @overridable
+     * @type {OperationMode}
+     */
+    get operationMode() {
+      return 'enter';
+    }
+
     /**
      * Adds "._feedbackNode" as described below
      * @public

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

@@ -27,12 +27,15 @@ export class Validator extends EventTarget {
     this.__param = param;
     /** @type {ValidatorConfig} */
     this.__config = config || {};
-    /** @type {ValidationType} */
-    this.type = config?.type || 'error'; // Default type supported by ValidateMixin
+    /**
+     * Default type supported by ValidateMixin
+     * @type {ValidationType}
+     */
+    this.type = config?.type || 'error';
   }
 
   /**
-   * The name under which validation results get registered. For convience and predictability, this
+   * The name under which validation results get registered. For convenience and predictability, this
    * should always be the same as the constructor name (since it will be obfuscated in js builds,
    * we need to provide it separately).
    * @type {ValidatorName}

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

@@ -198,6 +198,21 @@ describe('FormControlMixin', () => {
       expect(descriptionIdsBefore).to.equal(descriptionIdsAfter);
     });
 
+    it('sets aria-disabled on inputNode based on disabled property', async () => {
+      const el = /** @type {FormControlMixinClass} */ (
+        await fixture(html`
+          <${tag}>${inputSlot}</${tag}>
+      `)
+      );
+      const { _inputNode } = getFormControlMembers(el);
+      expect(_inputNode.hasAttribute('aria-disabled')).to.be.true;
+      expect(_inputNode.getAttribute('aria-disabled')).to.equal('false');
+
+      el.disabled = true;
+
+      expect(_inputNode.getAttribute('aria-disabled')).to.equal('false');
+    });
+
     it('clicking the label should call `_onLabelClick`', async () => {
       const spy = sinon.spy();
       const el = /** @type {FormControlMixinClass} */ (
@@ -349,19 +364,18 @@ describe('FormControlMixin', () => {
         );
       });
 
-      it('sorts internal elements, and allows opt-out', async () => {
+      it('sorts internal elements based on assigned slots, and allows opt-out', async () => {
         const wrapper = await fixture(html`
-        <div id="wrapper">
-          <${tag}>
-            <input slot="input" id="myInput" />
-            <label slot="label" id="internalLabel">Added to label by default</label>
-            <div slot="help-text" id="internalDescription">
-              Added to description by default
-            </div>
-          </${tag}>
-          <div id="externalLabelB">should go after input internals</div>
-          <div id="externalDescriptionB">should go after input internals</div>
-        </div>`);
+          <div id="wrapper">
+            <${tag}>
+              <input slot="input" id="myInput" />
+              <label slot="label" id="internalLabel">Added to label by default</label>
+              <div slot="help-text" id="internalDescription">
+                Added to description by default
+              </div>
+            </${tag}>
+          </div>
+        `);
         const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
         const { _inputNode } = getFormControlMembers(el);
 
@@ -370,6 +384,11 @@ describe('FormControlMixin', () => {
         // A real life scenario would be for instance when
         // a Field or FormGroup would be extended and an extra slot would be added in the template
         const myInput = /** @type {HTMLElement} */ (wrapper.querySelector('#myInput'));
+        const internalLabel = /** @type {HTMLElement} */ (wrapper.querySelector('#internalLabel'));
+        const internalDescription = /** @type {HTMLElement} */ (
+          wrapper.querySelector('#internalDescription')
+        );
+
         el.addToAriaLabelledBy(myInput);
         await el.updateComplete;
         el.addToAriaDescribedBy(myInput);
@@ -377,29 +396,29 @@ describe('FormControlMixin', () => {
 
         expect(
           /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')).split(' '),
-        ).to.eql(['myInput', 'internalLabel']);
+        ).to.eql(['internalLabel', 'myInput']);
         expect(
           /** @type {string} */ (_inputNode.getAttribute('aria-describedby')).split(' '),
-        ).to.eql(['myInput', 'internalDescription']);
+        ).to.eql(['internalDescription', 'myInput']);
 
         // cleanup
-        el.removeFromAriaLabelledBy(myInput);
+        el.removeFromAriaLabelledBy(internalLabel);
         await el.updateComplete;
-        el.removeFromAriaDescribedBy(myInput);
+        el.removeFromAriaDescribedBy(internalDescription);
         await el.updateComplete;
 
         // opt-out of reorder
-        el.addToAriaLabelledBy(myInput, { reorder: false });
+        el.addToAriaLabelledBy(internalLabel, { reorder: false });
         await el.updateComplete;
-        el.addToAriaDescribedBy(myInput, { reorder: false });
+        el.addToAriaDescribedBy(internalDescription, { reorder: false });
         await el.updateComplete;
 
         expect(
           /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')).split(' '),
-        ).to.eql(['internalLabel', 'myInput']);
+        ).to.eql(['myInput', 'internalLabel']);
         expect(
           /** @type {string} */ (_inputNode.getAttribute('aria-describedby')).split(' '),
-        ).to.eql(['internalDescription', 'myInput']);
+        ).to.eql(['myInput', 'internalDescription']);
       });
 
       it('respects provided order for external elements', async () => {

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

@@ -163,20 +163,20 @@ export const runRegistrationSuite = customConfig => {
     });
 
     it('works for components that have a delayed render', async () => {
-      class PerformUpdate extends FormRegistrarMixin(LitElement) {
-        async performUpdate() {
+      class ScheduleUpdate extends FormRegistrarMixin(LitElement) {
+        async scheduleUpdate() {
           // eslint-disable-next-line no-promise-executor-return
           await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
-          await super.performUpdate();
+          await super.scheduleUpdate();
         }
 
         render() {
           return html`<slot></slot>`;
         }
       }
-      const tagWrapperString = defineCE(PerformUpdate);
+      const tagWrapperString = defineCE(ScheduleUpdate);
       const tagWrapper = unsafeStatic(tagWrapperString);
-      const el = /** @type {PerformUpdate} */ (
+      const el = /** @type {ScheduleUpdate} */ (
         await fixture(html`
         <${tagWrapper}>
           <${childTag}></${childTag}>
@@ -359,10 +359,10 @@ export const runRegistrationSuite = customConfig => {
       it('works for portals that have a delayed render', async () => {
         const delayedPortalString = defineCE(
           class extends FormRegistrarPortalMixin(LitElement) {
-            async performUpdate() {
+            async scheduleUpdate() {
               // eslint-disable-next-line no-promise-executor-return
               await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
-              await super.performUpdate();
+              await super.scheduleUpdate();
             }
 
             render() {

package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
-import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { LionInput } from '@lion/ui/input.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
@@ -63,41 +62,6 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
         'custom[]': ['custom 1', ''],
       });
     });
-
-    it('suffixes child labels with group label, just like in <fieldset>', async () => {
-      const el = /**  @type {FormGroup} */ (
-        await fixture(html`
-        <${tag} label="set">
-          <${childTag} name="A" label="fieldA"></${childTag}>
-          <${childTag} name="B" label="fieldB"></${childTag}>
-        </${tag}>
-      `)
-      );
-      const { _labelNode } = getFormControlMembers(el);
-
-      /**
-       * @param {LionInput} formControl
-       */
-      function getLabels(formControl) {
-        const control = getFormControlMembers(formControl);
-
-        return /** @type {string} */ (control._inputNode.getAttribute('aria-labelledby')).split(
-          ' ',
-        );
-      }
-      const field1 = el.formElements[0];
-      const field2 = el.formElements[1];
-
-      expect(getLabels(field1)).to.eql([field1._labelNode.id, _labelNode.id]);
-      expect(getLabels(field2)).to.eql([field2._labelNode.id, _labelNode.id]);
-
-      // Test the cleanup on disconnected
-      el.removeChild(field1);
-
-      // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
-      // await field1.updateComplete;
-      // expect(getLabels(field1)).to.eql([field1._labelNode.id]);
-    });
   });
 
   describe('Screen reader relations (aria-describedby) for child inputs and fieldsets', () => {
@@ -307,21 +271,10 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       await childAriaTest(await childAriaFixture('feedback'));
     });
 
-    it(`reads help-text message belonging to fieldset when child input is focused
-        (via aria-describedby)`, async () => {
-      await childAriaTest(await childAriaFixture('help-text'));
-    });
-
     // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
     it.skip(`cleans up feedback message belonging to fieldset on disconnect`, async () => {
       const el = await childAriaFixture('feedback');
       await childAriaTest(el, { cleanupPhase: true });
     });
-
-    // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
-    it.skip(`cleans up help-text message belonging to fieldset on disconnect`, async () => {
-      const el = await childAriaFixture('help-text');
-      await childAriaTest(el, { cleanupPhase: true });
-    });
   });
 }

package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -1356,6 +1356,24 @@ export function runFormGroupMixinSuite(cfg = {}) {
         expect(el.hasAttribute('aria-labelledby')).to.equal(true);
         expect(el.getAttribute('aria-labelledby')).contains(label.id);
       });
+
+      it('sets an aria-describedby to its children from element with slot="feedback"', async () => {
+        const el = /**  @type {FormGroup} */ (
+          await fixture(html`
+            <${tag}>
+              <label slot="label">My Label</label>
+              <div slot="feedback">My Feedback</div>
+              ${inputSlots}
+            </${tag}>
+          `)
+        );
+        const feedback = /** @type {HTMLElement} */ (
+          Array.from(el.children).find(child => child.slot === 'feedback')
+        );
+        expect(el.formElements[0]._inputNode.getAttribute('aria-describedby')).contains(
+          feedback.id,
+        );
+      });
     });
 
     describe('Dynamically rendered children', () => {
@@ -1395,7 +1413,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       const dynamicChildrenTag = unsafeStatic(dynamicChildrenTagString);
 
       it(`when rendering children right from the start, sets their values correctly
-      based on prefilled model/seriazedValue`, async () => {
+      based on prefilled model/serializedValue`, async () => {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
           <${dynamicChildrenTag}
@@ -1430,7 +1448,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       });
 
       it(`when rendering children delayed, sets their values
-      correctly based on prefilled model/seriazedValue`, async () => {
+      correctly based on prefilled model/serializedValue`, async () => {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
           <${dynamicChildrenTag} .modelValue="${{ firstName: 'foo', lastName: 'bar' }}">
@@ -1463,7 +1481,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       });
 
       it(`when rendering children partly delayed, sets their values correctly based on
-      prefilled model/seriazedValue`, async () => {
+      prefilled model/serializedValue`, async () => {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{

package/components/form-core/types/FormControlMixinTypes.ts

@@ -115,6 +115,8 @@ export declare class FormControlHost {
   set fieldName(arg: string);
   get fieldName(): string;
 
+  get operationMode(): string;
+
   /**
    * Allows to add extra element references to aria-labelledby attribute.
    */

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

@@ -17,6 +17,8 @@ export type FeedbackMessage = {
 
 export type ValidationType = 'error' | 'warning' | 'info' | 'success' | string;
 
+export type OperationMode = 'enter' | 'select' | 'upload';
+
 export declare class ValidateHost {
   /**
    * Used by Application Developers to add Validators to a FormControl.

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

@@ -2,7 +2,7 @@ import { FormControlHost } from '../../src/FormControlMixin.js';
 import { ValidationType } from './ValidateMixinTypes.js';
 
 /**
- * The name under which validation results get registered. For convience and predictability, this
+ * The name under which validation results get registered. For convenience and predictability, this
  * should always be the same as the constructor name (since it will be obfuscated in js builds,
  * we need to provide it separately).
  * @example
@@ -34,7 +34,7 @@ export type ValidatorConfig = {
 };
 
 /**
- * Output of the `execute` function that returns a validity outcome. When we need to shpw feedback,
+ * Output of the `execute` function that returns a validity outcome. When we need to show feedback,
  * it should return true, otherwise false. So when an error\info|warning|success message
  * needs to be shown, return true.
  * It's also possible to return an enum. Let's say that a phone number can have multiple

package/components/input-file/src/LionInputFile.js

@@ -215,6 +215,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  get operationMode() {
+    return 'upload';
+  }
+
   get _acceptCriteria() {
     /** @type {string[]} */
     let allowedFileTypes = [];
@@ -433,7 +438,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               ];
             }
           });
-          // this._selectedFilesMetaData = [...this._selectedFilesMetaData];
+          // TODO: add a unit test for this
+          this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
     }

package/components/input-range/src/LionInputRange.js

@@ -1,8 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { css, html } from 'lit';
+import { LocalizeMixin, formatNumber } from '@lion/ui/localize-no-side-effects.js';
 import { ScopedStylesController } from '@lion/ui/core.js';
 import { LionInput } from '@lion/ui/input.js';
-import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**
  * @typedef {import('lit').CSSResult} CSSResult
@@ -13,7 +14,7 @@ import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
  *
  * @customElement `lion-input-range`
  */
-export class LionInputRange extends LionInput {
+export class LionInputRange extends LocalizeMixin(LionInput) {
   /** @type {any} */
   static get properties() {
     return {
@@ -40,6 +41,11 @@ export class LionInputRange extends LionInput {
     };
   }
 
+  static localizeNamespaces = [
+    { 'lion-input-range': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
   /**
    * @param {CSSResult} scope
    */
@@ -54,6 +60,26 @@ export class LionInputRange extends LionInput {
     `;
   }
 
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        .sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
+      `,
+    ];
+  }
+
   get _inputNode() {
     return /** @type {HTMLInputElement} */ (super._inputNode);
   }
@@ -130,8 +156,14 @@ export class LionInputRange extends LionInput {
         ${!this.noMinMaxLabels
           ? html`
               <div class="input-range__limits">
-                <span>${formatNumber(this.min)}</span>
-                <span>${formatNumber(this.max)}</span>
+                <div>
+                  <span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span
+                  >${formatNumber(this.min)}
+                </div>
+                <div>
+                  <span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span
+                  >${formatNumber(this.max)}
+                </div>
               </div>
             `
           : ''}

package/components/input-range/src/localizeNamespaceLoader.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return import('@lion/ui/input-range-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/input-range-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/input-range-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/input-range-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/input-range-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/input-range-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/input-range-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/input-range-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/input-range-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/input-range-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/input-range-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/input-range-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/input-range-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/input-range-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/input-range-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/input-range-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/input-range-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/input-range-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/input-range-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/input-range-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/input-range-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/input-range-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/input-range-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/input-range-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/input-range-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/input-range-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/input-range-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/input-range-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/input-range-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/input-range-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/input-range-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/input-range-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/input-range-translations/zh.js');
+    default:
+      return import('@lion/ui/input-range-translations/en.js');
+  }
+};

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

@@ -35,14 +35,14 @@ describe('<lion-input-range>', () => {
     expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
     expect(
       /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
-      ).innerText,
-    ).to.equal(el.min.toString());
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[0]
+      ).textContent?.trim(),
+    ).to.equal(`Minimum ${el.min.toString()}`);
     expect(
       /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
-      ).innerText,
-    ).to.equal(el.max.toString());
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[1]
+      ).textContent?.trim(),
+    ).to.equal(`Maximum ${el.max.toString()}`);
   });
 
   it('update min and max attributes when min and max property change', async () => {