@fusion.dev/helix-headless 0.145.0 → 0.146.0

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

@@ -27,6 +27,16 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * the nearest. While a swipe moves the panel, the distance is written on it as
  * `--drawer-swipe-x` and `--drawer-swipe-y`. `swipe="false"` turns swiping off.
  *
+ * `snap` is the snap point the panel rests at, and `:state(snapped)` is on the
+ * host while that is less than the whole panel. `snapTo()` moves it to
+ * another. **Focus moving to a control past the
+ * window's edge opens the panel to its largest snap point**, so a reader
+ * moving through a half open sheet with `Tab` never lands on a control they
+ * cannot see.
+ *
+ * Set `dismissible` to draw a close control in the corner, labeled by
+ * `dismiss-label`, as `Dialog` draws one.
+ *
  * The panel's name is `label` when you set it. Otherwise it is the heading in
  * the `header` slot, or the elements an `aria-labelledby` on the host names.
  *
@@ -51,6 +61,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/drawer
  *
  * @slot - The drawer's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - Content pinned below the scrolling area, such as the drawer's actions.
  * @slot header - Content pinned above the scrolling area.
  *
@@ -60,6 +71,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @event {ToggleEvent} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling content region.
+ * @csspart dismiss - The close control, drawn when the drawer is `dismissible`.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
  * @csspart footer - The footer region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
@@ -70,6 +83,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @cssstate entering - From the moment the drawer opens until its entrance has finished.
  * @cssstate exiting - From the moment the drawer closes until its exit has finished.
  * @cssstate open - While the drawer is open.
+ * @cssstate snapped - While the panel rests at a snap point that shows less than the whole panel.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly commands: CommandController;
@@ -86,6 +100,18 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * that a resting value is an attribute's absence.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * Draws a control that closes the drawer, in the corner where the title is.
+     *
+     * Pressing it is `close()`, so it sends `helix-before-close` like every other
+     * way out.
+     */
+    dismissible: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * Accessible name for the panel. When it is empty, the heading in the
      * `header` slot names the panel.
@@ -153,6 +179,8 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly phases: OpenPhaseController;
     /** How far the panel rests toward its edge, in pixels, at the snap point it settled on. */
     private rest;
+    /** The fraction of the panel on screen at the snap point it rests at. */
+    private shown;
     /** The edge the panel leaves through, from its placement and the writing direction. */
     private get edge();
     /** The panel's size along the swipe, in pixels. */
@@ -165,6 +193,30 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     private place;
     /** Brings a released swipe to rest: at a snap point, or closed through the request. */
     private settle;
+    /**
+     * The fraction of the panel on screen at the snap point it rests at, such as
+     * `0.5`. It is `1`, the whole panel, while the drawer is closed or has no
+     * `snap-points`.
+     */
+    get snap(): number;
+    /**
+     * Puts the panel at rest at a snap point, and says on the host, as
+     * `:state(snapped)`, while that is short of the whole panel.
+     */
+    private restAt;
+    /** Says whether the panel rests short of the whole, and nothing while closed. */
+    private markSnap;
+    /**
+     * Moves the open panel to rest at the snap point nearest `point`, a fraction
+     * of the panel such as `1` for the whole of it.
+     */
+    snapTo(point: number): void;
+    /**
+     * Focus moving to a control past the window's edge, in a panel resting short
+     * of the whole: the panel opens to its largest snap point, so the control is
+     * on screen.
+     */
+    private readonly handleFocusIn;
     /** Opens the drawer. */
     show(): void;
     /**
@@ -216,9 +268,16 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * reflection keeps the fallback name.
      */
     private nameByHeader;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The glyph on the close control, behind a seam: slot fallback, so a
+     * consumer replaces it by slotting, and a method, so a tier above replaces it
+     * by overriding. As `Dialog` draws it.
+     */
+    protected renderDismissIcon(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/drawer/root/drawer-root.js

@@ -4,9 +4,10 @@ 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, CommandController, customElement, edgeOffset, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { beyondWindow } from '../reveal.js';
 import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
     constructor() {
@@ -18,6 +19,8 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 '--toggle': () => this.toggleOpen(),
             },
         });
+        this.dismissible = false;
+        this.dismissLabel = 'Close';
         this.label = '';
         this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
@@ -33,6 +36,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             surface: () => this.panel,
         });
         this.rest = 0;
+        this.shown = 1;
         this.swipes = new SwipeController(this, {
             axis: () => (this.open && this.swipe ? swipeAxis(this.edge) : undefined),
             end: (dx, dy, vx, vy) => this.settle(dx, dy, vx, vy),
@@ -40,6 +44,15 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             start: (target, event) => startsSwipe(target, event.pointerType, swipeAxis(this.edge), this.partNamed('content')),
             surface: () => this.panel,
         });
+        this.handleFocusIn = (event) => {
+            const target = event.composedPath()[0];
+            if (this.shown >= 1 || !(target instanceof Element) || typeof window === 'undefined') {
+                return;
+            }
+            if (beyondWindow(target.getBoundingClientRect(), window.innerWidth, window.innerHeight)) {
+                this.snapTo(1);
+            }
+        };
         this.handleKeydown = (event) => {
             if (event.key !== 'Escape' ||
                 event.defaultPrevented ||
@@ -117,9 +130,31 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             return;
         }
         if (shown !== 0) {
-            this.rest = snapTravel(size, shown);
+            this.restAt(shown);
         }
+        else {
+            this.place(this.rest);
+        }
+    }
+    get snap() {
+        return this.open ? this.shown : 1;
+    }
+    restAt(shown) {
+        this.shown = shown;
+        this.rest = snapTravel(this.extent, shown);
         this.place(this.rest);
+        this.markSnap();
+    }
+    markSnap() {
+        this.toggleState('snapped', this.open && this.shown < 1);
+    }
+    snapTo(point) {
+        if (!this.open) {
+            return;
+        }
+        const points = parseSnapPoints(this.snapPoints);
+        const nearest = points.reduce((best, one) => Math.abs(one - point) < Math.abs(best - point) ? one : best);
+        this.restAt(nearest);
     }
     show() {
         this.requestOpen(true);
@@ -143,8 +178,13 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
         this.namedByHeader = reflectElements(this.panel, 'ariaLabelledByElements', heading, this.namedByHeader);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusin', this.handleFocusIn);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('focusin', this.handleFocusIn);
         unlockScroll(this);
     }
     updated(changed) {
@@ -152,7 +192,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         this.nameByHeader();
         if (changed.has('open') && !this.open) {
             this.rest = 0;
+            this.shown = 1;
             this.place(0);
+            this.markSnap();
         }
         if (this.open && this.modal) {
             lockScroll(this);
@@ -171,8 +213,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             else {
                 panel.show();
             }
-            this.rest = snapTravel(this.extent, parseSnapPoints(this.snapPoints)[0] ?? 1);
-            this.place(this.rest);
+            this.restAt(parseSnapPoints(this.snapPoints)[0] ?? 1);
         }
         else if (!this.open && panel.open) {
             panel.close();
@@ -192,12 +233,30 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
       <div part="header"><slot name="header" @slotchange=${this.nameByHeader}></slot></div>
       <div part="content"><slot></slot></div>
       <div part="footer"><slot name="footer"></slot></div>
+      ${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.close(),
+            })
+            : nothing}
     </dialog>`;
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
 };
 __decorate([
     property({ attribute: 'closedby', reflect: true })
 ], HelixHeadlessDrawer.prototype, "closedBy", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDrawer.prototype, "dismissible", void 0);
+__decorate([
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessDrawer.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrawer.prototype, "label", void 0);

package/dist/drilldown/item/drilldown-item.js

@@ -51,7 +51,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     renderMark() {
-        return html `<slot name="chevron"
+        return html `<slot name="chevron" aria-hidden="true"
       ><svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
         ${unsafeSVG(caretRight.content)}
       </svg></slot

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

@@ -21,9 +21,16 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * which `Menu` shares.
  *
  * After each move the host carries `data-direction`, `forward` into a page or
- * `back` out of one, so a stylesheet can slide the new page in from the side
- * the reader is going. The styled tier does, and holds still under reduced
- * motion.
+ * `back` out of one, and records `:state(forward)` or `:state(back)`, so a
+ * stylesheet can slide the new page in from the side the reader is going. Both
+ * are written again on every move, so an animation keyed on them runs for each
+ * page, two moves the same way included. The styled tier slides the page and
+ * swaps it at once under `prefers-reduced-motion`.
+ *
+ * Keys, on a row: Up and Down Arrow move between the rows, Home and End go to
+ * the first and the last, and a typed letter moves to the next row whose name
+ * starts with it. Enter, Space, or Right Arrow opens a row's page, and Left
+ * Arrow or Escape goes back, the two arrows swapping on a right-to-left page.
  *
  * The rows of the page showing are a `menu`, named by `label` on the top page
  * and by the page's title below it. The back button and the title sit above
@@ -50,7 +57,9 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart page - The menu the rows are in.
  * @csspart title - The name of the page showing.
  *
+ * @cssstate back - The last move went back out of a page.
  * @cssstate drilled - A row's page is showing, so a frame around the drilldown can style itself for that depth.
+ * @cssstate forward - The last move went into a page.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
     /**
@@ -80,6 +89,8 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * not suppress it.
      */
     private direction?;
+    /** Whether a move happened since the last update, so its marks are written again. */
+    private moved;
     private readonly drilldown;
     /**
      * The rows on the page showing, which is what the keys move over.
@@ -139,6 +150,13 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Writes which way the last move went. After a move, the marks come off and
+     * the page's style is read before they go back on, so an animation keyed on
+     * them starts again for the new page: two moves the same way would otherwise
+     * leave the same rule in force and the second page would arrive still.
+     */
+    private markDirection;
     /** Walks the tree marking which rows are on the page showing. */
     private mark;
     /**

package/dist/drilldown/root/drilldown-root.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 { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadBy, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -15,6 +15,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         super(...arguments);
         this.label = 'Navigation';
         this.backLabel = 'Back';
+        this.moved = false;
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isDrilldownItem' in element && element.isDrilldownItem === true,
             root: () => [...this.children],
@@ -37,7 +38,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             })),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: (item) => item.words,
+            typeahead: typeaheadBy((item) => item.words),
         });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
@@ -100,6 +101,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             return;
         }
         this.direction = 'forward';
+        this.moved = true;
         this.updateComplete.then(() => this.items[0]?.focusItem());
     }
     back() {
@@ -108,6 +110,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             return false;
         }
         this.direction = 'back';
+        this.moved = true;
         this.updateComplete.then(() => leaving?.focusItem());
         return true;
     }
@@ -134,12 +137,27 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         }
         this.placeTabStop();
         this.toggleState('drilled', !this.drilldown.atRoot);
+        this.markDirection();
+    }
+    markDirection() {
+        if (this.moved) {
+            this.moved = false;
+            this.removeAttribute('data-direction');
+            this.toggleState('back', false);
+            this.toggleState('forward', false);
+            const page = this.partNamed('page');
+            if (page && typeof getComputedStyle === 'function') {
+                getComputedStyle(page).animationName;
+            }
+        }
         if (this.direction === undefined) {
             this.removeAttribute('data-direction');
         }
         else {
             this.setAttribute('data-direction', this.direction);
         }
+        this.toggleState('back', this.direction === 'back');
+        this.toggleState('forward', this.direction === 'forward');
     }
     mark(item, page, onPage) {
         item.onPage = onPage;
@@ -151,7 +169,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         }
     }
     renderBackIcon() {
-        return html `<slot name="back-icon"
+        return html `<slot name="back-icon" aria-hidden="true"
       ><svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
         ${unsafeSVG(caretLeft.content)}
       </svg></slot

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',
@@ -49,6 +50,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-create',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -56,10 +58,11 @@ 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',
@@ -114,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'],
@@ -128,7 +132,13 @@ registerElementEvents({
     ],
     'helix-headless-list': ['change', 'helix-action', 'helix-before-change'],
     'helix-headless-list-item': ['helix-action'],
-    'helix-headless-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-headless-listbox': [
+        'change',
+        'helix-before-change',
+        'helix-filter',
+        'helix-load-more',
+        'input',
+    ],
     'helix-headless-map': [
         'change',
         'helix-activate',
@@ -163,9 +173,12 @@ registerElementEvents({
     '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'],
@@ -176,7 +189,13 @@ 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',
@@ -184,6 +203,7 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -210,7 +230,7 @@ registerElementEvents({
     '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',
@@ -232,6 +252,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'helix-tour-status',
         'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
@@ -273,5 +294,10 @@ registerElementEvents({
     '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': ['helix-load-more', 'helix-range-change'],
+    '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;
     /**