@brightspace-ui/core 3.164.5 → 3.165.0

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/components/tabs/demo/tabs.html

@@ -482,6 +482,9 @@
 			document.addEventListener('d2l-tab-panel-selected', (e) => {
 				console.log('tab panel selected', e);
 			});
+			document.addEventListener('d2l-tab-selected', (e) => {
+				console.log('tab selected', e);
+			});
 			document.addEventListener('d2l-tab-panel-text-changed', (e) => {
 				console.log('tab panel text changed', e);
 			});

package/components/tabs/tab-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const keyCodes = {
@@ -94,6 +95,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		this.tabIndex = -1;
 
 		this._clicked = false;
+		this._noInitialSelectedEvent = getFlag('GAUD-8605-tab-no-initial-selected-event', false);
 	}
 
 	firstUpdated(changedProperties) {
@@ -102,6 +104,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		this.addEventListener('click', this.#handleClick);
 		this.addEventListener('keydown', this.#handleKeydown);
 		this.addEventListener('keyup', this.#handleKeyup);
+
+		this.#hasInitialized = true;
 	}
 
 	render() {
@@ -116,6 +120,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
 		if (changedProperties.has('selected')) {
 			this.ariaSelected = `${this.selected}`;
+			if (!this.#hasInitialized && this._noInitialSelectedEvent) return; // Only fire events if selected changes after initial render
+
 			if (this.selected) {
 				/** Dispatched when a tab is selected */
 				this.dispatchEvent(new CustomEvent(
@@ -145,6 +151,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		return html`<div>Default Tab Content</div>`;
 	}
 
+	#hasInitialized = false;
+
 	#handleClick() {
 		if (this.selected) return;
 

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/package.json

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