@brightspace-ui/labs 2.8.0 → 2.9.0

package/src/components/navigation/navigation-main-header.js

@@ -0,0 +1,67 @@
+import { css, html, LitElement } from 'lit';
+import { navigationSharedStyle } from './navigation-shared-styles.js';
+
+class NavigationMainHeader extends LitElement {
+
+	static get styles() {
+		return [navigationSharedStyle, css`
+			:host {
+				display: block;
+			}
+
+			.d2l-labs-navigation-header-container {
+				align-items: center;
+				display: flex;
+				height: 90px;
+			}
+
+			@media (max-width: 767px) {
+				.d2l-labs-navigation-header-container {
+					height: 72px;
+				}
+			}
+
+			div ::slotted(.d2l-labs-navigation-header-left),
+			div ::slotted(.d2l-labs-navigation-header-right) {
+				align-items: center;
+				display: flex;
+				height: 100%;
+			}
+
+			div ::slotted(.d2l-labs-navigation-header-left) {
+				flex: 0 1 auto;
+			}
+
+			div ::slotted(.d2l-labs-navigation-header-right) {
+				flex: 0 0 auto;
+			}
+
+			.d2l-labs-navigation-gutter {
+				display: inline-block;
+				flex: 1 1 auto;
+				min-width: var(--d2l-labs-navigation-margin-regular);
+			}
+
+			@media (max-width: 615px) {
+				.d2l-labs-navigation-gutter {
+					min-width: var(--d2l-labs-navigation-margin-regular) / 2;
+				}
+			}
+		`];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-labs-navigation-centerer">
+				<div class="d2l-labs-navigation-gutters">
+					<div class="d2l-labs-navigation-header-container">
+						<slot name="left"></slot>
+						<div class="d2l-labs-navigation-gutter"></div>
+						<slot name="right"></slot>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}
+customElements.define('d2l-labs-navigation-main-header', NavigationMainHeader);

package/src/components/navigation/navigation-notification-icon.js

@@ -0,0 +1,54 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import { css, html, LitElement } from 'lit';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+class NavigationNotificationIcon extends RtlMixin(LitElement) {
+
+	static get properties() {
+		return {
+			thinBorder: { attribute: 'thin-border', reflect: true, type: Boolean }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+				height: 100%;
+				position: absolute;
+				right: calc(-100% + 11px);
+				top: calc(-50% + 11px);
+				width: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([dir="rtl"]) {
+				left: calc(-50% - 4px);
+				right: auto;
+			}
+			.d2l-labs-navigation-notification-icon-indicator {
+				background: var(--d2l-color-primary-accent-indicator);
+				border: 2px solid white;
+				border-radius: 50%;
+				height: 10px;
+				width: 10px;
+			}
+			:host([thin-border]) .d2l-labs-navigation-notification-icon-indicator {
+				border-width: 1px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.thinBorder = false;
+	}
+
+	render() {
+		return html`<div class="d2l-labs-navigation-notification-icon-indicator"></div>`;
+	}
+
+}
+
+window.customElements.define('d2l-labs-navigation-notification-icon', NavigationNotificationIcon);

package/src/components/navigation/navigation-separator.js

@@ -0,0 +1,30 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement } from 'lit';
+
+/**
+ * Separator component to be used between buttons in a navigational element.
+ */
+class NavigationSeparator extends LitElement {
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+				margin: 0 9px;
+			}
+			d2l-icon {
+				color: var(--d2l-color-mica);
+			}
+		`;
+	}
+
+	render() {
+		return html`
+			<d2l-icon icon="tier2:divider-big"></d2l-icon>
+		`;
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-separator', NavigationSeparator);

package/src/components/navigation/navigation-shared-styles.js

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+
+export const navigationSharedStyle = css`
+	:host {
+		--d2l-labs-navigation-margin-regular: 30px;
+	}
+
+	.d2l-labs-navigation-centerer {
+		margin: 0 auto;
+		max-width: 1230px;
+	}
+
+	.d2l-labs-navigation-gutters {
+		padding-left: 2.439%;
+		padding-right: 2.439%;
+		position: relative;
+	}
+
+	@media (max-width: 615px) {
+		.d2l-labs-navigation-gutters {
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+	}
+
+	@media (min-width: 1230px) {
+		.d2l-labs-navigation-gutters {
+			padding-left: 30px;
+			padding-right: 30px;
+		}
+	}
+`;

package/src/components/navigation/navigation-skip-main.js

@@ -0,0 +1,31 @@
+import './navigation-skip.js';
+import { html, LitElement } from 'lit';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus/focus-mixin.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { querySelectorComposed } from '@brightspace-ui/core/helpers/dom.js';
+
+class NavigationSkipMain extends FocusMixin(LocalizeLabsElement(LitElement)) {
+
+	static get focusElementSelector() {
+		return 'd2l-labs-navigation-skip';
+	}
+
+	render() {
+		return html`<d2l-labs-navigation-skip text="${this.localize('components:navigation:skipNav')}" @click="${this._handleSkipNav}" class="vdiff-target"></d2l-labs-navigation-skip>`;
+	}
+
+	_handleSkipNav() {
+		const elem = querySelectorComposed(document, 'main') ||
+			querySelectorComposed(document, '[role="main"]') ||
+			querySelectorComposed(document, 'h1');
+		if (elem) {
+			elem.tabIndex = -1;
+			elem.focus();
+		} else {
+			this.dispatchEvent(new CustomEvent('d2l-labs-navigation-skip-fail', { bubbles: false, composed: false }));
+		}
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-skip-main', NavigationSkipMain);

package/src/components/navigation/navigation-skip.js

@@ -0,0 +1,59 @@
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus/focus-mixin.js';
+import { PropertyRequiredMixin } from '@brightspace-ui/core/mixins/property-required/property-required-mixin.js';
+
+class NavigationSkip extends FocusMixin(PropertyRequiredMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			text: { required: true, type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			a {
+				inset-inline-start: -10000px;
+				overflow: hidden;
+				position: absolute;
+				width: 1px;
+			}
+			a:active,
+			a:focus {
+				background-color: rgba(0, 0, 0, 0.7);
+				border: 1px solid rgba(0, 0, 0, 0.8);
+				color: #ffffff;
+				cursor: pointer;
+				display: block;
+				font-weight: bold;
+				inset-block-start: 0;
+				inset-inline-start: 25%;
+				margin: 0 auto;
+				outline: none;
+				padding: 0.3em;
+				text-align: center;
+				text-decoration: none;
+				width: 50%;
+				z-index: 10000;
+			}
+		`;
+	}
+
+	static get focusElementSelector() {
+		return 'a';
+	}
+
+	render() {
+		return html`<a tabindex="0" @keydown="${this._handleKeyDown}" class="vdiff-target">${this.text}</a>`;
+	}
+
+	_handleKeyDown(e) {
+		if (e.keyCode === 13) {
+			e.preventDefault();
+			this.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
+		}
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-skip', NavigationSkip);

package/src/components/navigation/navigation-styles.js

@@ -0,0 +1,107 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import { css } from 'lit';
+
+export const centererStyles = css`
+	.d2l-labs-navigation-centerer {
+		margin: 0 auto;
+		max-width: 1230px;
+	}
+`;
+
+export const guttersStyles = css`
+	.d2l-labs-navigation-gutters {
+		padding-left: 2.439%;
+		padding-right: 2.439%;
+		position: relative;
+	}
+	@media (max-width: 615px) {
+		.d2l-labs-navigation-gutters {
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+	}
+	@media (min-width: 1230px) {
+		.d2l-labs-navigation-gutters {
+			padding-left: 30px;
+			padding-right: 30px;
+		}
+	}
+`;
+
+export const highlightBorderStyles = css`
+	.d2l-labs-navigation-highlight-border {
+		background: transparent;
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
+		display: block;
+		height: 4px;
+		left: -7px;
+		position: absolute;
+		top: 0;
+		width: calc(100% + 14px);
+	}
+	*:focus > .d2l-labs-navigation-highlight-border,
+	*:hover > .d2l-labs-navigation-highlight-border,
+	*[active] > .d2l-labs-navigation-highlight-border {
+		background: var(--d2l-color-celestine);
+	}
+`;
+
+export const highlightButtonStyles = css`
+	button {
+		align-items: center;
+		background: transparent;
+		border: none;
+		color: var(--d2l-color-ferrite);
+		cursor: pointer;
+		display: inline-flex;
+		font-family: inherit;
+		font-size: inherit;
+		gap: 6px;
+		height: 100%;
+		margin: 0;
+		min-height: 40px;
+		outline: none;
+		overflow: visible;
+		padding: 0;
+		position: relative;
+		vertical-align: middle;
+		white-space: nowrap;
+	}
+	/* Firefox includes a hidden border which messes up button dimensions */
+	button::-moz-focus-inner {
+		border: 0;
+	}
+	button:not([disabled]):hover,
+	button:not([disabled]):focus,
+	button[active] {
+		--d2l-icon-fill-color: var(--d2l-color-celestine);
+		color: var(--d2l-color-celestine);
+		outline: none;
+	}
+	button[disabled] {
+		cursor: default;
+		opacity: 0.5;
+	}
+`;
+
+export const highlightLinkStyles = css`
+	a {
+		align-items: center;
+		color: var(--d2l-color-ferrite);
+		display: inline-flex;
+		gap: 6px;
+		height: 100%;
+		min-height: 40px;
+		position: relative;
+		text-decoration: none;
+		vertical-align: middle;
+		white-space: nowrap;
+	}
+	a:hover,
+	a:focus {
+		--d2l-icon-fill-color: var(--d2l-color-celestine);
+		color: var(--d2l-color-celestine);
+		outline: none;
+	}
+`;

package/src/components/navigation/navigation.js

@@ -0,0 +1,60 @@
+import './navigation-band.js';
+import './navigation-skip-main.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { getNextFocusable } from '@brightspace-ui/core/helpers/focus.js';
+
+/**
+ * Primary navigation wrapper component.
+ * @slot - Default content placed inside of the component
+ * @slot navigation-band - Content placed inside band
+ */
+class Navigation extends LitElement {
+
+	static get properties() {
+		return {
+			hasSkipNav: { attribute: 'has-skip-nav', type: Boolean }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+				position: relative;
+			}
+			.d2l-labs-navigation-shadow-drop-border {
+				background-color: rgba(0, 0, 0, 0.02);
+				bottom: -4px;
+				display: var(--d2l-labs-navigation-shadow-drop-border-display, block);
+				height: 4px;
+				pointer-events: none;
+				position: absolute;
+				width: 100%;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.hasSkipNav = false;
+	}
+
+	render() {
+		const skipNav = this.hasSkipNav ? html`<d2l-labs-navigation-skip-main @d2l-labs-navigation-skip-fail="${this._handleSkipNavFail}"></d2l-labs-navigation-skip-main>` : nothing;
+		return html`
+			${skipNav}<d2l-labs-navigation-band><slot name="navigation-band"></slot></d2l-labs-navigation-band>
+			<slot></slot>
+			<div class="d2l-labs-navigation-shadow-drop-border"></div>
+		`;
+	}
+
+	_handleSkipNavFail() {
+		const nextFocusable = getNextFocusable(this.shadowRoot.querySelector('.d2l-labs-navigation-shadow-drop-border'));
+		if (nextFocusable) {
+			nextFocusable.focus();
+		}
+	}
+
+}
+
+customElements.define('d2l-labs-navigation', Navigation);

package/src/lang/ar.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "انقر، أو اضغط على مسافة للخلف، أو اضغط على مفتاح الحذف لإزالة العنصر {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "تم طي خانة الاختيار", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "تم توسيع خانة الاختيار", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "العودة",
+	"components:navigation:next": "التالي",
+	"components:navigation:previous": "السابق",
+	"components:navigation:skipNav": "تجاوز إلى المحتوى الرئيسي",
 	"components:optInFlyout:cancel": "إلغاء",
 	"components:optInFlyout:close": "إغلاق مربع الحوار هذا",
 	"components:optInFlyout:done": "تم",

package/src/lang/cy.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Cliciwch, pwyswch yn ôl, neu pwyswch y fysell dileu i dynnu’r eitem {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Wedi crebachu blwch ticio", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Wedi ehangu blwch ticio", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Yn ôl",
+	"components:navigation:next": "Nesaf",
+	"components:navigation:previous": "Blaenorol",
+	"components:navigation:skipNav": "neidio i’r prif gynnwys",
 	"components:optInFlyout:cancel": "Canslo",
 	"components:optInFlyout:close": "Cau’r dialog hwn",
 	"components:optInFlyout:done": "Wedi Gorffen",

package/src/lang/da.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Klik, tryk på tilbagetasten, eller tryk på slettasten for at fjerne element {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Afkrydsningsfelt skjult", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Afkrydsningsfelt udvidet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Tilbage",
+	"components:navigation:next": "Næste",
+	"components:navigation:previous": "Forrige",
+	"components:navigation:skipNav": "spring videre til hovedindhold",
 	"components:optInFlyout:cancel": "Annuller",
 	"components:optInFlyout:close": "Luk denne dialogboks",
 	"components:optInFlyout:done": "Udført",

package/src/lang/de.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Klicken Sie, drücken Sie die Rücktaste, oder drücken Sie die Entfernen-Taste, um das Element {value} zu entfernen", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Kontrollkästchen ausgeblendet", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Kontrollkästchen eingeblendet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Zurück",
+	"components:navigation:next": "Weiter",
+	"components:navigation:previous": "Zurück",
+	"components:navigation:skipNav": "zum Hauptinhalt springen",
 	"components:optInFlyout:cancel": "Abbrechen",
 	"components:optInFlyout:close": "Dieses Dialogfeld schließen",
 	"components:optInFlyout:done": "Fertig",

package/src/lang/en-gb.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Click, press backspace or press delete key to remove item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Tick box collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Tick box expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Back",
+	"components:navigation:next": "Next",
+	"components:navigation:previous": "Previous",
+	"components:navigation:skipNav": "skip to main content",
 	"components:optInFlyout:cancel": "Cancel",
 	"components:optInFlyout:close": "Close this dialogue",
 	"components:optInFlyout:done": "Done",

package/src/lang/en.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Click, press backspace, or press delete key to remove item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Checkbox collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Checkbox expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Back",
+	"components:navigation:next": "Next",
+	"components:navigation:previous": "Previous",
+	"components:navigation:skipNav": "skip to main content",
 	"components:optInFlyout:cancel": "Cancel",
 	"components:optInFlyout:close": "Close this dialog",
 	"components:optInFlyout:done": "Done",

package/src/lang/es-es.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Haga clic, pulse Retroceso o pulse la tecla Supr para eliminar el elemento {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de verificación contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de verificación expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Volver",
+	"components:navigation:next": "Siguiente",
+	"components:navigation:previous": "Anterior",
+	"components:navigation:skipNav": "pasar al contenido principal",
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
 	"components:optInFlyout:done": "Hecho",

package/src/lang/es.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Haga clic, presione Retroceso o presione la tecla Suprimir para eliminar el elemento {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de selección contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de selección expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Volver",
+	"components:navigation:next": "Siguiente",
+	"components:navigation:previous": "Anterior",
+	"components:navigation:skipNav": "pasar al contenido principal",
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
 	"components:optInFlyout:done": "Listo",

package/src/lang/fr-fr.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Cliquez sur l’élément, appuyez sur la touche Retour arrière ou sur la touche Suppr pour supprimer l’élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher développée", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Retour",
+	"components:navigation:next": "Suivant",
+	"components:navigation:previous": "Précédent",
+	"components:navigation:skipNav": "passer au contenu principal",
 	"components:optInFlyout:cancel": "Annuler",
 	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
 	"components:optInFlyout:done": "Terminé",

package/src/lang/fr-on.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Cliquez, appuyez sur la touche d'effacement arrière ou appuyez sur la touche de suppression pour supprimer l'élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher agrandie", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Retour",
+	"components:navigation:next": "Page suivante",
+	"components:navigation:previous": "Précédent",
+	"components:navigation:skipNav": "passer au contenu principal",
 	"components:optInFlyout:cancel": "Annuler",
 	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
 	"components:optInFlyout:done": "Terminé",

package/src/lang/fr.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Cliquez, appuyez sur la touche d'effacement arrière ou appuyez sur la touche de suppression pour supprimer l'élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher agrandie", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Retour",
+	"components:navigation:next": "Page suivante",
+	"components:navigation:previous": "Précédent",
+	"components:navigation:skipNav": "passer au contenu principal",
 	"components:optInFlyout:cancel": "Annuler",
 	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
 	"components:optInFlyout:done": "Terminé",

package/src/lang/haw.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Kaomi, kaomi i hope, a i ʻole ke kī holoi e wehe i ka mea {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Checkbox collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Checkbox expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Ke kua",
+	"components:navigation:next": "Aʻe",
+	"components:navigation:previous": "Mamua",
+	"components:navigation:skipNav": "lele i ka ʻike nui",
 	"components:optInFlyout:cancel": "Hoʻopau",
 	"components:optInFlyout:close": "Pani i kēia kamaʻilio",
 	"components:optInFlyout:done": "Pau",

package/src/lang/hi.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "{value} को हटाने के लिए क्लिक करें, बैकस्पेस दबाएँ, या डिलीट बटन को दबाएँ", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "चेकबॉक्स छोटा हो गया", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "चेकबॉक्स बड़ा हो गया", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "वापस जाएँ",
+	"components:navigation:next": "अगला",
+	"components:navigation:previous": "पिछला",
+	"components:navigation:skipNav": "मुख्य सामग्री में जाएँ",
 	"components:optInFlyout:cancel": "कैंसल करें",
 	"components:optInFlyout:close": "यह संवाद बंद करें",
 	"components:optInFlyout:done": "पूरा हो गया",

package/src/lang/ja.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "クリックする、Backspace キーを押す、または Delete キーを押すと項目 {value} が削除されます", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "折りたたまれたチェックボックス", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "展開されたチェックボックス", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "戻る",
+	"components:navigation:next": "次へ",
+	"components:navigation:previous": "前へ",
+	"components:navigation:skipNav": "メインコンテンツへスキップ",
 	"components:optInFlyout:cancel": "キャンセル",
 	"components:optInFlyout:close": "このダイアログを閉じる",
 	"components:optInFlyout:done": "終了",

package/src/lang/ko.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "{value} 항목을 제거하려면 클릭하거나, 백스페이스 또는 삭제 키를 누릅니다", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "확인란이 축소됨", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "확인란이 확장됨", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "뒤로",
+	"components:navigation:next": "다음",
+	"components:navigation:previous": "이전",
+	"components:navigation:skipNav": "기본 콘텐츠로 건너뛰기",
 	"components:optInFlyout:cancel": "취소",
 	"components:optInFlyout:close": "이 대화 상자 닫기",
 	"components:optInFlyout:done": "완료",

package/src/lang/nl.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Klik, druk op Backspace of druk op de Delete-toets om item {value} te verwijderen", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Selectievakje samengevouwen", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Selectievakje uitgevouwen", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Terug",
+	"components:navigation:next": "Volgende",
+	"components:navigation:previous": "Vorige",
+	"components:navigation:skipNav": "meteen naar hoofdinhoud gaan",
 	"components:optInFlyout:cancel": "Annuleren",
 	"components:optInFlyout:close": "Dit dialoogvenster sluiten",
 	"components:optInFlyout:done": "Gereed",

package/src/lang/pt.js

@@ -17,6 +17,10 @@ export default {
 	"components:attributePicker:removeValue": "Clique, pressione a tecla Backspace ou a tecla Delete para remover o item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Caixa de seleção recolhida", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Caixa de seleção expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:navigation:back": "Voltar",
+	"components:navigation:next": "Próximo",
+	"components:navigation:previous": "Anterior",
+	"components:navigation:skipNav": "passar para conteúdo principal",
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Fechar esta caixa de diálogo",
 	"components:optInFlyout:done": "Concluído",