@brightspace-ui/core 3.243.2 → 3.245.0

package/README.md

@@ -50,6 +50,7 @@ npm install @brightspace-ui/core
   * [Selection](components/selection/): components for selection and bulk actions
   * [Scroll Wrapper](components/scroll-wrapper/): arrows to scroll content horizontally
   * [Skeleton](components/skeleton/): apply low-fidelity skeletons to your application as it loads
+  * [Skip Nav](components/skip-nav/): components for skipping past navigation panels
   * [Sort](components/sorting/): menu for adjusting the sort order of data in a list
   * [Status Indicator](components/status-indicator/): status-indicator components
   * [Switch](components/switch/): switch component with on/off semantics

package/components/page/page-footer.js

@@ -0,0 +1,33 @@
+import { css, html, LitElement } from 'lit';
+
+/**
+ * Component to be placed in the footer slot of d2l-page, providing consistent padding
+ * @slot - The main content of the footer panel
+ * @slot end - Optional content placed at the end of the footer
+ */
+class PageFooter extends LitElement {
+
+	static styles = css`
+		:host {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			padding: 0 var(--d2l-page-padding, 30px) 0.75rem; /* TODO: Padding needs to be figured out */
+		}
+		.start, .end {
+			align-items: center;
+			display: flex;
+			gap: 0.6rem; /* TODO: Padding needs to be figured out */
+		}
+	`;
+
+	render() {
+		return html`
+			<div class="start"><slot></slot></div>
+			<div class="end"><slot name="end"></slot></div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-page-footer', PageFooter);

package/components/page/page-panel-mixin.js

@@ -7,6 +7,7 @@ export const pagePanelStyles = css`
 		align-items: center;
 		display: flex;
 		flex-direction: row;
+		gap: 6px;
 		justify-content: space-between;
 	}
 	.panel-header {
@@ -14,7 +15,7 @@ export const pagePanelStyles = css`
 		border-bottom: 1px solid var(--d2l-color-mica);
 		height: 70px;
 		overflow: hidden;
-		padding: 0 30px;
+		padding: 0 var(--d2l-page-padding, 30px);
 		position: sticky;
 		top: 0;
 		z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */
@@ -27,7 +28,7 @@ export const pagePanelStyles = css`
 	}
 
 	.panel {
-		padding: 30px;
+		padding: var(--d2l-page-padding, 30px);
 	}
 `;
 
@@ -49,17 +50,13 @@ export const PagePanelMixin = superclass => class extends superclass {
 			'panel': true,
 			'header-sticky': this._hasHeader
 		};
-		const header = html`
+
+		return html`
 			<div ?hidden="${!this._hasHeader}" class="panel-header">
 				<div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
 				<div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
-			</div>`;
-
-		return html`
-			<div>
-				${header}
-				<div class="${classMap(panelClasses)}">${content}</div>
 			</div>
+			<div class="${classMap(panelClasses)}">${content}</div>
 		`;
 	}
 

package/components/page/page.js

@@ -30,6 +30,7 @@ class Page extends LocalizeCoreElement(LitElement) {
 			--d2l-page-content-max-width: 1230px;
 			--d2l-page-footer-max-width: 1230px;
 			--d2l-page-margin-inline: auto;
+			--d2l-page-padding: 30px;
 		}
 
 		:host([width-type="wide"]) {
@@ -44,6 +45,17 @@ class Page extends LocalizeCoreElement(LitElement) {
 			--d2l-page-footer-max-width: 100%;
 		}
 
+		@media (max-width: 929px) {
+			:host {
+				--d2l-page-padding: 24px;
+			}
+		}
+		@media (max-width: 767px) {
+			:host {
+				--d2l-page-padding: 18px;
+			}
+		}
+
 		.header {
 			position: relative;
 			z-index: 15; /* To be over sticky content of our core components */
@@ -88,7 +100,7 @@ class Page extends LocalizeCoreElement(LitElement) {
 			background-color: white;
 			box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
 			inset: auto 0 0;
-			padding: 0.75rem 0;
+			padding-block-start: 0.75rem;
 			position: fixed;
 			z-index: 10; /* To be over sticky content of our core components */
 		}

package/components/skip-nav/README.md

@@ -0,0 +1,34 @@
+# Skip Nav
+
+Components which provide a link for skipping past navigation panels.
+
+## Skip Nav Main [d2l-skip-nav-main]
+
+Meant to be used once at the page level, `<d2l-skip-nav-main>` provides preset "skip to main content" text. It also automatically skips to the `<main>` element of the page, or the first `<h1>` element.
+
+## Skip Nav Custom [d2l-skip-nav-custom]
+
+A skip navigation link where custom text can be provided. Focus will need to be moved manually when clicked.
+
+<!-- docs: demo code properties name:d2l-skip-nav-custom sandboxTitle:'Skip Nav Custom' -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/skip-nav/skip-nav-custom.js';
+</script>
+<d2l-skip-nav-custom text="Skip to custom place"></d2l-skip-nav-custom>
+<button id="custom-target">Skip to here</button>
+<script>
+  document.querySelector('d2l-skip-nav-custom').addEventListener('click', () => {
+    document.querySelector('#custom-target').focus();
+  });
+</script>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text for the link |
+<!-- docs: end hidden content -->
+

package/components/skip-nav/skip-nav-custom.js

@@ -0,0 +1,61 @@
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * A components which provides a custom skip navigation link
+ */
+class SkipNavCustom extends FocusMixin(PropertyRequiredMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * ACCESSIBILITY: REQUIRED: Text for the link
+			 * @type {string}
+			 */
+			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() {
+		// Href attribute is needed for a11y tools to recognize anchor as a link
+		// and for click events to be dispatched using key presses
+		return html`<a href="javascript:void(0);" class="vdiff-target">${this.text}</a>`;
+	}
+
+}
+
+customElements.define('d2l-skip-nav-custom', SkipNavCustom);

package/components/skip-nav/skip-nav-main.js

@@ -0,0 +1,37 @@
+import './skip-nav-custom.js';
+import { html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { querySelectorComposed } from '../../helpers/dom.js';
+
+/**
+ * A components which provides a "skip to main content" link which automatically skip to the main element
+ */
+class SkipNavMain extends FocusMixin(LocalizeCoreElement(LitElement)) {
+
+	static get focusElementSelector() {
+		return 'd2l-skip-nav-custom';
+	}
+
+	render() {
+		return html`<d2l-skip-nav-custom text="${this.localize('components.skip-nav.skipToMainContent')}" @click="${this.#handleSkipNav}" class="vdiff-target"></d2l-skip-nav-custom>`;
+	}
+
+	#handleSkipNav() {
+		const elem = querySelectorComposed(document, 'main') ||
+			querySelectorComposed(document, '[role="main"]') ||
+			querySelectorComposed(document, 'h1');
+		if (elem) {
+			elem.tabIndex = -1;
+			elem.focus();
+		} else {
+			/**
+			 * @ignore
+			 */
+			this.dispatchEvent(new CustomEvent('d2l-skip-nav-main-fail', { bubbles: false, composed: false }));
+		}
+	}
+
+}
+
+customElements.define('d2l-skip-nav-main', SkipNavMain);

package/custom-elements.json

@@ -12325,6 +12325,28 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-footer",
+      "path": "./components/page/page-footer.js",
+      "description": "Component to be placed in the footer slot of d2l-page, providing consistent padding",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: nowrap;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\tpadding: 0 var(--d2l-page-padding, 30px) 0.75rem; /* TODO: Padding needs to be figured out */\\n\\t\\t}\\n\\t\\t.start, .end {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 0.6rem; /* TODO: Padding needs to be figured out */\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the footer panel"
+        },
+        {
+          "name": "end",
+          "description": "Optional content placed at the end of the footer"
+        }
+      ]
+    },
     {
       "name": "d2l-page-main",
       "path": "./components/page/page-main.js",
@@ -12431,7 +12453,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",
@@ -14053,6 +14075,31 @@
         }
       ]
     },
+    {
+      "name": "d2l-skip-nav-custom",
+      "path": "./components/skip-nav/skip-nav-custom.js",
+      "description": "A components which provides a custom skip navigation link",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Text for the link",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Text for the link",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-skip-nav-main",
+      "path": "./components/skip-nav/skip-nav-main.js",
+      "description": "A components which provides a \"skip to main content\" link which automatically skip to the main element"
+    },
     {
       "name": "d2l-sort-item",
       "path": "./components/sorting/sort-item.js",

package/lang/ar.js

@@ -189,6 +189,7 @@ export default {
 	"components.selection.selected": "تم تحديد {count}",
 	"components.selection.selected-plus": "تم تحديد {count}+‎",
 	"components.selection-controls.label": "إجراءات التحديد",
+	"components.skip-nav.skipToMainContent": "تجاوز إلى المحتوى الرئيسي",
 	"components.sort.label": "فرز",
 	"components.sort.text": "الفرز: {selectedItemText}",
 	"components.switch.conditions": "يجب استيفاء الشروط",

package/lang/ca.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} selected",
 	"components.selection.selected-plus": "{count}+ selected",
 	"components.selection-controls.label": "Actions for selection",
+	"components.skip-nav.skipToMainContent": "skip to main content",
 	"components.sort.label": "Sort",
 	"components.sort.text": "Sort: {selectedItemText}",
 	"components.switch.conditions": "Conditions must be met",

package/lang/cy.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} wedi’u dewis.",
 	"components.selection.selected-plus": "{count}+ wedi’u dewis",
 	"components.selection-controls.label": "Camau gweithredu ar gyfer detholiad",
+	"components.skip-nav.skipToMainContent": "neidio i’r prif gynnwys",
 	"components.sort.label": "Trefnu",
 	"components.sort.text": "Trefnu: {selectedItemText}",
 	"components.switch.conditions": "Rhaid bodloni’r amodau",

package/lang/da.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} valgt",
 	"components.selection.selected-plus": "{count}+ valgt",
 	"components.selection-controls.label": "Handlinger for valg",
+	"components.skip-nav.skipToMainContent": "spring videre til hovedindhold",
 	"components.sort.label": "Sortér",
 	"components.sort.text": "Sortér: {selectedItemText}",
 	"components.switch.conditions": "Betingelserne skal være opfyldt",

package/lang/de.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} ausgewählt",
 	"components.selection.selected-plus": "{count}+ ausgewählt",
 	"components.selection-controls.label": "Aktionen für Auswahl",
+	"components.skip-nav.skipToMainContent": "zum Hauptinhalt springen",
 	"components.sort.label": "Sortieren",
 	"components.sort.text": "Sortieren: {selectedItemText}",
 	"components.switch.conditions": "Bedingungen müssen erfüllt sein",

package/lang/en-gb.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} selected",
 	"components.selection.selected-plus": "{count}+ selected",
 	"components.selection-controls.label": "Actions for selection",
+	"components.skip-nav.skipToMainContent": "skip to main content",
 	"components.sort.label": "Sort",
 	"components.sort.text": "Sort: {selectedItemText}",
 	"components.switch.conditions": "Conditions must be met",

package/lang/en.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} selected",
 	"components.selection.selected-plus": "{count}+ selected",
 	"components.selection-controls.label": "Actions for selection",
+	"components.skip-nav.skipToMainContent": "skip to main content",
 	"components.sort.label": "Sort",
 	"components.sort.text": "Sort: {selectedItemText}",
 	"components.switch.conditions": "Conditions must be met",

package/lang/es-es.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} seleccionados",
 	"components.selection.selected-plus": "{count}+ seleccionados",
 	"components.selection-controls.label": "Acciones para la selección",
+	"components.skip-nav.skipToMainContent": "pasar al contenido principal",
 	"components.sort.label": "Ordenar",
 	"components.sort.text": "Ordenar: {selectedItemText}",
 	"components.switch.conditions": "Deben cumplirse las condiciones",

package/lang/es.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} seleccionados",
 	"components.selection.selected-plus": "Más de {count} seleccionados",
 	"components.selection-controls.label": "Acciones para la selección",
+	"components.skip-nav.skipToMainContent": "pasar al contenido principal",
 	"components.sort.label": "Ordenar",
 	"components.sort.text": "Ordenar: {selectedItemText}",
 	"components.switch.conditions": "Se deben cumplir las condiciones",

package/lang/fr-fr.js

@@ -184,6 +184,7 @@ export default {
 	"components.selection.selected": "{count} sélectionnés",
 	"components.selection.selected-plus": "{count}+ sélectionné(e)(s)",
 	"components.selection-controls.label": "Actions pour la sélection",
+	"components.skip-nav.skipToMainContent": "passer au contenu principal",
 	"components.sort.label": "Trier",
 	"components.sort.text": "Trier : {selectedItemText}",
 	"components.switch.conditions": "Les conditions doivent être remplies",

package/lang/fr.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} sélectionné(s)",
 	"components.selection.selected-plus": "{count}+ sélectionné",
 	"components.selection-controls.label": "Actions à sélectionner",
+	"components.skip-nav.skipToMainContent": "passer au contenu principal",
 	"components.sort.label": "Trier",
 	"components.sort.text": "Trier : {selectedItemText}",
 	"components.switch.conditions": "Les conditions doivent être remplies",

package/lang/haw.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} koho",
 	"components.selection.selected-plus": "{count}+ i koho ʻia",
 	"components.selection-controls.label": "Nā hana no ke koho",
+	"components.skip-nav.skipToMainContent": "lele i ka mea nui o ka ʻike",
 	"components.sort.label": "Hoʻokaʻawale",
 	"components.sort.text": "Hoʻokaʻawale: {selectedItemText}",
 	"components.switch.conditions": "Pono e hoʻokō i nā kūlana",

package/lang/hi.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} चयनित",
 	"components.selection.selected-plus": "{count} से अधिक चयनित",
 	"components.selection-controls.label": "चयन के लिए क्रियाएँ",
+	"components.skip-nav.skipToMainContent": "मुख्य सामग्री में जाएँ",
 	"components.sort.label": "सॉर्ट करें",
 	"components.sort.text": "सॉर्ट करें: {selectedItemText}",
 	"components.switch.conditions": "शर्तें पूरी होनी चाहिए",

package/lang/ja.js

@@ -176,6 +176,7 @@ export default {
 	"components.selection.selected": "{count} 個を選択済み",
 	"components.selection.selected-plus": "{count} 個以上を選択済み",
 	"components.selection-controls.label": "選択のアクション",
+	"components.skip-nav.skipToMainContent": "メインコンテンツへスキップ",
 	"components.sort.label": "並べ替え",
 	"components.sort.text": "並べ替え: {selectedItemText}",
 	"components.switch.conditions": "条件が一致する必要があります",

package/lang/ko.js

@@ -176,6 +176,7 @@ export default {
 	"components.selection.selected": "{count}개 선택됨",
 	"components.selection.selected-plus": "{count}+개 선택됨",
 	"components.selection-controls.label": "선택 작업",
+	"components.skip-nav.skipToMainContent": "기본 콘텐츠로 건너뛰기",
 	"components.sort.label": "정렬",
 	"components.sort.text": "정렬: {selectedItemText}",
 	"components.switch.conditions": "조건을 충족해야 합니다",

package/lang/mi.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} kua tīpakohia",
 	"components.selection.selected-plus": "{count}+ kua tīpakohia",
 	"components.selection-controls.label": "Ngā mahinga mō te tīpakonga",
+	"components.skip-nav.skipToMainContent": "whakarereke ki te ihirangi matua",
 	"components.sort.label": "Kōmaka",
 	"components.sort.text": "Kōmaka: {selectedItemText}",
 	"components.switch.conditions": "Me tutuki ngā here",

package/lang/nl.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} geselecteerd",
 	"components.selection.selected-plus": "Meer dan {count} geselecteerd",
 	"components.selection-controls.label": "Acties voor selectie",
+	"components.skip-nav.skipToMainContent": "meteen naar hoofdinhoud gaan",
 	"components.sort.label": "Sorteren",
 	"components.sort.text": "Sorteren: {selectedItemText}",
 	"components.switch.conditions": "Er moet aan de voorwaarden worden voldaan",

package/lang/pt.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} selecionados",
 	"components.selection.selected-plus": "Mais de {count} selecionados",
 	"components.selection-controls.label": "Ações para seleção",
+	"components.skip-nav.skipToMainContent": "passar para conteúdo principal",
 	"components.sort.label": "Classificar",
 	"components.sort.text": "Classificar: {selectedItemText}",
 	"components.switch.conditions": "As condições devem ser atendidas",

package/lang/sv.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} valda",
 	"components.selection.selected-plus": "Över {count} valda",
 	"components.selection-controls.label": "Åtgärder för val",
+	"components.skip-nav.skipToMainContent": "fortsätt till huvudinnehåll",
 	"components.sort.label": "Sortera",
 	"components.sort.text": "Sortera: {selectedItemText}",
 	"components.switch.conditions": "Villkoren måste uppfyllas",

package/lang/th.js

@@ -177,6 +177,7 @@ export default {
 	"components.selection.selected": "{count} ที่เลือกแล้ว",
 	"components.selection.selected-plus": "{count}+ ที่เลือกแล้ว",
 	"components.selection-controls.label": "การดำเนินการสำหรับการเลือก",
+	"components.skip-nav.skipToMainContent": "ข้ามไปยังเนื้อหาหลัก",
 	"components.sort.label": "เรียงลำดับ",
 	"components.sort.text": "เรียงลำดับ: {selectedItemText}",
 	"components.switch.conditions": "ต้องตรงตามเงื่อนไข",

package/lang/tr.js

@@ -185,6 +185,7 @@ export default {
 	"components.selection.selected": "{count} öğe seçildi",
 	"components.selection.selected-plus": "{count}+ öğe seçildi",
 	"components.selection-controls.label": "Seçim için eylemler",
+	"components.skip-nav.skipToMainContent": "ana içeriğe atla",
 	"components.sort.label": "Sırala",
 	"components.sort.text": "Sırala: {selectedItemText}",
 	"components.switch.conditions": "Koşullar karşılanmalıdır",

package/lang/vi.js

@@ -174,6 +174,7 @@ export default {
 	"components.selection.selected": "{count} mục được chọn",
 	"components.selection.selected-plus": "{count}+ mục được chọn",
 	"components.selection-controls.label": "Các thao tác để chọn",
+	"components.skip-nav.skipToMainContent": "chuyển sang đến nội dung chính",
 	"components.sort.label": "Sắp xếp",
 	"components.sort.text": "Sắp xếp: {selectedItemText}",
 	"components.switch.conditions": "Các điều kiện phải được đáp ứng",

package/lang/zh-cn.js

@@ -176,6 +176,7 @@ export default {
 	"components.selection.selected": "已选 {count}",
 	"components.selection.selected-plus": "已选 + {count}",
 	"components.selection-controls.label": "针对所选内容的操作",
+	"components.skip-nav.skipToMainContent": "跳到主目录",
 	"components.sort.label": "排序",
 	"components.sort.text": "排序：{selectedItemText}",
 	"components.switch.conditions": "必须符合条件",

package/lang/zh-tw.js

@@ -177,6 +177,7 @@ export default {
 	"components.selection.selected": "已選取 {count} 個",
 	"components.selection.selected-plus": "已選取 {count}+ 個",
 	"components.selection-controls.label": "選擇的動作",
+	"components.skip-nav.skipToMainContent": "跳至主要內容",
 	"components.sort.label": "排序",
 	"components.sort.text": "排序：{selectedItemText}",
 	"components.switch.conditions": "必須符合條件",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.243.2",
+  "version": "3.245.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",