diff --git a/.changeset/pink-islands-return.md b/.changeset/pink-islands-return.md
new file mode 100644
index 000000000..0ba377457
--- /dev/null
+++ b/.changeset/pink-islands-return.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+[input-stepper] a11y enhancement & added translations
diff --git a/docs/components/input-stepper/overview.md b/docs/components/input-stepper/overview.md
index a6e7b6794..fe0cc2d0a 100644
--- a/docs/components/input-stepper/overview.md
+++ b/docs/components/input-stepper/overview.md
@@ -4,16 +4,16 @@ A web component that enables the user to increase and decrease a numeric value b
```js script
import { html } from '@mdjs/mdjs-preview';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input-stepper.js';
+loadDefaultFeedbackMessages();
```
-```js preview-story
-export const main = () => html`
-
-
-
Max. 5 guests
-
-`;
+```html preview-story
+
+
+
Max. 5 guests
+
```
## Features
diff --git a/docs/components/input-stepper/use-cases.md b/docs/components/input-stepper/use-cases.md
index fa739ad25..93a33862f 100644
--- a/docs/components/input-stepper/use-cases.md
+++ b/docs/components/input-stepper/use-cases.md
@@ -2,40 +2,49 @@
```js script
import { html } from '@mdjs/mdjs-preview';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input-stepper.js';
+loadDefaultFeedbackMessages();
```
-## Default with no specification
+## Default
When no range or step is defined, it can go infinite with default step value as `1`. You can also specify prefix content using `after` slot.
-```js preview-story
-export const defaultMode = () => html`
-
-
-
In Billion Years
-
-`;
+```html preview-story
+
+
+
In Billion Years
+
```
-## Step and Value
+## Attributes & Properties
+
+### Step and Value
Use `step` attribute to specify the incrementor or decrementor difference and `value` to set the default value.
-```js preview-story
-export const steps = () => html`
-
Min: 100, Value: 200, Step: 100
-
-`;
+```html preview-story
+
```
-## Range
+### Range
-Use `min` and `max` attribute to specify range.
+Use `min` and `max` attribute to specify a range.
-```js preview-story
-export const range = () => html`
-
Min: 200, Max: 500, Step: 100
-
-`;
+```html preview-story
+
```
diff --git a/packages/ui/components/input-stepper/src/LionInputStepper.js b/packages/ui/components/input-stepper/src/LionInputStepper.js
index 2e43a9408..26dc563cd 100644
--- a/packages/ui/components/input-stepper/src/LionInputStepper.js
+++ b/packages/ui/components/input-stepper/src/LionInputStepper.js
@@ -1,6 +1,8 @@
import { html, css, render } from 'lit';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
import { LionInput } from '@lion/ui/input.js';
import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
/**
* @typedef {import('lit').RenderOptions} RenderOptions
@@ -11,7 +13,7 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
*
* @customElement lion-input-stepper
*/
-export class LionInputStepper extends LionInput {
+export class LionInputStepper extends LocalizeMixin(LionInput) {
static get styles() {
return [
...super.styles,
@@ -41,6 +43,11 @@ export class LionInputStepper extends LionInput {
};
}
+ static localizeNamespaces = [
+ { 'lion-input-stepper': localizeNamespaceLoader },
+ ...super.localizeNamespaces,
+ ];
+
/**
* @returns {number}
*/
@@ -82,9 +89,7 @@ export class LionInputStepper extends LionInput {
this.addEventListener('keydown', this.__keyDownHandler);
this._inputNode.setAttribute('inputmode', 'decimal');
this._inputNode.setAttribute('autocomplete', 'off');
- this.setAttribute('aria-label', this.label);
- this.step = this.hasAttribute('step') ? this.step : 1;
- this.__setAriaLabelsAndValidator();
+ this.__setDefaultValidators();
this.__toggleSpinnerButtonsState();
}
@@ -117,6 +122,14 @@ export class LionInputStepper extends LionInput {
this._inputNode.step = `${this.step}`;
this.values.step = this.step;
}
+
+ if (changedProperties.has('_ariaLabelledNodes')) {
+ this.__reflectAriaAttrToSpinButton('aria-labelledby', this._ariaLabelledNodes);
+ }
+
+ if (changedProperties.has('_ariaDescribedNodes')) {
+ this.__reflectAriaAttrToSpinButton('aria-describedby', this._ariaDescribedNodes);
+ }
}
get slots() {
@@ -127,42 +140,48 @@ export class LionInputStepper extends LionInput {
};
}
+ /**
+ * Based on FormControlMixin __reflectAriaAttr()
+ *
+ * Will handle help text, validation feedback and character counter,
+ * prefix/suffix/before/after (if they contain data-description flag attr).
+ * Also, contents of id references that will be put in the ._ariaDescribedby property
+ * from an external context, will be read by a screen reader.
+ * @param {string} attrName
+ * @param {Element[]} nodes
+ * @private
+ */
+ __reflectAriaAttrToSpinButton(attrName, nodes) {
+ const string = nodes.map(n => n.id).join(' ');
+ this.setAttribute(attrName, string);
+ }
+
/**
* Set aria labels and apply validators
* @private
*/
- __setAriaLabelsAndValidator() {
- const ariaAttributes = {
- 'aria-valuemax': this.values.max,
- 'aria-valuemin': this.values.min,
- };
-
- const minMaxValidators = /** @type {(MaxNumber | MinNumber)[]} */ (
- Object.entries(ariaAttributes)
- .map(([key, val]) => {
- if (val !== Infinity) {
- this.setAttribute(key, `${val}`);
- return key === 'aria-valuemax' ? new MaxNumber(val) : new MinNumber(val);
- }
- return null;
- })
- .filter(validator => validator !== null)
+ __setDefaultValidators() {
+ const validators = /** @type {(IsNumber| MaxNumber | MinNumber)[]} */ (
+ [
+ new IsNumber(),
+ this.min !== Infinity ? new MinNumber(this.min) : null,
+ this.max !== Infinity ? new MaxNumber(this.max) : null,
+ ].filter(validator => validator !== null)
);
- const validators = [new IsNumber(), ...minMaxValidators];
this.defaultValidators.push(...validators);
}
/**
* Update values on keyboard arrow up and down event
- * @param {KeyboardEvent} e - keyboard event
+ * @param {KeyboardEvent} ev - keyboard event
* @private
*/
- __keyDownHandler(e) {
- if (e.key === 'ArrowUp') {
+ __keyDownHandler(ev) {
+ if (ev.key === 'ArrowUp') {
this.__increment();
}
- if (e.key === 'ArrowDown') {
+ if (ev.key === 'ArrowDown') {
this.__decrement();
}
}
@@ -177,6 +196,9 @@ export class LionInputStepper extends LionInput {
const incrementButton = this.__getSlot('suffix');
const disableIncrementor = this.currentValue >= max && max !== Infinity;
const disableDecrementor = this.currentValue <= min && min !== Infinity;
+ if (disableDecrementor || disableIncrementor) {
+ this._inputNode.focus();
+ }
decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
this.setAttribute('aria-valuenow', `${this.currentValue}`);
@@ -201,10 +223,10 @@ export class LionInputStepper extends LionInput {
* @private
*/
__increment() {
- const { step, max } = this.values;
+ const { step, min, max } = this.values;
const newValue = this.currentValue + step;
if (newValue <= max || max === Infinity) {
- this.value = `${newValue}`;
+ this.value = newValue < min && min !== Infinity ? `${min}` : `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
@@ -215,10 +237,10 @@ export class LionInputStepper extends LionInput {
* @private
*/
__decrement() {
- const { step, min } = this.values;
+ const { step, min, max } = this.values;
const newValue = this.currentValue - step;
if (newValue >= min || min === Infinity) {
- this.value = `${newValue}`;
+ this.value = newValue > max && max !== Infinity ? `${max}` : `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
@@ -301,9 +323,8 @@ export class LionInputStepper extends LionInput {
?disabled=${this.disabled || this.readOnly}
@click=${this.__decrement}
@blur=${this.__boundOnLeaveButton}
- tabindex="-1"
type="button"
- aria-label="decrement"
+ aria-label="${this.msgLit('lion-input-stepper:decrease')}"
>
${this._decrementorSignTemplate()}
@@ -321,9 +342,8 @@ export class LionInputStepper extends LionInput {
?disabled=${this.disabled || this.readOnly}
@click=${this.__increment}
@blur=${this.__boundOnLeaveButton}
- tabindex="-1"
type="button"
- aria-label="increment"
+ aria-label="${this.msgLit('lion-input-stepper:increase')}"
>
${this._incrementorSignTemplate()}
diff --git a/packages/ui/components/input-stepper/src/localizeNamespaceLoader.js b/packages/ui/components/input-stepper/src/localizeNamespaceLoader.js
new file mode 100644
index 000000000..a13295a7a
--- /dev/null
+++ b/packages/ui/components/input-stepper/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-stepper-translations/bg-BG.js');
+ case 'bg':
+ return import('@lion/ui/input-stepper-translations/bg.js');
+ case 'cs-CZ':
+ return import('@lion/ui/input-stepper-translations/cs-CZ.js');
+ case 'cs':
+ return import('@lion/ui/input-stepper-translations/cs.js');
+ case 'de-DE':
+ return import('@lion/ui/input-stepper-translations/de-DE.js');
+ case 'de':
+ return import('@lion/ui/input-stepper-translations/de.js');
+ case 'en-AU':
+ return import('@lion/ui/input-stepper-translations/en-AU.js');
+ case 'en-GB':
+ return import('@lion/ui/input-stepper-translations/en-GB.js');
+ case 'en-US':
+ return import('@lion/ui/input-stepper-translations/en-US.js');
+ case 'en-PH':
+ case 'en':
+ return import('@lion/ui/input-stepper-translations/en.js');
+ case 'es-ES':
+ return import('@lion/ui/input-stepper-translations/es-ES.js');
+ case 'es':
+ return import('@lion/ui/input-stepper-translations/es.js');
+ case 'fr-FR':
+ return import('@lion/ui/input-stepper-translations/fr-FR.js');
+ case 'fr-BE':
+ return import('@lion/ui/input-stepper-translations/fr-BE.js');
+ case 'fr':
+ return import('@lion/ui/input-stepper-translations/fr.js');
+ case 'hu-HU':
+ return import('@lion/ui/input-stepper-translations/hu-HU.js');
+ case 'hu':
+ return import('@lion/ui/input-stepper-translations/hu.js');
+ case 'it-IT':
+ return import('@lion/ui/input-stepper-translations/it-IT.js');
+ case 'it':
+ return import('@lion/ui/input-stepper-translations/it.js');
+ case 'nl-BE':
+ return import('@lion/ui/input-stepper-translations/nl-BE.js');
+ case 'nl-NL':
+ return import('@lion/ui/input-stepper-translations/nl-NL.js');
+ case 'nl':
+ return import('@lion/ui/input-stepper-translations/nl.js');
+ case 'pl-PL':
+ return import('@lion/ui/input-stepper-translations/pl-PL.js');
+ case 'pl':
+ return import('@lion/ui/input-stepper-translations/pl.js');
+ case 'ro-RO':
+ return import('@lion/ui/input-stepper-translations/ro-RO.js');
+ case 'ro':
+ return import('@lion/ui/input-stepper-translations/ro.js');
+ case 'ru-RU':
+ return import('@lion/ui/input-stepper-translations/ru-RU.js');
+ case 'ru':
+ return import('@lion/ui/input-stepper-translations/ru.js');
+ case 'sk-SK':
+ return import('@lion/ui/input-stepper-translations/sk-SK.js');
+ case 'sk':
+ return import('@lion/ui/input-stepper-translations/sk.js');
+ case 'uk-UA':
+ return import('@lion/ui/input-stepper-translations/uk-UA.js');
+ case 'uk':
+ return import('@lion/ui/input-stepper-translations/uk.js');
+ case 'zh-CN':
+ case 'zh':
+ return import('@lion/ui/input-stepper-translations/zh.js');
+ default:
+ return import('@lion/ui/input-stepper-translations/en.js');
+ }
+};
diff --git a/packages/ui/components/input-stepper/test/lion-input-stepper.test.js b/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
index ff4827453..26406b6e0 100644
--- a/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
+++ b/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
@@ -12,7 +12,11 @@ const fixture = /** @type {(arg: TemplateResult|string) => Promise
`;
-const inputStepperWithAttrs = html``;
+const inputStepperWithAttrs = html``;
describe('', () => {
describe('Stepper', () => {
@@ -20,9 +24,64 @@ describe('', () => {
const el = await fixture(defaultInputStepper);
expect(el._inputNode.type).to.equal('text');
});
+
+ it('has a default min and max of Infinity', async () => {
+ const el = await fixture(defaultInputStepper);
+ expect(el.getAttribute('min')).to.equal('Infinity');
+ expect(el.getAttribute('max')).to.equal('Infinity');
+ });
+
+ it('has a default step of 1', async () => {
+ const el = await fixture(defaultInputStepper);
+ expect(el.getAttribute('step')).to.equal('1');
+ });
+
+ it('can set a step with which the value increases', async () => {
+ const el = await fixture(defaultInputStepper);
+ el.step = 10;
+ await el.updateComplete;
+ expect(el.value).to.equal('');
+ expect(el.getAttribute('step')).to.equal('10');
+
+ const incrementButton = el.querySelector('[slot=suffix]');
+ incrementButton?.dispatchEvent(new Event('click'));
+ expect(el.value).to.equal('10');
+ });
});
describe('User interaction', () => {
+ it('should increment the value to 1 on [ArrowUp]', async () => {
+ const el = await fixture(defaultInputStepper);
+ expect(el.value).to.equal('');
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+ await el.updateComplete;
+ expect(el.value).to.equal('1');
+ });
+
+ it('should increment the value to minValue on [ArrowUp] if value is below min', async () => {
+ const el = await fixture(inputStepperWithAttrs);
+ expect(el.value).to.equal('');
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+ await el.updateComplete;
+ expect(el.value).to.equal('100');
+ });
+
+ it('should decrement the value to -1 on [ArrowDown]', async () => {
+ const el = await fixture(defaultInputStepper);
+ expect(el.value).to.equal('');
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+ await el.updateComplete;
+ expect(el.value).to.equal('-1');
+ });
+
+ it('should increment the value to minValue on [ArrowDown] if value is below min', async () => {
+ const el = await fixture(inputStepperWithAttrs);
+ el.modelValue = 600;
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+ await el.updateComplete;
+ expect(el.value).to.equal('200');
+ });
+
it('should increment the value to 1 on + button click', async () => {
const el = await fixture(defaultInputStepper);
expect(el.value).to.equal('');
@@ -174,14 +233,8 @@ describe('', () => {
await expect(el).to.be.accessible();
});
- it('adds aria-valuemax and aria-valuemin when min and max are provided', async () => {
- const el = await fixture(inputStepperWithAttrs);
- expect(el).to.have.attribute('aria-valuemax', '200');
- expect(el).to.have.attribute('aria-valuemin', '100');
- });
-
it('updates aria-valuenow when stepper is changed', async () => {
- const el = await fixture(inputStepperWithAttrs);
+ const el = await fixture(defaultInputStepper);
const incrementButton = el.querySelector('[slot=suffix]');
incrementButton?.dispatchEvent(new Event('click'));
expect(el).to.have.attribute('aria-valuenow', '1');
diff --git a/packages/ui/components/input-stepper/translations/bg-BG.js b/packages/ui/components/input-stepper/translations/bg-BG.js
new file mode 100644
index 000000000..00f5e5f61
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/bg-BG.js
@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+ ...bg,
+};
diff --git a/packages/ui/components/input-stepper/translations/bg.js b/packages/ui/components/input-stepper/translations/bg.js
new file mode 100644
index 000000000..c6cef973a
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/bg.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Намаляване',
+ increase: 'Увеличаване',
+};
diff --git a/packages/ui/components/input-stepper/translations/cs-CZ.js b/packages/ui/components/input-stepper/translations/cs-CZ.js
new file mode 100644
index 000000000..2cac51aa8
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/cs-CZ.js
@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+ ...cs,
+};
diff --git a/packages/ui/components/input-stepper/translations/cs.js b/packages/ui/components/input-stepper/translations/cs.js
new file mode 100644
index 000000000..5628a6b04
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/cs.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Snížit',
+ increase: 'Zvýšit',
+};
diff --git a/packages/ui/components/input-stepper/translations/de-DE.js b/packages/ui/components/input-stepper/translations/de-DE.js
new file mode 100644
index 000000000..8e3fb7c86
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/de-DE.js
@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+ ...de,
+};
diff --git a/packages/ui/components/input-stepper/translations/de.js b/packages/ui/components/input-stepper/translations/de.js
new file mode 100644
index 000000000..f9d81466f
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/de.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Verringern',
+ increase: 'Erhöhen',
+};
diff --git a/packages/ui/components/input-stepper/translations/en-AU.js b/packages/ui/components/input-stepper/translations/en-AU.js
new file mode 100644
index 000000000..e164dab30
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/en-AU.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-stepper/translations/en-GB.js b/packages/ui/components/input-stepper/translations/en-GB.js
new file mode 100644
index 000000000..e164dab30
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/en-GB.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-stepper/translations/en-US.js b/packages/ui/components/input-stepper/translations/en-US.js
new file mode 100644
index 000000000..e164dab30
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/en-US.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-stepper/translations/en.js b/packages/ui/components/input-stepper/translations/en.js
new file mode 100644
index 000000000..9fe7a8e9b
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/en.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Decrease',
+ increase: 'Increase',
+};
diff --git a/packages/ui/components/input-stepper/translations/es-ES.js b/packages/ui/components/input-stepper/translations/es-ES.js
new file mode 100644
index 000000000..94a009944
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/es-ES.js
@@ -0,0 +1,5 @@
+import es from './es.js';
+
+export default {
+ ...es,
+};
diff --git a/packages/ui/components/input-stepper/translations/es.js b/packages/ui/components/input-stepper/translations/es.js
new file mode 100644
index 000000000..b7fe8ab49
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/es.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Disminuir',
+ increase: 'Aumentar',
+};
diff --git a/packages/ui/components/input-stepper/translations/fr-BE.js b/packages/ui/components/input-stepper/translations/fr-BE.js
new file mode 100644
index 000000000..da02615de
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/fr-BE.js
@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+ ...fr,
+};
diff --git a/packages/ui/components/input-stepper/translations/fr-FR.js b/packages/ui/components/input-stepper/translations/fr-FR.js
new file mode 100644
index 000000000..da02615de
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/fr-FR.js
@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+ ...fr,
+};
diff --git a/packages/ui/components/input-stepper/translations/fr.js b/packages/ui/components/input-stepper/translations/fr.js
new file mode 100644
index 000000000..b13da1d40
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/fr.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Diminuer',
+ increase: 'Augmenter',
+};
diff --git a/packages/ui/components/input-stepper/translations/hu-HU.js b/packages/ui/components/input-stepper/translations/hu-HU.js
new file mode 100644
index 000000000..130ba8f66
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/hu-HU.js
@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+ ...hu,
+};
diff --git a/packages/ui/components/input-stepper/translations/hu.js b/packages/ui/components/input-stepper/translations/hu.js
new file mode 100644
index 000000000..7ba791307
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/hu.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Csökkentés',
+ increase: 'Növelés',
+};
diff --git a/packages/ui/components/input-stepper/translations/it-IT.js b/packages/ui/components/input-stepper/translations/it-IT.js
new file mode 100644
index 000000000..397b5a03b
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/it-IT.js
@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+ ...it,
+};
diff --git a/packages/ui/components/input-stepper/translations/it.js b/packages/ui/components/input-stepper/translations/it.js
new file mode 100644
index 000000000..70f424708
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/it.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Diminuisci',
+ increase: 'Aumenta',
+};
diff --git a/packages/ui/components/input-stepper/translations/nl-BE.js b/packages/ui/components/input-stepper/translations/nl-BE.js
new file mode 100644
index 000000000..93467cea6
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/nl-BE.js
@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+ ...nl,
+};
diff --git a/packages/ui/components/input-stepper/translations/nl-NL.js b/packages/ui/components/input-stepper/translations/nl-NL.js
new file mode 100644
index 000000000..93467cea6
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/nl-NL.js
@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+ ...nl,
+};
diff --git a/packages/ui/components/input-stepper/translations/nl.js b/packages/ui/components/input-stepper/translations/nl.js
new file mode 100644
index 000000000..74f8c32d0
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/nl.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Verlagen',
+ increase: 'Verhogen',
+};
diff --git a/packages/ui/components/input-stepper/translations/pl-PL.js b/packages/ui/components/input-stepper/translations/pl-PL.js
new file mode 100644
index 000000000..cb0d0b8b6
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/pl-PL.js
@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+ ...pl,
+};
diff --git a/packages/ui/components/input-stepper/translations/pl.js b/packages/ui/components/input-stepper/translations/pl.js
new file mode 100644
index 000000000..2677d7c4a
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/pl.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Zmniejsz',
+ increase: 'Zwiększ',
+};
diff --git a/packages/ui/components/input-stepper/translations/ro-RO.js b/packages/ui/components/input-stepper/translations/ro-RO.js
new file mode 100644
index 000000000..8acc92b29
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/ro-RO.js
@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+ ...ro,
+};
diff --git a/packages/ui/components/input-stepper/translations/ro.js b/packages/ui/components/input-stepper/translations/ro.js
new file mode 100644
index 000000000..fd21f06a4
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/ro.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Scădere',
+ increase: 'Creștere',
+};
diff --git a/packages/ui/components/input-stepper/translations/ru-RU.js b/packages/ui/components/input-stepper/translations/ru-RU.js
new file mode 100644
index 000000000..e5f8f2aa1
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/ru-RU.js
@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+ ...ru,
+};
diff --git a/packages/ui/components/input-stepper/translations/ru.js b/packages/ui/components/input-stepper/translations/ru.js
new file mode 100644
index 000000000..cbf6c8d1f
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/ru.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Уменьшить',
+ increase: 'Увеличить',
+};
diff --git a/packages/ui/components/input-stepper/translations/sk-SK.js b/packages/ui/components/input-stepper/translations/sk-SK.js
new file mode 100644
index 000000000..3000b323f
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/sk-SK.js
@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+ ...sk,
+};
diff --git a/packages/ui/components/input-stepper/translations/sk.js b/packages/ui/components/input-stepper/translations/sk.js
new file mode 100644
index 000000000..b956e70a0
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/sk.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Znížiť',
+ increase: 'Zvýšiť',
+};
diff --git a/packages/ui/components/input-stepper/translations/uk-UA.js b/packages/ui/components/input-stepper/translations/uk-UA.js
new file mode 100644
index 000000000..e255cc021
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/uk-UA.js
@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+ ...uk,
+};
diff --git a/packages/ui/components/input-stepper/translations/uk.js b/packages/ui/components/input-stepper/translations/uk.js
new file mode 100644
index 000000000..f8b11f903
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/uk.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: 'Зменшити',
+ increase: 'Збільшити',
+};
diff --git a/packages/ui/components/input-stepper/translations/zh.js b/packages/ui/components/input-stepper/translations/zh.js
new file mode 100644
index 000000000..b5fec37de
--- /dev/null
+++ b/packages/ui/components/input-stepper/translations/zh.js
@@ -0,0 +1,4 @@
+export default {
+ decrease: '减少',
+ increase: '增加',
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3b6693be2..9602ec58a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,6 +24,7 @@
"./input-file-translations/*": "./components/input-file/translations/*",
"./input-iban-translations/*": "./components/input-iban/translations/*",
"./input-range-translations/*": "./components/input-range/translations/*",
+ "./input-stepper-translations/*": "./components/input-stepper/translations/*",
"./input-tel-translations/*": "./components/input-tel/translations/*",
"./overlays-translations/*": "./components/overlays/translations/*",
"./validate-messages-translations/*": "./components/validate-messages/translations/*",