@brightspace-ui/core 1.219.1 → 1.219.5

package/components/alert/README.md

@@ -116,11 +116,27 @@ a pop-up at the bottom of the screen that automatically dismisses itself by defa
 <!-- docs: demo live name:d2l-alert-toast autoSize:false -->
 ```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';
 </script>
+<!-- docs: start hidden content -->
+<script type="module">
+  var alertToast = document.querySelector('d2l-alert-toast');
+  var button = document.querySelector('#open');
+
+  alertToast.addEventListener('d2l-alert-toast-close', function() {
+    button.style.display = 'block';
+  });
 
+  button.addEventListener('click', () => {
+    alertToast.open = true;
+    button.style.display = 'none';
+  });
+</script>
+<d2l-button id="open" style="align-self:center;display:none;">Show Alert</d2l-button>
+<!-- docs: end hidden content -->
 <d2l-alert-toast type="default" no-auto-close open>
-	A default toast alert.
+  A default toast alert.
 </d2l-alert-toast>
 ```
 

package/components/breadcrumbs/README.md

@@ -141,7 +141,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 To make your usage of `d2l-breadcrumb` (child) accessible, use the following attribute when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-label` | Acts as a primary label. Use if `text` does not provide enough context. |
 
 ## Current Page [d2l-breadcrumb-current-page]

package/components/button/README.md

@@ -62,7 +62,7 @@ The `d2l-button` element can be used just like the native button element, but al
 To make your `d2l-button` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `description` | Use when text on button does not provide enough context. |
@@ -104,7 +104,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 To make your `d2l-button-subtle` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `description` | Use when text on button does not provide enough context. |
@@ -143,7 +143,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 To make your `d2l-button-icon` accessible, use the following properties when applicable:
 
 | Attribute | Description |
-|--|--|
+|---|---|
 | `text` | **REQUIRED**. Acts as a primary label and tooltip. |
 | `aria-expanded` | [Indicate expansion state of a collapsible element](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded). Example: [d2l-more-less](https://github.com/BrightspaceUI/core/blob/f9f30d0975ee5a8479263a84541fc3b781e8830f/components/more-less/more-less.js#L158). |
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |

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

@@ -225,14 +225,17 @@ class HtmlBlock extends LitElement {
 
 	async _processRenderers(elem) {
 		for (const renderer of getRenderers()) {
-			if (this.noDeferredRendering && !renderer.canRenderInline) continue;
-
 			if (this._contextObserverController && renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
-				elem = await renderer.render(elem, contextValues);
+				elem = await renderer.render(elem, {
+					contextValues: contextValues,
+					noDeferredRendering: this.noDeferredRendering
+				});
 			} else {
-				elem = await renderer.render(elem);
+				elem = await renderer.render(elem, {
+					noDeferredRendering: this.noDeferredRendering
+				});
 			}
 		}
 

package/components/inputs/docs/input-date-time.md

@@ -189,7 +189,7 @@ To make your usage of `d2l-input-time` accessible, use the following properties
 |--|--|
 | `label` | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
 | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
-| `labelled-by` | String | Use when another visible element should act as the label |
+| `labelled-by` | Use when another visible element should act as the label |
 
 ## Time Range Input [d2l-input-time-range]
 

package/components/inputs/docs/input-numeric.md

@@ -84,7 +84,7 @@ To make your usage of `d2l-input-number` accessible, use the following propertie
 |---|---|
 | `label` | **REQUIRED.** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
 | `label-hidden` | Use if label should be visually hidden but available for screen reader users. |
-| `labelled-by` | String | Use when another visible element should act as the label |
+| `labelled-by` | Use when another visible element should act as the label |
 | `unit` | Use to render the unit (offscreen) as part of the label. |
 | `title` | Use for additional screen reader and mouseover context. |
 

package/components/inputs/docs/input-text.md

@@ -138,7 +138,7 @@ To make your usage of `d2l-input-text` accessible, use the following properties
 | `description` | Use when label on input does not provide enough context. |
 | `label` | **REQUIRED**  [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
 | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
-| `labelled-by` | String | Use when another visible element should act as the label |
+| `labelled-by` | Use when another visible element should act as the label |
 | `unit` | Use to render the unit (offscreen) as part of the label. |
 | `title` | Text for additional screen reader and mouseover context |
 
@@ -247,7 +247,7 @@ To make your usage of `d2l-input-textarea` accessible, use the following propert
 | `description` | Use when label on `textarea` does not provide enough context. |
 | `label` | **REQUIRED**  [Acts as a primary label on the `textarea`](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
 | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
-| `labelled-by` | String | Use when another visible element should act as the label |
+| `labelled-by` | Use when another visible element should act as the label |
 
 ### Methods
 

package/components/inputs/input-checkbox.js

@@ -199,8 +199,9 @@ class InputCheckbox extends SkeletonMixin(RtlMixin(LitElement)) {
 					name="${ifDefined(this.name)}"
 					tabindex="${ifDefined(tabindex)}"
 					type="checkbox"
-					.value="${this.value}"></span><span class="${classMap(textClasses)}">${offscreenContainer}<slot></slot></span>
+					.value="${this.value}"></span><span class="${classMap(textClasses)}"><slot></slot></span>
 			</label>
+			${offscreenContainer}
 		`;
 	}
 

package/components/inputs/input-radio-styles.js

@@ -40,7 +40,7 @@ export const radioStyles = css`
 	.d2l-input-radio-label > input[type="radio"]:focus {
 		border-color: var(--d2l-color-celestine);
 		border-width: 2px;
-		outline-width: 0;
+		outline: none;
 	}
 	.d2l-input-radio[aria-invalid="true"],
 	.d2l-input-radio-label > input[type="radio"][aria-invalid="true"] {

package/helpers/mathjax.js

@@ -4,19 +4,13 @@ let mathJaxLoaded;
 
 export class HtmlBlockMathRenderer {
 
-	get canRenderInline() {
-		// The custom MathJax ShadowAdaptor creates a new document and renders
-		// its contents to the DOM.
-		return false;
-	}
-
 	get contextAttributes() {
 		return [mathjaxContextAttribute];
 	}
 
-	async render(elem, contextValues) {
-		if (!contextValues) return elem;
-		const contextVal = contextValues.get(mathjaxContextAttribute);
+	async render(elem, options) {
+		if (!options.contextValues) return elem;
+		const contextVal = options.contextValues.get(mathjaxContextAttribute);
 		if (contextVal === undefined) return elem;
 
 		const context = JSON.parse(contextVal) || {};
@@ -31,6 +25,10 @@ export class HtmlBlockMathRenderer {
 
 		await loadMathJax(mathJaxConfig);
 
+		// If we're opting out of deferred rendering, we need to rely
+		// on the global MathJax install for rendering.
+		if (options.noDeferredRendering) return elem;
+
 		const temp = document.createElement('div');
 		temp.style.display = 'none';
 		temp.attachShadow({ mode: 'open' });

package/package.json

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