@brightspace-ui/core 1.196.2 → 1.196.3

package/components/backdrop/README.md

@@ -8,6 +8,11 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/backdrop/backdrop.js';
   import '@brightspace-ui/core/components/switch/switch.js';
+
+  const backdrop = document.querySelector('d2l-backdrop');
+  document.querySelector('#target > d2l-button').addEventListener('click', () => {
+    backdrop.shown = !backdrop.shown;
+  });
 </script>
 <style>
   #target { position: relative; z-index: 1000; margin: 40px; }
@@ -17,12 +22,6 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
   <d2l-backdrop for-target="target"></d2l-backdrop>
 </div>
 <span>Background content</span>
-<script>
-  const backdrop = document.querySelector('d2l-backdrop');
-  document.querySelector('#target > d2l-button').addEventListener('click', () => {
-    backdrop.shown = !backdrop.shown;
-  });
-</script>
 ```
 
 <!-- docs: start hidden content -->

package/components/backdrop/backdrop.js

@@ -17,16 +17,19 @@ class Backdrop extends LitElement {
 		return {
 			/**
 			 * REQUIRED: id of the target element to display backdrop behind
+			 * @type {string}
 			 */
 			forTarget: { type: String, attribute: 'for-target' },
 
 			/**
 			 * Disables the fade-out transition while the backdrop is being hidden
+			 * @type {boolean}
 			 */
 			noAnimateHide: { type: Boolean, attribute: 'no-animate-hide' },
 
 			/**
 			 * Used to control whether the backdrop is shown
+			 * @type {boolean}
 			 */
 			shown: { type: Boolean },
 			_state: { type: String, reflect: true }

package/components/breadcrumbs/breadcrumbs.js

@@ -5,13 +5,14 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
- * @slot - breadcrumb items
+ * @slot - Breadcrumb items
  */
 class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	static get properties() {
 		return {
 			/**
 			 * Renders in compact mode, displaying only the last item
+			 * @type {boolean}
 			 */
 			compact: { type: Boolean, reflect: true }
 		};

package/components/button/button-icon.js

@@ -37,6 +37,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 
 			/**
 			 * Indicates to display translucent (e.g., on rich backgrounds)
+			 * @type {boolean}
 			 */
 			translucent: { type: Boolean, reflect: true }
 		};

package/components/button/button-mixin.js

@@ -22,10 +22,12 @@ export const ButtonMixin = superclass => class extends FocusVisiblePolyfillMixin
 			autofocus: { type: Boolean, reflect: true },
 			/**
 			 * Disables the button
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
 			 * Tooltip text when disabled
+			 * @type {string}
 			 */
 			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
 			/**

package/components/button/button-subtle.js

@@ -36,6 +36,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 
 			/**
 			 * Indicates that the icon should be rendered on right
+			 * @type {boolean}
 			 */
 			iconRight: { type: Boolean, reflect: true, attribute: 'icon-right' },
 

package/components/button/button.js

@@ -23,6 +23,7 @@ class Button extends ButtonMixin(LitElement) {
 
 			/**
 			 * Styles the button as a primary button
+			 * @type {boolean}
 			 */
 			primary: { type: Boolean, reflect: true }
 		};

package/components/button/floating-buttons.js

@@ -17,6 +17,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		return {
 			/**
 			 * Indicates to display buttons as always floating
+			 * @type {boolean}
 			 */
 			alwaysFloat: { type: Boolean, attribute: 'always-float', reflect: true },
 			_containerMarginLeft: { attribute: false, type: String },

package/components/calendar/calendar.js

@@ -132,7 +132,6 @@ export function getPrevMonth(month) {
 /**
  * A component can be used to display a responsively sized calendar that allows for date selection.
  * @slot - Content displayed under the calendar (e.g., buttons)
- * @fires d2l-calendar-selected - Dispatched when a date is selected through click, space, or enter. "e.detail.date" is in ISO 8601 calendar date format ("YYYY-MM-DD").
  */
 class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
@@ -620,6 +619,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			composed: true,
 			detail: { date: this.selectedValue }
 		};
+		/** Dispatched when a date is selected through click, space, or enter. "e.detail.date" is in ISO 8601 calendar date format ("YYYY-MM-DD"). */
 		this.dispatchEvent(new CustomEvent('d2l-calendar-selected', eventDetails));
 	}
 

package/components/card/card-footer-link.js

@@ -16,30 +16,37 @@ class CardFooterLink extends RtlMixin(LitElement) {
 		return {
 			/**
 			 * Download a URL instead of navigating to it
+			 * @type {boolean}
 			 */
 			download: { type: Boolean, reflect: true },
 			/**
 			 * URL or URL fragment of the link
+			 * @type {string}
 			 */
 			href: { type: String, reflect: true },
 			/**
 			 * Indicates the human language of the linked resource; purely advisory, with no built-in functionality
+			 * @type {string}
 			 */
 			hreflang: { type: String, reflect: true },
 			/**
 			 * REQUIRED: Preset icon key (e.g. "tier1:gear"). Must be a tier 1 icon.
+			 * @type {string}
 			 */
 			icon: { type: String, reflect: true },
 			/**
 			 * Specifies the relationship of the target object to the link object
+			 * @type {string}
 			 */
 			rel: { type: String, reflect: true },
 			/**
 			 * Secondary count to display as a count bubble on the icon
+			 * @type {number}
 			 */
 			secondaryCount: { type: Number, attribute: 'secondary-count', reflect: true },
 			/**
 			 * Maximum digits to display in the secondary count. Defaults to no limit
+			 * @type {string}
 			 */
 			secondaryCountMaxDigits: { type: String, attribute: 'secondary-count-max-digits' },
 			/**
@@ -49,14 +56,17 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			secondaryCountType: { type: String, attribute: 'secondary-count-type', reflect: true },
 			/**
 			 * Where to display the linked URL
+			 * @type {string}
 			 */
 			target: { type: String, reflect: true },
 			/**
 			 * REQUIRED: Accessible text for the link (not visible, gets announced when user focuses)
+			 * @type {string}
 			 */
 			text: { type: String, reflect: true },
 			/**
 			 * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
+			 * @type {string}
 			 */
 			type: { type: String, reflect: true }
 		};
@@ -108,7 +118,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
 	render() {
 		const noNumber = this.secondaryCount === undefined;
 		return html`
-			<a @focus="${this._onFocus}" 
+			<a @focus="${this._onFocus}"
 				@blur="${this._onBlur}"
 				?download="${this.download}"
 				href="${ifDefined(this.href)}"
@@ -121,7 +131,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
 					aria-hidden="true"
 					icon="${this.icon}"
 					max-digits="${ifDefined(this.secondaryCountMaxDigits ? this.secondaryCountMaxDigits : undefined)}"
-					number="${noNumber ? 0 : this.secondaryCount}" 
+					number="${noNumber ? 0 : this.secondaryCount}"
 					?hide-zero="${noNumber}"
 					text="${this.text}"
 					type="${this._getType()}">

package/components/card/card-loading-shimmer.js

@@ -11,6 +11,7 @@ class CardLoadingShimmer extends LitElement {
 		return {
 			/**
 			 * Whether the header content is being loaded
+			 * @type {boolean}
 			 */
 			loading: { type: Boolean }
 		};

package/components/card/card.js

@@ -21,38 +21,47 @@ class Card extends RtlMixin(LitElement) {
 		return {
 			/**
 			 * Style the card's content and footer as centered horizontally
+			 * @type {boolean}
 			 */
 			alignCenter: { type: Boolean, attribute: 'align-center', reflect: true },
 			/**
 			 * Download a URL instead of navigating to it
+			 * @type {boolean}
 			 */
 			download: { type: Boolean, reflect: true },
 			/**
 			 * Location for the primary action/navigation
+			 * @type {string}
 			 */
 			href: { type: String, reflect: true },
 			/**
 			 * Indicates the human language of the linked resource; purely advisory, with no built-in functionality
+			 * @type {string}
 			 */
 			hreflang: { type: String, reflect: true },
 			/**
 			 * Specifies the relationship of the target object to the link object
+			 * @type {string}
 			 */
 			rel: { type: String, reflect: true },
 			/**
 			 * Subtle aesthetic on non-white backgrounds
+			 * @type {boolean}
 			 */
 			subtle: { type: Boolean, reflect: true },
 			/**
 			 * Where to display the linked URL
+			 * @type {string}
 			 */
 			target: { type: String, reflect: true },
 			/**
 			 * Accessible text for the card (will be announced when AT user focuses)
+			 * @type {string}
 			 */
 			text: { type: String, reflect: true },
 			/**
 			 * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
+			 * @type {string}
 			 */
 			type: { type: String, reflect: true },
 			_active: { type: Boolean, reflect: true },

package/components/dialog/dialog-confirm.js

@@ -8,8 +8,6 @@ import { heading3Styles } from '../typography/styles.js';
 /**
  * A simple confirmation dialog for prompting the user. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the confirm dialog with the action value.
  * @slot footer - Slot for footer content such as workflow buttons
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
  */
 class DialogConfirm extends DialogMixin(LitElement) {
 
@@ -17,6 +15,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 		return {
 			/**
 			 * REQUIRED: The text content for the confirmation dialog
+			 * @type {string}
 			 */
 			text: { type: String }
 		};

package/components/dialog/dialog-fullscreen.js

@@ -16,8 +16,6 @@ const mediaQueryList = window.matchMedia('(max-width: 615px)');
  * A generic fullscreen dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the dialog with the action value.
  * @slot - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
  */
 class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
 
@@ -25,6 +23,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		return {
 			/**
 			 * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
+			 * @type {boolean}
 			 */
 			async: { type: Boolean },
 			_hasFooterContent: { type: Boolean, attribute: false },
@@ -45,7 +44,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			}
 
 			@media (min-width: 616px) {
-				
+
 				.d2l-dialog-header {
 					border-bottom: 1px solid var(--d2l-color-gypsum);
 					padding-bottom: 0.9rem;
@@ -72,7 +71,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
 					margin: -2px 0 0 -12px;
 				}
-				
+
 				dialog.d2l-dialog-outer,
 				div.d2l-dialog-outer {
 					border-radius: 8px;
@@ -164,7 +163,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					margin-left: -13px;
 					margin-right: 15px;
 				}
-				
+
 				dialog.d2l-dialog-outer,
 				div.d2l-dialog-outer {
 					margin: 0 !important;

package/components/dialog/dialog-mixin.js

@@ -244,6 +244,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		allowBodyScroll(this._bodyScrollKey);
 		this._bodyScrollKey = null;
 		if (this._action === undefined) this._action = abortAction;
+		/** Dispatched with the action value when the dialog is closed for any reason */
 		this.dispatchEvent(new CustomEvent(
 			'd2l-dialog-close', {
 				bubbles: true,
@@ -346,6 +347,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			}
 
 			if (!reduceMotion) await animPromise;
+			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
 			));

package/components/dialog/dialog.js

@@ -17,8 +17,6 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
  * A generic dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the dialog with the action value.
  * @slot - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
  */
 class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
 

package/components/dropdown/dropdown-button-subtle.js

@@ -14,14 +14,14 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 		return {
 			/**
 			 * A description to be added to the opener button for accessibility when text on button does not provide enough context
+			 * @type {string}
 			 */
 			description: { type: String },
 			/**
 			 * REQUIRED: Text for the button
+			 * @type {string}
 			 */
-			text: {
-				type: String
-			}
+			text: { type: String }
 		};
 	}
 

package/components/dropdown/dropdown-button.js

@@ -15,6 +15,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 		return {
 			/**
 			 * Optionally render button as primary button
+			 * @type {boolean}
 			 */
 			primary: {
 				type: Boolean,
@@ -23,6 +24,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 
 			/**
 			 * REQUIRED: Text for the button
+			 * @type {string}
 			 */
 			text: {
 				type: String

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

@@ -29,12 +29,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", and "right".
+			 * @type {object}
 			 */
 			boundary: {
 				type: Object,
 			},
 			/**
 			 * Override default max-width (undefined). Specify a number that would be the px value.
+			 * @type {number}
 			 */
 			maxWidth: {
 				type: Number,
@@ -43,6 +45,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override default min-width (undefined). Specify a number that would be the px value.
+			 * @type {number}
 			 */
 			minWidth: {
 				type: Number,
@@ -51,6 +54,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
+			 * @type {number}
 			 */
 			maxHeight: {
 				type: Number,
@@ -58,6 +62,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override the breakpoint at which mobile styling is used. Defaults to 616px.
+			 * @type {number}
 			 */
 			mobileBreakpointOverride: {
 				type: Number,
@@ -65,6 +70,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
+			 * @type {number}
 			 */
 			minHeight: {
 				type: Number,
@@ -73,6 +79,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt-out of showing a close button in the footer of tray-style mobile dropdowns.
+			 * @type {boolean}
 			 */
 			noMobileCloseButton: {
 				type: Boolean,
@@ -90,6 +97,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of automatically closing on focus or click outside of the dropdown content
+			 * @type {boolean}
 			 */
 			noAutoClose: {
 				type: Boolean,
@@ -98,6 +106,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of auto-sizing
+			 * @type {boolean}
 			 */
 			noAutoFit: {
 				type: Boolean,
@@ -106,6 +115,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Opt out of focus being automatically moved to the first focusable element in the dropdown when opened
+			 * @type {boolean}
 			 */
 			noAutoFocus: {
 				type: Boolean,
@@ -114,6 +124,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render with no padding
+			 * @type {boolean}
 			 */
 			noPadding: {
 				type: Boolean,
@@ -122,6 +133,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render the footer with no padding (if it has content)
+			 * @type {boolean}
 			 */
 			noPaddingFooter: {
 				type: Boolean,
@@ -130,6 +142,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render the header with no padding (if it has content)
+			 * @type {boolean}
 			 */
 			noPaddingHeader: {
 				type: Boolean,
@@ -138,6 +151,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Render without a pointer
+			 * @type {boolean}
 			 */
 			noPointer: {
 				type: Boolean,
@@ -162,6 +176,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
  			* Optionally render a d2l-focus-trap around the dropdown content
+			 * @type {boolean}
  			*/
 			trapFocus: {
 				type: Boolean,
@@ -170,6 +185,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			},
 			/**
 			 * Provide custom offset, positive or negative
+			 * @type {string}
 			 */
 			verticalOffset: {
 				type: String,
@@ -549,6 +565,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			this._showBackdrop = false;
 			await this.updateComplete;
 
+			/** Dispatched when the dropdown is closed */
 			this.dispatchEvent(new CustomEvent('d2l-dropdown-close', { bubbles: true, composed: true }));
 
 		}
@@ -656,6 +673,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				await this.updateComplete;
 			}
 
+			/** Dispatched when the dropdown position finishes adjusting */
 			this.dispatchEvent(new CustomEvent('d2l-dropdown-position', { bubbles: true, composed: true }));
 		};
 
@@ -1006,6 +1024,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				content.focus();
 			}
 		}
+		/** Dispatched when user focus enters the dropdown content (trap-focus option only) */
 		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
 	}
 

package/components/dropdown/dropdown-content.js

@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownContent extends DropdownContentMixin(LitElement) {
 

package/components/dropdown/dropdown-context-menu.js

@@ -14,6 +14,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
 		return {
 			/**
 			 * REQUIRED: Label for the context-menu button
+			 * @type {string}
 			 */
 			text: {
 				type: String
@@ -21,6 +22,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
 
 			/**
 			 * Attribute for busy/rich backgrounds
+			 * @type {boolean}
 			 */
 			translucent: {
 				type: Boolean

package/components/dropdown/dropdown-menu.js

@@ -9,9 +9,6 @@ import { ThemeMixin } from '../../mixins/theme-mixin.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 

package/components/dropdown/dropdown-more.js

@@ -14,6 +14,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
 		return {
 			/**
 			 * REQUIRED: Label for the more button
+			 * @type {string}
 			 */
 			text: {
 				type: String
@@ -21,6 +22,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
 
 			/**
 			 * Attribute for busy/rich backgrounds
+			 * @type {boolean}
 			 */
 			translucent: {
 				type: Boolean

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

@@ -4,6 +4,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		return {
 			/**
 			 * Disables the dropdown opener
+			 * @type {boolean}
 			 */
 			disabled: {
 				type: Boolean,
@@ -19,6 +20,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 			/**
 			 * Prevents the dropdown from opening automatically on or on key press
+			 * @type {boolean}
 			 */
 			noAutoOpen: {
 				type: Boolean,

package/components/dropdown/dropdown-tabs.js

@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
  */
 class DropdownTabs extends DropdownContentMixin(LitElement) {
 

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

@@ -32,7 +32,7 @@ const demoData = {
 	'L3-1': {
 		primaryText: 'Glaciation (L3)',
 		supportingText: 'Supporting Info',
-		nested: [ 'L4-1' ]
+		nested: [ 'L4-1', 'L4-2' ]
 	},
 	'L3-2': {
 		primaryText: 'Weathering (L3)',
@@ -45,7 +45,11 @@ const demoData = {
 	'L4-1': {
 		primaryText: 'Ice Sheets',
 		supportingText: 'Supporting Info',
-		nested: [ 'L5-1' /*, 'L5-2', 'L5-3', 'L5-4', 'L5-5'*/ ]
+		nested: [ /*'L5-1', 'L5-2', 'L5-3', 'L5-4', 'L5-5'*/ ]
+	},
+	'L4-2': {
+		primaryText: 'Alpine Glaciers',
+		supportingText: 'Supporting Info'
 	},
 	'L5-1': {
 		primaryText: 'Topic L5-1',
@@ -178,7 +182,7 @@ class DemoListItemCustom extends ListItemMixin(LitElement) {
 
 		if (demoData[this.key].nested && demoData[this.key].nested.length > 0) {
 			itemTemplates.nested = html`
-				<d2l-list separators="all">
+				<d2l-list grid separators="all">
 					${demoData[this.key].nested.map(itemKey => html`<d2l-demo-list-item-custom selectable key="${itemKey}"></d2l-demo-list-item-custom>`)}
 				</d2l-list>
 			`;

package/components/list/demo/list-nested.html

@@ -23,13 +23,13 @@
 	</head>
 	<body unresolved>
 
-		<d2l-demo-page page-title="d2l-list-item (nested)">
+		<d2l-demo-page page-title="d2l-list (nested)">
 
 			<h2>Nested</h2>
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list grid>
 						<d2l-list-header slot="header">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
@@ -39,80 +39,24 @@
 								<div>Earth Sciences (L1)</div>
 								<div slot="supporting-info">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.</div>
 							</d2l-list-item-content>
-							<d2l-list slot="nested" separators="all">
+							<d2l-list slot="nested" grid separators="all">
 								<d2l-list-item selectable key="L2-1" label="Label for L2-1">
 									<d2l-list-item-content>
 										<div>Introductory Earth Sciences (L2)</div>
 										<div slot="supporting-info">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.</div>
 									</d2l-list-item-content>
-									<d2l-list slot="nested" separators="all">
+									<d2l-list slot="nested" grid separators="all">
 										<d2l-list-item selectable key="L3-1" label="Label for L3-1">
 											<d2l-list-item-content>
 												<div>Glaciation (L3)</div>
 												<div slot="supporting-info">Supporting Info</div>
 											</d2l-list-item-content>
-											<d2l-list slot="nested" separators="all">
+											<d2l-list slot="nested" grid separators="all">
 												<d2l-list-item selectable key="L4-1" label="Label for L4-1">
 													<d2l-list-item-content>
 														<div>Ice Sheets (L4)</div>
 														<div slot="supporting-info">Supporting Info</div>
 													</d2l-list-item-content>
-													<d2l-list slot="nested" separators="all">
-														<d2l-list-item selectable key="L5-1" label="Label for L5-1">
-															<d2l-list-item-content>
-																<div>Topic 1 (L5)</div>
-																<div slot="supporting-info">Supporting Info</div>
-															</d2l-list-item-content>
-														</d2l-list-item>
-														<d2l-list-item selectable key="L5-2" label="Label for L5-2">
-															<d2l-list-item-content>
-																<div>Topic 2 (L5)</div>
-																<div slot="supporting-info">Supporting Info</div>
-															</d2l-list-item-content>
-															<d2l-list slot="nested" separators="all">
-																<d2l-list-item selectable key="L6-1" label="Label for L6-1">
-																	<d2l-list-item-content>
-																		<div>Sub-Topic 1 (L6)</div>
-																		<div slot="supporting-info">Supporting Info</div>
-																	</d2l-list-item-content>
-																	<d2l-list slot="nested" separators="all">
-																		<d2l-list-item selectable key="L7-1" label="Label for L7-1">
-																			<d2l-list-item-content>
-																				<div>Sub-Topic 1 (L7)</div>
-																				<div slot="supporting-info">Supporting Info</div>
-																			</d2l-list-item-content>
-																			<d2l-list slot="nested" separators="all">
-																				<d2l-list-item selectable selected key="L8-1" label="Label for L8-1">
-																					<d2l-list-item-content>
-																						<div>Sub-Topic 1 (L8)</div>
-																						<div slot="supporting-info">Supporting Info</div>
-																					</d2l-list-item-content>
-																				</d2l-list-item>
-																				<d2l-list-item selectable key="L8-2" label="Label for L8-2">
-																					<d2l-list-item-content>
-																						<div>Sub-Topic 2 (L8)</div>
-																						<div slot="supporting-info">Supporting Info</div>
-																					</d2l-list-item-content>
-																				</d2l-list-item>
-																			</d2l-list>
-																		</d2l-list-item>
-																		<d2l-list-item selectable key="L7-2" label="Label for L7-2">
-																			<d2l-list-item-content>
-																				<div>Sub-Topic 2 (L7)</div>
-																				<div slot="supporting-info">Supporting Info</div>
-																			</d2l-list-item-content>
-																		</d2l-list-item>
-																	</d2l-list>
-																</d2l-list-item>
-																<d2l-list-item selectable key="L6-2" label="Label for L6-2">
-																	<d2l-list-item-content>
-																		<div>Sub-Topic 2 (L6)</div>
-																		<div slot="supporting-info">Supporting Info</div>
-																	</d2l-list-item-content>
-																</d2l-list-item>
-															</d2l-list>
-														</d2l-list-item>
-													</d2l-list>
 												</d2l-list-item>
 												<d2l-list-item selectable key="L4-2" label="Label for L4-2">
 													<d2l-list-item-content>
@@ -175,7 +119,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list grid>
 						<d2l-list-header slot="header">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>

package/components/list/list-item-generic-layout.js

@@ -207,6 +207,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	_focusNextCell(num, forward = true) {
 		let cell = null;
 		let focusable = null;
+
 		do {
 			cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 			if (cell) {
@@ -215,26 +216,31 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			if (focusable) focusable.focus();
 			forward ? ++num : --num;
 		} while (cell && !focusable);
+
+		if (!cell) {
+			// wrap to first/last item
+			if (forward) this._focusNextCell(1);
+			else this._focusLastItem();
+		}
+
 		return focusable;
 	}
 
 	_focusNextRow(previous = false, num = 1) {
-		let listItem = previous ?
-			getPreviousAncestorSibling(this, (node) => node.role === 'rowgroup') :
-			getNextAncestorSibling(this, (node) => node.role === 'rowgroup');
-		if (!listItem || !listItem.shadowRoot) return;
-		while (num > 1) {
-			const nextItem = previous ? listItem.previousElementSibling : listItem.nextElementSibling;
-			if (!nextItem) {
-				break; //we ran out of items
-			}
-			listItem = nextItem;
-			--num;
+
+		let listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+
+		while (num > 0) {
+			const tempListItem = (previous ? this._getPreviousFlattenedListItem(listItem) : this._getNextFlattenedListItem(listItem));
+			if (tempListItem) listItem = tempListItem;
+			else break;
+			num--;
 		}
-		const row = listItem.shadowRoot.querySelector('[role="gridrow"]');
-		if (!row) return;
 
-		row._focusCellItem(this._cellNum, this._cellFocusedItem);
+		if (!listItem) return;
+		const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
+		listItemRow._focusCellItem(this._cellNum, this._cellFocusedItem);
+
 	}
 
 	_focusNextWithinCell(node, num = 1) {
@@ -280,6 +286,38 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return position;
 	}
 
+	_getNextFlattenedListItem(listItem) {
+
+		// check for nested list first; this check needs to account for standard list-items as well as custom
+		const nestedList = listItem.querySelector('[slot="nested"]') || listItem.shadowRoot.querySelector('d2l-list');
+		if (nestedList) {
+			const nestedListItem = [...nestedList.children].find(node => node.role === 'rowgroup');
+			if (nestedListItem) return nestedListItem;
+		}
+
+		const getNextListItem = listItem => {
+
+			// check for sibling list-item
+			let nextElement = listItem.nextElementSibling;
+			while (nextElement) {
+				if (nextElement.role === 'rowgroup') return nextElement;
+				nextElement = nextElement.nextElementSibling;
+			}
+
+			// no sibling list-item was found so check for sibling of parent list-item if nested, recursively if necessary
+			const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+			if (list.slot !== 'nested' && !(list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) return;
+
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return getNextListItem(parentListItem);
+
+		};
+
+		// check for sibling list-item or ancestors sibling list-items
+		return getNextListItem(listItem);
+
+	}
+
 	_getNextSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;
@@ -289,6 +327,39 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return isComposedAncestor(cell, sibling) ? sibling : null;
 	}
 
+	_getPreviousFlattenedListItem(listItem) {
+
+		let previousElement = listItem.previousElementSibling;
+
+		// try to get the previous list-item in the current list sub-tree including nested
+		while (previousElement) {
+			if (previousElement.role === 'rowgroup') {
+
+				// this check needs to account for standard list-items as well as custom
+				const nestedList = previousElement.querySelector('[slot="nested"]') || previousElement.shadowRoot.querySelector('d2l-list');
+				if (nestedList) {
+					const nestedListItems = [...nestedList.children].filter(node => node.role === 'rowgroup');
+					if (nestedListItems && nestedListItems.length > 0) {
+						return nestedListItems[nestedListItems.length - 1];
+					}
+				}
+				return previousElement;
+
+			}
+			previousElement = previousElement.previousElementSibling;
+		}
+
+		// no previous list-item was found in the current list sub-tree so get the parent list item if currently in nested
+		const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+
+		// this check needs to account for standard list-items as well as custom
+		if (list.slot === 'nested' || (list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) {
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return parentListItem;
+		}
+
+	}
+
 	_getPrevSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;

package/components/list/list.js

@@ -1,12 +1,16 @@
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 
+const keyCodes = {
+	TAB: 9
+};
+
 export const listSelectionStates = SelectionInfo.states;
 
 /**
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
  * @slot - List content (e.g., `listitem`s)
- * @fires d2l-list-selection-change - Dispatched when the selection state changes
  */
 class List extends SelectionMixin(LitElement) {
 
@@ -54,6 +58,7 @@ class List extends SelectionMixin(LitElement) {
 			// batch the changes from select-all and nested lists
 			if (this._listItemChanges.length === 0) {
 				setTimeout(() => {
+					/** Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item */
 					this.dispatchEvent(new CustomEvent('d2l-list-selection-changes', {
 						detail: this._listItemChanges
 					}));
@@ -63,6 +68,7 @@ class List extends SelectionMixin(LitElement) {
 			this._listItemChanges.push(e.detail);
 
 			setTimeout(() => {
+				/** Dispatched when the selection state changes */
 				this.dispatchEvent(new CustomEvent('d2l-list-selection-change', {
 					bubbles: true,
 					composed: true,
@@ -78,7 +84,7 @@ class List extends SelectionMixin(LitElement) {
 		return html`
 			<div role="${role}" class="d2l-list-container">
 				<slot name="header"></slot>
-				<slot></slot>
+				<slot @keydown="${this._handleKeyDown}"></slot>
 			</div>
 		`;
 	}
@@ -114,6 +120,14 @@ class List extends SelectionMixin(LitElement) {
 		});
 	}
 
+	_handleKeyDown(e) {
+		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
+		e.preventDefault();
+		const focusable = (e.shiftKey ? getPreviousFocusable(this.shadowRoot.querySelector('slot:not([name])'))
+			: getNextFocusable(this, false, true, true));
+		if (focusable) focusable.focus();
+	}
+
 }
 
 customElements.define('d2l-list', List);

package/components/selection/selection-mixin.js

@@ -60,6 +60,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
 		this.addEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
 		requestAnimationFrame(() => {
+			/** @ignore */
 			this.dispatchEvent(new CustomEvent('d2l-selection-provider-connected', { bubbles: true, composed: true }));
 		});
 

package/components/switch/switch-mixin.js

@@ -234,6 +234,7 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 	_toggleState() {
 		if (this.disabled) return;
 		this.on = !this.on;
+		/** Dispatched when the `on` property is updated */
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
 	}
 };

package/custom-elements.json

@@ -327,7 +327,7 @@
       "slots": [
         {
           "name": "",
-          "description": "breadcrumb items"
+          "description": "Breadcrumb items"
         }
       ]
     },
@@ -1486,13 +1486,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -1557,13 +1557,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -1645,13 +1645,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -2041,13 +2041,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -2378,13 +2378,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -2715,13 +2715,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -4279,9 +4279,6 @@
         {
           "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\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4437,9 +4434,6 @@
         {
           "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\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4768,9 +4762,6 @@
         {
           "name": "change",
           "description": "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."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -4958,9 +4949,6 @@
         {
           "name": "change",
           "description": "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."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -5430,9 +5418,6 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -5661,9 +5646,6 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6047,9 +6029,6 @@
         {
           "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\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6349,9 +6328,6 @@
         },
         {
           "name": "d2l-list-item-selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6545,9 +6521,6 @@
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -6877,9 +6850,6 @@
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -6959,14 +6929,12 @@
       ],
       "events": [
         {
-          "name": "d2l-list-selection-change",
-          "description": "Dispatched when the selection state changes"
-        },
-        {
-          "name": "d2l-list-selection-changes"
+          "name": "d2l-list-selection-changes",
+          "description": "Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item"
         },
         {
-          "name": "d2l-selection-provider-connected"
+          "name": "d2l-list-selection-change",
+          "description": "Dispatched when the selection state changes"
         }
       ],
       "slots": [
@@ -8132,9 +8100,6 @@
         },
         {
           "name": "d2l-selection-input-subscribe"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -8253,11 +8218,6 @@
           "type": "boolean",
           "default": "false"
         }
-      ],
-      "events": [
-        {
-          "name": "d2l-selection-provider-connected"
-        }
       ]
     },
     {
@@ -8594,7 +8554,8 @@
       ],
       "events": [
         {
-          "name": "change"
+          "name": "change",
+          "description": "Dispatched when the `on` property is updated"
         }
       ]
     },
@@ -8681,7 +8642,8 @@
       ],
       "events": [
         {
-          "name": "change"
+          "name": "change",
+          "description": "Dispatched when the `on` property is updated"
         }
       ]
     },

package/helpers/focus.js

@@ -98,11 +98,13 @@ export function getPreviousFocusable(node, includeHidden) {
 	return focusable;
 }
 
-export function getNextFocusable(node, includeHidden) {
+export function getNextFocusable(node, includeHidden, ignore, ignoreChildren) {
 
 	if (!node) return null;
 
 	if (includeHidden === undefined) includeHidden = false;
+	if (ignore === undefined) ignore = true;
+	if (ignoreChildren === undefined) ignoreChildren = false;
 
 	const _getNextFocusable = (node, ignore, ignoreChildren) => {
 		if (!ignore && isFocusable(node, includeHidden)) return node;
@@ -128,7 +130,7 @@ export function getNextFocusable(node, includeHidden) {
 		return null;
 	};
 
-	const focusable = _getNextFocusable(node, true, false);
+	const focusable = _getNextFocusable(node, ignore, ignoreChildren);
 	return focusable;
 
 }

package/mixins/labelled-mixin.js

@@ -180,6 +180,7 @@ export const LabelledMixin = superclass => class extends superclass {
 		}
 
 		this.label = getLabel(this._labelElem);
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent(
 			'd2l-labelled-mixin-label-elem-change', {
 				bubbles: false,

package/package.json

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