@brightspace-ui/labs 2.5.0 → 2.6.0

package/package.json

@@ -15,6 +15,8 @@
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
     "./components/view-toggle.js": "./src/components/view-toggle/view-toggle.js",
+    "./components/wizard.js": "./src/components/wizard/wizard.js",
+    "./components/wizard-step.js": "./src/components/wizard/step.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
@@ -54,5 +56,5 @@
     "@brightspace-ui/core": "^3",
     "lit": "^3"
   },
-  "version": "2.5.0"
+  "version": "2.6.0"
 }

package/src/components/view-toggle/README.md

@@ -6,7 +6,7 @@ A Lit element component for toggling between views.
 
 ```html
 <script type="module">
-    import '@brightspace-ui-labs/view-toggle/view-toggle.js';
+    import '@brightspace-ui/labs/components/view-toggle.js';
 </script>
 <d2l-labs-view-toggle
         toggle-options='[{"text":"Bananas","val":"overall"},{"text":"Minions","val":"minios"},{"text":"Pyjamas","val":"subject"}]'

package/src/components/wizard/README.md

@@ -0,0 +1,49 @@
+# Wizard
+
+The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/wizard.js';
+	import '@brightspace-ui/labs/components/wizard-step.js';
+</script>
+<d2l-labs-wizard id="wizard">
+	<d2l-labs-wizard-step step-title="Step 1">
+		<p> First step </p>
+	</d2l-labs-wizard-step>
+
+	<d2l-labs-wizard-step step-title="Step 2">
+		<p> Second step </p>
+	</d2l-labs-wizard-step>
+</d2l-labs-wizard>
+<script>
+	var wizard = document.getElementById('wizard');
+	wizard.addEventListener('stepper-next', function() {
+		wizard.next();
+	});
+	wizard.addEventListener('stepper-restart', function() {
+		wizard.restart();
+	});
+</script>
+```
+
+
+### Properties:
+
+| Properties | Type | Description |
+|--|--|--|
+| `step-title` | String | Text displayed in the wizard step |
+| `restart-button-title` | String | Text that is displayed within the button |
+| `restart-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `hide-restart-button` | Boolean | Hide the Restart button |
+| `next-button-title` | String | Text that is displayed within the button |
+| `next-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `disable-next-button` | Boolean | Disable the Next button |
+| `hide-next-button` | Boolean | Hide the Next button |
+
+### Events:
+- `stepper-next`: dispatched when the Next button is clicked
+- `stepper-restart`: dispatched when the Restart button is clicked
+

package/src/components/wizard/single-step-header.js

@@ -0,0 +1,187 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { bodySmallStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class D2LSingleStepHeader extends LocalizeLabsElement(LitElement) {
+
+	static get properties() {
+		return {
+			stepTitle: {
+				type: String,
+				attribute: 'step-title'
+			},
+			totalSteps: {
+				type: Number,
+				attribute: 'total-steps'
+			},
+			currentStep: {
+				type: Number,
+				attribute: 'current-step'
+			},
+			selectedStep: {
+				type: Number,
+				attribute: 'selected-step'
+			},
+			fillHeaderWidth: {
+				type: Boolean,
+				attribute: 'fill-header-width',
+				reflect: true
+			}
+		};
+	}
+
+	static get styles() {
+		return [bodySmallStyles, css`
+			.d2l-labs-single-step-header-circle {
+				border: 2px solid;
+				border-radius: 50%;
+				height: 26px;
+				width: 26px;
+			}
+
+			.d2l-labs-single-step-header-inner-progress-circle {
+				background-color: var(--d2l-color-celestine);
+				border-radius: 50%;
+				height: 22px;
+				margin: 2px;
+				width: 22px;
+			}
+
+			.d2l-labs-single-step-header-step {
+				display: inline-block;
+				text-align: center;
+			}
+
+			hr {
+				height: 4px;
+				margin: auto;
+				width: 60px;
+			}
+
+			.d2l-labs-single-step-header-step-header {
+				display: flex;
+			}
+
+			.d2l-labs-single-step-header-step-title {
+				background: none !important;
+				border: none !important;
+				color: var(--d2l-color-ferrite);
+				margin: auto;
+				max-width: 120px;
+				overflow-wrap: break-word;
+			}
+
+			:host([fill-header-width]) .d2l-labs-single-step-header-step-title {
+				max-width: 150px;
+			}
+
+			.d2l-labs-single-step-header-done-icon {
+				color: var(--d2l-color-olivine);
+				height: 20px;
+				padding: 2px;
+				width: 20px;
+			}
+
+			.d2l-labs-single-step-header-done {
+				border-color: var(--d2l-color-olivine);
+				color: var(--d2l-color-olivine);
+			}
+
+			.d2l-labs-single-step-header-done hr,
+			.d2l-labs-single-step-header-in-progress hr:first-child {
+				background: var(--d2l-color-olivine);
+				border: var(--d2l-color-olivine);
+			}
+
+			.d2l-labs-single-step-header-in-progress {
+				border-color: var(--d2l-color-celestine);
+				color: var(--d2l-color-celestine);
+			}
+
+			.d2l-labs-single-step-header-not-started .d2l-labs-single-step-header-circle {
+				background-color: var(--d2l-color-mica);
+				border-color: var(--d2l-color-mica);
+			}
+
+			.d2l-labs-single-step-header-in-progress hr:last-child,
+			.d2l-labs-single-step-header-not-started hr {
+				background: var(--d2l-color-mica);
+				border: var(--d2l-color-mica);
+			}
+
+			.d2l-labs-single-step-header-first hr:first-child,
+			.d2l-labs-single-step-header-last hr:last-child {
+				visibility: hidden;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this.stepTitle = '';
+		this.totalSteps = 0;
+		this.currentStep = 0;
+		this.selectedStep = 0;
+		this.fillHeaderWidth = false;
+	}
+
+	render() {
+		return html`
+			<div class="${this._getIsFirst()} ${this._getIsLast()}">
+				<div class="d2l-labs-single-step-header-step">
+					<div class="${this._getProgressStatus()} d2l-labs-single-step-header-step-header">
+						<hr>
+
+						<div class="d2l-labs-single-step-header-circle" title="${this._getStepLabel()}">
+							${this._isDone() ? html`<d2l-icon class="d2l-labs-single-step-header-done-icon" icon="d2l-tier1:check"></d2l-icon>` : nothing}
+							${this._isInProgress() ? html`<div class="d2l-labs-single-step-header-inner-progress-circle"></div>` : nothing}
+						</div>
+
+						<hr>
+					</div>
+					<div class="${this._getProgressStatus()} d2l-labs-single-step-header-step-title d2l-body-small">${this.stepTitle}</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_getIsFirst() {
+		if (this.currentStep === 0) {
+			return 'd2l-labs-single-step-header-first';
+		}
+		return '';
+	}
+
+	_getIsLast() {
+		if (this.totalSteps === this.currentStep + 1) {
+			return 'd2l-labs-single-step-header-last';
+		}
+		return '';
+	}
+
+	_getProgressStatus() {
+		let className = 'd2l-labs-single-step-header-not-started';
+		if (this._isDone()) {
+			className = 'd2l-labs-single-step-header-done';
+		} else if (this._isInProgress()) {
+			className = 'd2l-labs-single-step-header-in-progress';
+		}
+		return className;
+	}
+
+	_getStepLabel() {
+		return this.localize('components:wizard:aria.steplabel', 'totalSteps', this.totalSteps, 'currentStep', this.currentStep + 1);
+	}
+
+	_isDone() {
+		return this.currentStep < this.selectedStep;
+	}
+
+	_isInProgress() {
+		return this.currentStep === this.selectedStep;
+	}
+
+}
+
+customElements.define('d2l-labs-single-step-header', D2LSingleStepHeader);

package/src/components/wizard/step.js

@@ -0,0 +1,147 @@
+import '@brightspace-ui/core/components/button/button.js';
+import { css, html, LitElement } from 'lit';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
+
+class D2LStep extends LocalizeLabsElement(LitElement) {
+	static get properties() {
+		return {
+			nextButtonTitle: {
+				type: String,
+				attribute: 'next-button-title'
+			},
+			nextButtonTooltip: {
+				type: String,
+				attribute: 'next-button-tooltip'
+			},
+			restartButtonTitle: {
+				type: String,
+				attribute: 'restart-button-title'
+			},
+			restartButtonTooltip: {
+				type: String,
+				attribute: 'restart-button-tooltip'
+			},
+			hideRestartButton: {
+				type: Boolean,
+				attribute: 'hide-restart-button'
+			},
+			hideNextButton: {
+				type: Boolean,
+				attribute: 'hide-next-button'
+			},
+			disableNextButton: {
+				type: Boolean,
+				attribute: 'disable-next-button'
+			},
+			nextButtonAriaLabel: {
+				type: String,
+				attribute: 'next-button-aria-label'
+			},
+			restartButtonAriaLabel: {
+				type: String,
+				attribute: 'restart-button-aria-label'
+			},
+			ariaTitle: {
+				type: String,
+				attribute: 'aria-title'
+			},
+			stepTitle: {
+				type: String,
+				attribute: 'step-title'
+			},
+			stepCount: {
+				type: Number,
+				attribute: 'step-count'
+			},
+			thisStep: {
+				type: Number,
+				attribute: 'this-step'
+			}
+		};
+	}
+
+	static get styles() {
+		return [offscreenStyles, css`
+			.d2l-labs-wizard-step-footer {
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+			}
+
+			.d2l-labs-wizard-step-button-next {
+				float: right;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.hideRestartButton = false;
+		this.hideNextButton = false;
+		this.disableNextButton = false;
+		this.nextButtonAriaLabel = '';
+		this.restartButtonAriaLabel = '';
+		this.ariaTitle = '';
+		this.stepTitle = '';
+		this.stepCount = 1;
+		this.thisStep = 1;
+	}
+
+	render() {
+		return html`
+			<div id="aria-title" tabindex="0" class="d2l-offscreen">${this._getAriaTitle()}</div>
+			<slot></slot>
+			<div class="d2l-labs-wizard-step-footer">
+	${this.hideRestartButton
+		? html`<div></div>`
+		: html`
+			<d2l-button
+				title="${!this.restartButtonTooltip ? this.localize('components:wizard:restart.button.tooltip') : this.restartButtonTooltip}"
+				aria-label="${this.restartButtonAriaLabel}"
+				@click="${this._restartClick}"
+			>
+			${!this.restartButtonTitle ? this.localize('components:wizard:stepper.defaults.restart') : this.restartButtonTitle}
+			</d2l-button>`}
+
+	${this.hideNextButton
+		? html`<div></div>`
+		: html`
+			<d2l-button
+				class="d2l-labs-wizard-step-button-next"
+				title="${!this.nextButtonTooltip ? this.localize('components:wizard:next.button.tooltip') : this.nextButtonTooltip}"
+				aria-label="${this.nextButtonAriaLabel}"
+				@click="${this._nextClick}"
+				primary
+				?disabled="${this.disableNextButton}"
+			>
+			${!this.nextButtonTitle ? this.localize('components:wizard:stepper.defaults.next') : this.nextButtonTitle}
+			</d2l-button>`}
+
+			</div>
+		`;
+	}
+
+	_getAriaTitle() {
+		if (this.ariaTitle) {
+			return this.ariaTitle;
+		} else if (this.stepTitle) {
+			return `${this.stepTitle}. ${this._getStepLabel()}`;
+		}
+		return this._getStepLabel();
+	}
+
+	_getStepLabel() {
+		return this.localize('components:wizard:aria.steplabel', 'totalSteps', this.stepCount, 'currentStep', this.thisStep);
+	}
+
+	_nextClick() {
+		this.dispatchEvent(new CustomEvent('stepper-next', { bubbles: true, composed: true }));
+	}
+
+	_restartClick() {
+		this.dispatchEvent(new CustomEvent('stepper-restart', { bubbles: true, composed: true }));
+	}
+}
+
+customElements.define('d2l-labs-wizard-step', D2LStep);

package/src/components/wizard/wizard.js

@@ -0,0 +1,122 @@
+import './single-step-header.js';
+import { css, html, LitElement } from 'lit';
+
+class D2LWizard extends LitElement {
+	static get properties() {
+		return {
+			stepTitles: {
+				type: Array,
+				attribute: 'step-titles'
+			},
+			stepCount: {
+				type: Number,
+				attribute: 'step-count'
+			},
+			selectedStep: {
+				type: Number,
+				attribute: 'selected-step'
+			},
+			fillHeaderWidth: {
+				type: Boolean,
+				attribute: 'fill-header-width',
+				reflect: true
+			}
+		};
+	}
+
+	static get styles() {
+		return css`
+			.d2l-labs-wizard-header {
+				display: flex;
+				flex: 1;
+				justify-content: center;
+				margin: 30px 0;
+				overflow-x: auto;
+				width: 100%;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+
+		this.stepTitles = [];
+		this.stepCount = 0;
+		this.selectedStep = 0;
+		this.fillHeaderWidth = false;
+	}
+
+	render() {
+		return html`
+			<div class="d2l-labs-wizard-header">
+				${this.stepTitles.map((title, index) =>
+		html`
+						<d2l-labs-single-step-header total-steps="${this.stepCount}" current-step="${index}" selected-step="${this.selectedStep}" step-title="${title}" ?fill-header-width="${this.fillHeaderWidth}"></d2l-labs-single-step-header>
+					`)}
+
+			</div>
+			<slot @slotchange="${this.#handleSlotChange}"></slot>
+		`;
+	}
+
+	currentStep() {
+		return this.selectedStep;
+	}
+
+	next() {
+		this.selectedStep = (this.selectedStep + 1) === this.stepCount ? this.selectedStep : (this.selectedStep + 1);
+
+		this.#updateStep();
+
+		if (window.parentIFrame) {
+			window.parentIFrame.scrollTo(0, 0);
+		}
+
+		this.#focusAriaTitleOfStep();
+	}
+
+	restart() {
+		this.selectedStep = 0;
+
+		this.#updateStep();
+
+		this.#focusAriaTitleOfStep();
+	}
+
+	#focusAriaTitleOfStep() {
+		const slotChildren = this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE);
+		slotChildren.forEach(child => {
+			if (child.style.display !== 'none') {
+				const ariaTitle = child.shadowRoot.getElementById('aria-title');
+				if (ariaTitle) {
+					ariaTitle.focus();
+					return;
+				}
+			}
+		});
+	}
+
+	#handleSlotChange() {
+		this.#updateStep();
+	}
+
+	#updateStep() {
+		const steps = this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+		this.stepCount = steps.length;
+
+		this.stepTitles = [];
+
+		steps.forEach((element, index) => {
+
+			this.stepTitles.push(element.stepTitle);
+			element.setAttribute('step-count', this.stepCount);
+			element.setAttribute('this-step', index + 1);
+			element.style.display = index !== this.selectedStep ? 'none' : '';
+		});
+
+		this.stepCount = steps.length;
+	}
+
+}
+
+customElements.define('d2l-labs-wizard', D2LWizard);

package/src/lang/ar.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "رقم الصفحة {pageNumber} من {maxPageNumber}",
 	"components:pagination:nextPage": "الصفحة التالية",
 	"components:pagination:previousPage": "الصفحة السابقة",
-	"components:pagination:resultsPerPage": "النتائج لكل صفحة"
+	"components:pagination:resultsPerPage": "النتائج لكل صفحة",
+	"components:wizard:aria.steplabel": "الخطوة {currentStep} من أصل {totalSteps}",
+	"components:wizard:stepper.defaults.next": "التالي",
+	"components:wizard:stepper.defaults.restart": "إعادة تشغيل",
+	"components:wizard:restart.button.tooltip": "العودة إلى الخطوة الأولى",
+	"components:wizard:next.button.tooltip": "المتابعة إلى الخطوة التالية"
 };

package/src/lang/cy.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Rhif tudalen {pageNumber} o {maxPageNumber}",
 	"components:pagination:nextPage": "Tudalen nesaf",
 	"components:pagination:previousPage": "Y dudalen flaenorol",
-	"components:pagination:resultsPerPage": "Canlyniadau fesul tudalen"
+	"components:pagination:resultsPerPage": "Canlyniadau fesul tudalen",
+	"components:wizard:aria.steplabel": "Cam {currentStep} o {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Nesaf",
+	"components:wizard:stepper.defaults.restart": "Ailddechrau",
+	"components:wizard:restart.button.tooltip": "Back to first step",
+	"components:wizard:next.button.tooltip": "Proceed to next step"
 };

package/src/lang/da.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Sidenummer {pageNumber} af {maxPageNumber}",
 	"components:pagination:nextPage": "Næste side",
 	"components:pagination:previousPage": "Forrige side",
-	"components:pagination:resultsPerPage": "Resultater pr. side"
+	"components:pagination:resultsPerPage": "Resultater pr. side",
+	"components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Next",
+	"components:wizard:stepper.defaults.restart": "Restart",
+	"components:wizard:restart.button.tooltip": "Back to first step",
+	"components:wizard:next.button.tooltip": "Proceed to next step"
 };

package/src/lang/de.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Seitennummer {pageNumber} von {maxPageNumber}",
 	"components:pagination:nextPage": "Nächste Seite",
 	"components:pagination:previousPage": "Vorherige Seite",
-	"components:pagination:resultsPerPage": "Ergebnisse pro Seite"
+	"components:pagination:resultsPerPage": "Ergebnisse pro Seite",
+	"components:wizard:aria.steplabel": "Schritt {currentStep} von {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Weiter",
+	"components:wizard:stepper.defaults.restart": "Neu starten",
+	"components:wizard:restart.button.tooltip": "Zurück zum ersten Schritt",
+	"components:wizard:next.button.tooltip": "Fahren Sie mit dem nächsten Schritt fort"
 };

package/src/lang/en-gb.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
 	"components:pagination:nextPage": "Next page",
 	"components:pagination:previousPage": "Previous page",
-	"components:pagination:resultsPerPage": "Results per page"
+	"components:pagination:resultsPerPage": "Results per page",
+	"components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Next",
+	"components:wizard:stepper.defaults.restart": "Restart",
+	"components:wizard:restart.button.tooltip": "Back to first step",
+	"components:wizard:next.button.tooltip": "Proceed to next step"
 };

package/src/lang/en.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
 	"components:pagination:nextPage": "Next page",
 	"components:pagination:previousPage": "Previous page",
-	"components:pagination:resultsPerPage": "Results per page"
+	"components:pagination:resultsPerPage": "Results per page",
+	"components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Next",
+	"components:wizard:stepper.defaults.restart": "Restart",
+	"components:wizard:restart.button.tooltip": "Back to first step",
+	"components:wizard:next.button.tooltip": "Proceed to next step"
 };

package/src/lang/es-es.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
 	"components:pagination:nextPage": "Página siguiente",
 	"components:pagination:previousPage": "Página anterior",
-	"components:pagination:resultsPerPage": "Resultados por página"
+	"components:pagination:resultsPerPage": "Resultados por página",
+	"components:wizard:aria.steplabel": "Paso {currentStep} de {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Siguiente",
+	"components:wizard:stepper.defaults.restart": "Reiniciar",
+	"components:wizard:restart.button.tooltip": "Volver al primer paso",
+	"components:wizard:next.button.tooltip": "Avanzar al siguiente paso"
 };

package/src/lang/es.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
 	"components:pagination:nextPage": "Página siguiente",
 	"components:pagination:previousPage": "Página anterior",
-	"components:pagination:resultsPerPage": "Resultados por página"
+	"components:pagination:resultsPerPage": "Resultados por página",
+	"components:wizard:aria.steplabel": "Paso {currentStep} de {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Siguiente",
+	"components:wizard:stepper.defaults.restart": "Reiniciar",
+	"components:wizard:restart.button.tooltip": "Volver al primer paso",
+	"components:wizard:next.button.tooltip": "Avanzar al siguiente paso"
 };

package/src/lang/fr-fr.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Page numéro {pageNumber} sur {maxPageNumber}",
 	"components:pagination:nextPage": "Page suivante",
 	"components:pagination:previousPage": "Page précédente",
-	"components:pagination:resultsPerPage": "Résultats par page"
+	"components:pagination:resultsPerPage": "Résultats par page",
+	"components:wizard:aria.steplabel": "Étape {currentStep} sur {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Suivant",
+	"components:wizard:stepper.defaults.restart": "Redémarrer",
+	"components:wizard:restart.button.tooltip": "Revenir à la première étape",
+	"components:wizard:next.button.tooltip": "Passer à l’étape suivante"
 };

package/src/lang/fr-on.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Numéro de page {pageNumber} de {maxPageNumber}",
 	"components:pagination:nextPage": "Page suivante",
 	"components:pagination:previousPage": "Page précédente",
-	"components:pagination:resultsPerPage": "Résultats par page"
+	"components:pagination:resultsPerPage": "Résultats par page",
+	"components:wizard:aria.steplabel": "Étape {currentStep} de {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Page suivante",
+	"components:wizard:stepper.defaults.restart": "Redémarrer",
+	"components:wizard:restart.button.tooltip": "Retour à la première étape",
+	"components:wizard:next.button.tooltip": "Passer à la prochaine étape"
 };

package/src/lang/fr.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Numéro de page {pageNumber} de {maxPageNumber}",
 	"components:pagination:nextPage": "Page suivante",
 	"components:pagination:previousPage": "Page précédente",
-	"components:pagination:resultsPerPage": "Résultats par page"
+	"components:pagination:resultsPerPage": "Résultats par page",
+	"components:wizard:aria.steplabel": "Étape {currentStep} de {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Suivant",
+	"components:wizard:stepper.defaults.restart": "Redémarrer",
+	"components:wizard:restart.button.tooltip": "Retour à la première étape",
+	"components:wizard:next.button.tooltip": "Passer à la prochaine étape"
 };

package/src/lang/hi.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "{maxPageNumber} में से पेज नंबर {pageNumber}",
 	"components:pagination:nextPage": "अगला पेज",
 	"components:pagination:previousPage": "पिछला पेज",
-	"components:pagination:resultsPerPage": "प्रति पेज के परिणाम"
+	"components:pagination:resultsPerPage": "प्रति पेज के परिणाम",
+	"components:wizard:aria.steplabel": "{totalSteps} में से {currentStep} चरण",
+	"components:wizard:stepper.defaults.next": "अगला",
+	"components:wizard:stepper.defaults.restart": "रीस्टार्ट करें",
+	"components:wizard:restart.button.tooltip": "पहले चरण पर वापस जाएँ",
+	"components:wizard:next.button.tooltip": "अगले चरण पर आगे बढ़ें"
 };

package/src/lang/ja.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "{maxPageNumber} のページ番号 {pageNumber}",
 	"components:pagination:nextPage": "次のページ",
 	"components:pagination:previousPage": "前のページ",
-	"components:pagination:resultsPerPage": "ページごとの結果"
+	"components:pagination:resultsPerPage": "ページごとの結果",
+	"components:wizard:aria.steplabel": "ステップ {currentStep}/{totalSteps}",
+	"components:wizard:stepper.defaults.next": "次へ",
+	"components:wizard:stepper.defaults.restart": "再開",
+	"components:wizard:restart.button.tooltip": "最初の手順に戻る",
+	"components:wizard:next.button.tooltip": "次の手順に進む"
 };

package/src/lang/ko.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "페이지 번호 {pageNumber} / {maxPageNumber}",
 	"components:pagination:nextPage": "다음 페이지",
 	"components:pagination:previousPage": "이전 페이지",
-	"components:pagination:resultsPerPage": "페이지당 결과 수"
+	"components:pagination:resultsPerPage": "페이지당 결과 수",
+	"components:wizard:aria.steplabel": "{currentStep}/{totalSteps} 단계",
+	"components:wizard:stepper.defaults.next": "다음",
+	"components:wizard:stepper.defaults.restart": "다시 시작",
+	"components:wizard:restart.button.tooltip": "첫 번째 단계로 돌아갑니다",
+	"components:wizard:next.button.tooltip": "다음 단계로 진행합니다"
 };

package/src/lang/nl.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Paginanummer {pageNumber} van {maxPageNumber}",
 	"components:pagination:nextPage": "Volgende pagina",
 	"components:pagination:previousPage": "Vorige pagina",
-	"components:pagination:resultsPerPage": "Resultaten per pagina"
+	"components:pagination:resultsPerPage": "Resultaten per pagina",
+	"components:wizard:aria.steplabel": "Stap {currentStep} van {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Volgende",
+	"components:wizard:stepper.defaults.restart": "Opnieuw starten",
+	"components:wizard:restart.button.tooltip": "Terug naar eerste stap",
+	"components:wizard:next.button.tooltip": "Ga verder naar de volgende stap"
 };

package/src/lang/pt.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Número da página {pageNumber} de {maxPageNumber}",
 	"components:pagination:nextPage": "Próxima página",
 	"components:pagination:previousPage": "Página anterior",
-	"components:pagination:resultsPerPage": "Resultados por página"
+	"components:pagination:resultsPerPage": "Resultados por página",
+	"components:wizard:aria.steplabel": "Etapa {currentStep} de {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Avançar",
+	"components:wizard:stepper.defaults.restart": "Reiniciar",
+	"components:wizard:restart.button.tooltip": "Voltar para a primeira etapa",
+	"components:wizard:next.button.tooltip": "Ir para a próxima etapa"
 };

package/src/lang/sv.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Sidnummer {pageNumber} av {maxPageNumber}",
 	"components:pagination:nextPage": "Nästa sida",
 	"components:pagination:previousPage": "Föregående sida",
-	"components:pagination:resultsPerPage": "Resultat per sida"
+	"components:pagination:resultsPerPage": "Resultat per sida",
+	"components:wizard:aria.steplabel": "Steg {currentStep} av {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Nästa",
+	"components:wizard:stepper.defaults.restart": "Starta om",
+	"components:wizard:restart.button.tooltip": "Tillbaka till första steget",
+	"components:wizard:next.button.tooltip": "Gå vidare till nästa steg"
 };

package/src/lang/tr.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "Sayfa numarası {pageNumber} / {maxPageNumber}",
 	"components:pagination:nextPage": "Sonraki sayfa",
 	"components:pagination:previousPage": "Önceki sayfa",
-	"components:pagination:resultsPerPage": "Sayfa başına sonuç"
+	"components:pagination:resultsPerPage": "Sayfa başına sonuç",
+	"components:wizard:aria.steplabel": "Adım {currentStep} / {totalSteps}",
+	"components:wizard:stepper.defaults.next": "İleri",
+	"components:wizard:stepper.defaults.restart": "Yeniden Başlat",
+	"components:wizard:restart.button.tooltip": "İlk adıma geri dön",
+	"components:wizard:next.button.tooltip": "Sonraki adıma ilerle"
 };

package/src/lang/zh-cn.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "第 {pageNumber} 页，共 {maxPageNumber} 页",
 	"components:pagination:nextPage": "下一页",
 	"components:pagination:previousPage": "上一页",
-	"components:pagination:resultsPerPage": "每页结果数"
+	"components:pagination:resultsPerPage": "每页结果数",
+	"components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+	"components:wizard:stepper.defaults.next": "Next",
+	"components:wizard:stepper.defaults.restart": "Restart",
+	"components:wizard:restart.button.tooltip": "Back to first step",
+	"components:wizard:next.button.tooltip": "Proceed to next step"
 };

package/src/lang/zh-tw.js

@@ -42,5 +42,10 @@ export default {
 	"components:pagination:currentPage": "頁碼 {pageNumber} / {maxPageNumber}",
 	"components:pagination:nextPage": "下一頁",
 	"components:pagination:previousPage": "上一頁",
-	"components:pagination:resultsPerPage": "每頁結果"
+	"components:pagination:resultsPerPage": "每頁結果",
+	"components:wizard:aria.steplabel": "第 {currentStep} 步，共 {totalSteps} 步",
+	"components:wizard:stepper.defaults.next": "下一個",
+	"components:wizard:stepper.defaults.restart": "重新開始",
+	"components:wizard:restart.button.tooltip": "返回第一個步驟",
+	"components:wizard:next.button.tooltip": "繼續前往下一個步驟"
 };