@brightspace-ui/core 1.195.0 → 1.196.3

package/components/dropdown/dropdown-button-subtle.js

@@ -14,14 +14,14 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 		return {
 			/**
 			 * A description to be added to the opener button for accessibility when text on button does not provide enough context
+			 * @type {string}
 			 */
 			description: { type: String },
 			/**
 			 * REQUIRED: Text for the button
+			 * @type {string}
 			 */
-			text: {
-				type: String
-			}
+			text: { type: String }
 		};
 	}
 

package/components/dropdown/dropdown-button.js

@@ -15,6 +15,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 		return {
 			/**
 			 * Optionally render button as primary button
+			 * @type {boolean}
 			 */
 			primary: {
 				type: Boolean,
@@ -23,6 +24,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 
 			/**
 			 * REQUIRED: Text for the button
+			 * @type {string}
 			 */
 			text: {
 				type: String

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

@@ -29,12 +29,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", and "right".
+			 * @type {object}
 			 */
 			boundary: {
 				type: Object,
 			},
 			/**
 			 * Override default max-width (undefined). Specify a number that would be the px value.
+			 * @type {number}
 			 */
 			maxWidth: {
 				type: Number,
@@ -43,6 +45,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override default min-width (undefined). Specify a number that would be the px value.
+			 * @type {number}
 			 */
 			minWidth: {
 				type: Number,
@@ -51,6 +54,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
+			 * @type {number}
 			 */
 			maxHeight: {
 				type: Number,
@@ -58,6 +62,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override the breakpoint at which mobile styling is used. Defaults to 616px.
+			 * @type {number}
 			 */
 			mobileBreakpointOverride: {
 				type: Number,
@@ -65,6 +70,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
+			 * @type {number}
 			 */
 			minHeight: {
 				type: Number,
@@ -73,6 +79,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt-out of showing a close button in the footer of tray-style mobile dropdowns.
+			 * @type {boolean}
 			 */
 			noMobileCloseButton: {
 				type: Boolean,
@@ -90,6 +97,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of automatically closing on focus or click outside of the dropdown content
+			 * @type {boolean}
 			 */
 			noAutoClose: {
 				type: Boolean,
@@ -98,6 +106,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of auto-sizing
+			 * @type {boolean}
 			 */
 			noAutoFit: {
 				type: Boolean,
@@ -106,6 +115,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of focus being automatically moved to the first focusable element in the dropdown when opened
+			 * @type {boolean}
 			 */
 			noAutoFocus: {
 				type: Boolean,
@@ -114,6 +124,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render with no padding
+			 * @type {boolean}
 			 */
 			noPadding: {
 				type: Boolean,
@@ -122,6 +133,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render the footer with no padding (if it has content)
+			 * @type {boolean}
 			 */
 			noPaddingFooter: {
 				type: Boolean,
@@ -130,6 +142,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render the header with no padding (if it has content)
+			 * @type {boolean}
 			 */
 			noPaddingHeader: {
 				type: Boolean,
@@ -138,6 +151,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render without a pointer
+			 * @type {boolean}
 			 */
 			noPointer: {
 				type: Boolean,
@@ -162,6 +176,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
  			* Optionally render a d2l-focus-trap around the dropdown content
+			 * @type {boolean}
  			*/
 			trapFocus: {
 				type: Boolean,
@@ -170,6 +185,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Provide custom offset, positive or negative
+			 * @type {string}
 			 */
 			verticalOffset: {
 				type: String,
@@ -549,6 +565,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			this._showBackdrop = false;
 			await this.updateComplete;
 
+			/** Dispatched when the dropdown is closed */
 			this.dispatchEvent(new CustomEvent('d2l-dropdown-close', { bubbles: true, composed: true }));
 
 		}
@@ -656,6 +673,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				await this.updateComplete;
 			}
 
+			/** Dispatched when the dropdown position finishes adjusting */
 			this.dispatchEvent(new CustomEvent('d2l-dropdown-position', { bubbles: true, composed: true }));
 		};
 
@@ -1006,6 +1024,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				content.focus();
 			}
 		}
+		/** Dispatched when user focus enters the dropdown content (trap-focus option only) */
 		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
 	}
 
@@ -1054,16 +1073,16 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			'd2l-dropdown-content-footer': this._hasFooter || (this._useMobileStyling && this.mobileTray && !this.noMobileCloseButton)
 		};
 
-		let dropdownContentSlots = html`	
-			<div  
-			id="d2l-dropdown-wrapper" 
-			class="d2l-dropdown-content-width" 
+		let dropdownContentSlots = html`
+			<div
+			id="d2l-dropdown-wrapper"
+			class="d2l-dropdown-content-width"
 			style=${styleMap(widthStyle)}
-			?data-closing="${this._closing}">				
+			?data-closing="${this._closing}">
 				<div class=${classMap(topClasses)} style=${styleMap(headerStyle)}>
 					<slot name="header" @slotchange="${this.__handleHeaderSlotChange}"></slot>
 				</div>
-				<div 
+				<div
 				class="d2l-dropdown-content-container"
 				style=${styleMap(contentStyle)}
 				@scroll=${this.__toggleScrollStyles}>

package/components/dropdown/dropdown-content.js

@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownContent extends DropdownContentMixin(LitElement) {
 

package/components/dropdown/dropdown-context-menu.js

@@ -14,6 +14,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
 		return {
 			/**
 			 * REQUIRED: Label for the context-menu button
+			 * @type {string}
 			 */
 			text: {
 				type: String
@@ -21,6 +22,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
 
 			/**
 			 * Attribute for busy/rich backgrounds
+			 * @type {boolean}
 			 */
 			translucent: {
 				type: Boolean

package/components/dropdown/dropdown-menu.js

@@ -9,9 +9,6 @@ import { ThemeMixin } from '../../mixins/theme-mixin.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 

package/components/dropdown/dropdown-more.js

@@ -14,6 +14,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
 		return {
 			/**
 			 * REQUIRED: Label for the more button
+			 * @type {string}
 			 */
 			text: {
 				type: String
@@ -21,6 +22,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
 
 			/**
 			 * Attribute for busy/rich backgrounds
+			 * @type {boolean}
 			 */
 			translucent: {
 				type: Boolean

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

@@ -4,6 +4,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		return {
 			/**
 			 * Disables the dropdown opener
+			 * @type {boolean}
 			 */
 			disabled: {
 				type: Boolean,
@@ -19,6 +20,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 			/**
 			 * Prevents the dropdown from opening automatically on or on key press
+			 * @type {boolean}
 			 */
 			noAutoOpen: {
 				type: Boolean,

package/components/dropdown/dropdown-tabs.js

@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownTabs extends DropdownContentMixin(LitElement) {
 

package/components/filter/README.md

@@ -93,7 +93,7 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 </d2l-filter>
 ```
 
-### Single Vs Multi Dimensional 
+### Single Vs Multi Dimensional
 A filter can be a single dimension (like picking from a list of courses) or offer multiple dimensions (filter by role, or department, or something else). Single-dimension filters can be used side-by-side to promote filters that are more commonly used, while tucking less-used filters into a multi-dimensional filter.
 
 <!-- docs: demo code autoSize:false align:start size:large -->
@@ -149,7 +149,7 @@ A filter can be a single dimension (like picking from a list of courses) or offe
         </d2l-filter-dimension-set>
     </d2l-filter>
 </div>
-``` 
+```
 
 ### Accessibility
 The filter will announce changes to filter selections, search results, and when filters are being cleared. It is up to the consumer to then announce when these changes have propagated and resulted in new/loaded/updated data on the page. This is very important for screenreader users who are not able to visually see the page changing behind the filter control as selections are made.
@@ -191,7 +191,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
     }, 100);
   });
 </script>
-<!-- docs: end hidden content --> 
+<!-- docs: end hidden content -->
 <d2l-filter>
   <d2l-filter-dimension-set key="course" text="Course" >
     <d2l-filter-dimension-set-value key="art" text="Art" selected><d2l-filter-dimension-set-value>
@@ -239,7 +239,7 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#fil
 **Coming Soon!**
 
 <!-- docs: start hidden content -->
-## Future Enhancements
+## Future Improvements
 
 * ability to delay change events until the user has pressed an apply button (see [#341](https://github.com/BrightspaceUI/core/issues/341))
 

package/components/focus-trap/README.md

@@ -29,8 +29,4 @@ The `d2l-focus-trap` is a generic container that will trap user focus from leavi
 ### Events
 
 - `d2l-focus-trap-enter`: dispatched when focus enters the trap. May be used to override initial focus placement when focus enters the trap.
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

package/components/form/docs/form-element-mixin.md

@@ -166,7 +166,3 @@ customElements.define('my-form-element', MyFormElement);
 	- If you need to create a custom form element that wraps native form elements like `input`, `select` and `textarea`, more information can be found here.
 - **[Nesting Custom Form Elements](./form-element-nesting.md)**
 	- If you need to create a custom form element that nests other custom form elements like `d2l-input-text` inside its shadow DOM, more information can be found here.
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!

package/components/html-block/README.md

@@ -1,6 +1,6 @@
 # HTML Content Display
 
-Components to assist with displaying user-authored HTML within your webpage. 
+Components to assist with displaying user-authored HTML within your webpage.
 
 ## HTML Block [d2l-html-block]
 
@@ -110,7 +110,7 @@ Examples are provided to display how user-authored math can be embedded within y
 <script type="module">
   import '@brightspace-ui/core/components/html-block/html-block.js';
   import '@brightspace-ui/core/components/icons/icon.js';
-  
+
 </script>
 <script>
 	window.D2L = {};
@@ -132,8 +132,3 @@ Examples are provided to display how user-authored math can be embedded within y
 	</template>
 </d2l-html-block>
 ```
-<!-- docs: start hidden content -->
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->

package/components/icons/images/tier3/rubric-graded.svg

@@ -1,4 +1,4 @@
 <svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
   <path fill="#494c4e" d="M17.641,17.98l-9.89,11.5a1.488,1.488,0,0,1-1.13.52.277.277,0,0,1-.09-.01.22.22,0,0,1-.08.01,1.509,1.509,0,0,1-1.01-.39l-4.95-4.5a1.5,1.5,0,1,1,2.02-2.22l3.9,3.55,8.95-10.42a1.5,1.5,0,1,1,2.28,1.96Z"/>
-  <path fill="#494c4e" d="M26,0H4A4.012,4.012,0,0,0,0,4V20.85a3.5,3.5,0,0,1,1.505-.35A3.492,3.492,0,0,1,2,20.545V16H7v5H3.3a3.439,3.439,0,0,1,.556.411L5.6,23H6.729L9,20.356V16h3.741l1.1-1.282A3.48,3.48,0,0,1,16,13.551V9h5v5H18.3a3.417,3.417,0,0,1,1.547,2H21v5H17.681L14,25.28V28H11.661l-1.72,2H26a4.012,4.012,0,0,0,4-4V4A4.012,4.012,0,0,0,26,0ZM7,14H2V9H7ZM7,7H2V4A2.006,2.006,0,0,1,4,2H7Zm7,7H9V9h5Zm0-7H9V2h5Zm7,21H16V23h5ZM21,7H16V2h5Zm7,19a2.006,2.006,0,0,1-2,2H23V23h5Zm0-5H23V16h5Zm0-7H23V9h5Zm0-7H23V2h3a2.006,2.006,0,0,1,2,2Z"/></svg>
-</svg>
+  <path fill="#494c4e" d="M26,0H4A4.012,4.012,0,0,0,0,4V20.85a3.5,3.5,0,0,1,1.505-.35A3.492,3.492,0,0,1,2,20.545V16H7v5H3.3a3.439,3.439,0,0,1,.556.411L5.6,23H6.729L9,20.356V16h3.741l1.1-1.282A3.48,3.48,0,0,1,16,13.551V9h5v5H18.3a3.417,3.417,0,0,1,1.547,2H21v5H17.681L14,25.28V28H11.661l-1.72,2H26a4.012,4.012,0,0,0,4-4V4A4.012,4.012,0,0,0,26,0ZM7,14H2V9H7ZM7,7H2V4A2.006,2.006,0,0,1,4,2H7Zm7,7H9V9h5Zm0-7H9V2h5Zm7,21H16V23h5ZM21,7H16V2h5Zm7,19a2.006,2.006,0,0,1-2,2H23V23h5Zm0-5H23V16h5Zm0-7H23V9h5Zm0-7H23V2h3a2.006,2.006,0,0,1,2,2Z"/>
+</svg>

package/components/list/README.md

@@ -495,7 +495,7 @@ This event includes a detail object with helper methods attached to it.
 
 
 <!-- docs: start hidden content -->
-## Future Enhancements
+## Future Improvements
 
 - Paging: integration with "load more", "scroll" and "numeric" paging mechanisms
 

package/components/list/demo/list-item-custom.js

@@ -32,7 +32,7 @@ const demoData = {
 	'L3-1': {
 		primaryText: 'Glaciation (L3)',
 		supportingText: 'Supporting Info',
-		nested: [ 'L4-1' ]
+		nested: [ 'L4-1', 'L4-2' ]
 	},
 	'L3-2': {
 		primaryText: 'Weathering (L3)',
@@ -45,7 +45,11 @@ const demoData = {
 	'L4-1': {
 		primaryText: 'Ice Sheets',
 		supportingText: 'Supporting Info',
-		nested: [ 'L5-1' /*, 'L5-2', 'L5-3', 'L5-4', 'L5-5'*/ ]
+		nested: [ /*'L5-1', 'L5-2', 'L5-3', 'L5-4', 'L5-5'*/ ]
+	},
+	'L4-2': {
+		primaryText: 'Alpine Glaciers',
+		supportingText: 'Supporting Info'
 	},
 	'L5-1': {
 		primaryText: 'Topic L5-1',
@@ -178,7 +182,7 @@ class DemoListItemCustom extends ListItemMixin(LitElement) {
 
 		if (demoData[this.key].nested && demoData[this.key].nested.length > 0) {
 			itemTemplates.nested = html`
-				<d2l-list separators="all">
+				<d2l-list grid separators="all">
 					${demoData[this.key].nested.map(itemKey => html`<d2l-demo-list-item-custom selectable key="${itemKey}"></d2l-demo-list-item-custom>`)}
 				</d2l-list>
 			`;

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

@@ -23,13 +23,13 @@
 	</head>
 	<body unresolved>
 
-		<d2l-demo-page page-title="d2l-list-item (nested)">
+		<d2l-demo-page page-title="d2l-list (nested)">
 
 			<h2>Nested</h2>
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list grid>
 						<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>
@@ -39,80 +39,24 @@
 								<div>Earth Sciences (L1)</div>
 								<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
 							</d2l-list-item-content>
-							<d2l-list slot="nested" separators="all">
+							<d2l-list slot="nested" grid separators="all">
 								<d2l-list-item selectable key="L2-1" label="Label for L2-1">
 									<d2l-list-item-content>
 										<div>Introductory Earth Sciences (L2)</div>
 										<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
 									</d2l-list-item-content>
-									<d2l-list slot="nested" separators="all">
+									<d2l-list slot="nested" grid separators="all">
 										<d2l-list-item selectable key="L3-1" label="Label for L3-1">
 											<d2l-list-item-content>
 												<div>Glaciation (L3)</div>
 												<div slot="supporting-info">Supporting Info</div>
 											</d2l-list-item-content>
-											<d2l-list slot="nested" separators="all">
+											<d2l-list slot="nested" grid separators="all">
 												<d2l-list-item selectable key="L4-1" label="Label for L4-1">
 													<d2l-list-item-content>
 														<div>Ice Sheets (L4)</div>
 														<div slot="supporting-info">Supporting Info</div>
 													</d2l-list-item-content>
-													<d2l-list slot="nested" separators="all">
-														<d2l-list-item selectable key="L5-1" label="Label for L5-1">
-															<d2l-list-item-content>
-																<div>Topic 1 (L5)</div>
-																<div slot="supporting-info">Supporting Info</div>
-															</d2l-list-item-content>
-														</d2l-list-item>
-														<d2l-list-item selectable key="L5-2" label="Label for L5-2">
-															<d2l-list-item-content>
-																<div>Topic 2 (L5)</div>
-																<div slot="supporting-info">Supporting Info</div>
-															</d2l-list-item-content>
-															<d2l-list slot="nested" separators="all">
-																<d2l-list-item selectable key="L6-1" label="Label for L6-1">
-																	<d2l-list-item-content>
-																		<div>Sub-Topic 1 (L6)</div>
-																		<div slot="supporting-info">Supporting Info</div>
-																	</d2l-list-item-content>
-																	<d2l-list slot="nested" separators="all">
-																		<d2l-list-item selectable key="L7-1" label="Label for L7-1">
-																			<d2l-list-item-content>
-																				<div>Sub-Topic 1 (L7)</div>
-																				<div slot="supporting-info">Supporting Info</div>
-																			</d2l-list-item-content>
-																			<d2l-list slot="nested" separators="all">
-																				<d2l-list-item selectable selected key="L8-1" label="Label for L8-1">
-																					<d2l-list-item-content>
-																						<div>Sub-Topic 1 (L8)</div>
-																						<div slot="supporting-info">Supporting Info</div>
-																					</d2l-list-item-content>
-																				</d2l-list-item>
-																				<d2l-list-item selectable key="L8-2" label="Label for L8-2">
-																					<d2l-list-item-content>
-																						<div>Sub-Topic 2 (L8)</div>
-																						<div slot="supporting-info">Supporting Info</div>
-																					</d2l-list-item-content>
-																				</d2l-list-item>
-																			</d2l-list>
-																		</d2l-list-item>
-																		<d2l-list-item selectable key="L7-2" label="Label for L7-2">
-																			<d2l-list-item-content>
-																				<div>Sub-Topic 2 (L7)</div>
-																				<div slot="supporting-info">Supporting Info</div>
-																			</d2l-list-item-content>
-																		</d2l-list-item>
-																	</d2l-list>
-																</d2l-list-item>
-																<d2l-list-item selectable key="L6-2" label="Label for L6-2">
-																	<d2l-list-item-content>
-																		<div>Sub-Topic 2 (L6)</div>
-																		<div slot="supporting-info">Supporting Info</div>
-																	</d2l-list-item-content>
-																</d2l-list-item>
-															</d2l-list>
-														</d2l-list-item>
-													</d2l-list>
 												</d2l-list-item>
 												<d2l-list-item selectable key="L4-2" label="Label for L4-2">
 													<d2l-list-item-content>
@@ -175,7 +119,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list grid>
 						<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>

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

@@ -207,6 +207,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	_focusNextCell(num, forward = true) {
 		let cell = null;
 		let focusable = null;
+
 		do {
 			cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 			if (cell) {
@@ -215,26 +216,31 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			if (focusable) focusable.focus();
 			forward ? ++num : --num;
 		} while (cell && !focusable);
+
+		if (!cell) {
+			// wrap to first/last item
+			if (forward) this._focusNextCell(1);
+			else this._focusLastItem();
+		}
+
 		return focusable;
 	}
 
 	_focusNextRow(previous = false, num = 1) {
-		let listItem = previous ?
-			getPreviousAncestorSibling(this, (node) => node.role === 'rowgroup') :
-			getNextAncestorSibling(this, (node) => node.role === 'rowgroup');
-		if (!listItem || !listItem.shadowRoot) return;
-		while (num > 1) {
-			const nextItem = previous ? listItem.previousElementSibling : listItem.nextElementSibling;
-			if (!nextItem) {
-				break; //we ran out of items
-			}
-			listItem = nextItem;
-			--num;
+
+		let listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+
+		while (num > 0) {
+			const tempListItem = (previous ? this._getPreviousFlattenedListItem(listItem) : this._getNextFlattenedListItem(listItem));
+			if (tempListItem) listItem = tempListItem;
+			else break;
+			num--;
 		}
-		const row = listItem.shadowRoot.querySelector('[role="gridrow"]');
-		if (!row) return;
 
-		row._focusCellItem(this._cellNum, this._cellFocusedItem);
+		if (!listItem) return;
+		const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
+		listItemRow._focusCellItem(this._cellNum, this._cellFocusedItem);
+
 	}
 
 	_focusNextWithinCell(node, num = 1) {
@@ -280,6 +286,38 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return position;
 	}
 
+	_getNextFlattenedListItem(listItem) {
+
+		// check for nested list first; this check needs to account for standard list-items as well as custom
+		const nestedList = listItem.querySelector('[slot="nested"]') || listItem.shadowRoot.querySelector('d2l-list');
+		if (nestedList) {
+			const nestedListItem = [...nestedList.children].find(node => node.role === 'rowgroup');
+			if (nestedListItem) return nestedListItem;
+		}
+
+		const getNextListItem = listItem => {
+
+			// check for sibling list-item
+			let nextElement = listItem.nextElementSibling;
+			while (nextElement) {
+				if (nextElement.role === 'rowgroup') return nextElement;
+				nextElement = nextElement.nextElementSibling;
+			}
+
+			// no sibling list-item was found so check for sibling of parent list-item if nested, recursively if necessary
+			const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+			if (list.slot !== 'nested' && !(list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) return;
+
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return getNextListItem(parentListItem);
+
+		};
+
+		// check for sibling list-item or ancestors sibling list-items
+		return getNextListItem(listItem);
+
+	}
+
 	_getNextSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;
@@ -289,6 +327,39 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return isComposedAncestor(cell, sibling) ? sibling : null;
 	}
 
+	_getPreviousFlattenedListItem(listItem) {
+
+		let previousElement = listItem.previousElementSibling;
+
+		// try to get the previous list-item in the current list sub-tree including nested
+		while (previousElement) {
+			if (previousElement.role === 'rowgroup') {
+
+				// this check needs to account for standard list-items as well as custom
+				const nestedList = previousElement.querySelector('[slot="nested"]') || previousElement.shadowRoot.querySelector('d2l-list');
+				if (nestedList) {
+					const nestedListItems = [...nestedList.children].filter(node => node.role === 'rowgroup');
+					if (nestedListItems && nestedListItems.length > 0) {
+						return nestedListItems[nestedListItems.length - 1];
+					}
+				}
+				return previousElement;
+
+			}
+			previousElement = previousElement.previousElementSibling;
+		}
+
+		// no previous list-item was found in the current list sub-tree so get the parent list item if currently in nested
+		const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+
+		// this check needs to account for standard list-items as well as custom
+		if (list.slot === 'nested' || (list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) {
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return parentListItem;
+		}
+
+	}
+
 	_getPrevSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;