@fusion.dev/helix-headless 0.143.0 → 0.144.0

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
@@ -29,6 +35,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  *
  * @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.
@@ -38,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.
  *
@@ -69,16 +81,35 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * 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.
@@ -92,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.
      *

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) => {
@@ -33,22 +34,6 @@ const kind = (file) => {
     const subtype = file.type.split('/')[1]?.replace(/^x-/, '').split('+')[0] ?? '';
     return /^[a-z0-9]{1,6}$/i.test(subtype) ? subtype.toUpperCase() : 'File';
 };
-const accepts = (file, accept) => {
-    const tokens = accept
-        .split(',')
-        .map((token) => token.trim().toLowerCase())
-        .filter(Boolean);
-    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);
-};
 let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -57,15 +42,26 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             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) {
@@ -84,11 +80,11 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                 return;
             }
             event.preventDefault();
-            const dropped = [...event.dataTransfer.files].filter((file) => accepts(file, this.accept));
+            const dropped = [...event.dataTransfer.files];
             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);
@@ -102,6 +98,30 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             });
         };
     }
+    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 ?? [])];
     }
@@ -190,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;
@@ -204,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"
@@ -217,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}
         />
@@ -228,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">
@@ -258,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/root/filter-input-root.d.ts

@@ -13,8 +13,10 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * its tokens show a selection it owns, drawn from the options it was given.
  *
  * `value` is the typed text. Every keystroke fires `input` with the text on the
- * element, so a table can narrow as the user types. Tokens are not reported,
- * because they are markup you already hold. Backspace in an empty field fires
+ * element, so a table can narrow as the user types. A form receives the text
+ * under `name`, and then one more entry under `name` for each token: its
+ * `value` attribute, or for a `FilterChip`, its field and values written
+ * `field:values` as the field reads them typed. Backspace in an empty field fires
  * `helix-dismiss` on the last token, the same event its remove control fires,
  * so one handler covers the pointer and the keyboard.
  *
@@ -38,8 +40,11 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * moves through them with the arrow keys, and presses one on Enter. The option
  * fires its own `helix-select`, and you decide what choosing it means. Keys
  * before a colon and values after it use the same panel with different
- * contents. `readFilterText` is exported so you can narrow the panel against
- * partly typed text. The panel opens when it has options and closes when it has
+ * contents. `filter-suggestions` narrows the panel to the options whose words
+ * hold the term at the caret, after its colon, ignoring case and accents, and
+ * hides the rest. `readFilterText` is exported so you can narrow it yourself
+ * against partly typed text. While the panel is open, a reader hears how many
+ * suggestions it offers. The panel opens when it has options and closes when it has
  * none, and a choice does not close it, so after picking a key you see its
  * values next. Use `selectionStart` and `setSelectionRange` to write a
  * completion back and put the caret after it, or the next parse reads the wrong
@@ -93,6 +98,7 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @csspart hint - The help text under the field, shown while there is no error.
  * @csspart label - The label above the field.
  * @csspart lead - The box before the text that holds the `start` slot.
+ * @csspart live - The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
  * @csspart rest - The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
  * @csspart surface - The floating panel the suggestions sit in.
  * @csspart tags - The row the tokens sit in.
@@ -118,12 +124,40 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * an icon.
      */
     clearLabel: string;
+    /**
+     * Whether the panel narrows itself to the suggestions that hold the term
+     * being typed, as React Aria's Autocomplete filters. Off, the panel shows
+     * what you slot and you narrow it.
+     */
+    filterSuggestions: boolean;
     /**
      * The text shown while the field is empty.
      *
      * Not a label: it goes when typing starts.
      */
     placeholder: string;
+    /** What a reader hears for one suggestion, with `{count}` filled in. */
+    suggestionLabel: string;
+    /** What a reader hears for any other number of suggestions, with `{count}` filled in. */
+    suggestionsLabel: string;
+    /** The live region, rendered from the first count said. */
+    private readonly status;
+    /** The count last said, so the same panel is said once. */
+    private saidCount;
+    /** The options this element hid while narrowing, so only those are shown again. */
+    private readonly narrowed;
+    /**
+     * Hides the slotted options whose words do not hold the term at the caret,
+     * under `filter-suggestions`, and shows again the ones it hid before.
+     */
+    private narrow;
+    /** Says how many suggestions the open panel offers, when that changes. */
+    private sayCount;
+    /**
+     * What the form receives: the text, then one entry for each token that
+     * says what it filters. See the class description.
+     */
+    private formValue;
     /** How many tokens did not fit, which is what the row's count renders. */
     private over;
     /**

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

@@ -4,13 +4,14 @@ 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, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, drawIcon, drawStatus, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, StatusController, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessFilterField } from '../field/filter-field.js';
 import { readFilterText } from '../grammar.js';
 import { HelixHeadlessFilterMenu } from '../menu/filter-menu.js';
+import { currentTerm, suggests, tokenEntry } from '../suggest.js';
 const asksToGo = (node) => typeof node?.dismiss === 'function';
 const isOption = (node) => 'active' in node && 'value' in node;
 let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
@@ -22,7 +23,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.announcesInput = true;
         this.clearable = false;
         this.clearLabel = 'Clear';
+        this.filterSuggestions = false;
         this.placeholder = '';
+        this.suggestionLabel = '{count} suggestion';
+        this.suggestionsLabel = '{count} suggestions';
+        this.status = new StatusController(this);
+        this.saidCount = -1;
+        this.narrowed = new Set();
         this.over = 0;
         this.activeAt = -1;
         this.suggesting = false;
@@ -154,6 +161,51 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             this.over = this.hideOverflow(this.tokens);
         };
     }
+    narrow() {
+        const slot = this.renderRoot?.querySelector('slot[name="suggestions"]');
+        const term = this.filterSuggestions
+            ? currentTerm(this.value, this.control?.selectionStart ?? this.value.length)
+            : '';
+        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
+            const options = isOption(node) ? [node] : [...node.children].filter(isOption);
+            for (const option of options) {
+                const hide = !suggests(option.textContent ?? '', term);
+                if (hide && !option.hidden) {
+                    option.hidden = true;
+                    this.narrowed.add(option);
+                }
+                else if (!hide && this.narrowed.has(option)) {
+                    option.hidden = false;
+                    this.narrowed.delete(option);
+                }
+            }
+        }
+    }
+    sayCount() {
+        const count = this.open && this.suggesting ? this.suggestions.length : -1;
+        if (count === this.saidCount) {
+            return;
+        }
+        this.saidCount = count;
+        if (count < 0) {
+            return;
+        }
+        this.status.sayNow(countLabel(count, this.suggestionLabel, this.suggestionsLabel, this.lang));
+    }
+    formValue() {
+        const entries = (this.tokens?.assignedElements({ flatten: true }) ?? [])
+            .map(tokenEntry)
+            .filter((entry) => entry !== null);
+        if (this.name === '' || entries.length === 0) {
+            return this.value;
+        }
+        const data = new FormData();
+        data.append(this.name, this.value);
+        for (const entry of entries) {
+            data.append(this.name, entry);
+        }
+        return data;
+    }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -181,7 +233,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
                 }
             }
         }
-        return found.filter((option) => !option.disabled);
+        return found.filter((option) => !option.disabled && !option.hidden);
     }
     get selectionDirection() {
         return this.control?.selectionDirection ?? 'none';
@@ -264,6 +316,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             from < 0 ? (by > 0 ? 0 : options.length - 1) : (from + by + options.length) % options.length;
     }
     refreshSuggesting() {
+        this.narrow();
         const options = this.suggestions;
         this.suggesting = options.length > 0;
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
@@ -311,7 +364,8 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         super.updated(changed);
         this.releaseCaret?.();
         this.releaseCaret = undefined;
-        this.internals.setFormValue(this.value);
+        this.internals.setFormValue(this.formValue());
+        this.sayCount();
         const control = this.control;
         if (control) {
             this.copyValidity(control);
@@ -391,6 +445,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     >
       <slot name="suggestions" @slotchange=${this.handleSuggestions}></slot>
     </div>
+    ${drawStatus(this.status)}
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
@@ -400,9 +455,18 @@ __decorate([
 __decorate([
     property({ attribute: 'clear-label' })
 ], HelixHeadlessFilterInput.prototype, "clearLabel", void 0);
+__decorate([
+    property({ attribute: 'filter-suggestions', type: Boolean })
+], HelixHeadlessFilterInput.prototype, "filterSuggestions", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'suggestion-label' })
+], HelixHeadlessFilterInput.prototype, "suggestionLabel", void 0);
+__decorate([
+    property({ attribute: 'suggestions-label' })
+], HelixHeadlessFilterInput.prototype, "suggestionsLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessFilterInput.prototype, "over", void 0);

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

@@ -0,0 +1,17 @@
+/**
+ * What a filter field narrows its suggestions by, and what it sends a form,
+ * kept apart from the element so each can be read and tested alone.
+ */
+/**
+ * The term being typed at the caret: the run of text since the last space,
+ * and after its colon where it has one, so `status:ope` narrows by `ope`.
+ */
+export declare const currentTerm: (text: string, caret?: number) => string;
+/** Whether a suggestion's words hold the term, ignoring case and accents. */
+export declare const suggests: (words: string, term: string) => boolean;
+/**
+ * What a token sends a form: its `value` attribute, or for a token naming a
+ * field, the field and the values it shows, written `field:values` the way the
+ * field reads them typed. Nothing for a token that says neither.
+ */
+export declare const tokenEntry: (token: Element) => string | null;

package/dist/filter-input/suggest.js

@@ -0,0 +1,23 @@
+export const currentTerm = (text, caret = text.length) => {
+    const before = text.slice(0, caret);
+    const word = before.slice(before.search(/\S*$/u));
+    const colon = word.indexOf(':');
+    return (colon === -1 ? word : word.slice(colon + 1)).replace(/^-/u, '');
+};
+export const suggests = (words, term) => {
+    const plain = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+    return term === '' || plain(words).includes(plain(term));
+};
+export const tokenEntry = (token) => {
+    const written = token.getAttribute('value');
+    if (written !== null) {
+        return written;
+    }
+    const field = token.getAttribute('name');
+    const values = (token.textContent ?? '').replace(/\s+/gu, ' ').trim();
+    if (!field || values === '') {
+        return null;
+    }
+    const negated = token.getAttribute('operator')?.startsWith('not') ? '-' : '';
+    return `${negated}${field}:${values.replace(/\s*,\s*/gu, ',')}`;
+};

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

@@ -0,0 +1,33 @@
+/**
+ * What a Format Date was asked for, in its own spelling: the `Intl` options a
+ * consumer set, and whether the timestamp is a day with no time of day.
+ */
+export interface Asked {
+    dateOnly: boolean;
+    dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
+    day?: 'numeric' | '2-digit' | undefined;
+    era?: 'long' | 'narrow' | 'short' | undefined;
+    hour?: 'numeric' | '2-digit' | undefined;
+    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
+    minute?: 'numeric' | '2-digit' | undefined;
+    month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | undefined;
+    second?: 'numeric' | '2-digit' | undefined;
+    timeStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
+    timeZone?: string | undefined;
+    timeZoneName?: 'long' | 'short' | undefined;
+    weekday?: 'long' | 'short' | 'narrow' | undefined;
+    year?: 'numeric' | '2-digit' | undefined;
+}
+/**
+ * The `Intl.DateTimeFormat` options for what was asked, and none that was not.
+ *
+ * **A style wins over the fields.** `dateStyle` and `timeStyle` are each
+ * locale's own whole pattern, and `Intl` throws a `TypeError` when one is
+ * given beside `month` or `hour`, so the fields are left out wherever a style
+ * is set. `hourCycle` and `timeZone` go with either.
+ *
+ * **A day with no time is read in UTC** unless a zone is given. Parsed, it is
+ * midnight UTC, and read in a zone west of it that is the day before: measured
+ * before this, `2026-08-04` read "August 3, 2026" in Los Angeles.
+ */
+export declare const formatOptions: (asked: Asked) => Intl.DateTimeFormatOptions;