@brightspace-ui/core 2.42.0 → 2.43.1

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/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';
@@ -140,6 +141,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			compact: { type: Boolean },
 			/**
 			 * Whether to display the HTML in inline mode
+			 * @type {Boolean}
 			 */
 			inline: { type: Boolean },
 			/**
@@ -161,13 +163,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;
 			}
@@ -209,52 +215,60 @@ 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();
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this._contextChanged()) {
+			this._render();
+			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) return;
+		await this._render(e.target);
+	}
+
 	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 +288,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 +313,15 @@ 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);
+		});
+	}
+
 }
 
 customElements.define('d2l-html-block', HtmlBlock);

package/components/switch/README.md

@@ -63,6 +63,8 @@ To make your usage of `d2l-switch` accessible, use the following property:
 
 The `d2l-switch-visibility` element is a variant of the generic switch configured with special icons and default text for toggling "visibility".
 
+It consists of 3 states: On ("Visible"), Off ("Hidden"), and On with Conditions ("Visible. Conditions must be met.").
+
 <!-- docs: demo live name:d2l-switch-visibility autoSize:false size:small -->
 ```html
 <script type="module">
@@ -76,12 +78,36 @@ The `d2l-switch-visibility` element is a variant of the generic switch configure
 
 | Property | Type | Description |
 |---|---|---|
-| `text`| String, required | Accessible text for the switch; defaults to "Visibility" |
 | `disabled` | Boolean | Disabled the switch |
-| `on` | Boolean | Whether the switch is "on" or "off" |
+| `on` | Boolean | Whether the switch is "on" or "off". If content is passed into the switch slot, the switch will be "on with conditions". |
 | `text-position` | String | Valid values are: `start`, `end` (default), and `hidden` |
 
 ### Events
 
 - `change`: dispatched when the `on` property is updated
+
+### Slots
+
+- Optional default slot content - Content that will be displayed within the "conditions" opener tooltip when the switch is on.
+  
 <!-- docs: end hidden content -->
+
+### Visibility Switch with Conditions
+It may be helpful to have visibility be dependent on additional conditions being met outside of the Visibility Switch.
+
+Additional information can be added to the label by passing it into the `d2l-switch-visibility` element.
+
+<!-- docs: demo code autoSize:false size:large -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/switch/switch-visibility.js';
+</script>
+<d2l-switch-visibility on>
+  These are some conditions that must be met for the activity to be visible.
+  <ul>
+    <li> Condition 1 </li>
+    <li> Condition 2 </li>
+    <li> Condition 3 </li>
+  </ul>
+</d2l-switch-visibility>
+```

package/components/switch/demo/switch.html

@@ -53,6 +53,21 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Visibility (with conditions)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-switch-visibility>
+						These are some conditions that must be met for the activity to be visible.
+						<ul>
+							<li> Condition 1 </li>
+							<li> Condition 2 </li>
+							<li> Condition 3 </li>
+						</ul>
+					</d2l-switch-visibility>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/switch/switch-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -21,8 +22,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 			 */
 			on: { type: Boolean, reflect: true },
 			/**
-			 * REQUIRED: The text that is displayed for the switch label.
-			 * @type {string}
+			 * @ignore - Need to add documentation in each component that uses this mixin.
 			 */
 			text: { type: String, reflect: true },
 			/**
@@ -30,7 +30,8 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 			 * @type {'start'|'end'|'hidden'}
 			 * @default end
 			 */
-			textPosition: { type: String, attribute: 'text-position', reflect: true }
+			textPosition: { type: String, attribute: 'text-position', reflect: true },
+			_hovering: { state: true }
 		};
 	}
 
@@ -49,7 +50,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 				border: 2px solid transparent;
 				border-radius: 1rem;
 				box-sizing: border-box;
-				cursor: pointer;
+				cursor: default;
 				display: inline-block;
 				font-size: 0;
 				line-height: 0;
@@ -60,10 +61,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 			.d2l-switch-container.focus-visible {
 				border-color: var(--d2l-color-celestine);
 			}
-			.d2l-switch-container:hover > .d2l-switch-inner {
-				border-color: var(--d2l-color-celestine);
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
-			}
 			:host([disabled]) .d2l-switch-container {
 				cursor: default;
 				opacity: 0.5;
@@ -147,9 +144,17 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 				transform: scale(0.35);
 			}
 			.d2l-switch-text {
+				cursor: default;
 				font-size: 0.8rem;
 				font-weight: 400;
 			}
+			:host([text-position="hidden"]) .d2l-switch-text {
+				display: none;
+			}
+			.d2l-switch-inner:hover, .switch-hover {
+				border-color: var(--d2l-color-celestine);
+				box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
+			}
 			@media (prefers-reduced-motion: reduce) {
 				.d2l-switch-toggle,
 				.d2l-switch-icon-on,
@@ -167,6 +172,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		this.on = false;
 		this.textPosition = 'end';
 		this._textId = getUniqueId();
+		this._hovering = false;
 	}
 
 	static get focusElementSelector() {
@@ -182,11 +188,17 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 
 	render() {
 		const tabindex = (!this.disabled ? '0' : undefined);
-		const text = html`<span id="${this._textId}" class="d2l-switch-text">${this.text}</span>`;
+		const innerSwitchClasses = {
+			'switch-hover': this._hovering,
+			'd2l-switch-inner': true
+		};
+		const switchLabel = html`<span id="${this._textId}" class="d2l-switch-text">${this._labelContent}</span>`;
 		const textPosition = (this.textPosition === 'start' || this.textPosition === 'hidden'
 			? this.textPosition : 'end');
+
+		// Note: we render the switchLabel in the case of textPosition === 'hidden' so that any slot handlers can pick up on content being passed in
 		return html`
-			${textPosition === 'start' ? text : ''}
+			${textPosition === 'start' ? switchLabel : ''}
 			<div
 				aria-checked="${this.on ? 'true' : 'false'}"
 				aria-label="${ifDefined(textPosition === 'hidden' ? this.text : undefined)}"
@@ -197,16 +209,25 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 				@keyup="${this._handleKeyUp}"
 				role="switch"
 				tabindex="${ifDefined(tabindex)}">
-				<div class="d2l-switch-inner">
+				<div class="${classMap(innerSwitchClasses)}">
 					<div class="d2l-switch-toggle"><div></div></div>
 					<div class="d2l-switch-icon-on">${this.onIcon}</div>
 					<div class="d2l-switch-icon-off">${this.offIcon}</div>
 				</div>
 			</div>
-			${textPosition === 'end' ? text : ''}
+			${textPosition === 'end' || textPosition === 'hidden' ? switchLabel : ''}
 		`;
 	}
 
+	get _labelContent() {
+		return html`<span 
+						@click='${this._handleClick}' 
+						@mouseenter='${this._handleSwitchHover}' 
+						@mouseleave='${this._handleSwitchHoverLeave}'>
+						${this.text}
+					</span>`;
+	}
+
 	_handleClick() {
 		this._toggleState();
 	}
@@ -221,6 +242,14 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		if (e.keyCode === 32) this._toggleState();
 	}
 
+	_handleSwitchHover() {
+		this._hovering = true;
+	}
+
+	_handleSwitchHoverLeave() {
+		this._hovering = false;
+	}
+
 	_toggleState() {
 		if (this.disabled) return;
 		this.on = !this.on;

package/components/switch/switch-visibility.js

@@ -1,19 +1,53 @@
 import '../icons/icon.js';
-import { html, LitElement } from 'lit';
+import '../tooltip/tooltip-help.js';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SwitchMixin } from './switch-mixin.js';
 
 /**
  * A variant of the generic switch configured with special icons and default text for toggling "visibility".
+ * @slot - Optional content that will be displayed within the "conditions" opener tooltip when the switch is on.
  */
 class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 
-	/**
-	 * The text that is displayed for the switch label.
-	 * @default "Visibility"
-	 */
+	static get properties() {
+		return {
+			_hasConditions: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [super.styles, css`
+			d2l-tooltip-help {
+				display: none;
+			}
+			d2l-tooltip-help.switch-visibility-conditions-show {
+				display: inline;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this._hasConditions = false;
+	}
+
 	get text() {
-		return (this._text ? this._text : this.localize('components.switch.visibility'));
+		if (this._text) return this._text;
+
+		if (this.on && this._hasConditions && this.textPosition === 'hidden') {
+			return `${this.localize('components.switch.visibleWithPeriod')} ${this.localize('components.switch.conditions')}`;
+		}
+		else if (this.on && this._hasConditions) {
+			return this.localize('components.switch.visibleWithPeriod');
+		}
+		else if (this.on) {
+			return this.localize('components.switch.visible');
+		}
+		else {
+			return this.localize('components.switch.hidden');
+		}
 	}
 
 	set text(val) {
@@ -32,6 +66,30 @@ class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 		return html`<d2l-icon icon="tier1:visibility-show"></d2l-icon>`;
 	}
 
+	get _labelContent() {
+		if (this._text) return super._labelContent;
+
+		const tooltipHelpClasses = {
+			'switch-visibility-conditions-show': this.on && this._hasConditions,
+			'd2l-switch-text': true
+		};
+
+		const conditions = html`
+			<d2l-tooltip-help 
+				class="${classMap(tooltipHelpClasses)}" 
+				id="conditions-help" 
+				inherit-font-style
+				text="${this.localize('components.switch.conditions')}">
+				<slot @slotchange="${this._handleConditionsSlotChange}"></slot>
+			</d2l-tooltip-help>
+			`;
+
+		return html`${super._labelContent}${conditions}`;
+	}
+
+	_handleConditionsSlotChange(e) {
+		this._hasConditions = e.target.assignedNodes({ flatten: true }).length > 0;
+	}
 }
 
 customElements.define('d2l-switch-visibility', VisibilitySwitch);

package/components/switch/switch.js

@@ -6,6 +6,7 @@ import { SwitchMixin } from './switch-mixin.js';
 
 /**
  * A generic switch with on/off semantics.
+ * @attr {string} text - REQUIRED: The text that is displayed for the switch label.
  */
 class Switch extends SwitchMixin(LitElement) {
 

package/components/tooltip/tooltip.js

@@ -466,11 +466,14 @@ class Tooltip extends RtlMixin(LitElement) {
 			}
 		}
 
+		// Note: role="text" is a workaround for Safari. Otherwise, list-item content is not announced with VoiceOver
 		return html`
 			<div class="d2l-tooltip-container">
 				<div class="d2l-tooltip-position" style=${styleMap(tooltipPositionStyle)}>
 					<div class="d2l-body-small d2l-tooltip-content">
-						<slot></slot>
+						<div role="text">
+							<slot></slot>
+						</div>
 					</div>
 				</div>
 				<div class="d2l-tooltip-pointer">

package/custom-elements.json

@@ -3813,7 +3813,7 @@
         {
           "name": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {
@@ -3835,7 +3835,7 @@
           "name": "inline",
           "attribute": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {
@@ -9851,12 +9851,6 @@
       "path": "./components/switch/switch-visibility.js",
       "description": "A variant of the generic switch configured with special icons and default text for toggling \"visibility\".",
       "attributes": [
-        {
-          "name": "text",
-          "description": "The text that is displayed for the switch label.",
-          "type": "string",
-          "default": "\"\\\"Visibility\\\"\""
-        },
         {
           "name": "disabled",
           "description": "Disables the switch from being toggled.",
@@ -9877,6 +9871,9 @@
         }
       ],
       "properties": [
+        {
+          "name": "text"
+        },
         {
           "name": "offIcon",
           "type": "TemplateResult<1>"
@@ -9885,13 +9882,6 @@
           "name": "onIcon",
           "type": "TemplateResult<1>"
         },
-        {
-          "name": "text",
-          "attribute": "text",
-          "description": "The text that is displayed for the switch label.",
-          "type": "string",
-          "default": "\"\\\"Visibility\\\"\""
-        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -9924,6 +9914,12 @@
           "name": "change",
           "description": "Dispatched when the `on` property is updated"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Optional content that will be displayed within the \"conditions\" opener tooltip when the switch is on."
+        }
       ]
     },
     {
@@ -9931,11 +9927,6 @@
       "path": "./components/switch/switch.js",
       "description": "A generic switch with on/off semantics.",
       "attributes": [
-        {
-          "name": "text",
-          "description": "REQUIRED: The text that is displayed for the switch label.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "description": "Disables the switch from being toggled.",
@@ -9953,6 +9944,11 @@
           "description": "Determines where text should be positioned relative to the switch.",
           "type": "'start'|'end'|'hidden'",
           "default": "\"end\""
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: The text that is displayed for the switch label.",
+          "type": "string"
         }
       ],
       "properties": [
@@ -9964,12 +9960,6 @@
           "name": "onIcon",
           "type": "TemplateResult<1>"
         },
-        {
-          "name": "text",
-          "attribute": "text",
-          "description": "REQUIRED: The text that is displayed for the switch label.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",

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/lang/ar.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "تحديد الكل",
 	"components.selection.select-all-items": "تحديد كل المواد الـ {count}.",
 	"components.selection.selected": "تم تحديد {count}",
-	"components.switch.visibility": "إمكانية الرؤية",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",
 	"components.tag-list.clear": "انقر فوق، أو اضغط على مسافة للخلف، أو اضغط على مفتاح حذف لإزالة العنصر {value}",

package/lang/cy.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Dewis y Cyfan",
 	"components.selection.select-all-items": "Dewis Pob {count} Eitem",
 	"components.selection.selected": "{count} wedi’u dewis.",
-	"components.switch.visibility": "Gwelededd",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Sgrolio Ymlaen",
 	"components.tabs.previous": "Sgrolio Yn Ôl",
 	"components.tag-list.clear": "Cliciwch, pwyswch yn ôl, neu pwyswch y bysell dileu i dynnu’r eitem {value}",

package/lang/da.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Vælg alle",
 	"components.selection.select-all-items": "Vælg alle {count} elementer",
 	"components.selection.selected": "{count} valgt",
-	"components.switch.visibility": "Synlighed",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Rul frem",
 	"components.tabs.previous": "Rul tilbage",
 	"components.tag-list.clear": "Klik, tryk på tilbagetasten, eller tryk på slettasten for at fjerne element {value}",

package/lang/de.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Alle auswählen",
 	"components.selection.select-all-items": "Alle {count} Elemente auswählen",
 	"components.selection.selected": "{count} ausgewählt",
-	"components.switch.visibility": "Sichtbarkeit",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Weiterblättern",
 	"components.tabs.previous": "Zurückblättern",
 	"components.tag-list.clear": "Klicken Sie, drücken Sie die Rücktaste, oder drücken Sie die Entfernen-Taste, um das Element {value} zu entfernen",

package/lang/en.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Select All",
 	"components.selection.select-all-items": "Select All {count} Items",
 	"components.selection.selected": "{count} selected",
-	"components.switch.visibility": "Visibility",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
 	"components.tag-list.clear": "Click, press backspace, or press delete key to remove item {value}",

package/lang/es-es.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Seleccionar todo",
 	"components.selection.select-all-items": "Seleccione los {count} elementos",
 	"components.selection.selected": "{count} seleccionados",
-	"components.switch.visibility": "Visibilidad",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Desplazarse hacia delante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
 	"components.tag-list.clear": "Haga clic, pulse Retroceso o pulse la tecla Supr para eliminar el elemento {value}",

package/lang/es.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Seleccionar todo",
 	"components.selection.select-all-items": "Seleccione todos los {count} elementos",
 	"components.selection.selected": "{count} seleccionados",
-	"components.switch.visibility": "Visibilidad",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
 	"components.tag-list.clear": "Haga clic, presione Retroceso o presione la tecla Suprimir para eliminar el elemento {value}",

package/lang/fr-fr.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Tout sélectionner",
 	"components.selection.select-all-items": "Sélectionner tous les {count} éléments",
 	"components.selection.selected": "{count} sélectionnés",
-	"components.switch.visibility": "Visibilité",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Faire défiler vers l'avant",
 	"components.tabs.previous": "Faire défiler vers l'arrière",
 	"components.tag-list.clear": "Cliquez sur l’élément, appuyez sur la touche Retour arrière ou sur la touche Suppr pour supprimer l’élément {value}",

package/lang/fr.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Tout sélectionner",
 	"components.selection.select-all-items": "Sélectionner tous les {count} éléments",
 	"components.selection.selected": "{count} sélectionné(s)",
-	"components.switch.visibility": "Visibilité",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Défilement avant",
 	"components.tabs.previous": "Défilement arrière",
 	"components.tag-list.clear": "Cliquez sur le bouton, appuyez sur retour arrière ou appuyez sur la touche de suppression pour supprimer l’élément {value}",

package/lang/hi.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "सभी का चयन करें",
 	"components.selection.select-all-items": "सभी {count} आइटम चुनें।",
 	"components.selection.selected": "{count} चयनित",
-	"components.switch.visibility": "दृश्यता",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "आगे स्क्रॉल करें",
 	"components.tabs.previous": "पीछे स्क्रॉल करें",
 	"components.tag-list.clear": "{value} को हटाने के लिए क्लिक करें, बैकस्पेस दबाएँ, या हटाएँ कुंजी को दबाएँ",

package/lang/ja.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "すべて選択",
 	"components.selection.select-all-items": "{count} 個の項目をすべて選択",
 	"components.selection.selected": "{count} 個を選択済み",
-	"components.switch.visibility": "表示",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "前方にスクロール",
 	"components.tabs.previous": "後方にスクロール",
 	"components.tag-list.clear": "クリックする、Backspace キーを押す、または Delete キーを押すと項目 {value} が削除されます",

package/lang/ko.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "모두 선택",
 	"components.selection.select-all-items": "{count}개 항목을 모두 선택하십시오.",
 	"components.selection.selected": "{count}개 선택됨",
-	"components.switch.visibility": "표시여부",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "앞으로 스크롤",
 	"components.tabs.previous": "뒤로 스크롤",
 	"components.tag-list.clear": "항목 {value}을(를) 제거하려면 클릭하거나, 백스페이스 또는 삭제 키를 누릅니다.",

package/lang/nl.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Alles selecteren",
 	"components.selection.select-all-items": "Alle {count} records selecteren",
 	"components.selection.selected": "{count} geselecteerd",
-	"components.switch.visibility": "Zichtbaarheid",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Naar voren scrollen",
 	"components.tabs.previous": "Naar achteren scrollen",
 	"components.tag-list.clear": "Klik, druk op Backspace of druk op de Delete-toets om item {value} te verwijderen",

package/lang/pt.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Selecionar tudo",
 	"components.selection.select-all-items": "Selecione todos os {count} itens",
 	"components.selection.selected": "{count} selecionados",
-	"components.switch.visibility": "Visibilidade",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
 	"components.tag-list.clear": "Clique em, pressione Backspace ou pressione a tecla Delete para remover o item {value}",

package/lang/sv.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Välj alla",
 	"components.selection.select-all-items": "Välj alla {count} objekt",
 	"components.selection.selected": "{count} valda",
-	"components.switch.visibility": "Synlighet",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "Bläddra framåt",
 	"components.tabs.previous": "Bläddra bakåt",
 	"components.tag-list.clear": "Klicka, tryck på backstegstangenten eller Delete-tangenten för att ta bort objektet {value}",

package/lang/tr.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "Tümünü Seç",
 	"components.selection.select-all-items": "{count} Öğenin Tamamını Seç",
 	"components.selection.selected": "{count} öğe seçildi",
-	"components.switch.visibility": "Görünürlük",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "İleri Kaydır",
 	"components.tabs.previous": "Geri Kaydır",
 	"components.tag-list.clear": "Öğe {value} değerini kaldırmak için tıklatın, geri al tuşuna veya sil tuşuna basın",

package/lang/zh-cn.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "全选",
 	"components.selection.select-all-items": "选择全部 {count} 个项目",
 	"components.selection.selected": "已选 {count}",
-	"components.switch.visibility": "可见性",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "向前滚动",
 	"components.tabs.previous": "向后滚动",
 	"components.tag-list.clear": "单击、按退格键或按 Delete 键以移除项目 {value}",

package/lang/zh-tw.js

@@ -98,7 +98,10 @@ export default {
 	"components.selection.select-all": "全選",
 	"components.selection.select-all-items": "選取所有 {count} 個項目",
 	"components.selection.selected": "已選取 {count} 個",
-	"components.switch.visibility": "能見度",
+	"components.switch.visible": "Visible",
+	"components.switch.visibleWithPeriod": "Visible.",
+	"components.switch.hidden": "Hidden",
+	"components.switch.conditions": "Conditions must be met",
 	"components.tabs.next": "向前捲動",
 	"components.tabs.previous": "向後捲動",
 	"components.tag-list.clear": "按一下、按下退格鍵或按下刪除鍵以移除項目 {value}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.42.0",
+  "version": "2.43.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -44,7 +44,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/eslint-parser": "^7",
-    "@brightspace-ui/stylelint-config": "^0.6",
+    "@brightspace-ui/stylelint-config": "^0.7",
     "@open-wc/testing": "^3",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.14",