@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition24.cjs

@@ -2,7 +2,6 @@
 
 const index = require('./index.cjs');
 const definition$1 = require('./definition26.cjs');
-const definition$2 = require('./definition61.cjs');
 const definition = require('./definition11.cjs');
 const enums = require('./enums.cjs');
 require('./affix.cjs');
@@ -14,7 +13,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);background-color:var(--vvd-color-cta-50);border-radius:8px;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:6px 12px;border-radius:8px;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}\n";
+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:6px 12px;border-radius:8px;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}\n";
 
 var objectExtend = extend;
 
@@ -2162,10 +2161,39 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _dropzone, _chooseFile, chooseFile_fn, _updateHiddenFileInput, updateHiddenFileInput_fn, _handleFilesChanged, handleFilesChanged_fn, _updateFormValue, updateFormValue_fn, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 let FilePicker = class extends FormAssociatedFilePicker {
   constructor() {
     super();
+    __privateAdd(this, _chooseFile);
+    __privateAdd(this, _updateHiddenFileInput);
+    __privateAdd(this, _handleFilesChanged);
+    __privateAdd(this, _updateFormValue);
+    __privateAdd(this, _setValueToAFakePathLikeNativeInput);
+    __privateAdd(this, _dropzone, void 0);
     this.maxFileSize = 256;
     /**
      * Used internally to hold the tag that button is registered at.
@@ -2179,37 +2207,36 @@ let FilePicker = class extends FormAssociatedFilePicker {
     };
     $3ed269f2f0fb224b$export$2e2bcd8739ae039.autoDiscover = false;
   }
-  #dropzone;
   /**
    * Files that have been added to the file picker and passed validation.
    *
    * @public
    */
   get files() {
-    return this.#dropzone?.getAcceptedFiles() ?? [];
+    return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
   maxFilesChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.maxFiles = newValue;
-    this.#updateHiddenFileInput();
+    __privateGet(this, _dropzone).options.maxFiles = newValue;
+    __privateMethod(this, _updateHiddenFileInput, updateHiddenFileInput_fn).call(this);
   }
   maxFileSizeChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.maxFilesize = newValue;
+    __privateGet(this, _dropzone).options.maxFilesize = newValue;
   }
   acceptChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.acceptedFiles = newValue;
+    __privateGet(this, _dropzone).options.acceptedFiles = newValue;
   }
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
-    this.#updateFormValue();
+    __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2219,7 +2246,7 @@ let FilePicker = class extends FormAssociatedFilePicker {
     const previewList = this.shadowRoot.querySelector(
       ".preview-list"
     );
-    this.#dropzone = new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
+    __privateSet(this, _dropzone, new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
       url: "/",
       // dummy url, we do not use dropzone's upload functionality
       maxFiles: this.maxFiles ?? null,
@@ -2241,8 +2268,8 @@ let FilePicker = class extends FormAssociatedFilePicker {
       dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.locale.filePicker.fileTooBigError
-    });
-    this.#dropzone.on("addedfiles", (files) => {
+    }));
+    __privateGet(this, _dropzone).on("addedfiles", (files) => {
       for (const file of files) {
         if (file.previewElement) {
           const removeButton = file.previewElement.querySelector(
@@ -2251,16 +2278,16 @@ let FilePicker = class extends FormAssociatedFilePicker {
           removeButton.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
-            this.#dropzone.removeFile(file);
+            __privateGet(this, _dropzone).removeFile(file);
           });
         }
       }
-      this.#handleFilesChanged();
+      __privateMethod(this, _handleFilesChanged, handleFilesChanged_fn).call(this);
     });
-    this.#dropzone.on("removedfile", () => {
-      this.#handleFilesChanged();
+    __privateGet(this, _dropzone).on("removedfile", () => {
+      __privateMethod(this, _handleFilesChanged, handleFilesChanged_fn).call(this);
     });
-    this.#dropzone.on("error", (file) => {
+    __privateGet(this, _dropzone).on("error", (file) => {
       if (file.previewElement) {
         const removeButton = file.previewElement.querySelector(
           ".remove-btn"
@@ -2271,7 +2298,7 @@ let FilePicker = class extends FormAssociatedFilePicker {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#dropzone.destroy();
+    __privateGet(this, _dropzone).destroy();
   }
   /**
    * Used internally to set the button tag.
@@ -2285,50 +2312,56 @@ let FilePicker = class extends FormAssociatedFilePicker {
    */
   handleKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
-      this.#chooseFile();
+      __privateMethod(this, _chooseFile, chooseFile_fn).call(this);
     }
     return true;
   }
-  #chooseFile() {
-    if (this.#dropzone.hiddenFileInput) {
-      this.#dropzone.hiddenFileInput.click();
-    }
-  }
-  #updateHiddenFileInput() {
-    if (this.#dropzone.hiddenFileInput) {
-      this.#dropzone.hiddenFileInput.dispatchEvent(
-        new Event("change", { bubbles: false })
-      );
-    }
-  }
-  #handleFilesChanged() {
-    this.$emit("change");
-    this.#updateFormValue();
-  }
-  #updateFormValue() {
-    const files = this.files;
-    if (!this.name) {
-      this.setFormValue(null);
-    } else {
-      const formData = new FormData();
-      for (const file of files) {
-        formData.append(this.name, file);
-      }
-      this.setFormValue(formData);
-    }
-    this.#setValueToAFakePathLikeNativeInput();
-  }
-  #setValueToAFakePathLikeNativeInput() {
-    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
-  }
   validate() {
     super.validate(this.control);
   }
   formResetCallback() {
     super.formResetCallback();
-    this.#dropzone.removeAllFiles();
+    __privateGet(this, _dropzone).removeAllFiles();
   }
 };
+_dropzone = new WeakMap();
+_chooseFile = new WeakSet();
+chooseFile_fn = function() {
+  if (__privateGet(this, _dropzone).hiddenFileInput) {
+    __privateGet(this, _dropzone).hiddenFileInput.click();
+  }
+};
+_updateHiddenFileInput = new WeakSet();
+updateHiddenFileInput_fn = function() {
+  if (__privateGet(this, _dropzone).hiddenFileInput) {
+    __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
+      new Event("change", { bubbles: false })
+    );
+  }
+};
+_handleFilesChanged = new WeakSet();
+handleFilesChanged_fn = function() {
+  this.$emit("change");
+  __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+};
+_updateFormValue = new WeakSet();
+updateFormValue_fn = function() {
+  const files = this.files;
+  if (!this.name) {
+    this.setFormValue(null);
+  } else {
+    const formData = new FormData();
+    for (const file of files) {
+      formData.append(this.name, file);
+    }
+    this.setFormValue(formData);
+  }
+  __privateMethod(this, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn).call(this);
+};
+_setValueToAFakePathLikeNativeInput = new WeakSet();
+setValueToAFakePathLikeNativeInput_fn = function() {
+  this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
+};
 __decorateClass([
   index.attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);
@@ -2347,27 +2380,37 @@ FilePicker = __decorateClass([
 ], FilePicker);
 applyMixins.applyMixins(FilePicker, index$1.FormElementHelperText, localized.Localized);
 
-const getClasses = ({
-  size
-}) => classNames.classNames(
-  "control",
-  "dz-default",
-  "dz-message",
-  [`size-${size}`, Boolean(size)]
-);
+const getClasses = ({ size }) => classNames.classNames("control", "dz-default", "dz-message", [
+  `size-${size}`,
+  Boolean(size)
+]);
 const FilePickerTemplate = (context) => {
   return index.html`
 		${(x) => {
     x.setButtonTag(context.tagFor(definition.Button));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
-			${when.when((x) => x.label, index.html`<label>${(x) => x.label}</label>`)}
-			<div ${ref.ref("control")} class="${getClasses}" tabindex="0" role="button"
-					 @keydown="${(x, c) => x.handleKeydown(c.event)}">
+			${when.when(
+    (x) => x.label,
+    index.html`<label>${(x) => x.label}</label>`
+  )}
+			<div
+				${ref.ref("control")}
+				class="${getClasses}"
+				tabindex="0"
+				role="button"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+			>
 				<slot class="main"></slot>
 			</div>
-			${when.when((x) => !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
-			${when.when((x) => x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
+			${when.when(
+    (x) => !x.errorValidationMessage && x.helperText?.length,
+    index$1.getFeedbackTemplate("helper", context)
+  )}
+			${when.when(
+    (x) => x.errorValidationMessage,
+    index$1.getFeedbackTemplate("error", context)
+  )}
 			<div class="preview-list"></div>
 		</div>
 	`;
@@ -2381,7 +2424,11 @@ const filePickerDefinition = FilePicker.compose({
     delegatesFocus: true
   }
 });
-const filePickerRegistries = [filePickerDefinition(), ...definition$1.iconRegistries, ...definition$2.focusRegistries, ...definition.buttonRegistries];
+const filePickerRegistries = [
+  filePickerDefinition(),
+  ...definition$1.iconRegistries,
+  ...definition.buttonRegistries
+];
 const registerFilePicker = index.registerFactory(filePickerRegistries);
 
 exports.filePickerDefinition = filePickerDefinition;

package/shared/definition24.js

@@ -1,6 +1,5 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition61.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { C as Connotation } from './enums.js';
 import './affix.js';
@@ -12,7 +11,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);background-color:var(--vvd-color-cta-50);border-radius:8px;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:6px 12px;border-radius:8px;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}\n";
+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:6px 12px;border-radius:8px;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}\n";
 
 var objectExtend = extend;
 
@@ -2160,10 +2159,39 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _dropzone, _chooseFile, chooseFile_fn, _updateHiddenFileInput, updateHiddenFileInput_fn, _handleFilesChanged, handleFilesChanged_fn, _updateFormValue, updateFormValue_fn, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 let FilePicker = class extends FormAssociatedFilePicker {
   constructor() {
     super();
+    __privateAdd(this, _chooseFile);
+    __privateAdd(this, _updateHiddenFileInput);
+    __privateAdd(this, _handleFilesChanged);
+    __privateAdd(this, _updateFormValue);
+    __privateAdd(this, _setValueToAFakePathLikeNativeInput);
+    __privateAdd(this, _dropzone, void 0);
     this.maxFileSize = 256;
     /**
      * Used internally to hold the tag that button is registered at.
@@ -2177,37 +2205,36 @@ let FilePicker = class extends FormAssociatedFilePicker {
     };
     $3ed269f2f0fb224b$export$2e2bcd8739ae039.autoDiscover = false;
   }
-  #dropzone;
   /**
    * Files that have been added to the file picker and passed validation.
    *
    * @public
    */
   get files() {
-    return this.#dropzone?.getAcceptedFiles() ?? [];
+    return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
   maxFilesChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.maxFiles = newValue;
-    this.#updateHiddenFileInput();
+    __privateGet(this, _dropzone).options.maxFiles = newValue;
+    __privateMethod(this, _updateHiddenFileInput, updateHiddenFileInput_fn).call(this);
   }
   maxFileSizeChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.maxFilesize = newValue;
+    __privateGet(this, _dropzone).options.maxFilesize = newValue;
   }
   acceptChanged(_oldValue, newValue) {
-    if (!this.#dropzone) {
+    if (!__privateGet(this, _dropzone)) {
       return;
     }
-    this.#dropzone.options.acceptedFiles = newValue;
+    __privateGet(this, _dropzone).options.acceptedFiles = newValue;
   }
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
-    this.#updateFormValue();
+    __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2217,7 +2244,7 @@ let FilePicker = class extends FormAssociatedFilePicker {
     const previewList = this.shadowRoot.querySelector(
       ".preview-list"
     );
-    this.#dropzone = new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
+    __privateSet(this, _dropzone, new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
       url: "/",
       // dummy url, we do not use dropzone's upload functionality
       maxFiles: this.maxFiles ?? null,
@@ -2239,8 +2266,8 @@ let FilePicker = class extends FormAssociatedFilePicker {
       dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.locale.filePicker.fileTooBigError
-    });
-    this.#dropzone.on("addedfiles", (files) => {
+    }));
+    __privateGet(this, _dropzone).on("addedfiles", (files) => {
       for (const file of files) {
         if (file.previewElement) {
           const removeButton = file.previewElement.querySelector(
@@ -2249,16 +2276,16 @@ let FilePicker = class extends FormAssociatedFilePicker {
           removeButton.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
-            this.#dropzone.removeFile(file);
+            __privateGet(this, _dropzone).removeFile(file);
           });
         }
       }
-      this.#handleFilesChanged();
+      __privateMethod(this, _handleFilesChanged, handleFilesChanged_fn).call(this);
     });
-    this.#dropzone.on("removedfile", () => {
-      this.#handleFilesChanged();
+    __privateGet(this, _dropzone).on("removedfile", () => {
+      __privateMethod(this, _handleFilesChanged, handleFilesChanged_fn).call(this);
     });
-    this.#dropzone.on("error", (file) => {
+    __privateGet(this, _dropzone).on("error", (file) => {
       if (file.previewElement) {
         const removeButton = file.previewElement.querySelector(
           ".remove-btn"
@@ -2269,7 +2296,7 @@ let FilePicker = class extends FormAssociatedFilePicker {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#dropzone.destroy();
+    __privateGet(this, _dropzone).destroy();
   }
   /**
    * Used internally to set the button tag.
@@ -2283,50 +2310,56 @@ let FilePicker = class extends FormAssociatedFilePicker {
    */
   handleKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
-      this.#chooseFile();
+      __privateMethod(this, _chooseFile, chooseFile_fn).call(this);
     }
     return true;
   }
-  #chooseFile() {
-    if (this.#dropzone.hiddenFileInput) {
-      this.#dropzone.hiddenFileInput.click();
-    }
-  }
-  #updateHiddenFileInput() {
-    if (this.#dropzone.hiddenFileInput) {
-      this.#dropzone.hiddenFileInput.dispatchEvent(
-        new Event("change", { bubbles: false })
-      );
-    }
-  }
-  #handleFilesChanged() {
-    this.$emit("change");
-    this.#updateFormValue();
-  }
-  #updateFormValue() {
-    const files = this.files;
-    if (!this.name) {
-      this.setFormValue(null);
-    } else {
-      const formData = new FormData();
-      for (const file of files) {
-        formData.append(this.name, file);
-      }
-      this.setFormValue(formData);
-    }
-    this.#setValueToAFakePathLikeNativeInput();
-  }
-  #setValueToAFakePathLikeNativeInput() {
-    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
-  }
   validate() {
     super.validate(this.control);
   }
   formResetCallback() {
     super.formResetCallback();
-    this.#dropzone.removeAllFiles();
+    __privateGet(this, _dropzone).removeAllFiles();
   }
 };
+_dropzone = new WeakMap();
+_chooseFile = new WeakSet();
+chooseFile_fn = function() {
+  if (__privateGet(this, _dropzone).hiddenFileInput) {
+    __privateGet(this, _dropzone).hiddenFileInput.click();
+  }
+};
+_updateHiddenFileInput = new WeakSet();
+updateHiddenFileInput_fn = function() {
+  if (__privateGet(this, _dropzone).hiddenFileInput) {
+    __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
+      new Event("change", { bubbles: false })
+    );
+  }
+};
+_handleFilesChanged = new WeakSet();
+handleFilesChanged_fn = function() {
+  this.$emit("change");
+  __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+};
+_updateFormValue = new WeakSet();
+updateFormValue_fn = function() {
+  const files = this.files;
+  if (!this.name) {
+    this.setFormValue(null);
+  } else {
+    const formData = new FormData();
+    for (const file of files) {
+      formData.append(this.name, file);
+    }
+    this.setFormValue(formData);
+  }
+  __privateMethod(this, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn).call(this);
+};
+_setValueToAFakePathLikeNativeInput = new WeakSet();
+setValueToAFakePathLikeNativeInput_fn = function() {
+  this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
+};
 __decorateClass([
   attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);
@@ -2345,27 +2378,37 @@ FilePicker = __decorateClass([
 ], FilePicker);
 applyMixins(FilePicker, FormElementHelperText, Localized);
 
-const getClasses = ({
-  size
-}) => classNames(
-  "control",
-  "dz-default",
-  "dz-message",
-  [`size-${size}`, Boolean(size)]
-);
+const getClasses = ({ size }) => classNames("control", "dz-default", "dz-message", [
+  `size-${size}`,
+  Boolean(size)
+]);
 const FilePickerTemplate = (context) => {
   return html`
 		${(x) => {
     x.setButtonTag(context.tagFor(Button));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
-			${when((x) => x.label, html`<label>${(x) => x.label}</label>`)}
-			<div ${ref("control")} class="${getClasses}" tabindex="0" role="button"
-					 @keydown="${(x, c) => x.handleKeydown(c.event)}">
+			${when(
+    (x) => x.label,
+    html`<label>${(x) => x.label}</label>`
+  )}
+			<div
+				${ref("control")}
+				class="${getClasses}"
+				tabindex="0"
+				role="button"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+			>
 				<slot class="main"></slot>
 			</div>
-			${when((x) => !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
-			${when((x) => x.errorValidationMessage, getFeedbackTemplate("error", context))}
+			${when(
+    (x) => !x.errorValidationMessage && x.helperText?.length,
+    getFeedbackTemplate("helper", context)
+  )}
+			${when(
+    (x) => x.errorValidationMessage,
+    getFeedbackTemplate("error", context)
+  )}
 			<div class="preview-list"></div>
 		</div>
 	`;
@@ -2379,7 +2422,11 @@ const filePickerDefinition = FilePicker.compose({
     delegatesFocus: true
   }
 });
-const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...focusRegistries, ...buttonRegistries];
+const filePickerRegistries = [
+  filePickerDefinition(),
+  ...iconRegistries,
+  ...buttonRegistries
+];
 const registerFilePicker = registerFactory(filePickerRegistries);
 
 export { filePickerRegistries as a, filePickerDefinition as f, registerFilePicker as r };

package/shared/definition25.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition59.cjs');
+const definition = require('./definition60.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
@@ -36,9 +36,7 @@ __decorateClass([
   })
 ], Header.prototype, "alternate", 2);
 
-const getPartAlternate = ({ alternate }) => classNames.classNames(
-  ["vvd-theme-alternate", Boolean(alternate)]
-);
+const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   return index.html`

package/shared/definition25.js

@@ -1,5 +1,5 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { E as Elevation, e as elevationRegistries } from './definition60.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
@@ -34,9 +34,7 @@ __decorateClass([
   })
 ], Header.prototype, "alternate", 2);
 
-const getPartAlternate = ({ alternate }) => classNames(
-  ["vvd-theme-alternate", Boolean(alternate)]
-);
+const getPartAlternate = ({ alternate }) => classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
   return html`