@brightspace-ui/core 2.82.0 → 2.82.2

package/components/dropdown/demo/dropdown-menu.html

@@ -90,6 +90,7 @@
 									<d2l-menu-item text="Telescopes"></d2l-menu-item>
 								</d2l-menu>
 							</d2l-menu-item>
+							<d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item>
 							<d2l-menu-item text="The Universe"></d2l-menu-item>
 						</d2l-menu>
 					</d2l-dropdown-menu>

package/components/html-block/html-block.js

@@ -1,9 +1,11 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
+
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
@@ -99,7 +101,7 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a:focus {
+	a:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine, #006fbf);
 		outline-offset: 1px;

package/components/link/link.js

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const linkStyles = css`
@@ -19,7 +20,7 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link:focus {
+	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine);
 		outline-offset: 1px;

package/components/link/link.scss

@@ -14,12 +14,17 @@
 		color: $d2l-color-celestine-minus-1;
 		text-decoration: underline;
 	}
-	&:focus,
-	&.d2l-link-focus {
+	&:focus-visible {
 		outline: 2px solid $d2l-color-celestine;
 		outline-offset: 1px;
 		text-decoration: underline;
 	}
+	.d2l-focus-visible-not-supported &:focus {
+		outline: 2px solid $d2l-color-celestine;
+		outline-offset: 1px;
+		text-decoration: underline;
+	}
+
 	&[main] {
 		font-weight: 700;
 	}

package/components/menu/demo/checkbox-menu.html

@@ -18,7 +18,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-menu label="Checkbox Menu" style="max-width: 400px;">
-						<d2l-menu-item-checkbox text="Checkbox 1 with a very long title that will be cut off" value="1"></d2l-menu-item-checkbox>
+						<d2l-menu-item-checkbox text="Checkbox 1 with an extremely long title that will only be cut off with an ellipsis after two lines" value="1"></d2l-menu-item-checkbox>
 						<d2l-menu-item-checkbox text="Checkbox 2" value="2"></d2l-menu-item-checkbox>
 						<d2l-menu-item-checkbox text="Checkbox 3" value="3"></d2l-menu-item-checkbox>
 					</d2l-menu>

package/components/menu/demo/menu.html

@@ -29,6 +29,7 @@
 						<d2l-menu-item text="The Solar System"></d2l-menu-item>
 						<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
 						<d2l-menu-item disabled text="The Night Sky"></d2l-menu-item>
+						<d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item>
 						<d2l-menu-item text="The Universe"></d2l-menu-item>
 					</d2l-menu>
 				</template>
@@ -46,6 +47,7 @@
 						<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
 						<d2l-menu-item text="The Night Sky"></d2l-menu-item>
 						<d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="The Universe (link)"></d2l-menu-item-link>
+						<d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item-link>
 					</d2l-menu>
 				</template>
 			</d2l-demo-snippet>
@@ -111,7 +113,7 @@
 								</d2l-menu-item>
 							</d2l-menu>
 						</d2l-menu-item>
-						<d2l-menu-item text="The Night Sky">
+						<d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon">
 							<d2l-menu>
 								<d2l-menu-item text="Constellations"></d2l-menu-item>
 								<d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>

package/components/menu/demo/radio-menu.html

@@ -18,7 +18,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
-						<d2l-menu-item-radio text="Radio Option 1 with a very long title that will be cut off" value="1"></d2l-menu-item-radio>
+						<d2l-menu-item-radio text="Radio Option 1 with an extremely long title that will only be cut off with an ellipsis after two lines" value="1"></d2l-menu-item-radio>
 						<d2l-menu-item-radio text="Radio Option 2" value="2"></d2l-menu-item-radio>
 						<d2l-menu-item-radio text="Radio Option 3" value="3"></d2l-menu-item-radio>
 					</d2l-menu>

package/components/menu/menu-item-link.js

@@ -48,8 +48,6 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 					overflow-x: hidden;
 					padding: 0.75rem 1rem;
 					text-decoration: none;
-					text-overflow: ellipsis;
-					white-space: nowrap;
 				}
 			`
 		];

package/components/menu/menu-item-styles.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const menuItemStyles = css`
 	:host {
@@ -20,9 +21,8 @@ export const menuItemStyles = css`
 		color: var(--d2l-menu-foreground-color-hover);
 	}
 
-	/** separated from hover selectors because Safari <15.4 is having trouble parsing these */
-	:host(:focus-visible),
-	:host([first]:focus-visible) {
+	:host(:${unsafeCSS(getFocusPseudoClass())}),
+	:host([first]:${unsafeCSS(getFocusPseudoClass())}) {
 		border-radius: 6px;
 		border-top-color: transparent;
 		color: var(--d2l-menu-foreground-color-hover);
@@ -36,8 +36,7 @@ export const menuItemStyles = css`
 		opacity: 0.75;
 	}
 
-	/** separated because Safari <15.4 is having trouble parsing these */
-	:host([disabled]:focus-visible) {
+	:host([disabled]:${unsafeCSS(getFocusPseudoClass())}) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -51,12 +50,15 @@ export const menuItemStyles = css`
 	}
 
 	.d2l-menu-item-text {
+		-webkit-box-orient: vertical;
+		display: -webkit-box;
 		flex: auto;
+		-webkit-line-clamp: 2;
 		line-height: 1rem;
+		overflow-wrap: anywhere;
 		overflow-x: hidden;
 		overflow-y: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		white-space: normal;
 	}
 
 	.d2l-menu-item-supporting {

package/helpers/README.md

@@ -129,6 +129,9 @@ getComposedActiveElement()
 // gets the first focusable descendant given a node, including those within the shadow DOM
 getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
 
+// gets the focus pseudo-class to used in selectors (focus-visible if supported, or focus)
+getFocusPseudoClass()
+
 // gets the last focusable descendant given a node, including those within the shadow DOM
 getLastFocusableDescendant(node, includeHidden)
 
@@ -144,6 +147,9 @@ getPreviousFocusableAncestor(node, includeHidden, includeTabbablesOnly)
 // returns true/false whether the element is focusable
 isFocusable(node, includeHidden, includeTabbablesOnly, includeDisabled)
 
+// returns true/false whether the :focus-visible is supported
+isFocusVisibleSupported()
+
 // returns true and focuses on node or its nearest focusable ancestor;
 // or false if node and its ancestors are not focusable
 tryApplyFocus(node)

package/helpers/focus.js

@@ -52,6 +52,10 @@ export function getFirstFocusableDescendant(node, includeHidden, predicate, incl
 	return null;
 }
 
+export function getFocusPseudoClass() {
+	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
+}
+
 export function getLastFocusableDescendant(node, includeHidden) {
 	const composedChildren = getComposedChildren(node);
 
@@ -182,6 +186,25 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 }
 
+let _isFocusVisibleSupported;
+
+export function isFocusVisibleSupported() {
+	if (_isFocusVisibleSupported === undefined) {
+		const style = document.createElement('style');
+		try {
+			document.head.appendChild(style);
+			style.sheet.insertRule(':focus-visible { color: inherit; }');
+			_isFocusVisibleSupported = true;
+		} catch (error) {
+			_isFocusVisibleSupported = false;
+		} finally {
+			style.remove();
+		}
+	}
+
+	return _isFocusVisibleSupported;
+}
+
 export function tryApplyFocus(elem) {
 	if (isFocusable(elem)) {
 		forceFocusVisible(elem);

package/package.json

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