@vonage/vivid 5.15.1 → 5.17.0

package/file-picker/definition.js

@@ -1,517 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { ExecutionContext, Observable, attr, observable, volatile, when, html, slotted, ref, repeat } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { F as FormAssociated } from '../unbundled/form-associated.js';
-import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
-import { W as WithErrorText } from '../unbundled/with-error-text.js';
-import { F as FormElement } from '../unbundled/form-element.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;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 .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media(hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media(hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media(hover:hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{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%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
-
-async function filesFromDataTransfer(dataTransfer) {
-  const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
-  return browserSupportFolderDrop ? await filesFromDataTransferItems(dataTransfer.items) : Array.from(dataTransfer.files);
-}
-async function filesFromDataTransferItems(items) {
-  const result = [];
-  for (const item of items) {
-    const file = item.getAsFile();
-    if (file) {
-      result.push(Promise.resolve([file]));
-    } else {
-      const entry = item.webkitGetAsEntry();
-      if (entry) {
-        result.push(filesFromEntry(entry, false));
-      }
-    }
-  }
-  return (await Promise.all(result)).flat();
-}
-const filesFromEntry = (entry, ignoreHiddenFiles) => {
-  const handleFileEntry = (file) => new Promise((resolve, reject) => {
-    file.file((f) => {
-      if (ignoreHiddenFiles && f.name.substring(0, 1) === ".") {
-        resolve([]);
-      } else {
-        resolve([f]);
-      }
-    }, reject);
-  });
-  const promise = entry.isFile ? handleFileEntry(entry) : entry.isDirectory ? filesFromDirectory(entry) : Promise.resolve([]);
-  promise.catch(() => null);
-  return promise;
-};
-const filesFromDirectory = async (directory) => new Promise((resolve, reject) => {
-  const result = [];
-  const dirReader = directory.createReader();
-  const readEntries = () => {
-    dirReader.readEntries((entries) => {
-      for (const entry of entries) {
-        result.push(filesFromEntry(entry, true));
-      }
-      if (entries.length) {
-        readEntries();
-      } else {
-        resolve(Promise.all(result).then((r) => r.flat()));
-      }
-    }, reject);
-  };
-  readEntries();
-});
-
-function isAcceptedFileType(file, accept) {
-  if (!accept) {
-    return true;
-  }
-  const validTypes = accept.split(",");
-  const isBasePattern = (type) => /\/\*$/.test(type);
-  const baseType = (type) => type.replace(/\/.*$/, "");
-  for (let validType of validTypes) {
-    validType = validType.trim();
-    if (validType.charAt(0) === ".") {
-      if (file.name.toLowerCase().endsWith(validType.toLowerCase())) {
-        return true;
-      }
-    } else if (isBasePattern(validType)) {
-      if (baseType(file.type) === baseType(validType)) {
-        return true;
-      }
-    } else {
-      if (file.type === validType) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-class FilePicker extends WithContextualHelp(
-  WithFeedback(
-    WithErrorText(
-      FormElement(DelegatesAria(Localized(FormAssociated(VividElement))))
-    )
-  )
-) {
-  constructor() {
-    super(...arguments);
-    this.singleFile = false;
-    this.maxFileSize = 256;
-    /**
-     * @internal
-     */
-    this.valueChanged = (previous, next) => {
-      super.valueChanged(previous, next);
-      if (next === "" && this.files.length) {
-        this.removeAllFiles();
-      }
-    };
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    /**
-     * @internal
-     */
-    this.setFormValue = (value, state) => {
-      if (typeof value === "string") {
-        return;
-      }
-      super.setFormValue(value, state);
-    };
-    this._customValidationError = null;
-    // Use an observer to keep the validation error up to date
-    this.#customValidationChangeHandler = {
-      handleChange: () => {
-        this._customValidationError = this.#customValidationChangeObserver.observe(
-          this,
-          ExecutionContext.default
-        );
-      }
-    };
-    this._dragHover = false;
-    this._allFiles = [];
-  }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    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}` : "";
-  }
-  /** @internal */
-  validate() {
-    super.validate(this.control);
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    this.removeAllFiles();
-    super.formResetCallback();
-  }
-  #getCustomValidationError() {
-    if (this.rejectedFiles.length > 0) {
-      return this.locale.filePicker.invalidFilesError;
-    }
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _customValidationErrorChanged() {
-    if (this.proxy) {
-      this.proxy.setCustomValidity(this._customValidationError ?? "");
-    }
-    this.validate();
-  }
-  #customValidationChangeHandler;
-  #customValidationChangeObserver;
-  #startObservingCustomValidation() {
-    this.#customValidationChangeObserver = Observable.binding(
-      () => this.#getCustomValidationError(),
-      this.#customValidationChangeHandler,
-      true
-    );
-    this.#customValidationChangeHandler.handleChange();
-  }
-  #stopObservingCustomValidation() {
-    this.#customValidationChangeObserver.dispose();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#startObservingCustomValidation();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#stopObservingCustomValidation();
-  }
-  /**
-   * @internal
-   */
-  _onDragEnter() {
-    this._dragHover = true;
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _onDragOver(e) {
-    if (!e.dataTransfer) {
-      return true;
-    }
-    const effect = e.dataTransfer.effectAllowed;
-    e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _onDragLeave(e) {
-    if (e.currentTarget === e.target) {
-      this._dragHover = false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _onDrop(e) {
-    this._dragHover = false;
-    if (!e.dataTransfer) {
-      return true;
-    }
-    filesFromDataTransfer(e.dataTransfer).then((files) => this.#addFiles(files)).catch((err) => {
-      console.error(err);
-    });
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _onDragEnd() {
-    this._dragHover = false;
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _onControlClick() {
-    this._hiddenInput.click();
-  }
-  /**
-   * @internal
-   */
-  _onRemoveFileClick(file) {
-    this._allFiles = this._allFiles.filter((f) => f !== file);
-    this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  _allFilesChanged() {
-    this.#updateFormValue();
-  }
-  #addFiles(files) {
-    const newFiles = Array.from(files).filter(
-      (file) => !this._allFiles.some(
-        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
-      )
-    );
-    if (this.singleFile && newFiles.length > 0) {
-      this._allFiles = [newFiles[newFiles.length - 1]];
-    } else {
-      this._allFiles = [...this._allFiles, ...newFiles];
-    }
-    this.$emit("change");
-  }
-  /**
-   * Removes all files from the File Picker.
-   */
-  removeAllFiles() {
-    this._allFiles = [];
-  }
-  get _validatedFiles() {
-    const validationError = (file, validFileIndex2) => {
-      if (this.maxFileSize && file.size > this.maxFileSize * 1024 * 1024) {
-        return (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
-          "{{filesize}}",
-          this._formatNumber(Math.round(file.size / 1024 / 10.24) / 100)
-        ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize));
-      } else if (!isAcceptedFileType(file, this.accept)) {
-        return this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError;
-      } else if (typeof this.maxFiles === "number" && validFileIndex2 >= this.maxFiles) {
-        return (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles));
-      } else {
-        return null;
-      }
-    };
-    const result = [];
-    let validFileIndex = 0;
-    for (const file of this._allFiles) {
-      const validatedFile = {
-        file,
-        validationError: validationError(file, validFileIndex)
-      };
-      result.push(validatedFile);
-      if (!validatedFile.validationError) {
-        validFileIndex++;
-      }
-    }
-    return result;
-  }
-  /**
-   * Files that have been added to the file picker and passed validation.
-   *
-   * @public
-   */
-  get files() {
-    return this._validatedFiles.filter((f) => !f.validationError).map((f) => f.file);
-  }
-  /**
-   * Files that have been rejected by the file picker for failing validation.
-   *
-   * @public
-   */
-  get rejectedFiles() {
-    return this._validatedFiles.filter((f) => !!f.validationError).map((f) => f.file);
-  }
-  /**
-   * @internal
-   */
-  _onHiddenInputChange(e) {
-    this.#addFiles(this._hiddenInput.files);
-    this._hiddenInput.value = "";
-    e.stopPropagation();
-  }
-  /**
-   * @internal
-   */
-  _formatNumber(value) {
-    const str = String(value);
-    if (this.locale.common.useCommaAsDecimalSeparator) {
-      return str.replace(".", ",");
-    }
-    return str;
-  }
-}
-__decorateClass([
-  attr({ attribute: "single-file", mode: "boolean" })
-], FilePicker.prototype, "singleFile", 2);
-__decorateClass([
-  attr({ attribute: "max-files" })
-], FilePicker.prototype, "maxFiles", 2);
-__decorateClass([
-  attr({ mode: "fromView", attribute: "max-file-size" })
-], FilePicker.prototype, "maxFileSize", 2);
-__decorateClass([
-  attr
-], FilePicker.prototype, "accept", 2);
-__decorateClass([
-  attr
-], FilePicker.prototype, "size", 2);
-__decorateClass([
-  attr({ attribute: "invalid-file-type-error" })
-], FilePicker.prototype, "invalidFileTypeError", 2);
-__decorateClass([
-  attr({ attribute: "max-files-exceeded-error" })
-], FilePicker.prototype, "maxFilesExceededError", 2);
-__decorateClass([
-  attr({ attribute: "file-too-big-error" })
-], FilePicker.prototype, "fileTooBigError", 2);
-__decorateClass([
-  observable
-], FilePicker.prototype, "_customValidationError", 2);
-__decorateClass([
-  observable
-], FilePicker.prototype, "_dragHover", 2);
-__decorateClass([
-  observable
-], FilePicker.prototype, "_allFiles", 2);
-__decorateClass([
-  volatile
-], FilePicker.prototype, "_validatedFiles", 1);
-
-const filesizeBase = 1e3;
-const dictFileSizeUnits = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" };
-const renderFileSize = (x, size) => {
-  let selectedSize = 0;
-  let selectedUnit = "b";
-  if (size > 0) {
-    const units = ["tb", "gb", "mb", "kb", "b"];
-    for (let i = 0; i < units.length; i++) {
-      const unit = units[i];
-      const cutoff = Math.pow(filesizeBase, 4 - i) / 10;
-      if (size >= cutoff) {
-        selectedSize = size / Math.pow(filesizeBase, 4 - i);
-        selectedUnit = unit;
-        break;
-      }
-    }
-    selectedSize = Math.round(10 * selectedSize) / 10;
-  }
-  return html`<strong>${x._formatNumber(selectedSize)}</strong>
-		${dictFileSizeUnits[selectedUnit]}`;
-};
-const getClasses = ({ size, _dragHover }) => classNames(
-  "control",
-  [`size-${size}`, Boolean(size)],
-  ["drag-hover", _dragHover]
-);
-const FilePickerTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
-  return html`
-		<div class="base">
-			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
-				${when(
-    (x) => x.label,
-    html`<label class="label">${(x) => x.label}</label>`
-  )}
-				<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
-			</div>
-			<div class="control-wrapper">
-				<button
-					type="button"
-					${ref("control")}
-					class="${getClasses}"
-					@click="${(x) => x._onControlClick()}"
-					@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
-  () => false}"
-					@dragenter="${(x) => x._onDragEnter()}"
-					@dragover="${(x, c) => x._onDragOver(c.event)}"
-					@dragleave="${(x, c) => x._onDragLeave(c.event)}"
-					@drop="${(x, c) => x._onDrop(c.event)}"
-					@dragend="${(x) => x._onDragEnd()}"
-					aria-describedby="${(x) => x._feedbackDescribedBy}"
-					${delegateAria()}
-				>
-					<${iconTag}
-						class="upload-icon"
-						name="cloud-upload-line"
-						size="-4"
-						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
-					></${iconTag}>
-					<span class="upload-text"><slot></slot></span>
-				</button>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-			<div class="preview-list">
-				${repeat(
-    (x) => x._validatedFiles,
-    html`
-				<div class="${(x) => classNames("preview", ["has-error", !!x.validationError])}">
-					<div class="details">
-						<div class="filename">${(x) => x.file.name}</div>
-						<div class="size">${(x, c) => renderFileSize(c.parent, x.file.size)}</div>
-					</div>
-					<div class="error-message">
-						<${iconTag} name="info-line" size="-6"></${iconTag}>
-						${(x) => x.validationError}
-					</div>
-					<${buttonTag}
-						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
-						@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
-				</div>`
-  )}
-			</div>
-		</div>
-		<input
-			${ref("_hiddenInput")}
-			class="hidden-input"
-			aria-hidden="true"
-			type="file"
-			?multiple="${(x) => !x.singleFile && (!x.maxFiles || x.maxFiles > 1)}"
-			accept="${(x) => x.accept || null}"
-			tabindex="-1"
-			@change="${(x, c) => x._onHiddenInputChange(c.event)}"
-		/>
-	`;
-};
-
-const filePickerDefinition = defineVividComponent(
-  "file-picker",
-  FilePicker,
-  FilePickerTemplate,
-  [iconDefinition, buttonDefinition, feedbackMessageDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerFilePicker = createRegisterFunction(filePickerDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerFilePicker, r as FilePicker, t as filePickerDefinition } from "../unbundled/definition42.js";
 export { FilePicker as VwcFilePickerElement, filePickerDefinition, registerFilePicker };

package/file-picker/index.cjs

@@ -1,61 +1,64 @@
-"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),a=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),y=require("../bundled/with-error-text.cjs"),w=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),$=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),C=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;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 .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media(hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media(hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media(hover:hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{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%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";async function z(l){return l.items?.[0]?.webkitGetAsEntry!=null?await D(l.items):Array.from(l.files)}async function D(l){const r=[];for(const t of l){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(l,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=l.isFile?t(l):l.isDirectory?T(l):Promise.resolve([]);return e.catch(()=>null),e},T=async l=>new Promise((r,t)=>{const e=[],o=l.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(l,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(l.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(l.type)===o(i))return!0}else if(l.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(l,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=l.length-1,c;i>=0;i--)(c=l[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(y.WithErrorText(w.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(a.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,a.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#l(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#a(){this.#r=a.Observable.binding(()=>this.#l(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){const t=Array.from(r).filter(e=>!this._allFiles.some(o=>o.name===e.name&&o.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([a.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([a.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([a.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([a.attr],s.prototype,"accept",2);n([a.attr],s.prototype,"size",2);n([a.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([a.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([a.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([a.observable],s.prototype,"_customValidationError",2);n([a.observable],s.prototype,"_dragHover",2);n([a.observable],s.prototype,"_allFiles",2);n([a.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(l,r)=>{let t=0,e="b";if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return a.html`<strong>${l._formatNumber(t)}</strong>
-		${q[e]}`},H=({size:l,_dragHover:r})=>b.classNames("control",[`size-${l}`,!!l],["drag-hover",r]),B=l=>{const r=l.tagFor(u.Icon),t=l.tagFor(h.Button);return a.html`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/slotted.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/form-element.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/class-names.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/definition6.cjs`),h=require(`../bundled/mixins.cjs`);var g=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends u.t(h.t(l.t(c.t(d.t(e.t(p.n(t.t))))))){constructor(...e){super(...e),this.singleFile=!1,this.maxFiles=null,this.maxFileSize=256,this.valueChanged=(e,t)=>{super.valueChanged(e,t),t===``&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.C.default)}};#i;#a(){this.#i=t.w.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};s.t([t.l({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),s.t([t.l({attribute:`max-files`,converter:t.u,mode:`fromView`})],S.prototype,`maxFiles`,void 0),s.t([t.l({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),s.t([t.l],S.prototype,`accept`,void 0),s.t([t.l],S.prototype,`size`,void 0),s.t([t.l({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),s.t([t.l({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),s.t([t.l({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),s.t([t.T],S.prototype,`_customValidationError`,void 0),s.t([t.T],S.prototype,`_dragHover`,void 0),s.t([t.T],S.prototype,`_allFiles`,void 0),s.t([t.E],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.d`<strong>${e._formatNumber(r)}</strong>
+		${w[i]}`},E=({size:e,_dragHover:t,disabled:n})=>f.t(`control`,[`size-${e}`,!!e],[`drag-hover`,t],[`disabled`,n]),D=t.o(`file-picker`,S,e=>{let s=e.tagFor(o.r),c=e.tagFor(m.i);return t.d`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
-				${_.when(e=>e.label,a.html`<label class="label">${e=>e.label}</label>`)}
-				<slot name="contextual-help" ${E.slotted("_contextualHelpSlottedContent")}></slot>
+				${i.t(e=>e.label,t.d`<label class="label">${e=>e.label}</label>`)}
+				<slot name="contextual-help" ${a.t(`_contextualHelpSlottedContent`)}></slot>
 			</div>
 			<div class="control-wrapper">
-				<button
-					type="button"
-					${p.ref("control")}
-					class="${H}"
-					@click="${e=>e._onControlClick()}"
-					@keydown"${()=>!1}"
+			<button
+				type="button"
+				${r.t(`control`)}
+				class="${E}"
+				?disabled="${e=>e.disabled}"
+				@click="${e=>e._onControlClick()}"
+					@keydown="${()=>!1}"
 					@dragenter="${e=>e._onDragEnter()}"
-					@dragover="${(e,o)=>e._onDragOver(o.event)}"
-					@dragleave="${(e,o)=>e._onDragLeave(o.event)}"
-					@drop="${(e,o)=>e._onDrop(o.event)}"
+					@dragover="${(e,t)=>e._onDragOver(t.event)}"
+					@dragleave="${(e,t)=>e._onDragLeave(t.event)}"
+					@drop="${(e,t)=>e._onDrop(t.event)}"
 					@dragend="${e=>e._onDragEnd()}"
 					aria-describedby="${e=>e._feedbackDescribedBy}"
-					${m.delegateAria()}
+					${d.n()}
 				>
-					<${r}
+					<${s}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${e=>e.locale.filePicker.uploadFilesLabel}"
-					></${r}>
+					></${s}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
-				${e=>e._getFeedbackTemplate(l)}
+				${t=>t._getFeedbackTemplate(e)}
 			</div>
 			<div class="preview-list">
-				${$.repeat(e=>e._validatedFiles,a.html`
-				<div class="${e=>b.classNames("preview",["has-error",!!e.validationError])}">
+				${n.n(e=>e._validatedFiles,t.d`
+				<div class="${e=>f.t(`preview`,[`has-error`,!!e.validationError])}">
 					<div class="details">
 						<div class="filename">${e=>e.file.name}</div>
-						<div class="size">${(e,o)=>S(o.parent,e.file.size)}</div>
+						<div class="size">${(e,t)=>T(t.parent,e.file.size)}</div>
 					</div>
 					<div class="error-message">
-						<${r} name="info-line" size="-6"></${r}>
+						<${s} name="info-line" size="-6"></${s}>
 						${e=>e.validationError}
 					</div>
-					<${t}
-						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(e,o)=>o.parent.locale.filePicker.removeFileLabel}"
-						@click="${(e,o)=>o.parent._onRemoveFileClick(e.file)}"></${t}>
+				<${c}
+					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+					?disabled="${(e,t)=>t.parent.disabled}"
+					aria-label="${(e,t)=>t.parent.locale.filePicker.removeFileLabel}"
+					@click="${(e,t)=>t.parent._onRemoveFileClick(e.file)}"></${c}>
 				</div>`)}
 			</div>
 		</div>
 		<input
-			${p.ref("_hiddenInput")}
+			${r.t(`_hiddenInput`)}
 			class="hidden-input"
 			aria-hidden="true"
 			type="file"
-			?multiple="${e=>!e.singleFile&&(!e.maxFiles||e.maxFiles>1)}"
+			?disabled="${e=>e.disabled}"
+			?multiple="${e=>!e.singleFile&&(e.maxFiles==null||e.maxFiles>1)}"
 			accept="${e=>e.accept||null}"
 			tabindex="-1"
-			@change="${(e,o)=>e._onHiddenInputChange(o.event)}"
+			@change="${(e,t)=>e._onHiddenInputChange(t.event)}"
 		/>
-	`},O=a.defineVividComponent("file-picker",s,B,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:C,shadowOptions:{delegatesFocus:!0}}),I=a.createRegisterFunction(O);I();
+	`},[o.t,m.t,h.a],{styles:g,shadowOptions:{delegatesFocus:!0}});t.s(D)();