@brightspace-ui/core 3.248.1 → 3.250.0

package/components/page/page-header-button.js

@@ -73,10 +73,10 @@ class PageHeaderButton extends FocusMixin(LitElement) {
 
 	render() {
 		const { ariaLabel, id, text, tooltip } = this.#getRenderSettings();
-		const highlightBorder = !this.disabled ? html`<span class="d2l-labs-navigation-highlight-border"></span>` : nothing;
+		const highlightBorder = !this.disabled ? html`<span class="d2l-page-header-highlight-border"></span>` : nothing;
 		const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
 		return html`
-			<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">
+			<button class="d2l-page-header-highlight-button" id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">
 				${highlightBorder}
 				${this.iconPosition === 'start' ? icon : nothing}
 				${text}

package/components/page/page-header-immersive.js

@@ -0,0 +1,167 @@
+import '../alert/alert.js';
+import '../colors/colors.js';
+import '../icons/icon.js';
+import './page-header-custom.js';
+import { bodyCompactStyles, heading3Styles, labelStyles } from '../typography/styles.js';
+import { css, html, LitElement } from 'lit';
+import { highlightBorderStyles, highlightLinkStyles } from './page-header-styles.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
+import { RequesterMixin } from '../../mixins/provider/provider-mixin.js';
+
+class PageHeaderImmersive extends RequesterMixin(LocalizeCoreElement(LitElement)) {
+
+	static get properties() {
+		return {
+			backHref: { attribute: 'back-href', type: String },
+			backCustomText: { attribute: 'back-custom-text', type: String },
+			titleText: { attribute: 'title-text', type: String },
+			subtitleText: { attribute: 'subtitle-text', type: String },
+			_error: { state: true },
+			_hasActions: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, heading3Styles, labelStyles, highlightBorderStyles, highlightLinkStyles, css`
+			:host {
+				display: block;
+			}
+			:host([hidden]),
+			.actions[hidden] {
+				display: none;
+			}
+			.container {
+				align-items: stretch;
+				display: flex;
+				gap: 24px;
+				height: 3.1rem;
+			}
+			.title {
+				flex: 0 1 auto;
+				min-width: 0;
+				width: 100%;
+			}
+			.back,
+			.actions {
+				flex: 0 0 auto;
+			}
+			.title,
+			.actions {
+				border-inline-start: 1px solid var(--d2l-color-gypsum);
+				padding-inline-start: 24px;
+			}
+			.title h1 {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				justify-content: center;
+				margin: 0;
+			}
+			.actions {
+				align-items: center;
+				display: flex;
+				gap: 0.6rem;
+			}
+			.title h1 .d2l-heading-3 {
+				margin: 0;
+			}
+			.back-text-short {
+				display: none;
+			}
+			@media (max-width: 615px) {
+				.back-text-long {
+					display: none;
+				}
+				.back-text-short {
+					display: inline;
+				}
+			}
+			d2l-alert {
+				margin: 10px auto;
+			}
+			.title-text {
+				${overflowEllipsisDeclarations}
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this._error = false;
+		this._hasActions = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		const configurePageHeader = this.requestInstance('d2l-page-header-configure');
+		if (configurePageHeader) {
+			configurePageHeader({ sticky: true });
+		} else {
+			this._error = true;
+		}
+	}
+
+	render() {
+		if (this._error) return this.#renderError();
+		return html`
+			<d2l-page-header-custom>
+				<div class="container" slot="top">
+					${this.#renderBack()}
+					${this.#renderTitle()}
+					<div class="actions" ?hidden="${!this._hasActions}">
+						<slot name="actions" @slotchange="${this.#handleActionsSlotChange}"></slot>
+					</div>
+				</div>
+			</d2l-page-header-custom>
+		`;
+	}
+
+	#handleActionsSlotChange(e) {
+		this._hasActions = e.target.assignedNodes({ flatten: true })?.length > 0;
+	}
+
+	#handleBackClick() {
+		this.dispatchEvent(
+			new CustomEvent(
+				'd2l-page-header-immersive-back-click',
+				{ bubbles: false, composed: false }
+			)
+		);
+	}
+
+	#renderBack() {
+		const href = this.backHref || 'javascript:void(0);';
+		const commonText = this.localizeCommon('navigation:back:title');
+		const longText = this.backCustomText || commonText;
+		return html`
+			<div class="back d2l-body-compact">
+				<a class="d2l-page-header-highlight-link" href="${href}" aria-label="${longText}" @click="${this.#handleBackClick}">
+					<span class="d2l-page-header-highlight-border"></span>
+					<d2l-icon icon="tier1:chevron-left"></d2l-icon>
+					<span class="back-text-long">${longText}</span>
+					<span class="back-text-short">${commonText}</span>
+				</a>
+			</div>
+		`;
+	}
+
+	#renderError() {
+		return html`
+			<d2l-alert type="critical">&lt;d2l-page-header-immersive&gt; must be rendered inside a &lt;d2l-page&gt;'s header slot.</d2l-alert>
+		`;
+	}
+
+	#renderTitle() {
+		const title = this.titleText ? html`<div class="title-text d2l-heading-3">${this.titleText}</div>` : '';
+		const subtitle = this.subtitleText ? html`<div class="title-text d2l-label-text">${this.subtitleText}</div>` : '';
+		const heading = (title || subtitle) && html`<h1>${title}${subtitle}</h1>`;
+		return html`
+			<div class="title">
+				<slot name="title">${heading}</slot>
+			</div>
+		`;
+	}
+
+}
+customElements.define('d2l-page-header-immersive', PageHeaderImmersive);

package/components/page/page-header-styles.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import { css } from 'lit';
 
 export const highlightBorderStyles = css`
-	.d2l-labs-navigation-highlight-border {
+	.d2l-page-header-highlight-border {
 		background: transparent;
 		border-bottom-left-radius: 4px;
 		border-bottom-right-radius: 4px;
@@ -12,15 +12,15 @@ export const highlightBorderStyles = css`
 		position: absolute;
 		top: 0;
 	}
-	*:focus > .d2l-labs-navigation-highlight-border,
-	*:hover > .d2l-labs-navigation-highlight-border,
-	*[active] > .d2l-labs-navigation-highlight-border {
+	*:focus > .d2l-page-header-highlight-border,
+	*:hover > .d2l-page-header-highlight-border,
+	*[active] > .d2l-page-header-highlight-border {
 		background: var(--d2l-color-celestine);
 	}
 `;
 
 export const highlightButtonStyles = css`
-	button {
+	button.d2l-page-header-highlight-button {
 		align-items: center;
 		background: transparent;
 		border: none;
@@ -41,18 +41,39 @@ export const highlightButtonStyles = css`
 		white-space: nowrap;
 	}
 	/* Firefox includes a hidden border which messes up button dimensions */
-	button::-moz-focus-inner {
+	button.d2l-page-header-highlight-button::-moz-focus-inner {
 		border: 0;
 	}
-	button:not([disabled]):hover,
-	button:not([disabled]):focus,
-	button[active] {
+	button.d2l-page-header-highlight-button:not([disabled]):hover,
+	button.d2l-page-header-highlight-button:not([disabled]):focus,
+	button.d2l-page-header-highlight-button[active] {
 		--d2l-icon-fill-color: var(--d2l-color-celestine);
 		color: var(--d2l-color-celestine);
 		outline: none;
 	}
-	button[disabled] {
+	button.d2l-page-header-highlight-button[disabled] {
 		cursor: default;
 		opacity: 0.5;
 	}
 `;
+
+export const highlightLinkStyles = css`
+	a.d2l-page-header-highlight-link {
+		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.d2l-page-header-highlight-link:hover,
+	a.d2l-page-header-highlight-link:focus {
+		--d2l-icon-fill-color: var(--d2l-color-celestine);
+		color: var(--d2l-color-celestine);
+		outline: none;
+	}
+`;

package/components/page/page.js

@@ -3,6 +3,7 @@ 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';
+import { ProviderMixin } from '../../mixins/provider/provider-mixin.js';
 
 /**
  * Component for laying out a page, with header, optional footer and optional navigation or supporting panels
@@ -12,7 +13,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  * @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) {
+class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	static properties = {
 		/**
@@ -127,6 +128,9 @@ class Page extends LocalizeCoreElement(LitElement) {
 				}
 			}
 		});
+		this.provideInstance('d2l-page-header-configure', (options) => {
+			this._headerIsSticky = options.sticky;
+		});
 	}
 
 	disconnectedCallback() {
@@ -162,12 +166,6 @@ class Page extends LocalizeCoreElement(LitElement) {
 
 	#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();
@@ -200,7 +198,7 @@ class Page extends LocalizeCoreElement(LitElement) {
 		return html`
 			<header class="header">
 				<nav aria-label="${this.localize('components.page.header-nav-label')}">
-					<slot name="header" @slotchange="${this.#handleHeaderSlotChange}"></slot>
+					<slot name="header"></slot>
 				</nav>
 			</header>
 		`;

package/components/tabs/tab-internal.js

@@ -10,6 +10,7 @@ const keyCodes = {
 	SPACE: 32
 };
 
+// remove file with GAUD-8299-core-tabs-use-new-structure flag clean up
 class Tab extends SkeletonMixin(LitElement) {
 
 	static get properties() {

package/components/tabs/tab-panel-mixin.js

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
 export const TabPanelMixin = superclass => class extends superclass {
@@ -22,14 +23,17 @@ export const TabPanelMixin = superclass => class extends superclass {
 			role: { type: String, reflect: true },
 			/**
 			 * DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.
+			 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
 			 * @type {boolean}
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
 			 * DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
+			 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
 			 * @type {string}
 			 */
-			text: { type: String }
+			text: { type: String },
+			_selected: { type: Boolean, attribute: '_selected', reflect: true }
 		};
 	}
 
@@ -43,9 +47,13 @@ export const TabPanelMixin = superclass => class extends superclass {
 			:host([no-padding]) {
 				margin: 0;
 			}
+			/* clean up with GAUD-8299-core-tabs-use-new-structure flag clean up */
 			:host([selected]) {
 				display: block;
 			}
+			:host([_selected]) {
+				display: block;
+			}
 		`;
 	}
 
@@ -54,7 +62,8 @@ export const TabPanelMixin = superclass => class extends superclass {
 		this.noPadding = false;
 		/** @ignore */
 		this.role = 'tabpanel';
-		this.selected = false;
+		this._selected = false;
+		if (!this.#useTabsNewStructure) this.selected = false; // clean up with GAUD-8299-core-tabs-use-new-structure flag clean up
 	}
 
 	connectedCallback() {
@@ -68,7 +77,12 @@ export const TabPanelMixin = superclass => class extends superclass {
 		changedProperties.forEach((oldVal, prop) => {
 			if (prop === 'labelledBy') {
 				this.setAttribute('aria-labelledby', this.labelledBy);
-			} else if (prop === 'selected') {
+			}
+
+			// clean up below with GAUD-8299-core-tabs-use-new-structure flag clean up
+			if (this.#useTabsNewStructure) return;
+
+			if (prop === 'selected') {
 				if (this.selected) {
 					requestAnimationFrame(() => {
 						/** DEPRECATED: Dispatched when a tab is selected */
@@ -87,4 +101,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		});
 	}
 
+	#useTabsNewStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
+
 };

package/components/tabs/tabs.js

@@ -1,12 +1,13 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import './tab-internal.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor, getOffsetParent, isVisible } from '../../helpers/dom.js';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -229,14 +230,20 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this.maxToShow = -1;
 		this._allowScrollNext = false;
 		this._allowScrollPrevious = false;
-		this._defaultSlotBehavior = true; // remove after d2l-tab/d2l-tab-panel backport
+
+		/*
+		* Remove this._defaultSlotBehavior and related code with GAUD-8299-core-tabs-use-new-structure flag clean up
+		* NOTE: remove the TRUE case of _defaultSlotBehavior
+		*/
+		this._defaultSlotBehavior = !this.#newTabsPanelStructure;
+
 		this._loadingCompleteResolve = undefined;
 		this._loadingCompletePromise = new Promise(resolve => this._loadingCompleteResolve = resolve);
 		this._maxWidth = null;
 		this._scrollCollapsed = false;
 		this._state = 'shown';
 		this._tabIds = {};
-		this._tabInfos = []; // remove after d2l-tab/d2l-tab-panel backport
+		if (this._defaultSlotBehavior) this._tabInfos = [];
 		this._translationValue = 0;
 	}
 
@@ -266,7 +273,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 		this.arrowKeysOnBeforeFocus = async(tab) => {
 			if (this._defaultSlotBehavior) {
-				// remove this section after d2l-tab/d2l-tab-panel backport
+				// remove this section with GAUD-8299-core-tabs-use-new-structure flag clean up
 				const tabInfo = this._getTabInfo(tab.controlsPanel);
 				this._setFocusableDefaultSlotBehavior(tabInfo);
 
@@ -370,7 +377,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 							aria-label="${ifDefined(this.text)}"
 							role="tablist"
 							style="${styleMap(tabsContainerListStyles)}">
-							${repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html`
+							${!this.#newTabsPanelStructure ? repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html`
 								<d2l-tab-internal aria-selected="${tabInfo.selected ? 'true' : 'false'}"
 									.controlsPanel="${tabInfo.id}"
 									data-state="${tabInfo.state}"
@@ -378,7 +385,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 									tabindex="${tabInfo.activeFocusable ? 0 : -1}"
 									text="${tabInfo.text}">
 								</d2l-tab-internal>
-							`)}
+							`) : nothing}
 							<slot name="tabs" @slotchange="${this._handleTabsSlotChange}"></slot>
 						</div>
 					`)}
@@ -393,9 +400,9 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				<div class="d2l-tabs-container-ext"><slot name="ext"></slot></div>
 			</div>
 			<div class="${classMap(panelContainerClasses)}"
-				@d2l-tab-panel-selected="${this._handlePanelSelected}"
-				@d2l-tab-panel-text-changed="${this._handlePanelTextChange}">
-				<slot @slotchange="${this._handleDefaultSlotChange}"></slot>
+				@d2l-tab-panel-selected="${ifDefined(!this.#newTabsPanelStructure ? this._handlePanelSelected : undefined)}"
+				@d2l-tab-panel-text-changed="${ifDefined(!this.#newTabsPanelStructure ? this._handlePanelTextChange : undefined)}">
+				${!this.#newTabsPanelStructure ? html`<slot @slotchange="${this._handleDefaultSlotChange}"></slot>` : nothing}
 				<slot name="panels" @slotchange="${this._handlePanelsSlotChange}"></slot>
 			</div>
 		`;
@@ -420,6 +427,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	#checkTabPanelMatchRequested;
+	#newTabsPanelStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
 	#panels;
 	#updateAriaControlsRequested;
 
@@ -444,7 +452,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		});
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_animateTabAdditionDefaultSlotBehavior(tabInfo) {
 		const tab = this.shadowRoot
 			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
@@ -476,7 +484,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		});
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_animateTabRemovalDefaultSlotBehavior(tabInfo) {
 		const tab = this.shadowRoot &&
 			this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
@@ -500,7 +508,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#calculateScrollPositionLogic(tabs, selectedTabIndex, measures);
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_calculateScrollPositionDefaultSlotBehavior(selectedTabInfo, measures) {
 		const selectedTabIndex = this._tabInfos.indexOf(selectedTabInfo);
 		return this.#calculateScrollPositionLogic(this._tabInfos, selectedTabIndex, measures);
@@ -520,7 +528,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		selectedTab.focus();
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	async _focusSelectedDefaultSlotBehavior() {
 		const selectedTab = this.shadowRoot && this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
 		if (!selectedTab) return;
@@ -557,7 +565,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#panels.find(panel => panel.labelledBy === id);
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_getPanelDefaultSlotBehavior(id) {
 		if (!this.shadowRoot) return;
 		// use simple selector for slot (Edge)
@@ -570,17 +578,18 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		}
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// rremove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_getPanelsDefaultSlotBehavior(slot) {
 		if (!slot) return;
 		return slot.assignedElements({ flatten: true }).filter((node) => node.role === 'tabpanel');
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_getTabInfo(id) {
 		return this._tabInfos.find((t) => t.id === id);
 	}
 
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	async _handleDefaultSlotChange(e) {
 		if (!this._defaultSlotBehavior) return;
 
@@ -669,7 +678,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this._resetFocusables();
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_handlePanelSelected(e) {
 		if (!this._defaultSlotBehavior) return;
 
@@ -690,7 +699,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this.#setAriaControls();
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	async _handlePanelTextChange(e) {
 		const tabInfo = this._getTabInfo(e.target.id);
 		// event could be from nested tabs
@@ -803,7 +812,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this._updateScrollPosition(selectedTab);
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	async _handleTabSelectedDefaultSlotBehavior(e) {
 		e.stopPropagation();
 
@@ -940,7 +949,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		tab.tabIndex = 0;
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_setFocusableDefaultSlotBehavior(tabInfo) {
 		const currentFocusable = this._tabInfos.find(ti => ti.activeFocusable);
 		if (currentFocusable) currentFocusable.activeFocusable = false;
@@ -1023,7 +1032,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#updateScrollPositionLogic(measures, newTranslationValue);
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_updateScrollPositionDefaultSlotBehavior(selectedTabInfo) {
 		const measures = this._getMeasures();
 		const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(selectedTabInfo, measures);
@@ -1050,13 +1059,26 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.updateComplete;
 	}
 
-	// Legacy structure clean up: if possible base this on visible tabs going forward
-	_updateTabListVisibility(panels) {
-		if (this._state === 'shown' && panels.length < 2) {
+	_updateTabListVisibility(tabs) {
+		// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
+		if (!this.#newTabsPanelStructure) {
+			if (this._state === 'shown' && tabs.length < 2) {
+				this.#hideTabsList();
+			} else if (this._state === 'hidden' && tabs.length > 1) {
+				this.#showTabsList();
+			} else if (this._state === 'shown' && tabs.length > 1) {
+				// check if there are hidden tabs and tab list container should actually be hidden
+				this.#handleTabHiddenChange();
+			}
+			return;
+		}
+
+		const visibleCount = tabs.filter(tab => !tab.hidden).length;
+		if (this._state === 'shown' && visibleCount < 2) {
 			this.#hideTabsList();
-		} else if (this._state === 'hidden' && panels.length > 1) {
+		} else if (this._state === 'hidden' && visibleCount > 1) {
 			this.#showTabsList();
-		} else if (this._state === 'shown' && panels.length > 1) {
+		} else if (this._state === 'shown' && visibleCount > 1) {
 			// check if there are hidden tabs and tab list container should actually be hidden
 			this.#handleTabHiddenChange();
 		}
@@ -1069,7 +1091,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#updateTabsContainerWidthLogic();
 	}
 
-	// remove after d2l-tab/d2l-tab-panel backport
+	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_updateTabsContainerWidthDefaultSlotBehavior(selectedTabInfo) {
 		if (!this.maxToShow || this.maxToShow <= 0 || this.maxToShow >= this._tabInfos.length) return;
 		if (this._tabInfos.indexOf(selectedTabInfo) > this.maxToShow - 1) return;
@@ -1176,7 +1198,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 	#handleTabDeselected(e) {
 		const panel = this._getPanel(e.target.id);
-		if (panel) panel.selected = false;
+		if (panel) {
+			if (this.#newTabsPanelStructure) panel._selected = false;
+			else panel.selected = false; // remove with GAUD-8299-core-tabs-use-new-structure flag clean up
+		}
 	}
 
 	#handleTabHiddenChange() {
@@ -1264,14 +1289,20 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		selectedTab.tabIndex = 0;
 
 		const selectedPanel = this._getPanel(selectedTab.id);
-		if (selectedPanel) selectedPanel.selected = true;
+		if (selectedPanel) {
+			if (this.#newTabsPanelStructure) selectedPanel._selected = true;
+			else selectedPanel.selected = true; // remove with GAUD-8299-core-tabs-use-new-structure flag clean up
+		}
 		this._tabs.forEach((tab) => {
 			if (tab.id !== selectedTab.id) {
 				if (tab.selected) {
 					tab.selected = false;
 					const panel = this._getPanel(tab.id);
 					// panel may not exist if it's being removed
-					if (panel) panel.selected = false;
+					if (panel) {
+						if (this.#newTabsPanelStructure) panel._selected = false;
+						else panel.selected = false; // remove with GAUD-8299-core-tabs-use-new-structure flag clean up
+					}
 				}
 				if (tab.tabIndex === 0) tab.tabIndex = -1;
 			}

package/custom-elements.json

@@ -12266,7 +12266,6 @@
     {
       "name": "d2l-page-demo",
       "path": "./components/page/demo/page-component.js",
-      "description": "Component for d2l-page demos and tests",
       "properties": [
         {
           "name": "properties",
@@ -12276,7 +12275,7 @@
         {
           "name": "styles",
           "type": "CSSResult[]",
-          "default": "[\"navStyles\",\"selectStyles\",\"tableStyles\",null]"
+          "default": "[\"selectStyles\",\"tableStyles\",null]"
         },
         {
           "name": "demoMode",
@@ -12325,6 +12324,17 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-header-full-demo",
+      "path": "./components/page/demo/page-header-full.js",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"css`\\n\\t\\t.full-nav-header {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 90px;\\n\\t\\t}\\n\\t\\t.full-nav-header-left {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-spacer {\\n\\t\\t\\tflex: 1 1 auto;\\n\\t\\t\\tmin-width: 30px;\\n\\t\\t}\\n\\t\\t.full-nav-header-right {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-right d2l-page-header-button {\\n\\t\\t\\tmargin-inline: 15px;\\n\\t\\t}\\n\\t\\t.full-nav-logo {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tfont-size: 0.8rem;\\n\\t\\t\\tfont-weight: 700;\\n\\t\\t\\tpadding: 8px 14px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 20px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link {\\n\\t\\t\\tborder-bottom: 4px solid transparent;\\n\\t\\t\\tcolor: var(--d2l-color-ferrite);\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tpadding: 8px 0;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link:hover,\\n\\t\\t.full-nav-footer-link:focus-visible {\\n\\t\\t\\tborder-bottom-color: var(--d2l-color-celestine);\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t`\""
+        }
+      ]
+    },
     {
       "name": "d2l-page-footer",
       "path": "./components/page/page-footer.js",
@@ -12469,6 +12479,55 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-header-immersive",
+      "path": "./components/page/page-header-immersive.js",
+      "attributes": [
+        {
+          "name": "back-href",
+          "type": "string"
+        },
+        {
+          "name": "back-custom-text",
+          "type": "string"
+        },
+        {
+          "name": "title-text",
+          "type": "string"
+        },
+        {
+          "name": "subtitle-text",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "backHref",
+          "attribute": "back-href",
+          "type": "string"
+        },
+        {
+          "name": "backCustomText",
+          "attribute": "back-custom-text",
+          "type": "string"
+        },
+        {
+          "name": "titleText",
+          "attribute": "title-text",
+          "type": "string"
+        },
+        {
+          "name": "subtitleText",
+          "attribute": "subtitle-text",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-page-header-immersive-back-click"
+        }
+      ]
+    },
     {
       "name": "d2l-page-header-separator",
       "path": "./components/page/page-header-separator.js",
@@ -15331,9 +15390,14 @@
           "description": "REQUIRED: Id of the tab that labels this panel",
           "type": "string"
         },
+        {
+          "name": "selected",
+          "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
+          "type": "boolean"
+        },
         {
           "name": "text",
-          "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
+          "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
           "type": "string"
         },
         {
@@ -15341,12 +15405,6 @@
           "description": "Opt out of default padding/whitespace around the panel",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "selected",
-          "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "properties": [
@@ -15356,10 +15414,16 @@
           "description": "REQUIRED: Id of the tab that labels this panel",
           "type": "string"
         },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
+          "type": "boolean"
+        },
         {
           "name": "text",
           "attribute": "text",
-          "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
+          "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
           "type": "string"
         },
         {
@@ -15368,13 +15432,6 @@
           "description": "Opt out of default padding/whitespace around the panel",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "selected",
-          "attribute": "selected",
-          "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.248.1",
+  "version": "3.250.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -66,7 +66,7 @@
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^3",
     "sass": "^1",
-    "sinon": "^21",
+    "sinon": "^22",
     "stylelint": "^17",
     "web-component-analyzer": "^2"
   },