@mcp-b/web-components 0.2.0

package/dist/file-input-BEumLJjg.js

@@ -0,0 +1,841 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./button-5k_aL_gD.js";
+import { css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+//#region src/components/file-input/file-input.styles.ts
+var file_input_styles_default = css`
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+  }
+
+  :host(:state(disabled)) #label {
+    color: var(--sigvelo-color-text-muted);
+  }
+
+  :host(:state(disabled)) #dropzone {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  #dropzone {
+    position: relative;
+    padding: 3em 2em;
+    border: dashed var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    color: var(--sigvelo-color-neutral-text);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease,
+      var(--sigvelo-motion-duration-interaction) color ease;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:has(input:focus-visible) {
+      border-color: transparent;
+      outline: var(--sigvelo-focus-ring);
+    }
+
+    &.dragging {
+      border-style: solid;
+      border-color: var(--sigvelo-color-primary-border);
+      background-color: var(--sigvelo-color-primary-bg-subtle);
+      color: var(--sigvelo-color-primary-text);
+    }
+
+    sigvelo-icon {
+      color: var(--sigvelo-color-neutral-text);
+      font-size: 2em;
+    }
+
+    /* Position the file input to stretch the entire dropzone so validation errors are positioned properly. */
+    #file-input {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Create an invisible overlay to prevent dragleave from firing on child elements */
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: "";
+      opacity: 0;
+    }
+  }
+
+  /* File list */
+  #file-list {
+    margin-block-start: 0.5em;
+  }
+
+  :host(:state(empty)) #file-list {
+    display: none;
+  }
+
+  .file {
+    display: flex;
+    align-items: center;
+    padding: 0.5em;
+    gap: 1em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-hairline);
+
+    .file-thumbnail {
+      display: flex;
+      position: relative;
+      flex: 0 0 4em;
+      align-items: center;
+      justify-content: center;
+      aspect-ratio: 1;
+      width: 100%;
+      border-radius: var(--sigvelo-radius-sm);
+      background: var(--sigvelo-color-neutral-bg-subtle);
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: inherit;
+      }
+
+      sigvelo-icon {
+        color: var(--sigvelo-color-text-muted);
+        font-size: 1.5em;
+      }
+    }
+
+    .file-details {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+
+      .file-name {
+        white-space: normal;
+      }
+
+      .file-size {
+        color: var(--sigvelo-color-text-muted);
+      }
+    }
+
+    .file-actions {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+    }
+
+    + .file {
+      margin-block-start: 0.5em;
+    }
+  }
+
+  /* Sizes */
+  #dropzone.xs,
+  #file-list.xs {
+    font-size: calc(var(--sigvelo-control-text-xs) * 0.8375);
+  }
+
+  #dropzone.sm,
+  #file-list.sm {
+    font-size: calc(var(--sigvelo-control-text-sm) * 0.8375);
+  }
+
+  #dropzone.md,
+  #file-list.md {
+    font-size: calc(var(--sigvelo-control-text-md) * 0.8375);
+  }
+
+  #dropzone.lg,
+  #file-list.lg {
+    font-size: calc(var(--sigvelo-control-text-lg) * 0.8375);
+  }
+
+  #dropzone.xl,
+  #file-list.xl {
+    font-size: calc(var(--sigvelo-control-text-xl) * 0.8375);
+  }
+`;
+//#endregion
+//#region src/components/file-input/file-input.ts
+const nativeFileInput = document.createElement("input");
+nativeFileInput.name = "sigvelo-faux-input";
+nativeFileInput.type = "file";
+nativeFileInput.required = true;
+const VALIDATION_MESSAGE = nativeFileInput.validationMessage;
+/**
+* <sigvelo-file-input>
+*
+* @summary Allows the user to select files to upload to the server.
+* @tag sigvelo-file-input
+* @documentation https://design-system.sigvelo.com/docs/components/file
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-button
+* @dependency sigvelo-icon
+*
+* @slot label - The file input's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The file input's description. For plain-text descriptions, you can use the `description`
+*  attribute instead.
+* @slot dropzone - Custom content to show in the dropzone.
+*
+* @event sigvelo-blur - Emitted when the file input loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user selects or removes a file.
+* @event sigvelo-focus - Emitted when the file input receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the file input receives input.
+*
+* @csspart label - The element that contains the text field's label, a `<label>` element.
+* @csspart description - The element that contains the text field's description.
+* @csspart dropzone - The bordered region where files can be dropped.
+* @csspart file-list - The list of files shown when at least one file is selected.
+* @csspart file - A selected file will be drawn in this container.
+* @csspart file-thumbnail - The container that hold's the file's image or icon.
+* @csspart file-image - The file's image preview (if it's an image).
+* @csspart file-icon - The file's icon (if it's not an image).
+* @csspart file-icon__svg - The `<svg>` part of the file icon.
+* @csspart file-details - The container that holds the filename and size.
+* @csspart file-name - The container that holds the file's name, a `<span>` element.
+* @csspart file-size - The container that holds the file's size, a `<small>` element.
+* @csspart file-actions - The container that holds the file's remove button.
+* @csspart file-remove-button - The file's remove button.
+* @csspart file-remove-button__button - The `button` part of the file's remove button.
+*
+* @cssstate disabled - Applied when the file input is disabled.
+* @cssstate blank - Applied when the file input has a blank value.
+* @cssstate focused - Applied when the file input has focus.
+* @cssstate user-valid - Applied when the file input is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the file input is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-file-input
+*   name="files"
+*   label="Select a file"
+*   description="Files must be 20MB or less"
+*   multiple
+* ></sigvelo-file-input>
+* ```
+*
+* **Note:** This component works like a [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Files can be posted to your server as multipart form data or you can access them via JavaScript for processing.
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the file input. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-file-input name="file" label="Select a file">
+*   <span slot="description">
+*     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
+*   </span>
+* </sigvelo-file-input>
+* ```
+*
+* @example Uploading with forms
+* When uploading a file from a form, you'll probably want to add `method="post"` and `enctype="multipart/form-data"` to the form so the files will be sent to the server correctly.
+*
+* ```html
+* <form
+*   id="file-input__uploading"
+*   enctype="multipart/form-data"
+*   method="post"
+*   action="about:blank"
+*   target="_blank"
+* >
+*   <sigvelo-file-input name="files" label="Select a file"></sigvelo-file-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Upload</sigvelo-button>
+* </form>
+*
+* <script>
+*   const form = document.getElementById('file-input__uploading');
+*
+*   form.addEventListener('submit', event => {
+*     event.preventDefault();
+*
+*     const formData = new FormData(form);
+*     console.log(...formData.values());
+*   });
+* <\/script>
+* ```
+*
+* @example Working with files
+* Use the `files` property to get an array of selected files. Note the use of an array instead of a `FileList`, which allows you to add, modify, and remove files more easily than a native file input.
+*
+* Try selecting a few files and then clicking each button.
+*
+* ```html
+* <sigvelo-file-input
+*   id="file-input__accessing"
+*   name="files"
+*   label="Select some files"
+*   description="Files must be 20MB or less"
+*   multiple
+* ></sigvelo-file-input>
+* <br>
+* <sigvelo-button type="submit">Reverse</sigvelo-button>
+* <sigvelo-button type="submit">Clear</sigvelo-button>
+*
+* <script>
+*   const fileInput = document.getElementById('file-input__accessing');
+*   const reverseButton = fileInput.nextElementSibling.nextElementSibling;
+*   const clearButton = reverseButton.nextElementSibling;
+*
+*   // Reverse
+*   reverseButton.addEventListener('click', event => {
+*     fileInput.files = fileInput.files.toReversed();
+*   });
+*
+*   // Clear
+*   clearButton.addEventListener('click', event => {
+*     fileInput.files = [];
+*   });
+* <\/script>
+* ```
+*
+* **Warning:** The `files` property must be reassigned, not mutated! Avoid using functions that mutate the array, such as [`reverse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) and [`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), because they won't trigger an update.
+*
+* @example Accepting multiple files
+* Add the `multiple` attribute to allow the file input to accept more than one file. If the user drops a folder, all files within it will be added to the file input.
+*
+* ```html
+* <sigvelo-file-input
+*   name="files"
+*   label="Select the files you want to upload"
+*   multiple
+* >
+* </sigvelo-file-input>
+* ```
+*
+* @example Accepting file types
+* To limit the file input to certain file types, set the `accept` attribute to a comma-separated string of unique file type specifiers.
+*
+* ```html
+* <sigvelo-file-input
+*   name="file"
+*   label="Upload a picture of your cat"
+*   accept="image/jpeg, image/png, image/gif, image/webp"
+* >
+* </sigvelo-file-input>
+* ```
+*
+* @example Changing the size
+* ```html
+* <sigvelo-file-input size="xs" name="xs" label="Extra small"></sigvelo-file-input><br>
+* <sigvelo-file-input size="sm" name="sm" label="Small"></sigvelo-file-input><br>
+* <sigvelo-file-input size="md" name="md" label="Medium"></sigvelo-file-input><br>
+* <sigvelo-file-input size="lg" name="lg" label="Large"></sigvelo-file-input><br>
+* <sigvelo-file-input size="xl" name="xl" label="Extra large"></sigvelo-file-input>
+* ```
+*
+* @example Custom dropzone content
+* Use the `dropzone` slot to customize what appears inside the dropzone.
+*
+* ```html
+* <sigvelo-file-input name="files" label="Upload a file" multiple>
+*   <div slot="dropzone">
+*     <sigvelo-icon name="cloud-upload" style="font-size: 2rem;"></sigvelo-icon>
+*     <br>
+*     Choose some files to send to the cloud
+*   </div>
+* </sigvelo-file-input>
+* ```
+*
+* @example Button-only file inputs
+* Button-only file inputs aren't supported, but you can achieve this pattern with a button, a native `<input type="file">`, and a bit of JavaScript. You can use the `sigvelo-vh` utility class to hide the input.
+*
+* ```html
+* <sigvelo-button id="file-input__button-only">Select files</sigvelo-button>
+* <input class="sigvelo-vh" type="file" name="file">
+*
+* <script>
+*   const button = document.getElementById('file-input__button-only');
+*   const fileInput = button.nextElementSibling;
+*
+*   // Open the system file browser when the button is clicked
+*   button.addEventListener('click', () => {
+*     fileInput.click();
+*   });
+*
+*   // Listen for files to be selected
+*   fileInput.addEventListener('change', () => {
+*     // Do something with the files
+*     console.log(...fileInput.files);
+*
+*     // Reset the input
+*     fileInput.value = '';
+*   });
+* <\/script>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the user has selected a file.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the file input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="file-input__custom-validation">
+*   <sigvelo-file-input
+*     name="file"
+*     label="Select a file"
+*     required
+*   ></sigvelo-file-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('file-input__custom-validation');
+*   const fileInput = form.querySelector('sigvelo-file-input');
+*
+*   fileInput.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid file inputs using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="file-input__validation-pseudo">
+*   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .file-input__validation-pseudo {
+*     sigvelo-file-input:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-file-input:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="file-input__validation-custom">
+*   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .file-input__validation-custom {
+*     sigvelo-file-input:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-file-input:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloFileInput = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.isDragging = false;
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.files = [];
+		this.disabled = false;
+		this.accept = false;
+		this.multiple = false;
+		this.size = "md";
+		this.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			file_input_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.fileInput;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("files")) {
+			this.customStates.set("blank", this.files.length === 0);
+			this.fileInput.files = this.getFileList();
+			this.fileInput.setAttribute("aria-hidden", "true");
+			this.fileInput.removeAttribute("aria-hidden");
+			this.updateFormValue();
+		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.files = [];
+	}
+	/** Converts the `this.files` array into a `FileList` object so the `<input type="file">` can be updated. */
+	getFileList() {
+		const dt = new DataTransfer();
+		for (const file of this.files) dt.items.add(file);
+		return dt.files;
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleDragEnter(event) {
+		event.preventDefault();
+		this.isDragging = true;
+	}
+	handleDragLeave(event) {
+		if (event.relatedTarget === this.dropzone) {
+			event.stopPropagation();
+			event.preventDefault();
+		}
+		event.preventDefault();
+		this.isDragging = false;
+	}
+	handleDragOver(event) {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "copy";
+	}
+	handleDrop(event) {
+		event.preventDefault();
+		this.isDragging = false;
+		this.hadUserInteraction = true;
+		const entryQueue = [];
+		const filesToAdd = [];
+		const items = event.dataTransfer?.items;
+		if (!items) return;
+		for (let i = 0; i < items.length; i++) if (items[i].kind === "file") {
+			const entry = items[i].webkitGetAsEntry();
+			if (entry) entryQueue.push(entry);
+		}
+		const processQueue = async () => {
+			while (entryQueue.length > 0) {
+				if (!this.multiple && filesToAdd.length > 0) break;
+				const currentEntry = entryQueue.shift();
+				if (currentEntry.isFile) await new Promise((resolve) => {
+					currentEntry.file((file) => {
+						filesToAdd.push(file);
+						resolve();
+					});
+				});
+				else if (currentEntry.isDirectory) {
+					const reader = currentEntry.createReader();
+					let entries = [];
+					do {
+						entries = await new Promise((resolve) => {
+							reader.readEntries((results) => resolve(results));
+						});
+						entryQueue.unshift(...entries);
+					} while (entries.length > 0);
+				}
+			}
+			if (this.multiple) this.files = this.files.concat(filesToAdd);
+			else if (filesToAdd.length > 0) this.files = [filesToAdd[0]];
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new SigveloChangeEvent());
+		};
+		processQueue();
+	}
+	handleFileInput() {
+		this.hadUserInteraction = true;
+		if (this.fileInput.files) if (this.multiple) this.files = this.files.concat([...this.fileInput.files]);
+		else this.files = [this.fileInput.files[0]];
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new SigveloChangeEvent());
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleRemoveClick(_, indexToRemove) {
+		this.files = this.files.filter((__, index) => index !== indexToRemove);
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new SigveloChangeEvent());
+	}
+	/** Determines if a File object is an image type the browser can render. */
+	isImage(file) {
+		return [
+			"image/apng",
+			"image/avif",
+			"image/gif",
+			"image/jpeg",
+			"image/png",
+			"image/svg+xml",
+			"image/webp"
+		].includes(file.type);
+	}
+	/** Returns a system icon name based on the provided mime type. */
+	mimeTypeToIconName(mimeType) {
+		if ([
+			"application/x-freearc",
+			"application/x-bzip",
+			"application/x-bzip2",
+			"application/gzip",
+			"application/java-archive",
+			"application/vnd.rar",
+			"application/x-tar",
+			"application/zip",
+			"application/x-zip-compressed",
+			"application/x-7z-compressed"
+		].includes(mimeType)) return "file-zip";
+		if (mimeType.startsWith("audio")) return "music";
+		if (mimeType.startsWith("image")) return "photo";
+		if (mimeType.startsWith("video")) return "video";
+		return "file";
+	}
+	/** Formats a byte value into a human-readable string (e.g. "1.2 MB"). */
+	#formatBytes(bytes) {
+		const units = [
+			"B",
+			"KB",
+			"MB",
+			"GB",
+			"TB"
+		];
+		let i = 0;
+		let value = bytes;
+		while (value >= 1e3 && i < units.length - 1) {
+			value /= 1e3;
+			i++;
+		}
+		return `${i === 0 ? value : value.toFixed(1)} ${units[i]}`;
+	}
+	/** Updates the form value based on this.files. Call this after adding or removing files to/from this.files. */
+	updateFormValue() {
+		const formData = new FormData();
+		this.files.forEach((file) => formData.append(this.name, file));
+		this.internals.setFormValue(formData);
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const hasMissingValue = this.required && this.files.length === 0;
+		const validationMessage = hasCustomValidity ? this.getCustomValidity() : VALIDATION_MESSAGE;
+		const flags = {
+			customError: hasCustomValidity,
+			valueMissing: hasMissingValue
+		};
+		this.isInvalid = hasCustomValidity ? true : hasMissingValue;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      ${hasLabel ? html`
+            <label id="label" part="label" for="file-input">
+              <slot name="label">${this.label}</slot>
+            </label>
+          ` : nothing}
+      ${hasDescription ? html`
+            <div id="description" part="description">
+              <slot name="description">${this.description}</slot>
+            </div>
+          ` : nothing}
+
+      <label
+        id="dropzone"
+        part="dropzone"
+        class="${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			disabled: this.disabled,
+			dragging: this.isDragging
+		})}"
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @dragenter=${this.handleDragEnter}
+        @dragleave=${this.handleDragLeave}
+        @dragover=${this.handleDragOver}
+        @drop=${this.handleDrop}
+      >
+        <slot name="dropzone">
+          <sigvelo-icon library="system" name="upload"></sigvelo-icon>
+          <br />
+          ${this.multiple ? this.localize.term("dragFilesHereOrChooseFromFolder") : this.localize.term("dragFileHereOrChooseFromFolder")}
+        </slot>
+
+        <input
+          id="file-input"
+          type="file"
+          accept=${ifDefined(this.accept)}
+          ?multiple=${this.multiple}
+          ?required=${this.required}
+          aria-label=${!hasLabel ? this.multiple ? "Choose files" : "Choose file" : nothing}
+          aria-describedby=${hasDescription ? "description" : nothing}
+          @input=${this.handleFileInput}
+        />
+      </label>
+
+      <div
+        part="file-list"
+        id="file-list"
+        class="${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			disabled: this.disabled,
+			dragging: this.isDragging
+		})}"
+      >
+        ${this.files.map((file, index) => {
+			const isImage = this.isImage(file);
+			const iconName = this.mimeTypeToIconName(file.type);
+			return html`
+            <div part="file" class="file">
+              <span part="file-thumbnail" class="file-thumbnail">
+                ${isImage ? html`<img
+                      part="file-image"
+                      src=${URL.createObjectURL(file)}
+                      alt=""
+                      aria-hidden="true"
+                    />` : html`
+                      <sigvelo-icon
+                        part="file-icon"
+                        exportparts="svg:file-icon__svg"
+                        library="system"
+                        name="${iconName}"
+                      ></sigvelo-icon>
+                    `}
+              </span>
+              <div class="file-details">
+                <span class="file-name">${file.name}</span>
+                <small class="file-size"> ${this.#formatBytes(file.size)} </small>
+              </div>
+              <div class="file-actions">
+                <sigvelo-button
+                  part="file-remove-button"
+                  exportparts="button:file-remove-button__button"
+                  class="file-remove"
+                  name="x"
+                  variant="ghost"
+                  icon-label=${this.localize.term("remove")}
+                  size=${this.size}
+                  @click=${(event) => this.handleRemoveClick(event, index)}
+                >
+                  <sigvelo-icon library="system" name="x"></sigvelo-icon>
+                </sigvelo-button>
+              </div>
+            </div>
+          `;
+		})}
+      </div>
+    `;
+	}
+};
+__decorate([query("#dropzone")], SigveloFileInput.prototype, "dropzone", void 0);
+__decorate([query("#file-input")], SigveloFileInput.prototype, "fileInput", void 0);
+__decorate([state()], SigveloFileInput.prototype, "isDragging", void 0);
+__decorate([state()], SigveloFileInput.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloFileInput.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloFileInput.prototype, "wasSubmitted", void 0);
+__decorate([state()], SigveloFileInput.prototype, "files", void 0);
+__decorate([property()], SigveloFileInput.prototype, "label", void 0);
+__decorate([property()], SigveloFileInput.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloFileInput.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloFileInput.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], SigveloFileInput.prototype, "accept", void 0);
+__decorate([property({ type: Boolean })], SigveloFileInput.prototype, "multiple", void 0);
+__decorate([property({ reflect: true })], SigveloFileInput.prototype, "size", void 0);
+__decorate([property()], SigveloFileInput.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloFileInput.prototype, "required", void 0);
+document.addEventListener("dragover", (event) => event.preventDefault());
+document.addEventListener("dragleave", (event) => event.preventDefault());
+document.addEventListener("drop", (event) => event.preventDefault());
+customElements.define("sigvelo-file-input", SigveloFileInput);
+//#endregion
+export { SigveloFileInput as t };