@brightspace-ui/core 1.219.4 → 1.220.2

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/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/README.md

@@ -6,7 +6,7 @@ Components to assist with displaying user-authored HTML within your webpage.
 
 The `d2l-html-block` element is a web component for displaying user-authored HTML. It includes styles for headings, lists, anchors and other elements.  In addition, it provides integration with MathJax for rendering MathML.
 
-Place the user-authored HTML within a `template` and the `d2l-html-block` will stamp the content into its local DOM where styles will be applied, and math typeset.
+Place the user-authored HTML within the `d2l-html-block` and the component will stamp the content into its local DOM where styles will be applied, and math typeset.
 
 <!-- docs: demo live name:d2l-html-block autoSize:false size:small -->
 ```html
@@ -15,34 +15,32 @@ Place the user-authored HTML within a `template` and the `d2l-html-block` will s
   import '@brightspace-ui/core/components/icons/icon.js';
 </script>
 <d2l-html-block>
-  <template>
-    <!-- docs: start hidden content -->
-    <style>
-      div {
-        --d2l-icon-fill-color: var(--d2l-color-cinnabar);
-      }
-      span {
-        color: var(--d2l-color-cinnabar);
-        margin-left: 10px;
-        vertical-align: middle;
-      }
-      d2l-icon {
-        align-self: center;
-        flex-shrink: 0;
-      }
-      .warning-container {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-      }
-    </style>
+  <!-- docs: start hidden content -->
+  <style>
+    div {
+      --d2l-icon-fill-color: var(--d2l-color-cinnabar);
+    }
+    span {
+      color: var(--d2l-color-cinnabar);
+      margin-left: 10px;
+      vertical-align: middle;
+    }
+    d2l-icon {
+      align-self: center;
+      flex-shrink: 0;
+    }
+    .warning-container {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+  </style>
 <!-- docs: end hidden content --><div class="warning-container">
-      <d2l-icon icon="tier3:alert"></d2l-icon>
-      <span>
-        <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
-      </span>
-    </div>
-  </template>
+    <d2l-icon icon="tier3:alert"></d2l-icon>
+    <span>
+      <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
+    </span>
+  </div>
 </d2l-html-block>
 ```
 
@@ -58,7 +56,7 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
     render() {
       return html`
         <d2l-html-block>
-          <template>${unsafeHTML(this._unsafeHTML)}</template>
+          ${unsafeHTML(this._unsafeHTML)}
         </d2l-html-block>`;
     }
   }
@@ -79,27 +77,25 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/components/icons/icon.js';
 </script>
 <d2l-html-block>
-  <template>
-    <div class="mathml-container">
-      <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>
+  <div class="mathml-container">
+    <math xmlns="http://www.w3.org/1998/Math/MathML">
+      <msqrt>
+        <mn>3</mn>
         <mi>x</mi>
-        <msup>
-          <mo stretchy="false">)</mo>
-          <mn>2</mn>
-        </msup>
-      </math>
-    </div>
-  </template>
+        <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>
+  </div>
 </d2l-html-block>
 ```
 
@@ -124,10 +120,8 @@ Examples are provided to display how user-authored math can be embedded within y
   document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: true });<!-- docs: end hidden content -->
 </script>
 <d2l-html-block>
-  <template>
-    <div class="latex-container">
-      $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
-    </div>
-  </template>
+  <div class="latex-container">
+    $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
+  </div>
 </d2l-html-block>
 ```