@brightspace-ui/core 3.227.4 → 3.227.6

package/components/button/button-icon.js

@@ -49,8 +49,8 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 		return [super.styles, buttonStyles, visibleOnAncestorStyles,
 			css`
 				:host {
-					--d2l-button-icon-background-color-default: transparent;
-					--d2l-button-icon-background-color-hover-default: var(--d2l-color-gypsum);
+					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-tertiary-default);
+					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-tertiary-hover);
 					--d2l-button-icon-border-radius-default: 0.3rem;
 					--d2l-button-icon-min-height-default: calc(2rem + 2px);
 					--d2l-button-icon-min-width-default: calc(2rem + 2px);
@@ -62,12 +62,12 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 					display: none;
 				}
 				:host([translucent]) {
-					--d2l-button-icon-background-color-default: rgba(0, 0, 0, 0.5);
-					--d2l-button-icon-background-color-hover-default: var(--d2l-color-celestine);
-					--d2l-focus-ring-color: white;
+					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-translucent-default);
+					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-translucent-hover);
+					--d2l-focus-ring-color: var(--d2l-theme-icon-color-inverted);
 					--d2l-focus-ring-offset: -4px;
-					--d2l-button-icon-fill-color: white;
-					--d2l-button-icon-fill-color-hover: white;
+					--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-inverted);
+					--d2l-button-icon-fill-color-hover: var(--d2l-theme-icon-color-inverted);
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color-default: transparent;
@@ -103,13 +103,13 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				button:hover:not([disabled]),
 				button:focus:not([disabled]),
 				:host([active]) button:not([disabled]) {
-					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
+					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-theme-icon-color-standard));
 					background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
 				}
 
 				d2l-icon,
 				slot[name="icon"]::slotted(d2l-icon-custom) {
-					color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
+					color: var(--d2l-button-icon-fill-color, var(--d2l-theme-icon-color-standard));
 				}
 
 				:host([translucent]) button {
@@ -122,7 +122,7 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 
 				:host([disabled]) button {
 					cursor: default;
-					opacity: 0.5;
+					opacity: var(--d2l-theme-opacity-disabled-control);
 				}
 
 				@media (prefers-reduced-motion: reduce) {

package/components/button/button.js

@@ -57,14 +57,14 @@ class Button extends ButtonMixin(LitElement) {
 				button[disabled]:hover,
 				button[disabled]:focus,
 				:host([active]) button[disabled] {
-					background-color: var(--d2l-color-gypsum);
-					color: var(--d2l-color-ferrite);
+					background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+					color: var(--d2l-theme-text-color-static-standard);
 				}
 
 				button:hover,
 				button:focus,
 				:host([active]) button {
-					background-color: var(--d2l-color-mica);
+					background-color: var(--d2l-theme-background-color-interactive-secondary-hover);
 				}
 
 				:host([disabled]) button {
@@ -72,11 +72,11 @@ class Button extends ButtonMixin(LitElement) {
 					position: relative;
 				}
 				:host([disabled]) button::before {
-					background-color: white;
+					background-color: var(--d2l-theme-background-color-base);
 					border-radius: inherit;
 					content: "";
 					inset: 0;
-					opacity: 0.5;
+					opacity: var(--d2l-theme-opacity-disabled-control);
 					position: absolute;
 				}
 
@@ -84,13 +84,13 @@ class Button extends ButtonMixin(LitElement) {
 				:host([primary]) button[disabled]:hover,
 				:host([primary]) button[disabled]:focus,
 				:host([primary][active]) button[disabled] {
-					background-color: var(--d2l-color-celestine);
-					color: #ffffff;
+					background-color: var(--d2l-theme-background-color-interactive-primary-default);
+					color: var(--d2l-theme-text-color-static-inverted);
 				}
 				:host([primary]) button:hover,
 				:host([primary]) button:focus,
 				:host([primary][active]) button {
-					background-color: var(--d2l-color-celestine-minus-1);
+					background-color: var(--d2l-theme-background-color-interactive-primary-hover);
 				}
 			`
 		];

package/components/demo/test/demo-page-settings.test.js

@@ -0,0 +1,25 @@
+import '../demo-page-settings.js';
+
+import { expect, fixture, html, oneEvent, runConstructor } from '@brightspace-ui/testing';
+
+describe('d2l-demo-page-settings', () => {
+
+	describe('constructor', () => {
+		it('should construct', () => {
+			runConstructor('d2l-demo-page-settings');
+		});
+	});
+
+	describe('language select', () => {
+		it('updates the documentElement language on change', async() => {
+			const elem = await fixture(html`<d2l-demo-page-settings></d2l-demo-page-settings>`);
+			const select = elem.shadowRoot.querySelector('select');
+			select.value = 'ko-kr';
+			setTimeout(() => select.dispatchEvent(new Event('change')));
+			await oneEvent(select, 'change');
+			expect(document.documentElement.lang).to.equal('ko-kr');
+			expect(document.documentElement.matches('*:lang(ko)')).to.be.true;
+		});
+	});
+
+});

package/components/demo/test/demo-page.test.js

@@ -0,0 +1,17 @@
+import '../demo-page.js';
+
+import { expect, runConstructor } from '@brightspace-ui/testing';
+
+describe('d2l-demo-page', () => {
+
+	describe('constructor', () => {
+		it('should construct', () => {
+			runConstructor('d2l-demo-page');
+		});
+	});
+
+	it('should set isD2LDemoPage', () => {
+		expect(window.isD2LDemoPage).to.be.true;
+	});
+
+});

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -70,7 +70,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
-		this._minWidth = 390;
+		this._minWidth = 410;
 		this._noSearchSupport = true;
 
 		this._handleDateChange = this._handleDateChange.bind(this);
@@ -122,6 +122,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 			selected: this.selected,
 			text: this.text,
 			valueText: this.valueText,
+			minWidth: this._minWidth,
 			additionalContent: this._getAdditionalContent.bind(this),
 			getAdditionalEventDetails: this._getAdditionalEventDetails.bind(this),
 			clearProperties: this._clearProperties.bind(this)

package/components/filter/filter-dimension-set.js

@@ -151,7 +151,7 @@ class FilterDimensionSet extends LitElement {
 		const values = valueNodes.map(value => {
 			if (value._noSearchSupport) noSearchSupport = true;
 			if (value._enforceSingleSelection) enforceSingleSelection = true;
-			if (value._minWidth) minWidth = value._minWidth;
+			if (value._minWidth) minWidth = minWidth ? Math.max(value._minWidth, minWidth) : value._minWidth;
 
 			return value.getValueDetails();
 		});

package/components/filter/filter.js

@@ -574,7 +574,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			`;
 		}
 
-		if (dimension.minWidth) this._minWidth = dimension.minWidth;
+		if (dimension.minWidth) this._minWidth = Math.max(dimension.minWidth, this._minWidth);
 		if (this._isDimensionEmpty(dimension)) {
 			const emptyState = dimension.setEmptyState
 				? this._createEmptyState(dimension.setEmptyState, dimension.key)
@@ -842,6 +842,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				if (dimension.searchValue || dimension.searchType === 'manual') shouldSearch = true;
 				shouldRecount = true;
 				this._activeFiltersSubscribers.updateSubscribers();
+				newValue.forEach((field) => this._minWidth = field.minWidth ? Math.max(field.minWidth, this._minWidth) : this._minWidth);
 			} else if (prop === 'text') {
 				this._activeFiltersSubscribers.updateSubscribers();
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.227.4",
+  "version": "3.227.6",
   "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/alert/demo/alert-toast.html

@@ -1,106 +0,0 @@
-<!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 '../../button/button.js';
-		import '../../demo/demo-page.js';
-		import '../alert-toast.js';
-	</script>
-	<style>
-		d2l-button {
-			padding-bottom: 1rem;
-		}
-	</style>
-</head>
-
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-alert-toast">
-
-		<h2>Default</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert-toast id="toast1">A default toast alert.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast1">Open alert</d2l-button>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Without Auto-Close</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert-toast id="toast2" no-auto-close >A default toast alert without autoclose.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast2">Open alert</d2l-button>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Without Close Button</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert-toast id="toast3" hide-close-button>A default toast alert without close button.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast3">Open alert</d2l-button>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>With Subtext and Button</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert-toast id="toast4" type="success" button-text="Do it!"
-					subtext="I am subtext. I'm here to test the wrapping capabilities of adding subtext to these alerts, as well as other styling issues. Feel free to add to me!">
-					A message.
-				</d2l-alert-toast>
-				<d2l-button primary data-toast="toast4">Open alert</d2l-button>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Multiple Alerts</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert-toast id="toast5" no-auto-close>A default toast alert.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast5">Open alert</d2l-button>
-
-				<d2l-alert-toast id="toast6" no-auto-close>A default toast alert.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast6">Open alert</d2l-button>
-
-				<d2l-alert-toast id="toast7" no-auto-close>A default toast alert.</d2l-alert-toast>
-				<d2l-button primary data-toast="toast7">Open alert</d2l-button>
-
-				<d2l-alert-toast id="toast8" type="success" button-text="Do it!" no-auto-close
-					subtext="I am subtext. I'm here to test the wrapping capabilities of adding subtext to these alerts, as well as other styling issues. Feel free to add to me!">
-					A message.
-				</d2l-alert-toast>
-				<d2l-button primary data-toast="toast8">Open alert</d2l-button>
-			</template>
-		</d2l-demo-snippet>
-	</d2l-demo-page>
-
-</body>
-<script type="module">
-	function openToast(toastId) {
-		document.getElementById(toastId).setAttribute('open', '');
-	}
-
-	window.requestAnimationFrame(() => {
-		const buttons = document.querySelectorAll('d2l-button');
-		buttons.forEach((button) => {
-			button.addEventListener('click', () => {
-				const toast = button.getAttribute('data-toast');
-				openToast(toast);
-			});
-		});
-	});
-
-	const buttonAlertToast = document.querySelector('#toast4');
-	buttonAlertToast.addEventListener('d2l-alert-toast-button-press', (e) => {
-		console.log('d2l-alert-toast-button-press', e);
-	});
-
-	document.body.addEventListener('d2l-alert-toast-close', (e) => {
-		console.log('d2l-alert-toast-close', e);
-	});
-</script>
-
-</html>

package/components/alert/demo/alert.html

@@ -1,82 +0,0 @@
-<!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 '../alert.js';
-	</script>
-</head>
-
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-alert">
-
-		<h2>Default</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="default">A default message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Success</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="success">A success message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Critical</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="critical">A critical message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Warning</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="warning">A warning message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>With Close Button</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="default" has-close-button>A message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>With Action Button</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="default" button-text="Do it!" has-close-button>A message.</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>With Subtext</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-alert type="default" button-text="Do it!" has-close-button
-					subtext="I am subtext. I'm here to test the wrapping capabilities of adding subtext to these alerts, as well as other styling issues. Feel free to add to me!">
-					A message.
-				</d2l-alert>
-			</template>
-		</d2l-demo-snippet>
-
-	</d2l-demo-page>
-
-	<script type="module">
-		document.body.addEventListener('d2l-alert-close', (e) => {
-			console.log('d2l-alert-close', e);
-		});
-		document.body.addEventListener('d2l-alert-button-press', (e) => {
-			console.log('d2l-alert-button-press', e);
-		});
-	</script>
-</body>
-
-</html>

package/components/backdrop/demo/backdrop-loading.html

@@ -1,166 +0,0 @@
-<!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 '../../button/button.js';
-			import '../backdrop-loading.js';
-		</script>
-		<style>
-			th, td {
-				border-bottom: 1px solid #dddddd;
-				padding: 30px;
-				text-align: left;
-			}
-			#grade-container {
-				position: relative;
-				width: fit-content;
-			}
-		</style>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-backdrop">
-			<d2l-demo-snippet>
-				<template>
-					<div id="target"><d2l-button primary>Refresh Content</d2l-button></div>
-					<div id="grade-container">
-						<table>
-							<thead>
-								<th>Course</th>
-								<th>Grade</th>
-								<th>Hours Spent in Content</th>
-							</thead>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Math</td>
-								<td class="grade">85%</td>
-								<td>100</td>
-							</tr>
-							<tr>
-								<td>Art</td>
-								<td class="grade">98%</td>
-								<td>10</td>
-							</tr>
-						</table>
-						<d2l-backdrop-loading></d2l-backdrop-loading>
-					</div>
-					<script data-demo-hide>
-						const demo = document.currentScript.parentNode;
-						const loadingBackdrop = demo.querySelector('d2l-backdrop-loading');
-						demo.querySelector('#target > d2l-button').addEventListener('click', () => {
-							loadingBackdrop.shown = !loadingBackdrop.shown;
-							setTimeout(() => {
-								demo.querySelectorAll('.grade').forEach((grade) => {
-									grade.innerHTML = `${Math.round(Math.random() * 100).toString()}%`;
-								});
-								loadingBackdrop.shown = !loadingBackdrop.shown;
-							}, 5000);
-						});
-					</script>
-				</template>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>

package/components/backdrop/demo/backdrop.html

@@ -1,57 +0,0 @@
-<!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 '../backdrop.js';
-		</script>
-		<style>
-			#target {
-				position: relative;
-				z-index: 1000;
-			}
-		</style>
-	</head>
-	<body unresolved>
-
-		<d2l-demo-page page-title="d2l-backdrop">
-
-			<h2>Backdrop</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<div id="target"><button>toggle backdrop</button></div>
-					<div>
-						<input type="checkbox" id="slow-transition" name="slow-transition">
-						<label for="slow-transition">slow transition</label>
-					</div>
-					<div>
-						<input type="checkbox" id="no-animate-hide" name="no-animate-hide">
-						<label for="no-animate-hide">no animation on hide</label>
-					</div>
-					<d2l-backdrop for-target="target"></d2l-backdrop>
-					<script>
-						const backdrop = document.querySelector('d2l-backdrop');
-						document.querySelector('#target > button').addEventListener('click', () => {
-							backdrop.shown = !backdrop.shown;
-						});
-						document.querySelector('#no-animate-hide').addEventListener('change', () => {
-							backdrop.noAnimateHide = !backdrop.noAnimateHide;
-						});
-						document.querySelector('#slow-transition').addEventListener('change', e => {
-							if (e.target.checked) {
-								backdrop.setAttribute('slow-transition', true);
-							} else {
-								backdrop.removeAttribute('slow-transition');
-							}
-						});
-					</script>
-				</template>
-			</d2l-demo-snippet>
-
-		</d2l-demo-page>
-	</body>
-</html>

package/components/breadcrumbs/demo/breadcrumbs.html

@@ -1,53 +0,0 @@
-<!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 '../breadcrumb.js';
-			import '../breadcrumb-current-page.js';
-			import '../breadcrumbs.js';
-		</script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-breadcrumbs">
-			<h2>Basic</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-breadcrumbs>
-						<d2l-breadcrumb href="#" text="Basic Item 1"></d2l-breadcrumb>
-						<d2l-breadcrumb href="#" text="Basic Item 2"></d2l-breadcrumb>
-						<d2l-breadcrumb href="#" text="Basic Item 3"></d2l-breadcrumb>
-					</d2l-breadcrumbs>
-				</template>
-			</d2l-demo-snippet>
-			<h2>Ends with current page</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-breadcrumbs>
-						<d2l-breadcrumb href="#" text="Basic Item 1"></d2l-breadcrumb>
-						<d2l-breadcrumb href="#" text="Basic Item 2"></d2l-breadcrumb>
-						<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
-					</d2l-breadcrumbs>
-				</template>
-			</d2l-demo-snippet>
-			<h2>Basic Overflow d2l-breadcrumbs</h2>
-			<d2l-demo-snippet>
-				<d2l-breadcrumbs style="max-width: 250px;">
-					<d2l-breadcrumb href="#" text="Truncate Basic Item 1"></d2l-breadcrumb>
-					<d2l-breadcrumb href="#" text="Truncate Basic Item 2"></d2l-breadcrumb>
-				</d2l-breadcrumbs>
-			</d2l-demo-snippet>
-			<h2>Compact d2l-breadcrumbs</h2>
-			<d2l-demo-snippet>
-				<d2l-breadcrumbs compact>
-					<d2l-breadcrumb href="#" text="Compact Item 1"></d2l-breadcrumb>
-					<d2l-breadcrumb href="#" text="Compact Item 2"></d2l-breadcrumb>
-					<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
-				</d2l-breadcrumbs>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>