@brightspace-ui/core 3.262.8 → 3.263.0

package/components/button/button-move.js

@@ -152,7 +152,7 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 				.down-layer {
 					height: 1.2rem;
 					position: relative;
-					width: 1.3rem;
+					width: 1.25rem;
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */
@@ -175,21 +175,23 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 					align-items: center;
 					flex-direction: row;
 					height: 1.2rem;
-					justify-content: center;
-					width: calc(1.3rem * 2);
+					width: calc(calc(1.2rem + 1px) * 2);
 				}
 
 				:host([side-to-side]) .layer {
 					flex-direction: row;
+					gap: 2px;
 					height: 1.2rem;
 					inset-inline-start: 0;
 					top: 0;
-					width: calc(1.3rem * 2);
+					width: calc(calc(1.2rem + 1px) * 2);
 				}
 
 				:host([side-to-side]) d2l-icon {
+					height: 1.2rem;
 					/* Arrows need to be rotated in opposite direction for RTL */
 					transform: rotate(calc(-90deg * var(--d2l-length-factor)));
+					width: 1.2rem;
 				}
 			`
 		];

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

@@ -1,6 +1,16 @@
 export function _isValidCssSelector(selector) {
 	const partIsValid = (part) => {
-		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
+		const notRegex = /:not\((.+?)\)/;
+		const notMatches = part.match(notRegex);
+		if (notMatches) {
+			return [
+				part.substring(0, notMatches.index),
+				notMatches[1],
+				part.substring(notMatches.index + notMatches[1].length + 6)
+			].every((part, i) => (i !== 1 && part === '') || partIsValid(part));
+		}
+
+		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.8",
+  "version": "3.263.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",