@brightspace-ui/core 1.197.1 → 1.198.0

package/components/dropdown/README.md

@@ -117,6 +117,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from opening automatically on click or on key press |
 | `primary` | Boolean, default: `false` | Optionally render button as primary button |
+| `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
 <!-- docs: end hidden content -->
 
 ## Opener: Button Subtle [d2l-dropdown-button-subtle]
@@ -160,6 +161,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `description` | String | A description to be added to the inner `button` opener for accessibility |
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
+| `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -209,6 +211,7 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
 |---|---|---|
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from opening automatically on click or on key press |
+| `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
 | `text` | String | Used as `aria-label` for the button |
 | `translucent` | Boolean, default: `false` | Attribute for busy/rich backgrounds |
 | `visible-on-ancestor` | Boolean, default: `false` | See [visible-on-ancestor-mixin](../../mixins/visible-on-ancestor-mixin.md) for more details on configuring that behavior |
@@ -261,6 +264,7 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
 |---|---|---|
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from opening automatically on click or key press |
+| `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
 | `text` | String | Used as `aria-label` for the button |
 | `translucent` | Boolean, default: `false` | Attribute for busy/rich backgrounds |
 | `visible-on-ancestor` | Boolean, default: `false` | See [visible-on-ancestor-mixin](../../mixins/visible-on-ancestor-mixin.md) for more details on configuring that behavior |

package/components/dropdown/demo/dropdown-button.html

@@ -65,6 +65,36 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Dropdown Button Opener (open-on-hover Option)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-dropdown-button text="Open!" open-on-hover>
+					<d2l-dropdown-content mobile-tray="right">
+						<div slot="header">
+							<h3>Scrolling is Fun</h3>
+						</div>
+						<a href="https://youtu.be/9ze87zQFSak">Google</a>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+							magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+							commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+							nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+							anim id est laborum.Vestibulum vel sem non orci pretium fringilla sed eget augue. Vestibulum malesuada tortor
+							vitae odio elementum eleifend. Quisque ligula quam, ornare id malesuada ut, malesuada eleifend sem. Nulla porta
+							in arcu quis gravida. Duis ac sagittis felis, in condimentum libero. In dolor risus, semper vel iaculis vitae,
+							pellentesque efficitur lorem. Nunc a lacus malesuada, rhoncus risus aliquam, sodales nulla. Sed in varius elit.
+							Duis sagittis, turpis ut vehicula elementum, velit mi tincidunt turpis, sit amet sagittis quam urna ut justo.
+							Nunc interdum urna augue, ac pretium dui pulvinar eu. Proin vehicula placerat est, sed venenatis purus viverra
+							eget. Suspendisse imperdiet nulla eget velit sodales, sit amet tempus metus dignissim. Sed ac luctus leo, a
+							ornare nisl. Proin non sapien eu orci gravida aliquam. Praesent placerat auctor lacus sit amet faucibus.
+							Suspendisse sit amet dui sed turpis vestibulum dignissim.</p>
+						<div slot="footer">
+							<a href="http://www.desire2learn.com">D2L</a>
+						</div>
+					</d2l-dropdown-content>
+				</d2l-dropdown-button>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

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

@@ -172,6 +172,19 @@ export const dropdownContentStyles = css`
 		text-align: right;
 	}
 
+	:host(.d2l-dropdown-content-fading) {
+		opacity: 0;
+		/* matches DropdownOpenerMixin _closeTimerStart function */
+		transition: opacity 0.4s ease-out 0.3s;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host(.d2l-dropdown-content-fading) {
+			opacity: 1;
+			transition: none;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		:host([opened]), :host([opened-above]) {
 			animation: none !important;

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

@@ -1,3 +1,6 @@
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { isComposedAncestor } from '../../helpers/dom.js';
+
 export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -27,6 +30,19 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				reflect: true,
 				attribute: 'no-auto-open'
 			},
+
+			/**
+			 * Optionally open dropdown on click or hover action
+			 * @type {boolean}
+			 */
+			openOnHover: {
+				type: Boolean,
+				attribute: 'open-on-hover'
+			},
+			_isHovering: { type: Boolean },
+			_isOpen: { type: Boolean },
+			_isOpenedViaClick: { type: Boolean },
+			_isFading: { type: Boolean }
 		};
 	}
 
@@ -34,36 +50,49 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		super();
 		this.dropdownOpener = true;
 		this.noAutoOpen = false;
+		this.openOnHover = false;
 		this.disabled = false;
 
-		this.__onKeyPress = this.__onKeyPress.bind(this);
+		// hover option
+		this._dismissTimerId = getUniqueId();
+		this._isOpen = false;
+		this._isOpenedViaClick = false;
+		this._isHovering = false;
+		this._isFading = false;
+
+		this.__onWholeKeypress = this.__onKeypress.bind(this);
 		this.__onMouseUp = this.__onMouseUp.bind(this);
+		this.__onMouseEnter = this.__onMouseEnter.bind(this);
+		this.__onMouseLeave = this.__onMouseLeave.bind(this);
+		this._contentRendered = null;
+		this._openerRendered = null;
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
 
-		requestAnimationFrame(() => {
-			const opener = this.getOpenerElement();
-			const content = this.__getContentElement();
-			if (!opener) {
-				return;
-			}
-			opener.setAttribute('aria-haspopup', 'true');
-			opener.addEventListener('keypress', this.__onKeyPress);
-			opener.addEventListener('mouseup', this.__onMouseUp);
-			opener.setAttribute('aria-expanded', (content && content.opened || false).toString());
-		});
+		// listeners
+		this.addEventListener('keypress', this.__onKeypress);
+		this.addEventListener('mouseup', this.__onMouseUp);
+		this.addEventListener('mouseenter', this.__onMouseEnter);
+		this.addEventListener('mouseleave', this.__onMouseLeave);
+
+		if (this.openOnHover) {
+			document.body.addEventListener('mouseup', this._onOutsideClick);
+		}
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		const opener = this.getOpenerElement();
-		if (!opener) {
-			return;
+
+		this.removeEventListener('keypress', this.__onKeypress);
+		this.removeEventListener('mouseup', this.__onMouseUp);
+		this.removeEventListener('mouseenter', this.__onMouseEnter);
+		this.removeEventListener('mouseleave', this.__onMouseLeave);
+
+		if (this.openOnHover) {
+			document.body.removeEventListener('mouseup', this._onOutsideClick);
 		}
-		opener.removeEventListener('keypress', this.__onKeyPress);
-		opener.removeEventListener('mouseup', this.__onMouseUp);
 	}
 
 	firstUpdated(changedProperties) {
@@ -71,6 +100,38 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 		this.addEventListener('d2l-dropdown-open', this.__onOpened);
 		this.addEventListener('d2l-dropdown-close', this.__onClosed);
+
+		const opener = this.getOpenerElement();
+		const content = this.__getContentElement();
+		if (!opener) {
+			return;
+		}
+		opener.setAttribute('aria-haspopup', 'true');
+		opener.setAttribute('aria-expanded', (content && content.opened || false).toString());
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (!this.openOnHover || !changedProperties.has('_isFading')) return;
+
+		if (this._isFading) {
+			this.__getContentElement()?.classList.add('d2l-dropdown-content-fading');
+		} else {
+			this.__getContentElement()?.classList.remove('d2l-dropdown-content-fading');
+		}
+	}
+
+	/* used by open-on-hover option */
+	async closeDropdown(fadeOut) {
+		this._isOpen = false;
+		this._isHovering = false;
+		this._isOpenedViaClick = false;
+		if (fadeOut) {
+			this._closeTimerStart();
+			return;
+		}
+		const dropdownContent = this.__getContentElement();
+		await dropdownContent.close();
 	}
 
 	focus() {
@@ -89,6 +150,15 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		return this;
 	}
 
+	/* used by open-on-hover option */
+	async openDropdown(applyFocus) {
+		this._isOpen = true;
+		const dropdownContent = this.__getContentElement();
+		if (!dropdownContent) return;
+		await dropdownContent.open(applyFocus);
+		await dropdownContent.updateComplete;
+	}
+
 	toggleOpen(applyFocus) {
 		if (this.disabled) {
 			return;
@@ -99,6 +169,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 			return;
 		}
 		content.toggleOpen(applyFocus);
+		this._isOpen = !this._isOpen;
 	}
 
 	__getContentElement() {
@@ -113,17 +184,61 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 		opener.setAttribute('aria-expanded', 'false');
 		opener.removeAttribute('active');
+		this._isOpen = false;
+		this._isOpenedViaClick = false;
 	}
 
-	__onKeyPress(e) {
-		if (e.keyCode !== 13 && e.keyCode !== 32) return;
-		if (this.noAutoOpen) return;
-		this.toggleOpen(true);
+	/* used by open-on-hover option */
+	__onDropdownMouseEnter() {
+		this._isOpen = true;
+		this._isFading = false;
+		this._closeTimerStop();
 	}
 
-	__onMouseUp() {
-		if (this.noAutoOpen) return;
-		this.toggleOpen(false);
+	/* used by open-on-hover option */
+	__onDropdownMouseLeave(e) {
+		if (this.__getContentElement() !== e.target) return;
+		if (!this._isOpenedViaClick) this._isOpen = false;
+		this._closeTimerStart();
+	}
+
+	__onDropdownMouseUp() {
+		this._isOpen = true;
+		this._isFading = false;
+		this._isOpenedViaClick = true;
+		this._closeTimerStop();
+	}
+
+	__onKeypress(e) {
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
+			this.__onOpenerKeyPress(e);
+		}
+	}
+
+	__onMouseEnter(e) {
+		if (!this.openOnHover) return;
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
+			this.__onOpenerMouseEnter(e);
+		} else if (isComposedAncestor(this.__getContentElement(), e.srcElement)) {
+			this.__onDropdownMouseEnter(e);
+		}
+	}
+
+	__onMouseLeave(e) {
+		if (!this.openOnHover) return;
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
+			this.__onOpenerMouseLeave(e);
+		} else if (isComposedAncestor(this.__getContentElement(), e.srcElement)) {
+			this.__onDropdownMouseLeave(e);
+		}
+	}
+
+	__onMouseUp(e) {
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
+			this.__onOpenerMouseUp(e);
+		} else if (this.openOnHover && isComposedAncestor(this.__getContentElement(), e.srcElement)) {
+			this.__onDropdownMouseUp();
+		}
 	}
 
 	__onOpened() {
@@ -133,6 +248,88 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 		opener.setAttribute('aria-expanded', 'true');
 		opener.setAttribute('active', 'true');
+		this._isFading = false;
+	}
+
+	__onOpenerKeyPress(e) {
+		if (e.keyCode !== 13 && e.keyCode !== 32) return;
+		if (this.noAutoOpen) return;
+		if (!this.openOnHover) {
+			this.toggleOpen(true);
+		} else {
+			this._closeTimerStop();
+			e.preventDefault();
+			this._isOpenedViaClick = true;
+			this.openDropdown(true);
+		}
+	}
+
+	/* used by open-on-hover option */
+	async __onOpenerMouseEnter() {
+		// do not respond to hover events on mobile screens
+		const dropdownContent = this.__getContentElement();
+		if (dropdownContent._useMobileStyling) return;
+		clearTimeout(this._dismissTimerId);
+		if (!this._isOpen) await this.openDropdown(false);
+		this._closeTimerStop();
+		this._isHovering = true;
 	}
 
+	/* used by open-on-hover option */
+	async __onOpenerMouseLeave() {
+		// do not respond to hover events on mobile screens
+		const dropdownContent = this.__getContentElement();
+		if (dropdownContent._useMobileStyling) return;
+		this._isHovering = false;
+		if (this._isOpenedViaClick) return;
+		//Wait before closing so we don't lose hover when we jump from opener to card
+		clearTimeout(this._dismissTimerId);
+		await this.closeDropdown(true);
+	}
+
+	__onOpenerMouseUp(e) {
+		if (this.noAutoOpen) return;
+		if (this.openOnHover) {
+			// prevent propogation to window and triggering _onOutsideClick
+			e?.stopPropagation();
+			this._closeTimerStop();
+			if (this._isOpen && !this._isHovering) {
+				this.closeDropdown();
+			} else {
+				this._isOpenedViaClick = true;
+				this._isHovering = false;
+				this.openDropdown(true);
+			}
+		} else this.toggleOpen(false);
+	}
+
+	/* used by open-on-hover option */
+	_closeTimerStart() {
+		if (this._isOpen) return;
+		clearTimeout(this._setTimeoutId);
+		this._isFading = true;
+		this._setTimeoutId = setTimeout(() => {
+			this.closeDropdown(false);
+			this._isFading = false;
+		// matches dropdownContentStyles CSS
+		}, 700);
+	}
+
+	/* used by open-on-hover option */
+	_closeTimerStop() {
+		clearTimeout(this._setTimeoutId);
+		this._isFading = false;
+	}
+
+	/* used by open-on-hover option */
+	_onOutsideClick(e) {
+		if (!this._isOpen) return;
+		const isWithinDropdown = isComposedAncestor(this.__getContentElement(), e.composedPath()[0]);
+		const isBackdropClick = isWithinDropdown
+			&& this.__getContentElement()._useMobileStyling
+			&& e.composedPath().find(node => node.nodeName === 'D2L-BACKDROP');
+		if (!isWithinDropdown || isBackdropClick) {
+			this.closeDropdown();
+		}
+	}
 };

package/components/filter/README.md

@@ -1,9 +1,12 @@
 # Filtering
 
-**NOTE: This component is a work-in-progress and not ready for consumer use yet.**
-
 Filter components are often used in conjuction with [tables](../../components/table) and allow users to select a subset of the presented data based on a set of parameters. Filter dimensions provide methods for entering parameters for a wide range of data types.
 
+<!-- docs: start hidden content -->
+Filter with multiple dimensions:
+![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo align:start autoSize:false size:large -->
 ```html
 <script type="module">
@@ -47,10 +50,6 @@ Filter components are often used in conjuction with [tables](../../components/ta
 
 The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
 
-<!-- docs: start hidden content -->
-<!-- ![Filter](./screenshots/filter.png?raw=true) -->
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
 ```html
 <script type="module">
@@ -96,6 +95,11 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 ### Single Vs Multi Dimensional
 A filter can be a single dimension (like picking from a list of courses) or offer multiple dimensions (filter by role, or department, or something else). Single-dimension filters can be used side-by-side to promote filters that are more commonly used, while tucking less-used filters into a multi-dimensional filter.
 
+<!-- docs: start hidden content -->
+Filter with a single dimension:
+![Filters with single dimension](./screenshots/filter.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo code autoSize:false align:start size:large -->
 ```html
 <script type="module">
@@ -173,6 +177,11 @@ The filter will announce changes to filter selections, search results, and when
 
 The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#filter-dimension%3A-set-value-%5Bd2l-filter-dimension-set-value%5D), this will give you a selectable list of filter values.
 
+<!-- docs: start hidden content -->
+Set dimension on mobile:
+![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
 ```html
 <script type="module">

package/components/html-block/html-block.js

@@ -135,6 +135,14 @@ class HtmlBlock extends LitElement {
 		`];
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this._templateObserver) return;
+
+		const template = this.querySelector('template');
+		if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._templateObserver) this._templateObserver.disconnect();

package/components/inputs/docs/input-date-time.md

@@ -14,7 +14,7 @@ size:xlarge
 </script>
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -63,7 +63,7 @@ size:xlarge
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -131,7 +131,7 @@ size:xlarge
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -205,7 +205,7 @@ size:large
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -273,7 +273,7 @@ size:large
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -343,7 +343,7 @@ size:xlarge
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {
@@ -412,7 +412,7 @@ size:xlarge
 <!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
-    const demoElem = document.querySelector('#demo-element');
+    var demoElem = document.querySelector('#demo-element');
     if (!demoElem.hasAttribute('data-first-load')) return;
 
     setTimeout(function() {

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 }));
 	}