@brightspace-ui/core 2.77.0 → 2.78.1

package/components/button/button-icon.js

@@ -62,6 +62,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
 					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
 					display: inline-block;
+					line-height: 0;
 				}
 				:host([hidden]) {
 					display: none;

package/components/collapsible-panel/README.md

@@ -97,17 +97,16 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 
 <style>
 	d2l-collapsible-panel {
-		width: 500px;
-		margin-block: 2rem;
+		width: 800px;
 	}
 	/* TODO: remove this when daylight demo resizing is fixed */
 	d2l-collapsible-panel:not([expanded]) {
-		margin-bottom: 8rem;
+		margin-bottom: 14rem;
 	}
 </style>
 
-<d2l-collapsible-panel panel-title="Cake Decoration">
-	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
+<d2l-collapsible-panel panel-title="Collapsible Panel">
+	The collapsible panel is also nicknamed caketray! Team Polaris coined this nickname back in 2020 while creating a labs component for a tool called Learning Paths (which is now replaced with the collapsible panel). They wanted to distinguish this labs component from d2l-card, but they didn't know what to call it, so they named it caketray to serve as a reminder to change the name later. Caketray caught on around the company, so much so that we had to make it an official nickname so some teams could find it! You'll see some other cake-related examples throughout this documentation to pay tribute to the collapsible panel's heritage.
 </d2l-collapsible-panel>
 ```
 
@@ -204,9 +203,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-More than one d2l-collapsible-panel-summary-item can be added to the summary slot, and each will appear on its own line.
-
-<!-- docs: demo live -->
+<!-- docs: demo -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -234,7 +231,7 @@ class CollapsiblePanelDaylightDemo extends LitElement {
 			}
 			/* TODO: remove this when daylight demo resizing is fixed */
 			d2l-collapsible-panel:not([expanded]) {
-				margin-bottom: 13rem;
+				margin-bottom: 12rem;
 			}
 		`];
 	}
@@ -292,9 +289,26 @@ customElements.define('d2l-collapsible-panel-daylight-demo', CollapsiblePanelDay
 <d2l-collapsible-panel-daylight-demo></d2l-collapsible-panel-daylight-demo>
 ```
 
-## Optional slots
+More than one `d2l-collapsible-panel-summary-item` can be added to the `summary` slot, and each will appear on its own line.
+
+```html
+<script type="module">
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
+</script>
+
+<d2l-collapsible-panel panel-title="Cake Decoration">
+	<d2l-collapsible-panel-summary-item slot="summary" text="Buttercream icing"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Personalized name"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Candles"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Plates and Forks"></d2l-collapsible-panel-summary-item>
+	Expanded content
+</d2l-collapsible-panel>
+```
+
+## Header and actions slots
 
-Collapsible panels have two optional slots, `actions` and `header` that can be used to add more information to the header area.
+Collapsible panels have two optional slots, `header` and `actions` that can be used to add more information to the header area.
 
 
 <!-- docs: demo live -->
@@ -302,6 +316,7 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 <script type="module">
 	import '@brightspace-ui/core/components/button/button-icon.js';
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
 	import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
 	import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
 	import '@brightspace-ui/core/components/link/link.js';
@@ -314,10 +329,6 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 	d2l-collapsible-panel {
 		width: 800px;
 	}
-	/* TODO: remove this when daylight demo resizing is fixed */
-	d2l-collapsible-panel:not([expanded]) {
-		margin-bottom: 4rem;
-	}
 </style>
 
 <d2l-collapsible-panel panel-title="Submission 1">
@@ -336,6 +347,8 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 		<p class="d2l-body-small">Submitted On: Jul 20, 2021 - 2:23 PM</p>
 		<d2l-link small href="https://www.d2l.com" target="blank">Link to post</d2l-link>
 	</div>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Week 2 Lab (PDF) attached"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="1 comment"></d2l-collapsible-panel-summary-item>
 	Expanded content
 </d2l-collapsible-panel>
 ```

package/components/list/README.md

@@ -193,6 +193,67 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 </d2l-list>
 ```
 
+## Expandable Lists
+
+The `d2l-list` supports expandable items within a list. Expand and collapse toggle is enabled when `d2l-list-item`s have the `expandable` and `key` attributes set. When items are expandable the default state is collapsed. If you would like the default state to be expanded, add the `expanded` attribute to the `d2l-list-item`.
+
+### Expandable List Accessibility Properties
+
+If a `d2l-list-item` is expandable then it should have a `label` attribute that corresponds to the hidden label for the expand/collapse toggle.
+
+### Expandable List Example
+
+<!-- docs: demo code autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-header.js';
+  import '@brightspace-ui/core/components/list/list-item.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+</script>
+
+<d2l-list grid style="width: 100%">
+  <d2l-list-header slot="header">
+    <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
+  </d2l-list-header>
+  <d2l-list-item selectable expandable key="expand-1" label="Expandable item #1">
+    <d2l-list-item-content>
+      <div>Expandable item #1</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+    <d2l-list grid style="width: 100%" 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>
+      <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>
+    </d2l-list>
+  </d2l-list-item>
+  <d2l-list-item selectable expandable expanded key="expand-2" label="Expandable item #2">
+    <d2l-list-item-content>
+      <div>Expandable Item #2</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+    <d2l-list grid style="width: 100%" slot="nested">
+      <d2l-list-item selectable key="nested-3" label="Nested 3">
+        <d2l-list-item-content><div>Nested item #3</div></d2l-list-item-content>
+      </d2l-list-item>
+      <d2l-list-item selectable key="nested-4" label="Nested 4">
+        <d2l-list-item-content><div>Nested item #4</div></d2l-list-item-content>
+      </d2l-list-item>
+    </d2l-list>
+  </d2l-list-item>
+  <d2l-list-item selectable key="expand-3" label="Item with no children">
+    <d2l-list-item-content>
+      <div>Item with no children</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+  </d2l-list-item>
+</d2l-list>
+```
+
 ## Pageable Lists
 
 Load-More paging functionality can be implemented in lists by placing a `d2l-pager-load-more` in `d2l-list`'s `pager` slot. The consumer must handle the `d2l-pager-load-more` event by loading more items, updating the pager state, and signalling completion by calling `complete()` on the event detail. Focus will be automatically moved on the first new item once complete. See [Paging](../../components/paging) for more details.
@@ -347,6 +408,8 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `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 |
@@ -366,6 +429,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 ### Events
 
 - `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 -->
 
 ### Breakpoints Property
@@ -417,6 +481,8 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | `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. |
 | `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. |
 | `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 |
@@ -428,6 +494,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 ### Events
 
 - `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
+- `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
 ## ListItemMixin

package/components/list/demo/demo-list-nested-lazy-load.js

@@ -0,0 +1,133 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import '../list-header.js';
+import '../../selection/selection-action.js';
+import { html, LitElement, nothing } from 'lit';
+import { getUniqueId } from '../../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+class ListDemoNestedLazyLoad extends LitElement {
+
+	static get properties() {
+		return {
+			_items: { state: true },
+		};
+	}
+
+	constructor() {
+		super();
+		this._items = new Map();
+		this._items.set('a', {
+			key: 'a',
+			primaryText: 'Item 1: Click Expand To Lazy Load Item',
+			items: [],
+			expandable: true,
+			selected: false
+		});
+		this._items.set('b', {
+			key: 'b',
+			primaryText: 'Item 2: Click Expand To Lazy Load Item',
+			items: [],
+			expandable: true,
+			selected: false
+		});
+	}
+
+	render() {
+		return html`
+			<div>
+				${this._renderList(this._items.values(), false, true)}
+			</div>
+		`;
+	}
+
+	_handleListItemToggle(e) {
+		const listItem = e.target;
+		const itemKey = e.target.key;
+		const previouslyCollapsed = !e.target.expanded;
+		const itemToAddChildren = this._items.get(itemKey);
+		if (!previouslyCollapsed && itemToAddChildren.items.length === 0) {
+			if (listItem.selected) {
+				itemToAddChildren.selected = true;
+			}
+			const uniqueId = getUniqueId();
+			itemToAddChildren.items = [{
+				key: uniqueId,
+				primaryText: `Lazy Loaded Item ${uniqueId}`,
+				items: [],
+				expandable: false,
+				selected: listItem.selected
+			}];
+
+			setTimeout(() => {
+				// fake lazy loading items
+				this._items.set(itemKey, itemToAddChildren);
+				this.requestUpdate();
+			}, 2000);
+		}
+	}
+
+	_renderIllustration(item) {
+		if (!item.imgSrc) {
+			return nothing;
+		}
+		return html`<img slot="illustration" src="${item.imgSrc}">`;
+	}
+
+	_renderItemContent(item) {
+		return html`
+			<d2l-list-item-content>
+				<div>${item.primaryText}</div>
+				<div slot="supporting-info">${item.supportingText}</div>
+			</d2l-list-item-content>`;
+	}
+
+	_renderList(items, nested, includeHeader = false) {
+		return html`
+			<d2l-list grid drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
+				${ includeHeader ? this._renderListHeader() : nothing }
+				${repeat(items, item => item.key, item => html`
+					${this._renderListItem(item)}
+				`)}
+			</d2l-list>
+		`;
+	}
+
+	_renderListHeader() {
+		return html`
+			<d2l-list-header slot="header">
+				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
+				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
+			</d2l-list-header>
+		`;
+	}
+
+	_renderListItem(item) {
+		return html`
+			<d2l-list-item
+				draggable
+				selectable
+				?selected="${item.selected}"
+				drag-handle-text="${item.primaryText}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?expandable="${item.expandable}"
+				@d2l-list-item-expand-collapse-toggled="${this._handleListItemToggle}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderNestedList(item)}
+			</d2l-list-item>
+		`;
+	}
+
+	_renderNestedList(item) {
+		if (item?.items?.length <= 0) {
+			return nothing;
+		}
+		return this._renderList(item.items, true);
+	}
+}
+
+customElements.define('d2l-demo-list-nested-lazy-load', ListDemoNestedLazyLoad);

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

@@ -0,0 +1,279 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list-item-button.js';
+import '../list.js';
+import '../../dropdown/dropdown-menu.js';
+import '../../dropdown/dropdown-more.js';
+import '../../menu/menu.js';
+import '../../menu/menu-item.js';
+import '../../paging/pager-load-more.js';
+import '../list-header.js';
+import '../../selection/selection-action.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { listDemos } from './list-demo-scenarios.js';
+import { moveLocations } from '../list-item-drag-drop-mixin.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+class ListDemoNested extends LitElement {
+
+	static get properties() {
+		return {
+			demoItemKey: { type: String, attribute: 'demo-item-key' },
+			draggable: { type: Boolean },
+			selectable: { type: Boolean },
+			disableExpandFeature: { type: Boolean, attribute: 'disable-expand-feature' },
+			expanded: { type: Boolean },
+			includeSecondaryActions: { type: Boolean, attribute: 'include-secondary-actions' },
+			includeListHeader: { type: Boolean, attribute: 'include-list-header' },
+			includeActionHref: { type: Boolean, attribute: 'include-action-href' },
+			useButtonListItem: { type: Boolean, attribute: 'use-button-item' },
+			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
+			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
+			disableListGrid: { type: Boolean, attribute: 'disable-list-grid' },
+			_items: { state: true },
+			_loadedItems: { state: true },
+			_remainingItemCount: { state: true },
+			_lastItemLoadedIndex: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [
+			css`
+				.secondary-actions {
+					padding-right: 6px;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this._items = [];
+		this._loadedItems = [];
+		this._remainingItemCount = 0;
+		this._lastItemLoadedIndex = 1;
+		this._pageSize = 1;
+	}
+
+	render() {
+		return html`
+			<div @d2l-list-items-move="${this._handleListItemsMove}">
+				${this._renderList(this._loadedItems, false, this.includeListHeader, this.showLoadMore)}
+			</div>
+		`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('demoItemKey')) {
+			this._items = listDemos[this.demoItemKey] ?? [];
+			this._loadedItems = this._items;
+		}
+		if (changedProperties.has('_items') || changedProperties.has('demoItemKey') || changedProperties.has('showLoadMore') || changedProperties.has('_lastItemLoadedIndex')) {
+			this._loadedItems = this.showLoadMore ? this._items.slice(0, this._lastItemLoadedIndex + 1) : this._items;
+			this._remainingItemCount = this.showLoadMore ? this._items.length - this._loadedItems.length : 0;
+		}
+	}
+
+	_handleButtonClick(e) {
+		// eslint-disable-next-line no-console
+		console.log('d2l-list-item-button clicked!', e);
+	}
+
+	async _handleListItemsMove(e) {
+
+		const sourceListItems = e.detail.sourceItems;
+		const target = e.detail.target;
+
+		// helper that gets the array containing item data, the item data, and the index within the array
+		const getItemInfo = (items, key) => {
+			for (let i = 0; i < items.length; i++) {
+				if (items[i].key === key) {
+					return { owner: items, item: items[i], index: i };
+				}
+				if (items[i].items && items[i].items.length > 0) {
+					const tempItemData = getItemInfo(items[i].items, key);
+					if (tempItemData) return tempItemData;
+				}
+			}
+		};
+
+		const dataToMove = [];
+
+		// remove data elements from original locations
+		sourceListItems.forEach(sourceListItem => {
+			const info = getItemInfo(this._items, sourceListItem.key);
+			if (info?.owner) {
+				info.owner.splice(info.index, 1);
+			}
+			if (info?.item) {
+				dataToMove.push(info.item);
+			}
+		});
+
+		// append data elements to new location
+		const targetInfo = getItemInfo(this._items, target.item.key);
+		let targetItems;
+		let targetIndex;
+		if (target.location === moveLocations.nest) {
+			if (!targetInfo.item.items) targetInfo.item.items = [];
+			targetItems = targetInfo.item.items;
+			targetIndex = targetItems.length;
+		} else {
+			targetItems = targetInfo?.owner;
+			if (!targetItems) return;
+			if (target.location === moveLocations.above) targetIndex = targetInfo.index;
+			else if (target.location === moveLocations.below) targetIndex = targetInfo.index + 1;
+		}
+		for (let i = dataToMove.length - 1; i >= 0; i--) {
+			targetItems.splice(targetIndex, 0, dataToMove[i]);
+		}
+
+		this.requestUpdate();
+		await this.updateComplete;
+
+		if (e.detail.keyboardActive) {
+			setTimeout(() => {
+				if (!this.shadowRoot) return;
+				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				newItem.activateDragHandle();
+			});
+		}
+
+	}
+
+	_handlePagerLoadMore(e) {
+		// mock delay consumers might have
+		setTimeout(() => {
+			this._lastItemLoadedIndex += this._pageSize;
+			e.detail.complete();
+		}, 1000);
+	}
+
+	_renderIllustration(item) {
+		if (!item.imgSrc) {
+			return nothing;
+		}
+		return html`<img slot="illustration" src="${item.imgSrc}">`;
+	}
+
+	_renderItemContent(item) {
+		return html`
+			<d2l-list-item-content>
+				<div>${item.primaryText}</div>
+				<div slot="supporting-info">${item.supportingText}</div>
+			</d2l-list-item-content>`;
+	}
+
+	_renderList(items, nested, includeHeader = false, showLoadMore = false) {
+		return html`
+			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
+				${ includeHeader ? this._renderListHeader() : nothing }
+				${repeat(items, item => item.key, item => html`
+					${this._renderListItem(item)}
+					${this._renderListItemButton(item)}
+				`)}
+				${ showLoadMore ? this._renderShowLoadMore() : nothing }
+			</d2l-list>
+		`;
+	}
+
+	_renderListHeader() {
+		return html`
+			<d2l-list-header slot="header">
+				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
+				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
+			</d2l-list-header>
+		`;
+	}
+
+	_renderListItem(item) {
+		if (this.useButtonListItem) {
+			return nothing;
+		}
+		const hasChildren = item?.items?.length > 0;
+		return html`
+			<d2l-list-item
+				action-href="${this.includeActionHref ? 'http://www.d2l.com' : ''}"
+				?draggable="${this.draggable}"
+				drag-handle-text="${item.primaryText}"
+				?drop-nested="${item.dropNested}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?selectable="${this.selectable}"
+				?expandable="${this.disableExpandFeature ? false : hasChildren}"
+				?expanded="${this.expanded}"
+				?no-primary-action="${this.noPrimaryAction}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderSecondaryActions()}
+					${this._renderNestedList(item)}
+			</d2l-list-item>
+		`;
+	}
+
+	_renderListItemButton(item) {
+		if (!this.useButtonListItem) {
+			return nothing;
+		}
+		const hasChildren = item?.items?.length > 0;
+		return html`
+			<d2l-list-item-button
+				?draggable="${this.draggable}"
+				drag-handle-text="${item.primaryText}"
+				?drop-nested="${item.dropNested}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?selectable="${this.selectable}"
+				?expandable="${this.disableExpandFeature ? false : hasChildren}"
+				?expanded="${this.expanded}"
+				@d2l-list-item-button-click="${this._handleButtonClick}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderSecondaryActions()}
+					${this._renderNestedList(item)}
+			</d2l-list-item-button>
+		`;
+	}
+
+	_renderNestedList(item) {
+		if (item?.items?.length <= 0) {
+			return nothing;
+		}
+		return this._renderList(item.items, true);
+	}
+
+	_renderSecondaryActions() {
+		if (!this.includeSecondaryActions) {
+			return nothing;
+		}
+		return html`
+			<div slot="actions" class="secondary-actions">
+				<d2l-dropdown-more text="Open!">
+					<d2l-dropdown-menu>
+						<d2l-menu label="More 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-dropdown-more>
+			</div>
+		`;
+	}
+
+	_renderShowLoadMore() {
+		return html`
+			<d2l-pager-load-more slot="pager"
+				@d2l-pager-load-more="${this._handlePagerLoadMore}"
+				?has-more="${this._lastItemLoadedIndex < this._items.length - 1}"
+				item-count="${this._items.length}"
+				page-size="${this._remainingItemCount < this._pageSize ? this._remainingItemCount : this._pageSize}">
+			</d2l-pager-load-more>
+		`;
+	}
+
+}
+
+customElements.define('d2l-demo-list-nested', ListDemoNested);