@brightspace-ui/core 1.230.2 → 1.231.1

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

@@ -273,6 +273,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
 		this.__toggleScrollStyles = this.__toggleScrollStyles.bind(this);
 		this._handleMobileResize = this._handleMobileResize.bind(this);
+		this.__disconnectResizeObserver = this.__disconnectResizeObserver.bind(this);
 	}
 
 	get opened() {
@@ -312,6 +313,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 		clearDismissible(this.__dismissibleId);
 		this.__dismissibleId = null;
+
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
@@ -374,6 +377,17 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 	}
 
+	/**
+	 * Waits for the next resize when elem has a height > 0px,
+	 * then calls the __position function.
+	*/
+	requestRepositionNextResize(elem) {
+		if (!elem) return;
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
+		this.__resizeObserver = new ResizeObserver(this.__disconnectResizeObserver);
+		this.__resizeObserver.observe(elem);
+	}
+
 	async resize() {
 		if (!this.opened) {
 			return;
@@ -403,6 +417,20 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 	}
 
+	__disconnectResizeObserver(entries) {
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			if (this.__resizeObserver && entry.contentRect.height !== 0) {
+				this.__resizeObserver.disconnect();
+				// wrap in rAF for Firefox
+				requestAnimationFrame(() => {
+					if (this.opened) this.__position();
+				});
+				break;
+			}
+		}
+	}
+
 	__getContentBottom() {
 		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
 	}

package/components/filter/demo/filter.html

@@ -90,7 +90,20 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="course" text="Course" loading select-all>
+						<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
+					
 				</d2l-filter>
 				<d2l-filter>
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>

package/components/filter/filter.js

@@ -256,7 +256,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		let dimensionHTML;
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
-				dimensionHTML = html`<div aria-live="polite">${this._createSetDimension(dimension)}</div>`;
+				dimensionHTML = html`
+				<div aria-live="polite" class="d2l-filter-container">
+					${this._createSetDimension(dimension)}
+				</div>`;
 				break;
 		}
 
@@ -519,7 +522,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		let shouldUpdate = false,
 			shouldSearch = false,
-			shouldRecount = false;
+			shouldRecount = false,
+			shouldResizeDropdown = false;
 		changes.forEach((newValue, prop) => {
 			if (toUpdate[prop] === newValue) return;
 
@@ -538,13 +542,23 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				shouldResizeDropdown = true;
 				this._activeFiltersSubscribers.updateSubscribers();
+			} else if (prop === 'loading') {
+				shouldResizeDropdown = true;
 			}
 		});
 
 		if (shouldSearch) this._performDimensionSearch(dimension);
 		if (shouldRecount) this._setFilterCounts(dimension);
-		if (shouldUpdate) this.requestUpdate();
+		if (shouldUpdate)  this.requestUpdate();
+		if (shouldResizeDropdown) {
+			const singleDimension = this._dimensions.length === 1;
+			if (singleDimension && this.opened) {
+				const dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
+				dropdown.requestRepositionNextResize(this.shadowRoot.querySelector('.d2l-filter-container'));
+			}
+		}
 	}
 
 	_handleDimensionHide() {

package/components/list/demo/list.html

@@ -13,10 +13,10 @@
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
 			import '../../selection/selection-action.js';
+			import '../../selection/selection-action-dropdown.js';
 			import '../../selection/selection-action-menu-item.js';
 			import '../../tooltip/tooltip.js';
 			import '../list-header.js';
-			import '../list-item-button.js';
 			import '../list-item-content.js';
 			import '../list-item.js';
 			import '../list.js';
@@ -69,7 +69,20 @@
 					<d2l-list id="allFeatures" item-count="50">
 						<d2l-list-header slot="header" select-all-pages-allowed>
 							<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
-							<d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
+							<d2l-selection-action-dropdown text="Move To" requires-selection>
+								<d2l-dropdown-menu>
+									<d2l-menu label="Move To Options">
+										<d2l-menu-item text="Top of Quiz"></d2l-menu-item>
+										<d2l-menu-item text="Bottom of Quiz"></d2l-menu-item>
+										<d2l-menu-item text="Section">
+											<d2l-menu>
+												<d2l-menu-item text="Option 1"></d2l-menu-item>
+												<d2l-menu-item text="Option 2"></d2l-menu-item>
+											</d2l-menu-item>
+										</d2l-menu-item>
+									</d2l-menu>
+								</d2l-dropdown-menu>
+							</d2l-selection-action-dropdown>
 							<d2l-dropdown-button-subtle text="Actions">
 								<d2l-dropdown-menu>
 									<d2l-menu label="Actions">
@@ -78,7 +91,7 @@
 									</d2l-menu>
 								</d2l-dropdown-menu>
 							</d2l-dropdown-button-subtle>
-							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
+							<d2l-selection-action icon="tier1:gear" text="Settings" requires-selection></d2l-selection-action>
 						</d2l-list-header>
 						<d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
 							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -226,11 +239,5 @@
 
 		</d2l-demo-page>
 
-		<script>
-			document.body.addEventListener('d2l-list-item-button-click', (e) => {
-				console.log('d2l-list-item-button clicked!', e);
-			});
-		</script>
-
 	</body>
 </html>

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

@@ -105,15 +105,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				filter: grayscale(75%);
 				opacity: 0.4;
 			}
-			:host([draggable]) .d2l-list-item-drag-image {
-				transform: rotate(-1deg);
-			}
 			:host([dragging]) .d2l-list-item-drag-image {
 				background: white;
 			}
-			:host([draggable]) d2l-list-item-generic-layout {
-				transform: rotate(1deg);
-			}
 			d2l-list-item-generic-layout {
 				border-bottom: 1px solid var(--d2l-color-mica);
 				border-top: 1px solid var(--d2l-color-mica);
@@ -281,10 +275,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				width: 100%;
 				z-index: 5;
 			}
-			:host([draggable][selected]:not([disabled])) .d2l-list-item-active-border,
-			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
-				transform: rotate(1deg);
-			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -466,52 +456,54 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
 		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
+		const innerView = html`
+			<d2l-list-item-generic-layout
+				@focusin="${this._onFocusIn}"
+				@focusout="${this._onFocusOut}"
+				class="${classMap(classes)}"
+				data-breakpoint="${this._breakpoint}"
+				data-separators="${ifDefined(this._separators)}"
+				?grid-active="${this.role === 'rowgroup'}">
+				${this._renderDropTarget()}
+				${this._renderDragHandle(this._renderOutsideControl)}
+				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
+				${this.selectable ? html`
+				<div slot="control">${this._renderCheckbox()}</div>
+				<div slot="control-action"
+					@mouseenter="${this._onMouseEnter}"
+					@mouseleave="${this._onMouseLeave}">
+						${this._renderCheckboxAction('')}
+				</div>` : nothing }
+				${primaryAction ? html`
+				<div slot="content-action"
+					@focusin="${this._onFocusInPrimaryAction}"
+					@focusout="${this._onFocusOutPrimaryAction}"
+					@mouseenter="${this._onMouseEnterPrimaryAction}"
+					@mouseleave="${this._onMouseLeavePrimaryAction}">
+						${primaryAction}
+				</div>` : nothing}
+				<div slot="content"
+					class="${classMap(contentClasses)}"
+					id="${this._contentId}">
+					<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
+					<slot>${content}</slot>
+				</div>
+				<div slot="actions"
+					@mouseenter="${this._onMouseEnter}"
+					@mouseleave="${this._onMouseLeave}"
+					class="d2l-list-item-actions-container">
+					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
+				</div>
+				<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
+					<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
+				</div>
+			</d2l-list-item-generic-layout>
+			<div class="d2l-list-item-active-border"></div>
+		`;
+
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
-			<div class="d2l-list-item-drag-image">
-				<d2l-list-item-generic-layout
-					@focusin="${this._onFocusIn}"
-					@focusout="${this._onFocusOut}"
-					class="${classMap(classes)}"
-					data-breakpoint="${this._breakpoint}"
-					data-separators="${ifDefined(this._separators)}"
-					?grid-active="${this.role === 'rowgroup'}">
-					${this._renderDropTarget()}
-					${this._renderDragHandle(this._renderOutsideControl)}
-					${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
-					${this.selectable ? html`
-					<div slot="control">${this._renderCheckbox()}</div>
-					<div slot="control-action"
-						@mouseenter="${this._onMouseEnter}"
-						@mouseleave="${this._onMouseLeave}">
-							${this._renderCheckboxAction('')}
-					</div>` : nothing }
-					${primaryAction ? html`
-					<div slot="content-action"
-						@focusin="${this._onFocusInPrimaryAction}"
-						@focusout="${this._onFocusOutPrimaryAction}"
-						@mouseenter="${this._onMouseEnterPrimaryAction}"
-						@mouseleave="${this._onMouseLeavePrimaryAction}">
-							${primaryAction}
-					</div>` : nothing}
-					<div slot="content"
-						class="${classMap(contentClasses)}"
-						id="${this._contentId}">
-						<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
-						<slot>${content}</slot>
-					</div>
-					<div slot="actions"
-						@mouseenter="${this._onMouseEnter}"
-						@mouseleave="${this._onMouseLeave}"
-						class="d2l-list-item-actions-container">
-						<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
-					</div>
-					<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
-						<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
-					</div>
-				</d2l-list-item-generic-layout>
-				<div class="d2l-list-item-active-border"></div>
-			</div>
+			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;

package/components/overflow-group/overflow-group.js

@@ -32,7 +32,7 @@ const OPENER_STYLE = {
 
 function createMenuItem(node) {
 	const childText = node.text || node.firstChild && (node.firstChild.label || node.firstChild.text || node.firstChild.textContent.trim());
-	const disabled = node.disabled;
+	const disabled = !!node.disabled;
 	const handleItemSelect = () => {
 		node.dispatchEvent(new CustomEvent('d2l-button-ghost-click'));
 		node.click();
@@ -67,11 +67,14 @@ function createMenuItemMenu(node) {
 		||  node.querySelector('d2l-dropdown-button-subtle');
 
 	const openerText = node.text || menuOpener.text;
+	const disabled = !!node.disabled;
 	const subMenu = node.querySelector('d2l-menu');
 
 	const subItems = Array.from(subMenu.children).map((node) => convertToDropdownItem(node));
 
-	return html`<d2l-menu-item text="${openerText}">
+	return html`<d2l-menu-item
+		?disabled=${disabled}
+		text="${openerText}">
 		<d2l-menu>
 			${subItems}
 		</d2l-menu>
@@ -96,6 +99,7 @@ function convertToDropdownItem(node) {
 		case 'd2l-dropdown-button-subtle':
 		case 'd2l-dropdown-context-menu':
 		case 'd2l-dropdown-more':
+		case 'd2l-selection-action-dropdown':
 			return createMenuItemMenu(node);
 		case 'd2l-menu-item':
 		case 'd2l-selection-action-menu-item':
@@ -199,7 +203,9 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			.d2l-overflow-group-container ::slotted(d2l-dropdown-button),
 			.d2l-overflow-group-container ::slotted(d2l-dropdown-button-subtle),
 			.d2l-overflow-group-container ::slotted(d2l-dropdown-more),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu) {
+			.d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu),
+			.d2l-overflow-group-container ::slotted(d2l-selection-action),
+			.d2l-overflow-group-container ::slotted(d2l-selection-action-dropdown) {
 				margin-right: 0.6rem;
 			}
 			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-button),
@@ -210,7 +216,9 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-button),
 			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-button-subtle),
 			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-more),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu) {
+			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu),
+			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-selection-action),
+			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-selection-action-dropdown) {
 				margin-left: 0.6rem;
 				margin-right: 0;
 			}

package/components/selection/README.md

@@ -148,9 +148,41 @@ The `d2l-selection-action` is an optional component that provides a button for a
 | `d2l-selection-action-click` | Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
 <!-- docs: end hidden content -->
 
+## Selection Action Dropdown [d2l-selection-action-dropdown]
+
+The `d2l-selection-action-dropdown` is an optional component that provides a button opener for dropdown content associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the opener should be non-interactive if nothing is selected.
+
+<!-- docs: demo live name:d2l-selection-action-dropdown -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
+  import '@brightspace-ui/core/components/menu/menu.js';
+  import '@brightspace-ui/core/components/menu/menu-item.js';
+  import '@brightspace-ui/core/components/selection/selection-action-dropdown.js';
+</script>
+<d2l-selection-action-dropdown text="Actions" requires-selection>
+  <d2l-dropdown-menu>
+    <d2l-menu label="Actions">
+      <d2l-menu-item text="Action 1"></d2l-menu-item>
+      <d2l-menu-item text="Action 2"></d2l-menu-item>
+    </d2l-menu>
+  </d2l-dropdown-menu>
+</d2l-selection-action-dropdown>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `requires-selection` | Boolean | Whether the action dropdown opener requires one or more selected items. If no items are selected, the opener will be focusable and a hint displayed in a tooltip. |
+| `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
+| `text` | String, required | Text for the dropdown opener button. |
+<!-- docs: end hidden content -->
+
 ## Selection Action Menu Item [d2l-selection-action-menu-item]
 
-The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
+The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the menu item should be non-interactive if nothing is selected. This component enables the app to define an opener that is enabled regardless of the selection state, while having a menu containing one or more menu items that `requires-selection`.
 
 <!-- docs: demo live name:d2l-selection-action-menu-item -->
 ```html

package/components/selection/demo/selection.html

@@ -6,10 +6,10 @@
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
 			import '../../demo/demo-page.js';
-			import '../../dropdown/dropdown-button-subtle.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../menu/menu.js';
 			import '../selection-action.js';
+			import '../selection-action-dropdown.js';
 			import '../selection-action-menu-item.js';
 			import '../selection-input.js';
 			import '../selection-select-all.js';
@@ -61,14 +61,14 @@
 								<d2l-selection-select-all></d2l-selection-select-all>
 								<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
 								<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
-								<d2l-dropdown-button-subtle text="Actions">
+								<d2l-selection-action-dropdown text="Actions 1" requires-selection>
 									<d2l-dropdown-menu>
 										<d2l-menu label="Actions">
-											<d2l-selection-action-menu-item text="Action 1 (requires selection)" requires-selection></d2l-selection-action-menu-item>
+											<d2l-selection-action-menu-item text="Action 1"></d2l-selection-action-menu-item>
 											<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
 										</d2l-menu>
 									</d2l-dropdown-menu>
-								</d2l-dropdown-button-subtle>
+								</d2l-selection-action-dropdown>
 							</div>
 							<d2l-selection-summary style="flex: none;"></d2l-selection-summary>
 						</div>

package/components/selection/selection-action-dropdown.js

@@ -0,0 +1,55 @@
+import '../button/button-subtle.js';
+import { html, LitElement } from 'lit-element/lit-element.js';
+import { DropdownOpenerMixin } from '../dropdown/dropdown-opener-mixin.js';
+import { dropdownOpenerStyles } from '../dropdown/dropdown-opener-styles.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
+import { SelectionActionMixin } from './selection-action-mixin.js';
+
+/**
+ * A dropdown opener associated with a selection component.
+ * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ */
+class ActionDropdown extends LocalizeCoreElement(SelectionActionMixin(DropdownOpenerMixin(LitElement))) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Text for the dropdown opener button
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
+	static get styles() {
+		return dropdownOpenerStyles;
+	}
+
+	render() {
+		return html`
+			<d2l-button-subtle
+				?disabled=${this.disabled}
+				disabled-tooltip="${ifDefined(this.disabled ? this.localize('components.selection.action-hint') : undefined)}"
+				icon="tier1:chevron-down"
+				icon-right
+				text=${this.text}></d2l-button-subtle>
+			<slot></slot>
+		`;
+	}
+
+	focus() {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
+		if (elem) elem.focus();
+	}
+
+	/**
+	 * Gets the opener element with class "d2l-dropdown-opener" (required by dropdown-opener-mixin).
+	 * @return {HTMLElement}
+	 */
+	getOpenerElement() {
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
+	}
+
+}
+customElements.define('d2l-selection-action-dropdown', ActionDropdown);

package/components/selection/selection-action-menu-item.js

@@ -1,3 +1,4 @@
+import '../icons/icon.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { MenuItemMixin } from '../menu/menu-item-mixin.js';
 import { menuItemStyles } from '../menu/menu-item-styles.js';
@@ -10,7 +11,7 @@ import { SelectionInfo } from './selection-mixin.js';
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
+class ActionMenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
 
 	static get styles() {
 		return [ menuItemStyles,
@@ -20,6 +21,10 @@ class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
 					display: flex;
 					padding: 0.75rem 1rem;
 				}
+				d2l-icon {
+					flex: none;
+					margin-left: 6px;
+				}
 				:host([dir="rtl"]) d2l-icon {
 					margin-left: 0;
 					margin-right: 6px;
@@ -39,9 +44,14 @@ class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
 	}
 
 	render() {
+		const icon = this.hasChildView ?
+			html`<d2l-icon icon="tier1:chevron-right"></d2l-icon>` : null;
+
 		return html`
 			<div class="d2l-menu-item-text">${this.text}</div>
 			<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
+			${icon}
+			<slot></slot>
 		`;
 	}
 
@@ -58,4 +68,4 @@ class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
 
 }
 
-customElements.define('d2l-selection-action-menu-item', MenuItem);
+customElements.define('d2l-selection-action-menu-item', ActionMenuItem);

package/components/selection/selection-action.js

@@ -1,20 +1,17 @@
 import '../button/button-subtle.js';
-import '../icons/icon.js';
-import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { ButtonMixin } from '../button/button-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SelectionActionMixin } from './selection-action-mixin.js';
 import { SelectionInfo } from './selection-mixin.js';
 
 /**
- * An action associated with a selection component.
+ * A button action associated with a selection component.
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(RtlMixin(LitElement)))) {
+class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(LitElement))) {
 
 	static get properties() {
 		return {

package/custom-elements.json

@@ -8445,6 +8445,109 @@
         }
       ]
     },
+    {
+      "name": "d2l-selection-action-dropdown",
+      "path": "./components/selection/selection-action-dropdown.js",
+      "description": "A dropdown opener associated with a selection component.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text for the dropdown opener button",
+          "type": "string"
+        },
+        {
+          "name": "requires-selection",
+          "description": "Whether the action requires one or more selected items",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "no-auto-open",
+          "description": "Prevents the dropdown from opening automatically on or on key press",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "open-on-hover",
+          "description": "Optionally open dropdown on click or hover action",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the dropdown opener",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text for the dropdown opener button",
+          "type": "string"
+        },
+        {
+          "name": "requiresSelection",
+          "attribute": "requires-selection",
+          "description": "Whether the action requires one or more selected items",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo",
+          "type": "SelectionInfo"
+        },
+        {
+          "name": "dropdownOpener",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "noAutoOpen",
+          "attribute": "no-auto-open",
+          "description": "Prevents the dropdown from opening automatically on or on key press",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "openOnHover",
+          "attribute": "open-on-hover",
+          "description": "Optionally open dropdown on click or hover action",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the dropdown opener",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-action-menu-item",
       "path": "./components/selection/selection-action-menu-item.js",
@@ -8544,7 +8647,7 @@
     {
       "name": "d2l-selection-action",
       "path": "./components/selection/selection-action.js",
-      "description": "An action associated with a selection component.",
+      "description": "A button action associated with a selection component.",
       "attributes": [
         {
           "name": "icon",

package/helpers/mathjax.js

@@ -1,4 +1,34 @@
+/* When updating MathJax, update mathjaxBaseUrl to use the new version
+ * and verify that the font mappings included in mathjaxFontMappings
+ * match what's present in the MathJax-src repo.
+ */
+
 const mathjaxContextAttribute = 'data-mathjax-context';
+const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.1.2';
+
+const mathjaxFontMappings = new Map([
+	['MJXTEX', 'MathJax_Main-Regular'],
+	['MJXTEX-B', 'MathJax_Main-Bold'],
+	['MJXTEX-I', 'MathJax_Math-Italic'],
+	['MJXTEX-MI', 'MathJax_Main-Italic'],
+	['MJXTEX-BI', 'MathJax_Math-BoldItalic'],
+	['MJXTEX-S1', 'MathJax_Size1-Regular'],
+	['MJXTEX-S2', 'MathJax_Size2-Regular'],
+	['MJXTEX-S3', 'MathJax_Size3-Regular'],
+	['MJXTEX-S4', 'MathJax_Size4-Regular'],
+	['MJXTEX-A', 'MathJax_AMS-Regular'],
+	['MJXTEX-C', 'MathJax_Calligraphic-Regular'],
+	['MJXTEX-CB', 'MathJax_Calligraphic-Bold'],
+	['MJXTEX-FR', 'MathJax_Fraktur-Regular'],
+	['MJXTEX-FRB', 'MathJax_Fraktur-Bold'],
+	['MJXTEX-SS', 'MathJax_SansSerif-Regular'],
+	['MJXTEX-SSB', 'MathJax_SansSerif-Bold'],
+	['MJXTEX-SSI',  'MathJax_SansSerif-Italic'],
+	['MJXTEX-SC', 'MathJax_Script-Regular'],
+	['MJXTEX-T', 'MathJax_Typewriter-Regular'],
+	['MJXTEX-V', 'MathJax_Vector-Regular'],
+	['MJXTEX-VB', 'MathJax_Vector-Bold']
+]);
 
 let mathJaxLoaded;
 
@@ -158,6 +188,23 @@ export function loadMathJax(mathJaxConfig) {
 		}
 	};
 
+	if (mathJaxConfig && mathJaxConfig.deferTypeset && !document.head.querySelector('#d2l-mathjax-fonts') && !document.head.querySelector('#MJX-CHTML-styles')) {
+		const styleElem = document.createElement('style');
+		styleElem.id = 'd2l-mathjax-fonts';
+
+		let fontImportStyles = '';
+		mathjaxFontMappings.forEach((font, family) => {
+			fontImportStyles +=
+				`\n@font-face {
+					font-family: ${family};
+					src: url("${mathjaxBaseUrl}/output/chtml/fonts/woff-v2/${font}.woff") format("woff");
+				}`;
+		});
+
+		styleElem.textContent = fontImportStyles;
+		document.head.appendChild(styleElem);
+	}
+
 	mathJaxLoaded = new Promise(resolve => {
 		const script = document.createElement('script');
 		script.async = 'async';
@@ -167,7 +214,7 @@ export function loadMathJax(mathJaxConfig) {
 			? 'tex-mml-chtml'
 			: 'mml-chtml';
 
-		script.src = `https://s.brightspace.com/lib/mathjax/3.1.2/${component}.js`;
+		script.src = `${mathjaxBaseUrl}/${component}.js`;
 		document.head.appendChild(script);
 	});
 

package/package.json

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