@brightspace-ui/core 1.197.0 → 1.197.1

package/components/filter/filter-dimension-set-value.js

@@ -10,14 +10,17 @@ class FilterDimensionSetValue extends LitElement {
 		return {
 			/**
 			 * REQUIRED: Unique key to represent this value in the dimension
+			 * @type {string}
 			 */
 			key: { type: String },
 			/**
 			 * Whether this value in the filter is selected or not
+			 * @type {boolean}
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
 			 * REQUIRED: The text that is displayed for the value
+			 * @type {string}
 			 */
 			text: { type: String }
 		};

package/components/filter/filter-dimension-set.js

@@ -4,7 +4,6 @@ import { html, LitElement } from 'lit-element/lit-element.js';
  * A component to represent the main filter dimension type - a set of possible values that can be selected.
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
  * @slot - For d2l-filter-dimension-set-value components
- * @fires d2l-filter-dimension-data-change - @ignore
  */
 class FilterDimensionSet extends LitElement {
 
@@ -12,10 +11,12 @@ class FilterDimensionSet extends LitElement {
 		return {
 			/**
 			 * REQUIRED: Unique key to represent this dimension in the filter
+			 * @type {string}
 			 */
 			key: { type: String },
 			/**
 			 * Whether the values for this dimension are still loading and a loading spinner should be displayed
+			 * @type {boolean}
 			 */
 			loading: { type: Boolean },
 			/**
@@ -25,14 +26,17 @@ class FilterDimensionSet extends LitElement {
 			searchType: { type: String, attribute: 'search-type' },
 			/**
 			 * Adds a select all checkbox and summary for this dimension
+			 * @type {boolean}
 			 */
 			selectAll: { type: Boolean, attribute: 'select-all' },
 			/**
 			 * Whether only one value can be selected at a time for this dimension
+			 * @type {boolean}
 			 */
 			selectionSingle: { type: Boolean, attribute: 'selection-single' },
 			/**
 			 * REQUIRED: The text that is displayed for the dimension title
+			 * @type {string}
 			 */
 			text: { type: String }
 		};

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-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>
@@ -245,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>
@@ -300,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>
@@ -335,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>
@@ -433,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>
@@ -465,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/custom-elements.json

@@ -2961,11 +2961,6 @@
           "default": "\"\""
         }
       ],
-      "events": [
-        {
-          "name": "d2l-filter-dimension-data-change"
-        }
-      ],
       "slots": [
         {
           "name": "",
@@ -3161,13 +3156,13 @@
           "name": "submit",
           "description": "Dispatched when the form is submitted. Cancelling this event will prevent form submission."
         },
-        {
-          "name": "d2l-form-dirty",
-          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
-        },
         {
           "name": "formdata",
           "description": "Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property."
+        },
+        {
+          "name": "d2l-form-dirty",
+          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
         }
       ],
       "slots": [
@@ -3210,10 +3205,6 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-form-dirty",
-          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
-        },
         {
           "name": "d2l-form-invalid",
           "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property."
@@ -3221,6 +3212,10 @@
         {
           "name": "d2l-form-submit",
           "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property."
+        },
+        {
+          "name": "d2l-form-dirty",
+          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
         }
       ],
       "slots": [
@@ -3816,7 +3811,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ]
     },
@@ -4102,7 +4097,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ],
       "slots": [
@@ -4278,7 +4273,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ]
     },
@@ -4433,7 +4428,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ]
     },
@@ -5862,7 +5857,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ]
     },
@@ -6028,7 +6023,7 @@
       "events": [
         {
           "name": "change",
-          "description": "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\")."
+          "description": "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`)."
         }
       ]
     },

package/package.json

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