@brightspace-ui/core 1.242.0 → 2.0.0

package/components/button/button-mixin.js

@@ -66,8 +66,6 @@ export const ButtonMixin = superclass => class extends FocusMixin(FocusVisiblePo
 		};
 	}
 
-	static focusElementSelector = 'button';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -100,6 +98,10 @@ export const ButtonMixin = superclass => class extends FocusMixin(FocusVisiblePo
 		this.requestUpdate('disabledTooltip', oldValue);
 	}
 
+	static get focusElementSelector() {
+		return 'button';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('click', this._handleClick, true);

package/components/card/card.js

@@ -235,8 +235,6 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		`];
 	}
 
-	static focusElementSelector = 'a';
-
 	constructor() {
 		super();
 		this.alignCenter = false;
@@ -251,6 +249,10 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		this._onFooterResize = this._onFooterResize.bind(this);
 	}
 
+	static get focusElementSelector() {
+		return 'a';
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		const badgeObserver = new ResizeObserver(this._onBadgeResize);

package/components/filter/filter.js

@@ -137,8 +137,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`];
 	}
 
-	static focusElementSelector = 'd2l-dropdown-button-subtle';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -155,14 +153,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		);
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this._activeFiltersSubscribers.hostConnected();
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._activeFiltersSubscribers.hostDisconnected();
+	static get focusElementSelector() {
+		return 'd2l-dropdown-button-subtle';
 	}
 
 	firstUpdated(changedProperties) {

package/components/focus-trap/focus-trap.js

@@ -31,14 +31,16 @@ class FocusTrap extends FocusMixin(LitElement) {
 		`;
 	}
 
-	static focusElementSelector = '.d2l-focus-trap-start';
-
 	constructor() {
 		super();
 		this.trap = false;
 		this._handleBodyFocus = this._handleBodyFocus.bind(this);
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-focus-trap-start';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		document.body.addEventListener('focus', this._handleBodyFocus, true);

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

@@ -174,7 +174,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (this._contextObserverController) this._contextObserverController.hostConnected();
 
 		if (!this._contentObserver || this.noDeferredRendering) return;
 
@@ -188,7 +187,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this._contextObserverController) this._contextObserverController.hostDisconnected();
 		if (this._contentObserver) this._contentObserver.disconnect();
 	}
 

package/components/inputs/input-checkbox.js

@@ -164,8 +164,6 @@ class InputCheckbox extends FocusMixin(SkeletonMixin(RtlMixin(LitElement))) {
 		];
 	}
 
-	static focusElementSelector = 'input.d2l-input-checkbox';
-
 	constructor() {
 		super();
 		this.checked = false;
@@ -177,6 +175,10 @@ class InputCheckbox extends FocusMixin(SkeletonMixin(RtlMixin(LitElement))) {
 		this._descriptionId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return 'input.d2l-input-checkbox';
+	}
+
 	render() {
 		const tabindex = this.notTabbable ? -1 : undefined;
 		const textClasses = {

package/components/inputs/input-date-range.js

@@ -129,8 +129,6 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		`];
 	}
 
-	static focusElementSelector = 'd2l-input-date';
-
 	constructor() {
 		super();
 
@@ -147,6 +145,10 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		this._endInputId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-date';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.badInput) {

package/components/inputs/input-date-time-range.js

@@ -172,8 +172,6 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 		`];
 	}
 
-	static focusElementSelector = 'd2l-input-date-time';
-
 	constructor() {
 		super();
 
@@ -193,6 +191,10 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 		this._slotOccupied = false;
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-date-time';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.badInput) {

package/components/inputs/input-date-time.js

@@ -113,8 +113,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 		`];
 	}
 
-	static focusElementSelector = 'd2l-input-date';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -179,6 +177,10 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 		this.requestUpdate('value', oldValue);
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-date';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.rangeOverflow || this.validity.rangeUnderflow) {

package/components/inputs/input-date.js

@@ -138,8 +138,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		`];
 	}
 
-	static focusElementSelector = 'd2l-input-text';
-
 	constructor() {
 		super();
 
@@ -170,6 +168,10 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._dateTimeDescriptor = getDateTimeDescriptorShared();
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-text';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.rangeOverflow || this.validity.rangeUnderflow) {

package/components/inputs/input-number.js

@@ -192,8 +192,6 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		];
 	}
 
-	static focusElementSelector = 'd2l-input-text';
-
 	constructor() {
 		super();
 		this.autofocus = false;
@@ -288,6 +286,10 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		this._updateFormattedValue();
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-text';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.rangeOverflow || this.validity.rangeUnderflow) {

package/components/inputs/input-percent.js

@@ -86,8 +86,6 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 		];
 	}
 
-	static focusElementSelector = 'd2l-input-number';
-
 	constructor() {
 		super();
 		this.autofocus = false;
@@ -105,6 +103,10 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 		this.requestUpdate('value', oldValue);
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-number';
+	}
+
 	render() {
 		return html`
 			<d2l-input-number

package/components/inputs/input-search.js

@@ -74,8 +74,6 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 		];
 	}
 
-	static focusElementSelector = 'd2l-input-text';
-
 	constructor() {
 		super();
 		this._lastSearchValue = '';
@@ -88,6 +86,10 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 	get lastSearchValue() { return this._lastSearchValue; }
 	set lastSearchValue(val) {}
 
+	static get focusElementSelector() {
+		return 'd2l-input-text';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.value !== undefined && this.value !== null) {

package/components/inputs/input-text.js

@@ -235,8 +235,6 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		];
 	}
 
-	static focusElementSelector = '.d2l-input';
-
 	constructor() {
 		super();
 		this.autofocus = false;
@@ -272,6 +270,10 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		this._setValue(val, true);
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-input';
+	}
+
 	/** @ignore */
 	get selectionEnd() {
 		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');

package/components/inputs/input-textarea.js

@@ -150,8 +150,6 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		`];
 	}
 
-	static focusElementSelector = 'textarea';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -165,6 +163,10 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		this._textareaId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return 'textarea';
+	}
+
 	/** @ignore */
 	get textarea() {
 		// temporary until consumers are updated

package/components/inputs/input-time-range.js

@@ -137,8 +137,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		`];
 	}
 
-	static focusElementSelector = 'd2l-input-time';
-
 	constructor() {
 		super();
 
@@ -178,6 +176,10 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		this.requestUpdate('startValue', oldValue);
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-time';
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.badInput) {

package/components/inputs/input-time.js

@@ -215,8 +215,6 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		];
 	}
 
-	static focusElementSelector = '.d2l-input';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -254,6 +252,10 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this.requestUpdate('value', oldValue);
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-input';
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._hiddenContentResizeObserver) this._hiddenContentResizeObserver.disconnect();

package/components/link/link.js

@@ -97,8 +97,6 @@ class Link extends FocusMixin(LitElement) {
 		];
 	}
 
-	static focusElementSelector = '.d2l-link';
-
 	constructor() {
 		super();
 		this.download = false;
@@ -106,6 +104,10 @@ class Link extends FocusMixin(LitElement) {
 		this.small = false;
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
 	render() {
 		const linkClasses = {
 			'd2l-link': true,

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

@@ -679,8 +679,13 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const invalidDropTarget = dragState.dragTargets.find(dragTarget => {
 			return isComposedAncestor(dragTarget, this);
 		});
+
 		if (invalidDropTarget) return;
 
+		// assert that both the source and target are from the same list - may allow this in the future
+		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0]._getRootList();
+		if (this._getRootList() !== targetRoot) return;
+
 		dragState.addDropTarget(this);
 		this._draggingOver = true;
 		e.dataTransfer.dropEffect = 'move';

package/components/selection/selection-action-dropdown.js

@@ -28,7 +28,9 @@ class ActionDropdown extends FocusMixin(LocalizeCoreElement(SelectionActionMixin
 		return dropdownOpenerStyles;
 	}
 
-	static focusElementSelector = 'd2l-button-subtle';
+	static get focusElementSelector() {
+		return 'd2l-button-subtle';
+	}
 
 	render() {
 		return html`

package/components/selection/selection-action.js

@@ -40,7 +40,9 @@ class Action extends FocusMixin(LocalizeCoreElement(SelectionActionMixin(ButtonM
 		`;
 	}
 
-	static focusElementSelector = 'd2l-button-subtle';
+	static get focusElementSelector() {
+		return 'd2l-button-subtle';
+	}
 
 	connectedCallback() {
 		super.connectedCallback();

package/components/selection/selection-select-all-pages.js

@@ -22,7 +22,9 @@ class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMix
 		`;
 	}
 
-	static focusElementSelector = 'd2l-button-subtle';
+	static get focusElementSelector() {
+		return 'd2l-button-subtle';
+	}
 
 	render() {
 		if (!this._provider) return;

package/components/selection/selection-select-all.js

@@ -34,13 +34,15 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 		`;
 	}
 
-	static focusElementSelector = 'd2l-input-checkbox';
-
 	constructor() {
 		super();
 		this.disabled = false;
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-input-checkbox';
+	}
+
 	render() {
 		if (this._provider && this._provider.selectionSingle) return;
 

package/components/switch/switch-mixin.js

@@ -166,8 +166,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		`;
 	}
 
-	static focusElementSelector = '.d2l-switch-container';
-
 	constructor() {
 		super();
 		this.disabled = false;
@@ -178,6 +176,10 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		this._textId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-switch-container';
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		if (!this.text || this.text.length === 0) {

package/components/table/table-col-sort-button.js

@@ -58,14 +58,16 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 		`;
 	}
 
-	static focusElementSelector = 'button';
-
 	constructor() {
 		super();
 		this.nosort = false;
 		this.desc = false;
 	}
 
+	static get focusElementSelector() {
+		return 'button';
+	}
+
 	render() {
 		const iconView = !this.nosort ?
 			html`<d2l-icon icon="${this.desc ? 'tier1:arrow-toggle-down' : 'tier1:arrow-toggle-up'}"></d2l-icon>` :

package/controllers/attributeObserver/htmlAttributeObserverController.js

@@ -14,6 +14,7 @@ export class HtmlAttributeObserverController {
 		);
 
 		this._host = host;
+		host.addController(this);
 		this._attributes = attributes;
 		this.values = new Map();
 	}

package/controllers/subscriber/README.md

@@ -136,24 +136,7 @@ An example of what this could look like altogether:
 <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);
-	}
-```
-
+As of the Lit 2 upgrade, the lifecycle methods `hostConnected`, `hostDisconnected`, and `hostUpdated` will be called automatically.
 ## Available Callbacks
 
 ### SubscriberRegistryController

package/controllers/subscriber/subscriberControllers.js

@@ -4,6 +4,7 @@ export class SubscriberRegistryController {
 
 	constructor(host, callbacks, options) {
 		this._host = host;
+		host.addController(this);
 		this._callbacks = callbacks || {};
 		this._eventName = options && options.eventName;
 		this._subscribers = new Map();
@@ -60,6 +61,7 @@ export class EventSubscriberController {
 
 	constructor(host, callbacks, options) {
 		this._host = host;
+		host.addController(this);
 		this._callbacks = callbacks || {};
 		this._eventName = options && options.eventName;
 		this._controllerId = options && options.controllerId;
@@ -99,8 +101,10 @@ export class IdSubscriberController {
 
 	constructor(host, callbacks, options) {
 		this._host = host;
+		host.addController(this);
 		this._callbacks = callbacks || {};
 		this._idPropertyName = options && options.idPropertyName;
+		this._idPropertyValue = this._idPropertyName ? this._host[this._idPropertyName] : undefined;
 		this._controllerId = options && options.controllerId;
 		this._registries = new Map();
 		this._timeouts = new Set();
@@ -118,8 +122,11 @@ export class IdSubscriberController {
 		});
 	}
 
-	hostUpdated(changedProperties) {
-		if (!changedProperties.has(this._idPropertyName)) return;
+	hostUpdated() {
+		const propertyValue = this._host[this._idPropertyName];
+		if (propertyValue === this._idPropertyValue) return;
+
+		this._idPropertyValue = propertyValue;
 
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._registries.forEach(registry => {

package/custom-elements.json

@@ -419,11 +419,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"button\""
-        },
         {
           "name": "visibleOnAncestor",
           "type": "boolean",
@@ -518,11 +513,6 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"button\""
         }
       ],
       "slots": [
@@ -586,11 +576,6 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"button\""
         }
       ],
       "slots": [
@@ -1005,11 +990,6 @@
           "description": "Subtle aesthetic on non-white backgrounds",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"a\""
         }
       ],
       "slots": [
@@ -3168,11 +3148,6 @@
           "description": "Indicates if the filter is open",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-dropdown-button-subtle\""
         }
       ],
       "events": [
@@ -3215,11 +3190,6 @@
           "description": "Whether the component should trap user focus.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-focus-trap-start\""
         }
       ],
       "events": [
@@ -3800,11 +3770,6 @@
           "type": "string",
           "default": "\"on\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"input.d2l-input-checkbox\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4029,11 +3994,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-date\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4331,11 +4291,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-date-time\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4506,11 +4461,6 @@
           "type": "string",
           "default": "\"startOfDay\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-date\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -4677,11 +4627,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-text\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5021,11 +4966,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-text\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5224,11 +5164,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-number\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5366,11 +5301,6 @@
           "description": "Value of the input",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-text\""
         }
       ],
       "events": [
@@ -5710,11 +5640,6 @@
           "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-input\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5954,11 +5879,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"textarea\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -6208,11 +6128,6 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-time\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -6373,11 +6288,6 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-input\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -6494,11 +6404,6 @@
           "description": "Whether to apply the \"small\" link style",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-link\""
         }
       ],
       "slots": [
@@ -8624,11 +8529,6 @@
           "description": "REQUIRED: Text for the dropdown opener button",
           "type": "string"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-button-subtle\""
-        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -8862,11 +8762,6 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-button-subtle\""
         }
       ],
       "events": [
@@ -8986,11 +8881,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-button-subtle\""
-        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -9033,11 +8923,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"d2l-input-checkbox\""
-        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -9417,11 +9302,11 @@
       "properties": [
         {
           "name": "offIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "onIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "text",
@@ -9460,11 +9345,6 @@
           "description": "Determines where text should be positioned relative to the switch.",
           "type": "'start'|'end'|'hidden'",
           "default": "\"end\""
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-switch-container\""
         }
       ],
       "events": [
@@ -9511,11 +9391,11 @@
       "properties": [
         {
           "name": "offIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "onIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "text",
@@ -9554,11 +9434,6 @@
           "description": "Determines where text should be positioned relative to the switch.",
           "type": "'start'|'end'|'hidden'",
           "default": "\"end\""
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\".d2l-switch-container\""
         }
       ],
       "events": [
@@ -9652,11 +9527,6 @@
           "description": "Whether sort direction is descending",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "focusElementSelector",
-          "type": "string",
-          "default": "\"button\""
         }
       ],
       "slots": [

package/mixins/focus-mixin.js

@@ -2,13 +2,15 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 export const FocusMixin = dedupeMixin(superclass => class extends superclass {
 
-	static focusElementSelector = null;
-
 	constructor() {
 		super();
 		this._focusOnFirstRender = false;
 	}
 
+	static get focusElementSelector() {
+		return null;
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		if (this._focusOnFirstRender) {

package/mixins/focus-mixin.md

@@ -14,7 +14,8 @@ import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
 class MyComponent extends FocusMixin(LitElement) {
   
   // delegate focus to the underlying input
-  static focusElementSelector = 'input';
+  static get focusElementSelector() {
+		return 'input';
 
   render() {
 	  return html`<input type="text">`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.242.0",
+  "version": "2.0.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,7 +45,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.4",
-    "@open-wc/testing": "^2",
+    "@open-wc/testing": "^3",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",
     "@web/test-runner-playwright": "^0.8",
@@ -70,8 +70,8 @@
     "focus-visible": "^5",
     "ifrau": "^0.39",
     "intl-messageformat": "^7",
-    "lit-element": "^2",
-    "lit-html": "^1",
+    "lit-element": "^3",
+    "lit-html": "^2",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }