@brightspace-ui/core 1.207.2 → 1.208.1

package/components/filter/README.md

@@ -7,10 +7,9 @@ Filter with multiple dimensions:
 ![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo align:start autoSize:false size:large -->
+<!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -39,10 +38,9 @@ Filter with multiple dimensions:
 
 The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
 
-<!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
+<!-- docs: demo live name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -78,7 +76,7 @@ Filter with a single dimension:
 ![Filters with single dimension](./screenshots/filter.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo code autoSize:false align:start size:large -->
+<!-- docs: demo code align:start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -160,10 +158,9 @@ Set dimension on mobile:
 ![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
+<!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';

package/components/focus-trap/demo/focus-trap.html

@@ -15,8 +15,8 @@
 				border: 2px dashed var(--d2l-color-celestine);
 				border-radius: 6px;
 				display: block;
-				padding: 0.6rem;
 				margin: 0.6rem 0;
+				padding: 0.6rem;
 			}
 			d2l-link {
 				display: block;

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

@@ -10,6 +10,10 @@
 			import { provideInstance } from '../../../mixins/provider-mixin.js';
 
 			class DemoReplacementRenderer {
+				get canRenderInline() {
+					return true;
+				}
+
 				async render(elem) {
 					const elemsToReplace = elem.querySelectorAll('[data-replace-me-id]');
 					if (elemsToReplace.length === 0) return elem;
@@ -188,6 +192,119 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (math, no deferred rendering)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block no-deferred-rendering>
+						<div>
+							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+								<mi>x</mi>
+								<mo>=</mo>
+								<mrow>
+									<mfrac>
+										<mrow>
+											<mo>&#x2212;</mo>
+											<mi>b</mi>
+											<mo>&#xB1;</mo>
+											<msqrt>
+												<msup>
+													<mi>b</mi>
+													<mn>2</mn>
+												</msup>
+												<mo>&#x2212;</mo>
+												<mn>4</mn>
+												<mi>a</mi>
+												<mi>c</mi>
+											</msqrt>
+										</mrow>
+										<mrow>
+											<mn>2</mn>
+											<mi>a</mi>
+										</mrow>
+									</mfrac>
+								</mrow>
+								<mtext>.</mtext>
+							</math>
+							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+								<msup>
+									<mrow>
+										<mo>(</mo>
+										<mrow>
+											<munderover>
+												<mo>∑<!-- ∑ --></mo>
+												<mrow class="MJX-TeXAtom-ORD">
+													<mi>k</mi>
+													<mo>=</mo>
+													<mn>1</mn>
+												</mrow>
+												<mi>n</mi>
+											</munderover>
+											<msub>
+												<mi>a</mi>
+												<mi>k</mi>
+											</msub>
+											<msub>
+												<mi>b</mi>
+												<mi>k</mi>
+											</msub>
+										</mrow>
+										<mo>)</mo>
+									</mrow>
+									<mrow class="MJX-TeXAtom-ORD">
+										<mspace width="negativethinmathspace"></mspace>
+										<mspace width="negativethinmathspace"></mspace>
+										<mn>2</mn>
+									</mrow>
+								</msup>
+								<mo>≤<!-- ≤ --></mo>
+								<mrow>
+									<mo>(</mo>
+									<mrow>
+										<munderover>
+											<mo>∑<!-- ∑ --></mo>
+											<mrow class="MJX-TeXAtom-ORD">
+												<mi>k</mi>
+												<mo>=</mo>
+												<mn>1</mn>
+											</mrow>
+											<mi>n</mi>
+										</munderover>
+										<msubsup>
+											<mi>a</mi>
+											<mi>k</mi>
+											<mn>2</mn>
+										</msubsup>
+									</mrow>
+									<mo>)</mo>
+								</mrow>
+								<mrow>
+									<mo>(</mo>
+									<mrow>
+										<munderover>
+											<mo>∑<!-- ∑ --></mo>
+											<mrow class="MJX-TeXAtom-ORD">
+												<mi>k</mi>
+												<mo>=</mo>
+												<mn>1</mn>
+											</mrow>
+											<mi>n</mi>
+										</munderover>
+										<msubsup>
+											<mi>b</mi>
+											<mi>k</mi>
+											<mn>2</mn>
+										</msubsup>
+									</mrow>
+									<mo>)</mo>
+								</mrow>
+							</math>
+							<p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
+						</div>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (inline math)</h2>
 
 			<d2l-demo-snippet>

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

@@ -118,6 +118,17 @@ const getRenderers = () => {
  */
 class HtmlBlock extends LitElement {
 
+	static get properties() {
+		return {
+			/**
+			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
+			 * unless your HTML relies on script executions that may break upon stamping.
+			 * @type {Boolean}
+			 */
+			noDeferredRendering: { type: Boolean, attribute: 'no-deferred-rendering' }
+		};
+	}
+
 	static get styles() {
 		return [ htmlBlockContentStyles, css`
 			:host {
@@ -131,7 +142,10 @@ class HtmlBlock extends LitElement {
 			:host([hidden]) {
 				display: none;
 			}
-			::slotted(*) {
+			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
+				display: none;
+			}
+			:host(:not([no-deferred-rendering])) ::slotted(*) {
 				display: none;
 			}
 		`];
@@ -139,6 +153,7 @@ class HtmlBlock extends LitElement {
 
 	constructor() {
 		super();
+		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
@@ -153,9 +168,9 @@ class HtmlBlock extends LitElement {
 		super.connectedCallback();
 		if (this._contextObserverController) this._contextObserverController.hostConnected();
 
-		if (!this._templateObserver) return;
+		if (!this._templateObserver || this.noDeferredRendering) return;
 
-		const template = this.querySelector('template');
+		const template = this._findSlottedElement('TEMPLATE');
 		if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
 	}
 
@@ -172,24 +187,14 @@ class HtmlBlock extends LitElement {
 
 		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
 
-		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => {
-
-			const template = e.target.assignedNodes({ flatten: true })
-				.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TEMPLATE'));
-
-			this._stamp(template);
-
-		});
+		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
 		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
 		this._context = this._contextObserverController ? { ...this._contextObserverController.values } : {};
 	}
 
 	updated() {
 		super.updated();
-		if (this._contextObserverController && this._contextObjectHasChanged()) {
-			const template = this.querySelector('template');
-			this._stamp(template);
-		}
+		if (this._contextObserverController && this._contextObjectHasChanged()) this._render();
 	}
 
 	_contextObjectHasChanged() {
@@ -201,7 +206,40 @@ class HtmlBlock extends LitElement {
 		return false;
 	}
 
-	_stamp(template) {
+	_findSlottedElement(tagName, slot) {
+		if (!slot) slot = this.shadowRoot.querySelector('slot');
+		return slot.assignedNodes({ flatten: true })
+			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
+	}
+
+	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);
+			} else {
+				elem = await renderer.render(elem);
+			}
+		}
+
+		return elem;
+	}
+
+	async _render(slot) {
+		if (this.noDeferredRendering) await this._renderInline(slot);
+		else this._stamp(slot);
+	}
+
+	async _renderInline(slot) {
+		const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
+		if (!noDeferredRenderingContainer) return;
+		await this._processRenderers(noDeferredRenderingContainer);
+	}
+
+	_stamp(slot) {
 		const stampHTML = async template => {
 			const fragment = template ? document.importNode(template.content, true) : null;
 			if (fragment) {
@@ -209,15 +247,7 @@ class HtmlBlock extends LitElement {
 				let temp = document.createElement('div');
 				temp.appendChild(fragment);
 
-				for (const renderer of getRenderers()) {
-					if (this._contextObserverController && renderer.contextAttributes) {
-						const contextValues = new Map();
-						renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
-						temp = await renderer.render(temp, contextValues);
-					} else {
-						temp = await renderer.render(temp);
-					}
-				}
+				temp = await this._processRenderers(temp);
 				this._renderContainer.innerHTML = temp.innerHTML;
 
 			} else {
@@ -225,6 +255,8 @@ class HtmlBlock extends LitElement {
 			}
 		};
 
+		const template = this._findSlottedElement('TEMPLATE', slot);
+
 		if (this._templateObserver) this._templateObserver.disconnect();
 		if (template) {
 			this._templateObserver = new MutationObserver(() => stampHTML(template));

package/components/inputs/demo/input-checkbox.html

@@ -24,7 +24,7 @@
 			<h2>Checkbox with multi-line label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox style="width:200px;">
+					<d2l-input-checkbox style="width: 200px;">
 						Label for checkbox that wraps nicely onto
 						multiple lines and stays aligned
 					</d2l-input-checkbox>
@@ -49,7 +49,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-input-checkbox>Label for checkbox</d2l-input-checkbox>
-					<d2l-input-checkbox-spacer style="color:#999999;">
+					<d2l-input-checkbox-spacer style="color: #999999;">
 						Additional content can go here and will<br>
 						also line up nicely with the checkbox.
 					</d2l-input-checkbox-spacer>

package/components/inputs/demo/input-radio.html

@@ -30,7 +30,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-test-input-radio-label></d2l-test-input-radio-label>
-					<d2l-input-radio-spacer style="color:#999999;">
+					<d2l-input-radio-spacer style="color: #999999;">
 						Additional content can go here and will<br>
 						also line up nicely with the radios.
 					</d2l-input-radio-spacer>

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

@@ -45,10 +45,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date input](../screenshots/date.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date align:flex-start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date.js';
 </script>
 <d2l-input-date label="Birthdate">
@@ -96,10 +95,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
 </script>
 <d2l-input-date-range label="Availability Range">
@@ -153,10 +151,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time input](../screenshots/time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
+<!-- docs: demo live name:d2l-input-time align:flex-start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-time.js';
 </script>
 <d2l-input-time label="Time">
@@ -194,7 +191,7 @@ To make your usage of `d2l-input-time` accessible, use the following properties
 | `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 |
 
-### Time Range Input [d2l-input-time-range]
+## Time Range Input [d2l-input-time-range]
 
 Use the `<d2l-input-time-range>` component when users need to enter two times in a range, and the date is already known. The component consists of two input-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
 
@@ -204,10 +201,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
+<!-- docs: demo live name:d2l-input-time-range align:flex-start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
 </script>
 <d2l-input-time-range label="Availability Range">
@@ -257,10 +253,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date input](../screenshots/date-time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-time align:flex-start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
 </script>
 <d2l-input-date-time label="Due Date">
@@ -309,10 +304,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
-  import './pages/assets/open-first-item-helper.js';
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';
 </script>
 <d2l-input-date-time-range label="Availability Range">

package/components/inputs/input-date-time.js

@@ -15,6 +15,7 @@ import { formatDateInISO,
 	parseISOTime } from '../../helpers/dateTime.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getDefaultTime } from './input-time.js';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
@@ -119,6 +120,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		this.opened = false;
 		this.required = false;
 		this.timeDefaultValue = 'startOfDay';
+		this._documentLocaleSettings = getDocumentLocaleSettings();
 		this._inputId = getUniqueId();
 		this._namespace = 'components.input-date-time';
 		this._preventDefaultValidation = false;
@@ -190,6 +192,16 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		return super.validationMessage;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		this._documentLocaleSettings.addChangeListener(this._handleLocaleChange.bind(this));
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._documentLocaleSettings.removeChangeListener(this._handleLocaleChange.bind(this));
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
@@ -343,6 +355,10 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		if (tooltip) tooltip.show();
 	}
 
+	_handleLocaleChange() {
+		this.requestUpdate();
+	}
+
 	async _handleTimeChange(e) {
 		const date = this.shadowRoot.querySelector('d2l-input-date').value;
 		const time = e.target.value;

package/components/list/demo/list-item-layouts.html

@@ -14,8 +14,8 @@
 		</script>
 		<style>
 			img {
-				object-fit: cover;
 				height: 500px;
+				object-fit: cover;
 			}
 			d2l-list-item[slim] div {
 				overflow: hidden;

package/components/list/demo/list.html

@@ -21,8 +21,8 @@
 		</script>
 		<style>
 			img {
-				object-fit: cover;
 				height: 500px;
+				object-fit: cover;
 			}
 		</style>
 	</head>

package/components/menu/demo/checkbox-menu.html

@@ -17,7 +17,7 @@
 			<h2>Checkbox Menu</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="Checkbox Menu" style="max-width:400px;">
+					<d2l-menu label="Checkbox Menu" style="max-width: 400px;">
 						<d2l-menu-item-checkbox text="Checkbox 1 with a very long title that will be cut off" value="1"></d2l-menu-item-checkbox>
 						<d2l-menu-item-checkbox text="Checkbox 2" value="2"></d2l-menu-item-checkbox>
 						<d2l-menu-item-checkbox text="Checkbox 3" value="3"></d2l-menu-item-checkbox>
@@ -34,7 +34,7 @@
 			<h2>Supporting Slot</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="Checkbox Menu" style="max-width:400px;">
+					<d2l-menu label="Checkbox Menu" style="max-width: 400px;">
 						<d2l-menu-item-checkbox text="Checkbox 1" value="1">
 							<div slot="supporting">1 point</div>
 						</d2l-menu-item-checkbox>

package/components/menu/demo/menu.html

@@ -22,7 +22,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="Astronomy" style="max-width:400px;">
+					<d2l-menu label="Astronomy" style="max-width: 400px;">
 						<d2l-menu-item text="Introduction"></d2l-menu-item>
 						<d2l-menu-item-separator></d2l-menu-item-separator>
 						<d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
@@ -37,7 +37,7 @@
 			<h2>Custom View</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="Astronomy" style="max-width:400px;">
+					<d2l-menu label="Astronomy" style="max-width: 400px;">
 						<d2l-menu-item text="Introduction"></d2l-menu-item>
 						<d2l-menu-item text="Searching the Heavens">
 							<d2l-custom-view>Searching the Heavens</d2l-custom-view>
@@ -54,7 +54,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="Astronomy" style="max-width:400px;">
+					<d2l-menu label="Astronomy" style="max-width: 400px;">
 						<d2l-menu-item text="Introduction"></d2l-menu-item>
 						<d2l-menu-item-separator></d2l-menu-item-separator>
 						<d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
@@ -128,7 +128,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu label="The Solar System" style="max-width:400px;">
+					<d2l-menu label="The Solar System" style="max-width: 400px;">
 						<d2l-menu-item text="Mercury">
 							<span slot="supporting">0.39 AU</span>
 						</d2l-menu-item>

package/components/menu/demo/radio-menu.html

@@ -17,7 +17,7 @@
 			<h2>Radio Menu</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu id="menu" label="Radio Menu" style="max-width:400px;">
+					<d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
 						<d2l-menu-item-radio text="Radio Option 1 with a very long title that will be cut off" value="1"></d2l-menu-item-radio>
 						<d2l-menu-item-radio text="Radio Option 2" value="2"></d2l-menu-item-radio>
 						<d2l-menu-item-radio text="Radio Option 3" value="3"></d2l-menu-item-radio>
@@ -34,7 +34,7 @@
 			<h2>Supporting Slot</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-menu id="menu" label="Radio Menu" style="max-width:400px;">
+					<d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
 						<d2l-menu-item-radio text="Radio Option 1" value="1">
 							<div slot="supporting">1 point</div>
 						</d2l-menu-item-radio>

package/components/meter/demo/meter.html

@@ -19,11 +19,11 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-meter-linear value="2" max="15" style="width: 250px" text="Activities" text-inline></d2l-meter-linear>
-					<d2l-meter-linear value="3" max="6" style="width: 200px" text="Visited: {x/y}" percent></d2l-meter-linear>
+					<d2l-meter-linear value="2" max="15" style="width: 250px;" text="Activities" text-inline></d2l-meter-linear>
+					<d2l-meter-linear value="3" max="6" style="width: 200px;" text="Visited: {x/y}" percent></d2l-meter-linear>
 					<div style="background-color: darkblue;">
-						<d2l-meter-linear value="2" max="15" style="width: 250px" text="Activities" text-inline foreground-light></d2l-meter-linear>
-						<d2l-meter-linear value="3" max="6" style="width: 200px" text="Visited: {x/y}" percent foreground-light></d2l-meter-linear>
+						<d2l-meter-linear value="2" max="15" style="width: 250px;" text="Activities" text-inline foreground-light></d2l-meter-linear>
+						<d2l-meter-linear value="3" max="6" style="width: 200px;" text="Visited: {x/y}" percent foreground-light></d2l-meter-linear>
 					</div>
 				</template>
 			</d2l-demo-snippet>
@@ -35,13 +35,13 @@
 					<d2l-meter-radial value="5" max="13"></d2l-meter-radial>
 					<d2l-meter-radial value="10" max="10"></d2l-meter-radial>
 					<d2l-meter-radial value="0" max="10"></d2l-meter-radial>
-					<d2l-meter-radial value="19" max="26" style="width:25%"></d2l-meter-radial>
+					<d2l-meter-radial value="19" max="26" style="width: 25%;"></d2l-meter-radial>
 					<d2l-meter-radial value="5" max="10" text="Completed"></d2l-meter-radial>
 					<div style="background-color: darkgreen;">
 						<d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
-						<d2l-meter-radial value="19" max="26" style="width:25%" foreground-light></d2l-meter-radial>
+						<d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
 						<d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
 					</div>
 				</template>
@@ -54,12 +54,12 @@
 					<d2l-meter-circle value="1" max="13"></d2l-meter-circle>
 					<d2l-meter-circle value="10" max="10"></d2l-meter-circle>
 					<d2l-meter-circle value="0" max="10"></d2l-meter-circle>
-					<d2l-meter-circle value="19" max="26" style="width:25%"></d2l-meter-circle>
+					<d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
 					<div style="background-color: darkred;">
 						<d2l-meter-circle value="1" max="13" foreground-light></d2l-meter-circle>
 						<d2l-meter-circle value="10" max="10" foreground-light></d2l-meter-circle>
 						<d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
-						<d2l-meter-circle value="19" max="26" style="width:25%" foreground-light></d2l-meter-circle>
+						<d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
 					</div>
 				</template>
 			</d2l-demo-snippet>

package/components/selection/demo/selection.html

@@ -99,7 +99,7 @@
 							Pick Your Toppings
 							<div class="d2l-selection-header">
 								<d2l-selection-select-all selection-for="collection-1"></d2l-selection-select-all>
-								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message" style="padding: 0 0.5rem; flex: 1;"></d2l-selection-action>
+								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message" style="flex: 1; padding: 0 0.5rem;"></d2l-selection-action>
 								<d2l-selection-summary selection-for="collection-1"></d2l-selection-summary>
 							</div>
 							<d2l-demo-selection id="collection-1">