@brightspace-ui/core 2.128.5 → 2.130.0

package/components/alert/README.md

@@ -63,7 +63,7 @@ The `d2l-alert` component can be used to communicate important information relat
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-alert autoSize:false  -->
+<!-- docs: demo code properties name:d2l-alert autoSize:false  -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/alert/alert.js';
@@ -109,7 +109,7 @@ a pop-up at the bottom of the screen that automatically dismisses itself by defa
 <!-- docs: end best practices -->
 
 
-<!-- docs: demo live name:d2l-alert-toast autoSize:false -->
+<!-- docs: demo code properties name:d2l-alert-toast autoSize:false -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/alert/alert-toast.js';

package/components/backdrop/README.md

@@ -4,7 +4,7 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 
 ## Backdrop [d2l-backdrop]
 
-<!-- docs: demo live name:d2l-backdrop size:small -->
+<!-- docs: demo code properties name:d2l-backdrop size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/breadcrumbs/README.md

@@ -81,7 +81,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 
 ## Breadcrumbs [d2l-breadcrumbs]
 
-<!-- docs: demo live name:d2l-breadcrumbs display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumbs display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
@@ -103,7 +103,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 
 ## Breadcrumb (child) [d2l-breadcrumb]
 
-<!-- docs: demo live name:d2l-breadcrumb display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumb display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
@@ -136,7 +136,7 @@ To make your usage of `d2l-breadcrumb` (child) accessible, use the following att
 
 Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
 
-<!-- docs: demo live name:d2l-breadcrumb-current-page display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumb-current-page display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';

package/components/button/README.md

@@ -34,7 +34,7 @@ A Button is used to communicate and perform an action.
 
 The `d2l-button` element can be used just like the native button element, but also supports the `primary` attribute for denoting the primary button.
 
-<!-- docs: demo live name:d2l-button -->
+<!-- docs: demo code properties name:d2l-button -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -69,7 +69,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 
 **Note:** It is strongly recommended to use `text` and `icon` as opposed to putting content in the `slot` to ensure that the recommended subtle button style is maintained.
 
-<!-- docs: demo live name:d2l-button-subtle -->
+<!-- docs: demo code properties name:d2l-button-subtle -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-subtle.js';
@@ -105,7 +105,7 @@ To make your `d2l-button-subtle` accessible, use the following properties when a
 
 The `d2l-button-icon` element can be used just like the native `button`, for instances where only an icon is displayed.
 
-<!-- docs: demo live name:d2l-button-icon -->
+<!-- docs: demo code properties name:d2l-button-icon -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-icon.js';

package/components/button/floating-buttons.md

@@ -27,7 +27,7 @@ Floating workflow buttons behavior can be added by using the `<d2l-floating-butt
 
 ## Floating Buttons [d2l-floating-buttons]
 
-<!-- docs: demo live name:d2l-floating-buttons autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-floating-buttons autoSize:false display:block size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/floating-buttons.js';

package/components/calendar/README.md

@@ -4,7 +4,7 @@ The `d2l-calendar` component can be used to display a responsively sized calenda
 
 ## Calendar [d2l-calendar]
 
-<!-- docs: demo live name:d2l-calendar display:block -->
+<!-- docs: demo code properties name:d2l-calendar display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/calendar/calendar.js';

package/components/card/README.md

@@ -107,7 +107,7 @@ Cards are composed of 3 sections. Each card will have a content section but is n
 
 The `d2l-card` element is a container that provides specific layout using several slots such as `content`, `header`, `footer`, `badge`, and `actions`. It can also be configured as a link for navigation.
 
-<!-- docs: demo live name:d2l-card size:large -->
+<!-- docs: demo code properties name:d2l-card size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -162,7 +162,7 @@ See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/
 
 The `d2l-card-content-title` element is a helper for providing layout/style for a title within the `content` slot.
 
-<!-- docs: demo live name:d2l-card-content-title size:large -->
+<!-- docs: demo code properties name:d2l-card-content-title size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -191,7 +191,7 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
 
 The `d2l-card-content-meta` element is a helper for providing layout/style for a meta data within the `content` slot.
 
-<!-- docs: demo live name:d2l-card-content-meta size:large -->
+<!-- docs: demo code properties name:d2l-card-content-meta size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -220,7 +220,7 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
 
 The `d2l-card-footer-link` element is an icon link that can be placed in the `footer` slot.
 
-<!-- docs: demo live name:d2l-card-footer-link size:large -->
+<!-- docs: demo code properties name:d2l-card-footer-link size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';

package/components/collapsible-panel/README.md

@@ -90,7 +90,7 @@ The collapsible panel is a container that can show or hide additional content. I
 
 The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `before`, `header`, `summary`, `actions`, and a default slot for the expanded content.
 
-<!-- docs: demo live name:d2l-collapsible-panel -->
+<!-- docs: demo code properties name:d2l-collapsible-panel -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -206,7 +206,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-<!-- docs: demo live name:d2l-collapsible-panel-summary-item -->
+<!-- docs: demo properties name:d2l-collapsible-panel-summary-item -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -314,7 +314,7 @@ More than one `d2l-collapsible-panel-summary-item` can be added to the `summary`
 Collapsible panels have two optional slots, `header` and `actions` that can be used to add more information to the header area.
 
 
-<!-- docs: demo live -->
+<!-- docs: demo -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/button/button-icon.js';
@@ -363,7 +363,7 @@ Collapsible panels have two optional slots, `header` and `actions` that can be u
 
 Use the `d2l-collapsible-panel-group` component to automatically handle spacing and layout for multiple panels.
 
-<!-- docs: demo live name:d2l-collapsible-panel-group -->
+<!-- docs: demo code properties name:d2l-collapsible-panel-group -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';

package/components/count-badge/README.md

@@ -17,7 +17,7 @@ Badges can be used to provide additional contextual information to users in rega
 
 The `d2l-count-badge` element is a web component to display a number count, depending on your use case different styling options are available.
 
-<!-- docs: demo live name:d2l-count-badge -->
+<!-- docs: demo code properties name:d2l-count-badge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/count-badge/count-badge.js';
@@ -54,7 +54,7 @@ The `d2l-count-badge` element is a web component to display a number count, depe
 
 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.
 
-<!-- docs: demo live name:d2l-count-badge-icon -->
+<!-- docs: demo code properties name:d2l-count-badge-icon -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';

package/components/description-list/README.md

@@ -69,7 +69,7 @@ For very long values, or very small container sizes, the description list can us
 
 The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
 
-<!-- docs: demo live name:d2l-test-dl display:block -->
+<!-- docs: demo code properties name:d2l-test-dl display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';

package/components/dialog/README.md

@@ -44,7 +44,7 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-dialog autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -155,7 +155,7 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-dialog-confirm autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog-confirm autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -208,7 +208,7 @@ document.querySelector('#open').addEventListener('click', () => {
 
 The `d2l-dialog-fullscreen` element is a fullscreen variant of the generic `d2l-dialog`. It provides a slot for arbitrary content, and a `footer` slot for workflow buttons. Apply the `data-dialog-action` attribute to workflow buttons to automatically close the dialog with the action value.
 
-<!-- docs: demo live name:d2l-dialog-fullscreen autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog-fullscreen autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/dropdown/README.md

@@ -17,7 +17,7 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
 
 `d2l-dropdown` is a generic opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value `d2l-dropdown-opener`.  Wire-up is automatic.
 
-<!-- docs: demo live name:d2l-dropdown align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown.js';
@@ -58,7 +58,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 ## Opener: Dropdown Button [d2l-dropdown-button]
 `d2l-dropdown-button` is a `d2l-button` opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo live name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -86,7 +86,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 ## Opener: Button Subtle [d2l-dropdown-button-subtle]
 `d2l-dropdown-button-subtle` is a `d2l-button-subtle` opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
@@ -123,7 +123,7 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
 ## Opener: Context Menu [d2l-dropdown-context-menu]
 `d2l-dropdown-context-menu` is a simple/minimal opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-context-menu.js';
@@ -160,7 +160,7 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
 ## Opener: More [d2l-dropdown-more]
 `d2l-dropdown-more` is a simple/minimal opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo live name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
@@ -197,7 +197,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Container [d2l-dropdown-content]
 `d2l-dropdown-content` is a generic container for dropdown content.  It provides behavior such as sizing,  positioning, and managing focus gain/loss.
 
-<!-- docs: demo live name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -255,7 +255,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Menu [d2l-dropdown-menu]
 `d2l-dropdown-menu` is a container for a [d2l-menu](../menu/README.md) component. It provides additional support on top of `d2l-dropdown-content` for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.
 
-<!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-menu align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -294,7 +294,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Tabs [d2l-dropdown-tabs]
 `d2l-dropdown-tabs` is a container for a [d2l-tabs](https://github.com/BrightspaceUI/tabs) component. It provides additional support on top of `d2l-dropdown-content` for automatic resizing when the tab changes.
 
-<!-- docs: demo live name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
+<!-- docs: demo code properties name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';

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

@@ -200,9 +200,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			_closing: {
 				type: Boolean
 			},
-			_contentOverflow: {
-				type: Boolean
-			},
 			_dropdownContent: {
 				type: Boolean,
 				attribute: 'dropdown-content',
@@ -262,7 +259,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._bottomOverflow = false;
 		this._topOverflow = false;
 		this._closing = false;
-		this._contentOverflow = false;
 		this._hasHeader = false;
 		this._hasFooter = false;
 		this._showBackdrop = false;
@@ -704,7 +700,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 					&& headerFooterHeight < this.maxHeight
 					? this.maxHeight - headerFooterHeight - 2
 					: availableHeight - headerFooterHeight;
-				this.__toggleOverflowY(contentRect.height + headerFooterHeight > availableHeight);
 
 				// ensure the content height has updated when the __toggleScrollStyles event handler runs
 				await this.updateComplete;
@@ -723,16 +718,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		await adjustPosition();
 	}
 
-	__toggleOverflowY(isOverflowing) {
-		if (!this.__content) {
-			return;
-		}
-		if (!this._contentHeight) {
-			return;
-		}
-		this._contentOverflow = isOverflowing || this.__content.scrollHeight > this._contentHeight;
-	}
-
 	__toggleScrollStyles() {
 		/* scrollHeight incorrect in IE by 4px second time opened */
 		this._bottomOverflow = this.__content.scrollHeight - (this.__content.scrollTop + this.__content.clientHeight) >= 5;
@@ -809,7 +794,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyles = {
@@ -845,7 +829,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: this._contentHeight ? `${this._contentHeight}px` : '',
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyle = {
@@ -951,7 +934,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyles = {

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

@@ -120,6 +120,7 @@ export const dropdownContentStyles = css`
 		box-sizing: border-box;
 		max-width: 100%;
 		outline: none;
+		overflow-y: auto;
 		padding: 1rem;
 	}
 

package/components/empty-state/README.md

@@ -49,7 +49,7 @@ Empty state components are used to convey that there is no data available to be
 
 The `d2l-empty-state-simple` component is an empty state component that displays a description. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
 
-<!-- docs: demo live name:d2l-empty-state-simple -->
+<!-- docs: demo code properties name:d2l-empty-state-simple -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
@@ -64,7 +64,7 @@ The `d2l-empty-state-illustrated` component is an empty state component that dis
 
 The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the `illustration` slot. The catalogue of preset empty state illustrations can be found [here](#preset-empty-state-illustrations).
 
-<!-- docs: demo live name:d2l-empty-state-illustrated -->
+<!-- docs: demo code properties name:d2l-empty-state-illustrated -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
@@ -88,7 +88,7 @@ The `illustration-name` property can be set to use one of the preset illustratio
 
 The `primary` attribute can be set to render a primary button in place of the default subtle button. Note that the `primary` attribute is only valid when placed within `empty-state-illustrated` components and will have no effect on `empty-state-simple`. 
 
-<!-- docs: demo live name:d2l-empty-state-action-button -->
+<!-- docs: demo code properties name:d2l-empty-state-action-button -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-action-button.js';
@@ -119,7 +119,7 @@ The `primary` attribute can be set to render a primary button in place of the de
 
 `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component. Only a single action can be placed within an empty state component.
 
-<!-- docs: demo live name:d2l-empty-state-action-link -->
+<!-- docs: demo code properties name:d2l-empty-state-action-link -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-action-link.js';

package/components/expand-collapse/README.md

@@ -4,7 +4,7 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
 
 ## Expand Collapse Content [d2l-expand-collapse-content]
 
-<!-- docs: demo live name:d2l-expand-collapse-content autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-expand-collapse-content autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/filter/README.md

@@ -33,7 +33,7 @@ Filter components are often used in conjuction with [tables](../../components/ta
 
 The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
 
-<!-- docs: demo live name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -164,7 +164,7 @@ The filter will announce changes to filter selections, search results, and when
 
 The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#d2l-filter-dimension-set-value), this will give you a selectable list of filter values.
 
-<!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -205,7 +205,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component, this will give you a selectable list of filter values.
 
-<!-- docs: demo live name:d2l-filter-dimension-set-value align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-value align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -266,7 +266,7 @@ Note that when using multiple filter dimensions, the counts should be updated wh
 
 The `d2l-filter-dimension-set-empty-state` component allows you to customize the empty state components that are rendered in [d2l-filter-dimension-set](#d2l-filter-dimension-set). When placed in the `d2l-filter-dimension-set` empty state slots, it will replace the component's default empty state. This component can be placed in either the `set-empty-state` or the `search-empty-state` slots.
 
-<!-- docs: demo live name:d2l-filter-dimension-set-empty-state align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-empty-state align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -302,7 +302,7 @@ The `d2l-filter-dimension-set-empty-state` component allows you to customize the
 
 A tag-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-filter`. It supports hooking up to multiple filters.
 
-<!-- docs: demo live name:d2l-filter-tags align:start display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-filter-tags align:start display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -373,7 +373,7 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
 
 The `d2l-filter-overflow-group` is a container for multiple filters that handles overflow on smaller screens. Overflowing filters are displayed in a single filter.
 
-<!-- docs: demo live name:d2l-filter-overflow-group align:start display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-filter-overflow-group align:start display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';

package/components/focus-trap/README.md

@@ -6,7 +6,7 @@ This component assists with managing user focus within your web application.
 
 The `d2l-focus-trap` is a generic container that will trap user focus from leaving. Focus will cycle to the first or last focusable elements when tabbing forwards or backwards respectively.  It will also capture focus from the document when actively trapping.
 
-<!-- docs: demo live name:d2l-focus-trap -->
+<!-- docs: demo code properties name:d2l-focus-trap -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/form/docs/form.md

@@ -50,7 +50,7 @@ It differs from the native HTML `form` element in 4 ways:
 
 If you're looking to emulate native form element submission, `d2l-form-native` may be more appropriate.
 
-<!-- docs: demo live name:d2l-form autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-form autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/form/form.js';
@@ -184,7 +184,7 @@ It differs from the native HTML `form` element in 2 ways:
 
 If you're looking to submit form data via your own API calls or nest multiple forms within each other, `d2l-form` may be more appropriate.
 
-<!-- docs: demo live name:d2l-form-native autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-form-native autoSize:false display:block size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/form/form-native.js';

package/components/html-block/README.md

@@ -8,7 +8,7 @@ The `d2l-html-block` element is a web component for displaying user-authored HTM
 
 Pass the user-authored HTML into the `html` attribute of 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 -->
+<!-- docs: demo code properties name:d2l-html-block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/html-block/html-block.js';

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

@@ -31,7 +31,7 @@ Checkboxes are used in forms to toggle an option or preference.
 
 The `<d2l-input-checkbox>` element can be used to get a checkbox and optional visible label.
 
-<!-- docs: demo live name:d2l-input-checkbox display:block -->
+<!-- docs: demo code properties name:d2l-input-checkbox display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-checkbox.js';

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

@@ -16,7 +16,7 @@ Color inputs allow users to select a color from a palette and perform color cont
 
 The `<d2l-input-color>` will open a dialog to allow the user to select a color from a palette.
 
-<!-- docs: demo live name:d2l-input-color -->
+<!-- docs: demo code properties name:d2l-input-color -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-color.js';

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

@@ -31,7 +31,7 @@ Use the `<d2l-input-date>` component when users need to choose a single date. It
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
@@ -77,7 +77,7 @@ Use the `<d2l-input-date-range>` component when users need to enter two dates i
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
@@ -129,7 +129,7 @@ Use the `<d2l-input-time>` component when users need to enter a time, without a
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time.js';
@@ -175,7 +175,7 @@ Use the `<d2l-input-time-range>` component when users need to enter two times in
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time-range align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
@@ -223,7 +223,7 @@ Use the `<d2l-input-date-time>` component when users need to enter a single dat
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
@@ -270,7 +270,7 @@ Use the `<d2l-input-date-time-range>` component when users need to enter two d
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';

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

@@ -21,7 +21,7 @@ Numeric inputs allow users to input numbers. These include the more generic `d2l
 
 The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's intended for inputting numbers only.
 
-<!-- docs: demo live name:d2l-input-number -->
+<!-- docs: demo code properties name:d2l-input-number -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-number.js';
@@ -99,7 +99,7 @@ To accept only integer numbers, set `max-fraction-digits` to zero:
 
 The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it provides a "%" symbol beside the number.
 
-<!-- docs: demo live name:d2l-input-percent -->
+<!-- docs: demo code properties name:d2l-input-percent -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-percent.js';

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

@@ -75,7 +75,7 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
 
 If you'd like to manually link the radio input with a label, or use an ARIA label, place the `d2l-radio-input` CSS class on the input itself to style it. For example:
 
-<!-- docs: demo live name:d2l-test-input-radio-solo display:block -->
+<!-- docs: demo code properties name:d2l-test-input-radio-solo display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';

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

@@ -35,7 +35,7 @@ Search inputs allow users to input text, execute a search, and clear results. A
 
 For text searches use `<d2l-input-search>`, which wraps the native `<input type="search">` element.
 
-<!-- docs: demo live name:d2l-input-search -->
+<!-- docs: demo code properties name:d2l-input-search -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-search.js';

package/components/inputs/docs/input-select-styles.md

@@ -52,7 +52,7 @@ Native `<select>` elements can be styled by importing `input-select-styles.js` i
 
 Note: in order for RTL to function correctly, make sure your component uses the `RtlMixin`.
 
-<!-- docs: demo live name:d2l-test-input-select -->
+<!-- docs: demo code properties name:d2l-test-input-select -->
 ```html
 <script type="module">
   import { css, html, LitElement } from 'lit';

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

@@ -49,7 +49,7 @@ Therefore in text inputs, placeholder text is a light colour (Mica), which fails
 
 The `<d2l-input-text>` element is a simple wrapper around the native `<input type="text">` tag. It's intended primarily for inputting generic text, email addresses and URLs.
 
-<!-- docs: demo live name:d2l-input-text -->
+<!-- docs: demo code properties name:d2l-input-text -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
@@ -168,7 +168,7 @@ As an alternative to using the `<d2l-input-text>` custom element, you can style
 
 The `<d2l-input-textarea>` is a wrapper around the native `<textarea>` element that provides auto-grow and validation behaviours. It's intended for inputting unformatted multi-line text.
 
-<!-- docs: demo live name:d2l-input-textarea -->
+<!-- docs: demo code properties name:d2l-input-textarea -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-textarea.js';

package/components/link/README.md

@@ -34,7 +34,7 @@ Same size as the standard link, but bolder.
 
 Import and use the `<d2l-link>` web component instead of the native `<a>` element:
 
-<!-- docs: demo live name:d2l-link -->
+<!-- docs: demo code properties name:d2l-link -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/link/link.js';

package/components/list/README.md

@@ -102,7 +102,7 @@ When using `d2l-list`, the `grid` attribute will enable the table-like keyboard
 
 The `d2l-list` is the container to create a styled list of items using `d2l-list-item` or `d2l-list-item-button`. It provides the appropriate `list` semantics as well as options for displaying separators, etc.
 
-<!-- docs: demo live name:d2l-list display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-list display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -330,7 +330,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo live name:d2l-list-controls display:block autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-list-controls display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -382,7 +382,7 @@ The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` s
 
 The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, breakpoints for responsiveness, a navigation link for the primary action, and selection.
 
-<!-- docs: demo live name:d2l-list-item autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-list-item autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-icon.js';
@@ -461,7 +461,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
 
-<!-- docs: demo live name:d2l-list-item-button display:block -->
+<!-- docs: demo code properties name:d2l-list-item-button display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -548,7 +548,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 
 The `d2l-list-item-content` provides additional consistent layout for primary and secondary text in item content. It may be used with or without the `illustration` and `action` slots mentioned above.
 
-<!-- docs: demo live name:d2l-list-item-content display:block -->
+<!-- docs: demo code properties name:d2l-list-item-content display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';

package/components/loading-spinner/README.md

@@ -28,7 +28,7 @@ A loading spinner indicates that something is happening and we don't know how lo
 
 ## Loading Spinner [d2l-loading-spinner]
 
-<!-- docs: demo live name:d2l-loading-spinner -->
+<!-- docs: demo code properties name:d2l-loading-spinner -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';

package/components/menu/README.md

@@ -27,7 +27,7 @@ A basic menu can be defined using `d2l-menu` and a combination of menu items (e.
 
 **Note:** `d2l-menu` renders without an outer border since it's typically used in a context where a containing element defines a border (ex. `d2l-dropdown-menu` or side nav).
 
-<!-- docs: demo live name:d2l-menu -->
+<!-- docs: demo code properties name:d2l-menu -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -64,7 +64,7 @@ To make your usage of `d2l-menu` accessible, use the following property:
 
 The `d2l-menu-item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
 
-<!-- docs: demo live name:d2l-menu-item -->
+<!-- docs: demo code properties name:d2l-menu-item -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -116,7 +116,7 @@ To make your usage of `d2l-menu-item` accessible, use the following property:
 
 This `d2l-menu-item-link` is used for navigating. It gives users the ability to right-click and open in a new tab.
 
-<!-- docs: demo live name:d2l-menu-item-link -->
+<!-- docs: demo code properties name:d2l-menu-item-link -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -152,7 +152,7 @@ To make your usage of `d2l-menu-item-link` accessible, use the following propert
 
 The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Multiple checkboxes can be selected at once.
 
-<!-- docs: demo live name:d2l-menu-item-checkbox -->
+<!-- docs: demo code properties name:d2l-menu-item-checkbox -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -198,7 +198,7 @@ To make your usage of `d2l-menu-item-checkbox` accessible, use the following pro
 
 The `d2l-menu-item-radio` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Only one radio item in a given `<d2l-menu>` may be selected at once (i.e., selecting one option will deselect the other selected `d2l-menu-item-radio` item).
 
-<!-- docs: demo live name:d2l-menu-item-radio -->
+<!-- docs: demo code properties name:d2l-menu-item-radio -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -244,7 +244,7 @@ To make your usage of `d2l-menu-item-radio` accessible, use the following proper
 
 The `d2l-menu-item-separator` component can be used to semantically separate menu items.
 
-<!-- docs: demo live name:d2l-menu-item-separator -->
+<!-- docs: demo code properties name:d2l-menu-item-separator -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';

package/components/meter/README.md

@@ -36,7 +36,7 @@ Meters are a visually engaging way to communicate progress or measurements.
 
 Linear meters show a horizontal progress bar.
 
-<!-- docs: demo live name:d2l-meter-linear -->
+<!-- docs: demo code properties name:d2l-meter-linear -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-linear.js';
@@ -68,7 +68,7 @@ Linear meters show a horizontal progress bar.
 
 Radial meters appear as a half circle. They have more visual weight than a linear meter and should only be used when the data is central to the user's task.
 
-<!-- docs: demo live name:d2l-meter-radial size:medium -->
+<!-- docs: demo code properties name:d2l-meter-radial size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-radial.js';
@@ -92,7 +92,7 @@ Radial meters appear as a half circle. They have more visual weight than a line
 
 Circle meters display data in a compact circle format, so they're useful when horizontal space is at a premium.
 
-<!-- docs: demo live name:d2l-meter-circle -->
+<!-- docs: demo code properties name:d2l-meter-circle -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-circle.js';

package/components/more-less/README.md

@@ -4,7 +4,7 @@ The `d2l-more-less` element can be used to minimize the display of long content,
 
 ## More-Less [d2l-more-less]
 
-<!-- docs: demo live name:d2l-more-less -->
+<!-- docs: demo code properties name:d2l-more-less -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/more-less/more-less.js';

package/components/object-property-list/README.md

@@ -36,7 +36,7 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
 
 An object property list can be defined using `d2l-object-property-list` and a combination of items (e.g., `d2l-object-property-list-item`, `d2l-object-property-list-item-link`).
 
-<!-- docs: demo live name:d2l-object-property-list -->
+<!-- docs: demo code properties name:d2l-object-property-list -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -79,7 +79,7 @@ The object property list is designed to wrap in an inline manner if the items ar
 
 The `d2l-object-property-list-item` component is the basic type of item for an object property list, displaying text and an optional leading icon.
 
-<!-- docs: demo live name:d2l-object-property-list-item -->
+<!-- docs: demo code properties name:d2l-object-property-list-item -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -105,7 +105,7 @@ The `d2l-object-property-list-item` component is the basic type of item for an o
 
 The `d2l-object-property-list-item-link` component is a link item for the object property list. It displays text as a hyperlink, with an optional leading icon.
 
-<!-- docs: demo live name:d2l-object-property-list-item-link -->
+<!-- docs: demo code properties name:d2l-object-property-list-item-link -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -134,7 +134,7 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 
 Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.
 
-<!-- docs: demo live name:d2l-status-indicator -->
+<!-- docs: demo code properties name:d2l-status-indicator -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';

package/components/offscreen/README.md

@@ -6,7 +6,7 @@ Positioning content off-screen is a valuable accessibility technique that allows
 
 Import the `<d2l-offscreen>` web component and place your content within the default slot to position it off-screen. The content will be hidden in the UI but still discoverable by screen reader users.
 
-<!-- docs: demo live name:d2l-offscreen -->
+<!-- docs: demo code properties name:d2l-offscreen -->
 ```html
 <!-- docs: start hidden content -->
 <style>

package/components/overflow-group/README.md

@@ -30,7 +30,7 @@ The `d2l-overflow-group` element can be used to add responsiveness to a set of b
 ## Overflow Group [d2l-overflow-group]
 Items added to this container element will no longer wrap onto a second line when the container becomes too small, but will be added to a dropdown menu with configurable styling.
 
-<!-- docs: demo live name:d2l-overflow-group autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-overflow-group autoSize:false display:block size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/overflow-group/overflow-group.js';

package/components/scroll-wrapper/README.md

@@ -5,7 +5,7 @@ Scroll containers can be used to control how content acts when overflowing its c
 
 The `d2l-scroll-wrapper` element can be used to wrap content which may overflow its horizontal boundaries, providing left/right scroll buttons.
 
-<!-- docs: demo live name:d2l-scroll-wrapper -->
+<!-- docs: demo code properties name:d2l-scroll-wrapper -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/scroll-wrapper/scroll-wrapper.js';

package/components/selection/README.md

@@ -12,7 +12,7 @@ The `SelectionMixin` enables the creation of custom selection control components
 
 The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
 
-<!-- docs: demo live name:d2l-demo-selection display:block -->
+<!-- docs: demo code properties name:d2l-demo-selection display:block -->
 ```html
 <script type="module">
   import { css, html, LitElement } from 'lit';
@@ -107,7 +107,7 @@ Define a custom web component that extends the `SelectionMixin`. The selection c
 
 The `d2l-selection-action` is an optional component that provides a button for actions associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
 
-<!-- docs: demo live name:d2l-selection-action -->
+<!-- docs: demo code properties name:d2l-selection-action -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -136,7 +136,7 @@ The `d2l-selection-action` is an optional component that provides a button for a
 
 The `d2l-selection-action-dropdown` is an optional component that provides a button opener for dropdown content associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the opener should be non-interactive if nothing is selected.
 
-<!-- docs: demo live name:d2l-selection-action-dropdown align:baseline -->
+<!-- docs: demo code properties name:d2l-selection-action-dropdown align:baseline -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
@@ -166,7 +166,7 @@ The `d2l-selection-action-dropdown` is an optional component that provides a but
 
 The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the menu item should be non-interactive if nothing is selected. This component enables the app to define an opener that is enabled regardless of the selection state, while having a menu containing one or more menu items that `requires-selection`.
 
-<!-- docs: demo live name:d2l-selection-action-menu-item autoSize:false size:medium align:baseline -->
+<!-- docs: demo code properties name:d2l-selection-action-menu-item autoSize:false size:medium align:baseline -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
@@ -208,7 +208,7 @@ If `d2l-selection-input` is placed within a selection control that specifies `se
 
 Note: `d2l-list-item` already provides a selection input for selectable list items.
 
-<!-- docs: demo live name:d2l-selection-input display:block -->
+<!-- docs: demo code properties name:d2l-selection-input display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-input.js';
@@ -266,7 +266,7 @@ The `d2l-selection-select-all` is an optional component that provides a checkbox
 
 The `d2l-selection-select-all` component may be placed inside the selection control, or in the same DOM scope with the `selection-for` attribute set to the id of that component. In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-select-all` from outside of the selection control component.
 
-<!-- docs: demo live name:d2l-selection-select-all display:block -->
+<!-- docs: demo code properties name:d2l-selection-select-all display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -351,7 +351,7 @@ The `d2l-selection-summary` is an optional component that shows a simple count o
 
 The `d2l-selection-summary` component may be placed inside the selection control, or in the same DOM scope with the `selection-for` attribute set to the id of that component. In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-summary` from outside of the selection control component.
 
-<!-- docs: demo live name:d2l-selection-summary display:block -->
+<!-- docs: demo code properties name:d2l-selection-summary display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -436,7 +436,7 @@ The `d2l-selection-controls` provides a standardized wrapper to display selectio
 
 When using lists, use the list-specific `d2l-list-controls` instead, which extends this component's behaviour.
 
-<!-- docs: demo live name:d2l-selection-controls display:block autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-selection-controls display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';

package/components/status-indicator/README.md

@@ -58,7 +58,7 @@ Status Indicators are used to communicate the status of an item. They are non-in
 
 ## Status Indicator [d2l-status-indicator]
 
-<!-- docs: demo live name:d2l-status-indicator -->
+<!-- docs: demo code properties name:d2l-status-indicator -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
@@ -81,7 +81,7 @@ Status Indicators are used to communicate the status of an item. They are non-in
 
 Use the bold style if the state is central to the user's task and should have maximum prominence. Use the default style if the state is important but not critical to the user's workflow. It is acceptable to mix the styles if one particular state should stand out more than the rest.
 
-<!-- docs: demo live -->
+<!-- docs: demo code properties -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';

package/components/switch/README.md

@@ -29,7 +29,7 @@ A switch is used to toggle between two states, on and off, just like a light swi
 ## Switch [d2l-switch]
 The `d2l-switch` element is a generic switch with on/off semantics.
 
-<!-- docs: demo live name:d2l-switch autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-switch autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch.js';
@@ -65,7 +65,7 @@ The d2l-switch-visibility component is a special variant for toggling the visibi
 
 See also [Visibility Switch with Conditions](https://daylight.d2l.dev/components/switch/#visibility-switch-with-conditions).
 
-<!-- docs: demo live name:d2l-switch-visibility autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-switch-visibility autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch-visibility.js';

package/components/table/README.md

@@ -45,7 +45,7 @@ If the viewport is very narrow — for example, on a mobile device — it may be
 
 The `d2l-table-wrapper` element can be combined with table styles to apply default/light styling, row selection styles, overflow scrolling and sticky headers to native `<table>` elements within your Lit components.
 
-<!-- docs: demo live name:d2l-table-wrapper display:block -->
+<!-- docs: demo code properties name:d2l-table-wrapper display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -300,7 +300,7 @@ Load-More paging functionality can be implemented in tables by placing a `d2l-pa
 
 The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `controls` slot to provide a selection summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo live name:d2l-table-controls display:block -->
+<!-- docs: demo code properties name:d2l-table-controls display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';

package/components/tabs/README.md

@@ -39,7 +39,7 @@ Tabs are used to present related information in mutually exclusive panels, allow
 
 The `d2l-tabs` element is a web component for tabbed content. It provides the `d2l-tab-panel` component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
 
-<!-- docs: demo live name:d2l-tabs display:block -->
+<!-- docs: demo code properties name:d2l-tabs display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tabs/tabs.js';
@@ -69,7 +69,7 @@ The `d2l-tabs` element is a web component for tabbed content. It provides the `d
 ## Tab Panels [d2l-tab-panel]
 Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Tab panels can contain text, form controls, rich media, or just about anything else. There is an optional “slot” available for related controls such as a Settings button.
 
-<!-- docs: demo live name:d2l-tab-panel display:block -->
+<!-- docs: demo code properties name:d2l-tab-panel display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tabs/tabs.js';

package/components/tag-list/README.md

@@ -30,7 +30,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 
 The corresponding `*-clear` event must be listened to for whatever component (`d2l-tag-list` or `d2l-tag-list-item`) has `clearable` on it and that listener must handle individual `d2l-tag-list-item` deletion as well as potentially focus behavior (see individual event descriptions).
 
-<!-- docs: demo live name:d2l-tag-list autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-tag-list autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -60,7 +60,7 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
 ## Tag List Item [d2l-tag-list-item]
 The `d2l-tag-list-item` provides the appropriate semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
 
-<!-- docs: demo live name:d2l-tag-list-item autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-tag-list-item autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';

package/components/tooltip/README.md

@@ -74,7 +74,7 @@ The `d2l-tooltip` component is used to display additional information when users
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-tooltip autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-tooltip autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
@@ -193,7 +193,7 @@ The `d2l-tooltip-help` component is used to display additional information when
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-tooltip-help autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tooltip/tooltip-help.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.128.5",
+  "version": "2.130.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -45,13 +45,14 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.3",
+    "@brightspace-ui/testing": "^0.7",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@open-wc/testing": "^3",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
     "@rollup/plugin-replace": "^5",
     "@web/dev-server": "^0.2",
+    "@web/test-runner": "^0.16",
     "axe-core": "^4",
     "chalk": "^5",
     "eslint": "^8",

package/templates/primary-secondary/README.md

@@ -16,7 +16,7 @@ If no nodes are assigned to the `footer` slot, the footer is hidden.
 
 Note: this template automatically includes `<header>`, `<main>`, `<aside>` and `<footer>` elements, so there's no need to include them inside the various slots.
 
-<!-- docs: demo live name:d2l-template-primary-secondary autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-template-primary-secondary autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/templates/primary-secondary/primary-secondary.js';

package/tools/web-test-runner-helpers.js

@@ -1,12 +0,0 @@
-import { sendKeys, sendMouse } from '@web/test-runner-commands';
-
-export const focusWithKeyboard = async(element) => {
-	await sendKeys({ press: 'Tab' });
-	element.focus({ focusVisible: true });
-};
-
-export const focusWithMouse = async(element) => {
-	const { x, y } = element.getBoundingClientRect();
-	await sendMouse({ type: 'click', position: [Math.ceil(x), Math.ceil(y)] });
-	await sendMouse({ type: 'move', position: [0, 0] });
-};