@fusion.dev/helix-headless 0.0.0-dev

package/dist/file-input/root/file-input-root.d.ts

@@ -0,0 +1,196 @@
+import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../tag/index.js';
+declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+/**
+ * @summary A control for choosing files, by pointer or by dropping them on it.
+ *
+ * @description
+ * **A real `<input type="file">`, kept and made invisible rather than
+ * replaced.** It is the only way to open a file picker: the dialog is a
+ * privileged action a script cannot start on its own, and it opens for a click
+ * on the input or on a `<label>` pointing at it. Every version of this component
+ * that draws its own button ends up calling `.click()` on a hidden input
+ * anyway, and then has two things a screen reader can find where there is one
+ * control.
+ *
+ * So the input stays, holds the label, the name, the validity and the focus,
+ * and the visible trigger is a `<label for>` rather than a button. A label is
+ * not focusable and does not need to be: the input is, and Enter and Space on it
+ * open the picker because that is what the platform does with a file input.
+ *
+ * **Dropping is why this is a component rather than an attribute.** A bare file
+ * input accepts a drop only on the input itself, which is invisible here, so the
+ * field is the drop target and it says when something is over it.
+ *
+ * **Files are not a value a consumer can hand back.** Every other control here
+ * takes the controlled and uncontrolled pair, and this one does not: a `FileList`
+ * cannot be constructed from markup, and a consumer writing `value` on a file
+ * input is the one thing browsers refuse outright, because a page that could
+ * name a file could read it. So this element owns what was chosen, announces it,
+ * and offers `clear()` for the one change a consumer can legitimately ask for.
+ *
+ * **The list under it is the control's own, not decoration.** A file input with
+ * files chosen reports "3 files" and nothing else, which is unusable for
+ * checking that the right ones were picked. The names are rendered, and each
+ * carries the way to take it back out.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases FileUpload, FilePicker, Dropzone, InputFile
+ * @documentation https://helix.fusion.dev/components/file-input
+ *
+ * @slot feedback - What is wrong with it.
+ * @slot hint - Help under the field.
+ * @slot trigger - What the reader presses to open the picker.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart control - The file input itself, which carries the label and validity.
+ * @csspart detail - Its name and its reading, stacked.
+ * @csspart feedback - What is wrong with it.
+ * @csspart field - The box that is pressed and dropped on.
+ * @csspart file - One chosen file.
+ * @csspart hint - Help under the field, while nothing is wrong.
+ * @csspart icon - A glyph this component draws.
+ * @csspart kind - What kind of file it is.
+ * @csspart kind-dismiss - The remove button, when `dismissible`.
+ * @csspart kind-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart kind-prefix - The category before the label.
+ * @csspart label - The question, over the field.
+ * @csspart list - The chosen files.
+ * @csspart meta - The row holding its size and kind.
+ * @csspart name - Its name.
+ * @csspart remove - The control that takes it back out.
+ * @csspart size - How big it is.
+ * @csspart size-dismiss - The remove button, when `dismissible`.
+ * @csspart size-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart size-prefix - The category before the label.
+ * @csspart trigger - The label that opens the picker.
+ */
+export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
+    protected readonly aria: AriaForwardController;
+    /**
+     * Which files the picker offers, as a native `accept` list.
+     */
+    accept: string;
+    /**
+     * Whether more than one file can be chosen.
+     */
+    multiple: boolean;
+    /**
+     * Which camera or microphone a mobile picker should offer, if any.
+     */
+    capture?: 'environment' | 'user';
+    /**
+     * What the trigger reads, where nothing is slotted into it.
+     */
+    triggerLabel: string;
+    /**
+     * Language tag the sizes are written in.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
+    /**
+     * What the control removing one file is called, per file.
+     */
+    removeLabel: string;
+    /**
+     * Whether something is being dragged over the field.
+     *
+     * State rather than a property: it is a fact about a gesture in progress and
+     * nothing a consumer sets. It reaches the stylesheet as `data-dropping` on an
+     * element in this shadow root, never on the host, which is markup a consumer
+     * rendered.
+     */
+    private dropping;
+    /**
+     * The files chosen, which is the element's own and never assigned.
+     *
+     * Read from the input rather than mirrored into a field. The input is what
+     * the picker filled and what a form submits, so a copy here could only ever
+     * disagree with it.
+     */
+    get files(): File[];
+    /**
+     * The input, or nothing where there is no tree to ask.
+     *
+     * The guard is for the server, whose element shim carries attributes but not
+     * traversal: `render` reads `files`, `files` reads this, and an unguarded
+     * `querySelector` threw before a single character of markup came out. Nothing
+     * is lost by answering `null` there, because a file only ever arrives through
+     * a reader and a server has never met one.
+     */
+    private get control();
+    /**
+     * Takes every file back out.
+     *
+     * The one change a consumer can ask for. Setting a `FileList` is refused by
+     * every browser for a reason worth keeping, but emptying one is not: nothing
+     * about the page learns anything it did not already have.
+     */
+    clear(): void;
+    /**
+     * Drops one file, by index.
+     *
+     * `removeAt` rather than `remove`, which is `Element`'s own and takes no
+     * arguments: shadowing it would break every caller who meant the node.
+     *
+     * Through `DataTransfer`, which is the only way to build a `FileList`: the
+     * type has no constructor and `input.files` takes nothing else. It is the same
+     * mechanism a drop uses, so a file put in by dragging and one put in by the
+     * picker come back out the same way.
+     */
+    removeAt(at: number): void;
+    /** Says what is now chosen, by name, and puts it in the form. */
+    private announce;
+    /**
+     * Reports the files and the validity the host stands behind.
+     *
+     * `FormData` rather than a string, because a file input submits the file
+     * itself and several of them under one name. The anchor on `setValidity` is
+     * the input, so the browser's own bubble points at something a reader can see
+     * rather than at a host with no text in it.
+     */
+    private sync;
+    private readonly handleChange;
+    private readonly handleDragOver;
+    private readonly handleDragLeave;
+    private readonly handleDrop;
+    private readonly handleRemove;
+    protected firstUpdated(changed: PropertyValues): void;
+    /** Puts focus on the input, the way a label pointing at one would. */
+    focus(options?: FocusOptions): void;
+    /** Empties it, which is what a form reset means for a file input. */
+    formResetCallback(): void;
+    /**
+     * What is known about a chosen file, as tags, behind a seam the styled tier
+     * can move.
+     *
+     * One method for both the size and the kind, because they are the same
+     * element saying two things and two methods would be two places to keep in
+     * step. Both parts are written out rather than passed in, and that is not
+     * style: a part name behind an interpolation is a part the manifest cannot
+     * see, so `check:selectors` reported the stylesheet as matching nothing the
+     * moment this took the name as an argument.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own,
+     * wrap this one, pass it a property the base does not know about, or leave it
+     * out, without reimplementing the whole template to do any of them. The tag is
+     * interpolated rather than written, so `tier` resolves it: this renders the
+     * headless element, and a styled subclass that sets `tier` renders the styled one
+     * from the same template.
+     */
+    protected renderMeta(file: File): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-file-input': HelixHeadlessFileInput;
+    }
+}
+export {};

package/dist/file-input/root/file-input-root.js

@@ -0,0 +1,488 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { AriaForwardController, customElement, drawIcon, HelixBeforeChangeEvent, HelixFormElement, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { trash } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import '../../tag/index.js';
+/**
+ * A file's size, at the largest unit that leaves a number worth reading.
+ *
+ * Binary steps, because that is what a file system reports and what the number
+ * beside it in a finder will say. One decimal place from kilobytes up and none
+ * for bytes: `1.2 MB` is the reading, `1.23 MB` is noise, and `1.5 bytes` is not
+ * a thing.
+ *
+ * `Intl.NumberFormat` for the number rather than `toFixed`, so a decimal comma
+ * lands where a decimal comma belongs. The unit is not localised with it: `MB`
+ * is written the same way in the places this ships, and `Intl`'s own byte units
+ * carry no scale to pick from.
+ */
+const size = (bytes, locale) => {
+    const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+    let value = bytes;
+    let step = 0;
+    while (value >= 1024 && step < units.length - 1) {
+        value /= 1024;
+        step += 1;
+    }
+    const written = new Intl.NumberFormat(locale || undefined, {
+        maximumFractionDigits: step === 0 ? 0 : 1,
+    }).format(value);
+    // One byte is a byte. The plural is only wrong at exactly one and it is the
+    // size an empty-ish file has, so it is the one a reader sees while testing.
+    const unit = step === 0 && value === 1 ? 'byte' : units[step];
+    return `${written} ${unit}`;
+};
+/**
+ * What kind of file it is, in the shortest honest form.
+ *
+ * The subtype of the MIME type, so `image/png` reads `PNG`, which is the word a
+ * reader already has for it. A browser leaves `type` empty for anything it does
+ * not recognize, so the extension is the fallback: it is what the name already
+ * shows, which makes it a poor label and a better one than nothing.
+ */
+const kind = (file) => {
+    const subtype = file.type.split('/')[1];
+    if (subtype) {
+        return subtype.replace(/^x-/, '').split('+')[0]?.toUpperCase() ?? 'File';
+    }
+    const extension = file.name.includes('.') ? file.name.split('.').pop() : '';
+    return extension ? extension.toUpperCase() : 'File';
+};
+/**
+ * @summary A control for choosing files, by pointer or by dropping them on it.
+ *
+ * @description
+ * **A real `<input type="file">`, kept and made invisible rather than
+ * replaced.** It is the only way to open a file picker: the dialog is a
+ * privileged action a script cannot start on its own, and it opens for a click
+ * on the input or on a `<label>` pointing at it. Every version of this component
+ * that draws its own button ends up calling `.click()` on a hidden input
+ * anyway, and then has two things a screen reader can find where there is one
+ * control.
+ *
+ * So the input stays, holds the label, the name, the validity and the focus,
+ * and the visible trigger is a `<label for>` rather than a button. A label is
+ * not focusable and does not need to be: the input is, and Enter and Space on it
+ * open the picker because that is what the platform does with a file input.
+ *
+ * **Dropping is why this is a component rather than an attribute.** A bare file
+ * input accepts a drop only on the input itself, which is invisible here, so the
+ * field is the drop target and it says when something is over it.
+ *
+ * **Files are not a value a consumer can hand back.** Every other control here
+ * takes the controlled and uncontrolled pair, and this one does not: a `FileList`
+ * cannot be constructed from markup, and a consumer writing `value` on a file
+ * input is the one thing browsers refuse outright, because a page that could
+ * name a file could read it. So this element owns what was chosen, announces it,
+ * and offers `clear()` for the one change a consumer can legitimately ask for.
+ *
+ * **The list under it is the control's own, not decoration.** A file input with
+ * files chosen reports "3 files" and nothing else, which is unusable for
+ * checking that the right ones were picked. The names are rendered, and each
+ * carries the way to take it back out.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases FileUpload, FilePicker, Dropzone, InputFile
+ * @documentation https://helix.fusion.dev/components/file-input
+ *
+ * @slot feedback - What is wrong with it.
+ * @slot hint - Help under the field.
+ * @slot trigger - What the reader presses to open the picker.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart control - The file input itself, which carries the label and validity.
+ * @csspart detail - Its name and its reading, stacked.
+ * @csspart feedback - What is wrong with it.
+ * @csspart field - The box that is pressed and dropped on.
+ * @csspart file - One chosen file.
+ * @csspart hint - Help under the field, while nothing is wrong.
+ * @csspart icon - A glyph this component draws.
+ * @csspart kind - What kind of file it is.
+ * @csspart kind-dismiss - The remove button, when `dismissible`.
+ * @csspart kind-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart kind-prefix - The category before the label.
+ * @csspart label - The question, over the field.
+ * @csspart list - The chosen files.
+ * @csspart meta - The row holding its size and kind.
+ * @csspart name - Its name.
+ * @csspart remove - The control that takes it back out.
+ * @csspart size - How big it is.
+ * @csspart size-dismiss - The remove button, when `dismissible`.
+ * @csspart size-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart size-prefix - The category before the label.
+ * @csspart trigger - The label that opens the picker.
+ */
+let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(HelixFormElement) {
+    constructor() {
+        super(...arguments);
+        /* A consumer's `aria-describedby` names ids in their own tree and the control
+           is in this shadow root, so the reference has to be carried down as an
+           element rather than copied as an id. See `AriaForwardController`: measured
+           in Chrome's own tree, the host held the description and the control the
+           reader is actually on was exposed without it. */
+        this.aria = new AriaForwardController(this, {
+            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+        });
+        /**
+         * Which files the picker offers, as a native `accept` list.
+         */
+        this.accept = '';
+        /**
+         * Whether more than one file can be chosen.
+         */
+        this.multiple = false;
+        /**
+         * What the trigger reads, where nothing is slotted into it.
+         */
+        this.triggerLabel = 'Choose files';
+        /**
+         * Language tag the sizes are written in.
+         *
+         * Absent uses the runtime's own.
+         */
+        this.locale = '';
+        /**
+         * What the control removing one file is called, per file.
+         */
+        this.removeLabel = 'Remove';
+        /**
+         * Whether something is being dragged over the field.
+         *
+         * State rather than a property: it is a fact about a gesture in progress and
+         * nothing a consumer sets. It reaches the stylesheet as `data-dropping` on an
+         * element in this shadow root, never on the host, which is markup a consumer
+         * rendered.
+         */
+        this.dropping = false;
+        this.handleChange = (event) => {
+            // The native `change` is relayed under this element's own name, so a
+            // consumer hears one event from one element rather than two from two.
+            event.stopPropagation();
+            this.announce();
+        };
+        /*
+         * Takes a drop, which a bare file input can only do on itself.
+         *
+         * The input is invisible here, so the field is the target and the files are
+         * put into the input afterwards: that keeps one source of truth, and it is
+         * what makes a dropped file and a picked file indistinguishable to a form.
+         *
+         * `preventDefault` on dragover as well as on drop, because without it the
+         * browser navigates to the file and the page is gone.
+         */
+        this.handleDragOver = (event) => {
+            if (this.isDisabled) {
+                return;
+            }
+            event.preventDefault();
+            this.dropping = true;
+        };
+        this.handleDragLeave = () => {
+            this.dropping = false;
+        };
+        this.handleDrop = (event) => {
+            this.dropping = false;
+            const control = this.control;
+            if (this.isDisabled || !control || !event.dataTransfer) {
+                return;
+            }
+            event.preventDefault();
+            const dropped = [...event.dataTransfer.files];
+            if (dropped.length === 0) {
+                return;
+            }
+            const keeping = new DataTransfer();
+            // A single-file control takes the last thing dropped, the way choosing
+            // again in the picker replaces rather than adds.
+            for (const file of this.multiple ? [...this.files, ...dropped] : dropped.slice(-1)) {
+                keeping.items.add(file);
+            }
+            control.files = keeping.files;
+            this.announce();
+        };
+        this.handleRemove = (event) => {
+            const at = Number(event.currentTarget.dataset.at);
+            if (Number.isFinite(at)) {
+                this.removeAt(at);
+            }
+        };
+    }
+    /**
+     * The files chosen, which is the element's own and never assigned.
+     *
+     * Read from the input rather than mirrored into a field. The input is what
+     * the picker filled and what a form submits, so a copy here could only ever
+     * disagree with it.
+     */
+    get files() {
+        return [...(this.control?.files ?? [])];
+    }
+    /**
+     * The input, or nothing where there is no tree to ask.
+     *
+     * The guard is for the server, whose element shim carries attributes but not
+     * traversal: `render` reads `files`, `files` reads this, and an unguarded
+     * `querySelector` threw before a single character of markup came out. Nothing
+     * is lost by answering `null` there, because a file only ever arrives through
+     * a reader and a server has never met one.
+     */
+    get control() {
+        if (typeof this.renderRoot?.querySelector !== 'function') {
+            return null;
+        }
+        return this.renderRoot.querySelector('[part="control"]');
+    }
+    /**
+     * Takes every file back out.
+     *
+     * The one change a consumer can ask for. Setting a `FileList` is refused by
+     * every browser for a reason worth keeping, but emptying one is not: nothing
+     * about the page learns anything it did not already have.
+     */
+    clear() {
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        control.value = '';
+        this.announce();
+    }
+    /**
+     * Drops one file, by index.
+     *
+     * `removeAt` rather than `remove`, which is `Element`'s own and takes no
+     * arguments: shadowing it would break every caller who meant the node.
+     *
+     * Through `DataTransfer`, which is the only way to build a `FileList`: the
+     * type has no constructor and `input.files` takes nothing else. It is the same
+     * mechanism a drop uses, so a file put in by dragging and one put in by the
+     * picker come back out the same way.
+     */
+    removeAt(at) {
+        const control = this.control;
+        if (!control || typeof DataTransfer === 'undefined') {
+            return;
+        }
+        const keeping = new DataTransfer();
+        for (const [index, file] of this.files.entries()) {
+            if (index !== at) {
+                keeping.items.add(file);
+            }
+        }
+        control.files = keeping.files;
+        this.announce();
+    }
+    /** Says what is now chosen, by name, and puts it in the form. */
+    announce() {
+        this.sync();
+        this.requestUpdate();
+        this.dispatchEvent(new HelixBeforeChangeEvent({
+            value: this.files.map((file) => file.name).join(', '),
+        }));
+        /* And under the platform's own names, which is what `onChange` and `onInput`
+           bind and what a native file input sends when the chosen files move: both,
+           in that order, the way every other control here does.
+    
+           `input` was declared and never sent until 27 Aug 2026. The only one a
+           consumer received was the inner `<input type="file">`'s own, composed out
+           of this shadow root, so the documented event did not exist and an
+           undocumented one arrived in its place. Found by sweeping every family
+           that renders a native control rather than every family the first pass
+           named. See 308. */
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+    }
+    /**
+     * Reports the files and the validity the host stands behind.
+     *
+     * `FormData` rather than a string, because a file input submits the file
+     * itself and several of them under one name. The anchor on `setValidity` is
+     * the input, so the browser's own bubble points at something a reader can see
+     * rather than at a host with no text in it.
+     */
+    sync() {
+        const data = new FormData();
+        if (this.name) {
+            for (const file of this.files) {
+                data.append(this.name, file);
+            }
+        }
+        /* **An empty one contributes no entry, and the native control contributes an
+           empty file.** Measured, one form holding both: `<input type="file"
+           name="nf">` with nothing chosen submits `nf=` carrying a `File` of zero
+           bytes and no name, and this submits nothing at all.
+    
+           Kept, as a decision rather than an omission. A phantom entry naming a file
+           that does not exist is a thing every server reading this form has to know
+           to discard, and the reason the platform sends one is compatibility with
+           form encodings that predate `FormData` rather than anything a reader wants.
+           `check:platform-fidelity` excuses `value` on this family already, for the
+           neighbouring reason that the native one is `C:\fakepath\name`; this is
+           the same component declining to reproduce a lie, one level down. Recorded
+           here because a divergence nobody wrote down is indistinguishable from one
+           nobody noticed. */
+        this.internals.setFormValue(data);
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        this.internals.setValidity(control.validity, control.validationMessage, control);
+        this.refreshFeedback();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        // Whatever the markup arrived with, so a form knows before anything is
+        // touched. `willUpdate` is too early: there is no control to read yet.
+        this.sync();
+    }
+    /** Puts focus on the input, the way a label pointing at one would. */
+    focus(options) {
+        this.control?.focus(options);
+    }
+    /** Empties it, which is what a form reset means for a file input. */
+    formResetCallback() {
+        if (this.control) {
+            restoreValue(this.control, '');
+        }
+        this.announce();
+    }
+    /*
+     * The hint goes under the field, and the list after both.
+     *
+     * It was under the list, on the reading that the field and its files are one
+     * block and the hint describes the block. Three things say otherwise.
+     *
+     * A hint is instruction for the next action rather than a note about the
+     * result: "up to 10MB each" is a rule for what may be added, and a rule read
+     * after the outcome is a rule read too late.
+     *
+     * Its position has to be stable, and this is the one that decides it. Under
+     * the list the hint travels down the page as files are added, a card's height
+     * at a time, so the one piece of guidance the control carries is never twice
+     * in the same place. Every other field here puts it immediately under the
+     * control, and a reader who has learned where to look should not have to
+     * relearn it for this one.
+     *
+     * And feedback stands in place of the hint rather than beside it, so wherever
+     * the hint is, an error is. An error about a file that was refused belongs
+     * against the control that refused it, not below a list of the ones that were
+     * not.
+     */
+    /**
+     * What is known about a chosen file, as tags, behind a seam the styled tier
+     * can move.
+     *
+     * One method for both the size and the kind, because they are the same
+     * element saying two things and two methods would be two places to keep in
+     * step. Both parts are written out rather than passed in, and that is not
+     * style: a part name behind an interpolation is a part the manifest cannot
+     * see, so `check:selectors` reported the stylesheet as matching nothing the
+     * moment this took the name as an argument.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own,
+     * wrap this one, pass it a property the base does not know about, or leave it
+     * out, without reimplementing the whole template to do any of them. The tag is
+     * interpolated rather than written, so `tier` resolves it: this renders the
+     * headless element, and a styled subclass that sets `tier` renders the styled one
+     * from the same template.
+     */
+    renderMeta(file) {
+        return html `<${this.tag('tag')} part="size"
+    exportparts="dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, prefix: size-prefix">${size(file.size, this.locale)}</${this.tag('tag')}>
+      <${this.tag('tag')}
+        part="kind"
+      exportparts="dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, prefix: kind-prefix">${kind(file)}</${this.tag('tag')}>`;
+    }
+    render() {
+        const files = this.files;
+        return html `${this.renderLabel()}
+      <div
+        part="field"
+        ?data-dropping=${this.dropping}
+        @dragleave=${this.handleDragLeave}
+        @dragover=${this.handleDragOver}
+        @drop=${this.handleDrop}
+      >
+        <input
+          part="control"
+          id="control"
+          type="file"
+          accept=${this.accept || nothing}
+          capture=${this.capture ?? nothing}
+          name=${this.name || nothing}
+          aria-describedby=${this.describedBy ?? nothing}
+          ?disabled=${this.isDisabled}
+          ?multiple=${this.multiple}
+          ?required=${this.required}
+          @change=${this.handleChange}
+          @input=${this.stopInner}
+        />
+        <label part="trigger" for="control">
+          <slot name="trigger">${this.triggerLabel}</slot>
+        </label>
+      </div>
+      <!-- The hint sits under the field and the list goes last, which is the
+           one ordering decision this component makes differently from the way it
+           reads. Reasoning below the template. -->
+      ${this.renderHint()}${this.renderFeedback()}
+      ${files.length === 0
+            ? nothing
+            : html `<ul part="list">
+              ${files.map((file, at) => html `<li part="file">
+                  <span part="detail">
+                    <span part="name">${file.name}</span>
+                    <span part="meta">
+                      ${this.renderMeta(file)}
+                    </span>
+                  </span>
+                  <button
+                    part="remove"
+                    type="button"
+                    aria-label=${`${this.removeLabel} ${file.name}`}
+                    data-at=${at}
+                    ?disabled=${this.isDisabled}
+                    @click=${this.handleRemove}
+                  >
+                    ${drawIcon(trash)}
+                  </button>
+                </li>`)}
+            </ul>`}`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessFileInput.prototype, "multiple", void 0);
+__decorate([
+    property()
+], HelixHeadlessFileInput.prototype, "capture", void 0);
+__decorate([
+    property({ attribute: 'trigger-label' })
+], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFileInput.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: 'remove-label' })
+], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessFileInput.prototype, "dropping", void 0);
+HelixHeadlessFileInput = __decorate([
+    customElement('helix-headless-file-input')
+], HelixHeadlessFileInput);
+export { HelixHeadlessFileInput };

package/dist/format-date/index.d.ts

@@ -0,0 +1 @@
+export { HelixHeadlessFormatDate } from './root/format-date-root.js';

package/dist/format-date/index.js

@@ -0,0 +1 @@
+export { HelixHeadlessFormatDate } from './root/format-date-root.js';