@vonage/vivid 4.9.0 → 4.11.0

package/shared/definition24.js

@@ -1,13 +1,167 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
+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 AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { B as Button$1 } from './button.js';
+import { F as FormAssociated } from './form-associated.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{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))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-nonedp);--_elevation-shadow: var(--vvd-shadow-surface-nonedp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
+class _FoundationButton extends FoundationElement {
+}
+class FormAssociatedButton extends FormAssociated(_FoundationButton) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+class FoundationButton extends FormAssociatedButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Prevent events to propagate if disabled
+     * @internal
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+      }
+    };
+    /**
+     * Submits the parent form
+     */
+    this.handleSubmission = () => {
+      if (!this.form) {
+        return;
+      }
+      this.attachProxy();
+      this.form.requestSubmit(this.proxy);
+      this.detachProxy();
+    };
+    /**
+     * Resets the parent form
+     */
+    this.handleFormReset = () => {
+      this.form?.reset();
+    };
+  }
+  // @ts-expect-error Function is delcared but not used
+  formactionChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formAction = this.formaction;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formenctypeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formEnctype = this.formenctype;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formmethodChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formMethod = this.formmethod;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formnovalidateChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formNoValidate = this.formnovalidate;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formtargetChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formTarget = this.formtarget;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  typeChanged(previous, next) {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+    }
+    next === "submit" && this.addEventListener("click", this.handleSubmission);
+    previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+    next === "reset" && this.addEventListener("click", this.handleFormReset);
+    previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.addEventListener("click", this.handleClick);
+      });
+    }
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.removeEventListener("click", this.handleClick);
+      });
+    }
+  }
+}
+__decorateClass$1([
+  attr({ mode: "boolean" })
+], FoundationButton.prototype, "autofocus");
+__decorateClass$1([
+  attr({ attribute: "form" })
+], FoundationButton.prototype, "formId");
+__decorateClass$1([
+  attr
+], FoundationButton.prototype, "formaction");
+__decorateClass$1([
+  attr
+], FoundationButton.prototype, "formenctype");
+__decorateClass$1([
+  attr
+], FoundationButton.prototype, "formmethod");
+__decorateClass$1([
+  attr({ mode: "boolean" })
+], FoundationButton.prototype, "formnovalidate");
+__decorateClass$1([
+  attr
+], FoundationButton.prototype, "formtarget");
+__decorateClass$1([
+  attr
+], FoundationButton.prototype, "type");
+class DelegatesARIAButton {
+}
+__decorateClass$1([
+  attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded");
+__decorateClass$1([
+  attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed");
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(FoundationButton, DelegatesARIAButton);
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -17,7 +171,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Fab extends Button$1 {
+class Fab extends FoundationButton {
 }
 __decorateClass([
   attr

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(