@brightspace-ui/core 1.201.1 → 1.203.0

package/components/button/README.md

@@ -38,9 +38,7 @@ The `d2l-button` element can be used just like the native button element, but al
 ![Button](./screenshots/button.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name: d2l-button
--->
+<!-- docs: demo live name: d2l-button -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/card/README.md

@@ -55,8 +55,8 @@ Cards are composed of 3 sections. Each card will have a content section but is n
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
-  import '@brightspace-ui/core/components/tooltip/tooltip.js';
   import '@brightspace-ui/core/components/card/card-footer-link.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
 
 <style>
@@ -115,8 +115,8 @@ The `d2l-card` element is a container that provides specific layout using severa
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
-  import '@brightspace-ui/core/components/tooltip/tooltip.js';
   import '@brightspace-ui/core/components/card/card-footer-link.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
 
 <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
@@ -228,8 +228,8 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
-  import '@brightspace-ui/core/components/tooltip/tooltip.js';
   import '@brightspace-ui/core/components/card/card-footer-link.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
 
 <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">

package/components/count-badge/README.md

@@ -95,96 +95,4 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
 | `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
 | `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
 | `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->
-=======
-# Count Badge
-
-## d2l-count-badge
-
-The `d2l-count-badge` element is a web component to display a number count, either in a `"notification"` or `"count"` style.
-
-
-![Notification Badge](./screenshots/count-badge-notification-small.png?raw=true)
-![Count Badge](./screenshots/count-badge-count-large.png?raw=true)
-
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/count-badge/count-badge.js';
-</script>
-<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100"></d2l-count-badge>
-```
-
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `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.
-| `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. |
-| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
-| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
-| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
-
-### Accessibility Properties
-
-To make your `d2l-count-badge` accessible, use the following properties when applicable:
-
-| Attribute | Description |
-|--|--|
-| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
-| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
-| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
-| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
-
-
-
-## d2l-count-badge-icon
-
-The `d2l-count-badge-icon` element is a web component to display a number count, either in a `"notification"` or `"count"` style with an icon.
-
-![Count Badge with icon](./screenshots/count-badge-icon.png?raw=true)
-
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';
-</script>
-<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100"></d2l-count-badge>
-```
-
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
-| `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.
-| `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. |
-| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
-| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
-| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
-
-### Accessibility Properties
-
-To make your `d2l-count-badge-icon` accessible, use the following properties when applicable:
-
-| Attribute | Description |
-|--|--|
-| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
-| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
-| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
-| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!

package/components/dialog/README.md

@@ -5,18 +5,12 @@ Dialogs interrupt the user to complete a set of tasks, confirm an action, or off
 <!-- docs: demo autoSize:false size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
-
-  window.addEventListener('load', function () {
-    setTimeout(function() {
-      var dialog = document.querySelector('#dialog');
-      dialog.opened = true;
-    }, 100);
-  });
 </script>
 
-<d2l-dialog id="dialog" title-text="Dialog Title">
+<d2l-dialog id="dialog-demo" title-text="Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
@@ -55,8 +49,7 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
-</script>
-<script>
+
   document.querySelector('#open').addEventListener('click', () => {
     document.querySelector('#dialog').opened = true;
   });

package/components/dropdown/README.md

@@ -1,12 +1,12 @@
 # Dropdowns
 A Dropdown is a button that opens a floating container to offer menu items or other content.
+
 <!-- docs: demo autoSize:false align:flex-start size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
@@ -29,21 +29,10 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
 <!-- docs: demo live name:d2l-dropdown autoSize:false align:flex-start size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown>
   <button class="d2l-dropdown-opener">Open!</button>
   <d2l-dropdown-content>
@@ -86,21 +75,10 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 <!-- docs: demo live name:d2l-dropdown-button autoSize:false align:flex-start size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-button text="Open!">
   <d2l-dropdown-content>
     Some content...
@@ -130,21 +108,10 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button-subtle');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-button-subtle text="Open!">
   <d2l-dropdown-content>
     Some content...
@@ -182,21 +149,10 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
 <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-context-menu.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-context-menu');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-context-menu text="Open!">
   <d2l-dropdown-content>
     Some content...
@@ -235,21 +191,10 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
 <!-- docs: demo live name:d2l-dropdown-more autoSize:false align:flex-start size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-more');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-more text="Open!">
   <d2l-dropdown-content>
     Some content...
@@ -289,21 +234,10 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 <!-- docs: demo live name:d2l-dropdown-content autoSize:false align:flex-start size:medium -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-button text="Open!" primary>
   <d2l-dropdown-content min-width="150" max-width="400" mobile-tray="bottom">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -363,26 +297,14 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 <!-- docs: demo live name:d2l-dropdown-menu size:medium align:flex-start autoSize:false -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item.js';
   import '@brightspace-ui/core/components/tabs/tabs.js';
   import '@brightspace-ui/core/components/tabs/tab-panel.js';
-
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-button text="Open!" primary>
   <d2l-dropdown-menu>
     <d2l-menu label="Astronomy">
@@ -419,6 +341,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 <!-- docs: demo live name:d2l-dropdown-tabs size:large autoSize:false align:flex-start -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-tabs.js';
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -426,18 +349,6 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
   import '@brightspace-ui/core/components/tabs/tabs.js';
   import '@brightspace-ui/core/components/tabs/tab-panel.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button');
-      dropdown.toggleOpen();
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-dropdown-button text="Open!" primary>
   <d2l-dropdown-tabs min-width="175" max-width="300">
     <d2l-tabs>

package/components/dropdown/dropdown-content-mixin.js

@@ -325,9 +325,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				if (isNaN(newVerticalOffset)) {
 					newVerticalOffset = 20;
 				}
-				// for IE11
-				if (window.ShadyCSS) window.ShadyCSS.styleSubtree(this, { '--d2l-dropdown-verticaloffset': `${newVerticalOffset}px` });
-				else this.style.setProperty('--d2l-dropdown-verticaloffset', `${newVerticalOffset}px`);
+				this.style.setProperty('--d2l-dropdown-verticaloffset', `${newVerticalOffset}px`);
 			}
 		});
 	}

package/components/filter/README.md

@@ -10,22 +10,11 @@ Filter with multiple dimensions:
 <!-- docs: demo align:start autoSize:false size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-        var filter = document.querySelector('d2l-filter');
-        filter.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-filter>
     <d2l-filter-dimension-set key="course" text="Course">
         <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
@@ -53,22 +42,11 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 <!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-        var filter = document.querySelector('d2l-filter');
-        filter.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-filter>
     <d2l-filter-dimension-set key="course" text="Course">
         <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
@@ -185,22 +163,11 @@ Set dimension on mobile:
 <!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-        var filter = document.querySelector('d2l-filter');
-        filter.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-filter>
   <d2l-filter-dimension-set key="course" text="Course" >
     <d2l-filter-dimension-set-value key="art" text="Art" selected><d2l-filter-dimension-set-value>

package/components/hierarchical-view/README.md

@@ -241,9 +241,3 @@ class MyComponent extends HierarchicalViewMixin(LitElement) {
 - `d2l-hierarchical-view-show-complete`: dispatched when child view is shown (when animation ends)
 - `d2l-hierarchical-view-hide-start`: dispatched when child view will be hidden (before animation begins)
 - `d2l-hierarchical-view-hide-complete`: dispatched when child view is hidden (when animation ends)
-
-<!-- docs: start hidden content -->
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->

package/components/html-block/README.md

@@ -15,34 +15,34 @@ 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>
+  <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: 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>
+  </template>
 </d2l-html-block>
 ```
 
@@ -50,20 +50,20 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
 
 ```html
 <script type="module">
-	import { html, LitElement } from 'lit-element/lit-element.js';
-	import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-	import '@brightspace-ui/core/components/icons/icon.js';
+  import { html, LitElement } from 'lit-element/lit-element.js';
+  import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+  import '@brightspace-ui/core/components/icons/icon.js';
 
-	class SomeComponent extends LitElement {
-		render() {
-			return html`
-				<d2l-html-block>
-					<template>${unsafeHTML(this._unsafeHTML)}</template>
-				</d2l-html-block>`;
-		}
-	}
+  class SomeComponent extends LitElement {
+    render() {
+      return html`
+        <d2l-html-block>
+          <template>${unsafeHTML(this._unsafeHTML)}</template>
+        </d2l-html-block>`;
+    }
+  }
 
-	customElements.define('d2l-some-component', SomeComponent);
+  customElements.define('d2l-some-component', SomeComponent);
 </script>
 <d2l-some-component></d2l-some-component>
 ```
@@ -79,27 +79,27 @@ 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>
-				<mi>x</mi>
-				<msup>
-					<mo stretchy="false">)</mo>
-					<mn>2</mn>
-				</msup>
-			</math>
-		</div>
-	</template>
+  <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>
+        <mi>x</mi>
+        <msup>
+          <mo stretchy="false">)</mo>
+          <mn>2</mn>
+        </msup>
+      </math>
+    </div>
+  </template>
 </d2l-html-block>
 ```
 
@@ -109,26 +109,25 @@ Examples are provided to display how user-authored math can be embedded within y
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/html-block/html-block.js';
-  import '@brightspace-ui/core/components/icons/icon.js';
 
-</script>
-<script>
-	window.D2L = {};
-	D2L.LP = {};
-	D2L.LP.Web = {};
-	D2L.LP.Web.UI = {};
-	D2L.LP.Web.UI.Flags = {
-		Flag: (feature, defaultValue) => {
-			if (feature === 'us125413-mathjax-render-latex') return true;
-			else return defaultValue;
-		}
-	};
+  window.D2L = {};
+  D2L.LP = {};
+  D2L.LP.Web = {};
+  D2L.LP.Web.UI = {};
+  D2L.LP.Web.UI.Flags = {
+    Flag: (feature, defaultValue) => {
+      if (feature === 'us125413-mathjax-render-latex') return true;
+      else return defaultValue;
+    }
+  };
+  <!-- docs: start hidden content -->
+  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>
+  <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>
 </d2l-html-block>
 ```

package/components/html-block/demo/html-block.html

@@ -39,7 +39,7 @@
 		</script>
 		<script>
 			if (window.location.search.indexOf('latex=true') !== -1) {
-				document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLaTeX: true });
+				document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: true });
 			}
 		</script>
 	</head>

package/components/inputs/docs/input-checkbox.md

@@ -43,8 +43,7 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-checkbox.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var input = document.querySelector('#checkbox');
     input.addEventListener('change', (e) => {

package/components/inputs/docs/input-date-time.md

@@ -2,17 +2,12 @@
 
 Use date and time inputs to set dates and times in forms. They are available as separate inputs (date or time) or as a combined date & time input, and each of them is also available as a range.
 
-<!-- docs: demo
-align:flex-start
-autoSize:false
-size:xlarge
--->
+<!-- docs: demo align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
   import '@brightspace-ui/core/components/inputs/input-time.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
@@ -50,29 +45,12 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date input](../screenshots/date.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-date
-align:flex-start
-autoSize:false
-size:xlarge
--->
+<!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-date');
-      input.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-date label="Birthdate">
 </d2l-input-date>
 ```
@@ -118,29 +96,12 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-date-range
-align:flex-start
-autoSize:false
-size:xlarge
--->
+<!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-date-range');
-      input.startOpened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-date-range label="Availability Range">
 </d2l-input-date-range>
 ```
@@ -192,29 +153,12 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time input](../screenshots/time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-time
-align:flex-start
-autoSize:false
-size:large
--->
+<!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-time.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-time');
-      input.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-time label="Time">
 </d2l-input-time>
 ```
@@ -260,29 +204,12 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-time-range
-align:flex-start
-autoSize:false
-size:large
--->
+<!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-time-range');
-      input.startOpened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-time-range label="Availability Range">
 </d2l-input-time-range>
 ```
@@ -330,29 +257,12 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date input](../screenshots/date-time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-date-time
-align:flex-start
-autoSize:false
-size:xlarge
--->
+<!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-date-time');
-      input.opened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-date-time label="Due Date">
 </d2l-input-date-time>
 ```
@@ -399,29 +309,12 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live
-name:d2l-input-date-time-range
-align:flex-start
-autoSize:false
-size:xlarge
--->
+<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
+  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';
 </script>
-<!-- docs: start hidden content -->
-<script>
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-date-time-range');
-      input.startOpened = true;
-    }, 100);
-  });
-</script>
-<!-- docs: end hidden content -->
 <d2l-input-date-time-range label="Availability Range">
 </d2l-input-date-time-range>
 ```

package/components/inputs/docs/input-numeric.md

@@ -29,8 +29,7 @@ The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's i
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-number.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var input = document.querySelector('#number');
     input.addEventListener('change', (e) => {
@@ -112,8 +111,7 @@ The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-percent.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var input = document.querySelector('#percent');
     input.addEventListener('change', (e) => {

package/components/inputs/docs/input-search.md

@@ -43,8 +43,7 @@ For text searches use `<d2l-input-search>`, which wraps the native `<input type=
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-search.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     document.querySelector('#search').addEventListener('d2l-input-search-searched', (e) => {
       console.log('searched term:', e.detail.value);

package/components/inputs/docs/input-text.md

@@ -57,8 +57,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var input = document.querySelector('#text');
     input.addEventListener('change', (e) => {
@@ -181,8 +180,7 @@ The `<d2l-input-textarea>` is a wrapper around the native `<textarea>` element t
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-textarea.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     var input = document.querySelector('#textarea');
     input.addEventListener('change', (e) => {

package/components/list/README.md

@@ -5,8 +5,8 @@ A list displays a collection of objects of the same type. A list is primarily us
 <!-- docs: demo autoSize:false size:large -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
+  import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
   import '@brightspace-ui/core/components/list/list.js';
   import '@brightspace-ui/core/components/list/list-item.js';
   import '@brightspace-ui/core/components/list/list-item-content.js';

package/components/loading-spinner/loading-spinner.js

@@ -170,13 +170,9 @@ class LoadingSpinner extends LitElement {
 	updated(changedProperties) {
 		changedProperties.forEach((oldValue, propName) => {
 			if (propName === 'color') {
-				// for IE11
-				if (window.ShadyCSS) window.ShadyCSS.styleSubtree(this, { '--d2l-loading-spinner-color': this.color });
-				else this.style.setProperty('--d2l-loading-spinner-color', this.color);
+				this.style.setProperty('--d2l-loading-spinner-color', this.color);
 			} else if (propName === 'size') {
-				// for IE11
-				if (window.ShadyCSS) window.ShadyCSS.styleSubtree(this, { '--d2l-loading-spinner-size': `${this.size}px` });
-				else this.style.setProperty('--d2l-loading-spinner-size', `${this.size}px`);
+				this.style.setProperty('--d2l-loading-spinner-size', `${this.size}px`);
 			}
 		});
 	}

package/components/menu/README.md

@@ -77,8 +77,7 @@ The `d2l-menu item` component is used with JS handlers and can be wired-up to th
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     document.querySelector('#menu').addEventListener('d2l-menu-item-select', (e) => {
       console.log('item selected:', e.target);
@@ -170,8 +169,7 @@ The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item-checkbox.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     document.querySelector('#menu-checkbox').addEventListener('d2l-menu-item-change', (e) => {
       console.log('item selection changed:', e.target);
@@ -221,8 +219,7 @@ The `d2l-menu-item-radio` component is used for selection. It can be wired-up to
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item-radio.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     document.querySelector('#menu-radio').addEventListener('d2l-menu-item-change', (e) => {
       console.log('item selection changed:', e.target);

package/components/meter/README.md

@@ -4,9 +4,9 @@ Meters are a visually engaging way to communicate progress or measurements.
 <!-- docs: demo  -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/meter/meter-circle.js';
   import '@brightspace-ui/core/components/meter/meter-linear.js';
   import '@brightspace-ui/core/components/meter/meter-radial.js';
-  import '@brightspace-ui/core/components/meter/meter-circle.js';
 </script>
 <d2l-meter-linear value="1" max="6" text="Activities"></d2l-meter-linear>
 <d2l-meter-radial value="22" max="24" text="On Track"></d2l-meter-radial>

package/components/switch/README.md

@@ -2,7 +2,7 @@
 
 A switch is used to toggle between two states, on and off, just like a light switch.
 
-<!-- docs: demo name:d2l-switch -->
+<!-- docs: demo -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch.js';
@@ -36,7 +36,6 @@ The `d2l-switch` element is a generic switch with on/off semantics.
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch.js';
-  import '@brightspace-ui/core/components/switch/switch-visibility.js';
 </script>
 <d2l-switch text="My Switch"></d2l-switch>
 ```
@@ -77,7 +76,6 @@ The `d2l-switch-visibility` element is a variant of the generic switch configure
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch-visibility.js';
 </script>
-
 <d2l-switch-visibility></d2l-switch-visibility>
 ```
 

package/components/tooltip/README.md

@@ -11,8 +11,7 @@ Tooltips display additional information when users focus or hover on a point of
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
-</script>
-<script>
+
   window.addEventListener('load', function () {
     setTimeout(function() {
       var tooltip = document.querySelector('#tooltip');

package/helpers/README.md

@@ -21,6 +21,25 @@ import { AsyncStateEvent } from '@brightspace-ui/core/helpers/asyncStateEvent.js
 const asyncStateEvent = new AsyncStateEvent(pendingPromise);
 ```
 
+## composeMixins
+
+A helper function for cleanly incorporating a list of mixins into a base class. Designed for use with Lit components with a large amount of reusable functionality.
+
+```js
+// other imports...
+import { composeMixins } from '@brightspace-ui/core/helpers/composeMixins.js';
+
+class ExampleComponent extends composeMixins(
+  LitElement,
+  EntityMixin,
+  LocalizeMixin,
+) {
+  // ...
+}
+```
+
+Read more about mixins on [the `open-wc` docs](https://open-wc.org/docs/development/dedupe-mixin/#what-is-a-mixin).
+
 ## Dismissible
 
 Dismissible components are those that should be dismissible when the user presses
@@ -196,4 +215,3 @@ import '@brightspace-ui/core/helpers/viewport-size.js';
     min-width: calc(var(--d2l-vw, 1vw) * 100);
 }
 ```
-

package/helpers/composeMixins.js

@@ -0,0 +1,2 @@
+export const composeMixins = (base, ...mixins) =>
+	mixins.reduce((subclass, superclass) => superclass(subclass), base);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.201.1",
+  "version": "1.203.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {