@brightspace-ui/core 1.208.1 → 1.210.0

package/README.md

@@ -125,23 +125,23 @@ If you'd like to run the tests locally to help troubleshoot or develop new tests
 
 ```shell
 # Install dependencies locally
-npm install esm mocha puppeteer @brightspace-ui/visual-diff --no-save
+npm install mocha puppeteer @brightspace-ui/visual-diff --no-save
 
 # run visual-diff tests
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm
+npx mocha './**/*.visual-diff.js' -t 10000
 
 # subset of visual-diff tests:
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm -g some-pattern
+npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
 
 # update visual-diff goldens
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm --golden
+npx mocha './**/*.visual-diff.js' -t 10000 --golden
 ```
 
 ## Versioning & Releasing
 
 > TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`. Read on for more details...
 
-The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
+The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
 
 ### Version Changes
 

package/components/alert/README.md

@@ -4,21 +4,38 @@ Alerts communicate critical information relating to the state of the system and
 <!-- docs: demo autoSize:false align:start -->
 ```html
 <script type="module">
-	import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/button/button.js';
+
+  var alert = document.querySelector('#alert');
+  var alertToast = document.querySelector('#alert-toast');
+  var button = document.querySelector('#open');
+
+  alert.addEventListener('d2l-alert-close', function() {
+    if (!alertToast.open) button.style.display = 'block';
+  });
+  alertToast.addEventListener('d2l-alert-toast-close', function() {
+    if (alert.hasAttribute('hidden')) button.style.display = 'block';
+  });
+
+  button.addEventListener('click', () => {
+    alert.removeAttribute('hidden');
+    alertToast.open = true;
+    button.style.display = 'none';
+  });
 </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>
+<d2l-button id="open" style="align-self:center;display:none;">Show Alerts</d2l-button>
+<d2l-alert id="alert" type="default" button-text="Undo" has-close-button>
 	A message.
 </d2l-alert>
-<d2l-alert-toast type="success" open no-auto-close>
+<d2l-alert-toast id="alert-toast" type="success" open no-auto-close>
 	A message.
 </d2l-alert-toast>
 ```

package/components/dialog/README.md

@@ -7,13 +7,17 @@ Dialogs interrupt the user to complete a set of tasks, confirm an action, or off
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
-</script>
 
+  document.querySelector('#open-demo').addEventListener('click', () => {
+    document.querySelector('#dialog-demo').opened = true;
+  });
+</script>
 <d2l-dialog id="dialog-demo" title-text="Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 </d2l-dialog>
+<d2l-button id="open-demo">Show Dialog</d2l-button>
 ```
 
 ## General Dialog [d2l-dialog]

package/components/form/form-element-mixin.js

@@ -97,6 +97,11 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			noValidate: { type: Boolean, attribute: 'novalidate' },
+			/**
+			 * @ignore
+			 * Perform validation immediately instead of waiting for the user to make changes.
+			 */
+			validateOnInit: { type: Boolean, attribute: 'validate-on-init' },
 			/**
 			 * @ignore
 			 */
@@ -125,6 +130,8 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		/** @ignore */
 		this.noValidate = false;
 		/** @ignore */
+		this.validateOnInit = false;
+		/** @ignore */
 		this.validationError = null;
 		/** @ignore */
 		this.childErrors = new Map();
@@ -171,6 +178,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 				this.dispatchEvent(new CustomEvent('invalid-change'));
 			}
 		}
+		if (this.validateOnInit && (changedProperties.has('noValidate') || changedProperties.has('validateOnInit'))) {
+			this.requestValidate(true);
+		}
 	}
 
 	async requestValidate(showNewErrors = true) {
@@ -210,6 +220,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	validationCustomConnected(custom) {
 		this._validationCustoms.add(custom);
+		if (this.validateOnInit) {
+			this.requestValidate(true);
+		}
 	}
 
 	validationCustomDisconnected(custom) {

package/components/html-block/demo/html-block.html

@@ -42,7 +42,7 @@
 
 		</script>
 		<script>
-			document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: window.location.search.indexOf('latex=true') !== -1 });
+			document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ outputScale: 1.1, renderLatex: window.location.search.indexOf('latex=true') !== -1 });
 		</script>
 	</head>
 	<body unresolved>

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

@@ -245,8 +245,10 @@ class HtmlBlock extends LitElement {
 			if (fragment) {
 
 				let temp = document.createElement('div');
+				temp.style.display = 'none';
 				temp.appendChild(fragment);
 
+				this._renderContainer.appendChild(temp);
 				temp = await this._processRenderers(temp);
 				this._renderContainer.innerHTML = temp.innerHTML;
 

package/helpers/mathjax.js

@@ -32,9 +32,11 @@ export class HtmlBlockMathRenderer {
 		await loadMathJax(mathJaxConfig);
 
 		const temp = document.createElement('div');
+		temp.style.display = 'none';
 		temp.attachShadow({ mode: 'open' });
 		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc></div>`;
 
+		elem.appendChild(temp);
 		window.MathJax.typesetShadow(temp.shadowRoot);
 		return temp.shadowRoot.firstChild;
 	}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.208.1",
+  "version": "1.210.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
+  "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {
     "access": "public"
@@ -48,7 +49,7 @@
     "@web/test-runner": "^0.13",
     "@web/test-runner-playwright": "^0.8.8",
     "axe-core": "^4",
-    "chalk": "^4",
+    "chalk": "^5",
     "eslint": "^7",
     "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",