@brightspace-ui/core 3.321.2 → 3.322.0

package/components/empty-state/README.md

@@ -158,16 +158,16 @@ To add the link, place a `d2l-empty-state-action-link` component inside of the d
 
 | Illustration | Name |
 | :---: | :--- |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/assembly-line.svg?sanitize=true) | assembly-line |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/blueprint.svg?sanitize=true) | blueprint |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/calendar.svg?sanitize=true) | calendar |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/cat-computer.svg?sanitize=true) | cat-computer |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/checklist.svg?sanitize=true) | checklist |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/data-tracking.svg?sanitize=true) | data-tracking |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/desert-road.svg?sanitize=true) | desert-road |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/fish-hook.svg?sanitize=true) | fish-hook |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/oven.svg?sanitize=true) | oven |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/pipeline.svg?sanitize=true) | pipeline |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/race.svg?sanitize=true) | race |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/rockets.svg?sanitize=true) | rockets |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/tumbleweed.svg?sanitize=true) | tumbleweed |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/assembly-line.svg?sanitize=true) | assembly-line |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/blueprint.svg?sanitize=true) | blueprint |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/calendar.svg?sanitize=true) | calendar |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/cat-computer.svg?sanitize=true) | cat-computer |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/checklist.svg?sanitize=true) | checklist |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/data-tracking.svg?sanitize=true) | data-tracking |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/desert-road.svg?sanitize=true) | desert-road |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/fish-hook.svg?sanitize=true) | fish-hook |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/oven.svg?sanitize=true) | oven |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/pipeline.svg?sanitize=true) | pipeline |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/race.svg?sanitize=true) | race |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/rockets.svg?sanitize=true) | rockets |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/tumbleweed.svg?sanitize=true) | tumbleweed |

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

@@ -1,84 +1,10 @@
-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';
-
-/**
- * `d2l-empty-state-action-button` 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 button action to the component.
- * @fires d2l-empty-state-action - Dispatched when the action button is clicked
- * @fires d2l-empty-state-illustrated-check - Internal event
- */
-class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
-
-	static properties = {
-		/**
-		 * REQUIRED: The action text to be used in the button
-		 * @type {string}
-		 */
-		text: { type: String, required: true },
-		/**
-		 * This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components
-		 * @type {boolean}
-		 */
-		primary: { type: Boolean },
-		_illustrated: { state: true }
-	};
-
-	static styles = css`
-		.d2l-empty-state-action {
-			vertical-align: top;
-		}
-	`;
-
-	constructor() {
-		super();
-		this._illustrated = false;
-	}
-
-	static get focusElementSelector() {
-		return '.d2l-empty-state-action';
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		requestAnimationFrame(() => {
-			const e = new CustomEvent('d2l-empty-state-illustrated-check', {
-				bubbles: true,
-				detail: {}
-			});
-			this.dispatchEvent(e);
-			this._illustrated = e.detail.illustrated || false;
-		});
-	}
-
-	render() {
-		let actionButton = nothing;
-		if (this.text) {
-			actionButton = this._illustrated && this.primary
-				? html`<d2l-button
-							class="d2l-empty-state-action"
-							@click=${this._handleActionClick}
-							primary>
-								${this.text}
-						</d2l-button>`
-				: html`<d2l-button-subtle
-							class="d2l-empty-state-action"
-							@click=${this._handleActionClick}
-							h-align="${ifDefined(!this._illustrated ? 'text' : undefined)}"
-							?slim=${!this._illustrated}
-							text=${this.text}>
-						</d2l-button-subtle>`;
-		}
-		return html`${actionButton}`;
-	}
+import { StateActionButton } from '../state/state-action-button.js';
 
+class EmptyStateActionButton extends StateActionButton {
 	_handleActionClick(e) {
 		e.stopPropagation();
 		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
 	}
-
 }
 
 customElements.define('d2l-empty-state-action-button', EmptyStateActionButton);

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

@@ -1,41 +1,5 @@
-import { html, LitElement, nothing } from 'lit';
-import { bodyCompactStyles } from '../typography/styles.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { LinkMixin } from '../link/link-mixin.js';
-import { linkStyles } from '../link/link.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { StateActionLink } from '../state/state-action-link.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 LinkMixin(FocusMixin(PropertyRequiredMixin(LitElement))) {
-
-	static properties = {
-		/**
-		 * REQUIRED: The action text to be used in the subtle button
-		 * @type {string}
-		 */
-		text: { type: String, required: true },
-		/**
-		 * REQUIRED: The action URL or URL fragment of the link
-		 * @type {string}
-		 */
-		href: { type: String, required: true },
-	};
-
-	static styles = [super.styles, bodyCompactStyles, linkStyles];
-
-	static get focusElementSelector() {
-		return '.d2l-link';
-	}
-
-	render() {
-		if (!this.text || !this.href) return nothing;
-		const linkClasses = { 'd2l-body-compact': true, 'd2l-link': true };
-		const inner = html`${this.text}${this._renderNewWindowIcon()}`;
-		return this._render(inner, { linkClasses });
-	}
-
-}
+class EmptyStateActionLink extends StateActionLink {}
 
 customElements.define('d2l-empty-state-action-link', EmptyStateActionLink);

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

@@ -1,129 +1,7 @@
-import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-styles.js';
-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 { runAsync } from '../../directives/run-async/run-async.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-
-const illustrationAspectRatio = 500 / 330;
-
-/**
- * The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.
- * @slot - Slot for empty state actions
- * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
- */
-class EmptyStateIllustrated extends LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
-
-	static properties = {
-		/**
-		 * REQUIRED: A description giving details about the empty state
-		 * @type {string}
-		 */
-		description: { type: String, required: true },
-		/**
-		 * The name of the preset image you would like to display in the component
-		 * @type {string}
-		 */
-		illustrationName: { type: String, attribute: 'illustration-name' },
-		/**
-		 * REQUIRED: A title for the empty state
-		 * @type {string}
-		 */
-		titleText: { type: String, attribute: 'title-text', required: true },
-		_contentHeight: { state: true },
-		_titleSmall: { state: true }
-	};
-
-	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateIllustratedStyles];
-
-	constructor() {
-		super();
-		this._contentHeight = 330;
-		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
-		this._titleSmall = false;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener('d2l-empty-state-illustrated-check', this.#handleEmptyStateIllustratedCheck);
-		this._resizeObserver.observe(this);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('d2l-empty-state-illustrated-check', this.#handleEmptyStateIllustratedCheck);
-		this._resizeObserver.disconnect();
-	}
-
-	render() {
-		const titleClass = {
-			'd2l-empty-state-title': true,
-			'd2l-empty-state-title-small': this._titleSmall,
-			'd2l-empty-state-title-large': !this._titleSmall,
-		};
-
-		return html`
-			${this.#renderIllustration()}
-			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
-			<slot class="action-slot"></slot>
-		`;
-	}
-
-	_onResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-
-		const width = entry.contentRect.width;
-		if (width === 0) return; // ignore until visible
-
-		requestAnimationFrame(() => {
-			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
-			this._titleSmall = entry.contentRect.right <= 615;
-		});
-	}
-
-	async #getIllustration(illustrationName) {
-		if (!illustrationName) return;
-
-		const svg = await loadSvg(illustrationName);
-		if (!svg) setTimeout(() => {
-			throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: Unable to retrieve requested illustration.`);
-		});
-		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
-	}
-
-	#handleEmptyStateIllustratedCheck(e) {
-		e.stopPropagation();
-		e.detail.illustrated = true;
-	}
-
-	#renderIllustration() {
-		if (!this.illustrationName) {
-			this.resolveLoadingComplete();
-			return html`<slot class="illustration-slot" name="illustration"></slot>`;
-		}
-		const illustrationContainerStyle = {
-			height: `${this._contentHeight}px`,
-		};
-		const asyncVal = runAsync(
-			this.illustrationName,
-			() => this.#getIllustration(this.illustrationName),
-			{
-				success: illustration => {
-					this.resolveLoadingComplete();
-					return illustration;
-				}
-			},
-			{ pendingState: false }
-		);
-		return html`<div style="${styleMap(illustrationContainerStyle)}">${asyncVal}</div>`;
-	}
-
+import { emptyStateStyles } from './empty-state-styles.js';
+import { StateIllustrated } from '../state/state-illustrated.js';
+class EmptyStateIllustrated extends StateIllustrated {
+	static styles = [super.styles, emptyStateStyles];
 }
 
 customElements.define('d2l-empty-state-illustrated', EmptyStateIllustrated);

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

@@ -1,14 +1,15 @@
 import '../button/button-subtle.js';
-import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
 import { html, LitElement } from 'lit';
+import { stateSimpleStyles, stateStyles } from '../state/state-styles.js';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { EmptyStateMixin } from './empty-state-mixin.js';
+import { emptyStateStyles } from './empty-state-styles.js';
+import { StateMixin } from '../state/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 EmptyStateMixin(LitElement) {
+class EmptyStateSimple extends StateMixin(LitElement) {
 
 	static properties = {
 		/**
@@ -18,12 +19,12 @@ class EmptyStateSimple extends EmptyStateMixin(LitElement) {
 		description: { type: String, required: true },
 	};
 
-	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles];
+	static styles = [bodyCompactStyles, stateStyles, stateSimpleStyles, emptyStateStyles];
 
 	render() {
 		return html`
-			<div class="empty-state-container">
-				<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
+			<div class="state-container">
+				<p class="d2l-body-compact d2l-state-description" tabindex="-1">${this.description}</p>
 				<slot class="action-slot"></slot>
 			</div>
 		`;

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

@@ -1,96 +1,9 @@
-import '../colors/colors.js';
 import { css } from 'lit';
-import { getFocusRingStyles } from '../../helpers/focus.js';
 
+// Styles supporting old empty state action buttons and links
 export const emptyStateStyles = css`
-
-	:host {
-		display: block;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	.action-slot::slotted(*) {
-		display: none;
-	}
-
 	.action-slot::slotted(d2l-empty-state-action-button:first-of-type),
 	.action-slot::slotted(d2l-empty-state-action-link:first-of-type) {
 		display: inline;
 	}
-	.d2l-empty-state-description {
-		--d2l-focus-ring-offset: 3px;
-		border-radius: 0.3rem;
-	}
-	${getFocusRingStyles('.d2l-empty-state-description')}
-`;
-
-export const emptyStateSimpleStyles = css`
-
-	:host {
-		border: 1px solid var(--d2l-color-mica);
-		border-radius: 0.3rem;
-		padding: 1.2rem 1.5rem;
-	}
-
-	:host([description]) .empty-state-container {
-		align-items: center;
-		column-gap: 0.75rem;
-		display: flex;
-		flex-wrap: wrap;
-		padding-inline-start: 0;
-	}
-
-	.d2l-empty-state-description {
-		margin: 0;
-	}
-
-`;
-
-export const emptyStateIllustratedStyles = css`
-
-	:host {
-		text-align: center;
-	}
-
-	.illustration-slot::slotted(*) {
-		display: none;
-	}
-
-	.illustration-slot::slotted(img:first-of-type),
-	.illustration-slot::slotted(svg:first-of-type) {
-		display: inline-block;
-	}
-
-	svg {
-		height: 100%;
-		max-width: 500px;
-		width: 100%;
-	}
-
-	.d2l-empty-state-title {
-		margin-bottom: 0.9rem;
-	}
-
-	.d2l-empty-state-title-large {
-		font-size: 1.5rem;
-		line-height: 1.8rem;
-		margin: 1rem 0 1.5rem 0;
-	}
-
-	.d2l-empty-state-title-small {
-		font-size: 1rem;
-		font-weight: 700;
-		line-height: 1.5rem;
-		margin-top: 0.5rem;
-	}
-
-	.d2l-empty-state-description {
-		margin: 0 auto 0.8rem;
-		max-width: 500px;
-		width: 100%;
-	}
-
 `;

package/components/filter/filter.js

@@ -5,8 +5,8 @@ import '../button/button-subtle.js';
 import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import '../dropdown/dropdown-menu.js';
-import '../empty-state/empty-state-action-button.js';
-import '../empty-state/empty-state-action-link.js';
+import '../state/state-action-button.js';
+import '../state/state-action-link.js';
 import '../empty-state/empty-state-simple.js';
 import '../expand-collapse/expand-collapse-content.js';
 import '../hierarchical-view/hierarchical-view.js';
@@ -537,20 +537,20 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		let emptyStateAction = nothing;
 		if (emptyState.actionText && emptyState.actionHref) {
 			emptyStateAction = html`
-				<d2l-empty-state-action-link
+				<d2l-state-action-link
 					href="${emptyState.actionHref}"
 					text="${emptyState.actionText}">
-				</d2l-empty-state-action-link>
+				</d2l-state-action-link>
 			`;
 		}
 		else if (emptyState.actionText) {
 			emptyStateAction = html`
-				<d2l-empty-state-action-button
-					@d2l-empty-state-action="${this._handleEmptyStateAction}"
+				<d2l-state-action-button
+					@d2l-state-action="${this._handleEmptyStateAction}"
 					data-dimension-key="${dimensionKey}"
 					data-type="${emptyState.type}"
 					text="${emptyState.actionText}">
-				</d2l-empty-state-action-button>
+				</d2l-state-action-button>
 			`;
 		}
 		return html`

package/components/icons/icon.js

@@ -66,6 +66,8 @@ class Icon extends LoadingCompleteMixin(LitElement) {
 				.then(this.resolveLoadingComplete);
 
 			return fixedSvg;
+		} else {
+			this.resolveLoadingComplete();
 		}
 	}
 

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

@@ -0,0 +1,88 @@
+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';
+
+/**
+ * `d2l-state-action-button` is an state action component that can be placed inside of the default slot of state components to add a button action.
+ * @fires d2l-state-action - Dispatched when the action button is clicked
+ * @fires d2l-state-illustrated-check - Internal event
+ */
+export class StateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components
+		 * @type {boolean}
+		 */
+		primary: { type: Boolean },
+		_illustrated: { state: true }
+	};
+
+	static styles = css`
+		.d2l-state-action {
+			vertical-align: top;
+		}
+	`;
+
+	constructor() {
+		super();
+		this._illustrated = false;
+	}
+
+	static get focusElementSelector() {
+		return '.d2l-state-action';
+	}
+
+	get isStateActionButton() {
+		return true;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		requestAnimationFrame(() => {
+			const e = new CustomEvent('d2l-state-illustrated-check', {
+				bubbles: true,
+				detail: {}
+			});
+			this.dispatchEvent(e);
+			this._illustrated = e.detail.illustrated || false;
+		});
+	}
+
+	render() {
+		let actionButton = nothing;
+		if (this.text) {
+			actionButton = this._illustrated && this.primary
+				? html`<d2l-button
+							class="d2l-state-action"
+							@click=${this._handleActionClick}
+							primary>
+								${this.text}
+						</d2l-button>`
+				: html`<d2l-button-subtle
+							class="d2l-state-action"
+							@click=${this._handleActionClick}
+							h-align="${ifDefined(!this._illustrated ? 'text' : undefined)}"
+							?slim=${!this._illustrated}
+							text=${this.text}>
+						</d2l-button-subtle>`;
+		}
+		return html`${actionButton}`;
+	}
+
+	_handleActionClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('d2l-state-action'));
+	}
+
+}
+
+customElements.define('d2l-state-action-button', StateActionButton);

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

@@ -0,0 +1,45 @@
+import { html, LitElement, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { LinkMixin } from '../link/link-mixin.js';
+import { linkStyles } from '../link/link.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * `d2l-state-action-link` is an state action component that can be placed inside of the default slot of state components to add a link action.
+ */
+export class StateActionLink extends LinkMixin(FocusMixin(PropertyRequiredMixin(LitElement))) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the link
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * REQUIRED: The action URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String, required: true },
+	};
+
+	static styles = [super.styles, bodyCompactStyles, linkStyles];
+
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
+	get isStateActionLink() {
+		return true;
+	}
+
+	render() {
+		if (!this.text || !this.href) return nothing;
+		const linkClasses = { 'd2l-body-compact': true, 'd2l-link': true };
+		const inner = html`${this.text}${this._renderNewWindowIcon()}`;
+		return this._render(inner, { linkClasses });
+	}
+
+}
+
+customElements.define('d2l-state-action-link', StateActionLink);

package/components/state/state-illustrated.js

@@ -0,0 +1,129 @@
+import { html, LitElement, nothing } from 'lit';
+import { stateIllustratedStyles, stateStyles } from './state-styles.js';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
+import { loadSvg } from '../../generated/state/presetIllustrationLoader.js';
+import { runAsync } from '../../directives/run-async/run-async.js';
+import { StateMixin } from './state-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+const illustrationAspectRatio = 500 / 330;
+
+/**
+ * The `d2l-state-illustrated` component is an state component that displays a title and description with an illustration. An state action component can be placed inside of the default slot to add an optional action.
+ * @slot - Slot for state actions
+ * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
+ */
+export class StateIllustrated extends LoadingCompleteMixin(StateMixin(LitElement)) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: A description giving details about the state
+		 * @type {string}
+		 */
+		description: { type: String, required: true },
+		/**
+		 * The name of the preset image you would like to display in the component
+		 * @type {string}
+		 */
+		illustrationName: { type: String, attribute: 'illustration-name' },
+		/**
+		 * REQUIRED: A title for the state
+		 * @type {string}
+		 */
+		titleText: { type: String, attribute: 'title-text', required: true },
+		_contentHeight: { state: true },
+		_titleSmall: { state: true }
+	};
+
+	static styles = [bodyCompactStyles, stateStyles, stateIllustratedStyles];
+
+	constructor() {
+		super();
+		this._contentHeight = 330;
+		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+		this._titleSmall = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-state-illustrated-check', this.#handleStateIllustratedCheck);
+		this._resizeObserver.observe(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-state-illustrated-check', this.#handleStateIllustratedCheck);
+		this._resizeObserver.disconnect();
+	}
+
+	render() {
+		const titleClass = {
+			'd2l-state-title': true,
+			'd2l-state-title-small': this._titleSmall,
+			'd2l-state-title-large': !this._titleSmall,
+		};
+
+		return html`
+			${this.#renderIllustration()}
+			<p class="${classMap(titleClass)}">${this.titleText}</p>
+			<p class="d2l-body-compact d2l-state-description" tabindex="-1">${this.description}</p>
+			<slot class="action-slot"></slot>
+		`;
+	}
+
+	_onResize(entries) {
+		if (!entries || entries.length === 0) return;
+		const entry = entries[0];
+
+		const width = entry.contentRect.width;
+		if (width === 0) return; // ignore until visible
+
+		requestAnimationFrame(() => {
+			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
+			this._titleSmall = entry.contentRect.right <= 615;
+		});
+	}
+
+	async #getIllustration(illustrationName) {
+		if (!illustrationName) return;
+
+		const svg = await loadSvg(illustrationName);
+		if (!svg) setTimeout(() => {
+			throw new Error(`<d2l-state-illustrated-${this._illustratedComponentType}>: Unable to retrieve requested illustration.`);
+		});
+		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
+	}
+
+	#handleStateIllustratedCheck(e) {
+		e.stopPropagation();
+		e.detail.illustrated = true;
+	}
+
+	#renderIllustration() {
+		if (!this.illustrationName) {
+			this.resolveLoadingComplete();
+			return html`<slot class="illustration-slot" name="illustration"></slot>`;
+		}
+		const illustrationContainerStyle = {
+			height: `${this._contentHeight}px`,
+		};
+		const asyncVal = runAsync(
+			this.illustrationName,
+			() => this.#getIllustration(this.illustrationName),
+			{
+				success: illustration => {
+					this.resolveLoadingComplete();
+					return illustration;
+				}
+			},
+			{ pendingState: false }
+		);
+		return html`<div style="${styleMap(illustrationContainerStyle)}">${asyncVal}</div>`;
+	}
+
+}
+
+customElements.define('d2l-state-illustrated', StateIllustrated);

package/components/{empty-state/empty-state-mixin.js → state/state-mixin.js}

@@ -1,19 +1,19 @@
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
-export const EmptyStateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
+export const StateMixin = 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'
+			el => el.isStateActionButton || el.isStateActionLink
 		);
 		if (action !== undefined) {
 			action.focus();
 			return;
 		}
-		const title = this.shadowRoot?.querySelector('.d2l-empty-state-description');
+		const title = this.shadowRoot?.querySelector('.d2l-state-description');
 		if (title !== null) {
 			title.focus();
 		}

package/components/state/state-styles.js

@@ -0,0 +1,96 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
+
+export const stateStyles = css`
+
+	:host {
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.action-slot::slotted(*) {
+		display: none;
+	}
+
+	.action-slot::slotted(d2l-state-action-button:first-of-type),
+	.action-slot::slotted(d2l-state-action-link:first-of-type) {
+		display: inline;
+	}
+	.d2l-state-description {
+		--d2l-focus-ring-offset: 3px;
+		border-radius: 0.3rem;
+	}
+	${getFocusRingStyles('.d2l-state-description')}
+`;
+
+export const stateSimpleStyles = css`
+
+	:host {
+		border: 1px solid var(--d2l-color-mica);
+		border-radius: 0.3rem;
+		padding: 1.2rem 1.5rem;
+	}
+
+	:host([description]) .state-container {
+		align-items: center;
+		column-gap: 0.75rem;
+		display: flex;
+		flex-wrap: wrap;
+		padding-inline-start: 0;
+	}
+
+	.d2l-state-description {
+		margin: 0;
+	}
+
+`;
+
+export const stateIllustratedStyles = css`
+
+	:host {
+		text-align: center;
+	}
+
+	.illustration-slot::slotted(*) {
+		display: none;
+	}
+
+	.illustration-slot::slotted(img:first-of-type),
+	.illustration-slot::slotted(svg:first-of-type) {
+		display: inline-block;
+	}
+
+	svg {
+		height: 100%;
+		max-width: 500px;
+		width: 100%;
+	}
+
+	.d2l-state-title {
+		margin-bottom: 0.9rem;
+	}
+
+	.d2l-state-title-large {
+		font-size: 1.5rem;
+		line-height: 1.8rem;
+		margin: 1rem 0 1.5rem 0;
+	}
+
+	.d2l-state-title-small {
+		font-size: 1rem;
+		font-weight: 700;
+		line-height: 1.5rem;
+		margin-top: 0.5rem;
+	}
+
+	.d2l-state-description {
+		margin: 0 auto 0.8rem;
+		max-width: 500px;
+		width: 100%;
+	}
+
+`;

package/custom-elements.json

@@ -4511,7 +4511,6 @@
     {
       "name": "d2l-empty-state-action-button",
       "path": "./components/empty-state/empty-state-action-button.js",
-      "description": "`d2l-empty-state-action-button` 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 button action to the component.",
       "attributes": [
         {
           "name": "text",
@@ -4520,7 +4519,7 @@
         },
         {
           "name": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
           "type": "boolean"
         }
       ],
@@ -4534,21 +4533,28 @@
         {
           "name": "primary",
           "attribute": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
           "type": "boolean"
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t.d2l-empty-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t.d2l-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+        },
+        {
+          "name": "isStateActionButton",
+          "type": "boolean"
         }
       ],
       "events": [
         {
-          "name": "d2l-empty-state-action",
+          "name": "d2l-empty-state-action"
+        },
+        {
+          "name": "d2l-state-action",
           "description": "Dispatched when the action button is clicked"
         },
         {
-          "name": "d2l-empty-state-illustrated-check",
+          "name": "d2l-state-illustrated-check",
           "description": "Internal event"
         }
       ]
@@ -4556,11 +4562,10 @@
     {
       "name": "d2l-empty-state-action-link",
       "path": "./components/empty-state/empty-state-action-link.js",
-      "description": "`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.",
       "attributes": [
         {
           "name": "text",
-          "description": "REQUIRED: The action text to be used in the subtle button",
+          "description": "REQUIRED: The action text to be used in the link",
           "type": "string"
         },
         {
@@ -4583,9 +4588,13 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The action text to be used in the subtle button",
+          "description": "REQUIRED: The action text to be used in the link",
           "type": "string"
         },
+        {
+          "name": "isStateActionLink",
+          "type": "boolean"
+        },
         {
           "name": "download",
           "attribute": "download",
@@ -4614,11 +4623,10 @@
     {
       "name": "d2l-empty-state-illustrated",
       "path": "./components/empty-state/empty-state-illustrated.js",
-      "description": "The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.",
       "attributes": [
         {
           "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
+          "description": "REQUIRED: A description giving details about the state",
           "type": "string"
         },
         {
@@ -4628,7 +4636,7 @@
         },
         {
           "name": "title-text",
-          "description": "REQUIRED: A title for the empty state",
+          "description": "REQUIRED: A title for the state",
           "type": "string"
         }
       ],
@@ -4636,7 +4644,7 @@
         {
           "name": "description",
           "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
+          "description": "REQUIRED: A description giving details about the state",
           "type": "string"
         },
         {
@@ -4648,13 +4656,13 @@
         {
           "name": "titleText",
           "attribute": "title-text",
-          "description": "REQUIRED: A title for the empty state",
+          "description": "REQUIRED: A title for the state",
           "type": "string"
         },
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"bodyCompactStyles\",\"emptyStateStyles\",\"emptyStateIllustratedStyles\"]"
+          "default": "[\"styles\",\"emptyStateStyles\"]"
         },
         {
           "name": "loadingComplete",
@@ -4668,7 +4676,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Slot for empty state actions"
+          "description": "Slot for state actions"
         },
         {
           "name": "illustration",
@@ -4697,7 +4705,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"bodyCompactStyles\",\"emptyStateStyles\",\"emptyStateSimpleStyles\"]"
+          "default": "[\"bodyCompactStyles\",\"stateStyles\",\"stateSimpleStyles\",\"emptyStateStyles\"]"
         }
       ],
       "slots": [
@@ -15867,6 +15875,182 @@
         }
       ]
     },
+    {
+      "name": "d2l-state-action-button",
+      "path": "./components/state/state-action-button.js",
+      "description": "`d2l-state-action-button` is an state action component that can be placed inside of the default slot of state components to add a button action.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the button",
+          "type": "string"
+        },
+        {
+          "name": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the button",
+          "type": "string"
+        },
+        {
+          "name": "primary",
+          "attribute": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
+          "type": "boolean"
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t.d2l-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+        },
+        {
+          "name": "isStateActionButton",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-state-action",
+          "description": "Dispatched when the action button is clicked"
+        },
+        {
+          "name": "d2l-state-illustrated-check",
+          "description": "Internal event"
+        }
+      ]
+    },
+    {
+      "name": "d2l-state-action-link",
+      "path": "./components/state/state-action-link.js",
+      "description": "`d2l-state-action-link` is an state action component that can be placed inside of the default slot of state components to add a link action.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the link",
+          "type": "string"
+        },
+        {
+          "name": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the link",
+          "type": "string"
+        },
+        {
+          "name": "isStateActionLink",
+          "type": "boolean"
+        },
+        {
+          "name": "download",
+          "attribute": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"styles\",\"bodyCompactStyles\",\"linkStyles\"]"
+        }
+      ]
+    },
+    {
+      "name": "d2l-state-illustrated",
+      "path": "./components/state/state-illustrated.js",
+      "description": "The `d2l-state-illustrated` component is an state component that displays a title and description with an illustration. An state action component can be placed inside of the default slot to add an optional action.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "REQUIRED: A description giving details about the state",
+          "type": "string"
+        },
+        {
+          "name": "illustration-name",
+          "description": "The name of the preset image you would like to display in the component",
+          "type": "string"
+        },
+        {
+          "name": "title-text",
+          "description": "REQUIRED: A title for the state",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "REQUIRED: A description giving details about the state",
+          "type": "string"
+        },
+        {
+          "name": "illustrationName",
+          "attribute": "illustration-name",
+          "description": "The name of the preset image you would like to display in the component",
+          "type": "string"
+        },
+        {
+          "name": "titleText",
+          "attribute": "title-text",
+          "description": "REQUIRED: A title for the state",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"bodyCompactStyles\",\"stateStyles\",\"stateIllustratedStyles\"]"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Slot for state actions"
+        },
+        {
+          "name": "illustration",
+          "description": "Slot for custom SVG content if `illustration-name` property is not set"
+        }
+      ]
+    },
     {
       "name": "d2l-status-indicator",
       "path": "./components/status-indicator/status-indicator.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.321.2",
+  "version": "3.322.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -11,7 +11,7 @@
   "scripts": {
     "build:clean": "node ./cli/clean.js",
     "build:icons": "node ./cli/icon-generator.js",
-    "build:illustrations": "node ./cli/empty-state-illustration-generator.js",
+    "build:illustrations": "node ./cli/state-illustration-generator.js",
     "build:sass": "sass ./test/sass.scss > ./test/sass.output.css",
     "build:wca": "node ./cli/wca.js \"{components,mixins,templates}/**/*.js\"",
     "build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:sass && npm run build:wca",