@brightspace-ui/core 1.197.0 → 1.197.4

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/components/list/list-item-button-mixin.js

@@ -35,6 +35,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	}
 
 	_onButtonClick() {
+		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 

package/components/list/list-item-button.js

@@ -6,9 +6,6 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
- * @fires d2l-list-item-button-click - Dispatched when the item's primary button action is clicked
- * @fires d2l-list-item-position-change - Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change).
- * @fires d2l-list-item-selected - Dispatched when the component item is selected
  */
 class ListItemButton extends ListItemButtonMixin(LitElement) {
 

package/components/list/list-item-checkbox-mixin.js

@@ -105,6 +105,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */
 		await this.updateComplete;
+		/** Dispatched when the component item is selected */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-selected', {
 			detail: { key: this.key, selected: value },
 			composed: true,

package/components/list/list-item-drag-drop-mixin.js

@@ -265,6 +265,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
 			 * **Drag & drop:** Text to drag and drop
+			 * @type {string}
 			 */
 			dropText: { type: String, attribute: 'drop-text' },
 			/**
@@ -351,6 +352,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
+		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
 			detail: new NewPositionEventDetails({ dragTargetKey, dropTargetKey, dropLocation }),
 			bubbles: true

package/components/list/list-item-link-mixin.js

@@ -45,6 +45,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	}
 
 	_handleLinkClick() {
+		/** Dispatched when the item's primary link action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
 	}
 

package/components/list/list-item.js

@@ -6,9 +6,6 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
- * @fires d2l-list-item-link-click - Dispatched when the item's primary link action is clicked
- * @fires d2l-list-item-position-change - Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change).
- * @fires d2l-list-item-selected - Dispatched when the component item is selected
  */
 class ListItem extends ListItemLinkMixin(LitElement) {
 

package/components/list/list.js

@@ -18,10 +18,12 @@ class List extends SelectionMixin(LitElement) {
 		return {
 			/**
 			 * Whether to extend the separators beyond the content's edge
+			 * @type {boolean}
 			 */
 			extendSeparators: { type: Boolean, reflect: true, attribute: 'extend-separators' },
 			/**
 			 * Use grid to manage focus with arrow keys. See [Accessibility](#accessibility).
+			 * @type {boolean}
 			 */
 			grid: { type: Boolean },
 			/**

package/components/menu/menu-item-checkbox.js

@@ -6,10 +6,6 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A menu item component used for selection. Multiple checkboxes can be selected at once.
- * @fires click - Dispatched when the link is clicked
- * @fires d2l-menu-item-change - Dispatched when the selected menu item changes
- * @fires d2l-menu-item-select - Dispatched when the menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemCheckbox extends RtlMixin(MenuItemSelectableMixin(LitElement)) {
 

package/components/menu/menu-item-link.js

@@ -6,8 +6,6 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
- * @fires d2l-menu-item-select - Dispatched when the menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemLink extends MenuItemMixin(LitElement) {
 

package/components/menu/menu-item-mixin.js

@@ -4,6 +4,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 		return {
 			/**
 			 * Disables the menu item
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
@@ -100,6 +101,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 			// assumption: single, focusable child view
 			this.__children[0].show();
 		} else {
+			/** Dispatched when the menu item is selected */
 			this.dispatchEvent(new CustomEvent('d2l-menu-item-select', { bubbles: true, composed: true }));
 		}
 	}
@@ -162,6 +164,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 	}
 
 	_onHidden() {
+		/** Dispatched when the visibility of the menu item changes */
 		this.dispatchEvent(new CustomEvent('d2l-menu-item-visibility-change', { bubbles: true, composed: true }));
 	}
 

package/components/menu/menu-item-radio.js

@@ -6,9 +6,6 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A menu item component used for radio selection. Only one radio item in a given d2l-menu may be selected at once (i.e., selecting one option will deselect the other selected "d2l-menu-item-radio" item).
- * @fires d2l-menu-item-change - Dispatched when the selected menu item changes
- * @fires d2l-menu-item-select - Dispatched when a menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemRadio extends RtlMixin(MenuItemRadioMixin(LitElement)) {
 

package/components/menu/menu-item-selectable-mixin.js

@@ -6,6 +6,7 @@ export const MenuItemSelectableMixin = superclass => class extends MenuItemMixin
 		return {
 			/**
 			 * This will set the item to be selected by default
+			 * @type {boolean}
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
@@ -42,6 +43,7 @@ export const MenuItemSelectableMixin = superclass => class extends MenuItemMixin
 				selected: this.selected
 			}
 		};
+		/** Dispatched when the selected menu item changes */
 		this.dispatchEvent(new CustomEvent('d2l-menu-item-change', eventDetails));
 	}
 

package/components/menu/menu-item.js

@@ -6,8 +6,6 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used with JS handlers.
  * @slot - Default content placed inside of the component
- * @fires d2l-menu-item-select - Dispatched when a menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItem extends MenuItemMixin(LitElement) {