@brightspace-ui/core 3.262.9 → 3.263.1

package/components/backdrop/backdrop.js

@@ -182,7 +182,7 @@ function hideAccessible(target) {
 			}
 			child.setAttribute('tabindex', '-1');
 
-			if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+			if (getFlag('GAUD-9398-make-backdrop-inert', true)) {
 				if (child.hasAttribute('inert')) {
 					child.setAttribute(BACKDROP_INERT, '');
 				}
@@ -222,7 +222,7 @@ function showAccessible(elems) {
 		} else {
 			elem.removeAttribute('tabindex');
 		}
-		if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+		if (getFlag('GAUD-9398-make-backdrop-inert', true)) {
 			if (elem.hasAttribute(BACKDROP_INERT)) {
 				elem.removeAttribute(BACKDROP_INERT);
 			} else {

package/components/inputs/input-label-styles.js

@@ -1,4 +1,5 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
 registerSemanticVariableForSvgImageUrl(
@@ -8,29 +9,55 @@ registerSemanticVariableForSvgImageUrl(
 	</svg>`
 );
 
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export function _generateInputLabelStyles(selector) {
+	if (!selector || !_isValidCssSelector(selector.trim())) return;
+	const trimmedSelector = selector.trim().split(',').map(s => s.trim()).join(',\n');
+	const cssSelector = unsafeCSS(trimmedSelector);
+
+	return css`
+		${cssSelector} {
+			cursor: default;
+			display: block;
+			font-size: 0.7rem;
+			font-weight: 700;
+			letter-spacing: 0.2px;
+			line-height: 0.9rem;
+			margin-block: 0 0.4rem;
+			margin-inline: 0;
+			padding: 0;
+		}
+	`;
+}
+
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export function _generateInputLabelRequiredStyles(selector) {
+	if (!selector || !_isValidCssSelector(selector.trim())) return;
+	const selectorList = selector.trim().split(',');
+	const joinedSelector = selectorList.map(s => `${s.trim()}::after`).join(',\n');
+	const cssSelector = unsafeCSS(joinedSelector);
+
+	return css`
+		${cssSelector} {
+			background-image: var(--d2l-input-label-required-image);
+			bottom: 0.25rem;
+			content: "";
+			display: inline-block;
+			height: 0.3rem;
+			inset-inline-start: 0.15rem;
+			position: relative;
+			width: 0.25rem;
+		}
+	`;
+}
+
 export const inputLabelStyles = css`
-	.d2l-input-label {
-		cursor: default;
-		display: block;
-		font-size: 0.7rem;
-		font-weight: 700;
-		letter-spacing: 0.2px;
-		line-height: 0.9rem;
-		margin-block: 0 0.4rem;
-		margin-inline: 0;
-		padding: 0;
-	}
-	:host([required]) .d2l-input-label::after,
-	.d2l-input-label-required::after {
-		background-image: var(--d2l-input-label-required-image);
-		bottom: 0.25rem;
-		content: "";
-		display: inline-block;
-		height: 0.3rem;
-		inset-inline-start: 0.15rem;
-		position: relative;
-		width: 0.25rem;
-	}
+	${_generateInputLabelStyles('.d2l-input-label')}
+	${_generateInputLabelRequiredStyles(':host([required]) .d2l-input-label,.d2l-input-label-required')}
 	:host([skeleton]) .d2l-input-label.d2l-skeletize::before {
 		bottom: 0.25rem;
 		top: 0.15rem;

package/helpers/internal/css.js

@@ -10,7 +10,7 @@ export function _isValidCssSelector(selector) {
 			].every((part, i) => (i !== 1 && part === '') || partIsValid(part));
 		}
 
-		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
+		const re = /([:a-zA-Z0-9-_ >.#]+)(\(?\[[a-zA-Z0-9-_="]+\]\)?)?([a-zA-Z0-9-_ >.#]+)?/g;
 		if (part === ':host') return true;
 		const match = part.match(re);
 		const isValid = !!match && match.length === 1 && match[0].length === part.length;

package/package.json

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