@brightspace-ui/core 2.26.0 → 2.26.3

package/components/inputs/input-radio-styles.js

@@ -27,6 +27,7 @@ export const radioStyles = css`
 	}
 	.d2l-input-radio,
 	.d2l-input-radio:hover:disabled,
+	.d2l-input-radio:hover.d2l-disabled,
 	.d2l-input-radio-label > input[type="radio"],
 	.d2l-input-radio-label > input[type="radio"]:hover:disabled {
 		background-color: var(--d2l-color-regolith);

package/components/menu/README.md

@@ -283,43 +283,30 @@ Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`.  F
 ![Nested Menu](./screenshots/nested-menu.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo -->
+<!-- docs: demo code -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item.js';
-  import '@brightspace-ui/core/components/menu/menu-item-separator.js';
 </script>
 
 <d2l-menu label="Astronomy">
-  <d2l-menu-item text="Introduction"></d2l-menu-item>
-  <d2l-menu-item-separator></d2l-menu-item-separator>
-  <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
   <d2l-menu-item text="The Solar System">
     <d2l-menu>
-      <d2l-menu-item text="Formation"></d2l-menu-item>
-      <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
+      <d2l-menu-item text="The Sun"></d2l-menu-item>
       <d2l-menu-item text="The Planets">
         <d2l-menu>
           <d2l-menu-item text="Mercury"></d2l-menu-item>
           <d2l-menu-item text="Venus"></d2l-menu-item>
           <d2l-menu-item text="Earth"></d2l-menu-item>
-          <d2l-menu-item text="Mars"></d2l-menu-item>
-          <d2l-menu-item text="..."></d2l-menu-item>
         </d2l-menu>
       </d2l-menu-item>
-      <d2l-menu-item text="The Sun"></d2l-menu-item>
-      <d2l-menu-item text="Asteroids"></d2l-menu-item>
       <d2l-menu-item text="Comets"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>
   <d2l-menu-item text="Stars &amp; Galaxies">
     <d2l-menu>
-      <d2l-menu-item text="What is a Star?"></d2l-menu-item>
       <d2l-menu-item text="Lifecycle of a Star"></d2l-menu-item>
-      <d2l-menu-item text="Binaries &amp; Multiples"></d2l-menu-item>
-      <d2l-menu-item text="Star Clusters"></d2l-menu-item>
-      <d2l-menu-item text="Star Death"></d2l-menu-item>
       <d2l-menu-item text="Galaxies"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>

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

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

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

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

package/components/menu/menu.js

@@ -2,6 +2,7 @@ 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';
 
@@ -20,7 +21,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 ThemeMixin(HierarchicalViewMixin(LitElement)) {
+class Menu extends FocusVisiblePolyfillMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
 
 	static get properties() {
 		return {

package/components/selection/selection-input.js

@@ -154,6 +154,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 
 	_handleRadioClick(e) {
 		e.stopPropagation();
+		if (this.disabled) return;
 		this.selected = true;
 	}
 

package/components/selection/selection-mixin.js

@@ -147,7 +147,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		if (!e.composedPath()[0].classList.contains('d2l-selection-input-radio')) return;
 		if (e.keyCode < keyCodes.LEFT || e.keyCode > keyCodes.DOWN) return;
 
-		const selectables = Array.from(this._selectionSelectables.values());
+		const selectables = Array.from(this._selectionSelectables.values())
+			.filter(item => !item.disabled);
 		let currentIndex = selectables.findIndex(selectable => selectable.selected);
 		if (currentIndex === -1) currentIndex = 0;
 		let newIndex;

package/components/tooltip/README.md

@@ -172,17 +172,12 @@ The `d2l-tooltip-help` component is used to display additional information when
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code name:d2l-tooltip-help autoSize:false size:small -->
+<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 </script>
 
-<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-<p class="d2l-body-small">
-  This is some sample text.
-  <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-</p>
 <p class="d2l-body-compact">
   This is some sample text.
   <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
@@ -201,9 +196,9 @@ The `d2l-tooltip-help` component is used to display additional information when
 ### Using in a Sentence or Paragraph
 
 When placing a help tooltip next to other text as part of a sentence or a paragraph, use `inherit-font-style` to align its style with the adjacent text 
-(see 2nd and 3rd examples above).
+(see the demo example above).
 
 Note that the help tooltip does not support being used *within* a language term, due to challenges with translation.   
 Instead, your opener text will need to be a separate language term appearing before or after the other text and making sense on its own. 
 
-See the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example.
+See also the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example use case.

package/package.json

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