@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/element-events.generated.js

@@ -4,6 +4,7 @@ registerElementEvents({
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
         'helix-before-reconnect',
@@ -19,9 +20,9 @@ registerElementEvents({
         'helix-remove',
         'helix-select',
     ],
-    'helix-headless-carousel': ['helix-select'],
-    'helix-headless-chat': ['helix-before-pin', 'helix-history', 'helix-send'],
-    'helix-headless-chat-composer': ['helix-send'],
+    'helix-headless-carousel': ['helix-activate', 'helix-select'],
+    'helix-headless-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
+    'helix-headless-chat-composer': ['helix-send', 'input'],
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -51,14 +52,25 @@ registerElementEvents({
         'input',
         'toggle',
     ],
-    'helix-headless-command': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-headless-copy-button': ['helix-copy'],
+    'helix-headless-command': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
+    'helix-headless-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-headless-data-table': [
+        'helix-activate',
         'helix-filter',
+        'helix-filtered',
         'helix-navigate',
         'helix-reorder',
+        'helix-reordered',
         'helix-select',
+        'helix-selected',
         'helix-sort',
+        'helix-sorted',
     ],
     'helix-headless-date-input': [
         'change',
@@ -73,7 +85,7 @@ registerElementEvents({
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drilldown': ['helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
-    'helix-headless-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-headless-filter-chip': ['helix-dismiss'],
     'helix-headless-filter-input': [
         'change',
@@ -99,9 +111,11 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-headless-heatmap': ['helix-resize'],
+    'helix-headless-icon': ['error', 'load'],
     'helix-headless-image': ['error', 'load'],
-    'helix-headless-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-kbd': ['helix-shortcut'],
+    'helix-headless-legend': ['change', 'helix-before-change'],
     'helix-headless-lightbox': [
         'close',
         'helix-activate',
@@ -112,7 +126,10 @@ registerElementEvents({
     ],
     'helix-headless-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
     'helix-headless-map': [
+        'change',
         'helix-activate',
+        'helix-before-change',
+        'helix-before-toggle',
         'helix-map-cluster',
         'helix-map-pan',
         'helix-map-part-change',
@@ -133,26 +150,28 @@ registerElementEvents({
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-headless-menu-item': ['helix-select'],
+    'helix-headless-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-headless-notification': ['helix-dismiss', 'helix-read'],
-    'helix-headless-notification-group': ['helix-before-close', 'helix-before-open'],
+    'helix-headless-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-notifications': ['helix-dismiss', 'helix-read'],
     'helix-headless-number-input': ['change', 'helix-before-change', 'input'],
     'helix-headless-object-inspector': ['helix-copy'],
     'helix-headless-option': ['helix-select'],
     'helix-headless-outline': ['helix-activate'],
-    'helix-headless-pagination': ['helix-navigate'],
-    'helix-headless-pagination-size': ['helix-before-change'],
+    'helix-headless-pagination': ['helix-activate', 'helix-navigate'],
+    'helix-headless-pagination-size': ['change', 'helix-before-change', 'input'],
     'helix-headless-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],
     'helix-headless-popover': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-headless-qr-code': ['error'],
     'helix-headless-radio': ['helix-select'],
     'helix-headless-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-headless-rating': ['change', 'helix-before-change', 'input'],
+    'helix-headless-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-select': [
         'change',
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-filter',
         'input',
         'toggle',
     ],
@@ -164,14 +183,21 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-speed-dial-item': ['helix-select'],
-    'helix-headless-splitter': ['helix-before-collapse', 'helix-before-resize'],
+    'helix-headless-splitter': [
+        'helix-before-collapse',
+        'helix-before-resize',
+        'helix-collapse',
+        'helix-resized',
+    ],
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-tab': ['helix-select'],
+    'helix-headless-table': ['helix-sort'],
     'helix-headless-table-column': ['helix-before-resize'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
+    'helix-headless-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
     'helix-headless-textarea': ['change', 'helix-before-change', 'input'],
     'helix-headless-time-input': [
         'change',
@@ -188,10 +214,13 @@ registerElementEvents({
     'helix-headless-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-headless-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-tour': [
+        'helix-activate',
         'helix-before-activate',
         'helix-before-close',
+        'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
     'helix-headless-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],

package/dist/empty/root/empty-root.d.ts

@@ -25,7 +25,7 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The message: why the region is empty, and what to do about it.
  * @slot actions - The action that would put something in the region.
- * @slot heading - The heading, which names what is missing.
+ * @slot heading - The heading, which names what is missing. Slot a heading element, such as an `<h3>`, so a reader can find it in the page's outline.
  * @slot icon - An icon above the heading.
  *
  * @csspart live - A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.

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

@@ -16,6 +16,12 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * visible trigger is a `<label for>`. The label is not focusable. The input is,
  * and Enter and Space on it open the picker.
  *
+ * Files arrive from the picker, a drop, or a paste onto the field, and each one
+ * is screened: `accept`, `max-file-size`, `max-files` and your own `validate`
+ * can refuse it. A refused file is left out, `helix-reject` lists each one with
+ * its reason, and a reader hears `rejected-text` with the names filled in.
+ * `directory` asks the picker for a folder.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -24,10 +30,12 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  *
  * @slot feedback - The message that says what is wrong with the chosen files.
  * @slot hint - Help under the field.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot trigger - The content that opens the picker when pressed.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the chosen files change, with their names, and cancelable. Canceling it keeps the files the field had, even when the browser has already written a new pick.
+ * @event {HelixRejectEvent} helix-reject - Fired when files arrive and some are left out. `detail.files` lists each with its `reason`: `type`, `size`, `count` or `invalid`, and your `validate` message.
  * @event {Event} input - Fired after the value changes.
  *
  * @csspart control - The file input itself, which carries the label and validity.
@@ -37,19 +45,24 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart file - One chosen file.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart kind - A file's type.
+ * @csspart kind-cell - The grid cell around the tag, rendered only when the tag sits in a `Tag.Group`.
  * @csspart kind-dismiss - The remove button, when `dismissible`.
  * @csspart kind-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart kind-label - The label, trimmed to its capitals and baseline.
+ * @csspart kind-link - The link around the label, when the tag has an `href`.
  * @csspart kind-start - The category before the label.
  * @csspart label - The label above the field.
  * @csspart list - The chosen files.
+ * @csspart live - The live region that says `rejected-text` when files are refused. It is rendered from the first refusal.
  * @csspart meta - The row that holds a file's size and type.
  * @csspart name - A file's name.
  * @csspart remove - The control that removes a file.
  * @csspart size - A file's size.
+ * @csspart size-cell - The grid cell around the tag, rendered only when the tag sits in a `Tag.Group`.
  * @csspart size-dismiss - The remove button, when `dismissible`.
  * @csspart size-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart size-label - The label, trimmed to its capitals and baseline.
+ * @csspart size-link - The link around the label, when the tag has an `href`.
  * @csspart size-start - The category before the label.
  * @csspart trigger - The label that opens the picker.
  *
@@ -58,23 +71,45 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
     protected readonly aria: AriaForwardController;
     /**
-     * Which files the picker offers, as a native `accept` list.
+     * Which files the picker offers and a drop takes, as a native `accept` list.
+     *
+     * A dropped file the list does not name is left out, because the picker's
+     * filter is the only check the platform makes and a drop never meets it.
      */
     accept: string;
     /**
      * Which camera or microphone a mobile picker should offer, if any.
      */
     capture?: 'environment' | 'user';
+    /**
+     * Whether the picker chooses a folder, and the field takes every file in
+     * it. The platform's `webkitdirectory`.
+     */
+    directory: boolean;
     /**
      * Language tag the sizes are written in.
      *
      * Absent uses the runtime's own.
      */
     locale: string;
+    /**
+     * The most files the field holds, under `multiple`. Files past it are
+     * refused.
+     */
+    maxFiles?: number;
+    /**
+     * The most bytes one file may have. A larger one is refused.
+     */
+    maxFileSize?: number;
     /**
      * Whether more than one file can be chosen.
      */
     multiple: boolean;
+    /**
+     * What a reader hears when files are refused, with `{count}` and `{names}`
+     * filled in.
+     */
+    rejectedText: string;
     /**
      * The accessible name of the control that removes a file. `{name}` is
      * replaced with the file's name.
@@ -88,6 +123,22 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * The trigger's text when nothing is slotted into it.
      */
     triggerLabel: string;
+    /**
+     * Your own check on each arriving file, which returns why it is refused, or
+     * nothing to take it. A property, since a function cannot be an attribute.
+     */
+    validate?: (file: File) => string | null | undefined;
+    /** The live region, rendered from the first refusal. */
+    private readonly status;
+    /**
+     * Screens arriving files and commits what is taken, after the files the
+     * field keeps. Refused files are announced and said.
+     */
+    private take;
+    /** Sends `helix-reject` and says which files were left out. */
+    private refuse;
+    /** Takes files pasted onto the field, as a drop takes them. */
+    private readonly handlePaste;
     /**
      * Whether something is being dragged over the field.
      *
@@ -185,8 +236,21 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
     private readonly handleDragOver;
     private readonly handleDragLeave;
     private readonly handleDrop;
+    /**
+     * Removes a file and keeps focus in the field.
+     *
+     * The pressed button goes with its file, so focus moves to the file that took
+     * its place, or to the one before it, or to the input once the list is empty:
+     * left alone, it fell to the page's body.
+     */
     private readonly handleRemove;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Reports again on every update, so a new `name` or `required` reaches the
+     * form. Only a pick and the first render reported, so the form kept the old
+     * name and the old verdict.
+     */
+    protected updated(changed: PropertyValues): void;
     /** Moves focus to the native file input, as a label pointing at it would. */
     focus(options?: FocusOptions): void;
     /**

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

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, fillTemplate, HelixBeforeChangeEvent, HelixFormElement, MixinField, requestChange, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, StatusController, } 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 { screenFiles } from '../screen.js';
 import '../../tag/index.js';
 const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
 const size = (bytes, locale) => {
@@ -26,29 +27,41 @@ const size = (bytes, locale) => {
     return `${written} ${unit}`;
 };
 const kind = (file) => {
-    const subtype = file.type.split('/')[1];
-    if (subtype) {
-        return subtype.replace(/^x-/, '').split('+')[0]?.toUpperCase() ?? 'File';
+    const extension = /\.([a-z0-9]{1,6})$/i.exec(file.name)?.[1];
+    if (extension) {
+        return extension.toUpperCase();
     }
-    const extension = file.name.includes('.') ? file.name.split('.').pop() : '';
-    return extension ? extension.toUpperCase() : 'File';
+    const subtype = file.type.split('/')[1]?.replace(/^x-/, '').split('+')[0] ?? '';
+    return /^[a-z0-9]{1,6}$/i.test(subtype) ? subtype.toUpperCase() : 'File';
 };
 let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            named: () => this.labeled,
             target: () => this.partNamed('control'),
         });
         this.accept = '';
+        this.directory = false;
         this.locale = '';
         this.multiple = false;
+        this.rejectedText = 'Not added: {names}';
         this.removeLabel = 'Remove {name}';
         this.triggerLabel = 'Choose files';
+        this.status = new StatusController(this);
+        this.handlePaste = (event) => {
+            const pasted = [...(event.clipboardData?.files ?? [])];
+            if (this.isDisabled || pasted.length === 0) {
+                return;
+            }
+            event.preventDefault();
+            this.take(pasted, this.multiple ? this.files : []);
+        };
         this.dropping = false;
         this.committed = [];
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.commit(this.files);
+            this.take(this.files, [], true);
         };
         this.handleDragOver = (event) => {
             if (this.isDisabled) {
@@ -71,15 +84,44 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             if (dropped.length === 0) {
                 return;
             }
-            this.commit(this.multiple ? [...this.files, ...dropped] : dropped.slice(-1));
+            this.take(dropped, this.multiple ? this.files : []);
         };
         this.handleRemove = (event) => {
             const at = Number(event.currentTarget.dataset.at);
-            if (Number.isFinite(at)) {
-                this.removeAt(at);
+            if (!Number.isFinite(at)) {
+                return;
             }
+            this.removeAt(at);
+            this.updateComplete.then(() => {
+                const buttons = [...this.renderRoot.querySelectorAll('[part="remove"]')];
+                (buttons[Math.min(at, buttons.length - 1)] ?? this.control)?.focus();
+            });
         };
     }
+    take(arriving, keeping, picked = false) {
+        const { kept, refused } = screenFiles(arriving, keeping, {
+            accept: this.accept,
+            maxFileSize: this.maxFileSize,
+            maxFiles: this.maxFiles,
+            multiple: this.multiple || picked,
+            validate: this.validate,
+        });
+        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
+        if (picked || !(same(kept, this.committed) && same(kept, this.files))) {
+            this.commit(kept);
+        }
+        if (refused.length > 0) {
+            this.refuse(refused);
+        }
+    }
+    refuse(refused) {
+        this.dispatchEvent(new HelixRejectEvent({ files: refused }));
+        const words = fillTemplate(this.rejectedText, {
+            count: formatNumbers(this.lang)(refused.length),
+            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(refused.map((one) => one.file.name)),
+        });
+        this.status.say(words);
+    }
     get files() {
         return [...(this.control?.files ?? [])];
     }
@@ -152,6 +194,10 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.committed = this.files;
         this.sync();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.sync();
+    }
     focus(options) {
         this.control?.focus(options);
     }
@@ -164,10 +210,10 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"
-    exportparts="dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
+    exportparts="cell: size-cell, dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, link: size-link, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
       <${this.tag('tag')}
         part="kind"
-      exportparts="dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
+      exportparts="cell: kind-cell, dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, link: kind-link, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
     }
     render() {
         const files = this.files;
@@ -178,6 +224,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         @dragleave=${this.handleDragLeave}
         @dragover=${this.handleDragOver}
         @drop=${this.handleDrop}
+        @paste=${this.handlePaste}
       >
         <input
           part="control"
@@ -191,6 +238,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
           ?disabled=${this.isDisabled}
           ?multiple=${this.multiple}
           ?required=${this.required}
+          ?webkitdirectory=${this.directory}
           @change=${this.handleChange}
           @input=${this.stopInner}
         />
@@ -202,6 +250,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
            one ordering decision this component makes differently from the way it
            reads. Reasoning above renderMeta. -->
       ${this.renderHint()}${this.renderFeedback()}
+      ${drawStatus(this.status)}
       ${files.length === 0
             ? nothing
             : html `<ul part="list">
@@ -232,18 +281,33 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFileInput.prototype, "directory", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: 'max-files', type: Number })
+], HelixHeadlessFileInput.prototype, "maxFiles", void 0);
+__decorate([
+    property({ attribute: 'max-file-size', type: Number })
+], HelixHeadlessFileInput.prototype, "maxFileSize", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'rejected-text' })
+], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "validate", void 0);
 __decorate([
     state()
 ], HelixHeadlessFileInput.prototype, "dropping", void 0);

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

@@ -0,0 +1,35 @@
+import { type RefusedFile } from '@fusion.dev/helix-core';
+/**
+ * Which of the files arriving at a file field it takes, and why it refuses the
+ * rest: the rules `accept`, `max-file-size`, `max-files` and `validate` set.
+ * Zag's file upload screens a drop the same way and reports each refused file
+ * with its reason.
+ */
+export type { Refusal, RefusedFile } from '@fusion.dev/helix-core';
+/** The rules a field screens arriving files by. */
+export interface ScreenRules {
+    /** A native `accept` list. Empty takes every type. */
+    readonly accept: string;
+    /** The most bytes one file may have. */
+    readonly maxFileSize?: number | undefined;
+    /** The most files the field holds, counting the ones it has. */
+    readonly maxFiles?: number | undefined;
+    /** Whether the field holds more than one file. */
+    readonly multiple: boolean;
+    /** Your own check, which returns why a file is refused, or nothing. */
+    readonly validate?: ((file: File) => string | null | undefined) | undefined;
+}
+/**
+ * Whether a file is one `accept` lists: an extension, a type, or a family
+ * such as `image/*`, as the platform reads it.
+ */
+export declare const accepts: (file: File, accept: string) => boolean;
+/**
+ * Screens arriving files against the rules, given the files the field keeps.
+ * `kept` is what the field holds afterward: the files it keeps and the
+ * arrivals it took, or for a single-file field the last arrival it took.
+ */
+export declare const screenFiles: (arriving: File[], keeping: File[], rules: ScreenRules) => {
+    kept: File[];
+    refused: RefusedFile[];
+};

package/dist/file-input/screen.js

@@ -0,0 +1,49 @@
+import { commaList } from '@fusion.dev/helix-core';
+export const accepts = (file, accept) => {
+    const tokens = commaList(accept).map((token) => token.toLowerCase());
+    if (tokens.length === 0) {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some((token) => token.startsWith('.')
+        ? name.endsWith(token)
+        : token.endsWith('/*')
+            ? type.startsWith(token.slice(0, -1))
+            : type === token);
+};
+const refusal = (file, rules) => {
+    if (!accepts(file, rules.accept)) {
+        return { file, reason: 'type' };
+    }
+    if (rules.maxFileSize !== undefined && file.size > rules.maxFileSize) {
+        return { file, reason: 'size' };
+    }
+    const message = rules.validate?.(file);
+    return message ? { file, message, reason: 'invalid' } : undefined;
+};
+export const screenFiles = (arriving, keeping, rules) => {
+    const refused = [];
+    const taken = [];
+    for (const file of arriving) {
+        const refusedFor = refusal(file, rules);
+        if (refusedFor) {
+            refused.push(refusedFor);
+        }
+        else {
+            taken.push(file);
+        }
+    }
+    if (!rules.multiple) {
+        const last = taken.at(-1);
+        for (const file of taken.slice(0, -1)) {
+            refused.push({ file, reason: 'count' });
+        }
+        return { kept: last ? [last] : keeping.slice(0, 1), refused };
+    }
+    const room = rules.maxFiles === undefined ? taken.length : Math.max(0, rules.maxFiles - keeping.length);
+    for (const file of taken.slice(room)) {
+        refused.push({ file, reason: 'count' });
+    }
+    return { kept: [...keeping, ...taken.slice(0, room)], refused };
+};

package/dist/filter-input/menu/filter-menu.d.ts

@@ -151,6 +151,15 @@ export declare class HelixHeadlessFilterMenu extends HelixElement {
      * a filter is never left looking at a menu that says it took.
      */
     apply(field: string, values: readonly string[], operator?: string): boolean;
+    /**
+     * Keeps each choice row's tick where this element puts it.
+     *
+     * A choice row checks itself after `helix-before-toggle`, and this element
+     * already sets `checked` on every row from its own state. The request is
+     * refused, so a tick moves only when the choice is applied, and stopped, so
+     * it does not reach a page that never placed the row.
+     */
+    private readonly keepTick;
     /**
      * A row was chosen: a value to tick, or a comparison to use.
      *

package/dist/filter-input/menu/filter-menu.js

@@ -17,6 +17,12 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         this.label = 'Filter';
         this.picked = new Map();
         this.comparisons = new Map();
+        this.keepTick = (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
         this.handleSelect = (event) => {
             const row = event.composedPath()[0];
             if (!(row instanceof HTMLElement)) {
@@ -152,6 +158,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                       checkable
                       exclusive
                       ?checked=${operator.name === using?.name}
+                      @helix-before-toggle=${this.keepTick}
                       data-facet="operator"
                       data-field=${name}
                       data-value=${operator.name}
@@ -173,6 +180,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
               checkable
               ?exclusive=${using?.arity === 'one'}
               ?checked=${ticked.has(option.value)}
+              @helix-before-toggle=${this.keepTick}
               data-facet="value"
               data-field=${name}
               data-value=${option.value}