@brightspace-ui/core 3.147.1 → 3.147.3

package/components/dropdown/dropdown-content-mixin.js

@@ -26,7 +26,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	static get properties() {
 		return {
 			/**
-			 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.
+			 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.
 			 * @type {'start'|'end'}
 			 */
 			align: {

package/components/dropdown/dropdown-popover-mixin.js

@@ -13,7 +13,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	static get properties() {
 		return {
 			/**
-			 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.
+			 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.
 			 * @type {'start'|'end'}
 			 */
 			align: { type: String },

package/components/tag-list/tag-list-item-mixin.js

@@ -1,8 +1,9 @@
 import '../button/button-icon.js';
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, nothing } from 'lit';
+import { css, html, nothing, unsafeCSS } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { getFocusRingStyles, isFocusVisibleSupported, isHasSelectorSupported } from '../../helpers/focus.js';
 import { heading4Styles, labelStyles } from '../typography/styles.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -37,6 +38,10 @@ export function resetHasDisplayedKeyboardTooltip() {
 	hasDisplayedKeyboardTooltip = false;
 }
 
+const focusSelector = isHasSelectorSupported() && isFocusVisibleSupported() ?
+	'.tag-list-item-container:has(:focus-visible)' :
+	':host(:focus-within) .tag-list-item-container';
+
 export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(superclass)) {
 
 	static get properties() {
@@ -79,10 +84,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				display: none;
 			}
 			.tag-list-item-container {
+				--d2l-focus-ring-offset: -2px;
 				align-items: center;
 				background-color: var(--d2l-color-regolith);
 				border-radius: 6px;
-				box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
+				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
 				box-sizing: border-box;
 				color: var(--d2l-color-ferrite);
 				cursor: pointer;
@@ -90,7 +96,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				line-height: 1rem;
 				max-width: 320px;
 				min-width: 0;
-				outline: none;
+				outline: 1px solid var(--d2l-color-gypsum);
+				outline-offset: -1px;
 				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
 				white-space: nowrap;
 			}
@@ -103,26 +110,13 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				padding: 0.25rem 0.6rem;
 				text-overflow: ellipsis;
 			}
-			:host(:focus-within) .tag-list-item-container,
-			:host(:focus-within:hover) .tag-list-item-container {
-				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
-			}
-			@supports selector(:has(a, b)) {
-				:host(:focus-within) .tag-list-item-container,
-				:host(:focus-within:hover) .tag-list-item-container {
-					box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
-				}
-				:host(:hover) .tag-list-item-container:has(:focus-visible),
-				.tag-list-item-container:has(:focus-visible) {
-					box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
-				}
-			}
+			${getFocusRingStyles(() => focusSelector)}
 			:host(:hover) .tag-list-item-container,
-			:host(:focus-within) .tag-list-item-container {
+			${unsafeCSS(focusSelector)} {
 				background-color: var(--d2l-color-sylvite);
 			}
-			:host(:hover) .tag-list-item-container {
-				box-shadow: inset 0 0 0 1px var(--d2l-color-mica), 0 2px 4px rgba(0, 0, 0, 0.03);
+			:host(:hover) .tag-list-item-container:not(${unsafeCSS(focusSelector)}) {
+				outline-color: var(--d2l-color-mica);
 			}
 
 			@media (prefers-reduced-motion: reduce) {
@@ -153,6 +147,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			.d2l-heading-4 {
 				margin: 0 0 0.5rem 0;
 			}
+			@media (prefers-contrast: more) {
+				:host(:hover) .tag-list-item-container {
+					outline-offset: -2px;
+					outline-width: 2px;
+				}
+			}
 		`];
 	}
 

package/custom-elements.json

@@ -2838,7 +2838,7 @@
       "attributes": [
         {
           "name": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {
@@ -2947,7 +2947,7 @@
         {
           "name": "align",
           "attribute": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {
@@ -3214,7 +3214,7 @@
       "attributes": [
         {
           "name": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {
@@ -3323,7 +3323,7 @@
         {
           "name": "align",
           "attribute": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {
@@ -3590,7 +3590,7 @@
       "attributes": [
         {
           "name": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {
@@ -3699,7 +3699,7 @@
         {
           "name": "align",
           "attribute": "align",
-          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.",
+          "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.",
           "type": "'start'|'end'"
         },
         {

package/helpers/focus.js

@@ -226,3 +226,22 @@ export function isFocusVisibleSupported() {
 
 	return _isFocusVisibleSupported;
 }
+
+let _isHasSelectorSupported;
+
+export function isHasSelectorSupported() {
+	if (_isHasSelectorSupported === undefined) {
+		const style = document.createElement('style');
+		try {
+			document.head.appendChild(style);
+			style.sheet.insertRule(':has(a) { color: inherit; }');
+			_isHasSelectorSupported = true;
+		} catch {
+			_isHasSelectorSupported = false;
+		} finally {
+			style.remove();
+		}
+	}
+
+	return _isHasSelectorSupported;
+}

package/package.json

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