@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -1,5 +1,7 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { type FileStatus } from '../status.js';
+export type { FileStatus } from '../status.js';
 import '../../tag/index.js';
 declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -59,6 +61,9 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart feedback - The message that says what is wrong.
  * @csspart field - The box you press or drop files on.
  * @csspart file - One chosen file.
+ * @csspart file-done - A file whose upload `setFileStatus` says is done. Set together with `file`.
+ * @csspart file-error - A file whose upload `setFileStatus` says failed. Set together with `file`.
+ * @csspart file-uploading - A file whose upload `setFileStatus` says is under way. Set together with `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`.
@@ -72,6 +77,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart live - The live region that says `added-text`, `rejected-text`, and `removed-text`. It is rendered from the first time it has something to say.
  * @csspart meta - The row that holds a file's size and type.
  * @csspart name - A file's name.
+ * @csspart progress - A file's upload bar, a `<progress>`, while `setFileStatus` gives it a measure or says it is under way.
  * @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`.
@@ -80,6 +86,8 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @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 status - How a file's upload is going, from `setFileStatus`: the bar and the words.
+ * @csspart status-text - The words `setFileStatus` gives a file, such as the reason it failed.
  * @csspart trigger - The label that opens the picker.
  *
  * @cssstate dropping - Files are being dragged over the field.
@@ -128,6 +136,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * Whether more than one file can be chosen.
      */
     multiple: boolean;
+    /**
+     * The name of a file's progress bar, read by screen readers, with `{name}`
+     * filled in. A label with no `{name}` has it added after it.
+     */
+    progressLabel: string;
     /**
      * What a reader hears when files are refused, with `{count}` and `{names}`
      * filled in.
@@ -170,6 +183,19 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
     validate?: (file: File) => string | null | undefined;
     /** The live region, rendered from the first time it has something to say. */
     private readonly status;
+    /** What the page has said of each file's upload, by file. */
+    private readonly statuses;
+    /**
+     * Shows how a file's upload is going, in its row: a bar for `progress`,
+     * from 0 to 1, or a bar without a measure while `state` is `uploading`, and
+     * `text` beside it. `state` names the row `file-uploading`, `file-done` or
+     * `file-error` beside `file`, and a reader hears `text` when the state
+     * becomes `done` or `error`. `null` clears it.
+     *
+     * The field uploads nothing, as Zag's file upload does not: your page sends
+     * the file and says here how it is going.
+     */
+    setFileStatus(file: File, status: FileStatus | null): void;
     /**
      * Screens arriving files and commits what is taken, after the files the
      * field keeps, through `transformFiles` where it is set.
@@ -193,10 +219,8 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * count is written as the language writes a number.
      */
     private listed;
-    /** The element slotted into `remove-icon`, which each remove button copies. */
-    private removeIcon;
-    /** One copy of `removeIcon` per row, kept so a render does not replace it. */
-    private readonly removeIcons;
+    /** The element slotted into `remove-icon`, one copy per row's remove button. */
+    private readonly removeIcon;
     private readonly handleRemoveIcon;
     /** The icon on one row's remove button: a copy of `remove-icon`, or the bin. */
     private removeMark;
@@ -342,6 +366,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * renders the styled one from the same template.
      */
     protected renderMeta(file: File): TemplateResult;
+    /**
+     * How a file's upload is going, from `setFileStatus`, behind a seam a tier
+     * can move: a `<progress>` named by `progress-label` and the status words.
+     */
+    protected renderFileStatus(file: File): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {
@@ -349,4 +378,3 @@ declare global {
         'helix-headless-file-input': HelixHeadlessFileInput;
     }
 }
-export {};

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

@@ -4,14 +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, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, StatusController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, labelWith, MixinField, requestChange, restoreValue, SlottedGlyph, 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 { barOf, saysStatus } from '../status.js';
 import '../../tag/index.js';
-const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
 const size = (bytes, locale) => {
     const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;
@@ -46,16 +46,17 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.directory = false;
         this.locale = '';
         this.multiple = false;
+        this.progressLabel = 'Uploading {name}';
         this.rejectedText = 'Not added: {names}';
         this.removedText = 'Removed: {name}';
         this.removeLabel = 'Remove {name}';
         this.triggerLabel = 'Choose files';
         this.status = new StatusController(this);
-        this.removeIcon = undefined;
-        this.removeIcons = new Map();
+        this.statuses = new WeakMap();
+        this.removeIcon = new SlottedGlyph();
         this.handleRemoveIcon = (event) => {
-            this.removeIcons.clear();
-            this.removeIcon = event.target.assignedElements({ flatten: true })[0];
+            this.removeIcon.read(event.target);
+            this.requestUpdate();
         };
         this.handlePaste = (event) => {
             const pasted = [...(event.clipboardData?.files ?? [])];
@@ -106,6 +107,19 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             });
         };
     }
+    setFileStatus(file, status) {
+        const was = this.statuses.get(file);
+        if (status) {
+            this.statuses.set(file, status);
+            if (saysStatus(status, was)) {
+                this.status.say(status.text ?? '');
+            }
+        }
+        else {
+            this.statuses.delete(file);
+        }
+        this.requestUpdate();
+    }
     take(arriving, keeping, picked = false) {
         const { kept, refused } = screenFiles(arriving, keeping, {
             accept: this.accept,
@@ -152,12 +166,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         });
     }
     removeMark(at) {
-        if (!this.removeIcon) {
-            return drawIcon(trash);
-        }
-        const held = this.removeIcons.get(at) ?? this.removeIcon.cloneNode(true);
-        this.removeIcons.set(at, held);
-        return held;
+        return this.removeIcon.copyFor(at) ?? drawIcon(trash);
     }
     get files() {
         return [...(this.control?.files ?? [])];
@@ -258,6 +267,23 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         part="kind"
       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')}>`;
     }
+    renderFileStatus(file) {
+        const status = this.statuses.get(file);
+        if (!status) {
+            return nothing;
+        }
+        const bar = barOf(status);
+        return html `<span part="status"
+      >${bar === undefined
+            ? nothing
+            : html `<progress
+              part="progress"
+              max="1"
+              value=${bar === 'unmeasured' ? nothing : bar}
+              aria-label=${labelWith(this.progressLabel, 'name', file.name)}
+            ></progress>`}${status.text ? html `<span part="status-text">${status.text}</span>` : nothing}</span
+    >`;
+    }
     render() {
         const files = this.files;
         return html `${this.renderLabel()}
@@ -300,26 +326,34 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
       ${files.length === 0
             ? nothing
             : html `<ul part="list">
-              ${files.map((file, at) => html `<li part="file">
+              ${files.map((file, at) => {
+                const state = this.statuses.get(file)?.state;
+                const done = state === 'done';
+                const failed = state === 'error';
+                const sending = state === 'uploading';
+                return html `<li
+                  part="file${done ? ' file-done' : ''}${failed ? ' file-error' : ''}${sending ? ' file-uploading' : ''}"
+                >
                   <span part="detail">
                     ${this.renderFile
-                ? this.renderFile(file, at)
-                : html `<span part="name">${file.name}</span>
+                    ? this.renderFile(file, at)
+                    : html `<span part="name">${file.name}</span>
                           <span part="meta">
                             ${this.renderMeta(file)}
-                          </span>`}
+                          </span>`}${this.renderFileStatus(file)}
                   </span>
                   <button
                     part="remove"
                     type="button"
-                    aria-label=${named(this.removeLabel, file.name)}
+                    aria-label=${labelWith(this.removeLabel, 'name', file.name)}
                     data-at=${at}
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
                   >
                     ${this.removeMark(at)}
                   </button>
-                </li>`)}
+                </li>`;
+            })}
             </ul>`}`;
     }
 };
@@ -347,6 +381,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'progress-label' })
+], HelixHeadlessFileInput.prototype, "progressLabel", void 0);
 __decorate([
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
@@ -368,9 +405,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessFileInput.prototype, "validate", void 0);
-__decorate([
-    state()
-], HelixHeadlessFileInput.prototype, "removeIcon", void 0);
 __decorate([
     state()
 ], HelixHeadlessFileInput.prototype, "dropping", void 0);

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

@@ -0,0 +1,24 @@
+/**
+ * How one file's upload is going, as a page reports it to File Input. The
+ * field does not upload anything: the page does, and says how it is going.
+ */
+export interface FileStatus {
+    /** How much is done, from 0 to 1. Left out, the bar moves without a measure while `state` is `uploading`. */
+    readonly progress?: number | undefined;
+    /** Where the upload is: under way, finished, or failed. */
+    readonly state?: 'done' | 'error' | 'uploading' | undefined;
+    /** Words beside the bar, such as "Uploaded" or the reason it failed. */
+    readonly text?: string | undefined;
+}
+/**
+ * The bar's value, held between 0 and 1, or nothing for a bar without a
+ * measure, and no bar at all for a status that is neither measured nor under
+ * way.
+ */
+export declare const barOf: (status: FileStatus) => number | 'unmeasured' | undefined;
+/**
+ * Whether a new status is worth saying: a finish or a failure with words, the
+ * first time the file reaches it. Progress is shown and not said, since a
+ * reader hearing every percent hears nothing else.
+ */
+export declare const saysStatus: (next: FileStatus, was: FileStatus | undefined) => boolean;

package/dist/file-input/status.js

@@ -0,0 +1,11 @@
+import { clamp } from '@fusion.dev/helix-core';
+export const barOf = (status) => {
+    const { progress, state } = status;
+    if (typeof progress === 'number' && Number.isFinite(progress)) {
+        return clamp(progress, 0, 1);
+    }
+    return state === 'uploading' ? 'unmeasured' : undefined;
+};
+export const saysStatus = (next, was) => Boolean(next.text) &&
+    (next.state === 'done' || next.state === 'error') &&
+    next.state !== was?.state;

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

@@ -27,6 +27,15 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * dismissal, which is also how you take control of the interaction for one
  * press. `requestChange` documents the pattern.
  *
+ * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
+ * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
+ * field asks to remove the last chip.
+ *
+ * The remove button is named `dismiss-label` followed by the chip's words,
+ * such as "Remove filter Status is not open", so a row of chips says which
+ * filter each button removes. Write `{label}` in `dismiss-label` to put the
+ * words elsewhere.
+ *
  * To let the user change the operator, slot a menu trigger into `operator`.
  * With the text fallback, the operator is a label. The chip does not interpret
  * operators: their meaning belongs to your domain, as `FilterOperator`
@@ -100,6 +109,20 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * makes an unusual filter look unusual.
      */
     operatorLabel: string;
+    /**
+     * The remove button's name: `dismissLabel` with the chip's words, its field,
+     * its comparison and its values, such as "Remove filter Status is not open".
+     *
+     * **Named for its chip**, as File Input names each remove button for its
+     * file: a row of buttons each called "Remove filter" says nothing about
+     * which filter each one takes away. `{label}` in `dismiss-label` says where
+     * the words go, and without it they follow the label.
+     *
+     * Each word is read from what is slotted and otherwise from `label` and
+     * `operator-label`, which is all a server and a hydrating render can read,
+     * so the values join the update after.
+     */
+    private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -4,7 +4,7 @@ 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 { customElement, HelixElement, MixinDismissible } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, labelWith, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,8 +16,16 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         this.label = '';
         this.operatorLabel = '';
     }
+    get removeName() {
+        const read = (slot, fallback) => (this.childrenKnown && slottedWords(this, [slot])) || fallback;
+        const words = [read('field', this.label), read('operator', this.operatorLabel), read('', '')]
+            .filter(Boolean)
+            .join(' ');
+        return labelWith(this.dismissLabel, 'label', words);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
         this.finishHydration();
     }
     render() {
@@ -33,7 +41,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
             ? html `<button
               part="dismiss"
               type="button"
-              aria-label=${this.dismissLabel}
+              aria-label=${this.removeName}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">

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

@@ -97,6 +97,7 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://fusion.dev/helix/components/filter-input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - Content after the text, such as a count or a control.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
@@ -256,6 +257,11 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * and one that pretends it was never there.
      */
     private get suggestions();
+    /**
+     * Every option slotted into `suggestions`, and every option one level inside
+     * a group slotted there, hidden or not.
+     */
+    private get options();
     /**
      * The direction of the selection, named as on `<input>`.
      *
@@ -437,6 +443,8 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private markActive;
     /** Puts the caret in the text field. */
     focus(options?: FocusOptions): void;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -162,22 +162,18 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         };
     }
     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);
-                }
+        for (const option of this.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);
             }
         }
     }
@@ -220,20 +216,11 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         return this.clearable && this.value !== '' && !this.isDisabled;
     }
     get suggestions() {
+        return this.options.filter((option) => !option.disabled && !option.hidden);
+    }
+    get options() {
         const slot = this.renderRoot?.querySelector('slot[name="suggestions"]');
-        const found = [];
-        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
-            if (isOption(node)) {
-                found.push(node);
-                continue;
-            }
-            for (const child of node.children) {
-                if (isOption(child)) {
-                    found.push(child);
-                }
-            }
-        }
-        return found.filter((option) => !option.disabled && !option.hidden);
+        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((node) => isOption(node) ? [node] : [...node.children].filter(isOption));
     }
     get selectionDirection() {
         return this.control?.selectionDirection ?? 'none';
@@ -392,6 +379,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     focus(options) {
         this.control?.focus(options);
     }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
@@ -426,7 +416,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
               aria-label=${this.clearLabel}
               @click=${this.handleClear}
             >
-              ${drawIcon(x)}
+              ${this.renderClearIcon()}
             </button>`
             : nothing}
     </div>

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

@@ -0,0 +1,20 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Each date field `Intl` names, drawn as a part of its own.
+ *
+ * Keyed by the `type` of `Intl.DateTimeFormat#formatToParts`. Written out one
+ * template to a field rather than bound through one `part` binding, because a
+ * part is read from the source as a literal: a bound name is a part no
+ * stylesheet check can find. A type left out, the punctuation between the
+ * fields among them, is drawn as plain text.
+ */
+export declare const FIELD: Record<string, (value: string) => TemplateResult>;
+/**
+ * A formatted date, each field in a part of its own and the text between them
+ * as it is.
+ *
+ * The words are the ones `format` would give, in the same order, so the reading
+ * a screen reader hears and the text a reader copies do not change: an inline
+ * span with no style of its own changes nothing on the page either.
+ */
+export declare const drawFields: (parts: readonly Intl.DateTimeFormatPart[]) => unknown[];

package/dist/format-date/fields.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+export const FIELD = {
+    day: (value) => html `<span part="day">${value}</span>`,
+    dayPeriod: (value) => html `<span part="day-period">${value}</span>`,
+    era: (value) => html `<span part="era">${value}</span>`,
+    hour: (value) => html `<span part="hour">${value}</span>`,
+    minute: (value) => html `<span part="minute">${value}</span>`,
+    month: (value) => html `<span part="month">${value}</span>`,
+    second: (value) => html `<span part="second">${value}</span>`,
+    timeZoneName: (value) => html `<span part="time-zone-name">${value}</span>`,
+    weekday: (value) => html `<span part="weekday">${value}</span>`,
+    year: (value) => html `<span part="year">${value}</span>`,
+};
+export const drawFields = (parts) => parts.map(({ type, value }) => FIELD[type]?.(value) ?? value);

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

@@ -1,9 +1,8 @@
 /**
  * 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.
+ * consumer set. The element itself is one, so it passes itself.
  */
 export interface Asked {
-    dateOnly: boolean;
     dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     day?: 'numeric' | '2-digit' | undefined;
     era?: 'long' | 'narrow' | 'short' | undefined;
@@ -19,15 +18,16 @@ export interface Asked {
     year?: 'numeric' | '2-digit' | undefined;
 }
 /**
- * The `Intl.DateTimeFormat` options for what was asked, and none that was not.
+ * The `Intl.DateTimeFormat` options for what was asked, and none that was not:
+ * an option not asked for is `undefined`, which `Intl` reads as absent.
  *
  * **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
+ * **A day with no time, `dateOnly`, 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;
+export declare const formatOptions: (asked: Asked, dateOnly?: boolean) => Intl.DateTimeFormatOptions;

package/dist/format-date/options.js

@@ -1,42 +1,13 @@
-const FIELDS = [
-    'day',
-    'era',
-    'hour',
-    'minute',
-    'month',
-    'second',
-    'timeZoneName',
-    'weekday',
-    'year',
-];
-export const formatOptions = (asked) => {
-    const options = {};
-    const styled = asked.dateStyle !== undefined || asked.timeStyle !== undefined;
-    if (styled) {
-        if (asked.dateStyle) {
-            options.dateStyle = asked.dateStyle;
-        }
-        if (asked.timeStyle) {
-            options.timeStyle = asked.timeStyle;
-        }
-    }
-    else {
-        for (const field of FIELDS) {
-            const value = asked[field];
-            if (value) {
-                ;
-                options[field] = value;
-            }
-        }
-    }
-    if (asked.hourCycle) {
-        options.hourCycle = asked.hourCycle;
-    }
-    if (asked.timeZone) {
-        options.timeZone = asked.timeZone;
-    }
-    else if (asked.dateOnly) {
-        options.timeZone = 'UTC';
+import { FIELD } from './fields.js';
+const FIELDS = Object.keys(FIELD);
+export const formatOptions = (asked, dateOnly = false) => {
+    const options = {
+        hourCycle: asked.hourCycle,
+        timeZone: asked.timeZone || (dateOnly ? 'UTC' : undefined),
+    };
+    const styled = asked.dateStyle || asked.timeStyle;
+    for (const field of styled ? ['dateStyle', 'timeStyle'] : FIELDS) {
+        options[field] = asked[field];
     }
     return options;
 };