@lion/ui 0.6.0-alpha.2 → 0.6.0-alpha.3

package/components/form/src/LionForm.js

@@ -1,5 +1,9 @@
 import { LionFieldset } from '@lion/ui/fieldset.js';
 
+/**
+ * @typedef {import('../../form-core/types/registration/FormRegistrarMixinTypes.js').FormRegistrarHost} FormRegistrarHost
+ */
+
 const throwFormNodeError = () => {
   throw new Error(
     'No form node found. Did you put a <form> element inside your custom-form element?',
@@ -57,6 +61,10 @@ export class LionForm extends LionFieldset {
     ev.stopPropagation();
     this.submitGroup();
     this.dispatchEvent(new Event('submit', { bubbles: true }));
+
+    if (this.hasFeedbackFor?.includes('error')) {
+      this._setFocusOnFirstErroneousFormElement(this);
+    }
   }
 
   reset() {
@@ -78,6 +86,22 @@ export class LionForm extends LionFieldset {
     this.dispatchEvent(new Event('reset', { bubbles: true }));
   }
 
+  /**
+   * @param {FormRegistrarHost} element
+   * @protected
+   */
+  _setFocusOnFirstErroneousFormElement(element) {
+    const firstFormElWithError =
+      element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
+      element.formElements[0];
+
+    if (firstFormElWithError.formElements?.length > 0) {
+      this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
+    } else {
+      firstFormElWithError._focusableNode.focus();
+    }
+  }
+
   /** @private */
   __registerEventsForLionForm() {
     this._formNode.addEventListener('submit', this._submit);

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

@@ -1,6 +1,6 @@
 import { LionFieldset } from '@lion/ui/fieldset.js';
 import '@lion/ui/define/lion-fieldset.js';
-import { LionField } from '@lion/ui/form-core.js';
+import { LionField, Required } from '@lion/ui/form-core.js';
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
 
@@ -191,7 +191,7 @@ describe('<lion-form>', () => {
     const el = await fixture(html`
       <lion-form>
         <form>
-          <button type="reset">submit</button>
+          <button type="reset">reset</button>
         </form>
       </lion-form>
     `);
@@ -202,4 +202,68 @@ describe('<lion-form>', () => {
     expect(dispatchSpy.args[0][0].type).to.equal('reset');
     expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
   });
+
+  it('sets focus on submit to the first erroneous form element', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
+      new Required(),
+    ]}></${childTag}>
+          <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    button.click();
+    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    // @ts-ignore [allow-protected] in test
+    expect(document.activeElement).to.equal(el.formElements[1]._inputNode);
+  });
+
+  it('sets focus on submit to the first erroneous form element with a fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="name">
+            <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
+      new Required(),
+    ]}></${childTag}>
+            <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
+          </lion-fieldset>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    button.click();
+    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    const fieldset = el.formElements[0];
+    // @ts-ignore [allow-protected] in test
+    expect(document.activeElement).to.equal(fieldset.formElements[1]._inputNode);
+  });
+
+  it('sets focus on submit to the first form element within a erroneous fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="name" .validators=${[new Required()]}>
+            <${childTag} name="firstName"></${childTag}>
+            <${childTag} name="lastName"></${childTag}>
+          </lion-fieldset>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    button.click();
+    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    const fieldset = el.formElements[0];
+    // @ts-ignore [allow-protected] in test
+    expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
+  });
 });

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/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/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/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/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 () => {

package/components/input-range/translations/bg-BG.js

@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+  ...bg,
+};

package/components/input-range/translations/bg.js

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Минимум',
+  maximum: 'Максимум',
+};

package/components/input-range/translations/cs-CZ.js

@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+  ...cs,
+};

package/components/input-range/translations/cs.js

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimální',
+  maximum: 'Maximálně',
+};

package/components/input-range/translations/de-DE.js

@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+  ...de,
+};

package/components/input-range/translations/de.js

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maximum',
+};

package/components/input-range/translations/en-AU.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/input-range/translations/en-GB.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/input-range/translations/en-PH.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};