@brightspace-ui/core 1.186.0 → 1.189.0

package/components/filter/filter.js

@@ -44,6 +44,11 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * Disables the dropdown opener for the filter
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Indicates if the filter is open
+			 * @type {boolean}
+			 */
+			opened: { type: Boolean, reflect: true },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
@@ -132,6 +137,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	constructor() {
 		super();
 		this.disabled = false;
+		this.opened = false;
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
 		this._openedDimensions = [];
@@ -163,12 +169,25 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		description += `. ${this.localize('components.filter.filterCountDescription', { number: this._totalAppliedCount })}`;
 
 		const dropdownContent = singleDimension ? html`
-				<d2l-dropdown-content min-width="285" max-width="420" mobile-tray="right" mobile-breakpoint="768" no-padding-header no-padding>
+				<d2l-dropdown-content
+					min-width="285"
+					max-width="420"
+					mobile-tray="right"
+					mobile-breakpoint="768"
+					no-padding-header
+					no-padding
+					?opened="${this.opened}">
 					${header}
 					${dimensions}
 				</d2l-dropdown-content>`
 			: html`
-				<d2l-dropdown-menu min-width="285" max-width="420" mobile-tray="right" mobile-breakpoint="768" no-padding-header>
+				<d2l-dropdown-menu
+					min-width="285"
+					max-width="420"
+					mobile-tray="right"
+					mobile-breakpoint="768"
+					no-padding-header
+					?opened="${this.opened}">
 					${header}
 					<d2l-menu label="${this.localize('components.filter.filters')}">
 						${dimensions}
@@ -517,11 +536,13 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	_handleDropdownClose(e) {
+		this.opened = false;
 		this._activeDimensionKey = null;
 		this._stopPropagation(e);
 	}
 
 	_handleDropdownOpen(e) {
+		this.opened = true;
 		if (this._dimensions.length === 1) {
 			this._dispatchDimensionFirstOpenEvent(this._dimensions[0].key);
 		}

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

@@ -39,16 +39,7 @@
 		</script>
 		<script>
 			if (window.location.search.indexOf('latex=true') !== -1) {
-				window.D2L = {};
-				D2L.LP = {};
-				D2L.LP.Web = {};
-				D2L.LP.Web.UI = {};
-				D2L.LP.Web.UI.Flags = {
-					Flag: (feature, defaultValue) => {
-						if (feature === 'us125413-mathjax-render-latex') return true;
-						else return defaultValue;
-					}
-				};
+				document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLaTeX: true });
 			}
 		</script>
 	</head>

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

@@ -17,6 +17,7 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getDefaultTime } from './input-time.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -38,7 +39,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").
  */
-class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
+class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement))))) {
 
 	static get properties() {
 		return {
@@ -46,11 +47,6 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 			 * Disables the input
 			 */
 			disabled: { type: Boolean },
-			/**
-			 * REQUIRED: Accessible label for the input fieldset that wraps the date and time inputs
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the fieldset label visually
 			 */
@@ -191,10 +187,6 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		if (!this.label) {
-			console.warn('d2l-input-date-time component requires label text');
-		}
-
 		if (this.value) this._preventDefaultValidation = true;
 	}
 
@@ -229,6 +221,7 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 				@mouseover="${this._handleInputTimeFocus}"
 				label="${this.localize('components.input-date-time.time')}"
 				label-hidden
+				.labelRequired="${false}"
 				max-height="430"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
@@ -239,7 +232,7 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 			${tooltip}
 			<d2l-input-fieldset
 				label="${ifDefined(this.label)}"
-				?label-hidden="${this.labelHidden}"
+				?label-hidden="${this.labelHidden || this.labelledBy}"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}">
 				<div class="d2l-input-date-time-container">
@@ -253,6 +246,7 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 						id="${this._inputId}"
 						label="${this.localize('components.input-date-time.date')}"
 						label-hidden
+						.labelRequired="${false}"
 						max-value="${ifDefined(this._maxValueLocalized)}"
 						min-value="${ifDefined(this._minValueLocalized)}"
 						?opened="${dateOpened}"

package/components/inputs/input-date.js

@@ -11,6 +11,7 @@ import { formatDateInISO, getDateFromISODate, getDateTimeDescriptorShared, getTo
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -26,7 +27,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").
  */
-class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))) {
+class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -38,11 +39,6 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 			 * Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
 			 */
 			emptyText: { type: String, attribute: 'empty-text' },
-			/**
-			 * REQUIRED: Accessible label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 */
@@ -177,10 +173,6 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 	async firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		if (!this.label) {
-			console.warn('d2l-input-date component requires label text');
-		}
-
 		this._textInput = this.shadowRoot.querySelector('d2l-input-text');
 
 		this.addEventListener('blur', this._handleBlur);
@@ -276,7 +268,8 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 					hide-invalid-icon
 					id="${this._inputId}"
 					label="${ifDefined(this.label)}"
-					?label-hidden="${this.labelHidden}"
+					?label-hidden="${this.labelHidden || this.labelledBy}"
+					.labelRequired="${false}"
 					live="assertive"
 					@mouseup="${this._handleMouseup}"
 					placeholder="${shortDateFormat}"

package/components/inputs/input-number.js

@@ -4,6 +4,7 @@ import { formatNumber, getNumberDescriptor, parseNumber } from '@brightspace-ui/
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
@@ -67,7 +68,7 @@ function roundPrecisely(val, maxFractionDigits) {
  * @slot right - Slot within the input on the right side. Useful for an "icon" or "button-icon".
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
  */
-class InputNumber extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))) {
+class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -96,11 +97,6 @@ class InputNumber extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Lit
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
-			/**
-			 * Label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's `aria-label` attribute)
 			 * @type {boolean}
@@ -302,9 +298,6 @@ class InputNumber extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Lit
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		if (!this.label) {
-			console.warn('d2l-input-number component requires label text');
-		}
 		this.addEventListener('d2l-localize-behavior-language-changed', () => {
 			this._descriptor = getNumberDescriptor();
 			if (this._formattedValue.length > 0) {
@@ -329,7 +322,8 @@ class InputNumber extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Lit
 				id="${this._inputId}"
 				input-width="${this.inputWidth}"
 				label="${ifDefined(this.label)}"
-				?label-hidden="${this.labelHidden}"
+				?label-hidden="${this.labelHidden || this.labelledBy}"
+				.labelRequired="${false}"
 				name="${ifDefined(this.name)}"
 				placeholder="${ifDefined(this.placeholder)}"
 				?required="${this.required}"

package/components/inputs/input-percent.js

@@ -2,6 +2,7 @@ import './input-number.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -11,7 +12,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  * @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
  */
-class InputPercent extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
+class InputPercent extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement))))) {
 
 	static get properties() {
 		return {
@@ -30,11 +31,6 @@ class InputPercent extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Rt
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
-			/**
-			 * REQUIRED: Label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 * @type {boolean}
@@ -106,13 +102,6 @@ class InputPercent extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Rt
 		this.requestUpdate('value', oldValue);
 	}
 
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		if (!this.label) {
-			console.warn('d2l-input-percent component requires label text');
-		}
-	}
-
 	render() {
 		return html`
 			<d2l-input-number
@@ -123,7 +112,8 @@ class InputPercent extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(Rt
 				.forceInvalid="${this.invalid}"
 				input-width="${ifDefined(this.inputWidth)}"
 				label="${ifDefined(this.label)}"
-				?label-hidden="${this.labelHidden}"
+				?label-hidden="${this.labelHidden || this.labelledBy}"
+				.labelRequired="${false}"
 				max="100"
 				max-fraction-digits="${ifDefined(this.maxFractionDigits)}"
 				min="0"

package/components/inputs/input-text.js

@@ -7,6 +7,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PerfMonitor } from '../../helpers/perfMonitor.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
@@ -21,7 +22,7 @@ import { styleMap } from 'lit-html/directives/style-map.js';
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */
-class InputText extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
+class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -71,11 +72,6 @@ class InputText extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
-			/**
-			 * REQUIRED: Label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 * @type {boolean}
@@ -312,6 +308,13 @@ class InputText extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
 		return super.validity;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasAttribute('aria-label')) {
+			this.labelRequired = false;
+		}
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
@@ -434,7 +437,7 @@ class InputText extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
 			</div>
 			${offscreenContainer}
 		`;
-		if (this.label && !this.labelHidden) {
+		if (this.label && !this.labelHidden && !this.labelledBy) {
 			return html`
 				<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${this.unit ? html`<span class="d2l-offscreen"> ${this.unit}</span>` : ''}</label>
 				${input}`;
@@ -471,7 +474,7 @@ class InputText extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
 	}
 
 	_getAriaLabel() {
-		if (this.label && this.labelHidden) {
+		if (this.label && (this.labelHidden || this.labelledBy)) {
 			return this.label;
 		}
 		if (this.hasAttribute('aria-label')) {

package/components/inputs/input-textarea.js

@@ -6,6 +6,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -16,7 +17,7 @@ import { styleMap } from 'lit-html/directives/style-map.js';
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */
-class InputTextArea extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))) {
+class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -35,11 +36,6 @@ class InputTextArea extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: Label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 * @type {boolean}
@@ -232,7 +228,7 @@ class InputTextArea extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))
 			${offscreenContainer}
 		`;
 
-		if (this.label && !this.labelHidden) {
+		if (this.label && !this.labelHidden && !this.labelledBy) {
 			return html`
 				<label class="d2l-input-label d2l-skeletize" for="${this._textareaId}">${this.label}</label>
 				${textarea}`;
@@ -281,7 +277,7 @@ class InputTextArea extends FormElementMixin(SkeletonMixin(RtlMixin(LitElement))
 	}
 
 	_getAriaLabel() {
-		if (this.label && this.labelHidden) {
+		if (this.label && (this.labelHidden || this.labelledBy)) {
 			return this.label;
 		}
 		// check aria-label for backwards compatibility in order to replace old Polymer impl

package/components/inputs/input-time.js

@@ -12,6 +12,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -110,7 +111,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").
  */
-class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
+class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -127,11 +128,6 @@ class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
 			 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
 			 */
 			enforceTimeIntervals: { type: Boolean, attribute: 'enforce-time-intervals' },
-			/**
-			 * REQUIRED: Accessible label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 */
@@ -247,9 +243,6 @@ class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
 
 	async firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		if (!this.label) {
-			console.warn('d2l-input-time component requires label text');
-		}
 
 		if (this.value === undefined) {
 			const time = getDefaultTime(this.defaultValue, this.enforceTimeIntervals, this.timeInterval);
@@ -297,7 +290,7 @@ class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
 				<div>${formattedWideTimePM}</div>
 			</div>
 			<label
-				class="${this.label && !this.labelHidden ? 'd2l-input-label d2l-skeletize' : 'd2l-offscreen'}"
+				class="${this.label && !this.labelHidden && !this.labelledBy ? 'd2l-input-label d2l-skeletize' : 'd2l-offscreen'}"
 				for="${this._dropdownId}-input"
 				id="${this._dropdownId}-label">${this.label}</label>
 			<d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}">

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

@@ -0,0 +1,83 @@
+import '../list-item-content.js';
+import { html, LitElement } from 'lit-element/lit-element.js';
+import { ListItemMixin } from '../list-item-mixin.js';
+
+const demoData = {
+	'L1-1': {
+		primaryText: 'Earth Sciences (L1)',
+		supportingText: '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.',
+		nested: [ 'L2-1', 'L2-2', 'L2-3' ]
+	},
+	'L1-2': {
+		primaryText: 'Biology (L1)',
+		supportingText: ''
+	},
+	'L1-3': {
+		primaryText: 'Computer Science (L3)',
+		supportingText: ''
+	},
+	'L2-1': {
+		primaryText: 'Introductory Earth Sciences (L2)',
+		supportingText: '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.',
+		nested: [ 'L3-1', 'L3-2', 'L3-3' ]
+	},
+	'L2-2': {
+		primaryText: 'Flow and Transport Through Fractured Rocks (L2)',
+		supportingText: 'Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas. Despite the importance of fractures, its characterization and predictions of groundwater flow and contaminant transport are fraught with significant difficulties. Students are taught to deal with fractures in hydrogeology, to conceptualize them, and to build reliable models for predicting groundwater flow and contaminant transport.'
+	},
+	'L2-3': {
+		primaryText: 'Applied Wetland Science (L2)',
+		supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology. Current issues in Canada and abroad will be examined.'
+	},
+	'L3-1': {
+		primaryText: 'Glaciation (L3)',
+		supportingText: 'Supporting Info'
+	},
+	'L3-2': {
+		primaryText: 'Weathering (L3)',
+		supportingText: 'Supporting Info'
+	},
+	'L3-3': {
+		primaryText: 'Volcanism (L3)',
+		supportingText: 'Supporting Info'
+	}
+};
+
+class DemoListItemCustom extends ListItemMixin(LitElement) {
+
+	constructor() {
+		super();
+		this.selectable = true;
+	}
+
+	render() {
+		const itemTemplates = {
+			content: html`
+				<d2l-list-item-content>
+					<div>${demoData[this.key].primaryText}</div>
+					<div slot="supporting-info">${demoData[this.key].supportingText}</div>
+				</d2l-list-item-content>
+			`
+		};
+
+		if (demoData[this.key].nested && demoData[this.key].nested.length > 0) {
+			itemTemplates.nested = html`
+				<d2l-list separators="all">
+					${demoData[this.key].nested.map(itemKey => html`<d2l-demo-list-item-custom selectable key="${itemKey}"></d2l-demo-list-item-custom>`)}
+				</d2l-list>
+			`;
+		}
+
+		return this._renderListItem(itemTemplates);
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('key')) {
+			this.label = `Label for ${this.key}`;
+		}
+	}
+
+}
+
+customElements.define('d2l-demo-list-item-custom', DemoListItemCustom);