@brightspace-ui/core 2.11.1 → 2.13.0

package/components/dialog/README.md

@@ -81,6 +81,7 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 
 - `d2l-dialog-open`: dispatched when the dialog is opened
 - `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+- `d2l-dialog-before-close`: dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -192,6 +193,7 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 
 - `d2l-dialog-open`: dispatched when the dialog is opened
 - `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+- `d2l-dialog-before-close`: dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
 <!-- docs: end hidden content -->
 
 ### Usage
@@ -249,6 +251,7 @@ The `d2l-dialog-fullscreen` element is a fullscreen variant of the generic `d2l-
 
 - `d2l-dialog-open`: dispatched when the dialog is opened
 - `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+- `d2l-dialog-before-close`: dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
 <!-- docs: end hidden content -->
 
 ### Usage

package/components/dialog/demo/dialog-fullscreen.html

@@ -13,8 +13,13 @@
 			import '../dialog-fullscreen.js';
 			import './dialog-async-content.js';
 			import '../../dropdown/dropdown.js';
+			import '../../dropdown/dropdown-button-subtle.js';
+			import '../../dropdown/dropdown-content.js';
 			import '../../dropdown/dropdown-more.js';
 			import '../../dropdown/dropdown-menu.js';
+			import '../../filter/filter.js';
+			import '../../filter/filter-dimension-set.js';
+			import '../../filter/filter-dimension-set-value.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
 			import '../../tabs/tabs.js';
@@ -48,6 +53,28 @@
 						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-dropdown-button-subtle text="More">
+							<d2l-dropdown-content mobile-tray="bottom">
+								<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+								<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+								<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+							</d2l-dropdown-content>
+						</d2l-dropdown-button-subtle>
+						<d2l-filter>
+							<d2l-filter-dimension-set key="course" text="Course" select-all>
+								<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+							</d2l-filter-dimension-set>
+						</d2l-filter>
 						<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
 						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 					</d2l-dialog-fullscreen>

package/components/dialog/demo/dialog-nested.html

@@ -10,8 +10,12 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../../button/button.js';
+			import '../../dropdown/dropdown-button-subtle.js';
+			import '../../dropdown/dropdown-content.js';
+			import '../../filter/filter.js';
+			import '../../filter/filter-dimension-set.js';
+			import '../../filter/filter-dimension-set-value.js';
 			import '../dialog.js';
-			import '../dialog-confirm.js';
 		</script>
 		<style>
 			#openChild {
@@ -40,6 +44,28 @@
 								<div>
 									Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
 									Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
+									<d2l-dropdown-button-subtle text="More">
+										<d2l-dropdown-content mobile-tray="left">
+											<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+											<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+											<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+										</d2l-dropdown-content>
+									</d2l-dropdown-button-subtle>	
+									<d2l-filter>
+										<d2l-filter-dimension-set key="course" text="Course" select-all>
+											<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+											<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+										</d2l-filter-dimension-set>
+									</d2l-filter>
 								</div>
 								<d2l-button slot="footer" primary data-dialog-action="child ok">Child</d2l-button>
 								<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>

package/components/dialog/demo/dialog.html

@@ -10,6 +10,11 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../../button/button.js';
+			import '../../dropdown/dropdown-button-subtle.js';
+			import '../../dropdown/dropdown-content.js';
+			import '../../filter/filter.js';
+			import '../../filter/filter-dimension-set.js';
+			import '../../filter/filter-dimension-set-value.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
 			import './dialog-container.js';
@@ -33,6 +38,28 @@
 							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+							<d2l-dropdown-button-subtle text="More">
+								<d2l-dropdown-content mobile-tray="right">
+									<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+									<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+									<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+								</d2l-dropdown-content>
+							</d2l-dropdown-button-subtle>
+							<d2l-filter>
+								<d2l-filter-dimension-set key="course" text="Course" select-all>
+									<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+									<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+								</d2l-filter-dimension-set>
+							</d2l-filter>
 						</div>
 						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
 						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
@@ -104,6 +131,57 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (intercept closing)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openInterceptClosing">Show Dialog</d2l-button>
+					<d2l-dialog id="dialogInterceptClosing" title-text="Dialog Prevent Closing">
+						<div>
+							<p>This dialog is prevented from closing by listening "d2l-dialog-before-close" event.</p>
+							<d2l-dialog id="dialogConfirmClose" title-text="Comfirm close">
+								<div>
+									<p>Do you really want to close the previous dialog?</p>
+								</div>
+								<d2l-button slot="footer" primary data-dialog-action="confirm">Yes</d2l-button>
+								<d2l-button slot="footer" data-dialog-action="deny">No</d2l-button>
+							</d2l-dialog>
+						</div>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Close Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action="close">Close without confirmation</d2l-button>
+						<d2l-button slot="footer" data-dialog-action="cancel">Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						let canBeClosed = false;
+						document.querySelector('#openInterceptClosing').addEventListener('click', () => {
+							document.querySelector('#dialogInterceptClosing').opened = true;
+						});
+						document.querySelector('#dialogInterceptClosing').addEventListener('d2l-dialog-open', () => {
+							canBeClosed = false;
+						});
+						document.querySelector('#dialogInterceptClosing').addEventListener('d2l-dialog-close', (e) => {
+							console.log('dialog action:', e.detail.action);
+						});
+						document.querySelector('#dialogConfirmClose').addEventListener('d2l-dialog-close', (e) => {
+							e.stopPropagation();
+						});
+						document.querySelector('#dialogInterceptClosing').addEventListener('d2l-dialog-before-close', async(e) => {
+
+							if (e.detail.action === 'close' || canBeClosed) return;
+
+							e.preventDefault();
+							const action = await document.querySelector('#dialogConfirmClose').open();
+
+							console.log('dialog action:', e.detail.action, ', confirm dialog action:', action);
+							if (action === 'confirm') {
+								canBeClosed = true;
+								e.detail.closeDialog();
+							}
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-fullscreen.js

@@ -74,16 +74,24 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 
 				dialog.d2l-dialog-outer,
 				div.d2l-dialog-outer {
+					animation: d2l-dialog-fullscreen-close 200ms ease-out;
 					border-radius: 8px;
 					margin: 1.5rem;
 					max-width: 1170px;
-					opacity: 0;
 					top: 0;
-					transform: translateY(-50px) scale(0.97);
-					transition: transform 200ms ease-out, opacity 200ms ease-out;
 					width: auto;
 				}
 
+				@keyframes d2l-dialog-fullscreen-close {
+					0% { opacity: 1; transform: translateY(0); }
+					100% { opacity: 0; transform: translateY(-50px) scale(0.97); }
+				}
+
+				@keyframes d2l-dialog-fullscreen-open {
+					0% { opacity: 0; transform: translateY(-50px) scale(0.97); }
+					100% { opacity: 1; transform: translateY(0); }
+				}
+
 				dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
 				div.d2l-dialog-outer.d2l-dialog-fullscreen-within {
 					/* no margins when there is a fullscreen element within */
@@ -107,8 +115,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 
 				:host([_state="showing"]) dialog.d2l-dialog-outer,
 				:host([_state="showing"]) div.d2l-dialog-outer {
-					opacity: 1;
-					transition-duration: 400ms;
+					animation: d2l-dialog-fullscreen-open 400ms ease-out;
 				}
 
 				dialog::backdrop {
@@ -128,8 +135,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				@media (prefers-reduced-motion: reduce) {
 
 					dialog.d2l-dialog-outer,
-					div.d2l-dialog-outer {
-						transition: none;
+					div.d2l-dialog-outer,
+					:host([_state="showing"]) dialog.d2l-dialog-outer,
+					:host([_state="showing"]) div.d2l-dialog-outer {
+						animation: none;
 					}
 
 					dialog::backdrop {
@@ -161,10 +170,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					height: calc(100% - 1px);
 				}
 
-				div[nested].d2l-dialog-outer {
-					top: 0;
-				}
-
 				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
 					margin-left: -13px;
 					margin-right: 15px;

package/components/dialog/dialog-mixin.js

@@ -144,6 +144,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		clearDismissible(this._dismissibleId);
 		this._dismissibleId = null;
 
+		if (this._isCloseAborted()) {
+			this._dismissibleId = setDismissible(() => this._close(abortAction));
+			return;
+		}
+
 		if (!this.shadowRoot) return;
 		const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
 
@@ -154,11 +159,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 		this._scroll = false;
 		if (!reduceMotion) {
-			const transitionEnd = () => {
-				dialog.removeEventListener('transitionend', transitionEnd);
+			const animationEnd = () => {
+				dialog.removeEventListener('animationend', animationEnd);
 				doClose();
 			};
-			dialog.addEventListener('transitionend', transitionEnd);
+			dialog.addEventListener('animationend', animationEnd);
 			this._state = 'hiding';
 		} else {
 			this._state = 'hiding';
@@ -298,6 +303,21 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._useNative = false;
 	}
 
+	_isCloseAborted() {
+
+		/** Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing */
+		const abortEvent = new CustomEvent('d2l-dialog-before-close', {
+			cancelable: true,
+			detail: {
+				action: this._action,
+				closeDialog: this._close.bind(this, this._action)
+			}
+		});
+		this.dispatchEvent(abortEvent);
+
+		return abortEvent.defaultPrevented;
+	}
+
 	_open() {
 		if (!this.opened) return;
 
@@ -314,11 +334,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
 
 		const animPromise = new Promise((resolve) => {
-			const transitionEnd = () => {
-				dialog.removeEventListener('transitionend', transitionEnd);
+			const animationEnd = () => {
+				dialog.removeEventListener('animationend', animationEnd);
 				resolve();
 			};
-			dialog.addEventListener('transitionend', transitionEnd);
+			dialog.addEventListener('animationend', animationEnd);
 		});
 
 		if (this._useNative) {

package/components/dialog/dialog-styles.js

@@ -21,6 +21,7 @@ export const dialogStyles = css`
 	}
 
 	.d2l-dialog-outer {
+		animation: d2l-dialog-close 200ms ease-in;
 		background-color: white;
 		border: 1px solid var(--d2l-color-mica);
 		border-radius: 8px;
@@ -28,8 +29,21 @@ export const dialogStyles = css`
 		box-sizing: content-box;
 		position: fixed; /* also required for native to override position: absolute */
 		top: 100px;
-		transform: translateY(-50px);
-		transition: transform 200ms ease-in;
+	}
+
+	:host([_state="showing"]) > .d2l-dialog-outer {
+		/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
+		animation: d2l-dialog-open 200ms ease-in;
+	}
+
+	@keyframes d2l-dialog-close {
+		0% { transform: translateY(0); }
+		100% { transform: translateY(-50px); }
+	}
+
+	@keyframes d2l-dialog-open {
+		0% { transform: translateY(-50px); }
+		100% { transform: translateY(0); }
 	}
 
 	.d2l-dialog-outer.d2l-dialog-outer-nested-showing {
@@ -45,10 +59,6 @@ export const dialogStyles = css`
 		z-index: 1000;
 	}
 
-	.d2l-dialog-outer.d2l-dialog-outer-nested {
-		top: 0;
-	}
-
 	dialog.d2l-dialog-outer {
 		color: var(--d2l-color-ferrite);
 		margin-bottom: 0; /* required to override Chrome native positioning */
@@ -63,11 +73,6 @@ export const dialogStyles = css`
 		transition: opacity 200ms ease-in;
 	}
 
-	:host([_state="showing"]) > .d2l-dialog-outer {
-		/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
-		transform: translateY(0);
-	}
-
 	:host([_state="showing"]) dialog::backdrop {
 		opacity: 0.7;
 	}
@@ -158,8 +163,9 @@ export const dialogStyles = css`
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.d2l-dialog-outer {
-			transition: none;
+		.d2l-dialog-outer,
+		:host([_state="showing"]) > .d2l-dialog-outer {
+			animation: none;
 		}
 		dialog::backdrop {
 			transition: none;

package/components/dialog/dialog.js

@@ -80,10 +80,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 					top: 42px;
 				}
 
-				div[nested].d2l-dialog-outer {
-					top: 0;
-				}
-
 				.d2l-dialog-header > div > d2l-button-icon {
 					margin: -8px -13px 0 15px;
 				}

package/components/html-block/README.md

@@ -68,7 +68,7 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
 
 ### Rendering MathML and LaTeX
 
-Examples are provided to display how user-authored math can be embedded within your webpage.
+Examples are provided to display how user-authored math can be embedded within your webpage. Note that rendering math requires the `mathjax` context to be set correctly. For testing and/or demo pages **ONLY**, you can import `@brightspace-ui/core/tools/mathjax-test-context.js` to set this context for you.
 
 **MathML:**
 <!-- docs: demo code -->
@@ -76,6 +76,7 @@ Examples are provided to display how user-authored math can be embedded within y
 <script type="module">
   import '@brightspace-ui/core/components/html-block/html-block.js';
   import '@brightspace-ui/core/components/icons/icon.js';
+  import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block>
   <div class="mathml-container">
@@ -100,7 +101,7 @@ Examples are provided to display how user-authored math can be embedded within y
 </d2l-html-block>
 ```
 
-**LaTeX:** Rendering LaTeX requires the `mathjax` context to be set correctly. For testing and/or demo pages you can do the following.
+**LaTeX:**
 
 <!-- docs: demo code -->
 ```html

package/components/html-block/html-block.js

@@ -11,6 +11,12 @@ export const htmlBlockContentStyles = css`
 		font-weight: 400;
 		line-height: 1.2rem;
 	}
+	.d2l-html-block-rendered > :first-child {
+		margin-top: 0;
+	}
+	.d2l-html-block-rendered > :last-child {
+		margin-bottom: 0;
+	}
 	h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
 		font-weight: bold;
 	}
@@ -194,7 +200,11 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		super.firstUpdated(changedProperties);
 
 		if (this._renderContainer) return;
-		this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot ${!this.noDeferredRendering ? 'style="display: none"' : ''}></slot>`;
+		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered'
+			+ `${this.compact ? ' d2l-html-block-compact' : ''}`
+			+ '"></div><slot'
+			+ `${!this.noDeferredRendering ? ' style="display: none"' : ''}`
+			+ '></slot>';
 
 		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
 		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');

package/components/inputs/demo/input-time-range.html

@@ -33,6 +33,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Custom Interval (Issue #1751)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-time-range label="Time Range" start-value="15:15" time-interval="ten" enforce-time-intervals></d2l-input-time-range>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Hidden Label</h2>
 			<d2l-demo-snippet>
 				<template>

package/components/tag-list/README.md

@@ -1,5 +1,5 @@
 # Tag List
-*This component is in progress. The API is generally stable but the ability to clear tags is currently a WIP.*
+*This component is in progress. The API is generally stable but there could be some appearance or minor behavior churn in the short-term.*
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 
@@ -31,8 +31,12 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
   import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
-</script>
 
+  document.addEventListener('d2l-tag-list-item-clear', (e) => {
+    e.target.parentNode.removeChild(e.target);
+    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+  });
+</script>
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
   <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
@@ -49,6 +53,11 @@ The `d2l-tag-list-item` provides the appropriate `listitem` semantics and stylin
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
   import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+
+  document.addEventListener('d2l-tag-list-item-clear', (e) => {
+    e.target.parentNode.removeChild(e.target);
+    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+  });
 </script>
 
 <d2l-tag-list description="Example Tags">

package/components/tag-list/demo/tag-list.html

@@ -64,9 +64,9 @@
 					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
 				</d2l-tag-list>
 				<script>
-					document.addEventListener('d2l-tag-list-item-cleared', (e) => {
+					document.addEventListener('d2l-tag-list-item-clear', (e) => {
 						e.target.parentNode.removeChild(e.target);
-						console.log(`d2l-tag-list-item-cleared event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+						console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
 					});
 				</script>
 			</d2l-demo-snippet>

package/components/tag-list/tag-list-item-mixin.js

@@ -15,7 +15,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	static get properties() {
 		return {
 			/**
-			 * Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
+			 * Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
 			 */
 			clearable: { type: Boolean },
 			/**
@@ -136,7 +136,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 
 		/** Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
 		this.dispatchEvent(new CustomEvent(
-			'd2l-tag-list-item-cleared',
+			'd2l-tag-list-item-clear',
 			{ bubbles: true, composed: true, detail: { value: this.text, handleFocus } }
 		));
 	}