@fusion.dev/helix-headless 0.143.0 → 0.145.0

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, HelixElement, lockScroll, MixinControllerOpen, onUnlessFalse, unlockScroll, } from '@fusion.dev/helix-core';
+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 { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -20,7 +21,36 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         this.label = '';
         this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
+        this.snapPoints = '';
+        this.swipe = true;
         this.returned = '';
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.panel,
+        });
+        this.rest = 0;
+        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),
+            move: (dx, dy) => this.place(Math.max(0, this.rest + towardEdge(this.edge, dx, dy))),
+            start: (target, event) => startsSwipe(target, event.pointerType, swipeAxis(this.edge), this.partNamed('content')),
+            surface: () => this.panel,
+        });
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape' ||
+                event.defaultPrevented ||
+                this.modal ||
+                !this.open ||
+                closedByKnown()) {
+                return;
+            }
+            event.preventDefault();
+            this.requestOpen(false);
+        };
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -57,25 +87,62 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             panel.returnValue = value;
         }
     }
-    get panel() {
-        return this.partNamed('panel');
+    get edge() {
+        return swipeEdge(this.placement ?? 'end', isRtl(this));
     }
-    nameByHeader() {
+    get extent() {
+        const box = this.panel?.getBoundingClientRect();
+        return (swipeAxis(this.edge) === 'x' ? box?.width : box?.height) ?? 0;
+    }
+    place(travel) {
         const panel = this.panel;
-        if (!panel || !('ariaLabelledByElements' in panel)) {
+        if (!panel) {
             return;
         }
-        const slot = this.renderRoot.querySelector('slot[name="header"]');
-        const heading = this.label || this.hasAttribute('aria-labelledby') ? [] : headingsIn(slot);
-        if (heading.length > 0) {
-            panel.ariaLabelledByElements = heading;
-            this.namedByHeader = true;
+        const { x, y } = edgeOffset(this.edge, travel);
+        const px = (value) => (value === 0 ? '' : `${Math.round(value)}px`);
+        panel.style.setProperty('--drawer-swipe-x', px(x));
+        panel.style.setProperty('--drawer-swipe-y', px(y));
+    }
+    settle(dx, dy, vx, vy) {
+        const edge = this.edge;
+        const size = this.extent;
+        const shown = settleSwipe({
+            points: parseSnapPoints(this.snapPoints),
+            size,
+            travel: Math.max(0, this.rest + towardEdge(edge, dx, dy)),
+            velocity: towardEdge(edge, vx, vy),
+        });
+        if (shown === 0 && this.requestOpen(false)) {
+            return;
+        }
+        if (shown !== 0) {
+            this.rest = snapTravel(size, shown);
+        }
+        this.place(this.rest);
+    }
+    show() {
+        this.requestOpen(true);
+    }
+    close(returnValue) {
+        const previous = this.returnValue;
+        if (returnValue !== undefined) {
+            this.returnValue = returnValue;
         }
-        else if (this.namedByHeader) {
-            panel.ariaLabelledByElements = null;
-            this.namedByHeader = false;
+        if (!this.requestOpen(false) && returnValue !== undefined) {
+            this.returnValue = previous;
         }
     }
+    get panel() {
+        return this.partNamed('panel');
+    }
+    nameByHeader() {
+        const slot = this.renderRoot.querySelector('slot[name="header"]');
+        const heading = this.label || this.hasAttribute('aria-labelledby')
+            ? []
+            : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
+        this.namedByHeader = reflectElements(this.panel, 'ariaLabelledByElements', heading, this.namedByHeader);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         unlockScroll(this);
@@ -83,6 +150,10 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
     updated(changed) {
         super.updated(changed);
         this.nameByHeader();
+        if (changed.has('open') && !this.open) {
+            this.rest = 0;
+            this.place(0);
+        }
         if (this.open && this.modal) {
             lockScroll(this);
         }
@@ -100,6 +171,8 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             else {
                 panel.show();
             }
+            this.rest = snapTravel(this.extent, parseSnapPoints(this.snapPoints)[0] ?? 1);
+            this.place(this.rest);
         }
         else if (!this.open && panel.open) {
             panel.close();
@@ -114,9 +187,11 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
+      @keydown=${this.handleKeydown}
     >
       <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>
     </dialog>`;
     }
 };
@@ -132,13 +207,14 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDrawer.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'snap-points' })
+], HelixHeadlessDrawer.prototype, "snapPoints", void 0);
+__decorate([
+    property({ converter: onUnlessFalse })
+], HelixHeadlessDrawer.prototype, "swipe", void 0);
 HelixHeadlessDrawer = __decorate([
     customElement('helix-headless-drawer')
 ], HelixHeadlessDrawer);
 export { HelixHeadlessDrawer };
-const headingsIn = (slot) => {
-    const assigned = slot?.assignedElements({ flatten: true }) ?? [];
-    const heading = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
-    const found = assigned.flatMap((one) => one.matches(heading) ? [one] : [...one.querySelectorAll(heading)].slice(0, 1));
-    return found.length > 0 ? found.slice(0, 1) : assigned;
-};
+const closedByKnown = () => typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;

package/dist/drawer/swipe-start.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a press may start swiping a drawer away.
+ *
+ * Not a mouse, which drags to select text. Not a press on a field or on
+ * editable text, which drags to move its caret. And not a press inside a
+ * scroller that can scroll along the swipe, which drags to scroll, so a bottom
+ * sheet holding a long list scrolls the list.
+ */
+export declare const startsSwipe: (target: Element, pointerType: string, axis: 'x' | 'y', scroller: Element | null | undefined) => boolean;

package/dist/drawer/swipe-start.js

@@ -0,0 +1,12 @@
+const EDITABLE = 'input, select, textarea, [contenteditable]:not([contenteditable="false"])';
+export const startsSwipe = (target, pointerType, axis, scroller) => {
+    if (pointerType === 'mouse' || target.closest(EDITABLE)) {
+        return false;
+    }
+    if (!scroller || !(scroller === target || scroller.contains(target))) {
+        return true;
+    }
+    return axis === 'x'
+        ? scroller.scrollWidth <= scroller.clientWidth
+        : scroller.scrollHeight <= scroller.clientHeight;
+};

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

@@ -29,6 +29,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/drilldown
  *
  * @slot - The row's label.
+ * @slot chevron - Replaces the caret of a row that opens a page, such as with your own icon.
  * @slot end - Content after the label, usually an icon or a count.
  * @slot page - The rows of the page this row opens.
  * @slot start - Content before the label, usually an icon.
@@ -65,15 +66,14 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      */
     readonly isDrilldownItem = true;
     /**
-     * Whether the page showing is the one this row is on.
-     *
-     * Written by the stack.
+     * @internal Whether the page showing is the one this row is on. Written by
+     * the stack, and not a consumer's to set: a framework reading `onPage` as an
+     * event handler is why it is kept off the typings.
      */
     onPage: boolean;
     /**
-     * Whether this row's own page is the one showing.
-     *
-     * Written by the stack.
+     * @internal Whether this row's own page is the one showing. Written by the
+     * stack.
      */
     showingPage: boolean;
     /**
@@ -134,6 +134,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     get selected(): boolean;
     /** Fires `helix-select` for this row. */
     select(): void;
+    /**
+     * The caret of a row that opens a page, as the `chevron` slot's fallback, so
+     * an icon of your own replaces it by being slotted.
+     */
+    protected renderMark(): TemplateResult;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

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

@@ -50,6 +50,13 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         }
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
+    renderMark() {
+        return html `<slot name="chevron"
+      ><svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretRight.content)}
+      </svg></slot
+    >`;
+    }
     render() {
         if (this.showingPage) {
             return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
@@ -69,11 +76,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
-      ${this.page
-            ? html `<svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
-              ${unsafeSVG(caretRight.content)}
-            </svg>`
-            : nothing}
+      ${this.page ? this.renderMark() : nothing}
     </button>
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }

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

@@ -20,6 +20,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * and reads the rest from the DOM. The behavior lives in `DrilldownController`,
  * 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.
+ *
  * 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
  * the menu. Disabled rows stay reachable with the arrow keys, and typing a
@@ -32,6 +37,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/drilldown
  *
  * @slot - The rows of the top page.
+ * @slot back-icon - Replaces the icon on the back button.
  *
  * @event {HelixSelectEvent} helix-select - Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
@@ -135,6 +141,11 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     protected updated(changed: PropertyValues): void;
     /** Walks the tree marking which rows are on the page showing. */
     private mark;
+    /**
+     * The back button's icon, as the `back-icon` slot's fallback, so an icon of
+     * your own replaces it by being slotted.
+     */
+    protected renderBackIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/drilldown/root/drilldown-root.js

@@ -150,14 +150,19 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             }
         }
     }
+    renderBackIcon() {
+        return html `<slot name="back-icon"
+      ><svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretLeft.content)}
+      </svg></slot
+    >`;
+    }
     render() {
         return html `${this.drilldown.atRoot
             ? ''
             : html `<div part="header">
             <button part="back" type="button" aria-label=${this.backLabel} @click=${() => this.back()}>
-              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                ${unsafeSVG(caretLeft.content)}
-              </svg>
+              ${this.renderBackIcon()}
             </button>
             <span id="title" part="title">${this.drilldown.label}</span>
           </div>`}

package/dist/element-events.generated.js

@@ -4,6 +4,7 @@ registerElementEvents({
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
         'helix-before-reconnect',
@@ -21,7 +22,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'],
@@ -58,11 +59,13 @@ registerElementEvents({
         'helix-select',
         'toggle',
     ],
-    'helix-headless-copy-button': ['helix-copy'],
+    'helix-headless-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-headless-data-table': [
         'helix-activate',
+        'helix-expand',
         'helix-filter',
         'helix-filtered',
+        'helix-load-more',
         'helix-navigate',
         'helix-reorder',
         'helix-reordered',
@@ -84,7 +87,7 @@ registerElementEvents({
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drilldown': ['helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
-    'helix-headless-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-headless-filter-chip': ['helix-dismiss'],
     'helix-headless-filter-input': [
         'change',
@@ -110,10 +113,11 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-headless-heatmap': ['helix-resize'],
-    'helix-headless-icon': ['error'],
+    'helix-headless-icon': ['error', 'load'],
     'helix-headless-image': ['error', 'load'],
-    'helix-headless-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-kbd': ['helix-shortcut'],
+    'helix-headless-legend': ['change', 'helix-before-change'],
     'helix-headless-lightbox': [
         'close',
         'helix-activate',
@@ -122,6 +126,8 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    '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-map': [
         'change',
@@ -135,6 +141,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'],
@@ -151,9 +158,15 @@ 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-copy',
+        'helix-filter',
+        'helix-filtered',
+    ],
     'helix-headless-option': ['helix-select'],
     'helix-headless-outline': ['helix-activate'],
     'helix-headless-pagination': ['helix-activate', 'helix-navigate'],
@@ -163,7 +176,8 @@ 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', 'input'],
+    'helix-headless-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-headless-scroll-area': ['scroll', 'scrollend'],
     'helix-headless-select': [
         'change',
         'helix-before-change',
@@ -191,10 +205,11 @@ 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-time-input': [
         'change',
@@ -221,9 +236,42 @@ registerElementEvents({
     ],
     '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': ['helix-load-more', 'helix-range-change'],
 });

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

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

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

@@ -16,6 +16,12 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * visible trigger is a `<label for>`. The label is not focusable. The input is,
  * and Enter and Space on it open the picker.
  *
+ * Files arrive from the picker, a drop, or a paste onto the field, and each one
+ * is screened: `accept`, `max-file-size`, `max-files` and your own `validate`
+ * can refuse it. A refused file is left out, `helix-reject` lists each one with
+ * its reason, and a reader hears `rejected-text` with the names filled in.
+ * `directory` asks the picker for a folder.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -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.
      *