@fusion.dev/helix-headless 0.144.0 → 0.146.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-button': ['helix-press'],
     'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
@@ -22,7 +23,7 @@ registerElementEvents({
     ],
     '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-composer': ['helix-send', 'helix-typing', 'input'],
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -49,6 +50,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-create',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -56,14 +58,17 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'helix-select',
         'toggle',
     ],
-    'helix-headless-copy-button': ['helix-copy', 'helix-copy-error'],
+    'helix-headless-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-headless-data-table': [
         'helix-activate',
+        'helix-expand',
         'helix-filter',
         'helix-filtered',
+        'helix-load-more',
         'helix-navigate',
         'helix-reorder',
         'helix-reordered',
@@ -112,6 +117,7 @@ registerElementEvents({
     ],
     'helix-headless-heatmap': ['helix-resize'],
     'helix-headless-icon': ['error', 'load'],
+    'helix-headless-icon-button': ['helix-press'],
     'helix-headless-image': ['error', 'load'],
     'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-kbd': ['helix-shortcut'],
@@ -124,7 +130,15 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
-    'helix-headless-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-headless-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-headless-list-item': ['helix-action'],
+    'helix-headless-listbox': [
+        'change',
+        'helix-before-change',
+        'helix-filter',
+        'helix-load-more',
+        'input',
+    ],
     'helix-headless-map': [
         'change',
         'helix-activate',
@@ -137,6 +151,7 @@ registerElementEvents({
         'helix-map-rotate',
         'helix-map-tilt',
         'helix-map-zoom',
+        'helix-toggle',
     ],
     'helix-headless-map-area': ['helix-map-part-change'],
     'helix-headless-map-buildings': ['helix-map-part-change'],
@@ -153,9 +168,18 @@ registerElementEvents({
     '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', 'toggle'],
-    'helix-headless-notifications': ['helix-dismiss', 'helix-read'],
+    'helix-headless-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
     'helix-headless-number-input': ['change', 'helix-before-change', 'input'],
-    'helix-headless-object-inspector': ['helix-copy'],
+    'helix-headless-object-inspector': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-close',
+        'helix-before-open',
+        'helix-copy',
+        'helix-filter',
+        'helix-filtered',
+        'toggle',
+    ],
     'helix-headless-option': ['helix-select'],
     'helix-headless-outline': ['helix-activate'],
     'helix-headless-pagination': ['helix-activate', 'helix-navigate'],
@@ -165,13 +189,21 @@ registerElementEvents({
     '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', 'helix-clear', 'input'],
+    'helix-headless-rating': [
+        'change',
+        'helix-before-change',
+        'helix-clear',
+        'helix-preview',
+        'input',
+    ],
+    'helix-headless-scroll-area': ['scroll', 'scrollend'],
     'helix-headless-select': [
         'change',
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -193,12 +225,12 @@ registerElementEvents({
     '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-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-headless-table-column': ['helix-before-resize', 'helix-resized'],
     '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-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-time-input': [
         'change',
         'helix-before-change',
@@ -220,13 +252,52 @@ registerElementEvents({
         'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'helix-tour-status',
         'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
     'helix-headless-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
-    'helix-headless-tree-item': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-headless-video': ['ended', 'helix-next', 'helix-previous', 'pause', 'play'],
-    'helix-headless-video-playlist': ['helix-activate', 'helix-before-activate'],
+    'helix-headless-tree-item': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-load',
+        'helix-select',
+        'toggle',
+    ],
+    'helix-headless-video': [
+        'abort',
+        'canplay',
+        'canplaythrough',
+        'durationchange',
+        'emptied',
+        'ended',
+        'error',
+        'helix-next',
+        'helix-previous',
+        'loadeddata',
+        'loadedmetadata',
+        'loadstart',
+        'pause',
+        'play',
+        'playing',
+        'progress',
+        'ratechange',
+        'resize',
+        'seeked',
+        'seeking',
+        'stalled',
+        'suspend',
+        'timeupdate',
+        'volumechange',
+        'waiting',
+    ],
+    'helix-headless-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
     'helix-headless-video-playlist-item': ['helix-select'],
     'helix-headless-video-playlist-menu': ['helix-select'],
+    'helix-headless-virtual-list': [
+        'change',
+        'helix-before-change',
+        'helix-load-more',
+        'helix-range-change',
+    ],
 });

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

@@ -11,7 +11,9 @@ import { type TemplateResult } from 'lit';
  * was loading, and the announcement tells a screen reader user that the search
  * returned nothing. It is announced from a status region of its own, which is
  * rendered empty and filled a frame after the view appears. Screen readers read
- * a region that arrives with its text already in it inconsistently.
+ * a region that arrives with its text already in it inconsistently. For the
+ * seven seconds the region holds its copy, the heading and the message are
+ * hidden from screen readers, so the words are in the page once.
  *
  * Every region is a bare slot. There is no `empty-state-heading` or
  * `empty-state-actions` element: assign your own heading and actions to the

package/dist/empty/root/empty-root.js

@@ -18,9 +18,10 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
     }
     render() {
         const say = () => this.arrival.say();
+        const copied = this.arrival.said !== '' && !this.noAnnounce ? 'true' : nothing;
         return html `<slot name="icon"></slot>
-      <slot name="heading" @slotchange=${say}></slot>
-      <slot @slotchange=${say}></slot>
+      <slot aria-hidden=${copied} name="heading" @slotchange=${say}></slot>
+      <slot aria-hidden=${copied} @slotchange=${say}></slot>
       <slot name="actions"></slot>
       ${this.noAnnounce
             ? nothing

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

@@ -20,7 +20,22 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * 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.
+ * A reader also hears `added-text` for the files a drop or a paste adds, and
+ * `removed-text` for a file a remove button takes out, since neither moves
+ * focus or says anything on its own. `directory` asks the picker for a folder. `transformFiles` changes the files
+ * a field takes before it holds them, such as shrinking an image.
+ *
+ * Each chosen file is a row: its name, its size and type as tags, and a
+ * remove button. `renderFile` draws the row's details your own way, and the
+ * `remove-icon` slot replaces the button's icon.
+ *
+ * **Keyboard.** The input is the tab stop, and each file's remove button is
+ * one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter, Space | On the input, opens the picker. On a remove button, removes that file and moves focus to the button of the file in its place, or back to the input. |
+ * | Control+V, Command+V | Takes files from the clipboard, as a drop does. |
  *
  * @since 0.1.0
  * @status stable
@@ -31,6 +46,7 @@ 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 remove-icon - The icon on each file's remove button, in place of the bin. Each button shows a copy.
  * @slot trigger - The content that opens the picker when pressed.
  *
  * @event {Event} change - Fired after the value changes.
@@ -53,7 +69,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @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 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 remove - The control that removes a file.
@@ -66,6 +82,8 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart size-start - The category before the label.
  * @csspart trigger - The label that opens the picker.
  *
+ * @cssstate dropping - Files are being dragged over the field.
+ * @cssstate has-files - The field holds at least one file.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
@@ -77,6 +95,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * filter is the only check the platform makes and a drop never meets it.
      */
     accept: string;
+    /**
+     * What a reader hears when a drop or a paste adds files, with `{names}` and
+     * `{count}` filled in.
+     */
+    addedText: string;
     /**
      * Which camera or microphone a mobile picker should offer, if any.
      */
@@ -110,6 +133,10 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * filled in.
      */
     rejectedText: string;
+    /**
+     * What a reader hears when a file is removed, with `{name}` filled in.
+     */
+    removedText: string;
     /**
      * The accessible name of the control that removes a file. `{name}` is
      * replaced with the file's name.
@@ -119,6 +146,19 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * `{name}` has it added after it.
      */
     removeLabel: string;
+    /**
+     * Draws a file's row in place of its name, size, and type: a Lit template, a
+     * string, or a DOM node, given the file and its place in the list. The
+     * remove button stays beside it.
+     */
+    renderFile?: (file: File, index: number) => unknown;
+    /**
+     * Your own step between taking files and holding them, such as shrinking an
+     * image, as Zag's file upload `transformFiles`. It is given the files taken
+     * from one pick, drop, or paste and returns the files to hold, or a promise
+     * of them. A promise that rejects refuses those files, with its message.
+     */
+    transformFiles?: (files: File[]) => File[] | Promise<File[]>;
     /**
      * The trigger's text when nothing is slotted into it.
      */
@@ -128,15 +168,38 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * 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. */
+    /** The live region, rendered from the first time it has something to say. */
     private readonly status;
     /**
      * Screens arriving files and commits what is taken, after the files the
-     * field keeps. Refused files are announced and said.
+     * field keeps, through `transformFiles` where it is set.
      */
     private take;
-    /** Sends `helix-reject` and says which files were left out. */
-    private refuse;
+    /**
+     * Commits what an arrival leaves, sends `helix-reject` for what it refused,
+     * and says both.
+     *
+     * Nothing taken and nothing moved, as when every dropped file is refused, is
+     * no change to announce. A pick is the platform's own `change`, relayed
+     * whatever it holds, and the picker itself tells a reader what was chosen,
+     * so `added-text` is said for a drop or a paste only.
+     */
+    private finish;
+    /**
+     * A sentence about some files, with `{count}` and `{names}` filled in.
+     *
+     * The names as the page's language lists them, which in English is the comma
+     * list it always was: `unit` and `short` join with commas and no "and". The
+     * 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;
+    private readonly handleRemoveIcon;
+    /** The icon on one row's remove button: a copy of `remove-icon`, or the bin. */
+    private removeMark;
     /** Takes files pasted onto the field, as a drop takes them. */
     private readonly handlePaste;
     /**

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

@@ -42,20 +42,28 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             target: () => this.partNamed('control'),
         });
         this.accept = '';
+        this.addedText = 'Added: {names}';
         this.directory = false;
         this.locale = '';
         this.multiple = false;
         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.handleRemoveIcon = (event) => {
+            this.removeIcons.clear();
+            this.removeIcon = event.target.assignedElements({ flatten: true })[0];
+        };
         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.take(pasted, this.files);
         };
         this.dropping = false;
         this.committed = [];
@@ -84,7 +92,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             if (dropped.length === 0) {
                 return;
             }
-            this.take(dropped, this.multiple ? this.files : []);
+            this.take(dropped, this.files);
         };
         this.handleRemove = (event) => {
             const at = Number(event.currentTarget.dataset.at);
@@ -106,21 +114,50 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             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);
+        const taken = kept.filter((file) => !keeping.includes(file));
+        const transform = this.transformFiles;
+        if (!transform || taken.length === 0) {
+            this.finish(kept, taken, refused, picked);
+            return;
         }
+        const held = kept.filter((file) => keeping.includes(file));
+        Promise.resolve()
+            .then(() => transform(taken))
+            .then((made) => this.finish([...held, ...made], made, refused, picked), (error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            this.finish(held, [], [...refused, ...taken.map((file) => ({ file, message, reason: 'invalid' }))], picked);
+        });
+    }
+    finish(next, added, refused, picked) {
+        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
+        const moved = picked || !(same(next, this.committed) && same(next, this.files));
+        const applied = moved && this.commit(next);
         if (refused.length > 0) {
-            this.refuse(refused);
+            this.dispatchEvent(new HelixRejectEvent({ files: refused }));
+        }
+        const words = [
+            applied && !picked && added.length > 0 ? this.listed(this.addedText, added) : '',
+            refused.length > 0
+                ? this.listed(this.rejectedText, refused.map((one) => one.file))
+                : '',
+        ].filter((one) => one !== '');
+        if (words.length > 0) {
+            this.status.say(words.join(' '));
         }
     }
-    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)),
+    listed(sentence, files) {
+        return fillTemplate(sentence, {
+            count: formatNumbers(this.lang)(files.length),
+            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
         });
-        this.status.say(words);
+    }
+    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;
     }
     get files() {
         return [...(this.control?.files ?? [])];
@@ -132,12 +169,15 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.commit([]);
     }
     removeAt(at) {
-        this.commit(this.files.filter((_, index) => index !== at));
+        const gone = this.files[at];
+        if (gone && this.commit(this.files.filter((_, index) => index !== at))) {
+            this.status.say(fillTemplate(this.removedText, { name: gone.name }));
+        }
     }
     commit(next) {
         const control = this.control;
         if (!control) {
-            return;
+            return false;
         }
         const previous = this.committed;
         const applied = requestChange({
@@ -152,6 +192,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (!applied) {
             this.put(control, previous);
         }
+        return applied;
     }
     put(control, files) {
         if (files.length === 0) {
@@ -197,6 +238,8 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     updated(changed) {
         super.updated(changed);
         this.sync();
+        this.toggleState('dropping', this.dropping);
+        this.toggleState('has-files', this.files.length > 0);
     }
     focus(options) {
         this.control?.focus(options);
@@ -246,6 +289,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
           <slot name="trigger">${this.triggerLabel}</slot>
         </label>
       </div>
+      <!-- Hidden, because this is where the icon arrives: each remove button
+           shows a copy. -->
+      <slot name="remove-icon" hidden @slotchange=${this.handleRemoveIcon}></slot>
       <!-- 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 above renderMeta. -->
@@ -256,10 +302,12 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             : 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>
+                    ${this.renderFile
+                ? this.renderFile(file, at)
+                : html `<span part="name">${file.name}</span>
+                          <span part="meta">
+                            ${this.renderMeta(file)}
+                          </span>`}
                   </span>
                   <button
                     part="remove"
@@ -269,7 +317,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
                   >
-                    ${drawIcon(trash)}
+                    ${this.removeMark(at)}
                   </button>
                 </li>`)}
             </ul>`}`;
@@ -278,6 +326,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: 'added-text' })
+], HelixHeadlessFileInput.prototype, "addedText", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
@@ -299,15 +350,27 @@ __decorate([
 __decorate([
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
+__decorate([
+    property({ attribute: 'removed-text' })
+], HelixHeadlessFileInput.prototype, "removedText", void 0);
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "renderFile", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "transformFiles", 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, "removeIcon", void 0);
 __decorate([
     state()
 ], HelixHeadlessFileInput.prototype, "dropping", void 0);

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

@@ -27,7 +27,8 @@ 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.
+ * arrivals it took, or for a single-file field the last arrival it took, and
+ * the file it keeps when it took none.
  */
 export declare const screenFiles: (arriving: File[], keeping: File[], rules: ScreenRules) => {
     kept: File[];

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

@@ -66,8 +66,13 @@ import '../../menu/index.js';
  * @csspart divider-content - The content set into the line.
  * @csspart divider-line - The line itself.
  * @csspart entry - One row: a field, its comparison, an operator, or a value.
+ * @csspart entry-end - The trailing column of a row, which holds its shortcut.
  * @csspart entry-item - The row itself.
  * @csspart entry-mark - The mark at the end of a row: a check mark on a chosen value, and a caret on a field.
+ * @csspart entry-shortcut - The key drawn for a row's shortcut. The filter menu sets none, so it renders only where a subclass does.
+ * @csspart entry-shortcut-kbd - The key inside it.
+ * @csspart entry-shortcut-key - One key of the shortcut's chord.
+ * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.

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

@@ -137,7 +137,10 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
             const offered = using?.arity === 'none' ? [] : values;
             return html `<${item}
           part="entry"
-          exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+          exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
           data-facet="field"
           data-field=${name}
         >
@@ -145,7 +148,10 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           ${operators.length > 1
                 ? html `<${item}
                   part="entry"
-                  exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+                  exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -153,7 +159,10 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   ${using?.label ?? ''}
                   ${operators.map((operator) => html `<${item}
                       part="entry"
-                      exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+                      exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                       slot="submenu"
                       checkable
                       exclusive
@@ -175,7 +184,10 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                 : nothing}
           ${offered.map((option) => html `<${item}
               part="entry"
-              exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+              exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}