@brightspace-ui/core 1.196.2 → 1.197.2

package/components/form/form-mixin.js

@@ -106,6 +106,7 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 
 		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
 			this._dirty = true;
+			/** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
 			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
 		}
 

package/components/form/form-native.js

@@ -8,7 +8,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
  * These interactive controls are submitted using a native HTML form submission.
  * @slot - The native and custom form elements that participate in validation and submission
  * @fires submit - Dispatched when the form is submitted. Cancelling this event will prevent form submission.
- * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class FormNative extends FormMixin(LitElement) {
 

package/components/form/form.js

@@ -6,7 +6,6 @@ import { FormMixin } from './form-mixin.js';
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
  * @slot - The native and custom form elements that participate in validation and submission
- * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class Form extends FormMixin(LitElement) {
 

package/components/inputs/input-date-range.js

@@ -28,7 +28,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
 
 /**
  * A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 calendar date format ("YYYY-MM-DD").
- * @fires change - Dispatched when there is a change to selected start date or selected end date. "start-value" and "end-value" correspond to the selected values and are formatted in ISO 8601 calendar date format ("YYYY-MM-DD").
+ * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
 class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
 
@@ -36,14 +36,17 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 		return {
 			/**
 			 * Automatically shifts end date when start date changes to keep same range
+			 * @type {boolean}
 			 */
 			autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
 			/**
 			 * Hides the start and end labels visually
+			 * @type {boolean}
 			 */
 			childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
 			/**
 			 * Disables the inputs
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
@@ -54,6 +57,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
 			 * Indicates if the end calendar dropdown is open
+			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
 			/**
@@ -63,6 +67,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			endValue: { attribute: 'end-value', reflect: true, type: String },
 			/**
 			 * Validates on inclusive range (i.e., it is valid for start and end dates to be equal)
+			 * @type {boolean}
 			 */
 			inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
 			/**
@@ -72,6 +77,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			label: { type: String, reflect: true },
 			/**
 			 * Hides the fieldset label visually
+			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
 			/**
@@ -86,6 +92,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			minValue: { attribute: 'min-value', reflect: true, type: String },
 			/**
 			 * Indicates that values are required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**
@@ -96,6 +103,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
 			 * Indicates if the start calendar dropdown is open
+			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },
 			/**

package/components/inputs/input-date-time-range-to.js

@@ -12,14 +12,17 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 		return {
 			/**
 			 * Force block (stacked) range display if true
+			 * @type {boolean}
 			 */
 			blockDisplay: { attribute: 'block-display', type: Boolean },
 			/**
 			 * Display localized "to" between the left and right slot contents
+			 * @type {boolean}
 			 */
 			displayTo: { attribute: 'display-to', type: Boolean },
 			/**
 			 * Add margin-top for case where there would be a label above the range
+			 * @type {boolean}
 			 */
 			topMargin: { attribute: 'top-margin', type: Boolean },
 			_blockDisplay: { attribute: false, type: Boolean }

package/components/inputs/input-date-time-range.js

@@ -59,9 +59,9 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
 
 /**
  * A component consisting of two input-date-time components - one for start of range and one for end of range. The time input only appears once a date is selected.
- * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. "start-value" and "end-value" correspond to the selected values and are formatted in ISO 8601 combined date and time format ("YYYY-MM-DDTHH:mm:ss.sssZ").
  * @slot start - Optional content that would appear below the start input-date-time
  * @slot end - Optional content that would appear below the end input-date-time
+ * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
 class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
 
@@ -69,14 +69,17 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 		return {
 			/**
 			 * Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.
+			 * @type {boolean}
 			 */
 			autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
 			/**
 			 * Hides the start and end labels visually
+			 * @type {boolean}
 			 */
 			childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
 			/**
 			 * Disables the inputs
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
@@ -87,6 +90,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
 			 * Indicates if the end date or time dropdown is open
+			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
 			/**
@@ -96,6 +100,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			endValue: { attribute: 'end-value', reflect: true, type: String },
 			/**
 			 * Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)
+			 * @type {boolean}
 			 */
 			inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
 			/**
@@ -105,10 +110,12 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			label: { type: String, reflect: true },
 			/**
 			 * Hides the fieldset label visually
+			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
 			/**
 			 * Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.
+			 * @type {boolean}
 			 */
 			localized: { reflect: true, type: Boolean },
 			/**
@@ -123,6 +130,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			minValue: { attribute: 'min-value', reflect: true, type: String },
 			/**
 			 * Indicates that values are required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**
@@ -133,6 +141,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
 			 * Indicates if the start date or time dropdown is open
+			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },
 			/**

package/components/inputs/input-date-time.js

@@ -37,7 +37,7 @@ function _getFormattedDefaultTime(defaultValue) {
 
 /**
  * A component that consists of a "<d2l-input-date>" and a "<d2l-input-time>" component. The time input only appears once a date is selected. This component displays the "value" if one is specified, and reflects the selected value when one is selected or entered.
- * @fires change - Dispatched when there is a change to selected date or selected time. "value" corresponds to the selected value and is formatted in ISO 8601 combined date and time format ("YYYY-MM-DDTHH:mm:ss.sssZ").
+ * @fires change - Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
 class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement))))) {
 
@@ -45,14 +45,17 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		return {
 			/**
 			 * Disables the input
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
 			/**
 			 * Hides the fieldset label visually
+			 * @type {boolean}
 			 */
 			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
 			/**
 			 * Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.
+			 * @type {boolean}
 			 */
 			localized: { reflect: true, type: Boolean },
 			/**
@@ -67,10 +70,12 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 			minValue: { attribute: 'min-value', reflect: true, type: String },
 			/**
 			 * Indicates if the date or time dropdown is open
+			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
 			/**
 			 * Indicates that a value is required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**
@@ -80,6 +85,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 			timeDefaultValue: { attribute: 'time-default-value', reflect: true, type: String },
 			/**
 			 * Value of the input
+			 * @type {string}
 			 */
 			value: { type: String },
 			_maxValueLocalized: { type: String },

package/components/inputs/input-date.js

@@ -25,7 +25,7 @@ export function formatISODateInUserCalDescriptor(val) {
 
 /**
  * A component that consists of a text input field for typing a date and an attached calendar (d2l-calendar) dropdown. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the calendar or entered in the text input.
- * @fires change - Dispatched when there is a change to selected date. "value" corresponds to the selected value and is formatted in ISO 8601 calendar date format ("YYYY-MM-DD").
+ * @fires change - Dispatched when there is a change to selected date. `value` corresponds to the selected value and is formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
 class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
 
@@ -33,14 +33,17 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 		return {
 			/**
 			 * Disables the input
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
 			/**
 			 * Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
+			 * @type {string}
 			 */
 			emptyText: { type: String, attribute: 'empty-text' },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
+			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
 			/**
@@ -60,14 +63,17 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 			noValidateMinMax: { attribute: 'novalidateminmax', type: Boolean },
 			/**
 			 * Indicates if the calendar dropdown is open
+			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
 			/**
 			 * Indicates that a value is required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**
 			 * Value of the input
+			 * @type {string}
 			 */
 			value: { type: String },
 			_hiddenCalendarHeight: { type: Number },

package/components/inputs/input-fieldset.js

@@ -15,14 +15,17 @@ class InputFieldset extends SkeletonMixin(RtlMixin(LitElement)) {
 		return {
 			/**
 			 * REQUIRED: Label for the fieldset
+			 * @type {string}
 			 */
 			label: { type: String },
 			/**
 			 * Hides the label visually
+			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
 			/**
 			 * Indicates that a value is required for inputs in the fieldset
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true }
 		};

package/components/inputs/input-radio-styles.js

@@ -33,7 +33,7 @@ export const radioStyles = css`
 		border-color: var(--d2l-color-galena);
 		border-width: 1px;
 	}
-	.d2l-hovering.d2l-input-radio,
+	.d2l-input-radio.d2l-hovering,
 	.d2l-input-radio:hover,
 	.d2l-input-radio:focus,
 	.d2l-input-radio-label > input[type="radio"]:hover,
@@ -47,6 +47,7 @@ export const radioStyles = css`
 		border-color: var(--d2l-color-cinnabar);
 	}
 	.d2l-input-radio:disabled,
+	.d2l-input-radio.d2l-disabled,
 	.d2l-input-radio-label > input[type="radio"]:disabled {
 		opacity: 0.5;
 	}

package/components/inputs/input-time-range.js

@@ -35,7 +35,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
 
 /**
  * A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 time format ("hh:mm:ss").
- * @fires change - Dispatched when there is a change to selected start time or selected end time. "start-value" and "end-value" correspond to the selected values and are formatted in ISO 8601 calendar time format ("hh:mm:ss").
+ * @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
  */
 
 class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
@@ -44,14 +44,17 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 		return {
 			/**
 			 * Automatically shifts end time when start time changes to keep same range
+			 * @type {boolean}
 			 */
 			autoShiftTimes: { attribute: 'auto-shift-times', reflect: true, type: Boolean },
 			/**
 			 * Hides the start and end labels visually
+			 * @type {boolean}
 			 */
 			childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
 			/**
 			 * Disables the inputs
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
@@ -62,6 +65,7 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
 			 * Indicates if the end dropdown is open
+			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
 			/**
@@ -71,10 +75,12 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			endValue: { attribute: 'end-value', reflect: true, type: String },
 			/**
 			 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
+			 * @type {boolean}
 			 */
 			enforceTimeIntervals: { attribute: 'enforce-time-intervals', reflect: true, type: Boolean },
 			/**
 			 * Validates on inclusive range (i.e., it is valid for start and end times to be equal)
+			 * @type {boolean}
 			 */
 			inclusiveTimeRange: { attribute: 'inclusive-time-range', reflect: true, type: Boolean },
 			/**
@@ -84,10 +90,12 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			label: { type: String, reflect: true },
 			/**
 			 * Hides the fieldset label visually
+			 * @type {boolean}
 			 */
 			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
 			/**
 			 * Indicates that values are required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**
@@ -98,6 +106,7 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
 			 * Indicates if the start dropdown is open
+			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },
 			/**

package/components/inputs/input-time.js

@@ -109,7 +109,7 @@ function initIntervals(size, enforceTimeIntervals) {
 
 /**
  * A component that consists of a text input field for typing a time and an attached dropdown for time selection. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the dropdown or entered in the text input.
- * @fires change - Dispatched when there is a change to selected time. "value" corresponds to the selected value and is formatted in ISO 8601 time format ("hh:mm:ss").
+ * @fires change - Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`).
  */
 class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement))) {
 
@@ -122,14 +122,17 @@ class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement)
 			defaultValue: { type: String, attribute: 'default-value' },
 			/**
 			 * Disables the input
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
 			/**
 			 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
+			 * @type {boolean}
 			 */
 			enforceTimeIntervals: { type: Boolean, attribute: 'enforce-time-intervals' },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
+			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
 			/**
@@ -139,10 +142,12 @@ class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement)
 			maxHeight: { type: Number, attribute: 'max-height' },
 			/**
 			 * Indicates if the dropdown is open
+			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
 			/**
 			 * Indicates that a value is required
+			 * @type {boolean}
 			 */
 			required: { type: Boolean, reflect: true },
 			/**

package/components/link/README.md

@@ -69,7 +69,7 @@ To make your usage of `d2l-link` accessible, use the following property when app
 |--|--|
 | `aria-label` | Use when text in link does not provide enough context. |
 
-## Applying link styles to native `<a>` elements
+## Applying link styles to native anchor elements
 
 Alternately, you can apply link styles to a native `<a>` element by importing the styles and placing the `d2l-link` CSS class on the element.
 

package/components/list/README.md

@@ -15,13 +15,13 @@ A list displays a collection of objects of the same type. A list is primarily us
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-item>
+  <d2l-list-item label="List Item 1">
     <d2l-list-item-content>
       <div>Regular list item</div>
       <div slot="secondary">Secondary information</div>
     </d2l-list-item-content>
   </d2l-list-item>
-  <d2l-list-item href="http://www.d2l.com" key="1">
+  <d2l-list-item href="http://www.d2l.com" key="1" label="List Item 2">
     <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg" />
     <d2l-list-item-content>
       <div>More exciting list item</div>
@@ -38,7 +38,7 @@ A list displays a collection of objects of the same type. A list is primarily us
       </d2l-dropdown-more>
     </div>
   </d2l-list-item>
-  <d2l-list-item href="http://www.d2l.com" selectable key="2" selected>
+  <d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="List Item 3">
     <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg">
     <d2l-list-item-content>
       <div>Selectable list item (selected)</div>
@@ -115,14 +115,14 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-item selectable>
+  <d2l-list-item selectable label="List Item 1">
     <d2l-list-item-content>
       <div>Regular list item</div>
       <div slot="secondary">Secondary information</div>
       <div slot="supporting-info">Supporting information</div>
     </d2l-list-item-content>
   </d2l-list-item>
-  <d2l-list-item selectable>
+  <d2l-list-item selectable label="List Item 2">
     <d2l-list-item-content>
       <div>Regular list item 2</div>
       <div slot="secondary">Secondary information</div>
@@ -152,6 +152,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 - `getListItemCount`: returns the length of the items within the list
 - `getListItemIndex` (Object): returns the index of the given element within the list
+- `getSelectedListItems` (Array): returns the selected items; pass `true` to include nested lists
 - `getSelectionInfo` (Object): returns a `SelectionInfo` object containing the `state` (`none`, `some`, `all`), and the `keys` (Array) for the selected items
 
 ## Selection Lists
@@ -244,7 +245,7 @@ Here is a simple component example that adds drag 'n' drop to a list:
     render() {
       const listItems = this.list.map((item) => {
         return html`
-          <d2l-list-item draggable key="${item.key}">
+          <d2l-list-item draggable key="${item.key}" label="Draggable List Item">
             <d2l-list-item-content>
               ${item.content}
               <div slot="secondary">Secondary information</div>
@@ -299,7 +300,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
       <div slot="supporting-info">Supporting information</div>
     </d2l-list-item-content>
   </d2l-list-item>
-  <d2l-list-item selectable key="ast" label="Atronomy">
+  <d2l-list-item selectable key="ast" label="Astronomy">
     <d2l-list-item-content>
       <div>Astronomy</div>
       <div slot="supporting-info">Supporting information</div>
@@ -334,7 +335,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 </script>
 
 <d2l-list>
-  <d2l-list-item href="http://www.d2l.com" selectable key="3">
+  <d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
     <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg" />
     <d2l-list-item-content>
       <div>Geomorphology and GIS </div>
@@ -432,7 +433,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-item-button href="http://www.d2l.com" selectable key="1">
+  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
     <d2l-list-item-content>
       <div>Geomorphology and GIS </div>
       <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
@@ -464,7 +465,7 @@ The `d2l-list-item-content` provides additional consistent layout for primary an
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-item>
+  <d2l-list-item label="List Item 1">
     <d2l-list-item-content>
       <div>Item 1</div>
       <div slot="secondary">Secondary Info for item 1</div>

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>
 			`;