@brightspace-ui/core 3.312.0 → 3.313.0

package/components/backdrop/backdrop.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
-import { cssEscape, getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
+import { getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
@@ -103,7 +103,7 @@ class Backdrop extends LitElement {
 
 			if (this._state === null) {
 				preventBodyScroll(this);
-				const target = this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`);
+				const target = this.parentNode.querySelector(`#${CSS.escape(this.forTarget)}`);
 				// aria-hidden elements cannot have focus, so wait for focus to be within target
 				waitForFocusWithinTarget(target, Date.now() + 200).then(() => {
 					if (!this.shown || this._state !== 'showing') return;

package/components/form/form-helper.js

@@ -1,6 +1,4 @@
 
-import { cssEscape } from '../../helpers/dom.js';
-
 const formElements = {
 	button: true,
 	fieldset: true,
@@ -67,7 +65,7 @@ const _tryGetLabelElement = ele => {
 	}
 	if (ele.id) {
 		const rootNode = ele.getRootNode();
-		return rootNode.querySelector(`label[for="${cssEscape(ele.id)}"]`);
+		return rootNode.querySelector(`label[for="${CSS.escape(ele.id)}"]`);
 	}
 	return null;
 };

package/components/selection/selection-observer-mixin.js

@@ -1,4 +1,3 @@
-import { cssEscape } from '../../helpers/dom.js';
 import { SelectionInfo } from './selection-mixin.js';
 
 export const SelectionObserverMixin = superclass => class extends superclass {
@@ -103,7 +102,7 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 	}
 
 	_updateProvider() {
-		const selectionComponent = this.selectionFor ? this.getRootNode().querySelector(`#${cssEscape(this.selectionFor)}`) : undefined;
+		const selectionComponent = this.selectionFor ? this.getRootNode().querySelector(`#${CSS.escape(this.selectionFor)}`) : undefined;
 		if (this._provider === selectionComponent) return;
 
 		this._disconnectProvider();

package/components/tabs/tabs.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './tab-internal.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
-import { cssEscape, findComposedAncestor, getOffsetParent, isVisible } from '../../helpers/dom.js';
+import { findComposedAncestor, getOffsetParent, isVisible } from '../../helpers/dom.js';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
@@ -455,7 +455,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_animateTabAdditionDefaultSlotBehavior(tabInfo) {
 		const tab = this.shadowRoot
-			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${CSS.escape(tabInfo.id)}"]`);
 		if (!tab) Promise.resolve();
 
 		return new Promise((resolve) => {
@@ -487,7 +487,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	// remove with GAUD-8299-core-tabs-use-new-structure flag clean up
 	_animateTabRemovalDefaultSlotBehavior(tabInfo) {
 		const tab = this.shadowRoot &&
-			this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+			this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${CSS.escape(tabInfo.id)}"]`);
 		if (!tab) Promise.resolve();
 
 		return new Promise((resolve) => {

package/components/tooltip/tooltip.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { cssEscape, elemIdListAdd, elemIdListRemove, isComposedAncestor } from '../../helpers/dom.js';
+import { elemIdListAdd, elemIdListRemove, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, isFocusable } from '../../helpers/focus.js';
 import { interactiveElements, interactiveRoles, isInteractive } from '../../helpers/interactive.js';
 import { announce } from '../../helpers/announce.js';
@@ -398,7 +398,7 @@ class Tooltip extends PopoverMixin(LitElement) {
 
 		let target;
 		if (this.for) {
-			const targetSelector = `#${cssEscape(this.for)}`;
+			const targetSelector = `#${CSS.escape(this.for)}`;
 			target = ownerRoot.querySelector(targetSelector);
 			target = (target || ownerRoot?.host?.querySelector(targetSelector)) ?? null;
 		} else {

package/controllers/subscriber/subscriberControllers.js

@@ -1,5 +1,3 @@
-import { cssEscape } from '../../helpers/dom.js';
-
 class BaseController {
 	constructor(host, name, options = {}) {
 		if (!host || !name) throw new TypeError('SubscriberController: missing host or subscription name');
@@ -211,7 +209,7 @@ export class IdSubscriberController extends BaseSubscriber {
 	}
 
 	_updateRegistry(registryId) {
-		const registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`) || undefined;
+		const registryComponent = this._host.getRootNode().querySelector(`#${CSS.escape(registryId)}`) || undefined;
 
 		if (this._registries.get(registryId) === registryComponent) return registryComponent;
 

package/helpers/dom.js

@@ -1,14 +1,5 @@
 import { getFlag } from './flags.js';
 
-// needed for legacy-Edge, after it's removed use CSS.escape directly
-export function cssEscape(val) {
-	if (window.CSS && window.CSS.escape) {
-		return window.CSS.escape(val);
-	}
-	val = val.replace(/\$/g, '\\$');
-	return val;
-}
-
 export function elemIdListAdd(elem, attrName, value) {
 
 	if (elem === undefined || elem === null || !elem.getAttribute || !elem.setAttribute) {

package/mixins/labelled/labelled-mixin.js

@@ -1,5 +1,4 @@
 
-import { cssEscape } from '../../helpers/dom.js';
 import { PropertyRequiredMixin } from '../property-required/property-required-mixin.js';
 
 const getCommonAncestor = (elem1, elem2) => {
@@ -117,7 +116,7 @@ export const LabelledMixin = superclass => class extends PropertyRequiredMixin(s
 		if (!this.labelledBy) {
 			this._updateLabelElem(null);
 		} else {
-			const labelElem = await waitForElement(this.getRootNode(), `#${cssEscape(this.labelledBy)}`, 3000);
+			const labelElem = await waitForElement(this.getRootNode(), `#${CSS.escape(this.labelledBy)}`, 3000);
 			if (!labelElem) {
 				this._throwError(
 					new Error(`LabelledMixin: "${this.tagName.toLowerCase()}" is labelled-by="${this.labelledBy}", but no such element exists`)
@@ -166,7 +165,7 @@ export const LabelledMixin = superclass => class extends PropertyRequiredMixin(s
 		}
 
 		this._labelObserver = new MutationObserver(() => {
-			const newElem = this.getRootNode().querySelector(`#${cssEscape(this.labelledBy)}`);
+			const newElem = this.getRootNode().querySelector(`#${CSS.escape(this.labelledBy)}`);
 			if (isCustomElement(newElem)) {
 				requestAnimationFrame(() => {
 					// element often sets its label in its own updated(), so we need to wait

package/package.json

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