@brightspace-ui/core 3.164.6 → 3.165.1

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

@@ -75,6 +75,14 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Custom Width</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-textarea label="Label" value="text" skeleton></d2l-input-textarea>
+					<d2l-input-textarea label="Name" input-width="400px"></d2l-input-textarea>
+				</template>
+			</d2l-demo-snippet>
+
 			<h3>Inline Help</h3>
 			<d2l-demo-snippet>
 				<template>

package/components/inputs/input-textarea.js

@@ -39,6 +39,11 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Restricts the maximum width of the input box without impacting the width of the label.
+			 * @type {string}
+			 */
+			inputWidth: { attribute: 'input-width', type: String },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 * @type {boolean}
@@ -225,9 +230,12 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			'd2l-input': true,
 			'd2l-input-focus': !this.disabled && this._hovered
 		};
+		const inputContainerStyles = {
+			maxWidth: this.inputWidth
+		};
 
 		const textarea = html`
-			<div class="d2l-input-textarea-container d2l-skeletize">
+			<div class="d2l-input-textarea-container d2l-skeletize" style="${styleMap(inputContainerStyles)}">
 				<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
 					${lines.map(line => html`${line}<br />`)}
 				</div>

package/custom-elements.json

@@ -7732,6 +7732,11 @@
           "description": "Additional information communicated in the aria-describedby on the input",
           "type": "string"
         },
+        {
+          "name": "input-width",
+          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "type": "string"
+        },
         {
           "name": "maxlength",
           "description": "Imposes an upper character limit",
@@ -7822,6 +7827,12 @@
           "description": "Additional information communicated in the aria-describedby on the input",
           "type": "string"
         },
+        {
+          "name": "inputWidth",
+          "attribute": "input-width",
+          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "type": "string"
+        },
         {
           "name": "maxlength",
           "attribute": "maxlength",

package/lang/th.js

@@ -155,6 +155,8 @@ export default {
 	"components.pager-load-more.action": "โหลดเพิ่มเติม",
 	"components.pager-load-more.action-with-page-size": "โหลดเพิ่ม {count} รายการ",
 	"components.pager-load-more.status-loading": "กำลังโหลดรายการเพิ่มเติม",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {ปิดใช้งานเมื่อเลือกมากกว่า {countFormatted} รายการ}

package/lang/vi.js

@@ -155,6 +155,8 @@ export default {
 	"components.pager-load-more.action": "Tải thêm",
 	"components.pager-load-more.action-with-page-size": "Tải thêm {count} mục",
 	"components.pager-load-more.status-loading": "Đang tải thêm các mục",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {Vô hiệu hóa khi chọn nhiều hơn {countFormatted} mục}

package/mixins/localize/README.md

@@ -4,7 +4,7 @@ The `LocalizeMixin` allows text in components to be displayed in the user's pref
 
 ## Language Resources
 
-Resources are stored as key-value JSON objects.
+Resources are stored as JavaScript objects.
 
 ### Keys
 
@@ -14,28 +14,28 @@ For large projects, terms may be grouped using the `:` character. For example: `
 
 ### Values
 
-Term values must conform to the [ICU Message Syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) format. It supports features such as: [simple arguments](https://formatjs.io/docs/core-concepts/icu-syntax/#simple-argument), the [`{select}` format](https://formatjs.io/docs/core-concepts/icu-syntax/#select-format) and [pluralization](https://formatjs.io/docs/core-concepts/icu-syntax/#plural-format).
+Term values must contain a "message" that conforms to [ICU Message Syntax](https://formatjs.github.io/docs/core-concepts/icu-syntax/). The syntax supports features such as [simple arguments](https://formatjs.github.io/docs/core-concepts/icu-syntax/#simple-argument), [selection](https://formatjs.github.io/docs/core-concepts/icu-syntax/#select-format), and [pluralization](https://formatjs.github.io/docs/core-concepts/icu-syntax/#plural-format).
 
-> **Note:** Avoid using the ICU Message Syntax number, date and time formatting functionality. Brightspace allows customization of how these are localized, so use [@brightspace-ui/intl](https://github.com/BrightspaceUI/intl)'s `formatNumber`, `formatDate` and `formatTime` instead.
+> **Note:** Avoid using ICU Message Syntax number and date/time formatting functionality. Brightspace allows customization of how these are localized, which is supported by [@brightspace-ui/intl](https://github.com/BrightspaceUI/intl)'s `formatNumber`, `formatDate` and `formatTime` functions.
 
 ### Files
 
-Store localization resources in their own directory with nothing else in it. There should be one JavaScript file for each supported locale.
+Store resource files in their own directory (i.e. with nothing else in it). There should be one JavaScript file for each supported locale.
 
 ```javascript
-// en.js
+// lang/en.js
 export default {
   "hello": "Hello {firstName}!"
 };
 ```
 ```javascript
-// fr.js
+// lang/fr.js
 export default {
   "hello": "Bonjour {firstName}!"
 };
 ```
 
-Always provide language resources for base languages (e.g. `en`, `fr`, `pt`). That way, if the user prefers a regional language (e.g. `pt-br`) that isn't recognized, it can fall back to the base language (`pt`).
+For every supported language, there should be a base file (e.g. `en.js`, `fr.js`, `pt.js`). That way, if the user prefers a regional language (e.g. `en-au`) that isn't recognized, it can fall back to the base file (`en.js`). You do _not_ need to duplicate a locale. For instance, if you support en-US and en-GB, your English language files would likely be `en.js` and `en-gb.js`.
 
 ## Using `LocalizeMixin`
 
@@ -71,7 +71,7 @@ Two common patterns for using `localize()` are within `render()` to modify the c
 
 The `localize()` method is used to localize a piece of text.
 
-If the localized string contains arguments, pass them as a key-value object as the 2nd parameter:
+If the message contains arguments, supply a replacements object as the second parameter:
 
 ```javascript
 render() {
@@ -82,7 +82,7 @@ render() {
 
 ### `localizeHTML()`
 
-Rich formatting can be included in localization resources and safely converted to HTML with the `localizeHTML()` method.
+Rich formatting can be included in messages and safely converted to HTML with the `localizeHTML()` method.
 
 #### Basic Formatting
 
@@ -113,7 +113,7 @@ this.localizeHTML('myTerm');
 
 #### Links
 
-To wrap text in [a link](../../components/link/), define a unique tag in the localization resource:
+To wrap text in [a link](../../components/link/), surround it with a unique tag in the message:
 
 ```json
 {
@@ -133,7 +133,7 @@ this.localizeHTML('myTerm', {
 
 #### Help Tooltips
 
-To use a [help tooltip](../../components/tooltip/), define a unique tag in the localization resource in addition to the tooltip's text:
+To use a [help tooltip](../../components/tooltip/), surround the tooltip's target text with a unique tag in the message:
 
 ```json
 {
@@ -154,7 +154,7 @@ this.localizeHTML('octopus', {
 
 ### Common Resources
 
-Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
+Some resources are common and shared across D2L applications. To use these, set the `loadCommon` option:
 
 ```javascript
 static get localizeConfig() {

package/package.json

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