@brightspace-ui/core 1.211.0 → 1.213.2

package/README.md

@@ -55,6 +55,8 @@ npm install @brightspace-ui/core
   * [Tooltip](components/tooltip/): tooltip components
   * [Typography](components/typography/): typography styles and components
   * [Validation](components/validation/): plugin custom validation logic to native and custom form elements
+* Controllers
+  * [Subscriber](controllers/subscriber/): for managing a registry of subscribers in a many-to-many relationship
 * Directives
   * [Animate](directives/animate/): animate showing, hiding and removal of elements
 * Helpers

package/components/filter/filter.js

@@ -212,6 +212,25 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 	}
 
+	focus() {
+		const opener = this.shadowRoot.querySelector('d2l-dropdown-button-subtle');
+		if (opener) opener.focus();
+	}
+
+	requestFilterClearAll() {
+		this._handleClearAll();
+	}
+
+	requestFilterValueClear(keyObject) {
+		const dimension = this._dimensions.find(dimension => dimension.key === keyObject.dimension);
+
+		switch (dimension.type) {
+			case 'd2l-filter-dimension-set':
+				this._performChangeSetDimension(dimension, keyObject.value, false);
+				break;
+		}
+	}
+
 	_buildDimension(dimension, singleDimension) {
 		let dimensionHTML;
 		switch (dimension.type) {
@@ -433,20 +452,9 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		const dimensionKey = e.target.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._dimensions.find(dimension => dimension.key === dimensionKey);
 		const valueKey = e.detail.key;
-		const value = dimension.values.find(value => value.key === valueKey);
 		const selected = e.detail.selected;
 
-		value.selected = selected;
-
-		if (selected) {
-			dimension.appliedCount++;
-			this._totalAppliedCount++;
-		} else {
-			dimension.appliedCount--;
-			this._totalAppliedCount--;
-		}
-
-		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+		this._performChangeSetDimension(dimension, valueKey, selected);
 	}
 
 	_handleClear() {
@@ -621,6 +629,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		return false;
 	}
 
+	_performChangeSetDimension(dimension, valueKey, selected) {
+		const value = dimension.values.find(value => value.key === valueKey);
+		if (value.selected === selected) return;
+		value.selected = selected;
+
+		if (selected) {
+			dimension.appliedCount++;
+			this._totalAppliedCount++;
+		} else {
+			dimension.appliedCount--;
+			this._totalAppliedCount--;
+		}
+
+		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+	}
+
 	_performDimensionClear(dimension) {
 		this._totalAppliedCount = this._totalAppliedCount - dimension.appliedCount;
 		dimension.appliedCount = 0;

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

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import { css, LitElement } from 'lit-element/lit-element.js';
-import { HtmlAttributeObserverController } from '../../helpers/htmlAttributeObserverController.js';
+import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 

package/components/list/README.md

@@ -137,6 +137,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 | Property | Type | Description |
 |---|---|---|
+| `drag-multiple` | Boolean | Whether the user can drag multiple items |
 | `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
 | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the list-items will render with radios instead of checkboxes, and the list component will maintain a single selected item. |
 | `separators` | String | Display separators (`all` (default), `between`, `none`) |
@@ -150,18 +151,20 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 ### Methods
 
-- `getListItemCount`: returns the length of the items within the list
-- `getListItemIndex` (Object): returns the index of the given element within the list
-- `getSelectedListItems` (Array): returns the selected items; pass `true` to include nested lists
-- `getSelectionInfo` (Object): returns a `SelectionInfo` object containing the `state` (`none`, `some`, `all`), and the `keys` (Array) for the selected items
+- `getItems()` (Array): returns the list items within the list
+- `getListItemByKey(key)` (ListItem): returns the list item element from the root or nested lists for the specified key
+- `getListItemCount()` (Number): returns the number of items within the list
+- `getListItemIndex(item)` (Object): returns the index of the given element within the list
+- `getSelectedListItems(includeNested)` (Array): returns the selected items; pass `true` to include nested lists
+- `getSelectionInfo(includeNested)` (Object): returns a `SelectionInfo` object containing the `state` (`none`, `some`, `all`), and the `keys` (Array) for the selected items
 
 ## Selection Lists
 
-The `d2l-list` supports selectable items within a list, including both single and multi. Selection is enabled when a `d2l-list-item` has the `selectable` attribute set on it, and is by default multi-select which is indicated by a checkbox. Setting `selection-single` on the `d2l-list` wrapper enables single selection, which renders the selectable items with radio buttons. A `d2l-list-header` component can be added before the `d2l-list-item` component in order to have an easy multi-select header with actions.
+The `d2l-list` supports selectable items within a list, including both single and multi selection. Selection is enabled when `d2l-list-item`s have the `selectable` attribute. When items are selectable, multiple selection is the default behaviour, however the `selection-single` attribute can be applied to the `d2l-list` to enable single selection. A `d2l-list-header` component can be added to `d2l-list`'s `header` slot to provide select-all and bulk actions.
 
 ### Accessibility Properties
 
-If a `d2l-list-item` is selectable then it should have a `label` attribute set on it which corresponds to the hidden label for the checkbox.
+If a `d2l-list-item` is selectable then it should have a `label` attribute that corresponds to the hidden label for the checkbox.
 
 ### Example
 
@@ -202,12 +205,15 @@ The `d2l-list` supports drag & drop.
 ![List](./screenshots/drag-and-drop.gif?raw=true)
 <!-- docs: end hidden content -->
 
-Because the list itself is a rendering component, there is some light work involved in hooking up this behaviour.
+The `d2l-list` is simply a rendering component, so there is some light work involved in hooking up this behaviour. In order for items to be draggable, they must have their `draggable` and `key` attributes set. Optionally, the `drop-nested` attribute can be applied to items to indicate whether other items can be dropped as nested children on the item.
 
-- `d2l-list-item` components within the list must be `draggable` and have `key` set to something unique
-- Reordering and re-rendering is the controlling component's responsibility
+Reordering and re-rendering is the consuming component's responsibility. For a simple flat list, listen for the `d2l-list-item-position-change` event and call the `reorder` helper method. Alternatively, or for more complex lists such as those with nested lists, listen for the `d2l-list-items-move` event on the root list and update the consumer data using the provided source and target event detail.
 
-Here is a simple component example that adds drag 'n' drop to a list:
+### Accessibility Properties
+
+If an item is draggable, the `drag-handle-text` attribute should be used to provide an accessible label for assistive technology in keyboard mode.
+
+### Example
 
 <!-- docs: demo code autoSize:false size:medium -->
 ```html
@@ -227,18 +233,9 @@ Here is a simple component example that adds drag 'n' drop to a list:
     constructor() {
       super();
       this.list = [
-        {
-          key: '1',
-          content: 'Initially first list item'
-        },
-        {
-          key: '2',
-          content: 'Initially second list item'
-        },
-        {
-          key: '3',
-          content: 'Initially third list item'
-        }
+        { key: '1', content: 'Initially first list item' },
+        { key: '2', content: 'Initially second list item' },
+        { key: '3', content: 'Initially third list item' }
       ];
     }
 
@@ -319,7 +316,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 ## List Item [d2l-list-item]
 
-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. It extends `ListItemLinkMixin` and `ListItemMixin` and has all the same use cases as the mixin.
+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: start hidden content -->
 ![List](./screenshots/list-item.png?raw=true)
@@ -353,7 +350,20 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 | Property | Type | Description |
 |---|---|---|
+| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `disabled` | Boolean | Disables the input |
+| `draggable` |  Boolean | Whether the item is draggable |
+| `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drop-nested` | Boolean | Whether nested items can be dropped on this item |
+| `drop-text` | String | Text to drag and drop |
 | `href` | String | Address of item link if navigable |
+| `key` | String | Value to identify item if selectable or draggable |
+| `label` | String | Explicitly defined label for the element |
+| `labelled-by` | String | The id of element that provides the label for this element |
+| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
+| `selected` | Boolean | Whether the item is selected |
+| `skeleton` | Boolean | Renders the input as a skeleton loader |
+| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 
@@ -376,6 +386,56 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
     - Image: max dimensions: `width: 216px` and `height: 120px` and has `20px margin` from the main content;
     - default break: `843px < x`  where `x` is the width of the component.
 
+## Button List Item [d2l-list-item-button]
+
+The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
+
+<!-- docs: start hidden content -->
+![List](./screenshots/list-item.png?raw=true)
+<!-- docs: end hidden content -->
+
+<!-- docs: demo live name:d2l-list-item-button -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-item-button.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+</script>
+
+<d2l-list style="width: 100%">
+  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
+    <d2l-list-item-content>
+      <div>Geomorphology and GIS </div>
+      <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
+    </d2l-list-item-content>
+  </d2l-list-item-button>
+</d2l-list>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `disabled` | Boolean | Disables the input |
+| `draggable` |  Boolean | Whether the item is draggable |
+| `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drop-nested` | Boolean | Whether nested items can be dropped on this item |
+| `drop-text` | String | Text to drag and drop |
+| `key` | String | Value to identify item if selectable or draggable |
+| `label` | String | Explicitly defined label for the element |
+| `labelled-by` | String | The id of element that provides the label for this element |
+| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
+| `selected` | Boolean | Whether the item is selected |
+| `skeleton` | Boolean | Renders the input as a skeleton loader |
+| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
+
+### Events
+
+- `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
+<!-- docs: end hidden content -->
+
 ## ListItemMixin
 
 Want to maintain consistency with `d2l-list-item` but need more modularity? This mixin is for you! This mixin allows you to make a component into a list item without requiring custom styling. All of the properties and functionality from `d2l-list-item` (listed above) will be added to your new component.
@@ -411,42 +471,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 - illustration (TemplateResult):  Provide an illustration for your list item.
 - content (TemplateResult): Core content of the list item, such as a d2l-list-item-content element.
 - actions (TemplateResult): Secondary actions for the list item.
-
-### Accessibility Properties
-
-- `drag-handle-text`: The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
-
-## Button List Item [d2l-list-item-button]
-
-The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action. It extends `ListItemButtonMixin` and `ListItemMixin` and has all the same use cases as the mixin.
-
-<!-- docs: start hidden content -->
-![List](./screenshots/list-item.png?raw=true)
-<!-- docs: end hidden content -->
-
-<!-- docs: demo live name:d2l-list-item-button -->
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-item-button.js';
-  import '@brightspace-ui/core/components/list/list-item-content.js';
-</script>
-
-<d2l-list style="width: 100%">
-  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
-    <d2l-list-item-content>
-      <div>Geomorphology and GIS </div>
-      <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-    </d2l-list-item-content>
-  </d2l-list-item-button>
-</d2l-list>
-```
-
-<!-- docs: start hidden content -->
-### Events
-
-- `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
-<!-- docs: end hidden content -->
+- nested (TemplateResult): Optional `d2l-list` for a nested list.
 
 ## List Item Content
 
@@ -494,6 +519,13 @@ This event includes a detail object with helper methods attached to it.
   - `announceFn(any, Number) (optional)`: A callback function that takes a given item in the array and its index, and returns the text to announce
   - `keyFn(any)`: A callback function that takes a given item in the array and returns its key
 
+## Event Details: @d2l-list-items-move
+
+**Properties**
+
+- `keyboardActive`: (Boolean) Whether the drag handle is in keyboard mode
+- `sourceItems`: (Array) Items being moved
+- `target`: (Object) The target reference `item` where items are being moved, and the `location` (`moveLocations.above`, `moveLocations.below`, or `moveLocations.nest`)
 
 <!-- docs: start hidden content -->
 ## Future Improvements

package/components/list/demo/list-drag-and-drop.js

@@ -21,23 +21,27 @@ class ListDemoDragAndDrop extends LitElement {
 			primaryText: 'Introductory Earth Sciences',
 			supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
 			imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
+			dropNested: true,
 			items: [{
 				key: '1-1',
 				primaryText: 'Glaciation',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '1-2',
 				primaryText: 'Weathering',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '1-3',
 				primaryText: 'Volcanism',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}]
 		}, {
@@ -48,14 +52,16 @@ class ListDemoDragAndDrop extends LitElement {
 			items: [{
 				key: '2-1',
 				primaryText: 'Contaminant Transport',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'No Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg',
+				dropNested: false,
 				items: []
 			}, {
 				key: '2-2',
 				primaryText: 'Modelling Flow in Fractured Media',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'No Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg',
+				dropNested: false,
 				items: []
 			}]
 		}, {
@@ -66,14 +72,16 @@ class ListDemoDragAndDrop extends LitElement {
 			items: [{
 				key: '3-1',
 				primaryText: 'Carbon & Nitrogen Cycling',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '3-2',
 				primaryText: 'Wetland Engineering',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}]
 		}];
@@ -88,11 +96,11 @@ class ListDemoDragAndDrop extends LitElement {
 							action-href="http://www.d2l.com"
 							draggable
 							drag-handle-text="${item.primaryText}"
-							drop-nested
+							?drop-nested="${item.dropNested}"
 							key="${item.key}"
 							label="${item.primaryText}"
 							selectable>
-								${nested ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
+								${item.imgSrc.length === 0 ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
 								<d2l-list-item-content>
 									<div>${item.primaryText}</div>
 									<div slot="supporting-info">${item.supportingText}</div>

package/components/list/list-header.js

@@ -7,6 +7,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A header for list components containing select-all, etc.
+ * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
 class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 

package/components/list/list-item-button.js

@@ -6,6 +6,7 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
  */
 class ListItemButton extends ListItemButtonMixin(LitElement) {
 

package/components/list/list-item-checkbox-mixin.js

@@ -25,7 +25,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 			 */
 			key: { type: String, reflect: true },
 			/**
-			 * **Selection:** Indicates a input should be rendered for selecting the item
+			 * **Selection:** Indicates an input should be rendered for selecting the item
 			 * @type {boolean}
 			 */
 			selectable: { type: Boolean },
@@ -60,6 +60,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 
 	constructor() {
 		super();
+		this.disabled = false;
+		this.selectable = false;
 		this.selected = false;
 		this.selectionInfo = new SelectionInfo();
 		this._checkboxId = getUniqueId();

package/components/list/list-item-drag-drop-mixin.js

@@ -264,7 +264,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			 */
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
-			 * **Drag & drop:** Whether the items can be dropped as nested children
+			 * **Drag & drop:** Whether nested items can be dropped on this item
 			 * @type {boolean}
 			 */
 			dropNested: { type: Boolean, attribute: 'drop-nested' },
@@ -374,6 +374,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_dispatchListItemsMove(sourceItems, targetItem, moveLocation, keyboardActive) {
 		if (!keyboardActive) keyboardActive = false;
 		const rootList = this._getRootList();
+		/** @ignore */
 		rootList.dispatchEvent(new CustomEvent('d2l-list-items-move', {
 			detail: {
 				keyboardActive: keyboardActive,

package/components/list/list-item.js

@@ -6,6 +6,7 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
  */
 class ListItem extends ListItemLinkMixin(LitElement) {
 

package/components/list/list.js

@@ -10,17 +10,20 @@ export const listSelectionStates = SelectionInfo.states;
 
 /**
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
- * @slot - List content (e.g., `listitem`s)
+ * @slot - Slot for list items (ex. `d2l-list-item`, `d2l-list-item-button`, or custom items)
+ * @slot header - Slot for `d2l-list-header` to be rendered above the list
+ * @fires d2l-list-items-move - Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move).
  */
 class List extends SelectionMixin(LitElement) {
 
 	static get properties() {
 		return {
 			/**
-			 * Whether to the user can drag multiple items
+			 * Not publicly available yet. Whether the user can drag multiple items
 			 * @type {boolean}
-			 */
-			dragMultiple: { type: Boolean, attribute: 'drag-multiple' },
+ 			 * @ignore
+ 			 */
+			dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
 			/**
 			 * Whether to extend the separators beyond the content's edge
 			 * @type {boolean}

package/controllers/subscriber/README.md

@@ -0,0 +1,177 @@
+# Subscriber Controllers
+
+The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can setup a subscriber registry instance to keep track of all components subscribed to them with the `SubscriberRegistryController`. Whenever it makes sense to do so, they can iterate over their subscribers to perform some action, update them with new data, etc.  Components can subscribe themselves to different registries using the `IdSubscriberController` or the `EventSubscriberController`. This system supports a many-to-many relationship - registry components can contain multiple registry instances with multiple subscribers in each, and subscriber components can subscribe to multiple different registries.
+
+## Usage
+
+Create an instance of the `SubscriberRegistryController` in the component that will be responsible for providing some data or performing some function on all its subscribers:
+
+```js
+import { SubscriberRegistryController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
+
+class CableSubscription extends LitElement {
+	constructor() {
+		super();
+		this._sportsSubscribers = new SubscriberRegistryController(this,
+			{ onSubscribe: this._unlockSportsChannels.bind(this) },
+			{ eventName: 'd2l-channels-subscribe-sports' }
+		);
+
+		this._movieSubscribers = new SubscriberRegistryController(this, {},
+			{ onSubscribe: this._unlockMovieChannels.bind(this), updateSubscribers: this._sendMovieGuide.bind(this) },
+			{ eventName: 'd2l-channels-subscribe-movies' }
+		);
+
+		// This controller only supports registering by id - no event is needed
+		this._kidsChannelSubscribers = new SubscriberRegistryController(this,
+			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
+	}
+
+	getController(controllerId) {
+		if (controllerId === 'sports') {
+			return this._sportsSubscribers;
+		} else if (controllerId === 'movies') {
+			return this._movieSubscribers;
+		} else if (controllerId === 'kids') {
+			return this._kidsChannelSubscribers;
+		}
+	}
+
+	_sendMovieGuide(subscribers) {
+		subscribers.forEach(subscriber => subscriber.updateGuide(new MovieGuide(new Date().getMonth())));
+	}
+
+	_unlockMovieChannels(subscriber) {
+		subscriber.addChannels([330, 331, 332, 333, 334, 335]);
+	}
+
+	...
+ }
+```
+
+When creating the controller, you can pass in callbacks to run whenever a subscriber is added, removed, or `updateSubscribers` is called (which handles request debouncing for you).
+
+The `*subscriberController`s will use a `getController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
+
+Once this has been set up, components can subscribe to particular registries two different ways:
+1. Using a matching event name with `EventSubscriberController`. The component will need to be a child of the registry component for this to work.
+2. By pointing to the registry component's id with `IdSubscriberController`. The component will need to be in the same DOM scope as the registry component for this to work.
+
+Like the `SubscriberRegistryController`, these `*subscriberController`s take optional callbacks to throw at different points in the subscription process.
+
+```js
+import { EventSubscriberController, IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
+
+class GeneralViewer extends LitElement {
+	static get properties() {
+		return {
+			_subscribedChannels: { type: Object }
+		};
+	}
+
+	constructor() {
+		super();
+		this._subscribedChannels = new Set();
+	
+		this._sportsSubscription = new EventSubscriberController(this,
+			{ onError: this._onSportsError.bind(this) }
+			{ eventName: 'd2l-channels-subscribe-sports', controllerId: 'sports' }
+		);
+
+		this._movieSubscription = new EventSubscriberController(this, {},
+			{ eventName: 'd2l-channels-subscribe-movies', controllerId: 'movies' }
+		);
+	}
+
+	addChannels(channels) {
+		channels.forEach(channel => this._subscribedChannels.add(channel));
+	}
+
+	_onSportsError() {
+		throw new Error('Where are the sports?');
+	}
+
+	...
+}
+
+class YoungerViewer extends LitElement {
+	static get properties() {
+		return {
+			for: { type: String },
+			_subscribedChannels: { type: Object }
+		};
+	}
+
+	constructor() {
+		super();
+		this._subscribedChannels = new Set();
+
+		this._kidsSubscription = new IdSubscriberController(this,
+			{ onSubscribe: this._onSubscribe.bind(this), onUnsubscribe: this._onUnsubscribe.bind(this) },
+			{ idPropertyName: 'for', controllerId: 'kids' }
+		);
+	}
+
+	addChannels(channels) {
+		channels.forEach(channel => this._subscribedChannels.add(channel));
+	}
+
+	_onSubscribe(cableProvider) {
+		console.log(`Subscribed with ${cableProvider.id} successfully.`);
+	}
+
+	_onUnsubscribe(cableProviderId) {
+		console.log(`Looks like ${cableProviderId} is having an outage again.`);
+	}
+
+	...
+}
+```
+
+An example of what this could look like altogether:
+```html
+<cable-subscription id="rogers">
+	<general-viewer></general-viewer>
+</cable-subscription>
+<younger-viewer for="rogers"></younger-viewer>
+```
+
+NOTE: Until we are on Lit 2, the controller lifecycle events will need to be manually called:
+```js
+	connectedCallback() {
+		super.connectedCallback();
+		if (this._subscriptionController) this._subscriptionController.hostConnected();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._subscriptionController) this._subscriptionController.hostDisconnected();
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this._subscriptionController) this._subscriptionController.hostUpdated(changedProperties);
+	}
+```
+
+## Available Callbacks
+
+### SubscriberRegistryController
+| Callback Name | Description | Passed to Callback |
+|---|---|---|
+| `onSubscribe` | Runs whenever a new subscriber is added | Subscriber that was just subscribed | 
+| `onUnsubscribe` | Runs whenever a subscriber is removed | Subscriber that was just unsubscribed |
+| `updateSubscribers` | Runs whenever `updateSubscribers` is called on the controller, handles debouncing requests for you | Map of all current subscribers |
+
+### EventSubscriberController
+| Callback Name | Description | Passed to Callback |
+|---|---|---|
+| `onSubscribe` | Runs when successfully subscribed to a registry component | Registry that was just subscribed to |
+| `onError` | Runs if the event was unacknowledged and no registry component was found | None |
+
+### IdSubscriberController
+| Callback Name | Description | Passed to Callback |
+|---|---|---|
+| `onSubscribe` | Runs whenever a registry component is successfully subscribed to | Registry that was just subscribed to |
+| `onUnsubscribe` | Runs whenever we unsubscribe to a registry (because it is now gone, or its id was removed from the id property list) | Id of the registry that was just unsubscribed to |
+| `onError` | Runs if no registry component was found for an id | Id of the registry we do not have a component for |

package/controllers/subscriber/subscriberControllers.js

@@ -0,0 +1,180 @@
+import { cssEscape } from '../../helpers/dom.js';
+
+export class SubscriberRegistryController {
+
+	constructor(host, callbacks, options) {
+		this._host = host;
+		this._callbacks = callbacks || {};
+		this._eventName = options && options.eventName;
+		this._subscribers = new Map();
+
+		this._handleSubscribe = this._handleSubscribe.bind(this);
+	}
+
+	get subscribers() {
+		return this._subscribers;
+	}
+
+	hostConnected() {
+		if (this._eventName) this._host.addEventListener(this._eventName, this._handleSubscribe);
+	}
+
+	hostDisconnected() {
+		if (this._eventName) this._host.removeEventListener(this._eventName, this._handleSubscribe);
+	}
+
+	subscribe(target) {
+		if (this._subscribers.has(target)) return;
+		this._subscribers.set(target, target);
+		if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(target);
+	}
+
+	unsubscribe(target) {
+		this._subscribers.delete(target);
+		if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(target);
+	}
+
+	updateSubscribers() {
+		if (!this._subscribers || this._subscribers.size === 0) return;
+		if (!this._callbacks.updateSubscribers) return;
+
+		// debounce the updates
+		if (this._updateSubscribersRequested) return;
+
+		this._updateSubscribersRequested = true;
+		setTimeout(() => {
+			this._callbacks.updateSubscribers(this._subscribers);
+			this._updateSubscribersRequested = false;
+		}, 0);
+	}
+
+	_handleSubscribe(e) {
+		e.stopPropagation();
+		e.detail.registry = this._host;
+		const target = e.composedPath()[0];
+		this.subscribe(target);
+	}
+}
+
+export class EventSubscriberController {
+
+	constructor(host, callbacks, options) {
+		this._host = host;
+		this._callbacks = callbacks || {};
+		this._eventName = options && options.eventName;
+		this._controllerId = options && options.controllerId;
+		this._registry = null;
+	}
+
+	get registry() {
+		return this._registry;
+	}
+
+	hostConnected() {
+		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
+		requestAnimationFrame(() => {
+			const evt = new CustomEvent(this._eventName, {
+				bubbles: true,
+				composed: true,
+				detail: {}
+			});
+			this._host.dispatchEvent(evt);
+			this._registry = evt.detail.registry;
+
+			if (!this._registry) {
+				if (this._callbacks.onError) this._callbacks.onError();
+				return;
+			}
+			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(this._registry);
+		});
+	}
+
+	hostDisconnected() {
+		if (this._registry) this._registry.getController(this._controllerId).unsubscribe(this._host);
+	}
+
+}
+
+export class IdSubscriberController {
+
+	constructor(host, callbacks, options) {
+		this._host = host;
+		this._callbacks = callbacks || {};
+		this._idPropertyName = options && options.idPropertyName;
+		this._controllerId = options && options.controllerId;
+		this._registries = new Map();
+		this._timeouts = new Set();
+	}
+
+	get registries() {
+		return Array.from(this._registries.values());
+	}
+
+	hostDisconnected() {
+		if (this._registryObserver) this._registryObserver.disconnect();
+		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
+		this._registries.forEach(registry => {
+			registry.getController(this._controllerId).unsubscribe(this._host);
+		});
+	}
+
+	hostUpdated(changedProperties) {
+		if (!changedProperties.has(this._idPropertyName)) return;
+
+		if (this._registryObserver) this._registryObserver.disconnect();
+		this._registries.forEach(registry => {
+			registry.getController(this._controllerId).unsubscribe(this._host);
+			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registry.id);
+		});
+		this._registries = new Map();
+
+		this._updateRegistries();
+
+		this._registryObserver = new MutationObserver(() => {
+			this._updateRegistries();
+		});
+
+		this._registryObserver.observe(this._host.getRootNode(), {
+			childList: true,
+			subtree: true
+		});
+	}
+
+	_updateRegistries() {
+		let registryIds = this._host[this._idPropertyName];
+		if (!registryIds) return;
+
+		registryIds = registryIds.split(' ');
+		registryIds.forEach(registryId => {
+			this._updateRegistry(registryId, 0);
+		});
+	}
+
+	_updateRegistry(registryId, elapsedTime) {
+		let registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`);
+		if (!registryComponent && this._callbacks.onError) {
+			if (elapsedTime < 3000) {
+				const timeoutId = setTimeout(() => {
+					this._timeouts.delete(timeoutId);
+					this._updateRegistry(registryId, elapsedTime + 100);
+				}, 100);
+				this._timeouts.add(timeoutId);
+			} else {
+				this._callbacks.onError(registryId);
+			}
+		}
+
+		registryComponent = registryComponent || undefined;
+		if (this._registries.get(registryId) === registryComponent) return;
+
+		if (registryComponent) {
+			registryComponent.getController(this._controllerId).subscribe(this._host);
+			this._registries.set(registryId, registryComponent);
+			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(registryComponent);
+		} else {
+			this._registries.delete(registryId);
+			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registryId);
+		}
+	}
+
+}

package/custom-elements.json

@@ -6260,7 +6260,7 @@
         {
           "name": "items",
           "type": "array",
-          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]}]"
         }
       ],
       "properties": [
@@ -6268,7 +6268,7 @@
           "name": "items",
           "attribute": "items",
           "type": "array",
-          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]}]"
         }
       ]
     },
@@ -6306,23 +6306,24 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
           "type": "boolean",
           "default": "true"
         },
@@ -6386,26 +6387,27 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
           "type": "boolean",
           "default": "true"
         },
@@ -6449,9 +6451,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6478,6 +6477,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements"
+        }
       ]
     },
     {
@@ -6515,24 +6520,26 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6594,27 +6601,29 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6660,9 +6669,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6680,6 +6686,10 @@
         {
           "name": "actions",
           "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
         }
       ]
     },
@@ -6850,24 +6860,26 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6941,27 +6953,29 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -7007,9 +7021,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -7027,6 +7038,10 @@
         {
           "name": "actions",
           "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
         }
       ]
     },
@@ -7041,12 +7056,6 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
-        {
-          "name": "drag-multiple",
-          "description": "Whether to the user can drag multiple items",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "extend-separators",
           "description": "Whether to extend the separators beyond the content's edge",
@@ -7076,8 +7085,6 @@
         },
         {
           "name": "dragMultiple",
-          "attribute": "drag-multiple",
-          "description": "Whether to the user can drag multiple items",
           "type": "boolean",
           "default": "false"
         },
@@ -7104,6 +7111,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-list-items-move",
+          "description": "Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move)."
+        },
         {
           "name": "d2l-list-selection-changes",
           "description": "Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item"
@@ -7116,7 +7127,11 @@
       "slots": [
         {
           "name": "",
-          "description": "List content (e.g., `listitem`s)"
+          "description": "Slot for list items (ex. `d2l-list-item`, `d2l-list-item-button`, or custom items)"
+        },
+        {
+          "name": "header",
+          "description": "Slot for `d2l-list-header` to be rendered above the list"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.211.0",
+  "version": "1.213.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -14,7 +14,7 @@
     "build": "npm run build:clean && npm run build:icons && npm run build:sass",
     "lint": "npm run lint:eslint && npm run lint:style && npm run lint:lit",
     "lint:eslint": "eslint . --ext .js,.html",
-    "lint:lit": "lit-analyzer \"{components,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
+    "lint:lit": "lit-analyzer \"{components,controllers,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
     "lint:style": "stylelint \"**/*.{js,html}\"",
     "start": "web-dev-server --node-resolve --watch --open",
     "test": "npm run lint && npm run test:headless && npm run test:axe",
@@ -26,6 +26,7 @@
   "files": [
     "custom-elements.json",
     "/components",
+    "/controllers",
     "/directives",
     "/generated",
     "/helpers",
@@ -47,10 +48,10 @@
     "@open-wc/testing": "^2",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",
-    "@web/test-runner-playwright": "^0.8.8",
+    "@web/test-runner-playwright": "^0.8",
     "axe-core": "^4",
     "chalk": "^5",
-    "eslint": "^7",
+    "eslint": "^8",
     "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",
     "eslint-plugin-import": "^2",
@@ -60,7 +61,7 @@
     "node-sass": "^7",
     "sinon": "^12",
     "stylelint": "^14",
-    "web-test-runner-performance": "^0.1.4"
+    "web-test-runner-performance": "^0.1"
   },
   "dependencies": {
     "@brightspace-ui/intl": "^3",
@@ -70,7 +71,7 @@
     "ifrau": "^0.39",
     "intl-messageformat": "^7",
     "lit-element": "^2",
-    "lit-html": "^1.4.1",
+    "lit-html": "^1",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }