@brightspace-ui/core 2.41.0 → 2.42.2

package/components/filter/README.md

@@ -254,7 +254,7 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
         display: block;
         max-width: 100%;
       }
-	}
+  }
 </style>
 <div class="filter-wrapper">
   <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
@@ -300,7 +300,78 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
 
 ## Filter Overflow Group [d2l-filter-overflow-group]
 
-**Coming Soon!**
+The `d2l-filter-overflow-group` is a container for multiple filters that handles overflow on smaller screens. Overflowing filters are displayed in a single filter.
+
+<!-- docs: demo live name:d2l-filter-overflow-group align:start display:block autoSize:false size:medium -->
+```html
+<script type="module">
+  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';
+  import '@brightspace-ui/core/components/filter/filter-overflow-group.js';
+</script>
+<d2l-filter-overflow-group>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="skill" text="Skill">
+      <d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="type" text="Type" selection-single>
+      <d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="course" text="Course" select-all>
+      <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+    <d2l-filter-dimension-set key="duration" text="Duration">
+      <d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="provider" text="Semester3">
+      <d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="format" text="Format">
+      <d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+  <d2l-filter>
+    <d2l-filter-dimension-set key="language" text="Language" selection-single>
+      <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+</d2l-filter-overflow-group>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `min-to-show` | Number | The minimum number of elements to always show. Please consult the design team when using this attribute. |
+| `max-to-show` | Number | The maximum number of elements to show |
+<!-- docs: end hidden content -->
 
 ## Filter Dimension: Date [d2l-filter-dimension-date]
 

package/components/filter/filter-overflow-group.js

@@ -1,26 +1,63 @@
-import { css, LitElement } from 'lit';
-import { OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
+import './filter.js';
+import { css, html, LitElement } from 'lit';
+import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+
+function createFilterItem(node) {
+	const dimensionSets = node.querySelectorAll('d2l-filter-dimension-set');
+	const clones = Array.from(dimensionSets).map((set) => set.cloneNode(true));
+	return clones;
+}
 
 /**
  * A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container
  * @slot - d2l-filters to be added to the container
 */
-class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
+class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
 			::slotted(d2l-filter) {
 				margin-right: 0.3rem;
 			}
+			:host([dir="rtl"]) ::slotted(d2l-filter) {
+				margin-left: 0.3rem;
+				margin-right: 0;
+			}
 		`];
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this.addEventListener('d2l-filter-change', this._handleFilterChange);
+	}
+
 	convertToOverflowItem(node) {
 		const tagName = node.tagName.toLowerCase();
 		if (tagName !== 'd2l-filter') console.warn(`d2l-filter-overflow-group: ${tagName} is invalid in this group. This group should only contain d2l-filter direct child elements.`);
+		else return createFilterItem(node);
+	}
+
+	getOverflowContainer(overflowItems) {
+		return html`
+			<d2l-filter class="${OVERFLOW_CLASS}" @d2l-filter-change="${this._handleFilterChange}">
+				${overflowItems}
+			</d2l-filter>
+		`;
 	}
 
-	getOverflowContainer() {
+	_handleFilterChange(e) {
+		const target = (e.target.classList && e.target.classList.contains(OVERFLOW_CLASS)) ? this : e.target;
+		e.detail.dimensions.forEach((dimension) => {
+			const filterSet = target.querySelector(`d2l-filter-dimension-set[key=${dimension.dimensionKey}`);
+			if (!filterSet) return;
+			dimension.changes.forEach((change) => {
+				const filterSetValue = filterSet.querySelector(`d2l-filter-dimension-set-value[key=${change.valueKey}]`);
+				if (!filterSetValue) return;
+				filterSetValue.selected = change.selected;
+			});
+		});
 	}
 
 }

package/components/filter/filter-tags.js

@@ -58,7 +58,7 @@ class FilterTags extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			}
 
 			.d2l-filter-tags-none-label {
-				color: var(--d2l-color-corundum);
+				color: var(--d2l-color-galena);
 				display: inline-block;
 				font-style: italic;
 				padding-top: 0.15rem;

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

@@ -527,6 +527,131 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (html prop)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block html="&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;&lt;mi&gt;x&lt;/mi&gt;
+						&lt;mo&gt;=&lt;/mo&gt;
+						&lt;mrow&gt;
+							&lt;mfrac&gt;
+								&lt;mrow&gt;
+									&lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
+									&lt;mi&gt;b&lt;/mi&gt;
+									&lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
+									&lt;msqrt&gt;
+										&lt;msup&gt;
+											&lt;mi&gt;b&lt;/mi&gt;
+											&lt;mn&gt;2&lt;/mn&gt;
+										&lt;/msup&gt;
+										&lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
+										&lt;mn&gt;4&lt;/mn&gt;
+										&lt;mi&gt;a&lt;/mi&gt;
+										&lt;mi&gt;c&lt;/mi&gt;
+									&lt;/msqrt&gt;
+								&lt;/mrow&gt;
+								&lt;mrow&gt;
+									&lt;mn&gt;2&lt;/mn&gt;
+									&lt;mi&gt;a&lt;/mi&gt;
+								&lt;/mrow&gt;
+							&lt;/mfrac&gt;
+						&lt;/mrow&gt;
+						&lt;mtext&gt;.&lt;/mtext&gt;
+						&lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
+						&lt;msup&gt;
+							&lt;mi&gt;e&lt;/mi&gt;
+							&lt;mrow&gt;
+								&lt;mi&gt;i&lt;/mi&gt;
+								&lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
+							&lt;/mrow&gt;
+						&lt;/msup&gt;
+						&lt;mo&gt;+&lt;/mo&gt;
+						&lt;mn&gt;1&lt;/mn&gt;
+						&lt;mo&gt;=&lt;/mo&gt;
+						&lt;mn&gt;0&lt;/mn&gt;
+						&lt;/math&gt;
+						&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
+							&lt;msup&gt;
+								&lt;mrow&gt;
+									&lt;mo&gt;(&lt;/mo&gt;
+									&lt;mrow&gt;
+										&lt;munderover&gt;
+											&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+											&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+												&lt;mi&gt;k&lt;/mi&gt;
+												&lt;mo&gt;=&lt;/mo&gt;
+												&lt;mn&gt;1&lt;/mn&gt;
+											&lt;/mrow&gt;
+											&lt;mi&gt;n&lt;/mi&gt;
+										&lt;/munderover&gt;
+										&lt;msub&gt;
+											&lt;mi&gt;a&lt;/mi&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+										&lt;/msub&gt;
+										&lt;msub&gt;
+											&lt;mi&gt;b&lt;/mi&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+										&lt;/msub&gt;
+									&lt;/mrow&gt;
+									&lt;mo&gt;)&lt;/mo&gt;
+								&lt;/mrow&gt;
+								&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+									&lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
+									&lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
+									&lt;mn&gt;2&lt;/mn&gt;
+								&lt;/mrow&gt;
+							&lt;/msup&gt;
+							&lt;mo&gt;≤&lt;!-- ≤ --&gt;&lt;/mo&gt;
+							&lt;mrow&gt;
+								&lt;mo&gt;(&lt;/mo&gt;
+								&lt;mrow&gt;
+									&lt;munderover&gt;
+										&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+										&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+											&lt;mo&gt;=&lt;/mo&gt;
+											&lt;mn&gt;1&lt;/mn&gt;
+										&lt;/mrow&gt;
+										&lt;mi&gt;n&lt;/mi&gt;
+									&lt;/munderover&gt;
+									&lt;msubsup&gt;
+										&lt;mi&gt;a&lt;/mi&gt;
+										&lt;mi&gt;k&lt;/mi&gt;
+										&lt;mn&gt;2&lt;/mn&gt;
+									&lt;/msubsup&gt;
+								&lt;/mrow&gt;
+								&lt;mo&gt;)&lt;/mo&gt;
+							&lt;/mrow&gt;
+							&lt;mrow&gt;
+								&lt;mo&gt;(&lt;/mo&gt;
+								&lt;mrow&gt;
+									&lt;munderover&gt;
+										&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+										&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+											&lt;mo&gt;=&lt;/mo&gt;
+											&lt;mn&gt;1&lt;/mn&gt;
+										&lt;/mrow&gt;
+										&lt;mi&gt;n&lt;/mi&gt;
+									&lt;/munderover&gt;
+									&lt;msubsup&gt;
+										&lt;mi&gt;b&lt;/mi&gt;
+										&lt;mi&gt;k&lt;/mi&gt;
+										&lt;mn&gt;2&lt;/mn&gt;
+									&lt;/msubsup&gt;
+								&lt;/mrow&gt;
+								&lt;mo&gt;)&lt;/mo&gt;
+							&lt;/mrow&gt;
+						&lt;/math&gt;
+						&lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;
+&lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
+	console.log(`Hi there ${name}.`);
+}
+helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (wrapped)</h2>
 
 			<d2l-demo-snippet>

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

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { codeStyles, HtmlBlockCodeRenderer } from '../../helpers/prism.js';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
@@ -138,8 +139,14 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			 * @type {Boolean}
 			 */
 			compact: { type: Boolean },
+			/**
+			 * The HTML to be rendered. Ignored if slotted content is provided.
+			 * @type {String}
+			 */
+			html: { type: String },
 			/**
 			 * Whether to display the HTML in inline mode
+			 * @type {Boolean}
 			 */
 			inline: { type: Boolean },
 			/**
@@ -161,13 +168,17 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				text-align: left;
 			}
 			:host([inline]),
-			:host([inline]) div.d2l-html-block-rendered {
+			:host([inline]) .d2l-html-block-rendered {
 				display: inline;
 			}
 			:host([hidden]),
-			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
+			:host([no-deferred-rendering]) .d2l-html-block-rendered,
+			slot {
 				display: none;
 			}
+			:host([no-deferred-rendering]) slot {
+				display: contents;
+			}
 			:host([dir="rtl"]) {
 				text-align: right;
 			}
@@ -177,8 +188,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	constructor() {
 		super();
 		this.compact = false;
+		this.html = '';
 		this.inline = false;
 		this.noDeferredRendering = false;
+		this._hasSlottedContent = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
@@ -196,7 +209,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 		const slot = this.shadowRoot.querySelector('slot');
 		if (slot) {
-			slot.assignedNodes({ flatten: true }).forEach(
+			const slottedNodes = slot.assignedNodes({ flatten: true });
+			this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
+
+			slottedNodes.forEach(
 				node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
 			);
 		}
@@ -209,52 +225,81 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
+		this._updateContextKeys();
+	}
 
-		if (this._renderContainer) return;
-
-		// The d2l-html-block-rendered class is used to apply CSS outside of the html-block component. Do not change lightly.
-		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered'
-			+ `${this.compact ? ' d2l-html-block-compact' : ''}`
-			+ '"></div><slot'
-			+ `${!this.noDeferredRendering ? ' style="display: none"' : ''}`
-			+ '></slot>';
+	render() {
+		const renderContainerClasses = {
+			'd2l-html-block-rendered': true,
+			'd2l-html-block-compact': this.compact
+		};
 
-		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 } : {};
+		return html`
+			<div class="${classMap(renderContainerClasses)}"></div>
+			<slot @slotchange="${this._handleSlotChange}"></slot>
+		`;
 	}
 
-	updated() {
-		super.updated();
-		if (this._contextObserverController && this._contextObjectHasChanged()) this._render();
+	async updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
+			await this._updateRenderContainer();
+		}
+		if (this._contextChanged()) {
+			if (this._hasSlottedContent) this._render();
+			else if (this.html !== undefined && this.html !== null) {
+				await this._updateRenderContainer();
+			}
+
+			this._updateContextKeys();
+		}
 	}
 
-	_contextObjectHasChanged() {
-		if (this._context.size !== this._contextObserverController.values.size) return true;
-		for (const [attr, val] of this._context) {
+	_contextChanged() {
+		if (!this._contextObserverController) return false;
+
+		if (this._contextKeys.size !== this._contextObserverController.values.size) return true;
+		for (const [attr, val] of this._contextKeys) {
 			if (!this._contextObserverController.values.has(attr)) return true;
 			if (this._contextObserverController.values.get(attr) !== val) return true;
 		}
 		return false;
 	}
 
+	async _handleSlotChange(e) {
+		if (!e.target || !this.shadowRoot) return;
+		const slot = this.shadowRoot.querySelector('slot');
+		const slottedNodes = slot.assignedNodes({ flatten: true });
+
+		if (!this.html && this._hasSlottedElements(slottedNodes)) {
+			this._hasSlottedContent = true;
+			await this._render(e.target);
+		} else {
+			this._hasSlottedContent = false;
+		}
+	}
+
+	_hasSlottedElements(slottedNodes) {
+		if (!slottedNodes || slottedNodes.length === 0) return false;
+		if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
+		return true;
+	}
+
 	async _processRenderers(elem) {
 		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)));
-				elem = await renderer.render(elem, {
+				await renderer.render(elem, {
 					contextValues: contextValues,
 					noDeferredRendering: this.noDeferredRendering
 				});
 			} else {
-				elem = await renderer.render(elem, {
+				await renderer.render(elem, {
 					noDeferredRendering: this.noDeferredRendering
 				});
 			}
 		}
-
-		return elem;
 	}
 
 	async _render(slot) {
@@ -274,20 +319,16 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	}
 
 	_stamp(slot) {
-		const stampHTML = async nodes => {
-			if (nodes && nodes.length > 0) {
-
-				let temp = document.createElement('div');
-				temp.style.display = 'none';
-				nodes.forEach(node => temp.appendChild(node.cloneNode(true)));
+		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
 
-				this._renderContainer.appendChild(temp);
-				temp = await this._processRenderers(temp);
-				this._renderContainer.innerHTML = temp.innerHTML;
+		const stampHTML = async nodes => {
+			renderContainer.innerHTML = '';
+			if (!nodes || nodes.length === 0) return;
 
-			} else {
-				this._renderContainer.innerHTML = '';
-			}
+			// Nodes must be cloned into the render container before processing, as
+			// some renderers require connected nodes (e.g. MathJax).
+			nodes.forEach(node => renderContainer.appendChild(node.cloneNode(true)));
+			await this._processRenderers(renderContainer);
 		};
 
 		if (this._contentObserver) this._contentObserver.disconnect();
@@ -303,6 +344,21 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		stampHTML(slottedNodes);
 	}
 
+	_updateContextKeys() {
+		if (!this._contextObserverController) return;
+		if (!this._contextKeys) this._contextKeys = new Map();
+
+		this._contextObserverController.values.forEach((val, attr) => {
+			this._contextKeys.set(attr, val);
+		});
+	}
+
+	async _updateRenderContainer() {
+		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
+		renderContainer.innerHTML = this.html;
+		await this._processRenderers(renderContainer);
+	}
+
 }
 
 customElements.define('d2l-html-block', HtmlBlock);

package/components/overflow-group/overflow-group-mixin.js

@@ -2,6 +2,7 @@ import { css, html, nothing } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 export const OVERFLOW_CLASS = 'd2l-overflow-container';
 export const OVERFLOW_MINI_CLASS = 'd2l-overflow-container-mini';
@@ -28,8 +29,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 	static get properties() {
 		return {
 			/**
-			 * Use predefined classes on slot elements to set min and max slotted items to show
-			 * @type {boolean}
+			 * @ignore
 			 */
 			autoShow: {
 				type: Boolean,
@@ -95,7 +95,9 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		this._handleResize = this._handleResize.bind(this);
 		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this._handleResize(entries)));
 
+		this._hasResized = false;
 		this._isObserving = false;
+		this._itemHeight = 0;
 		this._mini = this.openerType === OPENER_TYPE.ICON;
 		this._overflowContainerHidden = false;
 		this._slotItems = [];
@@ -129,8 +131,13 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 			}
 		});
 
+		const containerStyles = {
+			minHeight: this.autoShow ? 'none' : `${this._itemHeight}px`,
+			maxHeight: this.autoShow ? 'none' : `${this._itemHeight}px`
+		};
+
 		return html`
-			<div class="d2l-overflow-group-container">
+			<div class="d2l-overflow-group-container" style="${styleMap(containerStyles)}">
 				<slot @slotchange="${this._handleSlotChange}"></slot>
 				${overflowContainer}
 			</div>
@@ -277,12 +284,15 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 
 	_getItemLayouts(filteredNodes) {
 		const items = filteredNodes.map((node) => {
+			node.removeAttribute('data-is-chomped');
 			const computedStyles = window.getComputedStyle(node);
+			const itemHidden = computedStyles.display === 'none';
+			this._itemHeight = !itemHidden ? Math.max(this._itemHeight, Math.ceil(parseFloat(computedStyles.height))) : this._itemHeight;
 
 			return {
 				type: node.tagName.toLowerCase(),
 				isChomped: false,
-				isHidden: computedStyles.display === 'none',
+				isHidden: itemHidden,
 				width: Math.ceil(parseFloat(computedStyles.width) || 0)
 					+ parseInt(computedStyles.marginRight) || 0
 					+ parseInt(computedStyles.marginLeft) || 0,
@@ -316,20 +326,44 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		if (!mutations || mutations.length === 0) return;
 		if (this._updateOverflowItemsRequested) return;
 
+		let isWidthModifyingMutation = false;
+		for (const mutation of mutations) {
+			if (mutation.attributeName
+				&& (mutation.attributeName === 'selected' || mutation.attributeName === 'text')
+			) {
+				isWidthModifyingMutation = true;
+				break;
+			}
+		}
+
 		this._updateOverflowItemsRequested = true;
 		setTimeout(() => {
-			this._overflowItems = this._slotItems.map(node => this.convertToOverflowItem(node));
+			this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
+
+			// when certain attributes change the corresponding item width can also change and so we need to re-get the layouts and chomp
+			if (isWidthModifyingMutation) {
+				this._itemLayouts = this._getItemLayouts(this._slotItems);
+				this._chomp();
+			}
 			this._updateOverflowItemsRequested = false;
 			this.requestUpdate();
 		}, 0);
 	}
 
-	_handleResize(entries) {
+	async _handleResize(entries) {
+		await (document.fonts ? document.fonts.ready : Promise.resolve()); // computed widths can be incorrect if we don't wait for fonts to load
 		this._availableWidth = Math.ceil(entries[0].contentRect.width);
-		this._chomp();
+
+		if (!this._hasResized) {
+			this._hasResized = true;
+			await this._handleSlotChange();
+		} else {
+			this._chomp();
+		}
 	}
 
 	_handleSlotChange() {
+		if (!this._hasResized) return;
 		requestAnimationFrame(async() => {
 			await this._getItems();
 

package/components/overflow-group/overflow-group.js

@@ -56,6 +56,7 @@ function createMenuItemSeparator() {
  * A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container
  * @slot - Buttons, dropdown buttons, links or other items to be added to the container
  * @attr {'default'|'icon'} [opener-type="default"] - Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text
+ * @attr {boolean} auto-show - Use predefined classes on slot elements to set min and max buttons to show
 */
 class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 

package/custom-elements.json

@@ -3364,12 +3364,6 @@
       "path": "./components/filter/filter-overflow-group.js",
       "description": "A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container",
       "attributes": [
-        {
-          "name": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "max-to-show",
           "description": "maximum amount of slotted items to show",
@@ -3386,8 +3380,6 @@
       "properties": [
         {
           "name": "autoShow",
-          "attribute": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
           "type": "boolean",
           "default": "false"
         },
@@ -3818,10 +3810,16 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "html",
+          "description": "The HTML to be rendered. Ignored if slotted content is provided.",
+          "type": "String",
+          "default": "\"\""
+        },
         {
           "name": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {
@@ -3839,11 +3837,18 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "html",
+          "attribute": "html",
+          "description": "The HTML to be rendered. Ignored if slotted content is provided.",
+          "type": "String",
+          "default": "\"\""
+        },
         {
           "name": "inline",
           "attribute": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {
@@ -8831,12 +8836,6 @@
           "type": "'default'|'subtle'",
           "default": "\"\\\"default\\\"\""
         },
-        {
-          "name": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "max-to-show",
           "description": "maximum amount of slotted items to show",
@@ -8854,6 +8853,11 @@
           "description": "Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text",
           "type": "'default'|'icon'",
           "default": "\"default\""
+        },
+        {
+          "name": "auto-show",
+          "description": "Use predefined classes on slot elements to set min and max buttons to show",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -8866,8 +8870,6 @@
         },
         {
           "name": "autoShow",
-          "attribute": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
           "type": "boolean",
           "default": "false"
         },

package/helpers/mathjax.js

@@ -61,35 +61,18 @@ export class HtmlBlockMathRenderer {
 		// This work-around should be removed when linebreaks are natively supported.
 		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
 		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-		const lineBreakStyle = 'display: block; height: 0.5rem;';
-
-		// If we're opting out of deferred rendering, we need to rely
-		// on the global MathJax install for rendering.
-		if (options.noDeferredRendering) {
-			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
-				elm.setAttribute('style', lineBreakStyle);
-			});
-
-			await window.MathJax.startup.promise;
-			renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
-			await renderingPromise;
-			return elem;
-		}
-
-		const inner = elem.innerHTML.replace(/<mspace linebreak="newline">/gi, `<mspace linebreak="newline" style="${lineBreakStyle}">`);
-
-		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>${inner}</mjx-body></mjx-doc></div>`;
+		elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+			elm.style.display = 'block';
+			elm.style.height = '0.5rem';
+		});
 
-		elem.appendChild(temp);
+		// If we're using deferred rendering, we need to create a document structure
+		// within the element so MathJax can appropriately process math.
+		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
 
 		await window.MathJax.startup.promise;
-		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(temp.shadowRoot));
+		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
 		await renderingPromise;
-
-		return temp.shadowRoot.firstChild;
 	}
 
 }
@@ -129,12 +112,18 @@ export function loadMathJax(mathJaxConfig) {
 				const AbstractHandler = window.MathJax._.core.Handler.AbstractHandler.prototype;
 				const startup = window.MathJax.startup;
 
+				const getFirstChild = doc => {
+					const child = doc.firstChild;
+					if (!child || child.nodeType === Node.ELEMENT_NODE) return child;
+					else return child.nextElementSibling;
+				};
+
 				//
 				//  Extend HTMLAdaptor to handle shadowDOM as the document
 				//
 				class ShadowAdaptor extends HTMLAdaptor {
 					body(doc) {
-						return doc.body || (doc.firstChild || {}).lastChild || doc;
+						return doc.body || (getFirstChild(doc) || {}).lastChild || doc;
 					}
 					create(kind, ns) {
 						const document = (this.document.createElement ? this.document : this.window.document);
@@ -143,10 +132,10 @@ export function loadMathJax(mathJaxConfig) {
 							document.createElement(kind));
 					}
 					head(doc) {
-						return doc.head || (doc.firstChild || {}).firstChild || doc;
+						return doc.head || (getFirstChild(doc) || {}).firstChild || doc;
 					}
 					root(doc) {
-						return doc.documentElement || doc.firstChild || doc;
+						return doc.documentElement || getFirstChild(doc) || doc;
 					}
 					text(text) {
 						const document = (this.document.createTextNode ? this.document : this.window.document);

package/helpers/prism.js

@@ -450,8 +450,6 @@ export async function formatCodeElement(elem) {
 
 	if (!elem.dataset.language && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;
 	Prism.highlightElement(code);
-
-	return elem;
 }
 
 export class HtmlBlockCodeRenderer {

package/package.json

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