Updating package-lock.json

.vdiff.json

@@ -2,7 +2,7 @@
 	"browsers": [
 		{
 			"name": "Chromium",
-			"version": 128
+			"version": 129
 		}
 	]
 }

components/dialog/dialog-fullscreen.js

@@ -197,6 +197,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		this._handleResize = this._handleResize.bind(this);
 		this._handleResize();
 		this.width = 1170;
+		this._titleId = getUniqueId();
 	}
 
 	get asyncContainerCustom() {
@@ -214,7 +215,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	}
 
 	render() {
-		this._width = Math.max(1170, this.width);
 		const heightOverride = {} ;
 		let topOverride = null;
 		if (this._ifrauContextInfo) {
@@ -251,7 +251,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			<div style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
-		if (!this._titleId) this._titleId = getUniqueId();
 		const inner = html`
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
@@ -286,6 +285,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		}
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('width')) this._width = Math.max(1170, this.width);
+	}
+
 	_abort() {
 		this._close('abort');
 	}

components/dialog/dialog.js

@@ -105,6 +105,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		this._criticalLabelId = getUniqueId();
 		this._handleResize = this._handleResize.bind(this);
 		this._titleId = getUniqueId();
+		this._textId = getUniqueId();
 	}
 
 	get asyncContainerCustom() {
@@ -158,7 +159,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			'd2l-footer-no-content': !this._hasFooterContent
 		};
 
-		if (!this._textId && this.describeContent) this._textId = getUniqueId();
 		const content = html`
 			${loading}
 			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>

components/inputs/input-date.js

@@ -178,6 +178,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		return 'd2l-input-text';
 	}
 
+	/** @ignore */
+	get inputTextWidth() {
+		return `calc(${this._hiddenContentWidth} + 0.75rem + 3px)`; // text and icon width + paddingRight + border width + 1
+	}
+
 	/** @ignore */
 	get validationMessage() {
 		if (this.validity.rangeOverflow || this.validity.rangeUnderflow) {
@@ -238,9 +243,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 	render() {
 		const formattedWideDate = formatISODateInUserCalDescriptor('2323-12-23');
-		const inputTextWidth = `calc(${this._hiddenContentWidth} + 0.75rem + 3px)`; // text and icon width + paddingRight + border width + 1
 		const shortDateFormat = (this._dateTimeDescriptor.formats.dateFormats.short).toUpperCase();
-		this.style.maxWidth = inputTextWidth;
 
 		const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.clear`)}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
 		const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.now`)}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
@@ -304,7 +307,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					placeholder="${shortDateFormat}"
 					?required="${this.required}"
 					?skeleton="${this.skeleton}"
-					style="${styleMap({ maxWidth: inputTextWidth })}"
+					style="${styleMap({ maxWidth: this.inputTextWidth })}"
 					.value="${this._formattedValue}">
 					${icon}
 					<slot slot="inline-help" name="inline-help"></slot>
@@ -339,6 +342,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		});
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('_hiddenContentWidth')) this.style.maxWidth = this.inputTextWidth;
+	}
+
 	async validate() {
 		if (!this.shadowRoot) return;
 		const textInput = this.shadowRoot.querySelector('d2l-input-text');

components/inputs/input-time.js

@@ -329,11 +329,9 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			`)}` : null;
 		const formattedWideTimeAM = formatTime(new Date(2020, 0, 1, 10, 23, 0));
 		const formattedWideTimePM = formatTime(new Date(2020, 0, 1, 23, 23, 0));
-		const inputTextWidth = `calc(${this._hiddenContentWidth} + 1.5rem + 3px)`; // text and icon width + left & right padding + border width + 1
 		const opened = this.opened && !this.disabled && !this.skeleton;
 		const dropdownIdTimezone = `${this._dropdownId}-timezone`;
 		const ariaDescribedByIds = `${this._dropdownId ? dropdownIdTimezone : ''} ${this._hasInlineHelp ? this._inlineHelpId : ''}`.trim();
-		this.style.maxWidth = inputTextWidth;
 
 		return html`
 			<div aria-hidden="true" class="d2l-input-time-hidden-content">
@@ -393,6 +391,11 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		});
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		this.style.maxWidth = `calc(${this._hiddenContentWidth} + 1.5rem + 3px)`; // text and icon width + left & right padding + border width + 1
+	}
+
 	getTime() {
 		const time = getDateFromISOTime(this.value);
 		return {

components/skeleton/demo/skeleton-test-link.js

@@ -36,8 +36,9 @@ export class SkeletonTestLink extends SkeletonMixin(LitElement) {
 			'd2l-link-small': this.type === 'small',
 			'd2l-skeletize': true
 		};
+		const widthSkeletonSize = `d2l-skeletize-${this.width}`;
 		if (this.width !== undefined) {
-			classes[`d2l-skeletize-${this.width}`] = true;
+			classes[widthSkeletonSize] = true;
 		}
 		return html`<a href="https://d2l.com" class="${classMap(classes)}">Link (${this.type})</a>`;
 	}