@brightspace-ui/core 3.31.1 → 3.32.0

package/custom-elements.json

@@ -167,10 +167,6 @@
           "description": "Type of the alert being displayed",
           "type": "'default'|'critical'|'success'|'warning'",
           "default": "\"default\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -330,10 +326,6 @@
           "description": "Renders in compact mode, displaying only the last item",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -373,10 +365,6 @@
           "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).",
           "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
           "default": "\"icon\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -881,10 +869,6 @@
           "attribute": "summary",
           "description": "ACCESSIBILITY: Summary of the calendar used by screen reader users for identifying the calendar and/or summarizing its purpose",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -1615,10 +1599,6 @@
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -1764,10 +1744,6 @@
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -2026,10 +2002,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "titleText",
           "attribute": "title-text",
@@ -2122,10 +2094,6 @@
           "type": "number",
           "default": "1170"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "asyncContainerCustom",
           "type": "boolean"
@@ -2257,10 +2225,6 @@
           "type": "number",
           "default": "600"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "asyncContainerCustom",
           "type": "boolean"
@@ -2741,10 +2705,6 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3119,10 +3079,6 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3497,10 +3453,6 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3861,10 +3813,6 @@
           "name": "text",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -3962,10 +3910,6 @@
           "description": "Date/time range input type",
           "type": "'date'|'date-time'",
           "default": "\"date-time\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -4304,10 +4248,6 @@
           "name": "openerType",
           "type": "string",
           "default": "\"DEFAULT\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4339,10 +4279,6 @@
           "attribute": "filter-ids",
           "description": "REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -4389,10 +4325,6 @@
           "description": "Indicates if the filter is open",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4476,10 +4408,6 @@
           "name": "errors",
           "type": "object",
           "default": "[]"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -4554,10 +4482,6 @@
           "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4611,10 +4535,6 @@
           "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4699,10 +4619,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -5263,10 +5179,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5495,10 +5407,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5569,10 +5477,6 @@
           "attribute": "skeleton",
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
           "type": "boolean"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -5802,10 +5706,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5995,10 +5895,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6169,10 +6065,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6520,10 +6412,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6705,10 +6593,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6845,10 +6729,6 @@
           "description": "Value of the input",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -7210,10 +7090,6 @@
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -7455,10 +7331,6 @@
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -7700,10 +7572,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -7885,10 +7753,6 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -7995,10 +7859,6 @@
           "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
           "type": "number",
           "default": "0"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -8454,10 +8314,6 @@
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
           "type": "boolean"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -8572,10 +8428,6 @@
         },
         {
           "name": "selectionInfo"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -8808,10 +8660,6 @@
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
           "type": "boolean"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -8926,10 +8774,6 @@
           "description": "Disables the handle",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -8965,10 +8809,6 @@
           "type": "number",
           "default": "0"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -9288,10 +9128,6 @@
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
           "type": "boolean"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -9917,10 +9753,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "text",
           "attribute": "text",
@@ -10117,10 +9949,6 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -10193,10 +10021,6 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -10256,10 +10080,6 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -10330,10 +10150,6 @@
           "description": "Whether the component is active or inactive",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -10495,10 +10311,6 @@
           "description": "Number of skeleton items to insert",
           "type": "number"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -10602,10 +10414,6 @@
           "name": "openerType",
           "type": "string",
           "default": "\"DEFAULT\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -10662,10 +10470,6 @@
           "attribute": "pageable-for",
           "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -11000,10 +10804,6 @@
           "description": "REQUIRED: Text for the dropdown opener button",
           "type": "string"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -11217,10 +11017,6 @@
           "description": "REQUIRED: The text for the action",
           "type": "string"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -11344,10 +11140,6 @@
         },
         {
           "name": "selectionInfo"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -11467,10 +11259,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -11513,10 +11301,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -11557,10 +11341,6 @@
           "description": "Text to display if no items are selected",
           "type": "string"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -12048,10 +11828,6 @@
           "name": "onIcon",
           "type": "TemplateResult<1>"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -12455,10 +12231,6 @@
           "description": "The type of data in the column. Used to set the title.",
           "type": "'words'|'numbers'|'dates'|'unknown'",
           "default": "\"unknown\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -12549,10 +12321,6 @@
         },
         {
           "name": "selectionInfo"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -12828,10 +12596,6 @@
           "type": "number",
           "default": "-1"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -12917,10 +12681,6 @@
           "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -12973,10 +12733,6 @@
           "type": "number",
           "default": "0"
         },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
-        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -13033,10 +12789,6 @@
           "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -13408,10 +13160,6 @@
           "description": "Whether content fills the screen or not",
           "type": "'fullscreen'|'normal'",
           "default": "\"fullscreen\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [

package/mixins/localize/localize-mixin.js

@@ -1,70 +1,32 @@
-import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
-import { defaultLocale as fallbackLang, getDocumentLocaleSettings, supportedLangpacks } from '@brightspace-ui/intl/lib/common.js';
+import { disallowedTagsRegex, getLocalizeClass, validateMarkup } from './localize.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { getLocalizeOverrideResources } from '../../helpers/getLocalizeResources.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import IntlMessageFormat from 'intl-messageformat';
 
-export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinClass extends superclass {
+export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
 
-	static get properties() {
-		return {
-			__resources: { type: Object, attribute: false }
-		};
-	}
-
-	static documentLocaleSettings = getDocumentLocaleSettings();
+	#updatedProperties = new Map();
 
 	constructor() {
 		super();
-		this.__resourcesLoadedPromise = new Promise((resolve) => {
-			let first = true;
-			this.__languageChangeCallback = () => {
-				if (!this._hasResources()) return;
-				const localizeResources = this.constructor._getAllLocalizeResources();
-				const resourcesLoadedPromise = Promise.all(localizeResources);
-				resourcesLoadedPromise
-					.then((results) => {
-						if (results.length === 0) {
-							return;
-						}
-						const resources = {};
-						for (const res of results) {
-							const language = res.language;
-							for (const [key, value] of Object.entries(res.resources)) {
-								resources[key] = { language, value };
-							}
-						}
-						this.__resources = resources;
-						this._onResourcesChange();
-						if (first) {
-							resolve();
-							first = false;
-						}
-					});
-			};
-		});
-
-		this.__updatedProperties = new Map();
+		super.constructor.setLocalizeMarkup(localizeMarkup);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.constructor.documentLocaleSettings.addChangeListener(this.__languageChangeCallback);
-		this.__languageChangeCallback();
+		this.connect();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.constructor.documentLocaleSettings.removeChangeListener(this.__languageChangeCallback);
-		this.__updatedProperties.clear();
+		this.disconnect();
+		this.#updatedProperties.clear();
 	}
 
 	async getUpdateComplete() {
 		await super.getUpdateComplete();
 		const hasResources = this._hasResources();
-		const resourcesLoaded = this.__resources !== undefined;
+		const resourcesLoaded = this.localize.resources !== undefined && !this.pristine;
 		if (!hasResources || resourcesLoaded) {
 			return;
 		}
@@ -78,148 +40,35 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinC
 			return super.shouldUpdate(changedProperties);
 		}
 
-		const ready = this.__resources !== undefined;
+		const ready = this.localize.resources !== undefined && !this.pristine;
+
 		if (!ready) {
 			changedProperties.forEach((oldValue, propName) => {
-				this.__updatedProperties.set(propName, oldValue);
+				this.#updatedProperties.set(propName, oldValue);
 			});
 			return false;
 		}
 
-		this.__updatedProperties.forEach((oldValue, propName) => {
+		this.#updatedProperties.forEach((oldValue, propName) => {
 			if (!changedProperties.has(propName)) {
 				changedProperties.set(propName, oldValue);
 			}
 		});
-		this.__updatedProperties.clear();
+		this.#updatedProperties.clear();
 
 		return super.shouldUpdate(changedProperties);
-
-	}
-
-	localize(key) {
-
-		const { language, value } = this.__resources?.[key] ?? {};
-		if (!value) return '';
-
-		let params = {};
-		if (arguments.length > 1 && arguments[1]?.constructor === Object) {
-			// support for key-value replacements as a single arg
-			params = arguments[1];
-		} else {
-			// legacy support for localize-behavior replacements as many args
-			for (let i = 1; i < arguments.length; i += 2) {
-				params[arguments[i]] = arguments[i + 1];
-			}
-		}
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			if (Object.values(params).some(v => typeof v === 'function')) throw 'localize() does not support rich text.';
-			formattedMessage = translatedMessage.format(params);
-		} catch (e) {
-			console.error(e);
-		}
-
-		return formattedMessage;
 	}
 
-	localizeHTML(key, params = {}) {
-
-		const { language, value } = this.__resources?.[key] ?? {};
-		if (!value) return '';
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			const unvalidated = translatedMessage.format({
-				b: chunks => localizeMarkup`<b>${chunks}</b>`,
-				br: () => localizeMarkup`<br>`,
-				em: chunks => localizeMarkup`<em>${chunks}</em>`,
-				i: chunks => localizeMarkup`<i>${chunks}</i>`,
-				p: chunks => localizeMarkup`<p>${chunks}</p>`,
-				strong: chunks => localizeMarkup`<strong>${chunks}</strong>`,
-				...params
-			});
-			validateMarkup(unvalidated);
-			formattedMessage = unvalidated;
-		} catch (e) {
-			console.error(e);
-		}
-
-		return formattedMessage;
-	}
-
-	static _generatePossibleLanguages(config) {
-
-		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
-
-		const { language, fallbackLanguage } = this.documentLocaleSettings;
-		const langs = [ language, fallbackLanguage ]
-			.filter(e => e)
-			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
-			.flat();
-
-		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
-	}
-
-	static _getAllLocalizeResources(config = this.localizeConfig) {
-		let resourcesLoadedPromises = [];
-		const superCtor = Object.getPrototypeOf(this);
-		// get imported terms for each config, head up the chain to get them all
-		if ('_getAllLocalizeResources' in superCtor) {
-			const superConfig = Object.prototype.hasOwnProperty.call(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
-			resourcesLoadedPromises = superCtor._getAllLocalizeResources(superConfig);
-		}
-		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
-			const possibleLanguages = this._generatePossibleLanguages(config);
-			const res = this.getLocalizeResources(possibleLanguages, config);
-			resourcesLoadedPromises.push(res);
-		}
-		return resourcesLoadedPromises;
-	}
-
-	_hasResources() {
-		return this.constructor['getLocalizeResources'] !== undefined;
-	}
-
-	_onResourcesChange() {
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-localize-resources-change'));
+	onLocalizeResourcesChange() {
+		this.requestUpdate('localize');
 	}
 
 });
 
 export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(superclass) {
 
-	static async getLocalizeResources(langs, { importFunc, osloCollection, useBrowserLangs }) {
-
-		// in dev, don't request unsupported langpacks
-		if (!importFunc.toString().includes('switch') && !useBrowserLangs) {
-			langs = langs.filter(lang => supportedLangpacks.includes(lang));
-		}
-
-		for (const lang of [...langs, fallbackLang]) {
-
-			const resources = await Promise.resolve(importFunc(lang)).catch(() => {});
-
-			if (resources) {
-
-				if (osloCollection) {
-					return await getLocalizeOverrideResources(
-						lang,
-						resources,
-						() => osloCollection
-					);
-				}
-
-				return {
-					language: lang,
-					resources
-				};
-			}
-		}
+	static getLocalizeResources() {
+		return super._getLocalizeResources(...arguments);
 	}
 
 	static get localizeConfig() {
@@ -228,25 +77,9 @@ export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(supe
 
 };
 
-export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
-
-const markupError = `localizeHTML() rich-text replacements must use localizeMarkup templates with only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`;
-const validTerminators = '([>\\s/]|$)';
-const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
-const disallowedTagsRegex = new RegExp(`<(?!${allowedAfterTriangleBracket})`);
-
-function validateMarkup(content, applyRegex) {
-	if (content) {
-		if (content.map) return content.forEach(item => validateMarkup(item));
-		if (content._localizeMarkup) return;
-		if (Object.hasOwn(content, '_$litType$')) throw markupError;
-		if (applyRegex && content.constructor === String && disallowedTagsRegex.test(content)) throw markupError;
-	}
-}
-
 export function localizeMarkup(strings, ...expressions) {
-	strings.forEach(str => validateMarkup(str, true));
-	expressions.forEach(exp => validateMarkup(exp, true));
+	strings.forEach(str => validateMarkup(str, disallowedTagsRegex));
+	expressions.forEach(exp => validateMarkup(exp, disallowedTagsRegex));
 	return { ...html(strings, ...expressions), _localizeMarkup: true };
 }
 

package/mixins/localize/localize.js

@@ -0,0 +1,255 @@
+import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
+import { defaultLocale as fallbackLang, getDocumentLocaleSettings, supportedLangpacks } from '@brightspace-ui/intl/lib/common.js';
+import { getLocalizeOverrideResources } from '../../helpers/getLocalizeResources.js';
+import IntlMessageFormat from 'intl-messageformat';
+
+export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
+
+const getDisallowedTagsRegex = allowedTags => {
+	const validTerminators = '([>\\s/]|$)';
+	const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
+	return new RegExp(`<(?!${allowedAfterTriangleBracket})`);
+};
+
+export const disallowedTagsRegex = getDisallowedTagsRegex(allowedTags);
+const noAllowedTagsRegex = getDisallowedTagsRegex([]);
+
+export const getLocalizeClass = (superclass = class {}) => class LocalizeClass extends superclass {
+
+	static documentLocaleSettings = getDocumentLocaleSettings();
+	static #localizeMarkup;
+
+	static setLocalizeMarkup(localizeMarkup) {
+		this.#localizeMarkup ??= localizeMarkup;
+	}
+
+	pristine = true;
+	#connected = false;
+	#localeChangeCallback;
+	#resourcesPromise;
+	#resolveResourcesLoaded;
+
+	async #localeChangeHandler() {
+		if (!this._hasResources()) return;
+
+		const resourcesPromise = this.constructor._getAllLocalizeResources(this.config);
+		this.#resourcesPromise = resourcesPromise;
+		const localizeResources = (await resourcesPromise).flat(Infinity);
+		// If the locale changed while resources were being fetched, abort
+		if (this.#resourcesPromise !== resourcesPromise) return;
+
+		const allResources = {};
+		const resolvedLocales = new Set();
+		for (const { language, resources } of localizeResources) {
+			for (const [key, value] of Object.entries(resources)) {
+				allResources[key] = { language, value };
+				resolvedLocales.add(language);
+			}
+		}
+		this.localize.resources = allResources;
+		this.localize.resolvedLocale = [...resolvedLocales][0];
+		if (resolvedLocales.size > 1) {
+			console.warn(`Resolved multiple locales in '${this.constructor.name || this.tagName || ''}': ${[...resolvedLocales].join(', ')}`);
+		}
+
+		if (this.pristine) {
+			this.pristine = false;
+			this.#resolveResourcesLoaded();
+		}
+
+		this.#onResourcesChange();
+	}
+
+	#onResourcesChange() {
+		if (this.#connected) {
+			this.dispatchEvent?.(new CustomEvent('d2l-localize-resources-change'));
+			this.config?.onResourcesChange?.();
+			this.onLocalizeResourcesChange?.();
+		}
+	}
+
+	connect() {
+		this.#localeChangeCallback = () => this.#localeChangeHandler();
+		LocalizeClass.documentLocaleSettings.addChangeListener(this.#localeChangeCallback);
+		this.#connected = true;
+		this.#localeChangeCallback();
+	}
+
+	disconnect() {
+		LocalizeClass.documentLocaleSettings.removeChangeListener(this.#localeChangeCallback);
+		this.#connected = false;
+	}
+
+	localize(key) {
+
+		const { language, value } = this.localize.resources?.[key] ?? {};
+		if (!value) return '';
+
+		let params = {};
+		if (arguments.length > 1 && arguments[1]?.constructor === Object) {
+			// support for key-value replacements as a single arg
+			params = arguments[1];
+		} else {
+			// legacy support for localize-behavior replacements as many args
+			for (let i = 1; i < arguments.length; i += 2) {
+				params[arguments[i]] = arguments[i + 1];
+			}
+		}
+
+		const translatedMessage = new IntlMessageFormat(value, language);
+		let formattedMessage = value;
+		try {
+			validateMarkup(formattedMessage, noAllowedTagsRegex);
+			formattedMessage = translatedMessage.format(params);
+		} catch (e) {
+			if (e.name === 'MarkupError')	{
+				e = new Error('localize() does not support rich text. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/'); // eslint-disable-line no-ex-assign
+				formattedMessage = '';
+			}
+			console.error(e);
+		}
+
+		return formattedMessage;
+	}
+
+	localizeHTML(key, params = {}) {
+
+		const { language, value } = this.localize.resources?.[key] ?? {};
+		if (!value) return '';
+
+		const translatedMessage = new IntlMessageFormat(value, language);
+		let formattedMessage = value;
+		try {
+			const unvalidated = translatedMessage.format({
+				b: chunks => LocalizeClass.#localizeMarkup`<b>${chunks}</b>`,
+				br: () => LocalizeClass.#localizeMarkup`<br>`,
+				em: chunks => LocalizeClass.#localizeMarkup`<em>${chunks}</em>`,
+				i: chunks => LocalizeClass.#localizeMarkup`<i>${chunks}</i>`,
+				p: chunks => LocalizeClass.#localizeMarkup`<p>${chunks}</p>`,
+				strong: chunks => LocalizeClass.#localizeMarkup`<strong>${chunks}</strong>`,
+				...params
+			});
+			validateMarkup(unvalidated);
+			formattedMessage = unvalidated;
+		} catch (e) {
+			if (e.name === 'MarkupError') formattedMessage = '';
+			console.error(e);
+		}
+
+		return formattedMessage;
+	}
+
+	__resourcesLoadedPromise = new Promise(r => this.#resolveResourcesLoaded = r);
+
+	static _generatePossibleLanguages(config) {
+
+		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
+
+		const { language, fallbackLanguage } = this.documentLocaleSettings;
+		const langs = [ language, fallbackLanguage ]
+			.filter(e => e)
+			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
+			.flat();
+
+		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
+	}
+
+	static _getAllLocalizeResources(config = this.localizeConfig) {
+		const resourcesLoadedPromises = [];
+		const superCtor = Object.getPrototypeOf(this);
+		// get imported terms for each config, head up the chain to get them all
+		if ('_getAllLocalizeResources' in superCtor) {
+			const superConfig = Object.prototype.hasOwnProperty.call(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
+			resourcesLoadedPromises.push(superCtor._getAllLocalizeResources(superConfig));
+		}
+		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
+			const possibleLanguages = this._generatePossibleLanguages(config);
+			const resourcesPromise = this.getLocalizeResources(possibleLanguages, config);
+			resourcesLoadedPromises.push(resourcesPromise);
+		}
+		return Promise.all(resourcesLoadedPromises);
+	}
+
+	static async _getLocalizeResources(langs, { importFunc, osloCollection, useBrowserLangs }) {
+
+		// in dev, don't request unsupported langpacks
+		if (!importFunc.toString().includes('switch') && !useBrowserLangs) {
+			langs = langs.filter(lang => supportedLangpacks.includes(lang));
+		}
+
+		for (const lang of [...langs, fallbackLang]) {
+
+			const resources = await Promise.resolve(importFunc(lang)).catch(() => {});
+
+			if (resources) {
+
+				if (osloCollection) {
+					return await getLocalizeOverrideResources(
+						lang,
+						resources,
+						() => osloCollection
+					);
+				}
+
+				return {
+					language: lang,
+					resources
+				};
+			}
+		}
+	}
+
+	_hasResources() {
+		return this.constructor.localizeConfig ? Boolean(this.constructor.localizeConfig.importFunc) : this.constructor.getLocalizeResources !== undefined;
+	}
+
+};
+
+export const Localize = class extends getLocalizeClass() {
+
+	static getLocalizeResources() {
+		return super._getLocalizeResources(...arguments);
+	}
+
+	constructor(config) {
+		super();
+		super.constructor.setLocalizeMarkup(localizeMarkup);
+		this.config = config;
+		this.connect();
+	}
+
+	get ready() {
+		return this.__resourcesLoadedPromise;
+	}
+
+	connect() {
+		super.connect();
+		return this.ready;
+	}
+
+};
+
+class MarkupError extends Error {
+	name = this.constructor.name;
+}
+
+export function validateMarkup(content, disallowedTagsRegex) {
+	if (content) {
+		if (content.forEach) {
+			content.forEach(item => validateMarkup(item));
+			return;
+		}
+		if (content._localizeMarkup) return;
+		if (Object.hasOwn(content, '_$litType$')) throw new MarkupError('Rich-text replacements must use localizeMarkup templates. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/');
+
+		if (content.constructor === String && disallowedTagsRegex?.test(content)) throw new MarkupError(`Rich-text replacements may use only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`);
+	}
+}
+
+export function localizeMarkup(strings, ...expressions) {
+	strings.forEach(str => validateMarkup(str, disallowedTagsRegex));
+	expressions.forEach(exp => validateMarkup(exp, disallowedTagsRegex));
+	return strings.reduce((acc, i, idx) => {
+		return acc.push(i, expressions[idx] ?? '') && acc;
+	}, []).join('');
+}

package/package.json

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