@brightspace-ui/core 3.28.2 → 3.28.4

package/components/dialog/dialog-confirm.js

@@ -1,8 +1,8 @@
+import { _generateResetStyles, heading3Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { heading3Styles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 /**
@@ -28,7 +28,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	}
 
 	static get styles() {
-		return [ dialogStyles, heading3Styles, css`
+		return [ _generateResetStyles(':host'), dialogStyles, heading3Styles, css`
 
 			.d2l-dialog-outer {
 				max-width: 420px;

package/components/dialog/dialog-fullscreen.js

@@ -1,8 +1,8 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
+import { _generateResetStyles, heading2Styles, heading3Styles } from '../typography/styles.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
 import { css, html, LitElement } from 'lit';
-import { heading2Styles, heading3Styles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
@@ -44,7 +44,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	}
 
 	static get styles() {
-		return [ dialogStyles, heading2Styles, heading3Styles, css`
+		return [ _generateResetStyles(':host'), dialogStyles, heading2Styles, heading3Styles, css`
 
 			.d2l-dialog-footer.d2l-footer-no-content {
 				display: none;

package/components/dialog/dialog.js

@@ -1,12 +1,12 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
+import { _generateResetStyles, heading3Styles } from '../typography/styles.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { heading3Styles } from '../typography/styles.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -52,7 +52,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 	}
 
 	static get styles() {
-		return [ dialogStyles, heading3Styles, css`
+		return [ _generateResetStyles(':host'), dialogStyles, heading3Styles, css`
 
 			.d2l-dialog-header,
 			:host([critical]) .d2l-dialog-header {

package/components/menu/README.md

@@ -271,9 +271,9 @@ Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`.  F
 </d2l-menu>
 ```
 
-## ACCESSIBILITY
+## Accessibility
 
-- The `label` property for `d2l-menu` is only required for the root menu
-	- For nested menus, the label is automatically applied based on its parent menu-item
 - The `d2l-menu` component and its items all follow W3C's [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) pattern best practices
 	- This includes the expected keyboard behaviour, which allows for seamless navigation within the menu and any submenus within it
+- The `label` property for `d2l-menu` is only required for the root menu
+	- For nested menus, the label is automatically applied based on its parent menu-item

package/components/typography/styles.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
 
 export const _isValidCssSelector = (selector) => {
+	if (selector === ':host') return true;
 	const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
 	const match = selector.match(re);
 
@@ -48,6 +49,26 @@ export const bodyStandardStyles = css`
 	}
 `;
 
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateResetStyles = (selector) => {
+
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			color: var(--d2l-color-ferrite);
+			font-size: 0.95rem;
+			font-weight: 400;
+			line-height: 1.4rem;
+			text-align: start;
+			white-space: normal;
+		}
+	`;
+};
+
 /**
  * A private helper method that should not be used by general consumers
  */

package/package.json

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