@lion/ui 0.5.3 → 0.5.4

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/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/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,
+};

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

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

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

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

package/components/input-range/translations/es-ES.js

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Mínimo',
+  maximum: 'Máximo',
+};

package/components/input-range/translations/fr-BE.js

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

package/components/input-range/translations/fr-FR.js

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

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

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

package/components/input-range/translations/hu-HU.js

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

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

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

package/components/input-range/translations/it-IT.js

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

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

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

package/components/input-range/translations/nl-BE.js

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

package/components/input-range/translations/nl-NL.js

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