@brightspace-ui/core 2.34.0 → 2.35.0

package/components/backdrop/backdrop.js

@@ -3,6 +3,8 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
+export const BACKDROP_ROLE = 'd2l-backdrop-role';
+
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 const scrollKeys = [];
@@ -159,7 +161,7 @@ function hideAccessible(target) {
 			if (child.hasAttribute('d2l-backdrop-hidden')) continue;
 
 			const role = child.getAttribute('role');
-			if (role) child.setAttribute('d2l-backdrop-role', role);
+			if (role) child.setAttribute(BACKDROP_ROLE, role);
 			child.setAttribute('role', 'presentation');
 
 			if (child.nodeName === 'FORM' || child.nodeName === 'A') {
@@ -200,10 +202,10 @@ export function preventBodyScroll() {
 function showAccessible(elems) {
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];
-		const role = elem.getAttribute('d2l-backdrop-role');
+		const role = elem.getAttribute(BACKDROP_ROLE);
 		if (role) {
 			elem.setAttribute('role', role);
-			elem.removeAttribute('d2l-backdrop-role');
+			elem.removeAttribute(BACKDROP_ROLE);
 		} else {
 			elem.removeAttribute('role');
 		}

package/components/empty-state/README.md

@@ -0,0 +1,100 @@
+# Empty State
+Empty states are used when there is no data available to be displayed, or when a search or filter returns no results.
+
+<!-- docs: demo align:start -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple-button.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-button.js';
+</script>
+
+<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create an Assignment"></d2l-empty-state-simple-button>
+<d2l-empty-state-illustrated-button illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"> </d2l-empty-state-illustrated-button>
+
+```
+
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Do make it clear that there is no data available to be displayed
+* Do include guidance on next steps if available, either as short instructions or as Call to Actions
+* Do use a link for navigation and a button for actions
+* Do replace the entire content with its empty state for accessibility
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t use an empty state as a default state while data is loading
+* Don't leave a section completely empty, or use a skeleton loading screen in place of an empty state component
+* Avoid causing users to believe that they have hit a dead-end when they have not
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+## Empty State Simple Button [d2l-empty-state-simple-button]
+
+The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.
+
+<!-- docs: demo live name:d2l-empty-state-simple-button -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple-button.js';
+</script>
+
+<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create an Assignment"></d2l-empty-state-simple-button>
+```
+
+## Empty State Simple Link [d2l-empty-state-simple-link]
+
+The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.
+
+<!-- docs: demo live name:d2l-empty-state-simple-link -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple-link.js';
+</script>
+
+<d2l-empty-state-simple-link description="There are no assignments to display." action-text="Create an Assignment" action-href='https://d2l.com'></d2l-empty-state-simple-link>
+```
+## Empty State Illustrated Button [d2l-empty-state-illustrated-button]
+
+The `d2l-empty-state-illustrated-button` component is an empty state component that displays a title and description with an illustration and action button. The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+
+<!-- docs: demo live name:d2l-empty-state-illustrated-button -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-button.js';
+</script>
+
+<d2l-empty-state-illustrated-button illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"></d2l-empty-state-illustrated-button>
+```
+
+## Empty State Illustrated Link [d2l-empty-state-illustrated-link]
+
+The `d2l-empty-state-illustrated-link` component is an empty state component that displays a title and description with an illustration and action link. The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+
+<!-- docs: demo live name:d2l-empty-state-illustrated-link -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-link.js';
+</script>
+
+<d2l-empty-state-illustrated-link illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths" action-href='https://d2l.com'></d2l-empty-state-illustrated-link>
+```
+
+## Preset Empty State Illustrations
+
+| 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 |

package/components/empty-state/demo/empty-state.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../empty-state-simple-button.js';
+			import '../empty-state-simple-link.js';
+			import '../empty-state-illustrated-button.js';
+			import '../empty-state-illustrated-link.js';
+		</script>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-empty-state">
+
+			<h2>Empty State Simple Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create New Assignment"></d2l-empty-state-simple-button>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Empty State Simple Link</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-simple-link description="There are no assignments to display." action-text="Create New Assignment" action-href="https://www.d2l.com/"></d2l-empty-state-simple-link>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Empty State Illustrated Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-illustrated-button illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"></d2l-empty-state-illustrated-button>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Empty State Illustrated Link</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-illustrated-link illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths" action-href="https://www.d2l.com/"></d2l-empty-state-illustrated-link>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+	</body>
+</html>

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

@@ -0,0 +1,71 @@
+import '../button/button.js';
+import '../button/button-subtle.js';
+import { html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { EmptyStateIllustratedMixin } from './empty-state-illustrated-mixin.js';
+import { runAsync } from '../../directives/run-async/run-async.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+/**
+ * The `d2l-empty-state-illustrated-button` component is an empty state component that displays an illustration and action button. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+ * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ * @slot - Custom SVG content if `illustration-name` property is not set
+ */
+class EmptyStateIllustratedButton extends EmptyStateIllustratedMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * This will change the action button to use a primary button instead of the default subtle button
+			 * @type {boolean}
+			 */
+			primary: { type: Boolean },
+		};
+	}
+
+	constructor() {
+		super();
+		this._illustratedComponentType = 'button';
+	}
+
+	render() {
+		const illustrationContainerStyle = this.getIllustrationContainerStyle();
+		const titleClass = this.getTitleClass();
+
+		let actionButton = nothing;
+		if (this.actionText) {
+			actionButton = this.primary
+				? html`<d2l-button
+							class="d2l-empty-state-action"
+							@click=${this._handleActionClick}
+							primary>${this.actionText}
+						</d2l-button>`
+				: html`<d2l-button-subtle
+							class="d2l-empty-state-action"
+							@click=${this._handleActionClick}
+							text=${this.actionText}>
+						</d2l-button-subtle>`;
+		}
+
+		return html`
+			${this.illustrationName
+		? html`
+			<div style="${styleMap(illustrationContainerStyle)}">
+				${runAsync(this.illustrationName, () => this.getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
+			</div>`
+		: html`<slot></slot>`}
+
+			<p class="${classMap(titleClass)}">${this.titleText}</p>
+			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			${actionButton}
+		`;
+	}
+
+	_handleActionClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
+	}
+
+}
+
+customElements.define('d2l-empty-state-illustrated-button', EmptyStateIllustratedButton);

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

@@ -0,0 +1,57 @@
+import { html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { EmptyStateIllustratedMixin } from './empty-state-illustrated-mixin.js';
+import { linkStyles } from '../link/link.js';
+import { runAsync } from '../../directives/run-async/run-async.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+/**
+ * The `d2l-empty-state-illustrated-link` component is an empty state component that displays an illustration and action link. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+ * @slot - Custom SVG content if `illustration-name` property is not set
+ */
+class EmptyStateIllustratedLink extends EmptyStateIllustratedMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * The action URL or URL fragment of the link
+			 * @type {string}
+			 */
+			actionHref: { type: String, attribute: 'action-href' },
+		};
+	}
+
+	static get styles() {
+		return [super.styles, linkStyles];
+	}
+
+	constructor() {
+		super();
+		this._illustratedComponentType = 'link';
+	}
+
+	render() {
+		const illustrationContainerStyle = this.getIllustrationContainerStyle();
+		const titleClass = this.getTitleClass();
+
+		const actionLink = this.actionText && this.actionHref
+			? html`<a class="d2l-body-compact d2l-empty-state-action d2l-link" href=${this.actionHref}>${this.actionText}</a>`
+			: nothing;
+
+		return html`
+			${this.illustrationName
+		? html`
+			<div style="${styleMap(illustrationContainerStyle)}">
+				${runAsync(this.illustrationName, () => this.getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
+			</div>`
+		: html`<slot></slot>`}
+
+			<p class="${classMap(titleClass)}">${this.titleText}</p>
+			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			${actionLink}
+		`;
+	}
+
+}
+
+customElements.define('d2l-empty-state-illustrated-link', EmptyStateIllustratedLink);

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

@@ -0,0 +1,126 @@
+import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-styles.js';
+import { html, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+const illustrationAspectRatio = 500 / 330;
+
+export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * The action text to be used in the subtle button
+			 * @type {string}
+			 */
+			actionText: { type: String, attribute: 'action-text' },
+			/**
+			 * REQUIRED: A description giving details about the empty state
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * 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' },
+			_contentHeight: { state: true },
+			_illustratedComponentType: { state: true },
+			_titleSmall: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, emptyStateStyles, emptyStateIllustratedStyles];
+	}
+
+	constructor() {
+		super();
+
+		this._contentHeight = 330;
+		this._missingDescriptionErrorHasBeenThrown = false;
+		this._missingTitleTextErrorHasBeenThrown = false;
+		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+		this._titleSmall = false;
+		this._validatingAttributesTimeout = null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver.observe(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver.disconnect();
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateAttributes();
+	}
+
+	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;
+	}
+
+	getIllustrationContainerStyle() {
+		return {
+			height: `${this._contentHeight}px`,
+		};
+	}
+
+	getTitleClass() {
+		return {
+			'd2l-empty-state-title': true,
+			'd2l-empty-state-title-small': this._titleSmall,
+			'd2l-empty-state-title-large': !this._titleSmall,
+		};
+	}
+
+	_onResize(entries) {
+		if (!entries || entries.length === 0) return;
+		const entry = entries[0];
+		this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
+		this._titleSmall = entry.contentRect.right <= 615;
+	}
+
+	_validateAttributes() {
+		clearTimeout(this._validatingAttributesTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingAttributesTimeout = setTimeout(() => {
+			this._validatingAttributesTimeout = null;
+			const hasTitleText = (typeof this.titleText === 'string') && this.titleText.length > 0;
+			const hasDescription = (typeof this.description === 'string') && this.description.length > 0;
+
+			if (!hasTitleText && !this._missingTitleTextErrorHasBeenThrown) {
+				this._missingTitleTextErrorHasBeenThrown = true;
+				setTimeout(() => {
+					throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: missing required "titleText" attribute.`);
+				});
+			}
+
+			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
+				this._missingDescriptionErrorHasBeenThrown = true;
+				setTimeout(() => {
+					throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: missing required "description" attribute.`);
+				});
+			}
+		}, 3000);
+	}
+
+};

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

@@ -0,0 +1,82 @@
+import '../button/button-subtle.js';
+import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
+import { html, LitElement, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+
+/**
+ * The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.
+ * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ */
+class EmptyStateSimpleButton extends RtlMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * The action text to be used in the subtle button
+			 * @type {string}
+			 */
+			actionText: { type: String, attribute: 'action-text' },
+			/**
+			 * REQUIRED: A description giving details about the empty state
+			 * @type {string}
+			 */
+			description: { type: String },
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles];
+	}
+
+	constructor() {
+		super();
+		this._missingDescriptionErrorHasBeenThrown = false;
+		this._validatingDescriptionTimeout = null;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateDescription();
+	}
+
+	render() {
+		const actionButton = this.actionText
+			? html`
+				<d2l-button-subtle
+					class="d2l-empty-state-action"
+					@click=${this._handleActionClick}
+					h-align="text"
+					text=${this.actionText}
+					slim>
+				</d2l-button-subtle>`
+			: nothing;
+
+		return html`
+			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			${actionButton}
+		`;
+	}
+
+	_handleActionClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
+	}
+
+	_validateDescription() {
+		clearTimeout(this._validatingDescriptionTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingDescriptionTimeout = setTimeout(() => {
+			this._validatingDescriptionTimeout = null;
+			const hasDescription = (typeof this.description === 'string') && this.description.length > 0;
+
+			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
+				this._missingDescriptionErrorHasBeenThrown = true;
+				setTimeout(() => { throw new Error('<d2l-empty-state-simple-button>: missing required "description" attribute.'); });
+			}
+		}, 3000);
+	}
+
+}
+
+customElements.define('d2l-empty-state-simple-button', EmptyStateSimpleButton);

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

@@ -0,0 +1,74 @@
+import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
+import { html, LitElement, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { linkStyles } from '../link/link.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+
+/**
+ * The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.
+ */
+class EmptyStateSimpleLink extends RtlMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * The action URL or URL fragment of the link
+			 * @type {string}
+			 */
+			actionHref: { type: String, attribute: 'action-href' },
+			/**
+			 * The action text to be used in the link
+			 * @type {string}
+			 */
+			actionText: { type: String, attribute: 'action-text' },
+			/**
+			 * REQUIRED: A description giving details about the empty state
+			 * @type {string}
+			 */
+			description: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles, linkStyles];
+	}
+
+	constructor() {
+		super();
+		this._missingDescriptionErrorHasBeenThrown =  false;
+		this._validatingDescriptionTimeout = null;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateDescription();
+	}
+
+	render() {
+		const actionLink = this.actionText && this.actionHref
+			? html`<a class="d2l-body-compact d2l-link" href=${this.actionHref}>${this.actionText}</a>`
+			: nothing;
+
+		return html`
+			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			${actionLink}
+		`;
+	}
+
+	_validateDescription() {
+		clearTimeout(this._validatingDescriptionTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingDescriptionTimeout = setTimeout(() => {
+			this._validatingDescriptionTimeout = null;
+			const hasDescription = (typeof this.description === 'string') && this.description.length > 0;
+
+			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
+				this._missingDescriptionErrorHasBeenThrown = true;
+				setTimeout(() => { throw new Error('<d2l-empty-state-simple-link>: missing required "description" attribute.'); });
+			}
+		}, 3000);
+	}
+
+}
+
+customElements.define('d2l-empty-state-simple-link', EmptyStateSimpleLink);

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

@@ -0,0 +1,84 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+
+export const emptyStateStyles = css`
+
+	:host {
+		border: 1px solid var(--d2l-color-mica);
+		border-radius: 0.3rem;
+		display: block;
+		padding: 1.2rem 1.5rem;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+`;
+
+export const emptyStateSimpleStyles = css`
+
+	:host([dir="rtl"]) .d2l-empty-state-description {
+		padding-left: 0.5rem;
+		padding-right: 0;
+	}
+
+	.d2l-empty-state-description {
+		display: inline;
+		padding-right: 0.5rem;
+	}
+
+	.d2l-empty-state-action {
+		vertical-align: top;
+	}
+
+`;
+
+export const emptyStateIllustratedStyles = css`
+
+	:host {
+		text-align: center;
+	}
+
+	.d2l-empty-state-action {
+		margin-top: 0.5rem;
+	}
+
+	.d2l-empty-state-description {
+		margin: 0 auto 0.3rem;
+		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;
+	}
+
+	::slotted(*) {
+		display: none;
+	}
+
+	::slotted(svg:first-child) {
+		display: inline-block;
+	}
+
+	svg {
+		height: 100%;
+		max-width: 500px;
+		width: 100%;
+	}
+
+`;