@brightspace-ui/core 3.300.0 → 3.302.0

package/components/dropdown/README.md

@@ -215,6 +215,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 | Property | Type | Description |
 |---|---|---|
 | `align` | String | Optionally align dropdown to either `start` or `end`. If not set, the dropdown will attempt to be centred. |
+| `async` | Boolean, default: `false` | Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content. |
 | `max-height` | Number | Override default `max-height`. _Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed_ |
 | `min-height` | Number | 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._ |
 | `max-width` | Number | Override default `max-width` |
@@ -236,7 +237,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 | Name | Description |
 |---|---|
 | `d2l-dropdown-open` | Dispatched when the dropdown is opened |
-| `d2l-dropdown-open-async` | Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content |
+| `d2l-dropdown-async-load` | Dispatched before an "async" dropdown is opened for the first time, giving an opportunity to load async content |
 | `d2l-dropdown-close` | dispatched when the dropdown is closed |
 | `d2l-dropdown-position` | Dispatched when the dropdown position finishes adjusting |
 | `d2l-dropdown-focus-enter` | dispatched when the 'trap-focus' attribute is applied and the focus-trap is entered (trap-focus option only) |
@@ -254,28 +255,35 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 
 ### Asynchronous Content
 
-For dropdown content that's fetched asynchronously, the `d2l-dropdown-open-async` event can be leveraged to let `<d2l-dropdown-content>` know when things are ready. That way, automatic focus and sizing logic until can be delayed.
+For dropdown content that's fetched asynchronously, the `async` attribute and the `d2l-dropdown-async-load` event can be leveraged to let `<d2l-dropdown-content>` know when things are ready.
 
-- Add a listener for the `d2l-dropdown-open-async` event
-- In the handler, call `preventDefault()` on the event to let it know that the content will be loaded asynchronously
-- Fetch the content and when it's ready, call `complete()` on the event detail
-- Note: the `d2l-dropdown-open-async` event will only be dispatched the first time the dropdown is opened, so no need to ignore subsequent calls
+Automatic focus and sizing logic will be delayed until content has loaded.
+
+- Set the `async` attribute
+- Add a listener for the `d2l-dropdown-async-load` event that fetches the content
+- Render `nothing` inside  `<d2l-dropdown-content>`, allowing dropdown to render a loading spinner while content loads
+- When content is ready, call `complete()` on the event detail
+- To avoid a shift in size between the "loading" and "loaded" states, consider setting a `min-width` matching the typical width of the loaded content 
+
+The `d2l-dropdown-async-load` event will dispatch pre-emptively when the user hovers or focuses on the dropdown opener, anticipating that the dropdown will be opened.
+
+It is also only be dispatched once, so there's no need to ignore subsequent calls
 
 ```javascript
 class MyElem extends LitElement {
+  properties: {
+    _content: { state: true }
+  }
   render() {
-    const content = this._loading ? 'Loading...' : 'Loaded!';
     return html`
       <d2l-dropdown-content
-        @d2l-dropdown-open-async="${this.#handleDropdownOpenAsync}">
-        ${content}
+        @d2l-dropdown-async-load="${this.#handleDropdownAsyncLoad}">
+        ${this._content}
       </d2l-dropdown-content>
     `;
   }
-  async #handleDropdownOpenAsync(e) {
-    e.preventDefault();
-    await this.#fetchData();
-    this._loaded = true;
+  async #handleDropdownAsyncLoad(e) {
+    this._content = await this.#fetchData();
     e.detail.complete();
   }
 }

package/components/dropdown/dropdown-content.js

@@ -7,8 +7,6 @@ import { LitElement } from 'lit';
  * @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-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownContent extends DropdownPopoverMixin(LitElement) { }
 customElements.define('d2l-dropdown-content', DropdownContent);

package/components/dropdown/dropdown-menu.js

@@ -11,8 +11,6 @@ const dropdownDelay = 300;
  * @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-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) {
 

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

@@ -71,6 +71,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 		// listeners
 		this.addEventListener('keypress', this.__onKeypress);
+		this.addEventListener('focusin', this.#handleFocusIn);
 		this.addEventListener('mouseup', this.__onMouseUp);
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
@@ -226,12 +227,15 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	async __onMouseEnter() {
-		if (!this.openOnHover) return;
-		// do not respond to hover events on mobile screens
 		const dropdownContent = this.__getContentElement();
 
+		// do not respond to hover events on mobile screens
 		if (dropdownContent._mobile) return;
 
+		dropdownContent?.startAsyncLoad();
+
+		if (!this.openOnHover) return;
+
 		clearTimeout(this._dismissTimerId);
 		if (!this.dropdownOpened) await this.openDropdown(false);
 		this._closeTimerStop();
@@ -316,4 +320,11 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 		return true;
 	}
+
+	#handleFocusIn(e) {
+		const opener = this.getOpenerElement();
+		if (e.target === this || isComposedAncestor(opener, e.target)) {
+			this.__getContentElement()?.startAsyncLoad();
+		}
+	}
 };

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

@@ -1,16 +1,21 @@
 import '../button/button.js';
+import '../loading-spinner/loading-spinner.js';
 import '../../helpers/viewport-size.js';
 import '../../helpers/visualReady.js';
-import { css, html } from 'lit';
+import { asyncStates, PopoverMixin } from '../popover/popover-mixin.js';
+import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { PopoverMixin } from '../popover/popover-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElement(PopoverMixin(superclass)) {
 
 	static properties = {
+		/**
+		 * Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.
+		 */
+		async: { type: Boolean },
 		/**
 		 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.
 		 * @type {'start'|'end'}
@@ -121,6 +126,11 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 			overflow-y: auto;
 			padding: 1rem;
 		}
+		.dropdown-content-loading {
+			display: flex;
+			justify-content: center;
+			padding: 20px;
+		}
 		.dropdown-header,
 		.dropdown-footer {
 			box-sizing: border-box;
@@ -169,6 +179,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 
 	constructor() {
 		super();
+		this.async = false;
 		this.opened = false;
 		this.noAutoClose = false;
 		this.noAutoFit = false;
@@ -197,8 +208,8 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		if (this.#contentElement) {
 			this.#resizeObserver.observe(this.#contentElement);
 		}
+		this.addEventListener('d2l-popover-async-load', this.#handlePopoverAsyncLoad);
 		this.addEventListener('d2l-popover-open', this.#handlePopoverOpen);
-		this.addEventListener('d2l-popover-open-async', this.#handlePopoverOpenAsync);
 		this.addEventListener('d2l-popover-close', this.#handlePopoverClose);
 		this.addEventListener('d2l-popover-position', this.#handlePopoverPosition);
 		this.addEventListener('d2l-popover-focus-enter', this.#handlePopoverFocusEnter);
@@ -232,13 +243,16 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 
 		const closeButtonStyles = this.#getMobileCloseButtonStyles();
 
+		const isLoading = (this._async && this._asyncState === asyncStates.loading);
+		const loading = isLoading ? html`<div class="dropdown-content-loading"><d2l-loading-spinner></d2l-loading-spinner></div>` : nothing;
+
 		const content = html`
 			<div class="dropdown-content-layout" style="${styleMap(contentLayoutStyles)}">
 				<div class="${classMap(headerClasses)}">
 					<slot name="header" @slotchange="${this.#handleHeaderSlotChange}"></slot>
 				</div>
 				<div class="${classMap(contentClasses)}" @scroll="${this.#toggleScrollStyles}">
-					<slot></slot>
+					<slot>${loading}</slot>
 				</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this.#handleFooterSlotChange}"></slot>
@@ -253,12 +267,13 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	willUpdate(changedProperties) {
-		if (changedProperties.has('align') || changedProperties.has('maxHeight') || changedProperties.has('maxWidth') || changedProperties.has('minHeight') || changedProperties.has('minWidth') || changedProperties.has('mobileBreakpointOverride') || changedProperties.has('mobileTray') || changedProperties.has('noAutoClose') || changedProperties.has('noAutoFit') || changedProperties.has('noAutoFocus') || changedProperties.has('noPointer') || changedProperties.has('trapFocus') || changedProperties.has('verticalOffset')) {
+		if (changedProperties.has('align') || changedProperties.has('async') || changedProperties.has('maxHeight') || changedProperties.has('maxWidth') || changedProperties.has('minHeight') || changedProperties.has('minWidth') || changedProperties.has('mobileBreakpointOverride') || changedProperties.has('mobileTray') || changedProperties.has('noAutoClose') || changedProperties.has('noAutoFit') || changedProperties.has('noAutoFocus') || changedProperties.has('noPointer') || changedProperties.has('trapFocus') || changedProperties.has('verticalOffset')) {
 			super.configure({
+				async: this.async,
 				maxHeight: this.maxHeight,
 				maxWidth: this.maxWidth,
 				minHeight: this.minHeight,
-				minWidth: this.minWidth,
+				minWidth: (this.minWidth === undefined && this.async) ? 88 : this.minWidth, /* loading-spinner + padding */
 				mobileBreakpoint: this.mobileBreakpointOverride,
 				mobileTrayLocation: this.#adaptMobileTrayLocation(this.mobileTray),
 				noAutoClose: this.noAutoClose,
@@ -356,6 +371,20 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeaderSlotContent = e.target.assignedNodes().length !== 0;
 	}
 
+	#handlePopoverAsyncLoad(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		/** Dispatched before an "async" dropdown is opened for the first time, giving an opportunity to load async content */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-dropdown-async-load', {
+				bubbles: false,
+				cancelable: false,
+				composed: false,
+				detail: { complete: e.detail.complete, reset: e.detail.reset }
+			}
+		));
+	}
+
 	#handlePopoverClose(e) {
 		// ignore popover close events from nested popovers
 		if (e.target !== this) return;
@@ -387,22 +416,6 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		});
 	}
 
-	#handlePopoverOpenAsync(e) {
-		const openAsyncEvent = new CustomEvent(
-			'd2l-dropdown-open-async', {
-				bubbles: false,
-				cancelable: true,
-				composed: false,
-				detail: { complete: e.detail.complete }
-			}
-		);
-		/** @ignore */
-		this.dispatchEvent(openAsyncEvent);
-		if (openAsyncEvent.defaultPrevented) {
-			e.preventDefault();
-		}
-	}
-
 	#handlePopoverPosition() {
 		this.#toggleScrollStyles();
 

package/components/dropdown/dropdown-tabs.js

@@ -7,8 +7,6 @@ import { DropdownPopoverMixin } from './dropdown-popover-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-open-async - Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content
- * @fires d2l-popover-open-async - Ignore
  */
 class DropdownTabs extends DropdownPopoverMixin(LitElement) {
 

package/components/inputs/docs/form-layout-validation.md

@@ -144,3 +144,7 @@ Within the fieldset, `<d2l-input-group>` can still be used to provide a consiste
 * `Default`: Related input components
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
+
+## Custom Validation [validation-custom]
+
+To attach custom validation logic to an existing component (native or custom), use [d2l-validation-custom](../../../components/validation).

package/components/popover/popover-mixin.js

@@ -12,6 +12,11 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
+export const asyncStates = Object.freeze({
+	unloaded: 'unloaded',
+	loading: 'loading',
+	loaded: 'loaded'
+});
 export const positionLocations = Object.freeze({
 	blockEnd: 'block-end',
 	blockStart: 'block-start',
@@ -53,6 +58,8 @@ const SCROLLBAR_WIDTH = (() => {
 export const PopoverMixin = superclass => class extends superclass {
 
 	static properties = {
+		_async: { type: Boolean },
+		_asyncState: { state: true },
 		_contentHeight: { state: true },
 		_location: { type: String, reflect: true, attribute: '_location' },
 		_margin: { state: true },
@@ -261,6 +268,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 		this.configure();
+		this._asyncState = asyncStates.unloaded;
 		this._mobile = false;
 		this._showBackdrop = false;
 		this._useNativePopover = isPopoverSupported ? 'manual' : undefined;
@@ -316,6 +324,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		else if (properties?.position?.location === positionLocations.inlineStart
 			|| properties?.position?.location === positionLocations.inlineEnd) this._margin = 0;
 		else this._margin = 18;
+		this._async = properties?.async ?? false;
 		this._maxHeight = properties?.maxHeight;
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
@@ -372,7 +381,15 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this.#addRepositionHandlers();
 
-		await this.#waitForOpenAsync();
+		if (this._async) {
+			await this.startAsyncLoad();
+			if (!this._opened) return; // could have closed while async loading
+			if (this.#firstOpen) {
+				this.#firstOpen = false;
+				await waitForElem(this.#getContentContainer());
+				await this.position();
+			}
+		}
 
 		this.#focusContent(this);
 
@@ -579,12 +596,43 @@ export const PopoverMixin = superclass => class extends superclass {
 		await this.position();
 	}
 
+	async startAsyncLoad() {
+		if (!this._async || this._asyncState === asyncStates.loaded) return;
+		if (this._asyncState === asyncStates.loading) {
+			return this.#asyncLoadPromise;
+		}
+		this._asyncState = asyncStates.loading;
+
+		this.#asyncLoadPromise = new Promise(resolve => {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-popover-async-load', {
+					bubbles: false,
+					cancelable: true,
+					composed: false,
+					detail: {
+						complete: resolve,
+						reset: () => {
+							this._asyncState = asyncStates.unloaded;
+							this.#firstOpen = true;
+						}
+					}
+				}
+			));
+		});
+		await this.#asyncLoadPromise;
+
+		this._asyncState = asyncStates.loaded;
+		await this.updateComplete;
+	}
+
 	toggleOpen(opener, applyFocus = true) {
 		if (this._opened) return this.close();
 		else return this.open(opener, (!this._noAutoFocus && applyFocus));
 	}
 
 	#ancestorMutations;
+	#asyncLoadPromise;
 	#firstOpen = true;
 	#ifrauContextInfo;
 	#mediaQueryList;
@@ -1198,32 +1246,4 @@ export const PopoverMixin = superclass => class extends superclass {
 		removeResizeNoopEventListener(this.#handleResize);
 	}
 
-	async #waitForOpenAsync() {
-		if (!this.#firstOpen) return;
-		this.#firstOpen = false;
-
-		let doWait = false;
-		await new Promise(resolve => {
-			const openAsyncEvent = new CustomEvent(
-				'd2l-popover-open-async', {
-					bubbles: false,
-					cancelable: true,
-					composed: false,
-					detail: { complete: resolve }
-				}
-			);
-			/** @ignore */
-			this.dispatchEvent(openAsyncEvent);
-			if (!openAsyncEvent.defaultPrevented) {
-				resolve();
-			} else {
-				doWait = true;
-			}
-		});
-		if (doWait) {
-			await waitForElem(this.#getContentContainer());
-			await this.position();
-		}
-	}
-
 };

package/components/tooltip/tooltip.js

@@ -55,7 +55,6 @@ let activeTooltip = null;
  * @slot - Default content placed inside of the tooltip
  * @fires d2l-tooltip-show - Dispatched when the tooltip is opened
  * @fires d2l-tooltip-hide - Dispatched when the tooltip is closed
- * @fires d2l-popover-open-async - Ignore
  */
 class Tooltip extends PopoverMixin(LitElement) {
 

package/components/validation/README.md

@@ -1,25 +1,21 @@
 # Validation
-## d2l-validation-custom
+## Validation Custom [d2l-validation-custom]
 
-The `d2l-validation-custom` component is used to add custom validation logic to native form elements like `input`, `select` and `textarea` or custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md).
+The `d2l-validation-custom` component is used to add custom validation logic to native form elements like `input`, `select` and `textarea` or custom form elements created with the [`FormElementMixin`](https://github.com/BrightspaceUI/core/blob/main/components/form/docs/form-element-mixin.md).
 
 **Native Form Elements:**
-- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../form/docs/form.md) for the validation custom to function.
+- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../../components/form-layout-validation) for the validation custom to function.
 
 **Custom Form Elements:**
-- When attached to custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../form/docs/form.md) is present.
+- When attached to custom form elements created with the [`FormElementMixin`](https://github.com/BrightspaceUI/core/blob/main/components/form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../../components/form-layout-validation) is present.
 
 **Usage:**
+<!-- docs: demo code properties autoSize:false size:small name:d2l-validation-custom sandboxTitle:'Custom Validation' -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/inputs/input-text.js';
   import '@brightspace-ui/core/components/validation/validation-custom.js';
-</script>
-
-<d2l-input-text id="my-text-input"></d2l-input-text>
-<d2l-validation-custom for="my-text-input" failure-text="My custom error message">
-</d2l-validation-custom>
 
-<script>
   const validator = document.querySelector('d2l-validation-custom');
   validator.addEventListener('d2l-validation-custom-validate', e => {
     // Implement your custom validation logic
@@ -28,8 +24,12 @@ The `d2l-validation-custom` component is used to add custom validation logic to
     e.detail.resolve(isValid);
   });
 </script>
-```
 
+<d2l-input-text id="my-text-input" label="name" style="max-width: 200px;"></d2l-input-text>
+<d2l-validation-custom for="my-text-input" failure-text="My custom error message">
+</d2l-validation-custom>
+```
+<!-- docs: start hidden content -->
 **Properties:**
 
 | Property | Type | Description |
@@ -42,7 +42,9 @@ The `d2l-validation-custom` component is used to add custom validation logic to
   * The form element being validated can be accessed from the `detail`'s `forElement` property.
   * When validation is finished, the `detail`'s `resolve` function **must** be called with a `boolean` value to indicate valid or invalid. If it is not called then validation will never complete and the component will be stuck in a validating state.
 
-## ValidationCustomMixin
+<!-- docs: end hidden content -->
+
+## Validation Custom Mixin [ValidationCustomMixin]
 
 If you find yourself duplicating `d2l-validation-custom` validation logic in many places you may want to create your own custom validator using the `ValidationCustomMixin`.
 
@@ -64,7 +66,3 @@ customElements.define('my-validation-custom', MyValidationCustom);
 ```
 
 Once a component has been created using the `ValidationCustomMixin`, it may be used exactly like a `d2l-validation-custom`. However, the `d2l-validation-custom-validate` event isn't needed because the validation logic is included in the component itself.
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!

package/components/validation/validation-custom-mixin.js

@@ -3,7 +3,15 @@ import { isCustomFormElement } from '../form/form-helper.js';
 export const ValidationCustomMixin = superclass => class extends superclass {
 
 	static properties = {
+		/**
+		 * REQUIRED: The text to display when validation fails.
+		 * @type {string}
+		 */
 		failureText: { type: String, attribute: 'failure-text' },
+		/**
+		 * REQUIRED: The id of the form element to validate.
+		 * @type {string}
+		 */
 		for: { type: String }
 	};
 
@@ -19,6 +27,7 @@ export const ValidationCustomMixin = superclass => class extends superclass {
 	connectedCallback() {
 		super.connectedCallback();
 		this._updateForElement();
+		/**@ignore */
 		this.dispatchEvent(new CustomEvent('d2l-validation-custom-connected', { bubbles: true }));
 	}
 
@@ -28,6 +37,7 @@ export const ValidationCustomMixin = superclass => class extends superclass {
 			this._forElement.validationCustomDisconnected(this);
 		}
 		this._forElement = null;
+		/**@ignore */
 		this.dispatchEvent(new CustomEvent('d2l-validation-custom-disconnected'));
 	}
 

package/components/validation/validation-custom.js

@@ -2,6 +2,10 @@
 import { css, LitElement } from 'lit';
 import { ValidationCustomMixin } from './validation-custom-mixin.js';
 
+/**
+ * A component that can be used to provide custom validation for a form element. The component is hidden and does not render any visible content.
+ * @fires d2l-validation-custom-validate - Dispatched when the component is validated.
+ */
 class ValidationCustom extends ValidationCustomMixin(LitElement) {
 
 	static styles = css`

package/custom-elements.json

@@ -3329,6 +3329,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -3439,6 +3445,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -3514,12 +3527,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -3708,6 +3717,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -3818,6 +3833,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -3893,12 +3915,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -4087,6 +4105,12 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
@@ -4197,6 +4221,13 @@
           "description": "Provide custom offset, positive or negative",
           "type": "string"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "description": "Enable when dropdown contains async content. When set, the dropdown will dispatch a `d2l-dropdown-async-load` event before opening for the first time, giving an opportunity to load async content.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -4272,12 +4303,8 @@
           "description": "Dispatched when the dropdown is opened"
         },
         {
-          "name": "d2l-dropdown-open-async",
-          "description": "Dispatched before the dropdown is opened for the first time, giving an opportunity to load async content"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
+          "name": "d2l-dropdown-async-load",
+          "description": "Dispatched before an \"async\" dropdown is opened for the first time, giving an opportunity to load async content"
         },
         {
           "name": "d2l-dropdown-close",
@@ -13803,6 +13830,11 @@
           "description": "Position the popover to span from the opener edge to this grid line. Default is \"all\" (centered).",
           "type": "'start'|'end'|'all'"
         },
+        {
+          "name": "async",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "no-auto-close",
           "description": "Whether to disable auto-close/light-dismiss",
@@ -13881,6 +13913,12 @@
           "name": "opened",
           "type": "boolean | undefined"
         },
+        {
+          "name": "async",
+          "attribute": "async",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "noAutoClose",
           "attribute": "no-auto-close",
@@ -13914,11 +13952,6 @@
           "type": "array",
           "default": "[\"styles\",null]"
         }
-      ],
-      "events": [
-        {
-          "name": "d2l-popover-open-async"
-        }
       ]
     },
     {
@@ -17342,10 +17375,6 @@
         {
           "name": "d2l-tooltip-hide",
           "description": "Dispatched when the tooltip is closed"
-        },
-        {
-          "name": "d2l-popover-open-async",
-          "description": "Ignore"
         }
       ],
       "slots": [
@@ -17358,13 +17387,16 @@
     {
       "name": "d2l-validation-custom",
       "path": "./components/validation/validation-custom.js",
+      "description": "A component that can be used to provide custom validation for a form element. The component is hidden and does not render any visible content.",
       "attributes": [
         {
           "name": "failure-text",
+          "description": "REQUIRED: The text to display when validation fails.",
           "type": "string"
         },
         {
           "name": "for",
+          "description": "REQUIRED: The id of the form element to validate.",
           "type": "string"
         }
       ],
@@ -17376,11 +17408,13 @@
         {
           "name": "failureText",
           "attribute": "failure-text",
+          "description": "REQUIRED: The text to display when validation fails.",
           "type": "string"
         },
         {
           "name": "for",
           "attribute": "for",
+          "description": "REQUIRED: The id of the form element to validate.",
           "type": "string"
         },
         {
@@ -17389,13 +17423,8 @@
       ],
       "events": [
         {
-          "name": "d2l-validation-custom-validate"
-        },
-        {
-          "name": "d2l-validation-custom-connected"
-        },
-        {
-          "name": "d2l-validation-custom-disconnected"
+          "name": "d2l-validation-custom-validate",
+          "description": "Dispatched when the component is validated."
         }
       ]
     },

package/package.json

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