@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition43.cjs

@@ -4,21 +4,19 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition7.cjs");
-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}: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;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.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}@media (prefers-reduced-motion:no-preference){.upload-icon{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}";
+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;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.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}@media (prefers-reduced-motion:no-preference){.upload-icon{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
-/**
-* Extracts files from a DataTransfer, including files from directories.
-*/
+/** Extracts files from a DataTransfer, including files from directories. */
 async function filesFromDataTransfer(dataTransfer) {
 	return dataTransfer.items?.[0]?.webkitGetAsEntry != null ? await filesFromDataTransferItems(dataTransfer.items) : Array.from(dataTransfer.files);
 }
@@ -59,9 +57,7 @@ var filesFromDirectory = async (directory) => new Promise((resolve, reject) => {
 });
 //#endregion
 //#region src/lib/file-picker/accept.ts
-/**
-* Match a file against an accept string, like native file input
-*/
+/** Match a file against an accept string, like native file input */
 function isAcceptedFileType(file, accept) {
 	if (!accept) return true;
 	const validTypes = accept.split(",");
@@ -107,9 +103,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		this._dragHover = false;
 		this._allFiles = [];
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	nameChanged(previous, next) {
 		super.nameChanged(previous, next);
 		this.#updateFormValue();
@@ -131,9 +125,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 	validate() {
 		super.validate(this.control);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	formResetCallback() {
 		this.removeAllFiles();
 		super.formResetCallback();
@@ -142,9 +134,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		if (this.rejectedFiles.length > 0) return this.locale.filePicker.invalidFilesError;
 		return null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_customValidationErrorChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy) this.proxy.setCustomValidity(this._customValidationError ?? "");
@@ -167,17 +157,13 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		super.disconnectedCallback();
 		this.#stopObservingCustomValidation();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragEnter() {
 		if (this.disabled) return true;
 		this._dragHover = true;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragOver(e) {
 		if (this.disabled) return true;
 		if (!e.dataTransfer) return true;
@@ -185,18 +171,14 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
 		return false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragLeave(e) {
 		if (this.disabled) return true;
 		/* v8 ignore else -- @preserve */
 		if (e.currentTarget === e.target) this._dragHover = false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDrop(e) {
 		if (this.disabled) return true;
 		this._dragHover = false;
@@ -206,33 +188,25 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		});
 		return false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragEnd() {
 		if (this.disabled) return true;
 		this._dragHover = false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onControlClick() {
 		/* v8 ignore if -- @preserve */
 		if (this.disabled) return;
 		this._hiddenInput.click();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onRemoveFileClick(file) {
 		if (this.disabled) return;
 		this._allFiles = this._allFiles.filter((f) => f !== file);
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_allFilesChanged() {
 		this.#updateFormValue();
 	}
@@ -242,9 +216,7 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		else this._allFiles = [...this._allFiles, ...newFiles];
 		this.$emit("change");
 	}
-	/**
-	* Removes all files from the File Picker.
-	*/
+	/** Removes all files from the File Picker. */
 	removeAllFiles() {
 		this._allFiles = [];
 	}
@@ -271,33 +243,21 @@ var FilePicker = class extends require_with_contextual_help.WithContextualHelp(r
 		}
 		return result;
 	}
-	/**
-	* List of files that have been added to the file picker and passed validation
-	*
-	* @public
-	*/
+	/** List of files that have been added to the file picker and passed validation */
 	get files() {
 		return this._validatedFiles.filter((f) => !f.validationError).map((f) => f.file);
 	}
-	/**
-	* List of files that have been added to the file picker but failed validation
-	*
-	* @public
-	*/
+	/** List of files that have been added to the file picker but failed validation */
 	get rejectedFiles() {
 		return this._validatedFiles.filter((f) => !!f.validationError).map((f) => f.file);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onHiddenInputChange(e) {
 		this.#addFiles(this._hiddenInput.files);
 		this._hiddenInput.value = "";
 		e.stopPropagation();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_formatNumber(value) {
 		const str = String(value);
 		if (this.locale.common.useCommaAsDecimalSeparator) return str.replace(".", ",");
@@ -361,7 +321,6 @@ var renderFileSize = (x, size) => {
 	return _microsoft_fast_element.html`<strong>${x._formatNumber(selectedSize)}</strong>
 		${dictFileSizeUnits[selectedUnit]}`;
 };
-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);
@@ -375,7 +334,7 @@ var FilePickerTemplate = (context) => {
 			<button
 				type="button"
 				${(0, _microsoft_fast_element.ref)("control")}
-				class="${getClasses}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", [`size-${x.size}`, Boolean(x.size)], ["drag-hover", x._dragHover], ["disabled", x.disabled])}"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onControlClick()}"
 					@keydown="${() => false}"
@@ -430,9 +389,7 @@ var FilePickerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/file-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var filePickerDefinition = require_vivid_element.defineVividComponent("file-picker", FilePicker, FilePickerTemplate, [
 	require_definition.iconDefinition,
 	require_definition$1.buttonDefinition,

package/unbundled/definition43.js

@@ -3,21 +3,19 @@ import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
+import { t as Localized } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithErrorText } from "./with-error-text.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
-import { t as Localized } from "./localized.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { r 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}: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;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.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}@media (prefers-reduced-motion:no-preference){.upload-icon{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}";
+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;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.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}@media (prefers-reduced-motion:no-preference){.upload-icon{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
-/**
-* Extracts files from a DataTransfer, including files from directories.
-*/
+/** Extracts files from a DataTransfer, including files from directories. */
 async function filesFromDataTransfer(dataTransfer) {
 	return dataTransfer.items?.[0]?.webkitGetAsEntry != null ? await filesFromDataTransferItems(dataTransfer.items) : Array.from(dataTransfer.files);
 }
@@ -58,9 +56,7 @@ var filesFromDirectory = async (directory) => new Promise((resolve, reject) => {
 });
 //#endregion
 //#region src/lib/file-picker/accept.ts
-/**
-* Match a file against an accept string, like native file input
-*/
+/** Match a file against an accept string, like native file input */
 function isAcceptedFileType(file, accept) {
 	if (!accept) return true;
 	const validTypes = accept.split(",");
@@ -106,9 +102,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		this._dragHover = false;
 		this._allFiles = [];
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	nameChanged(previous, next) {
 		super.nameChanged(previous, next);
 		this.#updateFormValue();
@@ -130,9 +124,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 	validate() {
 		super.validate(this.control);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	formResetCallback() {
 		this.removeAllFiles();
 		super.formResetCallback();
@@ -141,9 +133,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		if (this.rejectedFiles.length > 0) return this.locale.filePicker.invalidFilesError;
 		return null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_customValidationErrorChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy) this.proxy.setCustomValidity(this._customValidationError ?? "");
@@ -166,17 +156,13 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		super.disconnectedCallback();
 		this.#stopObservingCustomValidation();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragEnter() {
 		if (this.disabled) return true;
 		this._dragHover = true;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragOver(e) {
 		if (this.disabled) return true;
 		if (!e.dataTransfer) return true;
@@ -184,18 +170,14 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
 		return false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragLeave(e) {
 		if (this.disabled) return true;
 		/* v8 ignore else -- @preserve */
 		if (e.currentTarget === e.target) this._dragHover = false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDrop(e) {
 		if (this.disabled) return true;
 		this._dragHover = false;
@@ -205,33 +187,25 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		});
 		return false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onDragEnd() {
 		if (this.disabled) return true;
 		this._dragHover = false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onControlClick() {
 		/* v8 ignore if -- @preserve */
 		if (this.disabled) return;
 		this._hiddenInput.click();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onRemoveFileClick(file) {
 		if (this.disabled) return;
 		this._allFiles = this._allFiles.filter((f) => f !== file);
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_allFilesChanged() {
 		this.#updateFormValue();
 	}
@@ -241,9 +215,7 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		else this._allFiles = [...this._allFiles, ...newFiles];
 		this.$emit("change");
 	}
-	/**
-	* Removes all files from the File Picker.
-	*/
+	/** Removes all files from the File Picker. */
 	removeAllFiles() {
 		this._allFiles = [];
 	}
@@ -270,33 +242,21 @@ var FilePicker = class extends WithContextualHelp(WithFeedback(WithErrorText(For
 		}
 		return result;
 	}
-	/**
-	* List of files that have been added to the file picker and passed validation
-	*
-	* @public
-	*/
+	/** List of files that have been added to the file picker and passed validation */
 	get files() {
 		return this._validatedFiles.filter((f) => !f.validationError).map((f) => f.file);
 	}
-	/**
-	* List of files that have been added to the file picker but failed validation
-	*
-	* @public
-	*/
+	/** List of files that have been added to the file picker but failed validation */
 	get rejectedFiles() {
 		return this._validatedFiles.filter((f) => !!f.validationError).map((f) => f.file);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onHiddenInputChange(e) {
 		this.#addFiles(this._hiddenInput.files);
 		this._hiddenInput.value = "";
 		e.stopPropagation();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_formatNumber(value) {
 		const str = String(value);
 		if (this.locale.common.useCommaAsDecimalSeparator) return str.replace(".", ",");
@@ -360,7 +320,6 @@ var renderFileSize = (x, size) => {
 	return html`<strong>${x._formatNumber(selectedSize)}</strong>
 		${dictFileSizeUnits[selectedUnit]}`;
 };
-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);
@@ -374,7 +333,7 @@ var FilePickerTemplate = (context) => {
 			<button
 				type="button"
 				${ref("control")}
-				class="${getClasses}"
+				class="${(x) => classNames("control", [`size-${x.size}`, Boolean(x.size)], ["drag-hover", x._dragHover], ["disabled", x.disabled])}"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onControlClick()}"
 					@keydown="${() => false}"
@@ -429,9 +388,7 @@ var FilePickerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/file-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var filePickerDefinition = defineVividComponent("file-picker", FilePicker, FilePickerTemplate, [
 	iconDefinition,
 	buttonDefinition,

package/unbundled/definition44.cjs

@@ -2,7 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
-const require_definition = require("./definition8.cjs");
+const require_definition = require("./definition7.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/header/header.scss?inline
@@ -30,7 +30,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Header.prototype, "alternate", void 0);
 //#endregion
 //#region src/lib/header/header.template.ts
-var getPartAlternate = ({ alternate }) => (0, _microsoft_fast_web_utilities.classNames)(["vvd-theme-alternate", alternate]);
 var headerTemplate = (context) => {
 	const elevationTag = context.tagFor(require_definition.Elevation);
 	return _microsoft_fast_element.html`
@@ -38,7 +37,7 @@ var headerTemplate = (context) => {
       <header class="base" part="base" ${require_delegates_aria.delegateAria()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
+        <div class="container" part="${(x) => (0, _microsoft_fast_web_utilities.classNames)(["vvd-theme-alternate", x.alternate])}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -55,9 +54,7 @@ var headerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/header/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var headerDefinition = require_vivid_element.defineVividComponent("header", Header, headerTemplate, [require_definition.elevationDefinition], { styles: header_default });
 /**
 * Registers the header elements with the design system.

package/unbundled/definition44.js

@@ -1,7 +1,7 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { r as Elevation, t as elevationDefinition } from "./definition8.js";
+import { r as Elevation, t as elevationDefinition } from "./definition7.js";
 import { attr, html } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/header/header.scss?inline
@@ -29,7 +29,6 @@ __decorate([attr({
 __decorate([attr({ mode: "boolean" })], Header.prototype, "alternate", void 0);
 //#endregion
 //#region src/lib/header/header.template.ts
-var getPartAlternate = ({ alternate }) => classNames(["vvd-theme-alternate", alternate]);
 var headerTemplate = (context) => {
 	const elevationTag = context.tagFor(Elevation);
 	return html`
@@ -37,7 +36,7 @@ var headerTemplate = (context) => {
       <header class="base" part="base" ${delegateAria()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
+        <div class="container" part="${(x) => classNames(["vvd-theme-alternate", x.alternate])}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -54,9 +53,7 @@ var headerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/header/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var headerDefinition = defineVividComponent("header", Header, headerTemplate, [elevationDefinition], { styles: header_default });
 /**
 * Registers the header elements with the design system.

package/unbundled/definition45.cjs

@@ -46,9 +46,7 @@ var KbdShortcutTemplate = () => {
 };
 //#endregion
 //#region src/lib/kbd-shortcut/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var kbdShortcutDefinition = require_vivid_element.defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
 /**
 * Registers the kbd-shortcut element with the design system.

package/unbundled/definition45.js

@@ -45,9 +45,7 @@ var KbdShortcutTemplate = () => {
 };
 //#endregion
 //#region src/lib/kbd-shortcut/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var kbdShortcutDefinition = defineVividComponent("kbd-shortcut", KbdShortcut, KbdShortcutTemplate, [], { styles: kbd_shortcut_default });
 /**
 * Registers the kbd-shortcut element with the design system.

package/unbundled/definition46.cjs

@@ -115,17 +115,13 @@ var APPLE_ARIA_LABEL_OVERRIDES = {
 * @slot - Default slot for custom content (used when name is "Custom").
 */
 var KbdKey = class extends require_vivid_element.VividElement {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _isApple() {
 		if (this.keyboard === "apple") return true;
 		if (this.keyboard === "standard") return false;
 		return require_platform.isApplePlatform();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _displayLabel() {
 		/* v8 ignore if -- @preserve */
 		if (!this.name || this.name === "Custom") return "";
@@ -137,9 +133,7 @@ var KbdKey = class extends require_vivid_element.VividElement {
 		if (this._isApple && this.name in APPLE_DISPLAY_OVERRIDES) return APPLE_DISPLAY_OVERRIDES[this.name];
 		return KEY_DISPLAY_MAP[this.name] ?? this.name;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _ariaKeyLabel() {
 		if (!this.name || this.name === "Custom") return null;
 		if (this.name === "Mod") return this._isApple ? "Command" : null;
@@ -167,19 +161,16 @@ require_decorate.__decorate([_microsoft_fast_element.attr], KbdKey.prototype, "s
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "keyshortcuts-key" })], KbdKey.prototype, "keyshortcutsKey", void 0);
 //#endregion
 //#region src/lib/kbd-key/kbd-key.template.ts
-var getClasses = ({ appearance, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${appearance}`, Boolean(appearance)], [`size-${size}`, Boolean(size)]);
 var KbdKeyTemplate = () => {
 	return _microsoft_fast_element.html`<kbd
-		class="${getClasses}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
 		aria-label="${(x) => x._ariaKeyLabel}"
 		>${(0, _microsoft_fast_element.when)((x) => x.name === "Custom", _microsoft_fast_element.html`<slot></slot>`)}${(0, _microsoft_fast_element.when)((x) => Boolean(x.name && x.name !== "Custom" && x._displayLabel), _microsoft_fast_element.html`${(x) => x._displayLabel}`)}</kbd
 	>`;
 };
 //#endregion
 //#region src/lib/kbd-key/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var kbdKeyDefinition = require_vivid_element.defineVividComponent("kbd-key", KbdKey, KbdKeyTemplate, [], { styles: kbd_key_default });
 /**
 * Registers the kbd-key element with the design system.