@brightspace-ui/core 1.219.3 → 1.220.1

package/components/breadcrumbs/README.md

@@ -141,7 +141,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 To make your usage of `d2l-breadcrumb` (child) accessible, use the following attribute when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-label` | Acts as a primary label. Use if `text` does not provide enough context. |
 
 ## Current Page [d2l-breadcrumb-current-page]

package/components/button/README.md

@@ -62,7 +62,7 @@ The `d2l-button` element can be used just like the native button element, but al
 To make your `d2l-button` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `description` | Use when text on button does not provide enough context. |
@@ -104,7 +104,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 To make your `d2l-button-subtle` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `description` | Use when text on button does not provide enough context. |
@@ -143,7 +143,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 To make your `d2l-button-icon` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `text` | **REQUIRED**. Acts as a primary label and tooltip. |
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |

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>
 ```