@brightspace-ui/core 3.96.0 → 3.97.1

package/components/empty-state/empty-state-action-button.js

@@ -1,6 +1,7 @@
 import '../button/button.js';
 import '../button/button-subtle.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
@@ -9,7 +10,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  * @fires d2l-empty-state-action - Dispatched when the action button is clicked
  * @fires d2l-empty-state-illustrated-check - Internal event
  */
-class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
+class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -40,6 +41,10 @@ class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
 		this._illustrated = false;
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-empty-state-action';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		requestAnimationFrame(() => {

package/components/empty-state/empty-state-action-link.js

@@ -1,12 +1,13 @@
 import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { linkStyles } from '../link/link.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 /**
  * `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.
  */
-class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
+class EmptyStateActionLink extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -27,6 +28,10 @@ class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
 		return [bodyCompactStyles, linkStyles];
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
 	render() {
 		const actionLink = this.text && this.href
 			? html`

package/components/empty-state/empty-state-illustrated.js

@@ -2,9 +2,9 @@ import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-sty
 import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { EmptyStateMixin } from './empty-state-mixin.js';
 import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -17,7 +17,7 @@ const illustrationAspectRatio = 500 / 330;
  * @slot - Slot for empty state actions
  * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
  */
-class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(LitElement)) {
+class EmptyStateIllustrated extends LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -74,7 +74,7 @@ class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(L
 		return html`
 			${this.#renderIllustration()}
 			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
 			<slot class="action-slot"></slot>
 		`;
 	}

package/components/empty-state/empty-state-mixin.js

@@ -0,0 +1,22 @@
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+export const EmptyStateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
+
+	focus() {
+		if (!this.hasUpdated) {
+			return;
+		}
+		const action = this.shadowRoot?.querySelector('.action-slot').assignedElements().find(
+			el => el.tagName === 'D2L-EMPTY-STATE-ACTION-BUTTON' || el.tagName === 'D2L-EMPTY-STATE-ACTION-LINK'
+		);
+		if (action !== undefined) {
+			action.focus();
+			return;
+		}
+		const title = this.shadowRoot?.querySelector('.d2l-empty-state-description');
+		if (title !== null) {
+			title.focus();
+		}
+	}
+
+};

package/components/empty-state/empty-state-simple.js

@@ -2,14 +2,13 @@ import '../button/button-subtle.js';
 import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
 import { html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { EmptyStateMixin } from './empty-state-mixin.js';
 
 /**
  * The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.
  * @slot - Slot for empty state actions
  */
-class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
+class EmptyStateSimple extends EmptyStateMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -28,7 +27,7 @@ class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
 	render() {
 		return html`
 			<div class="empty-state-container">
-				<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+				<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
 				<slot class="action-slot"></slot>
 			</div>
 		`;

package/components/empty-state/empty-state-styles.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const emptyStateStyles = css`
 
@@ -20,6 +21,12 @@ export const emptyStateStyles = css`
 		display: inline;
 	}
 
+	.d2l-empty-state-description:${unsafeCSS(getFocusPseudoClass())} {
+		border-radius: 0.3rem;
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: 3px;
+	}
+
 `;
 
 export const emptyStateSimpleStyles = css`

package/components/tabs/tab-mixin.js

@@ -28,6 +28,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				position: relative;
 				vertical-align: middle;
 			}
+			.d2l-tab-content {
+				margin: 0.5rem;
+			}
+			:host(:first-child) .d2l-tab-content {
+				margin-inline-start: 0;
+			}
 			.d2l-tab-selected-indicator {
 				border-top: 4px solid var(--d2l-color-celestine);
 				border-top-left-radius: 4px;
@@ -57,6 +63,10 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 			:host([selected]) .d2l-tab-selected-indicator {
 				display: block;
 			}
+			:host([skeleton]) .d2l-tab-selected-indicator {
+				position: absolute !important; /* make sure skeleton styles do not override this */
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -94,7 +104,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	render() {
 		return html`
-			${this.renderContent()}
+			<div class="d2l-skeletize d2l-tab-content">${this.renderContent()}</div>
 			<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
 		`;
 	}

package/components/tabs/tab.js

@@ -21,20 +21,22 @@ class Tab extends TabMixin(LitElement) {
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-text {
-				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
 				text-overflow: ellipsis;
 				white-space: nowrap;
 			}
-			:host(:first-child) .d2l-tab-text {
-				margin-inline-start: 0;
-			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
+			:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text {
 				border-radius: 0.3rem;
 				box-shadow: 0 0 0 2px var(--d2l-color-celestine);
 				color: var(--d2l-color-celestine);
 			}
+			.d2l-tab-text-skeletize-override {
+				min-width: 50px;
+			}
+			:host([skeleton]) .d2l-tab-content.d2l-skeletize::before {
+				inset-block: 0.15rem;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -50,14 +52,14 @@ class Tab extends TabMixin(LitElement) {
 	}
 
 	renderContent() {
+		const overrideSkeletonText = this.skeleton && (!this.text || this.text.length === 0);
 		const contentClasses = {
 			'd2l-tab-text': true,
+			'd2l-tab-text-skeletize-override': overrideSkeletonText
 		};
 
 		return html`
-			<div class="${classMap(contentClasses)}">
-				${this.text}
-			</div>
+			<div class="${classMap(contentClasses)}">${overrideSkeletonText ? html`&nbsp;` : this.text}</div>
 		`;
 	}
 }

package/package.json

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