@brightspace-ui/core 3.148.10 → 3.149.1

package/components/tabs/demo/tabs.html

@@ -293,6 +293,50 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Tabs (before selected)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-tabs text="Courses" id="courses-before-selection">
+						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
+						<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
+					</d2l-tabs>
+
+					<script>
+						document.querySelector('#courses-before-selection').addEventListener('d2l-tab-before-selected', e => {
+							e.preventDefault();
+							setTimeout(() => {
+								e.detail.select();
+							}, 2000);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Tabs (before selected, don't select)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-tabs text="Courses" id="courses-before-selection-reset">
+						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
+						<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
+					</d2l-tabs>
+
+					<script>
+						document.querySelector('#courses-before-selection-reset').addEventListener('d2l-tab-before-selected', e => {
+							e.preventDefault();
+							setTimeout(() => {
+								e.detail.reset();
+							}, 2000);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Tabs (deprecated structure)</h2>
 
 			<d2l-demo-snippet>

package/components/tabs/tab-mixin.js

@@ -24,7 +24,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 			/**
 			 * @ignore
 			 */
-			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' }
+			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' },
+			_clicked: { type: Boolean, reflect: true },
 		};
 	}
 
@@ -66,6 +67,9 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				color: var(--d2l-color-celestine);
 				cursor: pointer;
 			}
+			:host([_clicked]) {
+				color: var(--d2l-color-celestine);
+			}
 			:host([selected]:hover) {
 				color: inherit;
 				cursor: default;
@@ -88,6 +92,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		this.role = 'tab';
 		this.selected = false;
 		this.tabIndex = -1;
+
+		this._clicked = false;
 	}
 
 	firstUpdated(changedProperties) {
@@ -135,7 +141,21 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 	}
 
 	#handleClick() {
+		this._clicked = true;
+		const beforeSelectedEvent = new CustomEvent('d2l-tab-before-selected', {
+			detail: {
+				select: () => { this.selected = true; this._clicked = false; },
+				reset: () => this._clicked = false
+			},
+			cancelable: true,
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(beforeSelectedEvent);
+		if (beforeSelectedEvent.defaultPrevented) return;
+
 		this.selected = true;
+		this._clicked = false;
 	};
 
 	#handleKeydown(e) {

package/components/tabs/tab.js

@@ -15,6 +15,7 @@ const focusRingStyles = getFocusRingStyles(
 /**
  * @attr {string} id - REQUIRED: Unique identifier for the tab
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
+ * @fires d2l-tab-before-selected - Dispatched before selected state is updated. Can be canceled to allow the consumer to handle when selected is set. This is useful if something needs to happen prior to selection.
  * @slot before - Slot for content to be displayed before the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *first* item assigned to this slot will be shown.
  * @slot after - Slot for content to be displayed after the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *last* item assigned to this slot will be shown.
  */
@@ -88,6 +89,7 @@ class Tab extends TabMixin(LitElement) {
 
 		if (changedProperties.has('text')) {
 			this.dispatchContentChangeEvent();
+			this.title = this.text;
 		}
 	}
 

package/custom-elements.json

@@ -13749,6 +13749,9 @@
         },
         {
           "name": "d2l-tab-content-change"
+        },
+        {
+          "name": "d2l-tab-before-selected"
         }
       ]
     },
@@ -13956,6 +13959,10 @@
           "name": "d2l-tab-content-change",
           "description": "Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs."
         },
+        {
+          "name": "d2l-tab-before-selected",
+          "description": "Dispatched before selected state is updated. Can be canceled to allow the consumer to handle when selected is set. This is useful if something needs to happen prior to selection."
+        },
         {
           "name": "d2l-tab-selected",
           "description": "Dispatched when a tab is selected"

package/package.json

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