@brightspace-ui/core 3.160.2 → 3.161.0

package/components/link/link-styles.js

@@ -0,0 +1,51 @@
+import '../colors/colors.js';
+import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
+
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateLinkStyles = (selector, includeSkeleton = true) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	const selectorCSS = unsafeCSS(selector);
+	const skeletonStyles = includeSkeleton ? css`
+		:host([skeleton])  ${selectorCSS}.d2l-skeletize::before {
+			bottom: 0.2rem;
+			top: 0.2rem;
+		}
+		:host([skeleton]) ${selectorCSS}.d2l-link-small.d2l-skeletize::before {
+			bottom: 0.15rem;
+			top: 0.15rem;
+		}
+	` : unsafeCSS('');
+	return css`
+		${selectorCSS}, ${selectorCSS}:visited, ${selectorCSS}:active, ${selectorCSS}:link {
+			--d2l-focus-ring-offset: 1px;
+			color: var(--d2l-color-celestine);
+			cursor: pointer;
+			outline-style: none;
+			text-decoration: none;
+		}
+		${selectorCSS}:hover {
+			color: var(--d2l-color-celestine-minus-1);
+			text-decoration: underline;
+		}
+		${getFocusRingStyles(selector, { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
+		${selectorCSS}.d2l-link-main {
+			font-weight: 700;
+		}
+		${selectorCSS}.d2l-link-small {
+			font-size: 0.7rem;
+			letter-spacing: 0.01rem;
+			line-height: 1.05rem;
+		}
+		@media print {
+			${selectorCSS}, ${selectorCSS}:visited, ${selectorCSS}:active, ${selectorCSS}:link {
+				color: var(--d2l-color-ferrite);
+			}
+		}
+		${skeletonStyles}
+	`;
+};

package/components/link/link.js

@@ -2,10 +2,10 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
+import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
-import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -13,41 +13,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
-export const linkStyles = css`
-	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
-		--d2l-focus-ring-offset: 1px;
-		color: var(--d2l-color-celestine);
-		cursor: pointer;
-		outline-style: none;
-		text-decoration: none;
-	}
-	:host([skeleton]) .d2l-link.d2l-skeletize::before {
-		bottom: 0.2rem;
-		top: 0.2rem;
-	}
-	.d2l-link:hover {
-		color: var(--d2l-color-celestine-minus-1);
-		text-decoration: underline;
-	}
-	${getFocusRingStyles('.d2l-link', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
-	.d2l-link.d2l-link-main {
-		font-weight: 700;
-	}
-	.d2l-link.d2l-link-small {
-		font-size: 0.7rem;
-		letter-spacing: 0.01rem;
-		line-height: 1.05rem;
-	}
-	:host([skeleton]) .d2l-link.d2l-link-small.d2l-skeletize::before {
-		bottom: 0.15rem;
-		top: 0.15rem;
-	}
-	@media print {
-		.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
-			color: var(--d2l-color-ferrite);
-		}
-	}
-`;
+export const linkStyles = _generateLinkStyles('.d2l-link', true);
 
 /**
  * This component can be used just like the native anchor tag.

package/components/typography/styles.js

@@ -1,24 +1,8 @@
 import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
 import { svgToCSS } from '../../helpers/svg-to-css.js';
 
-export const _isValidCssSelector = (selector) => {
-	const 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;
-		if (!isValid) {
-			console.warn(`Invalid CSS selector: "${part}"`);
-		}
-		return isValid;
-	};
-
-	const parts = selector.split(',');
-	const allValid = parts.every(part => partIsValid(part));
-	return allValid;
-};
-
 /**
  * A private helper method that should not be used by general consumers
  */

package/helpers/focus.js

@@ -15,6 +15,7 @@ const focusableElements = {
 	textarea: true
 };
 
+// The default here cannot be changed, as BSI relies on it being true. Do not change the default without adding a way for BSI to override it.
 const focusVisibleSupportChangesEnabled = getFlag('focus-visible-support-changes-for-focus-rings', true);
 
 export function getComposedActiveElement() {

package/helpers/internal/css.js

@@ -0,0 +1,16 @@
+export function _isValidCssSelector(selector) {
+	const 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;
+		if (!isValid) {
+			console.warn(`Invalid CSS selector: "${part}"`);
+		}
+		return isValid;
+	};
+
+	const parts = selector.split(',');
+	const allValid = parts.every(part => partIsValid(part));
+	return allValid;
+}

package/package.json

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