@brightspace-ui/core 3.133.1 → 3.134.2

package/components/filter/filter.js

@@ -236,7 +236,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._displayKeyboardTooltip = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
-		this._resized = false;
 		this._totalAppliedCount = 0;
 
 		this._activeFilters = null;
@@ -675,7 +674,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._changeEventsToDispatch = new Map();
 		clearTimeout(this._changeEventTimeout);
 		this._activeFiltersSubscribers.updateSubscribers();
-		this.#handleSearchLayoutUpdated(); // in order to update dropdown position if count-badge size changes pointer position
 	}
 
 	_dispatchChangeEventValueDataChange(dimension, value, valueKey) {

package/components/list/README.md

@@ -70,7 +70,7 @@ The list components are fairly complex and aim to be usable by all our users. In
 
 * When the `grid` attribute is used on the `d2l-list` component, it enables the list to follow the [Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/). More details on this are [below](#aria-layout-grid).
 
-* When using the `d2l-list-item-nav-button` component and/or mixin, usage of the `current` attribute adds the `aria-current` attribute to "page" for the `current` item and "location" for any parent and ancestors of the item. The components work together to keep these attributes up-to-date on subsequent selection. 
+* When using the `d2l-list-item-nav` component and/or mixin, usage of the `current` attribute adds the `aria-current` attribute to "page" for the `current` item and "location" for any parent and ancestors of the item. The components work together to keep these attributes up-to-date on subsequent selection. 
 
    * Usage of the new `current` attribute over the existing `selected` attribute corresponds to `aria-current` and also leaves open the possibility of using both `current` and selection behavior together.
 
@@ -609,23 +609,23 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 - `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
-## Navigational Button List Item [d2l-list-item-nav-button]
+## Navigational List Item [d2l-list-item-nav]
 
-Use a `d2l-list-item-nav-button` if your list serves as a table of contents or is part of a master/details workflow. It provides the same functionality as `d2l-list-item-button` while adding navigation semantics and behaviours. Use the `current` attribute to indicate the currently selected item — see more about this in [Accessibility](#accessibility).
+Use a `d2l-list-item-nav` if your list serves as a table of contents or is part of a master/details workflow. It provides the same functionality as `d2l-list-item-link` while adding navigation semantics and behaviours. Use the `current` attribute to indicate the currently selected item — see more about this in [Accessibility](#accessibility). The `action-href` attribute is required for the item to be able to be clickable.
 
 The example below also includes expand/collapse behavior in order to expand or collapse the items on subsequent clicks.
 
-<!-- docs: demo code properties name:d2l-list-item-nav-button sandboxTitle:'List Item Nav Button' display:block -->
+<!-- docs: demo code properties name:d2l-list-item-nav sandboxTitle:'List Item Nav' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-item-nav-button.js';
+  import '@brightspace-ui/core/components/list/list-item-nav.js';
   import '@brightspace-ui/core/components/list/list-item-content.js';
 </script>
 <script>
-  let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
-  document.addEventListener('d2l-list-item-button-click', (e) => {
-    console.log('d2l-list-item-nav-button: click event');
+  let currentItem = document.querySelector('d2l-list-item-nav[current]');
+  document.addEventListener('d2l-list-item-link-click', (e) => {
+    console.log('d2l-list-item-nav: click event');
 
     if (!e.target.expandable) {
       currentItem = e.target;
@@ -642,20 +642,20 @@ The example below also includes expand/collapse behavior in order to expand or c
 </script>
 
 <d2l-list>
-  <d2l-list-item-nav-button key="L1-1" label="Geomorphology and GIS" color="#006fbf" expandable expanded>
+  <d2l-list-item-nav key="L1-1" label="Geomorphology and GIS" color="#006fbf" expandable expanded action-href="https://d2l.com" prevent-navigation>
       <d2l-list-item-content>
         <div>Geomorphology and GIS </div>
         <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
       </d2l-list-item-content>
       <d2l-list slot="nested" grid>
-        <d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
+        <d2l-list-item-nav key="L2-1" label="Syallabus Confirmation">
           <d2l-list-item-content>
             <div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
             <div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm">Due: May 2, 2023</d2l-tooltip-help></div>
           </d2l-list-item-content>
-        </d2l-list-item-nav-button>
+        </d2l-list-item-nav>
       </d2l-list>
-  </d2l-list-item-nav-button>
+  </d2l-list-item-nav>
 </d2l-list>
 ```
 
@@ -664,26 +664,35 @@ The example below also includes expand/collapse behavior in order to expand or c
 
 | Property | Type | Description |
 |---|---|---|
-| `button-disabled` | Boolean | Disables the primary action button |
 | `current` | Boolean | Whether the list item is the current page in a navigation context. At most one list item should have the `current` attribute at any time; this will be managed by the `list` after initial render. |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
 | `expandable` | Boolean | Whether or not to show the expand/collapse toggle. |
 | `expanded` | Boolean | Whether the item is expanded. Requires `expandable` to be set. |
+| `href` | String | Address of item link if navigable |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `no-primary-action` | Boolean | Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive. |
 | `padding-type` | String | List item whitespace (`normal` (default), `none`)|
+| `prevent-navigation` | Boolean | Whether to prevent the default navigation behavior of the link |
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `selection-disabled` | Boolean | Disables selection |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
 
+### Methods
+
+- `highlight()`: highlights the item
+- `scrollToItem(alignToTop=true)`: scrolls to the item. See [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for definition of alignToTop.
+- `scrollToAndHighlight(alignToTop=true)`: scrolls to the item and then highlights it. . See [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for definition of alignToTop.
+
 ### Events
 
-- `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
+- `d2l-list-item-link-click`: dispatched when the item's primary link action is clicked
 - `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
@@ -724,17 +733,17 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 - actions (TemplateResult): Secondary actions for the list item.
 - nested (TemplateResult): Optional `d2l-list` for a nested list.
 
-## ListItemNavButtonMixin
+## ListItemNavMixin
 
-This mixin allows you to make a component into a navigational list item without requiring custom styling. All of the properties and functionality from `d2l-list-item-nav-button` (listed above) will be added to your new component.
+This mixin allows you to make a component into a navigational list item without requiring custom styling. All of the properties and functionality from `d2l-list-item-nav` (listed above) will be added to your new component.
 
 ### How to use
 
 Import
 ```javascript
-import { ListItemNavButtonMixin } from '@brightspace-ui/core/components/list/list-item-nav-button-mixin.js';
+import { ListItemNavMixin } from '@brightspace-ui/core/components/list/list-item-nav-mixin.js';
 
-class ListItem extends ListItemNavButtonMixin(LitElement) {
+class ListItem extends ListItemNavMixin(LitElement) {
 ...
 ```
 

package/components/list/demo/demo-list-nav.js

@@ -1,6 +1,6 @@
 import '../../icons/icon.js';
 import '../list-item-content.js';
-import '../list-item-nav-button.js';
+import '../list-item-nav.js';
 import '../list.js';
 import '../../tooltip/tooltip-help.js';
 import { css, html, LitElement, nothing } from 'lit';
@@ -45,7 +45,7 @@ class ListDemoNav extends LitElement {
 				<d2l-list 
 					grid 
 					drag-multiple
-					@d2l-list-item-button-click="${this._handleItemClick}">
+					@d2l-list-item-link-click="${this._handleItemClick}">
 					${repeat(this.#list, (item) => item.key, (item) => this._renderItem(item))}
 				</d2l-list>
 			</div>
@@ -132,15 +132,17 @@ class ListDemoNav extends LitElement {
 	_renderItem(item) {
 		const hasSubList = item.items && item.items.length > 0;
 		return html`
-			<d2l-list-item-nav-button
+			<d2l-list-item-nav
 				key="${ifDefined(item.key)}"
+				action-href="https://d2l.com"
 				draggable
 				drag-handle-text="${item.primaryText}"
 				color="${ifDefined(item.color)}"
 				?expandable="${hasSubList}"
 				?expanded="${hasSubList}"
 				drop-nested
-				label="${item.primaryText}">
+				label="${item.primaryText}"
+				prevent-navigation>
 				<d2l-list-item-content>
 					<div>${item.hasIcon ? html`<d2l-icon icon="tier2:file-document"></d2l-icon>` : nothing}${item.primaryText}</div>
 					${item.tooltipOpenerText && item.tooltipText
@@ -154,7 +156,7 @@ class ListDemoNav extends LitElement {
 					</d2l-list>`
 						: nothing
 				}
-			</d2l-list-item-nav-button>
+			</d2l-list-item-nav>
 		`;
 	}
 }

package/components/list/demo/list-nav.html

@@ -8,7 +8,7 @@
 			import '../../demo/demo-page.js';
 			import '../../icons/icon.js';
 			import '../list-item-content.js';
-			import '../list-item-nav-button.js';
+			import '../list-item-nav.js';
 			import '../list.js';
 			import '../../tooltip/tooltip-help.js';
 
@@ -25,43 +25,43 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid style="width: 334px;">
-						<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
+						<d2l-list-item-nav key="L1-1" label="Welcome!" color="#006fbf" expandable expanded action-href="https://d2l.com" prevent-navigation>
 							<d2l-list-item-content>
 								<div>Welcome!</div>
 							</d2l-list-item-content>
 							<d2l-list slot="nested" grid>
-								<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
+								<d2l-list-item-nav key="L2-1" label="Syallabus Confirmation">
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
 										<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
 									</d2l-list-item-content>
-								</d2l-list-item-nav-button>
+								</d2l-list-item-nav>
 							</d2l-list>
-						</d2l-list-item-nav-button>
-						<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
+						</d2l-list-item-nav>
+						<d2l-list-item-nav key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
 							<d2l-list-item-content>
 								<div>Unit 1: Fiction</div>
 								<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
 							</d2l-list-item-content>
 							<d2l-list slot="nested" grid>
-								<d2l-list-item-nav-button key="L3-2" label="Fiction">
+								<d2l-list-item-nav key="L3-2" label="Fiction">
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
 									</d2l-list-item-content>
-								</d2l-list-item-nav-button>
-								<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
+								</d2l-list-item-nav>
+								<d2l-list-item-nav key="L3-2" label="Ten rules for writing fiction">
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
 									</d2l-list-item-content>
-								</d2l-list-item-nav-button>
+								</d2l-list-item-nav>
 							</d2l-list>
-						</d2l-list-item-nav-button>
+						</d2l-list-item-nav>
 					</d2l-list>
 					<script>
 						(demo => {
-							let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
-							demo.addEventListener('d2l-list-item-button-click', (e) => {
-								console.log('d2l-list-item-nav-button: click event');
+							let currentItem = document.querySelector('d2l-list-item-nav[current]');
+							demo.addEventListener('d2l-list-item-link-click', (e) => {
+								console.log('d2l-list-item-nav: click event');
 
 								if (!e.target.expandable) {
 									currentItem = e.target;

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

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import { css, html, nothing } from 'lit';
 import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
 
@@ -11,7 +12,8 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			 * Address of item link if navigable
 			 * @type {string}
 			 */
-			actionHref: { type: String, attribute: 'action-href', reflect: true }
+			actionHref: { type: String, attribute: 'action-href', reflect: true },
+			_ariaCurrent: { type: String }
 		};
 	}
 
@@ -91,7 +93,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_handleLinkFocus(e) {
 		if (this._getDescendantClicked(e)) {
-			e.stopPropagation();
+			requestAnimationFrame(() => this._focusingPrimaryAction = false);
 		}
 	}
 
@@ -106,6 +108,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	_renderPrimaryAction(labelledBy, content) {
 		if (!this.actionHref) return;
 		return html`<a aria-labelledby="${labelledBy}"
+			aria-current="${ifDefined(this._ariaCurrent)}"
 			@click="${this._handleLinkClick}"
 			@focusin="${this._handleLinkFocus}"
 			href="${this.actionHref}"

package/components/list/{list-item-nav-button-mixin.js → list-item-nav-mixin.js}

@@ -2,9 +2,9 @@ import '../colors/colors.js';
 import { css } from 'lit';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
-import { ListItemButtonMixin } from './list-item-button-mixin.js';
+import { ListItemLinkMixin } from './list-item-link-mixin.js';
 
-export const ListItemNavButtonMixin = superclass => class extends ListItemButtonMixin(superclass) {
+export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -13,6 +13,11 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
 			 * @type {boolean}
 			 */
 			current: { type: Boolean, reflect: true },
+			/**
+			 * Whether to prevent the default navigation behavior of the link
+			 * @type {boolean}
+			 */
+			preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
 			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
 			_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
 		};
@@ -21,7 +26,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
 	static get styles() {
 
 		const styles = [ css`
-			:host(:not([button-disabled])) {
+			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
 			}
 			.d2l-list-item-content ::slotted(*) {
@@ -105,12 +110,13 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
 		this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
 	}
 
-	_onButtonClick(e) {
+	_handleLinkClick(e) {
 		if (!this._getDescendantClicked(e)) {
 			this.current = true;
 			this._childCurrent = false;
 		}
-		super._onButtonClick(e);
+		if (this.preventNavigation) e.preventDefault();
+		super._handleLinkClick(e);
 	}
 
 	#handleFocusIn(e) {
@@ -133,7 +139,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
 	}
 
 	async #setChildCurrent(e) {
-		await this.updateComplete; // ensure button exists
+		await this.updateComplete;
 		if (e.target === this) return;
 		this._childCurrent = e.detail.value;
 	}

package/components/list/{list-item-nav-button.js → list-item-nav.js}

@@ -1,4 +1,4 @@
-import { ListItemNavButtonMixin } from './list-item-nav-button-mixin.js';
+import { ListItemNavMixin } from './list-item-nav-mixin.js';
 import { LitElement } from 'lit';
 
 /**
@@ -8,7 +8,7 @@ import { LitElement } from 'lit';
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
  * @slot nested - Nested d2l-list element
  */
-class ListItemNavButton extends ListItemNavButtonMixin(LitElement) {
+class ListItemNavButton extends ListItemNavMixin(LitElement) {
 
 	render() {
 		return this._renderListItem();
@@ -16,4 +16,4 @@ class ListItemNavButton extends ListItemNavButtonMixin(LitElement) {
 
 }
 
-customElements.define('d2l-list-item-nav-button', ListItemNavButton);
+customElements.define('d2l-list-item-nav', ListItemNavButton);

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

@@ -1,6 +1,8 @@
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
 const defaultLines = 2;
 
-export const MenuItemMixin = superclass => class extends superclass {
+export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -45,7 +47,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 			 * REQUIRED: Text displayed by the menu item
 			 * @type {string}
 			 */
-			text: { type: String },
+			text: { type: String, required: true },
 			/**
 			 * ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context
 			 * @type {string}

package/components/menu/menu.js

@@ -3,6 +3,7 @@ import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 const keyCodes = {
@@ -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 PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -32,7 +33,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 			 * ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)
 			 * @type {string}
 			 */
-			label: { type: String },
+			label: { type: String, required: true },
 			/**
 			 * @ignore
 			 */

package/custom-elements.json

@@ -9416,10 +9416,15 @@
       ]
     },
     {
-      "name": "d2l-list-item-nav-button",
-      "path": "./components/list/list-item-nav-button.js",
+      "name": "d2l-list-item-nav",
+      "path": "./components/list/list-item-nav.js",
       "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
       "attributes": [
+        {
+          "name": "prevent-navigation",
+          "description": "Whether to prevent the default navigation behavior of the link",
+          "type": "boolean"
+        },
         {
           "name": "current",
           "description": "Whether the list item is the current page in a navigation context. At most one list item should have the `current` attribute at any time; this will be managed by the `list` after initial render.",
@@ -9427,10 +9432,9 @@
           "default": "false"
         },
         {
-          "name": "button-disabled",
-          "description": "Disables the primary action button",
-          "type": "boolean",
-          "default": "false"
+          "name": "action-href",
+          "description": "Address of item link if navigable",
+          "type": "string"
         },
         {
           "name": "drag-target-handle-only",
@@ -9526,6 +9530,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "preventNavigation",
+          "attribute": "prevent-navigation",
+          "description": "Whether to prevent the default navigation behavior of the link",
+          "type": "boolean"
+        },
         {
           "name": "current",
           "attribute": "current",
@@ -9534,11 +9544,10 @@
           "default": "false"
         },
         {
-          "name": "buttonDisabled",
-          "attribute": "button-disabled",
-          "description": "Disables the primary action button",
-          "type": "boolean",
-          "default": "false"
+          "name": "actionHref",
+          "attribute": "action-href",
+          "description": "Address of item link if navigable",
+          "type": "string"
         },
         {
           "name": "dragTargetHandleOnly",
@@ -9665,8 +9674,8 @@
       ],
       "events": [
         {
-          "name": "d2l-list-item-button-click",
-          "description": "Dispatched when the item's primary button action is clicked"
+          "name": "d2l-list-item-link-click",
+          "description": "Dispatched when the item's primary link action is clicked"
         },
         {
           "name": "d2l-list-item-selected",

package/package.json

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