@brightspace-ui/core 3.240.5 → 3.241.0

package/components/colors/colors.js

@@ -120,6 +120,7 @@ const lightVariables = new Map([
 	['--d2l-theme-border-color-disabled', '--d2l-color-corundum'],
 	['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
 	['--d2l-theme-notification-text-color', '#ffffff'],
+	['--d2l-theme-icon-color-active', '--d2l-color-celestine'],
 	['--d2l-theme-text-color-static-disabled', '#20212280'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
 	// opacity
 	['--d2l-theme-opacity-disabled-control', '0.5'],
@@ -200,6 +201,7 @@ const darkVariables = new Map([
 	['--d2l-theme-border-color-disabled', '#303233'], /* --d2l-theme-border-color-standard (tungsten) at 50% opacity */
 	['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
 	['--d2l-theme-notification-text-color', '#ffffff'],
+	['--d2l-theme-icon-color-active', '--d2l-color-celestine'],
 	['--d2l-theme-text-color-static-disabled', '#cdd5dc80'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
 	// opacity
 	['--d2l-theme-opacity-disabled-control', '0.5'],

package/components/page/README.md

@@ -0,0 +1,5 @@
+# Page
+
+The `d2l-page` and page layout components are in progress.
+
+Please reach out before using them!

package/components/page/page.js

@@ -0,0 +1,213 @@
+import '../colors/colors.js';
+import '../button/floating-buttons.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+/**
+ * Component for laying out a page, with header, optional footer and optional navigation or supporting panels
+ * @slot - The main content of the page (expecting d2l-page-main)
+ * @slot header - The header content of the page (expecting d2l-page-header-*)
+ * @slot side-nav - The side navigation content of the page (expecting d2l-page-side-nav)
+ * @slot supporting - The supporting content of the page (expecting d2l-page-supporting)
+ * @slot footer - The footer content of the page (expecting d2l-page-footer)
+ */
+class Page extends LocalizeCoreElement(LitElement) {
+
+	static properties = {
+		/**
+		 * Width type of the page and its underlying pieces
+		 * @type {'normal'|'wide'|'fullscreen'}
+		 */
+		widthType: { type: String, attribute: 'width-type' },
+		_headerIsSticky: { state: true },
+		_slotVisibility: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			--d2l-page-header-max-width: 1230px;
+			--d2l-page-content-max-width: 1230px;
+			--d2l-page-footer-max-width: 1230px;
+			--d2l-page-margin-inline: auto;
+		}
+
+		:host([width-type="wide"]) {
+			--d2l-page-header-max-width: 1440px;
+			--d2l-page-content-max-width: 1440px;
+			--d2l-page-footer-max-width: 1440px;
+		}
+
+		:host([width-type="fullscreen"]) {
+			--d2l-page-header-max-width: 100%;
+			--d2l-page-content-max-width: 100%;
+			--d2l-page-footer-max-width: 100%;
+		}
+
+		.page.header-sticky .header {
+			position: sticky;
+			top: 0;
+			z-index: 15; /* To be over sticky content of our core components */
+		}
+
+		.content {
+			display: flex;
+			margin-inline: var(--d2l-page-margin-inline, 0);
+			max-width: var(--d2l-page-content-max-width, 100%);
+			padding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */
+		}
+
+		main {
+			flex: 1;
+			min-width: min(400px, 100%); /* Actual min width TBD */
+		}
+
+		.side-nav-panel,
+		.supporting-panel {
+			height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
+			overflow: clip auto;
+			position: sticky;
+			top: var(--d2l-page-header-height, 0);
+		}
+
+		.divider {
+			background-color: var(--d2l-color-gypsum);
+			flex: none;
+			width: 4px;
+		}
+
+		.footer:not([hidden]),
+		.floating-buttons-container {
+			display: inline;
+		}
+		.fixed-footer {
+			background-color: white;
+			box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
+			inset: auto 0 0;
+			padding: 0.75rem 0;
+			position: fixed;
+			z-index: 10; /* To be over sticky content of our core components */
+		}
+		.footer-contents {
+			margin-inline: var(--d2l-page-margin-inline, 0);
+			max-width: var(--d2l-page-footer-max-width, 100%);
+		}
+	`;
+
+	constructor() {
+		super();
+
+		this.widthType = 'normal';
+		this._headerIsSticky = false;
+		this._slotVisibility = {};
+		this.#resizeObserver = new ResizeObserver(entries => {
+			for (const entry of entries) {
+				if (entry.target.classList.contains('header')) {
+					const height = this._headerIsSticky ? entry.target.offsetHeight : 0;
+					this.style.setProperty('--d2l-page-header-height', `${height}px`);
+				} else if (entry.target.classList.contains('footer')) {
+					const height = entry.target.classList.contains('fixed-footer') ? entry.target.offsetHeight : 0;
+					this.style.setProperty('--d2l-page-footer-height', `${height}px`);
+				}
+			}
+		});
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.disconnect();
+	}
+
+	firstUpdated() {
+		const header = this.shadowRoot.querySelector('.header');
+		const footer = this.shadowRoot.querySelector('.footer');
+		if (header) this.#resizeObserver.observe(header);
+		if (footer) this.#resizeObserver.observe(footer);
+	}
+
+	render() {
+		const pageClasses = {
+			'page': true,
+			'header-sticky': this._headerIsSticky
+		};
+
+		return html`
+			<div class="${classMap(pageClasses)}">
+				${this.#renderHeader()}
+				<div class="content">
+					${this.#renderSideNavPanel()}
+					<main><slot></slot></main>
+					${this.#renderSupportingPanel()}
+				</div>
+				${this.#renderFooter()}
+			</div>
+		`;
+	}
+
+	#resizeObserver;
+
+	#handleHeaderSlotChange(e) {
+		const nodes = e.target.assignedNodes();
+		//this._headerIsSticky = nodes.some(node => node.tagName.toLowerCase() === 'd2l-page-header-immersive');
+		this._headerIsSticky = nodes.some(node => node.id === 'immersive-nav'); // temp until the official component exists
+	}
+
+	#handleSlotVisibilityChange(e) {
+		const key = e.target.name;
+		const nodes = e.target.assignedNodes();
+		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
+	}
+
+	#renderFloatingButtons(footerContents) {
+		// Floating buttons needs to be wrapped as it spawns a sibling element that should be cleaned up as one by Lit
+		return html`
+			<div class="floating-buttons-container">
+				<d2l-floating-buttons>
+					${footerContents}
+				</d2l-floating-buttons>
+			</div>
+		`;
+	}
+
+	#renderFooter() {
+		const fixedFooter = this._slotVisibility['side-nav'] || this._slotVisibility['supporting'];
+		const footerContainerClasses = { 'footer': true, 'fixed-footer': fixedFooter };
+		const footerContents = html`<div class="footer-contents"><slot name="footer" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>`;
+		return html`
+			<div class="${classMap(footerContainerClasses)}" ?hidden="${!this._slotVisibility['footer']}">
+				${fixedFooter ? footerContents : this.#renderFloatingButtons(footerContents)}	
+			</div>
+		`;
+	}
+
+	#renderHeader() {
+		return html`
+			<header class="header">
+				<nav aria-label="${this.localize('components.page.header-nav-label')}">
+					<slot name="header" @slotchange="${this.#handleHeaderSlotChange}"></slot>
+				</nav>
+			</header>
+		`;
+	}
+
+	#renderSideNavPanel() {
+		return html`
+			<nav class="side-nav-panel" ?hidden="${!this._slotVisibility['side-nav']}" aria-label="${this.localize('components.page.side-nav-label')}">
+				<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			</nav>
+			${this._slotVisibility['side-nav'] ? html`<div class="divider"></div>` : nothing}
+		`;
+	}
+
+	#renderSupportingPanel() {
+		return html`
+			${this._slotVisibility['supporting'] ? html`<div class="divider"></div>` : nothing}
+			<aside class="supporting-panel" ?hidden="${!this._slotVisibility['supporting']}">
+				<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			</aside>
+		`;
+	}
+
+}
+
+customElements.define('d2l-page', Page);

package/components/switch/switch-mixin.js

@@ -48,7 +48,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 
 			.d2l-switch-container {
 				--d2l-focus-ring-offset: 0;
-				background-color: var(--d2l-switch-container-background-color, #ffffff);
+				background-color: var(--d2l-switch-container-background-color, var(--d2l-theme-background-color-base));
 				border-radius: 1rem;
 				box-sizing: border-box;
 				cursor: default;
@@ -62,15 +62,15 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 			${getFocusRingStyles('.d2l-switch-container', { extraStyles: css`position: relative;` })}
 			:host([disabled]) .d2l-switch-container {
 				cursor: default;
-				opacity: 0.5;
+				opacity: var(--d2l-theme-opacity-disabled-control);
 			}
 			:host([disabled]) .d2l-switch-container:hover > .d2l-switch-inner,
-			:host([disabled]) .d2l-switch-inner:hover {
+			:host([disabled]) .d2l-switch-inner:hover,
+			:host([disabled]) .switch-hover {
 				outline: none;
 			}
 			.d2l-switch-inner {
-				background-color: var(--d2l-color-regolith);
-				border: 1px solid var(--d2l-color-ferrite);
+				border: 1px solid var(--d2l-theme-border-color-emphasized);
 				border-radius: 0.8rem;
 				box-sizing: border-box;
 				padding: 0.3rem;
@@ -78,15 +78,15 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				width: 3rem;
 			}
 			:host([on]) .d2l-switch-inner {
-				background-color: var(--d2l-color-celestine-plus-2);
+				background-color: var(--d2l-theme-background-color-interactive-highlighted);
 			}
 			.d2l-switch-toggle {
 				position: relative;
 				transition: transform 150ms ease-out;
 			}
 			.d2l-switch-toggle > div {
-				background-color: #ffffff;
-				border: 1px solid var(--d2l-color-ferrite);
+				background-color: var(--d2l-theme-background-color-base);
+				border: 1px solid var(--d2l-theme-border-color-emphasized);
 				border-radius: 0.6rem;
 				box-sizing: border-box;
 				display: inline-block;
@@ -131,13 +131,13 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 			}
 			:host([on]) .d2l-switch-icon-on > d2l-icon,
 			:host([on]) .d2l-switch-icon-on > d2l-icon-custom {
-				color: var(--d2l-color-celestine);
+				color: var(--d2l-theme-icon-color-active);
 			}
 			:host([on]) .d2l-switch-icon-off {
 				transform: scale(0.35);
 			}
 			:host(:not([on])) .d2l-switch-icon-on {
-				color: var(--d2l-color-celestine);
+				color: var(--d2l-theme-icon-color-active);
 				transform: scale(0.35);
 			}
 			.d2l-switch-text {
@@ -149,7 +149,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				display: none;
 			}
 			.d2l-switch-inner:hover, .switch-hover {
-				outline: 2px solid var(--d2l-color-celestine);
+				outline: 2px solid var(--d2l-theme-border-color-focus);
 				outline-offset: -2px;
 			}
 			@media (prefers-reduced-motion: reduce) {

package/components/switch/switch.js

@@ -14,7 +14,7 @@ class Switch extends SwitchMixin(LitElement) {
 	static get styles() {
 		return [super.styles, css`
 			.d2l-switch-icon-off > d2l-icon-custom {
-				color: var(--d2l-color-ferrite);
+				color: var(--d2l-theme-icon-color-standard);
 			}
 		`];
 	}

package/custom-elements.json

@@ -12263,6 +12263,97 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-demo",
+      "path": "./components/page/demo/page-component.js",
+      "description": "Component for d2l-page demos and tests",
+      "properties": [
+        {
+          "name": "properties",
+          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasSideNavPanel: { type: BooleanConstructor; attribute: string; }; hasSupportingPanel: { ...; }; navType: { ...; }; widthType: { ...; }; _allowThreePanels: { ...; }; }",
+          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true}}"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"navStyles\",\"selectStyles\",null]"
+        },
+        {
+          "name": "demoMode",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hasFooter",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hasSideNavPanel",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hasSupportingPanel",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "navType",
+          "type": "string",
+          "default": "\"full\""
+        },
+        {
+          "name": "widthType",
+          "type": "'normal'|'wide'|'fullscreen'",
+          "default": "\"normal\""
+        }
+      ]
+    },
+    {
+      "name": "d2l-page",
+      "path": "./components/page/page.js",
+      "description": "Component for laying out a page, with header, optional footer and optional navigation or supporting panels",
+      "properties": [
+        {
+          "name": "properties",
+          "type": "{ widthType: \"normal\" | \"wide\" | \"fullscreen\"; _headerIsSticky: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_headerIsSticky\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        },
+        {
+          "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.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\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`\""
+        },
+        {
+          "name": "widthType",
+          "type": "string",
+          "default": "\"normal\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the page (expecting d2l-page-main)"
+        },
+        {
+          "name": "header",
+          "description": "The header content of the page (expecting d2l-page-header-*)"
+        },
+        {
+          "name": "side-nav",
+          "description": "The side navigation content of the page (expecting d2l-page-side-nav)"
+        },
+        {
+          "name": "supporting",
+          "description": "The supporting content of the page (expecting d2l-page-supporting)"
+        },
+        {
+          "name": "footer",
+          "description": "The footer content of the page (expecting d2l-page-footer)"
+        }
+      ]
+    },
     {
       "name": "d2l-pager-load-more",
       "path": "./components/paging/pager-load-more.js",

package/lang/ar.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} مادة واحد}

package/lang/ca.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/cy.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "mwy",
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} eitem}

package/lang/da.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "flere",
 	"components.object-property-list.item-placeholder-text": "Pladsholder-element",
 	"components.overflow-group.moreActions": "Flere handlinger",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/de.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "mehr",
 	"components.object-property-list.item-placeholder-text": "Platzhalterelement",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Element}

package/lang/en-gb.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/en.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/es-es.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "más",
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/es.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "más",
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/fr-fr.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "plus",
 	"components.object-property-list.item-placeholder-text": "Élément d’espace réservé",
 	"components.overflow-group.moreActions": "Plus d’actions",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/fr.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "plus",
 	"components.object-property-list.item-placeholder-text": "Élément de paramètre fictif",
 	"components.overflow-group.moreActions": "Plus d’actions",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/haw.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "hou aku",
 	"components.object-property-list.item-placeholder-text": "Mea Paʻa Wahi",
 	"components.overflow-group.moreActions": "Nā Hana Hou",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} mea}

package/lang/hi.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "अधिक",
 	"components.object-property-list.item-placeholder-text": "प्लेसहोल्डर आइटम",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} आइटम}

package/lang/ja.js

@@ -147,6 +147,8 @@ export default {
 	"components.more-less.more": "増やす",
 	"components.object-property-list.item-placeholder-text": "プレースホルダの項目",
 	"components.overflow-group.moreActions": "その他のアクション",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個の項目}

package/lang/ko.js

@@ -147,6 +147,8 @@ export default {
 	"components.more-less.more": "더 보기",
 	"components.object-property-list.item-placeholder-text": "자리표시자 항목",
 	"components.overflow-group.moreActions": "추가 작업",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {해당 항목 수 {countFormatted}개}

package/lang/mi.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "ētahi atu",
 	"components.object-property-list.item-placeholder-text": "Tūemi Puriwāhi",
 	"components.overflow-group.moreActions": "Ētahi atu Hohenga",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Tūemi}

package/lang/nl.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "meer",
 	"components.object-property-list.item-placeholder-text": "Item tijdelijke aanduiding",
 	"components.overflow-group.moreActions": "Meer acties",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/pt.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "mais",
 	"components.object-property-list.item-placeholder-text": "Item de espaço reservado",
 	"components.overflow-group.moreActions": "Mais ações",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/sv.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "mer",
 	"components.object-property-list.item-placeholder-text": "Platshållarobjekt",
 	"components.overflow-group.moreActions": "Fler åtgärder",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} objekt}

package/lang/th.js

@@ -148,6 +148,8 @@ export default {
 	"components.more-less.more": "เพิ่มเติม",
 	"components.object-property-list.item-placeholder-text": "รายการตัวแทน",
 	"components.overflow-group.moreActions": "การดำเนินการเพิ่มเติม",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} รายการ}

package/lang/tr.js

@@ -152,6 +152,8 @@ export default {
 	"components.more-less.more": "daha fazla",
 	"components.object-property-list.item-placeholder-text": "Yer Tutucu Öğesi",
 	"components.overflow-group.moreActions": "Daha Fazla Eylem",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} öğe}

package/lang/vi.js

@@ -146,6 +146,8 @@ export default {
 	"components.more-less.more": "thêm",
 	"components.object-property-list.item-placeholder-text": "Mục giữ chỗ",
 	"components.overflow-group.moreActions": "Thêm các Tác vụ",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} mục}

package/lang/zh-cn.js

@@ -147,6 +147,8 @@ export default {
 	"components.more-less.more": "更多",
 	"components.object-property-list.item-placeholder-text": "占位符项目",
 	"components.overflow-group.moreActions": "更多操作",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 项}

package/lang/zh-tw.js

@@ -148,6 +148,8 @@ export default {
 	"components.more-less.more": "較多",
 	"components.object-property-list.item-placeholder-text": "預留位置項目",
 	"components.overflow-group.moreActions": "其他動作",
+	"components.page.header-nav-label": "Main",
+	"components.page.side-nav-label": "Side",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個項目}

package/package.json

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