@brightspace-ui/core 3.269.5 → 3.270.0

package/components/page/page.js

@@ -126,6 +126,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			min-width: min(${MAIN_MIN_WIDTH}px, 100%);
 		}
 
+		.side-nav,
+		.supporting {
+			display: contents;
+		}
+
 		.side-nav-panel,
 		.supporting-panel {
 			max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
@@ -317,7 +322,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		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']}">
+			<div
+				role="region"
+				aria-label="${this.localize('components.page.footer-region-label')}"
+				class="${classMap(footerContainerClasses)}"
+				?hidden="${!this._slotVisibility['footer']}">
 				${fixedFooter ? footerContents : this.#renderFloatingButtons(footerContents)}	
 			</div>
 		`;
@@ -335,28 +344,30 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	#renderSideNavPanel() {
 		return html`
-			<nav
-				class="side-nav-panel"
-				style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
-				?hidden="${!this._slotVisibility['side-nav']}"
-				aria-label="${this.localize('components.page.side-nav-label')}">
-				<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			<nav class="side-nav" aria-label="${this.localize('components.page.side-nav-label')}">
+				<div
+					class="side-nav-panel"
+					style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
+					?hidden="${!this._slotVisibility['side-nav']}">
+					<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+				</div>
+				${!this._slotVisibility['side-nav'] ? nothing :
+					this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
 			</nav>
-			${!this._slotVisibility['side-nav'] ? nothing :
-				this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
 		`;
 	}
 
 	#renderSupportingPanel() {
 		return html`
-			${!this._slotVisibility['supporting'] ? nothing :
-				this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
-			<aside
-				class="supporting-panel"
-				style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
-				?hidden="${!this._slotVisibility['supporting']}"
-				aria-label="${this.localize('components.page.supporting-panel-label')}">
-				<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			<aside class="supporting" aria-label="${this.localize('components.page.supporting-label')}">
+				${!this._slotVisibility['supporting'] ? nothing :
+					this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
+				<div
+					class="supporting-panel"
+					style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
+					?hidden="${!this._slotVisibility['supporting']}">
+					<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+				</div>
 			</aside>
 		`;
 	}

package/custom-elements.json

@@ -6489,7 +6489,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\\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\\tbox-sizing: border-box;\\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\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: 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.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`\""
+          "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\\tbox-sizing: border-box;\\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\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: 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.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",

package/lang/ar.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "الرئيسية",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "جانبية",

package/lang/ca.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "més",
 	"components.object-property-list.item-placeholder-text": "Element de marcador de posició",
 	"components.overflow-group.moreActions": "Més accions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/cy.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Prif",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Ochr",

package/lang/da.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "flere",
 	"components.object-property-list.item-placeholder-text": "Pladsholder-element",
 	"components.overflow-group.moreActions": "Flere handlinger",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Hoved",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/de.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "mehr",
 	"components.object-property-list.item-placeholder-text": "Platzhalterelement",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Haupt-",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Seiten-",

package/lang/en-gb.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/en.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/es-es.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/es.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/fr-fr.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principale",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Côté",

package/lang/fr.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Côté",

package/lang/haw.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Nui",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "ʻaoʻao",

package/lang/hi.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "अधिक",
 	"components.object-property-list.item-placeholder-text": "प्लेसहोल्डर आइटम",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "मुख्य",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "साइड",

package/lang/ja.js

@@ -150,6 +150,7 @@ export default {
 	"components.more-less.more": "増やす",
 	"components.object-property-list.item-placeholder-text": "プレースホルダの項目",
 	"components.overflow-group.moreActions": "その他のアクション",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "メイン",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "サイド",

package/lang/ko.js

@@ -150,6 +150,7 @@ export default {
 	"components.more-less.more": "더 보기",
 	"components.object-property-list.item-placeholder-text": "자리표시자 항목",
 	"components.overflow-group.moreActions": "추가 작업",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "메인",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "사이드",

package/lang/mi.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Matua",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Taha",

package/lang/nl.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Hoofdgedeelte",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Zij",

package/lang/pt.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/sv.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Huvudsida",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Sida",

package/lang/th.js

@@ -151,6 +151,7 @@ export default {
 	"components.more-less.more": "เพิ่มเติม",
 	"components.object-property-list.item-placeholder-text": "รายการตัวแทน",
 	"components.overflow-group.moreActions": "การดำเนินการเพิ่มเติม",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "หลัก",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "ด้านข้าง",

package/lang/tr.js

@@ -155,6 +155,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Ana",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Yan",

package/lang/vi.js

@@ -149,6 +149,7 @@ 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.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Chính",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Bên",

package/lang/zh-cn.js

@@ -150,6 +150,7 @@ export default {
 	"components.more-less.more": "更多",
 	"components.object-property-list.item-placeholder-text": "占位符项目",
 	"components.overflow-group.moreActions": "更多操作",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "侧面",

package/lang/zh-tw.js

@@ -151,6 +151,7 @@ export default {
 	"components.more-less.more": "較多",
 	"components.object-property-list.item-placeholder-text": "預留位置項目",
 	"components.overflow-group.moreActions": "其他動作",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "側邊",

package/package.json

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