@brightspace-ui/core 1.231.3 → 1.231.6

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

@@ -73,6 +73,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
+			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
 			_focusingPrimaryAction: { type: Boolean },
@@ -95,6 +96,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			:host([_dropdown-open]) {
 				z-index: 10;
 			}
+			:host([_fullscreen-within]) {
+				z-index: 1000; /* must be greater than floating workflow buttons */
+			}
 			:host(:first-child) d2l-list-item-generic-layout[data-separators="between"] {
 				border-top: 1px solid transparent;
 			}
@@ -275,6 +279,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				width: 100%;
 				z-index: 5;
 			}
+			:host([_fullscreen-within]) .d2l-list-item-active-border,
+			:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
+				display: none;
+			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -298,6 +306,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
+		this._fullscreenWithin = false;
+		this._fullscreenWithinCount = 0;
+
 	}
 
 	get breakpoints() {
@@ -421,6 +432,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._focusingPrimaryAction = false;
 	}
 
+	_onFullscreenWithin(e) {
+		if (e.detail.state) this._fullscreenWithinCount += 1;
+		else this._fullscreenWithinCount -= 1;
+		this._fullscreenWithin = (this._fullscreenWithinCount > 0);
+	}
+
 	_onMouseEnter() {
 		this._hovering = true;
 	}
@@ -460,6 +477,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			<d2l-list-item-generic-layout
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
+				@d2l-fullscreen-within="${this._onFullscreenWithin}"
 				class="${classMap(classes)}"
 				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"

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

@@ -16,9 +16,9 @@ export const menuItemStyles = css`
 		width: 100%;
 	}
 
+	:host(:focus),
+	:host([first]:focus),
 	:host(:hover),
-	:host(:focus-visible),
-	:host(:focus-visible[first]),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
 		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
@@ -27,6 +27,16 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
+	/** separated because safari is having trouble parsing these */
+	:host(:focus-visible),
+	:host(:focus-visible[first]) {
+		background-color: var(--d2l-menu-background-color-hover);
+		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
+		border-top: 1px solid var(--d2l-menu-border-color-hover);
+		color: var(--d2l-menu-foreground-color-hover);
+		z-index: 2;
+	}
+
 	:host([disabled]), :host([disabled]:hover), :host([disabled]:focus-visible) {
 		cursor: default;
 		opacity: 0.75;
@@ -40,11 +50,15 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:focus-visible),
 	:host([last]:hover) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}
 
+	/** separated because safari is having trouble parsing these */
+	:host([last]:focus-visible) {
+		border-bottom-color: var(--d2l-menu-border-color-hover);
+	}
+
 	.d2l-menu-item-text {
 		flex: auto;
 		line-height: 1rem;

package/package.json

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