@brightspace-ui/core 3.112.3 → 3.114.0

package/components/button/README.md

@@ -171,6 +171,48 @@ The `d2l-button-toggle` element is a container for buttons that toggle a `presse
 - `d2l-button-toggle-change`: dispatched when the `pressed` state changes
 <!-- docs: end hidden content -->
 
+## Split Button [d2l-button-split]
+
+The `d2l-button-split` element is a button component that provides a main button and a slot for `d2l-button-split-item` elements. Simply provide a `key` and `text` for the main button and each item. The `d2l-button-split`'s `click` event provides the `key` of the selected action.
+
+<!-- docs: demo code properties name:d2l-button-split sandboxTitle:'Split Button' align:flex-start autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-split.js';
+  import '@brightspace-ui/core/components/button/button-split-item.js';
+</script>
+<d2l-button-split key="save" text="Save" primary>
+  <d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
+  <d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
+  <d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
+</d2l-button-split>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `description` | String | A description to be added to the main button for accessibility for additional context |
+| `disabled` | Boolean | Disables the main button and menu opener |
+| `disabledTooltip` | String | Tooltip text when disabled |
+| `key` | String, required | Key of the main button, provided on the `click` event detail |
+| `primary` | Boolean | Styles the main button and menu opener as primary buttons |
+| `text` | String, required | Accessible text for the main button |
+
+### Item Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `disabled` | Boolean | Disables the menu item |
+| `key` | String, required | Key of the menu item, provided on the `click` event detail |
+| `text` | String, required | Accessible text for the menu item |
+
+### Events
+
+- `click`: dispatched when the user clicks the main action or menu item. The `key` is provided on the event detail.
+<!-- docs: end hidden content -->
+
 ## Add Button [d2l-button-add]
 
 The `d2l-button-add` is for quickly adding new items at a specific location, such as when adding items to a curated list. Since the Add button is meant to be subtle, it should always be used in combination with more obvious methods to add items (like a menu or primary button).

package/components/button/button-split-item.js

@@ -0,0 +1,40 @@
+import { css, html, LitElement } from 'lit';
+import { MenuItemMixin } from '../menu/menu-item-mixin.js';
+import { menuItemStyles } from '../menu/menu-item-styles.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * An split button item component used with JS handlers.
+ */
+class ButtonSplitItem extends PropertyRequiredMixin(MenuItemMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Key of the action
+			 * @type {string}
+			 */
+			key: { type: String, required: true }
+		};
+	}
+
+	static get styles() {
+		return [ menuItemStyles,
+			css`
+				:host {
+					align-items: center;
+					display: flex;
+					padding: 0.75rem 1rem;
+				}
+			`
+		];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-menu-item-text">${this.text}</div>
+		`;
+	}
+}
+
+customElements.define('d2l-button-split-item', ButtonSplitItem);

package/components/button/button-split.js

@@ -0,0 +1,143 @@
+import './button.js';
+import '../colors/colors.js';
+import '../dropdown/dropdown.js';
+import '../dropdown/dropdown-menu.js';
+import '../icons/icon.js';
+import '../menu/menu.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * A split button that provides a main action button and slot for a menu.
+ */
+class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(LitElement))) {
+
+	static get properties() {
+		return {
+			/**
+			 * ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * Disables the main action and dropdown opener buttons
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+			/**
+			 * REQUIRED: Key of the main action
+			 * @type {string}
+			 */
+			key: { type: String, required: true },
+			/**
+			 * Styles the buttons as a primary buttons
+			 * @type {boolean}
+			 */
+			primary: { type: Boolean, reflect: true },
+			/**
+			 * ACCESSIBILITY: REQUIRED: Accessible text for the main action button
+			 * @type {string}
+			 */
+			text: { type: String, reflect: true, required: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.container {
+				display: flex;
+				gap: 6px;
+			}
+			.main-action {
+				--d2l-button-start-end-radius: 0;
+				--d2l-button-end-end-radius: 0;
+			}
+			.d2l-dropdown-opener {
+				--d2l-button-start-start-radius: 0;
+				--d2l-button-end-start-radius: 0;
+				--d2l-button-padding-inline-end: 0.6rem;
+				--d2l-button-padding-inline-start: 0.6rem;
+			}
+			.d2l-dropdown-opener[primary] > d2l-icon {
+				color: #ffffff;
+			}
+			::slotted(:not(d2l-button-split-item)) {
+				display: none;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.primary = false;
+	}
+
+	static get focusElementSelector() {
+		return '.main-action';
+	}
+
+	render() {
+		return html`
+			<div class="container" @click="${this.#suppressClick}">
+				<d2l-button
+					class="main-action"
+					@click="${this.#handleMainActionClick}"
+					description="${ifDefined(this.description)}"
+					?disabled="${this.disabled}"
+					disabled-tooltip="${ifDefined(this.disabledTooltip)}"
+					?primary="${this.primary}">
+					${this.text}
+				</d2l-button>
+				<d2l-dropdown>
+					<d2l-button
+						aria-label="${this.localize('components.button-split.otherOptions')}"
+						class="d2l-dropdown-opener"
+						?disabled="${this.disabled}"
+						?primary="${this.primary}">
+						<d2l-icon icon="tier1:chevron-down"></d2l-icon>
+					</d2l-button>
+					<d2l-dropdown-menu>
+						<d2l-menu label="${this.localize('components.button-split.otherOptions')}" @d2l-menu-item-select="${this.#handleMenuItemSelect}">
+							<slot></slot>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown>
+			</div>
+		`;
+	}
+
+	#dispatchClick(key) {
+		/** Dispatched when a split button is clicked. The `key` is provided on the event detail. */
+		this.dispatchEvent(new CustomEvent('click', { detail: { key } }));
+	}
+
+	#handleMainActionClick() {
+		this.#dispatchClick(this.key);
+	}
+
+	#handleMenuItemSelect(e) {
+		this.#dispatchClick(e.target.key);
+	}
+
+	#suppressClick(e) {
+		e.stopPropagation();
+	}
+
+}
+
+customElements.define('d2l-button-split', ButtonSplit);

package/components/button/button-styles.js

@@ -4,7 +4,10 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const buttonStyles = css`
 	button {
-		border-radius: 0.3rem;
+		border-end-end-radius: var(--d2l-button-end-end-radius, 0.3rem);
+		border-end-start-radius: var(--d2l-button-end-start-radius, 0.3rem);
+		border-start-end-radius: var(--d2l-button-start-end-radius, 0.3rem);
+		border-start-start-radius: var(--d2l-button-start-start-radius, 0.3rem);
 		border-style: none;
 		box-sizing: border-box;
 		cursor: pointer;

package/components/button/button.js

@@ -41,7 +41,10 @@ class Button extends ButtonMixin(LitElement) {
 
 				button {
 					font-family: inherit;
-					padding: 0 1.5rem;
+					padding-block-end: 0;
+					padding-block-start: 0;
+					padding-inline-end: var(--d2l-button-padding-inline-end, 1.5rem);
+					padding-inline-start: var(--d2l-button-padding-inline-start, 1.5rem);
 					width: 100%;
 				}
 

package/components/button/demo/button-split.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../button-split.js';
+			import '../button-split-item.js';
+		</script>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-button-split">
+
+			<h2>Split Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<button id="focusButton" style="display: block; margin-block-end: 1rem;">Focus It!</button>
+					<d2l-button-split key="save" text="Save">
+						<d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
+					</d2l-button-split>
+					<script>
+						(demo => {
+							const splitButton = demo.querySelector('d2l-button-split');
+							demo.querySelector('#focusButton').addEventListener('click', () => splitButton.focus());
+							splitButton.addEventListener('click', e => console.log('click:', e.detail.key));
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Split Button (with a description)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-split key="save" text="Save" description="Super fancy save options!">
+						<d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
+					</d2l-button-split>
+				</template>
+			</d2l-demo-snippet>			
+
+			<h2>Split Button (primary)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-split key="save" text="Save" primary>
+						<d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
+					</d2l-button-split>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Split Button (disabled)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-split key="save" text="Save" primary disabled disabled-tooltip="Too fancy!">
+						<d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
+						<d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
+					</d2l-button-split>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+	</body>
+</html>

package/components/dropdown/dropdown-menu.js

@@ -167,7 +167,7 @@ if (usePopoverMixin) {
 		}
 
 		#handleSelect(e) {
-			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM'].indexOf(e.target.tagName) < 0) {
+			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM', 'D2L-BUTTON-SPLIT-ITEM'].indexOf(e.target.tagName) < 0) {
 				return;
 			}
 			this.close();
@@ -268,10 +268,9 @@ if (usePopoverMixin) {
 		}
 
 		__getMenuElement() {
-			if (!this.shadowRoot) return undefined;
-			return this.shadowRoot.querySelector('.d2l-dropdown-content-slot')
-				.assignedNodes().filter(node => node.hasAttribute
-					&& (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];
+			return this.shadowRoot?.querySelector('.d2l-dropdown-content-slot')
+				.assignedElements({ flatten: true })
+				.filter(node => (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];
 		}
 
 		_onAnimationEnd() {
@@ -351,7 +350,7 @@ if (usePopoverMixin) {
 		}
 
 		_onSelect(e) {
-			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM'].indexOf(e.target.tagName) < 0) {
+			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM', 'D2L-BUTTON-SPLIT-ITEM'].indexOf(e.target.tagName) < 0) {
 				return;
 			}
 			this.close();

package/components/html-block/README.md

@@ -15,7 +15,7 @@ Pass the user-authored HTML into the `html` attribute of the `d2l-html-block` an
   import '@brightspace-ui/core/components/icons/icon.js';
 </script>
 <d2l-html-block html="
-  <style>
+  &lt;style&gt;
     div {
       --d2l-icon-fill-color: var(--d2l-color-cinnabar);
     }
@@ -33,13 +33,13 @@ Pass the user-authored HTML into the `html` attribute of the `d2l-html-block` an
       display: flex;
       justify-content: center;
     }
-  </style>
-  <div class=&quot;warning-container&quot;>
-    <d2l-icon icon=&quot;tier3:alert&quot;></d2l-icon>
-    <span>
-      <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
-    </span>
-  </div>">
+  &lt;/style&gt;
+  &lt;div class=&quot;warning-container&quot;&gt;
+    &lt;d2l-icon icon=&quot;tier3:alert&quot;&gt;&lt;/d2l-icon&gt;
+    &lt;span&gt;
+      &lt;b&gt;Important:&lt;/b&gt; user-authored HTML must be trusted or properly sanitized!
+    &lt;/span&gt;
+  &lt;/div&gt;">
 </d2l-html-block>
 ```
 
@@ -56,23 +56,23 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block html="
-  <math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;>
-    <msqrt>
-      <mn>3</mn>
-      <mi>x</mi>
-      <mo>&#x2212;</mo>
-      <mn>1</mn>
-    </msqrt>
-    <mo>+</mo>
-    <mo stretchy=&quot;false&quot;>(</mo>
-    <mn>1</mn>
-    <mo>+</mo>
-    <mi>x</mi>
-    <msup>
-      <mo stretchy=&quot;false&quot;>)</mo>
-      <mn>2</mn>
-    </msup>
-  </math>">
+  &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
+    &lt;msqrt&gt;
+      &lt;mn&gt;3&lt;/mn&gt;
+      &lt;mi&gt;x&lt;/mi&gt;
+      &lt;mo&gt;&#x2212;&lt;/mo&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/msqrt&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mo stretchy=&quot;false&quot;&gt;(&lt;/mo&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;msup&gt;
+      &lt;mo stretchy=&quot;false&quot;&gt;)&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/msup&gt;
+  &lt;/math&gt;">
 </d2l-html-block>
 ```
 

package/components/html-block/demo/html-block-code.html

@@ -25,21 +25,21 @@
 
 		<h2 class="d2l-heading-3">Block Samples</h2>
 
-		<d2l-html-block>
-<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) {
+		<d2l-html-block html="
+&lt;pre class=&quot;d2l-code d2l-code-dark&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;function helloGrumpy(name) {
 	console.log(`Hi there ${name}.`);
 }
-helloGrumpy('Wizard');</code></pre>
-<br>
-<pre class="d2l-code d2l-code-dark"><code class="language-javascript line-numbers">function helloGrumpy(name) {
+helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;
+&lt;br&gt;
+&lt;pre class=&quot;d2l-code d2l-code-dark&quot;&gt;&lt;code class=&quot;language-javascript line-numbers&quot;&gt;function helloGrumpy(name) {
 	console.log(`Hi there ${name}. Here's some really long text to test overflowing the bounding container.`);
 }
-helloGrumpy('Wizard');</code></pre>
+helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
 		</d2l-html-block>
 
 		<h2 class="d2l-heading-3">Inline Samples</h2>
 
-		<d2l-html-block html="The best type of donuts are he kind you assign in code, for example: &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;const jelly = 'donuts';lgt;/code&gt;. The next best type of thing you can assign in code is stuff you can ferment. &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;let beer = hopsAndWater.map(ingredients => ferment(ingredients));&lt;/code&gt;"></d2l-html-block>
+		<d2l-html-block html="The best type of donuts are he kind you assign in code, for example: &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;const jelly = 'donuts';&lt;/code&gt;. The next best type of thing you can assign in code is stuff you can ferment. &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;let beer = hopsAndWater.map(ingredients => ferment(ingredients));&lt;/code&gt;"></d2l-html-block>
 
 	</body>
 </html>

package/components/list/demo/list.html

@@ -209,7 +209,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-item expandable key="expand-1" label="Expandable item #1" href=" ">
+						<d2l-list-item expandable key="expand-1" label="Expandable item #1">
 							<d2l-list-item-content>
 								<div>Week 1: Introduction</div>
 								<div slot="secondary" style="padding: 5px;"><d2l-tooltip-help text="Due: Jan 30, 2023">Available: Aug 11, 2023</d2l-tooltip-help></div>
@@ -217,12 +217,29 @@
 							</d2l-list-item-content>
 							<d2l-list grid slot="nested">
 								<d2l-list-item selectable key="nested-1" label="Nested 1">
-								  <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+								  <d2l-list-item-content>
+									<div>Nested item #1</div>
+									<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+								</d2l-list-item-content>
 								</d2l-list-item>
-								<d2l-list-item selectable key="nested-2" label="Nested 2">
-								  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+								<d2l-list-item selectable key="nested-2" label="Nested 2" expandable>
+								  <d2l-list-item-content>
+									<div>Nested item #2</div>
+									<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+								</d2l-list-item-content>
+								  <d2l-list grid slot="nested">
+									<d2l-list-item selectable key="nested-1-1" label="Nested 1">
+									  <d2l-list-item-content>
+										<div>Nested item #1</div>
+										<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+									</d2l-list-item-content>
+									</d2l-list-item>
+									<d2l-list-item selectable key="nested--1" label="Nested 2">
+									  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+									</d2l-list-item>
+								</d2l-list>
 								</d2l-list-item>
-							  </d2l-list>
+							</d2l-list>
 						</d2l-list-item>
 						<d2l-list-item href="http://www.d2l.com">
 							<d2l-list-item-content>
@@ -240,8 +257,10 @@
 				</template>
 				<script type="module">
 					requestAnimationFrame(() => {
-						document.querySelector('d2l-button-subtle').addEventListener('click', () => {
-							console.log('d2l-button: click event');
+						document.querySelectorAll('d2l-button-subtle').forEach((button) => {
+							button.addEventListener('click', () => {
+								console.log('d2l-button: click event');
+							});
 						});
 					});
 				</script>

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

@@ -1,8 +1,7 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
-import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
 	static get properties() {
@@ -67,7 +66,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 
 	_getDescendantClicked(e) {
 		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
-		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+		return isInteractiveInListItemComposedPath(e, isPrimaryAction);
 	}
 
 	_onButtonClick(e) {

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

@@ -1,6 +1,7 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
@@ -119,6 +120,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	_onCheckboxActionClick(event) {
 		event.preventDefault();
 		if (this.selectionDisabled) return;
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector('div.d2l-checkbox-action');
+		if (isInteractiveInListItemComposedPath(event, isPrimaryAction)) return;
+
 		this.setSelected(!this.selected);
 		const checkbox = this.shadowRoot && this.shadowRoot.querySelector(`#${this._checkboxId}`);
 		if (checkbox) checkbox.focus();

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

@@ -2,6 +2,7 @@ import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, nothing } from 'lit';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const dragIntervalDelay = 100;
@@ -136,12 +137,12 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 				@click="${this._toggleExpandCollapse}"></d2l-button-icon>`;
 	}
 
-	_renderExpandCollapseAction() {
+	_renderExpandCollapseAction(content) {
 		if (this.selectable || !this.expandable || this.noPrimaryAction) {
 			return nothing;
 		}
 
-		return html`<div class="d2l-list-expand-collapse-action" @click="${this._toggleExpandCollapse}"></div>`;
+		return html`<div class="d2l-list-expand-collapse-action" @click="${this._toggleExpandCollapseAction}">${content || nothing}</div>`;
 	}
 
 	_renderNestedLoadingSpinner() {
@@ -168,4 +169,14 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 			bubbles: true
 		}));
 	}
+
+	_toggleExpandCollapseAction(e = null) {
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector('div.d2l-list-expand-collapse-action');
+		if (e && isInteractiveInListItemComposedPath(e, isPrimaryAction)) {
+			e.preventDefault();
+			return;
+		}
+
+		this._toggleExpandCollapse(e);
+	}
 };

package/components/list/list-item-generic-layout.js

@@ -165,10 +165,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column-start: control-start;
 			}
 
-			:host(:not([no-primary-action])) ::slotted([slot="control-action"]),
 			:host(:not([no-primary-action])) ::slotted([slot="outside-control-action"]) {
 				grid-column-end: end;
 			}
+				
+			:host(:not([no-primary-action])) ::slotted([slot="control-action"]) {
+				grid-column-end: actions-start;
+			}
 
 			::slotted([slot="outside-control-container"]) {
 				grid-column: start / end;

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

@@ -1,8 +1,7 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
-import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
 
@@ -53,7 +52,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_getDescendantClicked(e) {
 		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
-		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+		return isInteractiveInListItemComposedPath(e, isPrimaryAction);
 	}
 
 	_handleLinkClick(e) {

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

@@ -6,13 +6,13 @@ import '../tooltip/tooltip.js';
 import '../expand-collapse/expand-collapse-content.js';
 import { css, html, nothing } from 'lit';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
+import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/interactive.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '../../helpers/composeMixins.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { interactiveElements } from '../../helpers/interactive.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
@@ -40,11 +40,14 @@ function addTabListener() {
 
 let hasDisplayedKeyboardTooltip = false;
 
-export const listInteractiveElems = {
-	...interactiveElements,
-	'd2l-button': true,
-	'd2l-tooltip-help': true
-};
+export function isInteractiveInListItemComposedPath(e, isPrimaryAction) {
+	const listInteractiveElems = {
+		...interactiveElements,
+		'd2l-button': true,
+		'd2l-tooltip-help': true
+	};
+	return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+}
 
 /**
  * @property label - The hidden label for the checkbox and expand collapse control
@@ -177,17 +180,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
-			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators > [slot="content"],
-			:host(:not([_has-color-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0.9rem;
-				padding-right: 0.9rem;
+			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
+				padding-inline-start: 3rem;
 			}
-			:host([selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0;
+			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
+				padding-inline: 0.9rem;
 			}
-			:host([dir="rtl"][selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0.9rem;
-				padding-right: 0;
+			:host([selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
+				padding-inline-start: 0;
 			}
 
 			:host([_hovering-primary-action]) .d2l-list-item-content,
@@ -220,6 +220,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				padding-top: 0;
 			}
 
+			[slot="control"] ~ [slot="control-action"] [slot="content"] {
+				padding-inline-start: 2.2rem; /* width of "control" slot set in generic-layout */
+			}
+
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration > * {
 				border-radius: 6px;
@@ -685,7 +689,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'hide-bottom-border': this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton)
 		};
 
-		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
+		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
 		const contentAreaContent = html`
 			<div slot="content"
 				class="d2l-list-item-content"
@@ -696,7 +700,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<slot>${content}</slot>
 			</div>
 		`;
+
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, contentAreaContent) : null);
+		const renderExpandableAction = !primaryAction && !this.selectable && this.expandable && !this.noPrimaryAction;
+		const renderCheckboxAction = !primaryAction && this.selectable && !this.noPrimaryAction;
+
 		let tooltipForId = null;
 		if (this._showAddButton) {
 			tooltipForId = this._addButtonTopId;
@@ -748,8 +756,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
-						${this._renderCheckboxAction('')}
-						${this._renderExpandCollapseAction()}
+						${this._renderCheckboxAction(renderCheckboxAction ? contentAreaContent : '')}
+						${this._renderExpandCollapseAction(renderExpandableAction ? contentAreaContent : null)}
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
@@ -758,7 +766,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					@mouseenter="${this._onMouseEnterPrimaryAction}"
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
-				</div>` : contentAreaContent}
+				</div>` : nothing}
+				${!primaryAction && !renderExpandableAction && !renderCheckboxAction ? contentAreaContent : nothing}
 				<div slot="actions"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}"

package/custom-elements.json

@@ -619,6 +619,169 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-split-item",
+      "path": "./components/button/button-split-item.js",
+      "description": "An split button item component used with JS handlers.",
+      "attributes": [
+        {
+          "name": "key",
+          "description": "REQUIRED: Key of the action",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        }
+      ],
+      "properties": [
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "REQUIRED: Key of the action",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "attribute": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
+        }
+      ]
+    },
+    {
+      "name": "d2l-button-split",
+      "path": "./components/button/button-split.js",
+      "description": "A split button that provides a main action button and slot for a menu.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "description": "REQUIRED: Key of the main action",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the main action button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the main action and dropdown opener buttons",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "primary",
+          "description": "Styles the buttons as a primary buttons",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "REQUIRED: Key of the main action",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the main action button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the main action and dropdown opener buttons",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "primary",
+          "attribute": "primary",
+          "description": "Styles the buttons as a primary buttons",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "description": "Dispatched when a split button is clicked. The `key` is provided on the event detail."
+        }
+      ]
+    },
     {
       "name": "d2l-button-subtle",
       "path": "./components/button/button-subtle.js",

package/lang/ar.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "يحتوي على أحداث.",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",

package/lang/cy.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Yn Cynnwys Digwyddiadau.",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",

package/lang/da.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Har begivenheder.",
 	"components.calendar.notSelected": "Ikke valgt.",
 	"components.calendar.selected": "Valgt.",

package/lang/de.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Hat Ereignisse.",
 	"components.calendar.notSelected": "Nicht ausgewählt.",
 	"components.calendar.selected": "Ausgewählt.",

package/lang/en-gb.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",

package/lang/en.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",

package/lang/es-es.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",

package/lang/es.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",

package/lang/fr-fr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "A des événements.",
 	"components.calendar.notSelected": "Non sélectionné.",
 	"components.calendar.selected": "Sélectionné.",

package/lang/fr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Comprend des événements.",
 	"components.calendar.notSelected": "Non sélectionné(e)",
 	"components.calendar.selected": "Sélectionné(e).",

package/lang/haw.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Pani i ka makaʻala",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Loaʻa nā hanana.",
 	"components.calendar.notSelected": "ʻAʻole i koho ʻia.",
 	"components.calendar.selected": "Koho ʻia.",

package/lang/hi.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "ईवेंट हैं।",
 	"components.calendar.notSelected": "चयनित नहीं।",
 	"components.calendar.selected": "चयनित।",

package/lang/ja.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "アラートを閉じる",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "イベントがあります。",
 	"components.calendar.notSelected": "選択されていません。",
 	"components.calendar.selected": "選択されています。",

package/lang/ko.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "경보 닫기",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "이벤트가 있습니다.",
 	"components.calendar.notSelected": "선택되지 않음.",
 	"components.calendar.selected": "선택됨.",

package/lang/mi.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Kati Matohi",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "He takahanga anō.",
 	"components.calendar.notSelected": "Kāore i tīpakona.",
 	"components.calendar.selected": "I tīpakona.",

package/lang/nl.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Bevat gebeurtenissen.",
 	"components.calendar.notSelected": "Niet geselecteerd.",
 	"components.calendar.selected": "Geselecteerd.",

package/lang/pt.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Tem eventos.",
 	"components.calendar.notSelected": "Não selecionado.",
 	"components.calendar.selected": "Selecionado.",

package/lang/sv.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Har händelser.",
 	"components.calendar.notSelected": "Inte vald.",
 	"components.calendar.selected": "Markerad.",

package/lang/tr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Olayları Var.",
 	"components.calendar.notSelected": "Seçili Değil.",
 	"components.calendar.selected": "Seçili.",

package/lang/zh-cn.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "关闭提醒",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未选择。",
 	"components.calendar.selected": "已选择。",

package/lang/zh-tw.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "關閉警示",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
+	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未選取。",
 	"components.calendar.selected": "已選取。",

package/package.json

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