@brightspace-ui/core 3.315.0 → 3.317.0

package/components/page/page-divider-internal.js

@@ -72,6 +72,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		 * @type {number}
 		 */
 		currentSize: { type: Number, attribute: 'current-size' },
+		/**
+		 * Whether to force-hide the directional arrows
+		 * @type {boolean}
+		 */
+		hideArrows: { type: Boolean, attribute: 'hide-arrows' },
 		/**
 		 * REQUIRED: label for the divider
 		 * @type {string}
@@ -228,6 +233,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.collapsed = false;
 		this.collapsedSize = 0;
 		this.currentSize = 0;
+		this.hideArrows = false;
 		this.label = '';
 		this.maxSize = 0;
 		this.minSize = 0;
@@ -258,7 +264,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 		return html`
 		    <div class="${classMap(dividerClasses)}" @click="${this.#handleClick}" @pointerdown="${this.#handlePointerDown}">
-				${this.panelType === 'panel' ? html`
+				${this.panelType === 'panel' && !this.hideArrows ? html`
 					<div class="divider-arrow start" data-position="start" ?hidden="${!showStartArrow}">
 						<d2l-icon-custom size="tier1">${ICON_ARROW_COLLAPSE_LEFT}</d2l-icon-custom>
 					</div>

package/components/page/page.js

@@ -27,6 +27,8 @@ const MOBILE_MODE_BREAKPOINT = 767;
 const overlayModeQuery = window.matchMedia(`(max-width: ${OVERLAY_MODE_BREAKPOINT}px)`);
 const mobileModeQuery = window.matchMedia(`(max-width: ${MOBILE_MODE_BREAKPOINT}px)`);
 
+export const HIDE_ARROWS_BREAKPOINT = 400;
+
 class PanelStateController {
 	constructor(host, panelConfigs) {
 		this.#host = host;
@@ -594,6 +596,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 				max-size="${this._panelState.getMaxSize(panelKey)}"
 				min-size="${this._panelState.getMinSize(panelKey)}"
 				panel-position="${ifDefined(panelPosition)}"
+				?hide-arrows="${this._contentWidth < HIDE_ARROWS_BREAKPOINT}"
 				@d2l-page-divider-resize="${this.#handleDividerResize}"
 				@d2l-page-divider-resize-live="${this.#handleDividerResizeLive}"
 				@d2l-page-divider-toggle="${this.#handleDividerToggle}"

package/components/tabs/README.md

@@ -257,11 +257,6 @@ Selecting a tab in the tab bar causes the related tab panel to be displayed. Tab
 |--|--|--|
 | `labelled-by` | String, required | Id of the tab that labels this panel |
 | `no-padding` | Boolean | Used to opt out of default padding/whitespace around the panel |
-| `text` | String | DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation. |
-| `selected` | Boolean | DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation. |
-
-### Events
-- `d2l-tab-panel-selected`: DEPRECATED: Dispatched when a tab is selected
 <!-- docs: end hidden content -->
 
 ## Accessibility

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

@@ -1,6 +1,5 @@
 import { css } from 'lit';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { getUseNewTabsStructureFlag } from './tabs.js';
 
 export const TabPanelMixin = superclass => class extends superclass {
 
@@ -20,18 +19,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		 */
 		// eslint-disable-next-line lit/no-native-attributes
 		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 },
 		_selected: { type: Boolean, attribute: '_selected', reflect: true }
 	};
 
@@ -44,10 +31,6 @@ 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;
 		}
@@ -59,7 +42,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		/** @ignore */
 		this.role = 'tabpanel';
 		this._selected = false;
-		if (!this.#useTabsNewStructure) this.selected = false; // clean up with GAUD-8299-core-tabs-use-new-structure flag clean up
 	}
 
 	connectedCallback() {
@@ -74,29 +56,7 @@ export const TabPanelMixin = superclass => class extends superclass {
 			if (prop === 'labelledBy') {
 				this.setAttribute('aria-labelledby', this.labelledBy);
 			}
-
-			// 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 */
-						this.dispatchEvent(new CustomEvent(
-							'd2l-tab-panel-selected', { bubbles: true, composed: true }
-						));
-					});
-				}
-			} else if (prop === 'text') {
-				this.setAttribute('aria-label', this.text);
-				/** DEPRECATED: Dispatched when the text attribute is changed */
-				this.dispatchEvent(new CustomEvent(
-					'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
-				));
-			}
 		});
 	}
 
-	#useTabsNewStructure = getUseNewTabsStructureFlag();
-
 };

package/components/tabs/tabs.js

@@ -1,24 +1,17 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import './tab-internal.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { 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';
-import { repeat } from 'lit/directives/repeat.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-export function getUseNewTabsStructureFlag() {
-	return getFlag('GAUD-8299-core-tabs-use-new-structure', true);
-}
-
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 const scrollButtonWidth = 56;
@@ -30,7 +23,6 @@ function getOffsetLeft(tab, tabRect) {
 
 /**
  * A component for tabbed content. It supports the "d2l-tab" component and "TabMixin" consumers for tabs, the "d2l-tab-panel" component for the tab content, renders tabs responsively, and provides virtual scrolling for large tab lists.
- * @slot - DEPRECATED: Contains the tab panels (e.g., "d2l-tab-panel" components)
  * @slot ext - Additional content (e.g., a button) positioned at right
  * @slot tabs - Contains the tabs (e.g., "d2l-tab" components or custom components that use `TabMixin`)
  * @slot panels - Contains the tab panels (e.g., "d2l-tab-panel" components)
@@ -50,11 +42,9 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		text: { type: String },
 		_allowScrollNext: { type: Boolean },
 		_allowScrollPrevious: { type: Boolean },
-		_defaultSlotBehavior: { state: true },
 		_maxWidth: { type: Number },
 		_scrollCollapsed: { type: Boolean },
 		_state: { type: String },
-		_tabInfos: { type: Array },
 		_translationValue: {}
 	};
 
@@ -169,12 +159,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			transition: margin-top 200ms ease-out;
 		}
 
-		d2l-tab-internal, ::slotted([role="tab"]) {
+		::slotted([role="tab"]) {
 			-webkit-transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
 			transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
 		}
-		d2l-tab-internal[data-state="adding"],
-		d2l-tab-internal[data-state="removing"],
 		::slotted([role="tab"][data-state="adding"]),
 		::slotted([role="tab"][data-state="removing"]) {
 			max-width: 0;
@@ -200,7 +188,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				-webkit-transition: none;
 				transition: none;
 			}
-			d2l-tab-internal, ::slotted([role="tab"]) {
+			::slotted([role="tab"]) {
 				-webkit-transition: none;
 				transition: none;
 			}
@@ -229,13 +217,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this.maxToShow = -1;
 		this._allowScrollNext = false;
 		this._allowScrollPrevious = false;
-
-		/*
-		* 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;
@@ -243,7 +224,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this._state = 'shown';
 		this._tabIds = {};
 		this._tabs = [];
-		if (this._defaultSlotBehavior) this._tabInfos = [];
 		this._translationValue = 0;
 	}
 
@@ -268,61 +248,32 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		super.firstUpdated(changedProperties);
 
 		this.arrowKeysFocusablesProvider = async() => {
-			return this._defaultSlotBehavior ? [...this.shadowRoot.querySelectorAll('d2l-tab-internal')] : this._tabs;
+			return this._tabs;
 		};
 
 		this.arrowKeysOnBeforeFocus = async(tab) => {
-			if (this._defaultSlotBehavior) {
-				// remove this section with GAUD-8299-core-tabs-use-new-structure flag clean up
-				const tabInfo = this._getTabInfo(tab.controlsPanel);
-				this._setFocusableDefaultSlotBehavior(tabInfo);
+			this._setFocusable(tab);
 
-				this.requestUpdate();
-				await this.updateComplete;
+			this.requestUpdate();
+			await this.updateComplete;
 
-				if (!this._scrollCollapsed) {
-					return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
-				} else {
-					const measures = this._getMeasures();
-					const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(tabInfo, measures);
-
-					if (!this.#isRTL()) {
-						if (newTranslationValue >= 0) return;
-					} else {
-						if (newTranslationValue <= 0) return;
-					}
-
-					const expanded = await this._tryExpandTabsContainer(measures);
-					if (expanded) {
-						return;
-					} else {
-						return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
-					}
-				}
+			if (!this._scrollCollapsed) {
+				return this._updateScrollPosition(tab);
 			} else {
-				this._setFocusable(tab);
+				const measures = this._getMeasures();
+				const newTranslationValue = this._calculateScrollPosition(tab, measures);
 
-				this.requestUpdate();
-				await this.updateComplete;
+				if (!this.#isRTL()) {
+					if (newTranslationValue >= 0) return;
+				} else {
+					if (newTranslationValue <= 0) return;
+				}
 
-				if (!this._scrollCollapsed) {
-					return this._updateScrollPosition(tab);
+				const expanded = await this._tryExpandTabsContainer(measures);
+				if (expanded) {
+					return;
 				} else {
-					const measures = this._getMeasures();
-					const newTranslationValue = this._calculateScrollPosition(tab, measures);
-
-					if (!this.#isRTL()) {
-						if (newTranslationValue >= 0) return;
-					} else {
-						if (newTranslationValue <= 0) return;
-					}
-
-					const expanded = await this._tryExpandTabsContainer(measures);
-					if (expanded) {
-						return;
-					} else {
-						return this._updateScrollPosition(tab);
-					}
+					return this._updateScrollPosition(tab);
 				}
 			}
 		};
@@ -377,15 +328,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 							aria-label="${ifDefined(this.text)}"
 							role="tablist"
 							style="${styleMap(tabsContainerListStyles)}">
-							${!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}"
-									?skeleton="${this.skeleton}"
-									tabindex="${tabInfo.activeFocusable ? 0 : -1}"
-									text="${tabInfo.text}">
-								</d2l-tab-internal>
-							`) : nothing}
 							<slot name="tabs" @slotchange="${this._handleTabsSlotChange}"></slot>
 						</div>
 					`)}
@@ -399,10 +341,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				</div>
 				<div class="d2l-tabs-container-ext"><slot name="ext"></slot></div>
 			</div>
-			<div class="${classMap(panelContainerClasses)}"
-				@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}
+			<div class="${classMap(panelContainerClasses)}">
 				<slot name="panels" @slotchange="${this._handlePanelsSlotChange}"></slot>
 			</div>
 		`;
@@ -427,7 +366,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	#checkTabPanelMatchRequested;
-	#newTabsPanelStructure = getUseNewTabsStructureFlag();
 	#panels;
 	#updateAriaControlsRequested;
 
@@ -452,24 +390,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		});
 	}
 
-	// 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="${CSS.escape(tabInfo.id)}"]`);
-		if (!tab) Promise.resolve();
-
-		return new Promise((resolve) => {
-			const handleTransitionEnd = (e) => {
-				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
-				resolve();
-			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
-			tabInfo.state = '';
-			this.requestUpdate();
-		});
-	}
-
 	_animateTabRemoval(tab) {
 		if (!tab || reduceMotion) return Promise.resolve();
 
@@ -484,42 +404,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		});
 	}
 
-	// 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="${CSS.escape(tabInfo.id)}"]`);
-		if (!tab) Promise.resolve();
-
-		return new Promise((resolve) => {
-			const handleTransitionEnd = (e) => {
-				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
-				this._tabInfos.splice(this._tabInfos.findIndex(info => info.id === tabInfo.id), 1);
-				this.requestUpdate();
-				resolve();
-			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
-		});
-	}
-
 	_calculateScrollPosition(selectedTab, measures) {
 		const tabs = this._tabs;
 		const selectedTabIndex = tabs.indexOf(selectedTab);
 		return this.#calculateScrollPositionLogic(tabs, selectedTabIndex, measures);
 	}
 
-	// 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);
-	}
-
 	async _focusSelected() {
-		if (this._defaultSlotBehavior) {
-			this._focusSelectedDefaultSlotBehavior();
-			return;
-		}
-
 		const selectedTab = this._tabs.find(ti => ti.selected);
 		if (!selectedTab) return;
 
@@ -528,17 +419,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		selectedTab.focus();
 	}
 
-	// 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;
-
-		const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
-		await this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
-
-		selectedTab.focus();
-	}
-
 	_getComputedBackgroundColor() {
 		let bgColor = null;
 
@@ -559,158 +439,21 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	_getPanel(id) {
-		if (this._defaultSlotBehavior) return this._getPanelDefaultSlotBehavior(id);
-
 		if (!this.#panels) return;
 		return this.#panels.find(panel => panel.labelledBy === id);
 	}
 
-	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-	_getPanelDefaultSlotBehavior(id) {
-		if (!this.shadowRoot) return;
-		// use simple selector for slot (Edge)
-		const slot = this.shadowRoot.querySelector('.d2l-panels-container').querySelector('slot');
-		const panels = this._getPanelsDefaultSlotBehavior(slot);
-		for (let i = 0; i < panels.length; i++) {
-			if (panels[i].nodeType === Node.ELEMENT_NODE && panels[i].role === 'tabpanel' && panels[i].id === id) {
-				return panels[i];
-			}
-		}
-	}
-
-	// 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 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;
-
-		const panels = this._getPanelsDefaultSlotBehavior(e.target);
-
-		// handle case where there are less than two tabs initially
-		this._updateTabListVisibility(panels);
-
-		if (!this._initialized && panels.length === 0) return;
-
-		let selectedTabInfo = null;
-
-		const newTabInfos = panels.map((panel) => {
-			let state = '';
-			if (this._initialized && !reduceMotion && panels.length !== this._tabInfos.length) {
-				// if it's a new tab, update state to animate addition
-				if (this._tabInfos.findIndex(info => info.id === panel.id) === -1) {
-					state = 'adding';
-				}
-			}
-			const tabInfo = {
-				id: panel.id,
-				text: panel.text,
-				selected: panel.selected,
-				state: state
-			};
-			if (tabInfo.selected) {
-				selectedTabInfo = tabInfo;
-				this._setFocusableDefaultSlotBehavior(tabInfo);
-			}
-			return tabInfo;
-		});
-
-		if (this._initialized && !reduceMotion && this._tabInfos.length !== newTabInfos.length) {
-			this._tabInfos.forEach((info, index) => {
-				// if a tab was removed, include old info to animate it away
-				if (newTabInfos.findIndex(newInfo => newInfo.id === info.id) === -1) {
-					info.state = 'removing';
-					info.selected = false;
-					newTabInfos.splice(index, 0, info);
-				}
-			});
-		}
-		this._tabInfos = newTabInfos;
-
-		if (this._tabInfos.length > 0 && !selectedTabInfo) {
-			selectedTabInfo = this._tabInfos.find(tabInfo => tabInfo.state !== 'removing');
-			if (selectedTabInfo) {
-				selectedTabInfo.activeFocusable = true;
-				selectedTabInfo.selected = true;
-			}
-		}
-
-		await this.updateComplete;
-
-		const animPromises = [];
-		if (!this._initialized && this._tabInfos.length > 0) {
-
-			this._initialized = true;
-			await this._updateTabsContainerWidthDefaultSlotBehavior(selectedTabInfo);
-
-		} else {
-
-			if (this._tabInfos.length > 1) {
-				this._tabInfos.forEach((info) => {
-					if (info.state === 'adding') animPromises.push(this._animateTabAdditionDefaultSlotBehavior(info));
-					else if (info.state === 'removing') animPromises.push(this._animateTabRemovalDefaultSlotBehavior(info));
-				});
-			}
-
-			// required for animation
-			this._updateMeasures();
-		}
-
-		if (selectedTabInfo) {
-			Promise.all(animPromises).then(() => {
-				this._updateMeasures();
-				return this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
-			});
-		}
-
-	}
-
 	_handleFocusOut(e) {
 		if (e.relatedTarget && e.relatedTarget.role === 'tab') return;
 		this._resetFocusables();
 	}
 
-	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-	_handlePanelSelected(e) {
-		if (!this._defaultSlotBehavior) return;
-
-		const tabInfo = this._getTabInfo(e.target.id);
-		// event could be from nested tabs
-		if (!tabInfo) return;
-
-		this._setFocusableDefaultSlotBehavior(tabInfo);
-		tabInfo.selected = true;
-		this.requestUpdate();
-	}
-
 	_handlePanelsSlotChange(e) {
-		if (this._defaultSlotBehavior) return;
-
 		this.#panels = e.target.assignedElements({ flatten: true }).filter((node) => node.role === 'tabpanel');
 		this.#checkTabPanelMatch();
 		this.#setAriaControls();
 	}
 
-	// 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
-		if (!tabInfo) return;
-		tabInfo.text = e.target.text;
-		this.requestUpdate();
-		await this.updateComplete;
-		this._updateMeasures();
-		await this._updateScrollVisibility(this._getMeasures());
-	}
-
 	_handleResize(entries) {
 		const measures = this._getMeasures();
 		if (entries.length === 1 && entries[0].contentRect.width === measures.tabsContainerListRect.width) return;
@@ -801,48 +544,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	async _handleTabSelected(e) {
-		if (this._defaultSlotBehavior) {
-			this._handleTabSelectedDefaultSlotBehavior(e);
-			return;
-		}
-
 		const selectedTab = e.target;
 		this.#updateSelectedTab(selectedTab);
 		await this.updateComplete;
 		this._updateScrollPosition(selectedTab);
 	}
 
-	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-	async _handleTabSelectedDefaultSlotBehavior(e) {
-		e.stopPropagation();
-
-		const selectedTab = e.target;
-		const selectedPanel = this._getPanel(selectedTab.controlsPanel);
-		const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
-		selectedTabInfo.activeFocusable = true;
-
-		await this.updateComplete;
-		this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
-
-		selectedPanel.selected = true;
-		this._tabInfos.forEach((tabInfo) => {
-			if (tabInfo.id !== selectedTab.controlsPanel) {
-				if (tabInfo.selected) {
-					tabInfo.selected = false;
-					const panel = this._getPanel(tabInfo.id);
-					// panel may not exist if it's being removed
-					if (panel) panel.selected = false;
-				}
-				if (tabInfo.activeFocusable) tabInfo.activeFocusable = false;
-			}
-		});
-
-		this.requestUpdate();
-	}
-
 	async _handleTabsSlotChange(e) {
-		this._defaultSlotBehavior = false;
-
 		this._tabs = e.target.assignedElements({ flatten: true }).filter((node) => node.role === 'tab');
 
 		// handle case where there are less than two tabs initially
@@ -912,13 +620,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	_resetFocusables() {
-		if (this._defaultSlotBehavior) {
-			const selectedTab = this._tabInfos.find(ti => ti.selected);
-			if (selectedTab) this._setFocusableDefaultSlotBehavior(selectedTab);
-		} else {
-			const selectedTab = this._tabs.find(ti => ti.selected);
-			if (selectedTab) this._setFocusable(selectedTab);
-		}
+		const selectedTab = this._tabs.find(ti => ti.selected);
+		if (selectedTab) this._setFocusable(selectedTab);
 		this.requestUpdate();
 	}
 
@@ -950,14 +653,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		tab.tabIndex = 0;
 	}
 
-	// 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;
-
-		tabInfo.activeFocusable = true;
-	}
-
 	async _tryExpandTabsContainer(measures) {
 
 		if (!this._scrollCollapsed) return false;
@@ -1005,11 +700,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	_updateMeasures() {
 		let totalTabsWidth = 0;
 		if (!this.shadowRoot) return;
-		const tabs = this._defaultSlotBehavior ? [...this.shadowRoot.querySelectorAll('d2l-tab-internal')] : this._tabs;
+		const tabs = this._tabs;
 
 		const tabRects = tabs.map((tab) => {
 			const tabRect = tab.getBoundingClientRect();
-			const offsetLeft = this._defaultSlotBehavior ? tab.offsetLeft : getOffsetLeft(tab, tabRect);
+			const offsetLeft = getOffsetLeft(tab, tabRect);
 
 			const measures = {
 				rect: tabRect,
@@ -1033,13 +728,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#updateScrollPositionLogic(measures, newTranslationValue);
 	}
 
-	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-	_updateScrollPositionDefaultSlotBehavior(selectedTabInfo) {
-		const measures = this._getMeasures();
-		const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(selectedTabInfo, measures);
-		return this.#updateScrollPositionLogic(measures, newTranslationValue);
-	}
-
 	_updateScrollVisibility(measures) {
 
 		const lastTabMeasures = measures.tabRects[measures.tabRects.length - 1];
@@ -1061,19 +749,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	_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();
@@ -1092,13 +767,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.#updateTabsContainerWidthLogic();
 	}
 
-	// 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;
-		return this.#updateTabsContainerWidthLogic();
-	}
-
 	#calculateScrollPositionLogic(tabsDataStructure, selectedTabIndex, measures) {
 		if (!measures.tabRects[selectedTabIndex]) return 0;
 
@@ -1199,10 +867,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 	#handleTabDeselected(e) {
 		const panel = this._getPanel(e.target.id);
-		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 (panel) panel._selected = false;
 	}
 
 	#handleTabHiddenChange() {
@@ -1290,20 +955,14 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		selectedTab.tabIndex = 0;
 
 		const selectedPanel = this._getPanel(selectedTab.id);
-		if (selectedPanel) {
-			if (this.#newTabsPanelStructure) selectedPanel._selected = true;
-			else selectedPanel.selected = true; // remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-		}
+		if (selectedPanel) selectedPanel._selected = true;
 		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) {
-						if (this.#newTabsPanelStructure) panel._selected = false;
-						else panel.selected = false; // remove with GAUD-8299-core-tabs-use-new-structure flag clean up
-					}
+					if (panel) panel._selected = false;
 				}
 				if (tab.tabIndex === 0) tab.tabIndex = -1;
 			}

package/custom-elements.json

@@ -13366,6 +13366,12 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "hide-arrows",
+          "description": "Whether to force-hide the directional arrows",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label",
           "description": "REQUIRED: label for the divider",
@@ -13428,6 +13434,13 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "hideArrows",
+          "attribute": "hide-arrows",
+          "description": "Whether to force-hide the directional arrows",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -16752,80 +16765,6 @@
       "name": "d2l-tabs-array",
       "path": "./components/tabs/demo/tabs-array.js"
     },
-    {
-      "name": "d2l-tab-internal",
-      "path": "./components/tabs/tab-internal.js",
-      "attributes": [
-        {
-          "name": "controls-panel",
-          "type": "string"
-        },
-        {
-          "name": "text",
-          "type": "string"
-        },
-        {
-          "name": "aria-selected",
-          "type": "string",
-          "default": "\"false\""
-        },
-        {
-          "name": "role",
-          "type": "string",
-          "default": "\"tab\""
-        },
-        {
-          "name": "skeleton",
-          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
-          "type": "boolean"
-        }
-      ],
-      "properties": [
-        {
-          "name": "controlsPanel",
-          "attribute": "controls-panel",
-          "type": "string"
-        },
-        {
-          "name": "text",
-          "attribute": "text",
-          "type": "string"
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"styles\",null]"
-        },
-        {
-          "name": "ariaSelected",
-          "attribute": "aria-selected",
-          "type": "string",
-          "default": "\"false\""
-        },
-        {
-          "name": "role",
-          "attribute": "role",
-          "type": "string",
-          "default": "\"tab\""
-        },
-        {
-          "name": "tabIndex",
-          "type": "number",
-          "default": "-1"
-        },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
-          "type": "boolean"
-        }
-      ],
-      "events": [
-        {
-          "name": "d2l-tab-selected"
-        }
-      ]
-    },
     {
       "name": "d2l-tab-panel",
       "path": "./components/tabs/tab-panel.js",
@@ -16836,16 +16775,6 @@
           "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.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
-          "type": "string"
-        },
         {
           "name": "no-padding",
           "description": "Opt out of default padding/whitespace around the panel",
@@ -16860,21 +16789,9 @@
           "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.\nRemove with GAUD-8299-core-tabs-use-new-structure flag clean up.",
-          "type": "string"
-        },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tmargin: 1.2rem 0 0 0;\\n\\t\\t}\\n\\t\\t:host([no-padding]) {\\n\\t\\t\\tmargin: 0;\\n\\t\\t}\\n\\t\\t/* clean up with GAUD-8299-core-tabs-use-new-structure flag clean up */\\n\\t\\t:host([selected]) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host([_selected]) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tmargin: 1.2rem 0 0 0;\\n\\t\\t}\\n\\t\\t:host([no-padding]) {\\n\\t\\t\\tmargin: 0;\\n\\t\\t}\\n\\t\\t:host([_selected]) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "noPadding",
@@ -16884,16 +16801,6 @@
           "default": "false"
         }
       ],
-      "events": [
-        {
-          "name": "d2l-tab-panel-selected",
-          "description": "DEPRECATED: Dispatched when a tab is selected"
-        },
-        {
-          "name": "d2l-tab-panel-text-changed",
-          "description": "DEPRECATED: Dispatched when the text attribute is changed"
-        }
-      ],
       "slots": [
         {
           "name": "",
@@ -17047,10 +16954,6 @@
         }
       ],
       "slots": [
-        {
-          "name": "",
-          "description": "DEPRECATED: Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
-        },
         {
           "name": "ext",
           "description": "Additional content (e.g., a button) positioned at right"

package/package.json

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

package/components/tabs/tab-internal.js

@@ -1,144 +0,0 @@
-import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { getFocusRingStyles } from '../../helpers/focus.js';
-import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
-import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-
-const keyCodes = {
-	ENTER: 13,
-	SPACE: 32
-};
-
-// remove file with GAUD-8299-core-tabs-use-new-structure flag clean up
-class Tab extends SkeletonMixin(LitElement) {
-
-	static properties = {
-		ariaSelected: { type: String, reflect: true, attribute: 'aria-selected' },
-		controlsPanel: { type: String, reflect: true, attribute: 'controls-panel' },
-		// eslint-disable-next-line lit/no-native-attributes
-		role: { type: String, reflect: true },
-		text: { type: String }
-	};
-
-	static styles = [super.styles, css`
-		:host {
-			box-sizing: border-box;
-			display: inline-block;
-			max-width: 200px;
-			outline: none;
-			position: relative;
-			vertical-align: middle;
-		}
-		.d2l-tab-text {
-			--d2l-focus-ring-offset: 0;
-			margin: 0.5rem;
-			padding: 0.1rem;
-			${overflowEllipsisDeclarations}
-		}
-		:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
-			bottom: 0.15rem;
-			top: 0.15rem;
-		}
-		:host(:first-child) .d2l-tab-text {
-			margin-inline-start: 0;
-		}
-		.d2l-tab-selected-indicator {
-			border-top: 4px solid var(--d2l-theme-brand-color-primary-default);
-			border-top-left-radius: 4px;
-			border-top-right-radius: 4px;
-			bottom: 0;
-			display: none;
-			margin: 1px 0.6rem 0 0.6rem;
-			position: absolute;
-			-webkit-transition: box-shadow 0.2s;
-			transition: box-shadow 0.2s;
-			width: calc(100% - 1.2rem);
-		}
-		:host([skeleton]) .d2l-tab-selected-indicator {
-			position: absolute; /* make sure skeleton styles do not override this */
-		}
-		.d2l-tab-text-skeletize-override {
-			min-width: 50px;
-		}
-		:host(:first-child) .d2l-tab-selected-indicator {
-			margin-inline-start: 0;
-			width: calc(100% - 0.6rem);
-		}
-		${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-theme-text-color-interactive-default);` })}
-		:host([aria-selected="true"]:focus) {
-			text-decoration: none;
-		}
-		:host(:hover) {
-			color: var(--d2l-theme-text-color-interactive-default);
-			cursor: pointer;
-		}
-		:host([aria-selected="true"]:hover) {
-			color: inherit;
-			cursor: default;
-		}
-		:host([aria-selected="true"]) .d2l-tab-selected-indicator {
-			display: block;
-		}
-
-		@media (prefers-reduced-motion: reduce) {
-			.d2l-tab-selected-indicator {
-				-webkit-transition: none;
-				transition: none;
-			}
-		}
-	`];
-
-	constructor() {
-		super();
-		this.ariaSelected = 'false';
-		this.role = 'tab';
-		this.tabIndex = -1;
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		this.addEventListener('click', () => {
-			this.ariaSelected = 'true';
-		});
-		this.addEventListener('keydown', (e) => {
-			if (e.keyCode !== keyCodes.SPACE) return;
-			e.stopPropagation();
-			e.preventDefault();
-		});
-		this.addEventListener('keyup', (e) => {
-			if (e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) return;
-			this.ariaSelected = 'true';
-		});
-	}
-
-	render() {
-		const overrideSkeletonText = this.skeleton && (!this.text || this.text.length === 0);
-		const textClasses = {
-			'd2l-tab-text': true,
-			'd2l-skeletize': true,
-			'd2l-tab-text-skeletize-override': overrideSkeletonText
-		};
-
-		return html`
-			<div class="${classMap(textClasses)}">${overrideSkeletonText ? html`&nbsp;` : this.text}</div>
-			<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
-		`;
-	}
-
-	update(changedProperties) {
-		super.update(changedProperties);
-		changedProperties.forEach((oldVal, prop) => {
-			if (prop === 'ariaSelected' && this.ariaSelected === 'true') {
-				this.dispatchEvent(new CustomEvent(
-					'd2l-tab-selected', { bubbles: true, composed: true }
-				));
-			} else if (prop === 'text') {
-				this.title = this.text;
-			}
-		});
-	}
-
-}
-
-customElements.define('d2l-tab-internal', Tab);