@brightspace-ui/core 3.227.3 → 3.227.5

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/colors/colors.js

@@ -19,6 +19,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-background-color-interactive-translucent-default: #00000080;
 		--d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
 		--d2l-theme-background-color-sunken: #f6f7f8;
+		--d2l-theme-badge-background-color: var(--d2l-color-gypsum);
+		--d2l-theme-badge-text-color: var(--d2l-theme-text-color-static-standard);
 		--d2l-theme-border-color-emphasized: var(--d2l-color-galena);
 		--d2l-theme-border-color-focus: var(--d2l-color-celestine);
 		--d2l-theme-border-color-standard: var(--d2l-color-mica);
@@ -29,6 +31,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
 		--d2l-theme-icon-color-inverted: #ffffff;
 		--d2l-theme-icon-color-standard: var(--d2l-color-tungsten);
+		--d2l-theme-notification-background-color: var(--d2l-color-carnelian-minus-1);
+		--d2l-theme-notification-text-color: #ffffff;
 		--d2l-theme-shadow-attached-color: #00000008;
 		--d2l-theme-shadow-floating-color: #00000026;
 		--d2l-theme-status-color-default: var(--d2l-color-celestine);
@@ -73,6 +77,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-background-color-interactive-translucent-default: #00000080;
 		--d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
 		--d2l-theme-background-color-sunken: #000000;
+		--d2l-theme-badge-background-color: #303335;
+		--d2l-theme-badge-text-color: var(--d2l-theme-text-color-static-standard);
 		--d2l-theme-border-color-emphasized: var(--d2l-color-galena);
 		--d2l-theme-border-color-focus: var(--d2l-color-celestine-plus-1);
 		--d2l-theme-border-color-standard: var(--d2l-color-tungsten);
@@ -83,6 +89,8 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
 		--d2l-theme-icon-color-inverted: #ffffff;
 		--d2l-theme-icon-color-standard: var(--d2l-color-corundum);
+		--d2l-theme-notification-background-color: var(--d2l-color-carnelian-minus-1);
+		--d2l-theme-notification-text-color: #ffffff;
 		--d2l-theme-shadow-attached-color: #000000d9;
 		--d2l-theme-shadow-floating-color: #000000d9;
 		--d2l-theme-status-color-default: var(--d2l-theme-brand-color-primary-default);

package/components/count-badge/count-badge-icon.js

@@ -66,7 +66,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	render() {
 		let numberStyles = {
-			border: '2px solid white',
+			border: '2px solid var(--d2l-theme-background-color-base)',
 			position: 'absolute',
 			visibility: this.skeleton ? 'hidden' : undefined,
 		};

package/components/count-badge/count-badge-mixin.js

@@ -115,13 +115,13 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			}
 
 			:host([type="notification"]) .d2l-count-badge-number {
-				background-color: var(--d2l-color-carnelian-minus-1);
-				color: white;
+				background-color: var(--d2l-theme-notification-background-color);
+				color: var(--d2l-theme-notification-text-color);
 			}
 
 			:host([type="count"]) .d2l-count-badge-number {
-				background-color: var(--d2l-count-badge-background-color, var(--d2l-color-gypsum));
-				color: var(--d2l-count-badge-foreground-color, var(--d2l-color-ferrite));
+				background-color: var(--d2l-count-badge-background-color, var(--d2l-theme-badge-background-color));
+				color: var(--d2l-count-badge-foreground-color, var(--d2l-theme-badge-text-color));
 			}
 
 			:host([size="small"]) .d2l-count-badge-number {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.227.3",
+  "version": "3.227.5",
   "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>