@vonage/vivid 4.10.0 → 4.11.0

package/shared/definition25.cjs

@@ -12,7 +12,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover{border-style:solid;background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2167,18 +2167,56 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, chooseFile_fn, updateHiddenFileInput_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, setRemoveButtonConnotationOnError_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
+const generateFilePreviewTemplate = (buttonTag, locale) => {
+  return `<div class="dz-preview dz-file-preview">
+  <div class="dz-details">
+    <div class="dz-filename"><span data-dz-name></span></div>
+    <div class="dz-size"><span data-dz-size></span></div>
+  </div>
+  <div class="dz-error-message"><span data-dz-errormessage></span></div>
+  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
+</div>`;
+};
 let FilePicker = class extends FormAssociatedFilePicker {
   constructor() {
     super();
     __privateAdd(this, _FilePicker_instances);
     __privateAdd(this, _dropzone);
+    this.singleFile = false;
     this.maxFileSize = 256;
+    /**
+     * @internal
+     */
+    this.valueChanged = (previous, next) => {
+      super.valueChanged(previous, next);
+      if (next === "" && this.files.length) {
+        this.removeAllFiles();
+      }
+    };
     /**
      * Used internally to hold the tag that button is registered at.
      */
     this.buttonTag = "vwc-button";
+    __privateAdd(this, _localizeErrorMessage, (file, message) => {
+      if (file.previewElement) {
+        file.previewElement.classList.add("dz-error");
+        if (typeof message !== "string" && message.error) {
+          message = message.error;
+        }
+        for (const node of file.previewElement.querySelectorAll(
+          "[data-dz-errormessage]"
+        )) {
+          node.textContent = __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, message);
+        }
+      }
+    });
+    __privateAdd(this, _localizeFileSizeNumberAndUnits, () => {
+      __privateGet(this, _dropzone).filesize = (size) => {
+        return __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
+      };
+    });
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValueToFakePath(value)) {
         return;
@@ -2195,6 +2233,9 @@ let FilePicker = class extends FormAssociatedFilePicker {
   get files() {
     return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
+  singleFileChanged() {
+    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
+  }
   maxFilesChanged(_oldValue, newValue) {
     if (!__privateGet(this, _dropzone)) {
       return;
@@ -2236,62 +2277,18 @@ let FilePicker = class extends FormAssociatedFilePicker {
       addRemoveLinks: false,
       previewsContainer: previewList,
       createImageThumbnails: false,
-      // Updated version of default template (https://github.com/dropzone/dropzone/blob/f50d1828ab5df79a76be00d1306cc320e39a27f4/src/preview-template.html)
-      previewTemplate: `<div class="dz-preview dz-file-preview">
-  <div class="dz-details">
-    <div class="dz-filename"><span data-dz-name></span></div>
-    <div class="dz-size"><span data-dz-size></span></div>
-  </div>
-  <div class="dz-error-message"><span data-dz-errormessage></span></div>
-  <${this.buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${this.locale.filePicker.removeFileLabel}"></${this.buttonTag}>
-</div>`,
+      previewTemplate: generateFilePreviewTemplate(this.buttonTag, this.locale),
       dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.locale.filePicker.fileTooBigError,
-      // Override the default implementation to localize the error messages
-      error: (file, message) => {
-        if (file.previewElement) {
-          file.previewElement.classList.add("dz-error");
-          if (typeof message !== "string" && message.error) {
-            message = message.error;
-          }
-          for (const node of file.previewElement.querySelectorAll(
-            "[data-dz-errormessage]"
-          )) {
-            node.textContent = __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, message);
-          }
-        }
-      }
+      error: __privateGet(this, _localizeErrorMessage)
     }));
-    __privateGet(this, _dropzone).filesize = (size) => {
-      return __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
-    };
-    __privateGet(this, _dropzone).on("addedfiles", (files) => {
-      for (const file of files) {
-        if (file.previewElement) {
-          const removeButton = file.previewElement.querySelector(
-            ".remove-btn"
-          );
-          removeButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            __privateGet(this, _dropzone).removeFile(file);
-          });
-        }
-      }
-      __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
-    });
+    __privateGet(this, _localizeFileSizeNumberAndUnits).call(this);
+    __privateMethod(this, _FilePicker_instances, addRemoveButtonToFilesPreview_fn).call(this);
     __privateGet(this, _dropzone).on("removedfile", () => {
       __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
     });
-    __privateGet(this, _dropzone).on("error", (file) => {
-      if (file.previewElement) {
-        const removeButton = file.previewElement.querySelector(
-          ".remove-btn"
-        );
-        removeButton.connotation = enums.Connotation.Alert;
-      }
-    });
+    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -2320,24 +2317,74 @@ let FilePicker = class extends FormAssociatedFilePicker {
     super.formResetCallback();
     __privateGet(this, _dropzone).removeAllFiles();
   }
+  /**
+   * Removes all files from the File Picker.
+   */
+  removeAllFiles() {
+    __privateGet(this, _dropzone)?.removeAllFiles();
+  }
 };
 _dropzone = new WeakMap();
 _FilePicker_instances = new WeakSet();
+syncSingleFileState_fn = function() {
+  if (this.singleFile) {
+    __privateGet(this, _dropzone)?.hiddenFileInput?.removeAttribute("multiple");
+  } else {
+    __privateGet(this, _dropzone)?.hiddenFileInput?.setAttribute("multiple", "multiple");
+  }
+};
+_localizeErrorMessage = new WeakMap();
+_localizeFileSizeNumberAndUnits = new WeakMap();
+addRemoveButtonToFilesPreview_fn = function() {
+  __privateGet(this, _dropzone).on("addedfiles", (files) => {
+    for (const file of files) {
+      if (file.previewElement) {
+        const removeButton = file.previewElement.querySelector(
+          ".remove-btn"
+        );
+        removeButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          __privateGet(this, _dropzone).removeFile(file);
+        });
+      }
+    }
+    __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
+  });
+  __privateMethod(this, _FilePicker_instances, setRemoveButtonConnotationOnError_fn).call(this);
+};
+setRemoveButtonConnotationOnError_fn = function() {
+  __privateGet(this, _dropzone).on("error", (file) => {
+    if (file.previewElement) {
+      const removeButton = file.previewElement.querySelector(
+        ".remove-btn"
+      );
+      removeButton.connotation = enums.Connotation.Alert;
+    }
+  });
+};
 chooseFile_fn = function() {
   if (__privateGet(this, _dropzone).hiddenFileInput) {
     __privateGet(this, _dropzone).hiddenFileInput.click();
   }
 };
 updateHiddenFileInput_fn = function() {
-  if (__privateGet(this, _dropzone).hiddenFileInput) {
-    __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
-      new Event("change", { bubbles: false })
-    );
+  __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
+    new Event("change", { bubbles: false })
+  );
+};
+keepOnlyNewestFile_fn = function() {
+  for (let i = 0; i < this.files.length - 1; i++) {
+    __privateGet(this, _dropzone).removeFile(this.files[i]);
   }
 };
 handleFilesChanged_fn = function() {
+  if (this.singleFile && this.files.length >= 1) {
+    __privateMethod(this, _FilePicker_instances, keepOnlyNewestFile_fn).call(this);
+  }
   this.$emit("change");
   __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
+  requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
 };
 updateFormValue_fn = function() {
   const files = this.files;
@@ -2361,6 +2408,9 @@ formatNumbersInMessage_fn = function(message) {
   }
   return message;
 };
+__decorateClass([
+  index.attr({ attribute: "single-file", mode: "boolean" })
+], FilePicker.prototype, "singleFile", 2);
 __decorateClass([
   index.attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);
@@ -2386,7 +2436,7 @@ const getClasses = ({ size }) => classNames.classNames("control", "dz-default",
 const FilePickerTemplate = (context) => {
   return index.html`
 		${(x) => {
-    x.setButtonTag(context.tagFor(definition.Button));
+    x.setButtonTag(context.tagFor(definition.Button$1));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
 			${when.when(

package/shared/definition25.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { C as Connotation } from './enums.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
@@ -10,7 +10,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover{border-style:solid;background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2165,18 +2165,56 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, chooseFile_fn, updateHiddenFileInput_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, setRemoveButtonConnotationOnError_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
+const generateFilePreviewTemplate = (buttonTag, locale) => {
+  return `<div class="dz-preview dz-file-preview">
+  <div class="dz-details">
+    <div class="dz-filename"><span data-dz-name></span></div>
+    <div class="dz-size"><span data-dz-size></span></div>
+  </div>
+  <div class="dz-error-message"><span data-dz-errormessage></span></div>
+  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
+</div>`;
+};
 let FilePicker = class extends FormAssociatedFilePicker {
   constructor() {
     super();
     __privateAdd(this, _FilePicker_instances);
     __privateAdd(this, _dropzone);
+    this.singleFile = false;
     this.maxFileSize = 256;
+    /**
+     * @internal
+     */
+    this.valueChanged = (previous, next) => {
+      super.valueChanged(previous, next);
+      if (next === "" && this.files.length) {
+        this.removeAllFiles();
+      }
+    };
     /**
      * Used internally to hold the tag that button is registered at.
      */
     this.buttonTag = "vwc-button";
+    __privateAdd(this, _localizeErrorMessage, (file, message) => {
+      if (file.previewElement) {
+        file.previewElement.classList.add("dz-error");
+        if (typeof message !== "string" && message.error) {
+          message = message.error;
+        }
+        for (const node of file.previewElement.querySelectorAll(
+          "[data-dz-errormessage]"
+        )) {
+          node.textContent = __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, message);
+        }
+      }
+    });
+    __privateAdd(this, _localizeFileSizeNumberAndUnits, () => {
+      __privateGet(this, _dropzone).filesize = (size) => {
+        return __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
+      };
+    });
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValueToFakePath(value)) {
         return;
@@ -2193,6 +2231,9 @@ let FilePicker = class extends FormAssociatedFilePicker {
   get files() {
     return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
+  singleFileChanged() {
+    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
+  }
   maxFilesChanged(_oldValue, newValue) {
     if (!__privateGet(this, _dropzone)) {
       return;
@@ -2234,62 +2275,18 @@ let FilePicker = class extends FormAssociatedFilePicker {
       addRemoveLinks: false,
       previewsContainer: previewList,
       createImageThumbnails: false,
-      // Updated version of default template (https://github.com/dropzone/dropzone/blob/f50d1828ab5df79a76be00d1306cc320e39a27f4/src/preview-template.html)
-      previewTemplate: `<div class="dz-preview dz-file-preview">
-  <div class="dz-details">
-    <div class="dz-filename"><span data-dz-name></span></div>
-    <div class="dz-size"><span data-dz-size></span></div>
-  </div>
-  <div class="dz-error-message"><span data-dz-errormessage></span></div>
-  <${this.buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${this.locale.filePicker.removeFileLabel}"></${this.buttonTag}>
-</div>`,
+      previewTemplate: generateFilePreviewTemplate(this.buttonTag, this.locale),
       dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.locale.filePicker.fileTooBigError,
-      // Override the default implementation to localize the error messages
-      error: (file, message) => {
-        if (file.previewElement) {
-          file.previewElement.classList.add("dz-error");
-          if (typeof message !== "string" && message.error) {
-            message = message.error;
-          }
-          for (const node of file.previewElement.querySelectorAll(
-            "[data-dz-errormessage]"
-          )) {
-            node.textContent = __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, message);
-          }
-        }
-      }
+      error: __privateGet(this, _localizeErrorMessage)
     }));
-    __privateGet(this, _dropzone).filesize = (size) => {
-      return __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
-    };
-    __privateGet(this, _dropzone).on("addedfiles", (files) => {
-      for (const file of files) {
-        if (file.previewElement) {
-          const removeButton = file.previewElement.querySelector(
-            ".remove-btn"
-          );
-          removeButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            __privateGet(this, _dropzone).removeFile(file);
-          });
-        }
-      }
-      __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
-    });
+    __privateGet(this, _localizeFileSizeNumberAndUnits).call(this);
+    __privateMethod(this, _FilePicker_instances, addRemoveButtonToFilesPreview_fn).call(this);
     __privateGet(this, _dropzone).on("removedfile", () => {
       __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
     });
-    __privateGet(this, _dropzone).on("error", (file) => {
-      if (file.previewElement) {
-        const removeButton = file.previewElement.querySelector(
-          ".remove-btn"
-        );
-        removeButton.connotation = Connotation.Alert;
-      }
-    });
+    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -2318,24 +2315,74 @@ let FilePicker = class extends FormAssociatedFilePicker {
     super.formResetCallback();
     __privateGet(this, _dropzone).removeAllFiles();
   }
+  /**
+   * Removes all files from the File Picker.
+   */
+  removeAllFiles() {
+    __privateGet(this, _dropzone)?.removeAllFiles();
+  }
 };
 _dropzone = new WeakMap();
 _FilePicker_instances = new WeakSet();
+syncSingleFileState_fn = function() {
+  if (this.singleFile) {
+    __privateGet(this, _dropzone)?.hiddenFileInput?.removeAttribute("multiple");
+  } else {
+    __privateGet(this, _dropzone)?.hiddenFileInput?.setAttribute("multiple", "multiple");
+  }
+};
+_localizeErrorMessage = new WeakMap();
+_localizeFileSizeNumberAndUnits = new WeakMap();
+addRemoveButtonToFilesPreview_fn = function() {
+  __privateGet(this, _dropzone).on("addedfiles", (files) => {
+    for (const file of files) {
+      if (file.previewElement) {
+        const removeButton = file.previewElement.querySelector(
+          ".remove-btn"
+        );
+        removeButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          __privateGet(this, _dropzone).removeFile(file);
+        });
+      }
+    }
+    __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
+  });
+  __privateMethod(this, _FilePicker_instances, setRemoveButtonConnotationOnError_fn).call(this);
+};
+setRemoveButtonConnotationOnError_fn = function() {
+  __privateGet(this, _dropzone).on("error", (file) => {
+    if (file.previewElement) {
+      const removeButton = file.previewElement.querySelector(
+        ".remove-btn"
+      );
+      removeButton.connotation = Connotation.Alert;
+    }
+  });
+};
 chooseFile_fn = function() {
   if (__privateGet(this, _dropzone).hiddenFileInput) {
     __privateGet(this, _dropzone).hiddenFileInput.click();
   }
 };
 updateHiddenFileInput_fn = function() {
-  if (__privateGet(this, _dropzone).hiddenFileInput) {
-    __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
-      new Event("change", { bubbles: false })
-    );
+  __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
+    new Event("change", { bubbles: false })
+  );
+};
+keepOnlyNewestFile_fn = function() {
+  for (let i = 0; i < this.files.length - 1; i++) {
+    __privateGet(this, _dropzone).removeFile(this.files[i]);
   }
 };
 handleFilesChanged_fn = function() {
+  if (this.singleFile && this.files.length >= 1) {
+    __privateMethod(this, _FilePicker_instances, keepOnlyNewestFile_fn).call(this);
+  }
   this.$emit("change");
   __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
+  requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
 };
 updateFormValue_fn = function() {
   const files = this.files;
@@ -2359,6 +2406,9 @@ formatNumbersInMessage_fn = function(message) {
   }
   return message;
 };
+__decorateClass([
+  attr({ attribute: "single-file", mode: "boolean" })
+], FilePicker.prototype, "singleFile", 2);
 __decorateClass([
   attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);

package/shared/definition35.cjs

@@ -5,8 +5,8 @@ const definition = require('./definition11.cjs');
 const definition$1 = require('./definition22.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const keyCodes = require('./key-codes2.cjs');
 const textField = require('./text-field2.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const formElements = require('./form-elements.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
@@ -346,7 +346,7 @@ function getTabIndex(numberField) {
   return numberField.disabled || numberField.readOnly ? "-1" : null;
 }
 function numberControlButtons(context) {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition.Button$1);
   const dividerTag = context.tagFor(definition$1.Divider);
   return index.html`
 			<div class="control-buttons"

package/shared/definition35.js

@@ -1,10 +1,10 @@
 import { F as FoundationElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { D as Divider, a as dividerRegistries } from './definition22.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { c as keyArrowDown, d as keyArrowUp } from './key-codes2.js';
 import { D as DelegatesARIATextbox } from './text-field2.js';
+import { e as keyArrowDown, f as keyArrowUp } from './key-codes2.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
 import { A as AffixIcon } from './affix.js';
 import { L as Localized } from './localized.js';

package/shared/definition37.cjs

@@ -185,7 +185,7 @@ const getPaginationButtonWidth = (value) => {
   return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
 };
 const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition.Button$1);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
   return index.html`
 	<div class="${getClasses}">

package/shared/definition37.js

@@ -1,4 +1,4 @@
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { F as FoundationElement, a as attr, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
 import { b as Size, S as Shape } from './enums.js';
 import { e as elements } from './slotted.js';

package/shared/definition4.cjs

@@ -1,15 +1,14 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$2 = require('./definition11.cjs');
+const definition$1 = require('./definition11.cjs');
 const definition = require('./definition63.cjs');
-const definition$1 = require('./definition27.cjs');
+const definition$2 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
 const index$1 = require('./index2.cjs');
 const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const button = require('./button.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -164,7 +163,7 @@ function renderDismissButton(buttonTag) {
 }
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
-  const buttonTag = context.tagFor(button.Button);
+  const buttonTag = context.tagFor(definition$1.Button);
   return index.html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
@@ -197,8 +196,8 @@ const alertDefinition = Alert.compose({
 });
 const alertRegistries = [
   alertDefinition(),
-  ...definition$1.iconRegistries,
-  ...definition$2.buttonRegistries,
+  ...definition$2.iconRegistries,
+  ...definition$1.buttonRegistries,
   ...definition.elevationRegistries
 ];
 const registerAlert = index.registerFactory(alertRegistries);

package/shared/definition4.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { a as buttonRegistries } from './definition11.js';
+import { B as Button$1, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
 import { a as iconRegistries } from './definition27.js';
 import { C as Connotation } from './enums.js';
@@ -7,7 +7,6 @@ import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from
 import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { B as Button$1 } from './button.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition40.cjs

@@ -3,11 +3,18 @@
 const index = require('./index.cjs');
 const direction = require('./direction.cjs');
 const keyCodes = require('./key-codes.cjs');
-const aria = require('./aria2.cjs');
 const radio = require('./radio.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
-const aria$1 = require('./aria.cjs');
+const aria = require('./aria.cjs');
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
 
 /**
  * An Radio Group Custom HTML Element.
@@ -30,7 +37,7 @@ let RadioGroup$1 = class RadioGroup extends index.FoundationElement {
          * @remarks
          * HTML Attribute: orientation
          */
-        this.orientation = aria.Orientation.horizontal;
+        this.orientation = Orientation.horizontal;
         this.radioChangeHandler = (e) => {
             const changedRadio = e.target;
             if (changedRadio.checked) {
@@ -429,7 +436,7 @@ const RadioGroupTemplate = (context) => {
   )}
 
 			<div
-				class="positioning-region ${(x) => x.orientation === aria$1.Orientation.horizontal ? "horizontal" : "vertical"}"
+				class="positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
 			>
 				<slot
 					${slotted.slotted({