@brightspace-ui/core 1.196.0 → 1.197.0

package/components/alert/README.md

@@ -6,6 +6,14 @@ Alerts communicate critical information relating to the state of the system and
 <script type="module">
 	import '@brightspace-ui/core/components/alert/alert-toast.js';
 </script>
+<!-- docs: start hidden content -->
+<style>
+  d2l-alert-toast {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+</style>
+<!-- docs: end hidden content -->
 
 <d2l-alert type="default" button-text="Undo" has-close-button>
 	A message.
@@ -26,7 +34,7 @@ The `d2l-alert` component can be used to communicate important information relat
 * Do use to let the user know when the system is in a state that will prevent them from completing their action
 * Do highlight information that requires the user’s attention and/or action.
 * Do provide a clear call to action if it can help resolve the alert
-* Do provide a control to dismiss the alert and prevent the message from displaying again, if applicable 
+* Do provide a control to dismiss the alert and prevent the message from displaying again, if applicable
 * Do use sentence case for alert text, but avoid unnecessary punctuation by not placing periods at the end of single sentences
 <!-- docs: end dos -->
 
@@ -113,8 +121,4 @@ a pop-up at the bottom of the screen that automatically dismisses itself by defa
 
 ### Events
 * `d2l-alert-toast-close`: dispatched when the toast is closed
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

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 -->
@@ -34,8 +33,4 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 | `no-animate-hide` | Boolean | Disables the fade-out transition while the backdrop is being hidden |
 | `shown` | Boolean | Used to control whether the backdrop is shown |
 | `slow-transition` | Boolean | Increases the fade transition time to 1200ms (default is 200ms) |
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->
+<!-- docs: end 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/README.md

@@ -156,7 +156,7 @@ To make your `d2l-button-icon` accessible, use the following properties when app
 See [floating buttons](https://github.com/BrightspaceUI/core/tree/main/components/button/floating-buttons.md).
 
 <!-- docs: start hidden content -->
-## Future Enhancements
+## Future Improvements
 
 - `<d2l-button-preset type="save">` for common button types that will have built-in language support
 

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/README.md

@@ -272,7 +272,7 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
 
 See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information on standard link attributes and their values.
 
-## Future Enhancements
+## Future Improvements
 
 * scroll API for the dialog content (see [#341](https://github.com/BrightspaceUI/core/issues/341))
 

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/count-badge/count-badge-icon.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { CountBadgeMixin, countBadgeStyles } from './count-badge-mixin.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { CountBadgeMixin } from './count-badge-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 
@@ -21,7 +21,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 	}
 
 	static get styles() {
-		return [countBadgeStyles, css`
+		return [super.styles, css`
 		:host(.focus-visible) d2l-icon,
 		:host([focus-ring]) d2l-icon,
 		d2l-icon.focus-visible {
@@ -29,6 +29,10 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			outline: none;
 		}
 
+		.d2l-count-badge-wrapper {
+			display: inline-block;
+		}
+
 		:host {
 			padding-right: var(--d2l-count-badge-icon-padding);
 		}
@@ -81,16 +85,20 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			position: 'relative',
 			left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
 			right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
-			top: numberPadding
+			top: numberPadding,
+			visibility: this.skeleton ? 'hidden' : undefined
 		};
+		const tabbable = (this.tabStop || this.hasTooltip) && !this.skeleton;
 		const innerHtml = html`
 			${this.renderCount(numberStyles)}
-			<d2l-icon id="${this._badgeId}"
-				icon="${this.icon}" 
-				tabindex="${ifDefined((this.tabStop || this.hasTooltip) ? '0' : undefined)}" 
-				aria-labelledby="${ifDefined(this.getAriaLabelId())}"
-				role="img">
-			</d2l-icon>
+			<div class="d2l-skeletize d2l-count-badge-wrapper">
+				<d2l-icon id="${this._badgeId}"
+					icon="${this.icon}" 
+					tabindex="${ifDefined(tabbable ? '0' : undefined)}" 
+					aria-labelledby="${ifDefined(this.getAriaLabelId())}"
+					role="img">
+				</d2l-icon>
+			</div>
 		`;
 		return this.renderTooltips(innerHtml, this._badgeId);
 	}

package/components/count-badge/count-badge-mixin.js

@@ -6,50 +6,10 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit-html/directives/style-map';
 
-export const countBadgeStyles = [offscreenStyles, css`
-:host([hidden]) {
-	display: none;
-}
-
-:host {
-	display: inline-block;
-	min-width: 0.9rem;
-}
-
-.d2l-count-badge-number {
-	font-weight: bold;
-}
-
-:host([type="notification"]) .d2l-count-badge-number {
-	background-color: var(--d2l-color-carnelian-minus-1);
-	color: white;
-}
-
-:host([type="count"]) .d2l-count-badge-number {
-	background-color: var(--d2l-color-gypsum);
-	color: var(--d2l-color-tungsten);
-}
-
-:host([size="small"]) .d2l-count-badge-number {
-	border-radius: 0.55rem;
-	font-size: 0.6rem;
-	line-height: 0.9rem;
-	padding-left: 0.3rem;
-	padding-right: 0.3rem;
-}
-
-:host([size="large"]) .d2l-count-badge-number {
-	border-radius: 0.7rem;
-	font-size: 0.8rem;
-	line-height: 1.2rem;
-	padding-left: 0.4rem;
-	padding-right: 0.4rem;
-}
-`];
-
-export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
+export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
 
 	static get properties() {
 		return {
@@ -138,6 +98,49 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 		};
 	}
 
+	static get styles()  {
+		return [super.styles, offscreenStyles, css`
+			:host([hidden]) {
+				display: none;
+			}
+			
+			:host {
+				display: inline-block;
+				min-width: 0.9rem;
+			}
+			
+			.d2l-count-badge-number {
+				font-weight: bold;
+			}
+			
+			:host([type="notification"]) .d2l-count-badge-number {
+				background-color: var(--d2l-color-carnelian-minus-1);
+				color: white;
+			}
+			
+			:host([type="count"]) .d2l-count-badge-number {
+				background-color: var(--d2l-color-gypsum);
+				color: var(--d2l-color-tungsten);
+			}
+			
+			:host([size="small"]) .d2l-count-badge-number {
+				border-radius: 0.55rem;
+				font-size: 0.6rem;
+				line-height: 0.9rem;
+				padding-left: 0.3rem;
+				padding-right: 0.3rem;
+			}
+			
+			:host([size="large"]) .d2l-count-badge-number {
+				border-radius: 0.7rem;
+				font-size: 0.8rem;
+				line-height: 1.2rem;
+				padding-left: 0.4rem;
+				padding-right: 0.4rem;
+			}
+		`];
+	}
+
 	constructor() {
 		super();
 		this.announceChanges = false;
@@ -166,10 +169,12 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 	renderCount(numberStyles) {
 		let numberString = `${this.number}`;
 		const hideNumber = this.hideZero && this.number === 0;
-		numberStyles = {
-			...numberStyles,
-			visibility: hideNumber ? 'hidden' : 'visible'
-		};
+		if (!numberStyles || numberStyles.visibility !== 'hidden') {
+			numberStyles = {
+				...numberStyles,
+				visibility: hideNumber ? 'hidden' : 'visible'
+			};
+		}
 		if (this.maxDigits && this.number.toString().length > this.maxDigits) {
 			numberString = `${'9'.repeat(this.maxDigits)}`;
 			numberString = formatNumber(parseInt(numberString));
@@ -193,7 +198,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 			aria-live="${this.announceChanges ? 'polite' : 'off'}">
 			${innerHtml}
 		</div>
-		${this.hasTooltip ? html`<d2l-tooltip for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
+		${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
 		`;
 	}
 };

package/components/count-badge/count-badge.js

@@ -1,13 +1,13 @@
 import '../colors/colors.js';
-import { CountBadgeMixin, countBadgeStyles } from './count-badge-mixin.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { CountBadgeMixin } from './count-badge-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 class CountBadge extends CountBadgeMixin(LitElement) {
 
 	static get styles() {
-		return [countBadgeStyles, css`
+		return [super.styles, css`
 		:host(.focus-visible) .d2l-count-badge-wrapper,
 		:host([focus-ring]) .d2l-count-badge-wrapper,
 		.d2l-count-badge-wrapper.focus-visible {
@@ -36,11 +36,12 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 	}
 
 	render() {
+		const tabbable = (this.tabStop || this.hasTooltip) && !(this.hideZero && this.number === 0) && !this.skeleton;
 		const innerHtml =  html`
 			<div 
-			class="d2l-count-badge-wrapper"
+			class="d2l-count-badge-wrapper d2l-skeletize"
 			id="${this._badgeId}"
-			tabindex="${ifDefined((this.tabStop || this.hasTooltip) && !(this.hideZero && this.number === 0) ? '0' : undefined)}" 
+			tabindex="${ifDefined(tabbable ? '0' : undefined)}" 
 			aria-labelledby="${ifDefined(this.getAriaLabelId())}"
 			role="img">
 				${this.renderCount()}

package/components/dialog/README.md

@@ -264,7 +264,7 @@ document.querySelector('#open').addEventListener('click', () => {
 ```
 
 <!-- docs: start hidden content -->
-## Future Enhancements
+## Future Improvements
 
 * scroll API for the dialog content (see [#341](https://github.com/BrightspaceUI/core/issues/341))
 

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/README.md

@@ -36,7 +36,7 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
 <script>
   window.addEventListener('load', function () {
     var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return; 
+    if (!demoElem.hasAttribute('data-first-load')) return;
     setTimeout(() => {
       var dropdown = document.querySelector('d2l-dropdown');
       dropdown.toggleOpen();
@@ -164,7 +164,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 
 ### Accessibility Properties
 
-To make your `d2l-dropdown-button-subtle` accessible, use the following properties when applicable: 
+To make your `d2l-dropdown-button-subtle` accessible, use the following properties when applicable:
 
 | Attribute | Description |
 |---|---|
@@ -454,9 +454,3 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
   </d2l-dropdown-tabs>
 </d2l-dropdown>
 ```
-
-<!-- docs: start hidden content -->
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->