@aarongustafson/form-dropzone 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Aaron Gustafson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,160 @@
-# Temporary Holding Version
+# `form-dropzone` Web Component
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/@aarongustafson/form-dropzone.svg)](https://www.npmjs.com/package/@aarongustafson/form-dropzone) [![Build Status](https://img.shields.io/github/actions/workflow/status/aarongustafson/form-dropzone/ci.yml?branch=main)](https://github.com/aarongustafson/form-dropzone/actions)
+
+A progressively enhanced file-field wrapper that adds a responsive drag-and-drop surface, accessible status announcements, and optional image previews.
+
+## Demo
+
+- [Live demo](https://aarongustafson.github.io/form-dropzone/demo/) ([source](./demo/index.html))
+- [esm.sh demo](https://aarongustafson.github.io/form-dropzone/demo/esm.html) ([source](./demo/esm.html))
+- [unpkg demo](https://aarongustafson.github.io/form-dropzone/demo/unpkg.html) ([source](./demo/unpkg.html))
+
+## Installation
+
+```bash
+npm install @aarongustafson/form-dropzone
+```
+
+Import the class and register it:
+
+```javascript
+import { FormDropzoneElement } from '@aarongustafson/form-dropzone';
+
+customElements.define('form-dropzone', FormDropzoneElement);
+```
+
+Or use the guarded definition helper:
+
+```javascript
+import {
+  defineFormDropzone,
+} from '@aarongustafson/form-dropzone/define.js';
+
+defineFormDropzone();
+```
+
+Importing `define.js` also attempts to register `<form-dropzone>` automatically in browser environments.
+
+## Usage
+
+Supply one `input[type="file"]` and its associated `label`. Both remain in Light DOM and provide a native fallback before the component upgrades or when drag-and-drop is unavailable.
+
+```html
+<form-dropzone>
+  <label for="attachments">Choose files</label>
+  <input
+    id="attachments"
+    name="attachments"
+    type="file"
+    accept=".pdf,image/*"
+    multiple
+  >
+</form-dropzone>
+```
+
+Clicking the non-interactive drop-zone surface opens the native picker. Dropped files are filtered using the input's comma-separated `accept` value, including file extensions, exact MIME types, and wildcard MIME groups. If `multiple` is absent, the first acceptable file is selected and later acceptable files are rejected. Mixed drops keep acceptable files and announce the rejected files.
+
+A successful drop replaces the input's existing `FileList`, then dispatches bubbling `input` and `change` events.
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `drop-label` | string | `Drop file(s) here` | Prompt inserted before the author label. |
+| `separator-label` | string | `or` | Text inserted between the prompt and label. |
+| `received-message` | string | `Received: {files}.` | Accepted-file announcement template. |
+| `rejected-type-message` | string | `Rejected because the file type is not accepted: {files}.` | `accept` rejection template. |
+| `rejected-multiple-message` | string | `Rejected because only one file is allowed: {files}.` | Single-file limit rejection template. |
+| `preview-images` | boolean | absent | Adds image previews for picker and drop selections. |
+
+Message templates support `{files}` (a comma-separated filename list) and `{count}`.
+
+```html
+<form-dropzone
+  drop-label="Déposez les fichiers ici"
+  separator-label="ou"
+  received-message="{count} fichier(s) reçu(s) : {files}."
+  rejected-type-message="Type de fichier refusé : {files}."
+  rejected-multiple-message="Un seul fichier est autorisé. Refusé : {files}."
+>
+  <label for="document">Choisir un fichier</label>
+  <input id="document" name="document" type="file" accept=".pdf">
+</form-dropzone>
+```
+
+Each attribute has a camel-cased JavaScript property: `dropLabel`, `separatorLabel`, `receivedMessage`, `rejectedTypeMessage`, `rejectedMultipleMessage`, and `previewImages`.
+
+## Image previews
+
+Add `preview-images` to preview selected image MIME types. Accepted non-image files remain selected but are not rendered.
+
+```html
+<form-dropzone preview-images>
+  <label for="photos">Choose photos</label>
+  <input id="photos" name="photos" type="file" accept="image/*" multiple>
+</form-dropzone>
+```
+
+Object URLs are revoked whenever previews are replaced, disabled, or disconnected. Previews are visual only and do not change form submission.
+
+## Styling
+
+The component injects low-specificity default styles once. Ordinary author selectors can override the centered layout:
+
+```css
+form-dropzone {
+  align-items: start;
+  min-block-size: 10rem;
+  text-align: start;
+}
+
+form-dropzone .form-dropzone__previews {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+```
+
+Stable Light DOM classes:
+
+- `.form-dropzone--enhanced`
+- `.form-dropzone--drag-active`
+- `.form-dropzone__prompt`
+- `.form-dropzone__separator`
+- `.form-dropzone__status`
+- `.form-dropzone__previews`
+- `.form-dropzone__preview`
+- `.form-dropzone__preview-image`
+- `.form-dropzone__preview-name`
+
+Preview items also expose the filename through `data-file-name`.
+
+## Accessibility and progressive enhancement
+
+- The author-provided label and file input remain the keyboard interaction.
+- The wrapper does not add a duplicate button role or tab stop.
+- Drop outcomes are announced through a generated polite, atomic status region.
+- Accepted, invalid-type, and excess-file outcomes can be localized independently.
+- Without the required drag-and-drop and assignable `FileList` APIs, the component does not mutate its children or add behavior.
+- Invalid markup is left unchanged and reported with a console warning.
+
+## Browser support
+
+The component requires Custom Elements, ES modules, HTML drag-and-drop file APIs, `DataTransfer`, and an assignable file input `files` property. Unsupported environments retain the original label and input.
+
+## Inspiration
+
+The drop-zone layout and interaction were inspired by Nikita Hlopov's article, [“Custom styled input type file”](https://nikitahl.com/custom-styled-input-type-file). Many thanks to Nikita for sharing their approach!
+
+## Development
+
+```bash
+npm install
+npm run test:run
+npm run test:coverage
+npm run lint
+npm run format
+```
+
+## License
+
+MIT © [Aaron Gustafson](https://www.aaron-gustafson.com/)

package/custom-elements.json

@@ -0,0 +1,107 @@
+{
+	"schemaVersion": "1.0.0",
+	"readme": "README.md",
+	"modules": [
+		{
+			"kind": "javascript-module",
+			"path": "form-dropzone.js",
+			"declarations": [
+				{
+					"kind": "class",
+					"description": "Progressively enhances an associated label and file input with a Light DOM drag-and-drop surface, accessible announcements, and optional image previews.",
+					"name": "FormDropzoneElement",
+					"members": [
+						{
+							"kind": "field",
+							"name": "dropLabel",
+							"type": { "text": "string" },
+							"attribute": "drop-label"
+						},
+						{
+							"kind": "field",
+							"name": "separatorLabel",
+							"type": { "text": "string" },
+							"attribute": "separator-label"
+						},
+						{
+							"kind": "field",
+							"name": "receivedMessage",
+							"type": { "text": "string" },
+							"attribute": "received-message"
+						},
+						{
+							"kind": "field",
+							"name": "rejectedTypeMessage",
+							"type": { "text": "string" },
+							"attribute": "rejected-type-message"
+						},
+						{
+							"kind": "field",
+							"name": "rejectedMultipleMessage",
+							"type": { "text": "string" },
+							"attribute": "rejected-multiple-message"
+						},
+						{
+							"kind": "field",
+							"name": "previewImages",
+							"type": { "text": "boolean" },
+							"attribute": "preview-images"
+						}
+					],
+					"events": [],
+					"attributes": [
+						{
+							"name": "drop-label",
+							"type": { "text": "string" },
+							"default": "\"Drop file(s) here\"",
+							"description": "Drop instruction inserted before the author-provided label."
+						},
+						{
+							"name": "separator-label",
+							"type": { "text": "string" },
+							"default": "\"or\"",
+							"description": "Text inserted between the drop instruction and label."
+						},
+						{
+							"name": "received-message",
+							"type": { "text": "string" },
+							"default": "\"Received: {files}.\"",
+							"description": "Live-region template for accepted files. Supports {files} and {count}."
+						},
+						{
+							"name": "rejected-type-message",
+							"type": { "text": "string" },
+							"default": "\"Rejected because the file type is not accepted: {files}.\"",
+							"description": "Live-region template for files rejected by accept. Supports {files} and {count}."
+						},
+						{
+							"name": "rejected-multiple-message",
+							"type": { "text": "string" },
+							"default": "\"Rejected because only one file is allowed: {files}.\"",
+							"description": "Live-region template for excess files on a single-file input. Supports {files} and {count}."
+						},
+						{
+							"name": "preview-images",
+							"type": { "text": "boolean" },
+							"default": "false",
+							"description": "Renders accepted image selections in a Light DOM preview grid."
+						}
+					],
+					"superclass": { "name": "HTMLElement" },
+					"tagName": "form-dropzone",
+					"customElement": true
+				}
+			],
+			"exports": [
+				{
+					"kind": "js",
+					"name": "FormDropzoneElement",
+					"declaration": {
+						"name": "FormDropzoneElement",
+						"module": "form-dropzone.js"
+					}
+				}
+			]
+		}
+	]
+}

package/define.js

@@ -0,0 +1,18 @@
+import { FormDropzoneElement } from './form-dropzone.js';
+
+export function defineFormDropzone(tagName = 'form-dropzone') {
+	const hasWindow = typeof window !== 'undefined';
+	const registry = hasWindow ? window.customElements : undefined;
+
+	if (!registry || typeof registry.define !== 'function') {
+		return false;
+	}
+
+	if (!registry.get(tagName)) {
+		registry.define(tagName, FormDropzoneElement);
+	}
+
+	return true;
+}
+
+defineFormDropzone();

package/form-dropzone.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Progressively enhances an associated label and file input with a Light DOM
+ * drag-and-drop surface, accessible announcements, and optional image previews.
+ *
+ * @element form-dropzone
+ */
+export class FormDropzoneElement extends HTMLElement {
+	static readonly observedAttributes: string[];
+
+	/**
+	 * Returns whether the browser supports the drag-and-drop file APIs required
+	 * by the component.
+	 */
+	static isSupported(): boolean;
+
+	constructor();
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	attributeChangedCallback(
+		name: string,
+		oldValue: string | null,
+		newValue: string | null,
+	): void;
+
+	get dropLabel(): string;
+	set dropLabel(value: string | null | undefined);
+
+	get separatorLabel(): string;
+	set separatorLabel(value: string | null | undefined);
+
+	get receivedMessage(): string;
+	set receivedMessage(value: string | null | undefined);
+
+	get rejectedTypeMessage(): string;
+	set rejectedTypeMessage(value: string | null | undefined);
+
+	get rejectedMultipleMessage(): string;
+	set rejectedMultipleMessage(value: string | null | undefined);
+
+	get previewImages(): boolean;
+	set previewImages(value: boolean);
+}

package/form-dropzone.js

@@ -0,0 +1,591 @@
+const GENERATED_ATTRIBUTE = 'data-form-dropzone-generated';
+const ENHANCED_CLASS = 'form-dropzone--enhanced';
+const STYLE_ID = 'form-dropzone-styles';
+
+const DEFAULTS = {
+	dropLabel: 'Drop file(s) here',
+	separatorLabel: 'or',
+	receivedMessage: 'Received: {files}.',
+	rejectedTypeMessage:
+		'Rejected because the file type is not accepted: {files}.',
+	rejectedMultipleMessage:
+		'Rejected because only one file is allowed: {files}.',
+};
+
+/**
+ * FormDropzoneElement - A file field wrapper that builds a customizable drop zone for users to drag files into a form.
+ *
+ * @element form-dropzone
+ *
+ * @attr {string} drop-label - Drop instruction shown before the file label
+ * @attr {string} separator-label - Text shown between the drop instruction and file label
+ * @attr {string} received-message - Announcement template for accepted files
+ * @attr {string} rejected-type-message - Announcement template for files rejected by accept
+ * @attr {string} rejected-multiple-message - Announcement template for excess files
+ * @attr {boolean} preview-images - Whether accepted images are previewed
+ */
+export class FormDropzoneElement extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			'drop-label',
+			'separator-label',
+			'received-message',
+			'rejected-type-message',
+			'rejected-multiple-message',
+			'preview-images',
+		];
+	}
+
+	static isSupported() {
+		if (
+			typeof DataTransfer !== 'function' ||
+			typeof DragEvent !== 'function'
+		) {
+			return false;
+		}
+
+		try {
+			const input = document.createElement('input');
+			input.type = 'file';
+			const transfer = new DataTransfer();
+			input.files = transfer.files;
+			return (
+				input.files !== null &&
+				typeof input.files.length === 'number' &&
+				typeof input.files[Symbol.iterator] === 'function'
+			);
+		} catch {
+			return false;
+		}
+	}
+
+	static injectStyles() {
+		if (document.getElementById(STYLE_ID)) {
+			return;
+		}
+
+		const style = document.createElement('style');
+		style.id = STYLE_ID;
+		style.textContent = `
+			:where(form-dropzone.form-dropzone--enhanced) {
+				align-items: center;
+				border: 2px dashed currentColor;
+				box-sizing: border-box;
+				cursor: pointer;
+				display: flex;
+				flex-direction: column;
+				gap: 0.75rem;
+				inline-size: 100%;
+				justify-content: center;
+				max-inline-size: 100%;
+				min-block-size: min(12rem, 50vh);
+				padding: clamp(1rem, 4vw, 2rem);
+				text-align: center;
+			}
+
+			:where(form-dropzone.form-dropzone--enhanced[hidden]) {
+				display: none;
+			}
+
+			:where(.form-dropzone__prompt) {
+				font-size: 1.25em;
+				font-weight: bold;
+			}
+
+			:where(form-dropzone.form-dropzone--drag-active) {
+				background: color-mix(in srgb, currentColor 8%, transparent);
+				border-style: solid;
+			}
+
+			:where(.form-dropzone__status) {
+				block-size: 1px;
+				clip: rect(0 0 0 0);
+				clip-path: inset(50%);
+				inline-size: 1px;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap;
+			}
+
+			:where(.form-dropzone__previews) {
+				display: grid;
+				gap: 1rem;
+				grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
+				inline-size: 100%;
+				list-style: none;
+				margin: 0;
+				padding: 0;
+			}
+
+			:where(.form-dropzone__preview) {
+				display: grid;
+				gap: 0.5rem;
+				min-inline-size: 0;
+			}
+
+			:where(.form-dropzone__preview-image) {
+				aspect-ratio: 1;
+				block-size: auto;
+				inline-size: 100%;
+				object-fit: cover;
+			}
+
+			:where(.form-dropzone__preview-name) {
+				overflow-wrap: anywhere;
+			}
+		`;
+		document.head.appendChild(style);
+	}
+
+	constructor() {
+		super();
+		this._input = null;
+		this._label = null;
+		this._prompt = null;
+		this._separator = null;
+		this._status = null;
+		this._previews = null;
+		this._previewUrls = [];
+		this._enhanced = false;
+		this._dragDepth = 0;
+		this._announcementToken = 0;
+		this._handleClick = this._handleClick.bind(this);
+		this._handleDragEnter = this._handleDragEnter.bind(this);
+		this._handleDragLeave = this._handleDragLeave.bind(this);
+		this._handleDragOver = FormDropzoneElement._handleDragOver;
+		this._handleDrop = this._handleDrop.bind(this);
+		this._handleInputChange = this._handleInputChange.bind(this);
+	}
+
+	connectedCallback() {
+		for (const property of [
+			'dropLabel',
+			'separatorLabel',
+			'receivedMessage',
+			'rejectedTypeMessage',
+			'rejectedMultipleMessage',
+			'previewImages',
+		]) {
+			this._upgradeProperty(property);
+		}
+
+		if (!FormDropzoneElement.isSupported()) {
+			return;
+		}
+
+		const inputs = this.querySelectorAll('input[type="file"]');
+		if (inputs.length !== 1) {
+			this._reportInvalidMarkup(
+				'Expected exactly one input[type="file"].',
+			);
+			return;
+		}
+
+		const input = inputs[0];
+		const label = Array.from(this.querySelectorAll('label')).find(
+			(candidate) =>
+				candidate.contains(input) ||
+				(Boolean(input.id) && candidate.htmlFor === input.id),
+		);
+
+		if (!label) {
+			this._reportInvalidMarkup(
+				'Expected a label associated with the file input.',
+			);
+			return;
+		}
+
+		this._input = input;
+		this._label = label;
+		this._enhance();
+	}
+
+	disconnectedCallback() {
+		this._teardown();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue || !this._enhanced) {
+			return;
+		}
+
+		if (name === 'drop-label' && this._prompt) {
+			this._prompt.textContent = this.dropLabel;
+		}
+		if (name === 'separator-label' && this._separator) {
+			this._separator.textContent = this.separatorLabel;
+		}
+		if (name === 'preview-images') {
+			this._syncPreviews();
+		}
+	}
+
+	get dropLabel() {
+		return this.getAttribute('drop-label') || DEFAULTS.dropLabel;
+	}
+
+	set dropLabel(value) {
+		this._setStringAttribute('drop-label', value);
+	}
+
+	get separatorLabel() {
+		return this.getAttribute('separator-label') || DEFAULTS.separatorLabel;
+	}
+
+	set separatorLabel(value) {
+		this._setStringAttribute('separator-label', value);
+	}
+
+	get receivedMessage() {
+		return (
+			this.getAttribute('received-message') || DEFAULTS.receivedMessage
+		);
+	}
+
+	set receivedMessage(value) {
+		this._setStringAttribute('received-message', value);
+	}
+
+	get rejectedTypeMessage() {
+		return (
+			this.getAttribute('rejected-type-message') ||
+			DEFAULTS.rejectedTypeMessage
+		);
+	}
+
+	set rejectedTypeMessage(value) {
+		this._setStringAttribute('rejected-type-message', value);
+	}
+
+	get rejectedMultipleMessage() {
+		return (
+			this.getAttribute('rejected-multiple-message') ||
+			DEFAULTS.rejectedMultipleMessage
+		);
+	}
+
+	set rejectedMultipleMessage(value) {
+		this._setStringAttribute('rejected-multiple-message', value);
+	}
+
+	get previewImages() {
+		return this.hasAttribute('preview-images');
+	}
+
+	set previewImages(value) {
+		this.toggleAttribute('preview-images', Boolean(value));
+	}
+
+	_enhance() {
+		if (this._enhanced) {
+			return;
+		}
+
+		FormDropzoneElement.injectStyles();
+
+		this._prompt = FormDropzoneElement._createGeneratedElement(
+			'span',
+			'form-dropzone__prompt',
+		);
+		this._prompt.textContent = this.dropLabel;
+		this._separator = FormDropzoneElement._createGeneratedElement(
+			'span',
+			'form-dropzone__separator',
+		);
+		this._separator.textContent = this.separatorLabel;
+		this._status = FormDropzoneElement._createGeneratedElement(
+			'span',
+			'form-dropzone__status',
+		);
+		this._status.setAttribute('role', 'status');
+		this._status.setAttribute('aria-live', 'polite');
+		this._status.setAttribute('aria-atomic', 'true');
+
+		this._label.before(this._prompt, this._separator);
+		this.appendChild(this._status);
+		this.classList.add(ENHANCED_CLASS);
+		this.addEventListener('click', this._handleClick);
+		this.addEventListener('dragenter', this._handleDragEnter);
+		this.addEventListener('dragleave', this._handleDragLeave);
+		this.addEventListener('dragover', this._handleDragOver);
+		this.addEventListener('drop', this._handleDrop);
+		this._input.addEventListener('change', this._handleInputChange);
+		this._enhanced = true;
+		this._syncPreviews();
+	}
+
+	_teardown() {
+		this.removeEventListener('click', this._handleClick);
+		this.removeEventListener('dragenter', this._handleDragEnter);
+		this.removeEventListener('dragleave', this._handleDragLeave);
+		this.removeEventListener('dragover', this._handleDragOver);
+		this.removeEventListener('drop', this._handleDrop);
+		this._input?.removeEventListener('change', this._handleInputChange);
+		this._removePreviews();
+		for (const element of this.querySelectorAll(
+			`[${GENERATED_ATTRIBUTE}]`,
+		)) {
+			element.remove();
+		}
+		this.classList.remove(ENHANCED_CLASS, 'form-dropzone--drag-active');
+		this._input = null;
+		this._label = null;
+		this._prompt = null;
+		this._separator = null;
+		this._status = null;
+		this._previews = null;
+		this._enhanced = false;
+		this._dragDepth = 0;
+		this._announcementToken += 1;
+	}
+
+	_handleInputChange() {
+		this._syncPreviews();
+	}
+
+	_handleClick(event) {
+		if (
+			event.defaultPrevented ||
+			!(event.target instanceof Element) ||
+			event.target.closest(
+				'input, label, button, a, select, textarea, [contenteditable]',
+			)
+		) {
+			return;
+		}
+
+		this._input.click();
+	}
+
+	_handleDragEnter(event) {
+		if (!FormDropzoneElement._hasFiles(event.dataTransfer)) {
+			return;
+		}
+
+		event.preventDefault();
+		this._dragDepth += 1;
+		this.classList.add('form-dropzone--drag-active');
+	}
+
+	_handleDragLeave(event) {
+		if (!FormDropzoneElement._hasFiles(event.dataTransfer)) {
+			return;
+		}
+
+		this._dragDepth = Math.max(0, this._dragDepth - 1);
+		if (this._dragDepth === 0) {
+			this.classList.remove('form-dropzone--drag-active');
+		}
+	}
+
+	static _handleDragOver(event) {
+		if (FormDropzoneElement._hasFiles(event.dataTransfer)) {
+			event.preventDefault();
+		}
+	}
+
+	_handleDrop(event) {
+		if (!FormDropzoneElement._hasFiles(event.dataTransfer)) {
+			return;
+		}
+
+		event.preventDefault();
+		this._dragDepth = 0;
+		this.classList.remove('form-dropzone--drag-active');
+
+		const accepted = [];
+		const rejectedType = [];
+		const rejectedMultiple = [];
+
+		for (const file of event.dataTransfer.files) {
+			if (!this._matchesAccept(file)) {
+				rejectedType.push(file);
+			} else if (!this._input.multiple && accepted.length > 0) {
+				rejectedMultiple.push(file);
+			} else {
+				accepted.push(file);
+			}
+		}
+
+		if (accepted.length === 0) {
+			this._announceDrop({
+				accepted,
+				rejectedType,
+				rejectedMultiple,
+			});
+			return;
+		}
+
+		const transfer = new DataTransfer();
+		for (const file of accepted) {
+			transfer.items.add(file);
+		}
+
+		try {
+			this._input.files = transfer.files;
+		} catch (error) {
+			console.error(
+				'form-dropzone: Unable to assign dropped files to the input.',
+				error,
+			);
+			return;
+		}
+
+		this._input.dispatchEvent(new Event('input', { bubbles: true }));
+		this._input.dispatchEvent(new Event('change', { bubbles: true }));
+		this._announceDrop({ accepted, rejectedType, rejectedMultiple });
+	}
+
+	static _hasFiles(dataTransfer) {
+		if (!dataTransfer) {
+			return false;
+		}
+
+		return (
+			Array.from(dataTransfer.types || []).includes('Files') ||
+			dataTransfer.files.length > 0
+		);
+	}
+
+	_matchesAccept(file) {
+		const accept = this._input.accept.trim();
+		if (!accept) {
+			return true;
+		}
+
+		const fileName = file.name.toLowerCase();
+		const fileType = file.type.toLowerCase();
+		return accept
+			.split(',')
+			.map((token) => token.trim().toLowerCase())
+			.filter(Boolean)
+			.some((token) => {
+				if (token.startsWith('.')) {
+					return fileName.endsWith(token);
+				}
+				if (token.endsWith('/*')) {
+					return fileType.startsWith(token.slice(0, -1));
+				}
+				return fileType === token;
+			});
+	}
+
+	_announceDrop({ accepted, rejectedType, rejectedMultiple }) {
+		const messages = [];
+		for (const [files, template] of [
+			[accepted, this.receivedMessage],
+			[rejectedType, this.rejectedTypeMessage],
+			[rejectedMultiple, this.rejectedMultipleMessage],
+		]) {
+			if (files.length > 0) {
+				messages.push(
+					FormDropzoneElement._formatMessage(template, files),
+				);
+			}
+		}
+
+		const status = this._status;
+		const announcementToken = ++this._announcementToken;
+		status.textContent = '';
+		queueMicrotask(() => {
+			if (
+				this._enhanced &&
+				this._status === status &&
+				this._announcementToken === announcementToken
+			) {
+				status.textContent = messages.join(' ');
+			}
+		});
+	}
+
+	static _formatMessage(template, files) {
+		return template
+			.replaceAll('{count}', String(files.length))
+			.replaceAll('{files}', files.map((file) => file.name).join(', '));
+	}
+
+	_syncPreviews() {
+		if (!this.previewImages) {
+			this._removePreviews();
+			return;
+		}
+
+		if (!this._previews) {
+			this._previews = FormDropzoneElement._createGeneratedElement(
+				'ul',
+				'form-dropzone__previews',
+			);
+			this._status.before(this._previews);
+		}
+
+		this._revokePreviewUrls();
+		this._previews.replaceChildren();
+
+		for (const file of this._input.files) {
+			if (!file.type.toLowerCase().startsWith('image/')) {
+				continue;
+			}
+
+			const url = URL.createObjectURL(file);
+			this._previewUrls.push(url);
+
+			const item = document.createElement('li');
+			item.className = 'form-dropzone__preview';
+			item.dataset.fileName = file.name;
+
+			const image = document.createElement('img');
+			image.className = 'form-dropzone__preview-image';
+			image.src = url;
+			image.alt = '';
+
+			const name = document.createElement('span');
+			name.className = 'form-dropzone__preview-name';
+			name.textContent = file.name;
+
+			item.append(image, name);
+			this._previews.appendChild(item);
+		}
+	}
+
+	_removePreviews() {
+		this._revokePreviewUrls();
+		this._previews?.remove();
+		this._previews = null;
+	}
+
+	_revokePreviewUrls() {
+		for (const url of this._previewUrls) {
+			URL.revokeObjectURL(url);
+		}
+		this._previewUrls = [];
+	}
+
+	static _createGeneratedElement(tagName, className) {
+		const element = document.createElement(tagName);
+		element.className = className;
+		element.setAttribute(GENERATED_ATTRIBUTE, '');
+		return element;
+	}
+
+	_setStringAttribute(name, value) {
+		if (value === null || value === undefined) {
+			this.removeAttribute(name);
+		} else {
+			this.setAttribute(name, String(value));
+		}
+	}
+
+	_upgradeProperty(property) {
+		if (!Object.prototype.hasOwnProperty.call(this, property)) {
+			return;
+		}
+
+		const value = this[property];
+		delete this[property];
+		this[property] = value;
+	}
+
+	_reportInvalidMarkup(message) {
+		console.warn(`form-dropzone: ${message}`, this);
+	}
+}

package/index.js

@@ -0,0 +1 @@
+export { FormDropzoneElement } from './form-dropzone.js';

package/package.json

@@ -1,6 +1,82 @@
 {
-  "name": "@aarongustafson/form-dropzone",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@aarongustafson/form-dropzone",
+	"version": "0.0.1",
+	"description": "A file field wrapper that builds a customizable drop zone for users to drag files into a form.",
+	"keywords": [
+		"html",
+		"custom element",
+		"web component"
+	],
+	"author": "Aaron Gustafson <aaron@easy-designs.net> (https://www.aaron-gustafson.com/)",
+	"license": "MIT",
+	"homepage": "https://github.com/aarongustafson/form-dropzone#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/aarongustafson/form-dropzone.git"
+	},
+	"bugs": {
+		"url": "https://github.com/aarongustafson/form-dropzone/issues"
+	},
+	"type": "module",
+	"main": "index.js",
+	"module": "form-dropzone.js",
+	"customElements": "custom-elements.json",
+	"types": "form-dropzone.d.ts",
+	"exports": {
+		".": {
+			"import": "./index.js",
+			"types": "./form-dropzone.d.ts"
+		},
+		"./form-dropzone.js": {
+			"types": "./form-dropzone.d.ts",
+			"import": "./form-dropzone.js"
+		},
+		"./define.js": {
+			"import": "./define.js"
+		},
+		"./custom-elements.json": "./custom-elements.json"
+	},
+	"files": [
+		"form-dropzone.js",
+		"form-dropzone.d.ts",
+		"define.js",
+		"index.js",
+		"custom-elements.json",
+		"README.md",
+		"LICENSE"
+	],
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"packageManager": "npm@11.15.0",
+	"scripts": {
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"test:run": "vitest run",
+		"test:coverage": "vitest run --coverage",
+		"lint": "npm run lint:eslint && npm run lint:prettier",
+		"format": "npm run format:eslint && npm run format:prettier",
+		"lint:eslint": "eslint .",
+		"format:eslint": "eslint . --fix",
+		"lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+		"format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+		"version": "node scripts/update-demo-versions.js && git add demo/esm.html",
+		"postversion": "git push --follow-tags"
+	},
+	"devDependencies": {
+		"@open-wc/eslint-config": "^13.0.0",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/user-event": "^14.6.1",
+		"@vitest/coverage-v8": "^4.1.7",
+		"@vitest/ui": "^4.1.7",
+		"eslint": "^9.39.4",
+		"eslint-config-prettier": "^10.1.8",
+		"happy-dom": "^20.9.0",
+		"marked": "16.4.1",
+		"prettier": "^3.8.3",
+		"vitest": "^4.1.7"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}