@brightspace-ui/core 3.46.1 → 3.47.1

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

@@ -1,13 +1,14 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
 import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
-import { until } from 'lit/directives/until.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {
@@ -142,7 +143,7 @@ const getRenderers = async() => {
 /**
  * A component for displaying user-authored HTML.
  */
-class HtmlBlock extends LitElement {
+class HtmlBlock extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -206,8 +207,7 @@ class HtmlBlock extends LitElement {
 		this._initialContextResolve = undefined;
 		this._initialContextPromise = new Promise(resolve => this._initialContextResolve = resolve);
 
-		this._renderersProcessedResolve = undefined;
-		this._renderersProcessedPromise = new Promise(resolve => this._renderersProcessedResolve = resolve);
+		this._renderContainerRef = createRef();
 
 		const contextKeysPromise = getRenderers().then(renderers => renderers.reduce((keys, currentRenderer) => {
 			if (currentRenderer.contextKeys) currentRenderer.contextKeys.forEach(key => keys.push(key));
@@ -216,10 +216,7 @@ class HtmlBlock extends LitElement {
 
 		const contextValsPromise = contextKeysPromise.then(contextKeys => {
 			return Promise.allSettled(contextKeys.map(key => {
-				return tryGet(key, undefined, ctx => {
-					this._context.set(key, ctx);
-					this.updated(new Map([['_context']]));
-				});
+				return tryGet(key, undefined, ctx => this._context.set(key, ctx));
 			}));
 		});
 
@@ -238,24 +235,18 @@ class HtmlBlock extends LitElement {
 		};
 
 		return html`
-			<div class="${classMap(renderContainerClasses)}">
-				${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
-			</div>
+			<div class="${classMap(renderContainerClasses)}" ${ref(this._renderContainerRef)}></div>
 			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if ((changedProperties.has('embeds') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
+		if (this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 	}
 
-	async getLoadingComplete() {
-		return this._renderersProcessedPromise;
-	}
-
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
@@ -264,7 +255,6 @@ class HtmlBlock extends LitElement {
 	async _processEmbeds() {
 		const htmlFragment = document.createRange().createContextualFragment(this.html);
 		await renderEmbeds(htmlFragment);
-		this.updated(new Map([['embeds']]));
 		return htmlFragment;
 	}
 
@@ -289,7 +279,7 @@ class HtmlBlock extends LitElement {
 				loadingCompletePromises.push(renderer.getLoadingComplete());
 			}
 		}
-		Promise.all(loadingCompletePromises).then(() => this._renderersProcessedResolve());
+		Promise.all(loadingCompletePromises).then(this.resolveLoadingComplete);
 	}
 
 	async _renderInline(slot) {
@@ -300,15 +290,16 @@ class HtmlBlock extends LitElement {
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
 
 		if (!noDeferredRenderingContainer) {
-			this._renderersProcessedResolve();
+			this.resolveLoadingComplete();
 			return;
 		}
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
 	async _updateRenderContainer() {
-		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		await this._processRenderers(renderContainer);
+		this._renderContainerRef.value.innerHTML = '';
+		this._renderContainerRef.value.append(await this._processEmbeds());
+		await this._processRenderers(this._renderContainerRef.value);
 	}
 
 	_validateHtml() {

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

@@ -42,13 +42,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Placeholder</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-input-number label="Age" label-hidden placeholder="Age"></d2l-input-number>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Min and Max Values</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -40,13 +40,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Placeholder</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-input-percent label="Grade" label-hidden placeholder="Grade"></d2l-input-percent>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Min and Max Fraction Digits</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -15,7 +15,7 @@
 			<h2>Search Input</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-search label="Search" value="apples" placeholder="Search for some stuff">
+					<d2l-input-search label="Search" value="apples" placeholder="Search...">
 					</d2l-input-search>
 				</template>
 			</d2l-demo-snippet>
@@ -23,7 +23,7 @@
 			<h2>Search Input (No Clear)</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-search label="Search" value="Clear button will never appear" placeholder="Search for some stuff" no-clear>
+					<d2l-input-search label="Search" value="Clear button will never appear" placeholder="Search..." no-clear>
 					</d2l-input-search>
 				</template>
 			</d2l-demo-snippet>
@@ -31,7 +31,7 @@
 			<h2>Search Input (Search on Input)</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-search label="Search" value="Will dispatch search after every input" placeholder="Search for some stuff" search-on-input>
+					<d2l-input-search label="Search" value="Will dispatch search after every input" placeholder="Search..." search-on-input>
 					</d2l-input-search>
 				</template>
 			</d2l-demo-snippet>
@@ -39,7 +39,7 @@
 			<h2>Search Input with Inline Help</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-search label="Search" value="apples" placeholder="Search for some stuff">
+					<d2l-input-search label="Search" value="apples" placeholder="Search...">
 						<div slot="inline-help">
 							Help text <b>right here</b>!
 						</div>
@@ -50,7 +50,7 @@
 			<h2>Search Input with Inline Help (multiline)</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-search label="Search" value="apples" placeholder="Search for some stuff">
+					<d2l-input-search label="Search" value="apples" placeholder="Search...">
 						<div slot="inline-help">
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

@@ -62,13 +62,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Placeholder</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-input-text label="Name" label-hidden placeholder="Enter a name..."></d2l-input-text>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Instructions</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -47,10 +47,10 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Placeholder</h2>
+			<h2>Long Label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-textarea label="Description" placeholder="Enter a description of your favorite cartoon character. It must be between 30 and 60 characters in length.  Good luck!"></d2l-input-textarea>
+					<d2l-input-textarea label="Enter a description of your favorite cartoon character. It must be between 30 and 60 characters in length."></d2l-input-textarea>
 				</template>
 			</d2l-demo-snippet>
 

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

@@ -54,7 +54,6 @@ The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's i
 | `min` | Number | Minimum value allowed. |
 | `min-exclusive` | Boolean, default: `false` | Indicates whether the min value is exclusive. |
 | `min-fraction-digits` | Number, default: `0` | Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits` |
-| `placeholder` | String | Placeholder text. |
 | `required` | Boolean, default: `false` | Indicates that a value is required. |
 | `unit` | String | Unit associated with the input value, displayed next to input and announced as part of the label |
 | `value` | Number | Value of the input. |
@@ -128,7 +127,6 @@ The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it
 | `label-hidden` | Boolean, default: `false` | Hides the label visually (moves it to the input's `aria-label` attribute). |
 | `max-fraction-digits` | Number | Maximum number of digits allowed after the decimal place. |
 | `min-fraction-digits` | Number | Minimum number of digits allowed after the decimal place. |
-| `placeholder` | String | Placeholder text. |
 | `required` | Boolean, default: `false` | Indicates that a value is required. |
 | `value` | Number | Value of the input. |
 

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

@@ -86,7 +86,6 @@ When the input is cleared, the same event will be fired with an empty value.
 
 - While the component does not have a visible label, the search icon clearly indicates its purpose
 	- While not required to meet WCAG, this [pattern](https://www.w3.org/WAI/WCAG2/supplemental/patterns/o1p07-icons-used/) is a great way to help individuals with cognitive accessibility needs
-	- The contrast ratio of the placeholder text can be safely ignored since the search icon serves the same purpose, and meets that criteria
 - It is important to note that `placeholder` is not a suitable replacement for `label` or `description`, since it only applies when the input is empty, and not all users will be able to read it in the first place
 - Search results should be announced to screen reader users using a live region around the result summary or by using the [`announce`](https://github.com/BrightspaceUI/core/blob/main/helpers/announce.js) helper
 	- It can also be used to help confirm what exactly was searched, along with how many results were found

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

@@ -28,23 +28,14 @@ Text inputs allow users to input, edit, and select text.
 * Make sure you include an obvious indication of what the field is for. Usually this means a label.
 * Design the length of the text input to give the user a scent of how long the expected data should be.
 * Ensure the label remains visible when a user focuses on the input using their mobile device. Often this means using a top-aligned label, but a left-aligned label with a very short text input can work also.
-* Placeholder text is inaccessible so only use it for decorative or supporting text.
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don’t use placeholder text as the label.
-* Don’t use placeholder text if it is redundant (ie: “Click to start typing”)
-* Don’t use placeholder text to communicate the required format of the input (ie: “YY/MM/DD”). Use help or label text for this.
+* Don’t use placeholder text - support for this property is being removed. Find an alternative method of communicating text input instructions.
 * Don’t use different font sizes. Text should always be Compact.
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-## Accessibility
-
-Due to widespread popularity, users have a strong association that placeholder text in text inputs should appear “light gray” compared to active text colour. This has been confirmed in our own usability tests; any text that appears dark enough to pass WCAG AA colour contrast tests is also interpreted as “editable” by users.
-
-Therefore in text inputs, placeholder text is a light colour (Mica), which fails colour contrast. Because of this, placeholder text should be used sparingly, and never be used to communicate crucial information unless that information is also made available to screen readers via an equivalent experience (hidden label, etc). Text which is decorative or supplemental is okay, as is using a hidden label which provides the same information.
-
 ## Text Input [d2l-input-text]
 
 The `<d2l-input-text>` element is a simple wrapper around the native `<input type="text">` tag. It's intended primarily for inputting generic text, email addresses and URLs.
@@ -90,7 +81,6 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `name` | String | Name of the input |
 | `novalidate` | Boolean | Disables the built-in validation |
 | `pattern` | String | Regular expression pattern to validate the value |
-| `placeholder` | String | Placeholder text |
 | `prevent-submit` | Boolean | Prevents pressing ENTER from submitting forms |
 | `readonly` | Boolean | Makes the input read-only |
 | `required` | Boolean | Indicates that a value is required |
@@ -207,7 +197,6 @@ The `<d2l-input-textarea>` is a wrapper around the native `<textarea>` element t
 | `minlength` | Number | Imposes a lower character limit |
 | `no-border` | Boolean | Hides the border |
 | `no-padding` | Boolean | Removes left/right padding |
-| `placeholder` | String | Placeholder text |
 | `required` | Boolean | Indicates that a value is required |
 | `rows` | Number, default: 5 | Minimum number of rows. If `rows` and `max-rows` are equal then auto-grow will be disabled. |
 | `value` | String, default: `''` | Value of the `textarea` |

package/components/inputs/input-number.js

@@ -142,8 +142,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 */
 			minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
 			/**
-			 * Placeholder text
-			 * @type {string}
+			 * @ignore
 			 */
 			placeholder: { type: String },
 			/**

package/components/inputs/input-percent.js

@@ -49,8 +49,7 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 			 */
 			minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
 			/**
-			 * Placeholder text
-			 * @type {string}
+			 * @ignore
 			 */
 			placeholder: { type: String },
 			/**

package/components/inputs/input-styles.js

@@ -33,13 +33,13 @@ export const inputStyles = css`
 		padding: var(--d2l-input-padding, 0.4rem 0.75rem);
 	}
 	.d2l-input::placeholder {
-		color: var(--d2l-color-mica);
+		color: var(--d2l-color-galena);
 		font-size: 0.8rem;
 		font-weight: 400;
 		opacity: 1; /* Firefox has non-1 default */
 	}
 	.d2l-input::-ms-input-placeholder {
-		color: var(--d2l-color-mica);
+		color: var(--d2l-color-galena);
 		font-size: 0.8rem;
 		font-weight: 400;
 	}

package/components/inputs/input-text.js

@@ -107,8 +107,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 */
 			pattern: { type: String },
 			/**
-			 * Placeholder text
-			 * @type {string}
+			 * @ignore
 			 */
 			placeholder: { type: String },
 			/**

package/components/inputs/input-textarea.js

@@ -71,8 +71,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			 */
 			noPadding: { type: Boolean, attribute: 'no-padding' },
 			/**
-			 * Placeholder text
-			 * @type {string}
+			 * @ignore
 			 */
 			placeholder: { type: String },
 			/**

package/components/inputs/sass/text.scss

@@ -27,7 +27,7 @@
 	width: 100%;
 	&::placeholder,
 	&::-ms-input-placeholder {
-		color: $d2l-color-mica;
+		color: $d2l-color-galena;
 		font-size: 0.8rem;
 		font-weight: 400;
 		opacity: 1; /* Firefox has non-1 default */

package/components/tooltip/README.md

@@ -90,7 +90,7 @@ The `d2l-tooltip` component is used to display additional information when users
   });
 </script>
 <!-- docs: end hidden content -->
-<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="Text Input" label-hidden style="max-width:250px;"></d2l-input-text>
+<d2l-input-text id="tooltip-error" aria-invalid="true" label="Text Input (hover for error)" label-hidden style="max-width:250px;"></d2l-input-text>
 <d2l-tooltip for="tooltip-error" state="error">
 	Your error message will display here
 </d2l-tooltip>

package/custom-elements.json

@@ -4759,6 +4759,14 @@
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
           "type": "Boolean",
           "default": "false"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ]
     },
@@ -6185,11 +6193,6 @@
           "description": "Minimum value allowed",
           "type": "number"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "unit",
           "description": "Unit associated with the input value, displayed next to input and announced as part of the label",
@@ -6303,12 +6306,6 @@
           "description": "Minimum value allowed",
           "type": "number"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "unit",
           "attribute": "unit",
@@ -6476,11 +6473,6 @@
           "description": "Minimum number of decimal values to show.",
           "type": "number"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "value",
           "description": "Value of the input",
@@ -6544,12 +6536,6 @@
           "description": "Minimum number of decimal values to show.",
           "type": "number"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "value",
           "attribute": "value",
@@ -6821,11 +6807,6 @@
           "description": "Regular expression pattern to validate the value",
           "type": "string"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "size",
           "description": "Size of the input",
@@ -6987,12 +6968,6 @@
           "description": "Regular expression pattern to validate the value",
           "type": "string"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "size",
           "attribute": "size",
@@ -7178,11 +7153,6 @@
           "description": "Removes default left/right padding",
           "type": "boolean"
         },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "description": "Disables the input",
@@ -7277,12 +7247,6 @@
           "description": "Removes default left/right padding",
           "type": "boolean"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder text",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/package.json

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