@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/donut-chart/root/donut-chart-root.js

@@ -8,6 +8,18 @@ import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource,
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+const PERCENTS = new Map();
+const percentIn = (locale) => {
+    let found = PERCENTS.get(locale);
+    if (!found) {
+        found = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 0,
+            style: 'percent',
+        });
+        PERCENTS.set(locale, found);
+    }
+    return found;
+};
 const CENTER = PLOT_WIDTH / 2;
 const EDGE = 40;
 const GAP = 9999;
@@ -36,34 +48,38 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     get shares() {
         const series = this.series;
-        const values = (series[0]?.points ?? [])
-            .map((point) => point.value)
-            .map((value) => (Number.isFinite(value) && value > 0 ? value : 0));
+        const points = series[0]?.points ?? [];
+        const values = points.map((point) => Number.isFinite(point.value) && point.value > 0 ? point.value : 0);
         const total = values.reduce((sum, one) => sum + one, 0);
         if (total === 0) {
             return [];
         }
         let start = 0;
-        return values.map((value) => {
+        return values.map((value, index) => {
             const fraction = value / total;
             const at = start;
             start += fraction;
-            return { fraction, start: at };
+            return { fraction, row: points[index]?.at ?? index, start: at };
         });
     }
     render() {
         const shares = this.shares;
-        return html `${this.renderPlot(shares)}
-`;
+        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}`;
+    }
+    renderSummary(shares) {
+        const rows = this.sourceRows;
+        const parts = shares.map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(this.locale).format(share.fraction)}`);
+        const named = this.named ? `${this.named}: ` : '';
+        return html `<p part="summary">${named}${parts.join(', ')}.</p>`;
     }
     renderPlot(shares) {
         return html `<div
-      aria-hidden="true"
       id=${CHART_PLOT}
       part="plot"
       style="--donut-chart-stroke: ${this.thickness}"
     >
       <svg
+        aria-hidden="true"
         data-mirror=${this.sweep === 'half' ? '' : nothing}
         viewBox=${this.frame}
         xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +116,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
       data-series=${seriesIndex(index)}
       fill="none"
       style="--chart-series: var(--chart-series-${seriesIndex(index)})"
-      @pointerenter=${() => this.pointer.set(index)}
+      @pointerenter=${(event) => {
+            if (this.pointer.accepts(event)) {
+                this.pointer.set(index);
+            }
+        }}
       part="segment${active ? ' segment-active' : ''}"
       r=${this.radius}
       stroke-dasharray="${length} ${GAP}"
@@ -153,7 +173,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const y = ((CENTER + Math.sin(angle) * edge - top) / tall) * 100;
         const turned = this.sweep === 'half' && this.pointer.mirrored;
         const across = Math.cos(angle) > 0 !== turned;
-        return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+        return drawTooltip(this.sourceRows, share.row, this.tag('tooltip'), {
             fixed: this.sweep !== 'half',
             placement: Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))
                 ? across

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

@@ -1,4 +1,4 @@
-import { CommandController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -9,11 +9,18 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * `helix-before-open` and `helix-before-close` events work the same way as on
  * an accordion item.
  *
- * The drawer is modal by default, which means three things:
+ * The drawer is modal by default, which means four things:
  *
  * - focus is trapped inside
  * - Escape and a press outside close it
  * - the page behind is covered
+ * - the page behind does not scroll
+ *
+ * A drawer with `modal="false"` leaves the page usable and still closes on
+ * Escape.
+ *
+ * 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.
  *
  * Content stays mounted when the drawer is closed, so it is in the server
  * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -41,7 +48,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @event {Event} close - Sent from the host after the drawer closes, because the native `close` event does not leave the shadow root.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the panel closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the panel opens, and cancelable. Canceling it keeps the panel closed.
- * @event {Event} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling content region.
  * @csspart header - The header region.
@@ -65,9 +72,11 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      */
     closedBy?: 'any' | 'closerequest' | 'none';
     /**
-     * Accessible name for the panel.
+     * Accessible name for the panel. When it is empty, the heading in the
+     * `header` slot names the panel.
      */
     label: string;
+    protected readonly aria: AriaForwardController;
     /**
      * Whether the drawer blocks the page behind it.
      *
@@ -126,11 +135,27 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     /**
      * A press on the backdrop, which lands on the dialog element itself.
      *
-     * The panel fills only part of the dialog's box, so a press beside it hits
-     * the dialog and not a child. A native `<dialog>` does not close on that, and
-     * it is the gesture that most obviously means close.
+     * A native `<dialog>` does not close on that, and it is the gesture that most
+     * obviously means close.
+     *
+     * **The target alone is not enough.** The panel is the `<dialog>`, and a
+     * press in its own padding has the dialog as its target too, the same as a
+     * press on the backdrop. So the point is compared against the panel's box,
+     * as `Dialog` does.
      */
     private readonly handleBackdrop;
+    /** Whether the `header` slot's heading is what currently names the panel. */
+    private namedByHeader;
+    /**
+     * Names the panel by its heading, where nothing else names it.
+     *
+     * An element reference, because the heading is in the light DOM and the
+     * `<dialog>` is in this shadow root, which an IDREF cannot cross. `label` and
+     * an `aria-labelledby` on the host come first. A browser without element
+     * reflection keeps the fallback name.
+     */
+    private nameByHeader;
+    disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/drawer/root/drawer-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 { CommandController, customElement, HelixElement, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, HelixElement, lockScroll, MixinControllerOpen, onUnlessFalse, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
@@ -18,6 +18,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             },
         });
         this.label = '';
+        this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
         this.returned = '';
         this.handleCancel = (event) => {
@@ -31,10 +32,20 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             this.relayNativeEvent(event);
         };
         this.handleBackdrop = (event) => {
-            if (event.target === this.panel && this.modal) {
-                this.requestOpen(false);
+            const panel = this.panel;
+            if (!panel || event.target !== panel || !this.modal) {
+                return;
+            }
+            const box = panel.getBoundingClientRect();
+            if (event.clientX >= box.left &&
+                event.clientX <= box.right &&
+                event.clientY >= box.top &&
+                event.clientY <= box.bottom) {
+                return;
             }
+            this.requestOpen(false);
         };
+        this.namedByHeader = false;
     }
     get returnValue() {
         return this.panel?.returnValue ?? this.returned;
@@ -49,8 +60,35 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
     get panel() {
         return this.partNamed('panel');
     }
+    nameByHeader() {
+        const panel = this.panel;
+        if (!panel || !('ariaLabelledByElements' in 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;
+        }
+        else if (this.namedByHeader) {
+            panel.ariaLabelledByElements = null;
+            this.namedByHeader = false;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScroll(this);
+    }
     updated(changed) {
         super.updated(changed);
+        this.nameByHeader();
+        if (this.open && this.modal) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
         const panel = this.panel;
         if (!panel) {
             return;
@@ -68,15 +106,16 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         }
     }
     render() {
+        const closedBy = this.closedBy ?? (this.modal ? undefined : 'closerequest');
         return html `<dialog
       part="panel"
-      closedby=${this.closedBy ?? nothing}
+      closedby=${closedBy ?? nothing}
       aria-label=${this.label || 'Drawer'}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
     >
-      <div part="header"><slot name="header"></slot></div>
+      <div part="header"><slot name="header" @slotchange=${this.nameByHeader}></slot></div>
       <div part="content"><slot></slot></div>
     </dialog>`;
     }
@@ -97,3 +136,9 @@ 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;
+};

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

@@ -112,21 +112,24 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /**
-     * Whether this is the current row, which in a drill-down is the row with
-     * focus.
+     * Whether the row has focus, which makes it the row the keyboard is on.
      *
-     * A radio group's selection is an answer it holds; a page of rows has no
-     * answer, only the row a reader has walked to, so focus is the whole of what
-     * "the current one" can mean here. This is `Menu.Item`'s reading word for
-     * word, and the two are one pattern: a menu that drills and a drill-down are
-     * the same rows through the same controller.
+     * `Option` calls the same thing `active`. A page of rows holds no answer the
+     * way a radio group does, only the row a reader has walked to, so focus is
+     * the whole of what "the current one" can mean here. This is `Menu.Item`'s
+     * reading word for word, and the two are one pattern: a menu that drills and
+     * a drill-down are the same rows through the same controller.
      *
-     * Asked of the document rather than of the shadow root. `focusItem` puts
-     * focus on the control inside this row and the platform retargets it, so from
-     * outside the shadow tree `activeElement` is this element already and nothing
-     * has to walk a tree. `ShadowRoot.activeElement` is also the reading that does
-     * not survive happy-dom, which climbs `getRootNode()` to the top and then
-     * dereferences what it ran out of.
+     * The focused node is found through every shadow root and asked whether it
+     * is in this row's own, as `Menu.Item` does, so a drill-down inside another
+     * component's shadow root still knows its current row.
+     */
+    get active(): boolean;
+    /**
+     * Whether the row has focus, the same as `active`.
+     *
+     * @deprecated Read `active`. Everywhere else in the library `selected` means
+     * chosen out of a set, and a drill-down row is never chosen that way.
      */
     get selected(): boolean;
     /** Fires `helix-select` for this row. */

package/dist/drilldown/item/drilldown-item.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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -37,8 +37,12 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     focusItem() {
         this.partNamed('item')?.focus();
     }
+    get active() {
+        const active = deepActiveElement();
+        return active !== null && active.getRootNode() === this.renderRoot;
+    }
     get selected() {
-        return this.ownerDocument.activeElement === this;
+        return this.active;
     }
     select() {
         if (this.disabled) {

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
@@ -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.
  *
+ * 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
+ * letter moves to the next row whose name starts with it.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -36,14 +41,18 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart header - The bar above a page, which holds the back button and the page's name.
  * @csspart live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
  * @csspart loading - Shown while the entries load.
- * @csspart page - The region the rows are in.
+ * @csspart page - The menu the rows are in.
  * @csspart title - The name of the page showing.
  *
  * @cssstate drilled - A row's page is showing, so a frame around the drilldown can style itself for that depth.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
     /**
-     * The region's name, read by screen readers.
+     * The name of the top page's menu, read by screen readers. A page below it is
+     * named by its title.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the top page too,
+     * and wins over this.
      */
     label: string;
     /**
@@ -66,8 +75,16 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      */
     private direction?;
     private readonly drilldown;
-    /** The rows on the page showing, which is what the keys move over. */
+    /**
+     * The rows on the page showing, which is what the keys move over.
+     *
+     * Disabled rows included. A row renders `aria-disabled` and keeps its
+     * `tabindex` so a reader can reach it and hear why it cannot be chosen, and
+     * `select()` is what refuses it.
+     */
     private get items();
+    /** Carries a host `aria-label` and `aria-labelledby` to the menu. */
+    protected readonly aria: AriaForwardController;
     /**
      * Moving between rows, which is `Menu`'s arrangement and not a second one.
      *
@@ -115,7 +132,6 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     private readonly handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** 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 { customElement, DrilldownController, HelixElement, hostAria, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -20,14 +20,28 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             root: () => [...this.children],
             slot: 'page',
         });
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('page'),
+        });
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.items,
+            items: () => this.items.map((item) => ({
+                contains: (node) => item.contains(node),
+                disabled: false,
+                focusItem: () => item.focusItem(),
+                select: () => item.select(),
+                get selected() {
+                    return item.active;
+                },
+                words: slottedWords(item, ['']),
+            })),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
+            typeahead: (item) => item.words,
         });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
-            if (item && !item.disabled) {
+            if (item) {
                 for (const row of this.drilldown.rows) {
                     row.focusable = row === item;
                 }
@@ -71,7 +85,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         };
     }
     get items() {
-        return this.drilldown.rows.filter((item) => !item.disabled);
+        return this.drilldown.rows;
     }
     placeTabStop() {
         const items = this.items;
@@ -109,10 +123,6 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'menu' });
-    }
     updated(changed) {
         super.updated(changed);
         const page = this.drilldown.page;
@@ -149,9 +159,15 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
                 ${unsafeSVG(caretLeft.content)}
               </svg>
             </button>
-            <span part="title">${this.drilldown.label}</span>
+            <span id="title" part="title">${this.drilldown.label}</span>
           </div>`}
-      <div aria-busy=${this.loading ? 'true' : nothing} part="page">
+      <div
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.drilldown.atRoot ? this.label || nothing : nothing}
+        aria-labelledby=${this.drilldown.atRoot ? nothing : 'title'}
+        part="page"
+        role="menu"
+      >
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
       </div>${this.renderLive(this.hasRows)}`;

package/dist/element-events.generated.js

@@ -19,9 +19,9 @@ registerElementEvents({
         'helix-remove',
         'helix-select',
     ],
-    'helix-headless-carousel': ['helix-select'],
-    'helix-headless-chat': ['helix-before-pin', 'helix-history', 'helix-send'],
-    'helix-headless-chat-composer': ['helix-send'],
+    '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-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -51,14 +51,25 @@ registerElementEvents({
         'input',
         'toggle',
     ],
-    'helix-headless-command': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-headless-command': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
     'helix-headless-copy-button': ['helix-copy'],
     'helix-headless-data-table': [
+        'helix-activate',
         'helix-filter',
+        'helix-filtered',
         'helix-navigate',
         'helix-reorder',
+        'helix-reordered',
         'helix-select',
+        'helix-selected',
         'helix-sort',
+        'helix-sorted',
     ],
     'helix-headless-date-input': [
         'change',
@@ -99,6 +110,7 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-headless-heatmap': ['helix-resize'],
+    'helix-headless-icon': ['error'],
     'helix-headless-image': ['error', 'load'],
     'helix-headless-input': ['change', 'helix-before-change', 'input'],
     'helix-headless-kbd': ['helix-shortcut'],
@@ -112,7 +124,10 @@ registerElementEvents({
     ],
     'helix-headless-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
     'helix-headless-map': [
+        'change',
         'helix-activate',
+        'helix-before-change',
+        'helix-before-toggle',
         'helix-map-cluster',
         'helix-map-pan',
         'helix-map-part-change',
@@ -133,18 +148,19 @@ registerElementEvents({
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-headless-menu-item': ['helix-select'],
+    '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'],
+    'helix-headless-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-notifications': ['helix-dismiss', 'helix-read'],
     'helix-headless-number-input': ['change', 'helix-before-change', 'input'],
     'helix-headless-object-inspector': ['helix-copy'],
     'helix-headless-option': ['helix-select'],
     'helix-headless-outline': ['helix-activate'],
-    'helix-headless-pagination': ['helix-navigate'],
-    'helix-headless-pagination-size': ['helix-before-change'],
+    'helix-headless-pagination': ['helix-activate', 'helix-navigate'],
+    'helix-headless-pagination-size': ['change', 'helix-before-change', 'input'],
     'helix-headless-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],
     'helix-headless-popover': ['helix-before-close', 'helix-before-open', 'toggle'],
+    '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'],
@@ -153,6 +169,7 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-filter',
         'input',
         'toggle',
     ],
@@ -164,11 +181,17 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-speed-dial-item': ['helix-select'],
-    'helix-headless-splitter': ['helix-before-collapse', 'helix-before-resize'],
+    'helix-headless-splitter': [
+        'helix-before-collapse',
+        'helix-before-resize',
+        'helix-collapse',
+        'helix-resized',
+    ],
     'helix-headless-step': ['helix-select'],
     '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-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
@@ -188,10 +211,13 @@ registerElementEvents({
     'helix-headless-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-headless-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-tour': [
+        'helix-activate',
         'helix-before-activate',
         'helix-before-close',
+        'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
     'helix-headless-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],

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

@@ -24,6 +24,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 trigger - The content that opens the picker when pressed.
  *
  * @event {Event} change - Fired after the value changes.
@@ -58,7 +59,10 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
     protected readonly aria: AriaForwardController;
     /**
-     * Which files the picker offers, as a native `accept` list.
+     * Which files the picker offers and a drop takes, as a native `accept` list.
+     *
+     * A dropped file the list does not name is left out, because the picker's
+     * filter is the only check the platform makes and a drop never meets it.
      */
     accept: string;
     /**
@@ -185,8 +189,21 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
     private readonly handleDragOver;
     private readonly handleDragLeave;
     private readonly handleDrop;
+    /**
+     * Removes a file and keeps focus in the field.
+     *
+     * The pressed button goes with its file, so focus moves to the file that took
+     * its place, or to the one before it, or to the input once the list is empty:
+     * left alone, it fell to the page's body.
+     */
     private readonly handleRemove;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Reports again on every update, so a new `name` or `required` reaches the
+     * form. Only a pick and the first render reported, so the form kept the old
+     * name and the old verdict.
+     */
+    protected updated(changed: PropertyValues): void;
     /** Moves focus to the native file input, as a label pointing at it would. */
     focus(options?: FocusOptions): void;
     /**