@brightspace-ui/core 3.143.0 → 3.144.0

package/components/button/button-add.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -105,12 +105,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				0% { position: absolute; }
 				100% { position: static; }
 			}
-
-			button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-				background-color: white;
-				border-radius: 0.3rem;
-				box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
-			}
+			${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
 			/* remove when GAUD-7495-add-button-white-background is cleaned up */
 			:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
 				background-color: transparent;
@@ -160,6 +155,15 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 					}
 				}
 			}
+			@media (prefers-contrast: more) {
+				.line {
+					background-color: ButtonBorder;
+				}
+				button:hover .line,
+				button:focus .line {
+					background-color: Highlight !important;
+				}
+			}
 		`;
 	}
 
@@ -215,6 +219,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 	static get styles() {
 		return [visibleOnAncestorStyles, css`
 			:host {
+				--d2l-focus-ring-offset: 0;
+				--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
 				--d2l-button-add-icon-text-color: var(--d2l-color-galena);
 				align-items: center;
 				display: flex;

package/components/card/card.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -176,23 +177,17 @@ class Card extends LitElement {
 
 			:host([subtle]) {
 				border: none;
+			}
+			:host([subtle][href]) {
 				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 			}
-			:host(:hover) {
+			:host([href]:not([_active]):hover) {
 				box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
 			}
-			:host([subtle]:hover) {
+			:host([subtle][href]:not([_active]):hover) {
 				box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
 			}
-			:host([_active]) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
-			:host([_active]:hover),
-			:host([subtle][_active]:hover) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })}
 			/* .d2l-card-link-container-hover is used to only color/underline when
 			hovering the anchor; these styles are not applied when hovering actions */
 			:host([href]) .d2l-card-link-container-hover,
@@ -208,15 +203,16 @@ class Card extends LitElement {
 			:host([_dropdown-action-open]) {
 				z-index: 2;
 			}
-			:host(:not([href])),
-			:host([subtle]:not([href])) {
-				box-shadow: none;
-			}
 			@media (prefers-reduced-motion: no-preference) {
 				:host {
 					transition: box-shadow 0.2s;
 				}
 			}
+			@media (prefers-contrast: more) {
+				:host([subtle]) {
+					border: 1px solid var(--d2l-color-gypsum);
+				}
+			}
 		`];
 	}
 

package/components/count-badge/count-badge-icon.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -24,13 +24,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host([focus-ring]) d2l-icon,
-		:host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
-		d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-			outline: none;
-		}
-
+		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
 		:host {
 			/* for long numbers, center the number on the icon */
 			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
@@ -66,6 +60,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		}
 
 		d2l-icon {
+			--d2l-focus-ring-offset: 0;
 			border: 2px solid transparent;
 			border-radius: 6px;
 		}

package/components/count-badge/count-badge.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -10,24 +10,18 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host([focus-ring]) .d2l-count-badge-wrapper,
-		:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
-		.d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-		}
-
+		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
 		.d2l-count-badge-wrapper {
+			--d2l-focus-ring-offset: 0;
 			border: 2px solid transparent;
 		}
 
 		:host([size="small"]) .d2l-count-badge-wrapper {
 			border-radius: 0.65rem;
-			outline: none;
 		}
 
 		:host([size="large"]) .d2l-count-badge-wrapper {
 			border-radius: 0.8rem;
-			outline: none;
 		}
 		`];
 	}

package/components/demo/demo-snippet.js

@@ -78,7 +78,7 @@ class DemoSnippet extends LitElement {
 			d2l-dropdown.settings-dropdown {
 				background-color: white;
 				border-radius: 6px;
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
+				outline: 1px solid var(--d2l-color-celestine-minus-1);
 				position: fixed;
 				right: 1rem;
 				top: -0.25rem;

package/components/scroll-wrapper/scroll-wrapper.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css, html, LitElement } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
@@ -13,11 +13,10 @@ let focusStyleSheet;
 function getFocusStyleSheet() {
 	if (!focusStyleSheet) {
 		focusStyleSheet = new CSSStyleSheet();
-		focusStyleSheet.replaceSync(css`
-		.d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
-			outline: none;
-		}`);
+		focusStyleSheet.replaceSync(getFocusRingStyles(
+			'.d2l-scroll-wrapper-focus',
+			{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
+		));
 	}
 	return focusStyleSheet;
 }

package/components/switch/switch-mixin.js

@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				display: none;
 			}
 			.d2l-switch-inner:hover, .switch-hover {
-				border-color: var(--d2l-color-celestine);
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
+				border-color: transparent;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: -2px;
 			}
 			@media (prefers-reduced-motion: reduce) {
 				.d2l-switch-toggle,

package/components/table/table-col-sort-button.js

@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-menu.js';
 import '../icons/icon.js';
 import '../menu/menu.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			button:hover {
 				background-color: var(--d2l-color-gypsum);
 			}
-			button:focus-visible,
-			button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-				outline-style: none;
-			}
+			${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
 			d2l-icon {
 				margin-inline-start: 0.6rem;
 			}

package/components/tabs/demo/tab-custom.js

@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
 			}
 			${getFocusRingStyles(
 				pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
-				{ extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
+				{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
 			)}
 		`];
 

package/components/tabs/tab-internal.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const keyCodes = {
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				vertical-align: middle;
 			}
 			.d2l-tab-text {
+				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
-				border-radius: 0.3rem;
-				box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-				color: var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
 			:host([aria-selected="true"]:focus) {
 				text-decoration: none;
 			}

package/components/tabs/tabs.js

@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-gypsum);
 			}
-			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles('.d2l-tabs-scroll-button')}
 			:host([skeleton]) .d2l-tabs-scroll-button {
 				visibility: hidden;
 			}

package/components/tooltip/demo/tooltip.html

@@ -5,6 +5,11 @@
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+	<script type="module">
+		import { mockFlag } from '../../../helpers/flags.js';
+		const urlParams = new URLSearchParams(window.location.search);
+		mockFlag('GAUD-7355-tooltip-popover', urlParams.get('popover') === 'true');
+	</script>
 	<script type="module">
 		import '../../button/button.js';
 		import '../../colors/colors.js';
@@ -97,6 +102,40 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Tooltip (position)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<div>
+					<select id="position">
+						<option value="bottom" selected>bottom</option>
+						<option value="left">left</option>
+						<option value="right">right</option>
+						<option value="top">top</option>
+					</select>
+					<select id="align">
+						<option value="center" selected>center</option>
+						<option value="start">start</option>
+						<option value="end">end</option>
+					</select>
+				</div>
+				<div style="text-align: center;">
+					<d2l-button id="tooltip-position">Tooltip Position</d2l-button>
+					<d2l-tooltip for="tooltip-position">
+						This tooltip will be positioned according to the above selections for location and alignment.
+					</d2l-tooltip>
+				</div>
+				<script data-demo-hide>
+					const demo = document.currentScript.parentNode;
+					demo.querySelector('#position').addEventListener('change', e => {
+						demo.querySelector('d2l-tooltip').position = e.target.value;
+					});
+					demo.querySelector('#align').addEventListener('change', e => {
+						demo.querySelector('d2l-tooltip').align = (e.target.value !== 'center' ? e.target.value : undefined);
+					});
+				</script>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Tooltip (boundary)</h2>
 		<d2l-demo-snippet>
 			<template>
@@ -146,7 +185,7 @@
 				<div class="bounded">
 					<d2l-button id="tooltip-bounded">Bounded Tooltip</d2l-button>
 					<d2l-tooltip for="tooltip-bounded">
-						A bounded tooltip message that will wrap to more than one line.
+						A tooltip message inside of a container that hides overflow.
 					</d2l-tooltip>
 				</div>
 			</template>