@brightspace-ui/core 1.217.0 → 1.219.2

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

@@ -159,7 +159,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				attribute: 'no-pointer'
 			},
 			/**
-			 * @ignore
+			 * Whether the dropdown is open or not
+			 * @type {boolean}
 			 */
 			opened: {
 				type: Boolean,

package/components/filter/README.md

@@ -189,6 +189,7 @@ Set dimension on mobile:
 | `select-all` | Boolean | Whether to show a select all checkbox and selection summary for this dimension  |
 | `selection-single` | Boolean | Whether only one value can be selected at a time for this dimension  |
 | `text` | String, required | Text for the dimension in the menu |
+| `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |
 <!-- docs: end hidden content -->
 
 ## Filter Dimension: Set Value [d2l-filter-dimension-set-value]

package/components/filter/filter-dimension-set.js

@@ -38,7 +38,12 @@ class FilterDimensionSet extends LitElement {
 			 * REQUIRED: The text that is displayed for the dimension title
 			 * @type {string}
 			 */
-			text: { type: String }
+			text: { type: String },
+			/**
+			 * Whether to hide the dimension in the text sent to active filter subscribers
+			 * @type {boolean}
+			 */
+			valueOnlyActiveFilterText: { type: Boolean, attribute: 'value-only-active-filter-text' }
 		};
 	}
 
@@ -49,6 +54,7 @@ class FilterDimensionSet extends LitElement {
 		this.selectAll = false;
 		this.selectionSingle = false;
 		this.text = '';
+		this.valueOnlyActiveFilterText = false;
 		this._slot = null;
 	}
 

package/components/filter/filter.js

@@ -23,6 +23,7 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const ARROWLEFT_KEY_CODE = 37;
 const ESCAPE_KEY_CODE = 27;
@@ -143,6 +144,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._dimensions = [];
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
+
+		this._activeFilters = null;
+		this._activeFiltersSubscribers = new SubscriberRegistryController(this,
+			{ onSubscribe: this._updateActiveFiltersSubscriber.bind(this), updateSubscribers: this._updateActiveFiltersSubscribers.bind(this) },
+			{}
+		);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._activeFiltersSubscribers.hostConnected();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._activeFiltersSubscribers.hostDisconnected();
 	}
 
 	firstUpdated(changedProperties) {
@@ -217,6 +234,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		if (opener) opener.focus();
 	}
 
+	getSubscriberController() {
+		return this._activeFiltersSubscribers;
+	}
+
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -423,6 +444,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}));
 		this._changeEventsToDispatch = new Map();
 		this._changeEventTimeout = null;
+
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_dispatchDimensionFirstOpenEvent(key) {
@@ -511,9 +534,11 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					dimension.appliedCount--;
 					this._totalAppliedCount--;
 				}
+				this._activeFiltersSubscribers.updateSubscribers();
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				this._activeFiltersSubscribers.updateSubscribers();
 			}
 		});
 
@@ -609,6 +634,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					info.searchType = dimension.searchType;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
+					info.valueOnlyActiveFilterText = dimension.valueOnlyActiveFilterText;
 					const values = dimension._getValues();
 					info.values = values;
 					break;
@@ -619,6 +645,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		});
 
 		this._setFilterCounts();
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_isDimensionEmpty(dimension) {
@@ -717,6 +744,37 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		e.stopPropagation();
 	}
 
+	_updateActiveFilters() {
+		const activeFilters = [];
+
+		this._dimensions.forEach(dimension => {
+			switch (dimension.type) {
+				case 'd2l-filter-dimension-set': {
+					dimension.values.forEach(value => {
+						if (value.selected) {
+							const keyObject = { dimension: dimension.key, value: value.key };
+							const text = dimension.valueOnlyActiveFilterText ? value.text : `${dimension.text}: ${value.text}`;
+							activeFilters.push({ keyObject: keyObject, text: text });
+						}
+					});
+					break;
+				}
+			}
+		});
+
+		this._activeFilters = activeFilters;
+	}
+
+	_updateActiveFiltersSubscriber(subscriber) {
+		if (!this._activeFilters) this._updateActiveFilters();
+		subscriber.updateActiveFilters(this.id, this._activeFilters);
+	}
+
+	_updateActiveFiltersSubscribers(subscribers) {
+		this._updateActiveFilters();
+		subscribers.forEach(subscriber => subscriber.updateActiveFilters(this.id, this._activeFilters));
+	}
+
 }
 
 customElements.define('d2l-filter', Filter);

package/components/form/form-element-mixin.js

@@ -88,7 +88,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			 */
 			invalid: { type: Boolean, reflect: true },
 			/**
-			 * @ignore
 			 * Name of the form control. Submitted with the form as part of a name/value pair.
 			 * @type {string}
 			 */

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

@@ -225,14 +225,17 @@ class HtmlBlock extends LitElement {
 
 	async _processRenderers(elem) {
 		for (const renderer of getRenderers()) {
-			if (this.noDeferredRendering && !renderer.canRenderInline) continue;
-
 			if (this._contextObserverController && renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
-				elem = await renderer.render(elem, contextValues);
+				elem = await renderer.render(elem, {
+					contextValues: contextValues,
+					noDeferredRendering: this.noDeferredRendering
+				});
 			} else {
-				elem = await renderer.render(elem);
+				elem = await renderer.render(elem, {
+					noDeferredRendering: this.noDeferredRendering
+				});
 			}
 		}
 

package/components/list/demo/list-item-custom.js

@@ -1,3 +1,4 @@
+import '../list.js';
 import '../list-item-content.js';
 import { html, LitElement } from 'lit-element/lit-element.js';
 import { ListItemMixin } from '../list-item-mixin.js';

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

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
@@ -34,13 +35,18 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		return styles;
 	}
 
+	constructor() {
+		super();
+		this._primaryActionId = getUniqueId();
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
 	}
 
 };

package/components/list/list-item-drag-handle.js

@@ -1,9 +1,11 @@
 import '../button/button-icon.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -36,6 +38,8 @@ export const dragActions = Object.freeze({
 	up: 'up'
 });
 
+let hasDisplayedKeyboardTooltip = false;
+
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
@@ -58,6 +62,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
 	}
@@ -109,6 +114,15 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				cursor: default;
 				opacity: 0.5;
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-drag-handle-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 	}
 
@@ -117,6 +131,8 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		this.disabled = false;
 
+		this._buttonId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 		this._keyboardActive = false;
 		this._movingElement = false;
 	}
@@ -219,7 +235,14 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
-	_onFocusOut(e) {
+	_onFocusInKeyboardButton() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onFocusOutKeyboardButton(e) {
+		this._displayKeyboardTooltip = false;
 		if (this._movingElement) {
 			this._movingElement = false;
 			e.stopPropagation();
@@ -266,17 +289,32 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	_renderKeyboardDragging() {
 		return html`
 			<button
+				aria-label="${this._defaultLabel}"
+				aria-live="assertive"
 				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusout="${this._onFocusOut}"
-				@keyup="${this._onActiveKeyboard}"
+				@focusin="${this._onFocusInKeyboardButton}"
+				@focusout="${this._onFocusOutKeyboardButton}"
+				id="${this._buttonId}"
 				@keydown="${this._onPreventDefault}"
-				aria-live="assertive"
-				aria-label="${this._defaultLabel}">
+				@keyup="${this._onActiveKeyboard}">
 				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
 				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
 			</button>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
+
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+			</ul>
+		`;
+	}
+
 }
 
 customElements.define('d2l-list-item-drag-handle', ListItemDragHandle);

package/components/list/list-item-generic-layout.js

@@ -31,6 +31,7 @@ const keyCodes = {
  * @slot content - Content of the list item, such as that in a list-item-content component.
  * @slot content-action - Action associated with the content, such as a navigation link
  * @slot actions - Other actions for the list item on the far right, such as a context menu
+ * @slot nested - Optional `d2l-list` for creating nested lists
  */
 class ListItemGenericLayout extends RtlMixin(LitElement) {
 

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

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
@@ -42,6 +43,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	constructor() {
 		super();
 		this.actionHref = null;
+		this._primaryActionId = getUniqueId();
 	}
 
 	_handleLinkClick() {
@@ -51,7 +53,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
 	}
 
 };

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

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
+import '../tooltip/tooltip.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -10,10 +11,28 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { nothing } from 'lit-html';
 import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
+let hasDisplayedKeyboardTooltip = false;
+
 const ro = new ResizeObserver(entries => {
 	entries.forEach(entry => {
 		if (!entry || !entry.target || !entry.target.resizedCallback) {
@@ -25,7 +44,7 @@ const ro = new ResizeObserver(entries => {
 
 const defaultBreakpoints = [842, 636, 580, 0];
 
-export const ListItemMixin = superclass => class extends ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass)))) {
+export const ListItemMixin = superclass => class extends LocalizeCoreElement(ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass))))) {
 
 	static get properties() {
 		return {
@@ -40,6 +59,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			 */
 			slim: { type: Boolean },
 			_breakpoint: { type: Number },
+			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
@@ -237,6 +257,15 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
 				transform: rotate(1deg);
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -249,6 +278,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		this.slim = false;
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 	}
 
 	get breakpoints() {
@@ -265,6 +295,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	connectedCallback() {
 		super.connectedCallback();
 		ro.observe(this);
+		if (this.role === 'rowgroup') {
+			addTabListener();
+		}
 	}
 
 	disconnectedCallback() {
@@ -351,6 +384,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusIn() {
 		this._focusing = true;
+		if (this.role !== 'rowgroup' || !tabPressed || hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
 	}
 
 	_onFocusInPrimaryAction() {
@@ -359,6 +395,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusOut() {
 		this._focusing = false;
+		this._displayKeyboardTooltip = false;
 	}
 
 	_onFocusOutPrimaryAction() {
@@ -398,6 +435,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
+		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
@@ -413,11 +451,11 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 					${this._renderDragHandle(this._renderOutsideControl)}
 					${this._renderDragTarget(this._renderOutsideControlAction)}
 					${this.selectable ? html`
-					<div slot="control">${ this._renderCheckbox() }</div>
+					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
 						@mouseenter="${this._onMouseEnter}"
 						@mouseleave="${this._onMouseLeave}">
-							${ this._renderCheckboxAction('') }
+							${this._renderCheckboxAction('')}
 					</div>` : nothing }
 					${primaryAction ? html`
 					<div slot="content-action"
@@ -446,6 +484,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 				<div class="d2l-list-item-active-border"></div>
 			</div>
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 
 	}
@@ -458,4 +497,16 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.enter-key')}</span> - ${this.localize('components.list-item-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.page-up-down-key')}</span> - ${this.localize('components.list-item-tooltip.page-up-down-desc')}</li>
+			</ul>
+		`;
+	}
+
 };

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

@@ -19,8 +19,9 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 
 		const separators = parent.getAttribute('separators');
 
-		this.role = parent.grid ? 'rowgroup' : 'listitem';
+		this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
 		this._separators = separators || undefined;
 		this._extendSeparators = parent.hasAttribute('extend-separators');
 	}
+
 };

package/components/menu/menu-item.js

@@ -6,6 +6,7 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used with JS handlers.
  * @slot - Default content placed inside of the component
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
 class MenuItem extends MenuItemMixin(LitElement) {
 

package/controllers/subscriber/README.md

@@ -1,6 +1,6 @@
 # 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.
+The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can set up 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
 
@@ -27,7 +27,7 @@ class CableSubscription extends LitElement {
 			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
 	}
 
-	getController(controllerId) {
+	getSubscriberController(controllerId) {
 		if (controllerId === 'sports') {
 			return this._sportsSubscribers;
 		} else if (controllerId === 'movies') {
@@ -51,7 +51,7 @@ class CableSubscription extends LitElement {
 
 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.
+The `*subscriberController`s will use a `getSubscriberController` 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.

package/controllers/subscriber/subscriberControllers.js

@@ -90,7 +90,7 @@ export class EventSubscriberController {
 	}
 
 	hostDisconnected() {
-		if (this._registry) this._registry.getController(this._controllerId).unsubscribe(this._host);
+		if (this._registry) this._registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 	}
 
 }
@@ -114,7 +114,7 @@ export class IdSubscriberController {
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
 		this._registries.forEach(registry => {
-			registry.getController(this._controllerId).unsubscribe(this._host);
+			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 		});
 	}
 
@@ -123,7 +123,7 @@ export class IdSubscriberController {
 
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._registries.forEach(registry => {
-			registry.getController(this._controllerId).unsubscribe(this._host);
+			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registry.id);
 		});
 		this._registries = new Map();
@@ -168,7 +168,7 @@ export class IdSubscriberController {
 		if (this._registries.get(registryId) === registryComponent) return;
 
 		if (registryComponent) {
-			registryComponent.getController(this._controllerId).subscribe(this._host);
+			registryComponent.getSubscriberController(this._controllerId).subscribe(this._host);
 			this._registries.set(registryId, registryComponent);
 			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(registryComponent);
 		} else {