@brightspace-ui/core 2.37.1 → 2.38.0

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

@@ -174,6 +174,13 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.dropdownOpened = !this.dropdownOpened;
 	}
 
+	__dispatchOpenerClickEvent() {
+		/** Dispatched when the opener is clicked, useful for when no-auto-open is enabled */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-dropdown-opener-click', { bubbles: false, composed: false }
+		));
+	}
+
 	__getContentElement() {
 		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('slot:not([name])').assignedNodes()
@@ -202,6 +209,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	__onKeypress(e) {
 		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
 			if (e.keyCode !== 13 && e.keyCode !== 32) return;
+			this.__dispatchOpenerClickEvent();
 			if (this.noAutoOpen) return;
 			if (!this.openOnHover) {
 				this.toggleOpen(true);
@@ -256,6 +264,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onOpenerMouseUp(e) {
+		this.__dispatchOpenerClickEvent();
 		if (this.noAutoOpen) return;
 		if (this.openOnHover) {
 			// prevent propogation to window and triggering _onOutsideClick

package/components/empty-state/empty-state-action-button.js

@@ -5,6 +5,7 @@ import { css, html, LitElement, nothing } from 'lit';
 /**
  * `d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.
  * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ * @fires d2l-empty-state-illustrated-check - Internal event
  */
 class EmptyStateActionButton extends LitElement {
 

package/components/empty-state/empty-state-styles.js

@@ -20,7 +20,7 @@ export const emptyStateStyles = css`
 
 	.action-slot::slotted(d2l-empty-state-action-button:first-child),
 	.action-slot::slotted(d2l-empty-state-action-link:first-child) {
-		display: inline-block;
+		display: inline;
 	}
 
 `;

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

@@ -1,6 +1,4 @@
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
-
-export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
+export const MenuItemMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {

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

@@ -16,8 +16,6 @@ export const menuItemStyles = css`
 		width: 100%;
 	}
 
-	:host(.focus-visible),
-	:host([first].focus-visible),
 	:host(:hover),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
@@ -27,7 +25,23 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host(:focus-visible),
+	:host([first]:focus-visible) {
+		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) {
+		cursor: default;
+		opacity: 0.75;
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([disabled]:focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -40,7 +54,12 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:hover), :host([last].focus-visible) {
+	:host([last]:hover) {
+		border-bottom-color: var(--d2l-menu-border-color-hover);
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([last]:focus-visible) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}
 

package/components/menu/menu.js

@@ -2,7 +2,6 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit';
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -21,7 +20,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends FocusVisiblePolyfillMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 
 	static get properties() {
 		return {

package/components/tooltip/tooltip-help.js

@@ -49,6 +49,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 				background: none;
 				border: none;
 				cursor: inherit;
+				font-family: inherit;
 				padding: 0;
 				text-decoration-line: underline;
 				text-decoration-style: dashed;

package/custom-elements.json

@@ -1815,6 +1815,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -1903,6 +1909,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2266,6 +2278,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2629,6 +2647,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2963,6 +2987,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -3010,7 +3040,8 @@
           "description": "Dispatched when the action button is clicked"
         },
         {
-          "name": "d2l-empty-state-illustrated-check"
+          "name": "d2l-empty-state-illustrated-check",
+          "description": "Internal event"
         }
       ]
     },
@@ -9071,6 +9102,10 @@
         {
           "name": "d2l-selection-observer-subscribe",
           "description": "Internal event"
+        },
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
         }
       ],
       "slots": [

package/package.json

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