@brightspace-ui/core 1.220.1 → 1.220.5

package/components/count-badge/README.md

@@ -46,7 +46,7 @@ The `d2l-count-badge` element is a web component to display a number count, depe
 | `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
 | `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `max-digits`, default: `2` when `type="notification"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
 | `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
 | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
@@ -88,7 +88,7 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
 | `icon` | String | Required: [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
 | `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `max-digits`, default: `2` when `type="notification"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
 | `text`  | String | REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
 | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |

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

@@ -9,6 +9,8 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
+const maxBadgeDigits = 5;
+
 export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
 
 	static get properties() {
@@ -47,7 +49,8 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'hide-zero'
 			},
 			/**
-			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
+			 * Optionally specify a digit limit, after which numbers are truncated.
+			 * Defaults to two for "notification" type and five for "count" type.
 			 * @type {number}
 			 */
 			maxDigits: {
@@ -156,9 +159,20 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.maxDigits && this.type === 'notification') {
-			// default to two digits for notification type
-			this.maxDigits = 2;
+		if (!this.maxDigits) {
+			// default to two digits for notification type, 5 for count
+			this.maxDigits = this.type === 'notification' ? 2 : maxBadgeDigits;
+		} else if (this.maxDigits > maxBadgeDigits) {
+			// limit all badges to 5 digits
+			this.maxDigits = maxBadgeDigits;
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.get('maxDigits') && this.maxDigits > maxBadgeDigits) {
+			// impose a 5 digit maximum to prevent overflows
+			this.maxDigits = maxBadgeDigits;
 		}
 	}
 
@@ -166,15 +180,8 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 		return this.hasTooltip ? undefined : this._labelId;
 	}
 
-	renderCount(numberStyles) {
+	getNumberString() {
 		let numberString = `${this.number}`;
-		const hideNumber = this.hideZero && this.number === 0;
-		if (!numberStyles || numberStyles.visibility !== 'hidden') {
-			numberStyles = {
-				...numberStyles,
-				visibility: hideNumber ? 'hidden' : 'visible'
-			};
-		}
 		if (this.maxDigits && this.number.toString().length > this.maxDigits) {
 			numberString = `${'9'.repeat(this.maxDigits)}`;
 			numberString = formatNumber(parseInt(numberString));
@@ -183,9 +190,20 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			numberString = formatNumber(numberString);
 		}
 
+		return numberString;
+	}
+
+	renderCount(numberStyles) {
+		const hideNumber = this.hideZero && this.number === 0;
+		if (!numberStyles || numberStyles.visibility !== 'hidden') {
+			numberStyles = {
+				...numberStyles,
+				visibility: hideNumber ? 'hidden' : 'visible'
+			};
+		}
 		return html`
 			<div class="d2l-count-badge-number" style=${styleMap(numberStyles)}>
-					<div aria-hidden="true">${numberString}</div>		
+					<div aria-hidden="true">${this.getNumberString()}</div>		
 			</div>
 		`;
 	}

package/components/dialog/dialog-mixin.js

@@ -283,7 +283,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		if (!this.opened) return;
 		if (e.keyCode === 27) {
 			// escape (note: prevent native dialog close so we can: animate it; use setDismissible)
-			e.stopPropagation();
 			e.preventDefault();
 		}
 	}

package/components/dropdown/README.md

@@ -126,6 +126,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
 | `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
+| `h-align` | String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text |
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/dropdown/dropdown-button-subtle.js

@@ -17,6 +17,13 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 			 * @type {string}
 			 */
 			description: { type: String },
+
+			/**
+			* Aligns the leading edge of text if value is set to "text"
+			* @type {'text'|''}
+			*/
+			hAlign: { type: String, reflect: true, attribute: 'h-align' },
+
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -31,7 +38,7 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 
 	render() {
 		return html`
-			<d2l-button-subtle description="${ifDefined(this.description)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
+			<d2l-button-subtle description="${ifDefined(this.description)}" h-align="${ifDefined(this.hAlign)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
 			<slot></slot>
 		`;
 	}

package/components/filter/filter.js

@@ -268,7 +268,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				@d2l-hierarchical-view-hide-start="${this._handleDimensionHideStart}"
 				@d2l-hierarchical-view-show-complete="${this._handleDimensionShowComplete}"
 				@d2l-hierarchical-view-show-start="${this._handleDimensionShowStart}"
-				@keyup="${this._handleDimensionHideKeyPress}"
+				@keydown="${this._handleDimensionHideKeyDown}"
 				data-key="${dimension.key}">
 				${dimensionHTML}
 			</d2l-hierarchical-view>
@@ -357,7 +357,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 
 		return html`
-			<div slot="header" @keyup="${this._handleDimensionHideKeyPress}">
+			<div slot="header" @keydown="${this._handleDimensionHideKeyDown}">
 				${header}
 				${actions}
 			</div>
@@ -551,7 +551,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		if (this.shadowRoot) this.shadowRoot.querySelector(`d2l-hierarchical-view[data-key="${this._activeDimensionKey}"]`).hide();
 	}
 
-	_handleDimensionHideKeyPress(e) {
+	_handleDimensionHideKeyDown(e) {
 		if (this._activeDimensionKey && (e.keyCode === ARROWLEFT_KEY_CODE || e.keyCode === ESCAPE_KEY_CODE)) {
 			e.stopPropagation();
 			this._handleDimensionHide();

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -154,7 +154,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		this.addEventListener('keyup', this.__onKeyUp);
+		this.addEventListener('keydown', this.__onKeyDown);
 		this.addEventListener('d2l-hierarchical-view-hide-start', this.__onHideStart);
 		this.addEventListener('d2l-hierarchical-view-show-start', this.__onShowStart);
 		this.addEventListener('d2l-hierarchical-view-resize', this.__onViewResize);
@@ -477,7 +477,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 	}
 
-	__onKeyUp(e) {
+	__onKeyDown(e) {
 		if (this.childView && e.keyCode === escapeKeyCode) {
 			e.stopPropagation();
 			this.hide();

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

@@ -177,15 +177,11 @@ class HtmlBlock extends LitElement {
 
 		if (!this._contentObserver || this.noDeferredRendering) return;
 
-		const template = this._findSlottedElement('TEMPLATE');
-		if (template) this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
-		else {
-			const slot = this.shadowRoot.querySelector('slot');
-			if (slot) {
-				slot.assignedNodes({ flatten: true }).forEach(
-					node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
-				);
-			}
+		const slot = this.shadowRoot.querySelector('slot');
+		if (slot) {
+			slot.assignedNodes({ flatten: true }).forEach(
+				node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
+			);
 		}
 	}
 
@@ -220,13 +216,6 @@ class HtmlBlock extends LitElement {
 		return false;
 	}
 
-	_findSlottedElement(tagName, slot) {
-		if (!this.shadowRoot) return;
-		if (!slot) slot = this.shadowRoot.querySelector('slot');
-		return slot.assignedNodes({ flatten: true })
-			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
-	}
-
 	async _processRenderers(elem) {
 		for (const renderer of getRenderers()) {
 			if (this._contextObserverController && renderer.contextAttributes) {
@@ -252,26 +241,23 @@ class HtmlBlock extends LitElement {
 	}
 
 	async _renderInline(slot) {
-		const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
+		if (!this.shadowRoot) return;
+		if (!slot) slot = this.shadowRoot.querySelector('slot');
+
+		const noDeferredRenderingContainer = slot.assignedNodes({ flatten: true })
+			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
+
 		if (!noDeferredRenderingContainer) return;
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
 	_stamp(slot) {
-		const stampHTML = async template => {
-			let fragment;
-			if (template) fragment = document.importNode(template.content, true);
-			else {
-				fragment = document.createDocumentFragment();
-				this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true })
-					.forEach(node => fragment.appendChild(node.cloneNode(true)));
-			}
-
-			if (fragment.hasChildNodes()) {
+		const stampHTML = async nodes => {
+			if (nodes && nodes.length > 0) {
 
 				let temp = document.createElement('div');
 				temp.style.display = 'none';
-				temp.appendChild(fragment);
+				nodes.forEach(node => temp.appendChild(node.cloneNode(true)));
 
 				this._renderContainer.appendChild(temp);
 				temp = await this._processRenderers(temp);
@@ -284,18 +270,15 @@ class HtmlBlock extends LitElement {
 
 		if (this._contentObserver) this._contentObserver.disconnect();
 
-		const template = this._findSlottedElement('TEMPLATE', slot);
-		if (template) {
-			this._contentObserver = new MutationObserver(() => stampHTML(template));
-			this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
-		} else {
-			this._contentObserver = new MutationObserver(() => stampHTML());
-			this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).forEach(
-				node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
-			);
-		}
+		if (!slot) slot = this.shadowRoot.querySelector('slot');
+		const slottedNodes = slot.assignedNodes({ flatten: true });
+
+		this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
+		slottedNodes.forEach(
+			node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
+		);
 
-		stampHTML(template);
+		stampHTML(slottedNodes);
 	}
 
 }

package/custom-elements.json

@@ -1032,7 +1032,7 @@
         },
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1105,7 +1105,7 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1185,7 +1185,7 @@
       "attributes": [
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1252,7 +1252,7 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
@@ -1686,6 +1686,11 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "description": "REQUIRED: Text for the button",
@@ -1717,6 +1722,12 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "hAlign",
+          "attribute": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "attribute": "text",

package/helpers/dismissible.js

@@ -4,7 +4,7 @@ const stack = [];
 
 function cleanup() {
 	if (eventListener && stack.length === 0) {
-		document.removeEventListener('keyup', eventListener);
+		document.removeEventListener('keydown', eventListener);
 		eventListener = null;
 	}
 }
@@ -23,7 +23,7 @@ function init() {
 		}
 		cleanup();
 	};
-	document.addEventListener('keyup', eventListener);
+	document.addEventListener('keydown', eventListener);
 }
 
 export function clearDismissible(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.220.1",
+  "version": "1.220.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/html-block/demo/html-block-template.html

@@ -1,634 +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 '../html-block.js';
-			import { provideInstance } from '../../../mixins/provider-mixin.js';
-
-			class DemoReplacementRenderer {
-				get canRenderInline() {
-					return true;
-				}
-
-				async render(elem) {
-					const elemsToReplace = elem.querySelectorAll('[data-replace-me-id]');
-					if (elemsToReplace.length === 0) return elem;
-
-					elemsToReplace.forEach(elemToReplace => {
-
-						const someId = elemToReplace.getAttribute('data-replace-me-id');
-						if (!someId) return;
-
-						const anchor = document.createElement('a');
-						anchor.href = `/d2l/lp/some-route?someId=${parseInt(someId)}`;
-						anchor.target = '_blank';
-						anchor.innerText = elemToReplace.innerText;
-
-						elemToReplace.innerText = '';
-						elemToReplace.appendChild(anchor);
-
-					});
-
-					return elem;
-				}
-			}
-
-			// demo replacement renderer for html-block
-			provideInstance(document, 'html-block-renderers', [ new DemoReplacementRenderer() ]);
-
-		</script>
-		<script>
-			document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ outputScale: 1.1, renderLatex: window.location.search.indexOf('latex=true') !== -1 });
-		</script>
-	</head>
-	<body unresolved>
-
-		<d2l-demo-page page-title="d2l-html-block - templates">
-
-			<h2>HTML Block</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block>
-						<template>
-							<h1>heading 1</h1>
-							<h2>heading 2</h2>
-							<h3>heading 3</h3>
-							<h4>heading 4</h4>
-							<h5>heading 5</h5>
-							<h6>heading 6</h6>
-							<div><strong>strong</strong></div>
-							<div><b>bold</b></div>
-							<div>text</div>
-							<pre>preformatted</pre>
-							<p>paragraph</p>
-							<ul>
-								<li>unordered item 1</li>
-								<li>unordered item 2</li>
-							</ul>
-							<ol>
-								<li>ordered item 1</li>
-								<li>ordered item 2</li>
-							</ol>
-							<div><a href="https://d2l.com">anchor</a></div>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (compact)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block compact>
-						<template>
-							<h1>heading 1</h1>
-							<h2>heading 2</h2>
-							<h3>heading 3</h3>
-							<h4>heading 4</h4>
-							<h5>heading 5</h5>
-							<h6>heading 6</h6>
-							<div><strong>strong</strong></div>
-							<div><b>bold</b></div>
-							<div>text</div>
-							<pre>preformatted</pre>
-							<p>paragraph</p>
-							<ul>
-								<li>unordered item 1</li>
-								<li>unordered item 2</li>
-							</ul>
-							<ol>
-								<li>ordered item 1</li>
-								<li>ordered item 2</li>
-							</ol>
-							<div><a href="https://d2l.com">anchor</a></div>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (math)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block>
-						<template>
-							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
-								<mi>x</mi>
-								<mo>=</mo>
-								<mrow>
-									<mfrac>
-										<mrow>
-											<mo>&#x2212;</mo>
-											<mi>b</mi>
-											<mo>&#xB1;</mo>
-											<msqrt>
-												<msup>
-													<mi>b</mi>
-													<mn>2</mn>
-												</msup>
-												<mo>&#x2212;</mo>
-												<mn>4</mn>
-												<mi>a</mi>
-												<mi>c</mi>
-											</msqrt>
-										</mrow>
-										<mrow>
-											<mn>2</mn>
-											<mi>a</mi>
-										</mrow>
-									</mfrac>
-								</mrow>
-								<mtext>.</mtext>
-							</math>
-							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
-								<msup>
-									<mrow>
-										<mo>(</mo>
-										<mrow>
-											<munderover>
-												<mo>∑<!-- ∑ --></mo>
-												<mrow class="MJX-TeXAtom-ORD">
-													<mi>k</mi>
-													<mo>=</mo>
-													<mn>1</mn>
-												</mrow>
-												<mi>n</mi>
-											</munderover>
-											<msub>
-												<mi>a</mi>
-												<mi>k</mi>
-											</msub>
-											<msub>
-												<mi>b</mi>
-												<mi>k</mi>
-											</msub>
-										</mrow>
-										<mo>)</mo>
-									</mrow>
-									<mrow class="MJX-TeXAtom-ORD">
-										<mspace width="negativethinmathspace"></mspace>
-										<mspace width="negativethinmathspace"></mspace>
-										<mn>2</mn>
-									</mrow>
-								</msup>
-								<mo>≤<!-- ≤ --></mo>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>a</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>b</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-							</math>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (math, no deferred rendering)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block no-deferred-rendering>
-						<div>
-							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
-								<mi>x</mi>
-								<mo>=</mo>
-								<mrow>
-									<mfrac>
-										<mrow>
-											<mo>&#x2212;</mo>
-											<mi>b</mi>
-											<mo>&#xB1;</mo>
-											<msqrt>
-												<msup>
-													<mi>b</mi>
-													<mn>2</mn>
-												</msup>
-												<mo>&#x2212;</mo>
-												<mn>4</mn>
-												<mi>a</mi>
-												<mi>c</mi>
-											</msqrt>
-										</mrow>
-										<mrow>
-											<mn>2</mn>
-											<mi>a</mi>
-										</mrow>
-									</mfrac>
-								</mrow>
-								<mtext>.</mtext>
-							</math>
-							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
-								<msup>
-									<mrow>
-										<mo>(</mo>
-										<mrow>
-											<munderover>
-												<mo>∑<!-- ∑ --></mo>
-												<mrow class="MJX-TeXAtom-ORD">
-													<mi>k</mi>
-													<mo>=</mo>
-													<mn>1</mn>
-												</mrow>
-												<mi>n</mi>
-											</munderover>
-											<msub>
-												<mi>a</mi>
-												<mi>k</mi>
-											</msub>
-											<msub>
-												<mi>b</mi>
-												<mi>k</mi>
-											</msub>
-										</mrow>
-										<mo>)</mo>
-									</mrow>
-									<mrow class="MJX-TeXAtom-ORD">
-										<mspace width="negativethinmathspace"></mspace>
-										<mspace width="negativethinmathspace"></mspace>
-										<mn>2</mn>
-									</mrow>
-								</msup>
-								<mo>≤<!-- ≤ --></mo>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>a</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>b</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-							</math>
-							<p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
-						</div>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (inline math)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block>
-						<template>
-							<div>An equation...
-								<math xmlns="http://www.w3.org/1998/Math/MathML">
-									<msqrt>
-										<mn>3</mn>
-										<mi>x</mi>
-										<mo>&#x2212;</mo>
-										<mn>1</mn>
-									</msqrt>
-									<mo>+</mo>
-									<mo stretchy="false">(</mo>
-									<mn>1</mn>
-									<mo>+</mo>
-									<mi>x</mi>
-									<msup>
-										<mo stretchy="false">)</mo>
-										<mn>2</mn>
-									</msup>
-								</math> embedded inline with text... and showing placement of indicies for summations
-								<math xmlns="http://www.w3.org/1998/Math/MathML">
-									<msup>
-										<mrow>
-											<mo>(</mo>
-											<mrow>
-												<munderover>
-													<mo>∑<!-- ∑ --></mo>
-													<mrow class="MJX-TeXAtom-ORD">
-														<mi>k</mi>
-														<mo>=</mo>
-														<mn>1</mn>
-													</mrow>
-													<mi>n</mi>
-												</munderover>
-												<msub>
-													<mi>a</mi>
-													<mi>k</mi>
-												</msub>
-												<msub>
-													<mi>b</mi>
-													<mi>k</mi>
-												</msub>
-											</mrow>
-											<mo>)</mo>
-										</mrow>
-										<mrow class="MJX-TeXAtom-ORD">
-											<mspace width="negativethinmathspace"></mspace>
-											<mspace width="negativethinmathspace"></mspace>
-											<mn>2</mn>
-										</mrow>
-									</msup>
-									<mo>≤<!-- ≤ --></mo>
-									<mrow>
-										<mo>(</mo>
-										<mrow>
-											<munderover>
-												<mo>∑<!-- ∑ --></mo>
-												<mrow class="MJX-TeXAtom-ORD">
-													<mi>k</mi>
-													<mo>=</mo>
-													<mn>1</mn>
-												</mrow>
-												<mi>n</mi>
-											</munderover>
-											<msubsup>
-												<mi>a</mi>
-												<mi>k</mi>
-												<mn>2</mn>
-											</msubsup>
-										</mrow>
-										<mo>)</mo>
-									</mrow>
-									<mrow>
-										<mo>(</mo>
-										<mrow>
-											<munderover>
-												<mo>∑<!-- ∑ --></mo>
-												<mrow class="MJX-TeXAtom-ORD">
-													<mi>k</mi>
-													<mo>=</mo>
-													<mn>1</mn>
-												</mrow>
-												<mi>n</mi>
-											</munderover>
-											<msubsup>
-												<mi>b</mi>
-												<mi>k</mi>
-												<mn>2</mn>
-											</msubsup>
-										</mrow>
-										<mo>)</mo>
-									</mrow>
-								</math> and other symbols.
-							</div>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (LaTeX math)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block>
-						<template>
-							<div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (LaTeX inline math)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-html-block>
-						<template>
-							<div>An equation rendered using LaTeX...
-								\( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
-								... and some text!
-							</div>
-						</template>
-					</d2l-html-block>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>HTML Block (wrapped)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-some-component></d2l-some-component>
-				</template>
-			</d2l-demo-snippet>
-
-			<d2l-code-view language="javascript">
-				import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-				import { html, LitElement } from 'lit-element/lit-element.js';
-
-				class SomeComponent extends LitElement {
-
-					render() {
-						return html`
-							&lt;d2l-html-block&gt;
-								&lt;template&gt;${unsafeHTML(this._someHTML)}&lt;/template&gt;
-							&lt;/d2l-html-block&gt;
-							&lt;button ...&gt;update content&lt;/button&gt;`;
-						`;
-					}
-				}
-
-				customElements.define('d2l-some-component', SomeComponent);
-			</d2l-code-view>
-
-		</d2l-demo-page>
-
-		<script type="module">
-			import { html, LitElement } from 'lit-element/lit-element.js';
-			import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-
-			class SomeComponent extends LitElement {
-
-				static get properties() {
-					return {
-						_htmlSnippets: { type: Array },
-						_updateCount: { type: Number }
-					};
-				}
-
-				constructor() {
-					super();
-					this._htmlSnippets = [
-						`<div>An equation...
-							<math xmlns="http://www.w3.org/1998/Math/MathML">
-								<msqrt>
-									<mn>3</mn>
-									<mi>x</mi>
-									<mo>&#x2212;</mo>
-									<mn>1</mn>
-								</msqrt>
-								<mo>+</mo>
-								<mo stretchy="false">(</mo>
-								<mn>1</mn>
-								<mo>+</mo>
-								<mi>x</mi>
-								<msup>
-									<mo stretchy="false">)</mo>
-									<mn>2</mn>
-								</msup>
-							</math> embedded inline with text... and showing placement of indicies for summations
-							<math xmlns="http://www.w3.org/1998/Math/MathML">
-								<msup>
-									<mrow>
-										<mo>(</mo>
-										<mrow>
-											<munderover>
-												<mo>∑<!-- ∑ --></mo>
-												<mrow class="MJX-TeXAtom-ORD">
-													<mi>k</mi>
-													<mo>=</mo>
-													<mn>1</mn>
-												</mrow>
-												<mi>n</mi>
-											</munderover>
-											<msub>
-												<mi>a</mi>
-												<mi>k</mi>
-											</msub>
-											<msub>
-												<mi>b</mi>
-												<mi>k</mi>
-											</msub>
-										</mrow>
-										<mo>)</mo>
-									</mrow>
-									<mrow class="MJX-TeXAtom-ORD">
-										<mspace width="negativethinmathspace"></mspace>
-										<mspace width="negativethinmathspace"></mspace>
-										<mn>2</mn>
-									</mrow>
-								</msup>
-								<mo>≤<!-- ≤ --></mo>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>a</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-								<mrow>
-									<mo>(</mo>
-									<mrow>
-										<munderover>
-											<mo>∑<!-- ∑ --></mo>
-											<mrow class="MJX-TeXAtom-ORD">
-												<mi>k</mi>
-												<mo>=</mo>
-												<mn>1</mn>
-											</mrow>
-											<mi>n</mi>
-										</munderover>
-										<msubsup>
-											<mi>b</mi>
-											<mi>k</mi>
-											<mn>2</mn>
-										</msubsup>
-									</mrow>
-									<mo>)</mo>
-								</mrow>
-							</math> and other symbols.
-						</div>`,
-						'The wizard quickly jinxed the gnomes before they vaporized.',
-						'The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.',
-						'A quick movement of the enemy will jeopardize six gunboats.',
-						'Grumpy wizards make a toxic brew for the jovial queen.',
-						'Painful zombies quickly watch a jinxed graveyard.',
-						'Jackie will budget for the most expensive zoology equipment.',
-						'No more updates for you.'
-					];
-					this._updateCount = 0;
-				}
-
-				render() {
-					return html`
-						<d2l-html-block>
-							<template>${unsafeHTML(this._htmlSnippets[this._updateCount])}</template>
-						</d2l-html-block>
-						<button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
-				}
-
-				_updateTemplateContent() {
-					if (this._updateCount < 6) this._updateCount += 1;
-				}
-
-			}
-			customElements.define('d2l-some-component', SomeComponent);
-		</script>
-
-	</body>
-</html>