@vonage/vivid 5.16.0 → 5.17.0

package/unbundled/definition42.cjs

@@ -13,7 +13,7 @@ const require_mixins = require("./mixins.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/file-picker/file-picker.scss?inline
-var file_picker_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
+var file_picker_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
 //#endregion
 //#region src/lib/file-picker/data-transfer.ts
 /**
@@ -170,6 +170,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onDragEnter() {
+		if (this.disabled) return true;
 		this._dragHover = true;
 		return true;
 	}
@@ -177,6 +178,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onDragOver(e) {
+		if (this.disabled) return true;
 		if (!e.dataTransfer) return true;
 		const effect = e.dataTransfer.effectAllowed;
 		e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
@@ -186,6 +188,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onDragLeave(e) {
+		if (this.disabled) return true;
 		/* v8 ignore else -- @preserve */
 		if (e.currentTarget === e.target) this._dragHover = false;
 		return true;
@@ -194,6 +197,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onDrop(e) {
+		if (this.disabled) return true;
 		this._dragHover = false;
 		if (!e.dataTransfer) return true;
 		filesFromDataTransfer(e.dataTransfer).then((files) => this.#addFiles(files)).catch((err) => {
@@ -205,6 +209,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onDragEnd() {
+		if (this.disabled) return true;
 		this._dragHover = false;
 		return true;
 	}
@@ -212,12 +217,15 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	* @internal
 	*/
 	_onControlClick() {
+		/* v8 ignore if -- @preserve */
+		if (this.disabled) return;
 		this._hiddenInput.click();
 	}
 	/**
 	* @internal
 	*/
 	_onRemoveFileClick(file) {
+		if (this.disabled) return;
 		this._allFiles = this._allFiles.filter((f) => f !== file);
 		this.$emit("change");
 	}
@@ -352,7 +360,7 @@ var renderFileSize = (x, size) => {
 	return _microsoft_fast_element.html`<strong>${x._formatNumber(selectedSize)}</strong>
 		${dictFileSizeUnits[selectedUnit]}`;
 };
-var getClasses = ({ size, _dragHover }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`size-${size}`, Boolean(size)], ["drag-hover", _dragHover]);
+var getClasses = ({ size, _dragHover, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`size-${size}`, Boolean(size)], ["drag-hover", _dragHover], ["disabled", disabled]);
 var FilePickerTemplate = (context) => {
 	const iconTag = context.tagFor(require_definition.Icon);
 	const buttonTag = context.tagFor(require_definition$1.Button);
@@ -363,11 +371,12 @@ var FilePickerTemplate = (context) => {
 				<slot name="contextual-help" ${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="control-wrapper">
-				<button
-					type="button"
-					${(0, _microsoft_fast_element.ref)("control")}
-					class="${getClasses}"
-					@click="${(x) => x._onControlClick()}"
+			<button
+				type="button"
+				${(0, _microsoft_fast_element.ref)("control")}
+				class="${getClasses}"
+				?disabled="${(x) => x.disabled}"
+				@click="${(x) => x._onControlClick()}"
 					@keydown="${() => false}"
 					@dragenter="${(x) => x._onDragEnter()}"
 					@dragover="${(x, c) => x._onDragOver(c.event)}"
@@ -398,10 +407,11 @@ var FilePickerTemplate = (context) => {
 						<${iconTag} name="info-line" size="-6"></${iconTag}>
 						${(x) => x.validationError}
 					</div>
-					<${buttonTag}
-						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
-						@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
+				<${buttonTag}
+					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+					?disabled="${(_, c) => c.parent.disabled}"
+					aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
+					@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
 				</div>`)}
 			</div>
 		</div>
@@ -410,6 +420,7 @@ var FilePickerTemplate = (context) => {
 			class="hidden-input"
 			aria-hidden="true"
 			type="file"
+			?disabled="${(x) => x.disabled}"
 			?multiple="${(x) => !x.singleFile && (x.maxFiles == null || x.maxFiles > 1)}"
 			accept="${(x) => x.accept || null}"
 			tabindex="-1"

package/unbundled/definition42.js

@@ -12,7 +12,7 @@ import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { ExecutionContext, Observable, attr, html, nullableNumberConverter, observable, ref, repeat, slotted, volatile, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/file-picker/file-picker.scss?inline
-var file_picker_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
+var file_picker_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
 //#endregion
 //#region src/lib/file-picker/data-transfer.ts
 /**
@@ -169,6 +169,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onDragEnter() {
+		if (this.disabled) return true;
 		this._dragHover = true;
 		return true;
 	}
@@ -176,6 +177,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onDragOver(e) {
+		if (this.disabled) return true;
 		if (!e.dataTransfer) return true;
 		const effect = e.dataTransfer.effectAllowed;
 		e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
@@ -185,6 +187,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onDragLeave(e) {
+		if (this.disabled) return true;
 		/* v8 ignore else -- @preserve */
 		if (e.currentTarget === e.target) this._dragHover = false;
 		return true;
@@ -193,6 +196,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onDrop(e) {
+		if (this.disabled) return true;
 		this._dragHover = false;
 		if (!e.dataTransfer) return true;
 		filesFromDataTransfer(e.dataTransfer).then((files) => this.#addFiles(files)).catch((err) => {
@@ -204,6 +208,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onDragEnd() {
+		if (this.disabled) return true;
 		this._dragHover = false;
 		return true;
 	}
@@ -211,12 +216,15 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	* @internal
 	*/
 	_onControlClick() {
+		/* v8 ignore if -- @preserve */
+		if (this.disabled) return;
 		this._hiddenInput.click();
 	}
 	/**
 	* @internal
 	*/
 	_onRemoveFileClick(file) {
+		if (this.disabled) return;
 		this._allFiles = this._allFiles.filter((f) => f !== file);
 		this.$emit("change");
 	}
@@ -351,7 +359,7 @@ var renderFileSize = (x, size) => {
 	return html`<strong>${x._formatNumber(selectedSize)}</strong>
 		${dictFileSizeUnits[selectedUnit]}`;
 };
-var getClasses = ({ size, _dragHover }) => classNames("control", [`size-${size}`, Boolean(size)], ["drag-hover", _dragHover]);
+var getClasses = ({ size, _dragHover, disabled }) => classNames("control", [`size-${size}`, Boolean(size)], ["drag-hover", _dragHover], ["disabled", disabled]);
 var FilePickerTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	const buttonTag = context.tagFor(Button);
@@ -362,11 +370,12 @@ var FilePickerTemplate = (context) => {
 				<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="control-wrapper">
-				<button
-					type="button"
-					${ref("control")}
-					class="${getClasses}"
-					@click="${(x) => x._onControlClick()}"
+			<button
+				type="button"
+				${ref("control")}
+				class="${getClasses}"
+				?disabled="${(x) => x.disabled}"
+				@click="${(x) => x._onControlClick()}"
 					@keydown="${() => false}"
 					@dragenter="${(x) => x._onDragEnter()}"
 					@dragover="${(x, c) => x._onDragOver(c.event)}"
@@ -397,10 +406,11 @@ var FilePickerTemplate = (context) => {
 						<${iconTag} name="info-line" size="-6"></${iconTag}>
 						${(x) => x.validationError}
 					</div>
-					<${buttonTag}
-						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
-						@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
+				<${buttonTag}
+					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+					?disabled="${(_, c) => c.parent.disabled}"
+					aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
+					@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
 				</div>`)}
 			</div>
 		</div>
@@ -409,6 +419,7 @@ var FilePickerTemplate = (context) => {
 			class="hidden-input"
 			aria-hidden="true"
 			type="file"
+			?disabled="${(x) => x.disabled}"
 			?multiple="${(x) => !x.singleFile && (x.maxFiles == null || x.maxFiles > 1)}"
 			accept="${(x) => x.accept || null}"
 			tabindex="-1"

package/unbundled/definition49.cjs

@@ -15,7 +15,7 @@ const require_definition$2 = require("./definition7.cjs");
 const require_enums = require("./enums.cjs");
 const require_divider = require("./divider.cjs");
 const require_mixins = require("./mixins.cjs");
-const require_definition$3 = require("./definition30.cjs");
+const require_definition$3 = require("./definition25.cjs");
 const require_definition$4 = require("./definition34.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -51,8 +51,8 @@ var validNumber = /^-?((\d*\.\d+)|(\d+))$/;
 * @slot helper-text - Describes how to use the number-field. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value has changed
 * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
-* @vueModel modelValue value input `event.currentTarget.value`
-* @vueModel valueAsNumber valueAsNumber input `event.currentTarget.valueAsNumber`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
+* @vueModel valueAsNumber valueAsNumber input,@lazy:change `event.currentTarget.valueAsNumber`
 * @testAction fill fill #control
 * @testAction clear clear #control
 * @testAction clickIncrement clickButton #incrementButton

package/unbundled/definition49.js

@@ -14,7 +14,7 @@ import { i as Button, t as buttonDefinition } from "./definition7.js";
 import { u as Shape } from "./enums.js";
 import { t as Divider } from "./divider.js";
 import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
-import { t as contextualHelpDefinition } from "./definition30.js";
+import { t as contextualHelpDefinition } from "./definition25.js";
 import { t as dividerDefinition } from "./definition34.js";
 import { Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames, keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
@@ -50,8 +50,8 @@ var validNumber = /^-?((\d*\.\d+)|(\d+))$/;
 * @slot helper-text - Describes how to use the number-field. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value has changed
 * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
-* @vueModel modelValue value input `event.currentTarget.value`
-* @vueModel valueAsNumber valueAsNumber input `event.currentTarget.valueAsNumber`
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
+* @vueModel valueAsNumber valueAsNumber input,@lazy:change `event.currentTarget.valueAsNumber`
 * @testAction fill fill #control
 * @testAction clear clear #control
 * @testAction clickIncrement clickButton #incrementButton