@fusion.dev/helix-headless 0.145.0 → 0.147.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, 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, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, 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 ||
@@ -51,6 +64,16 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             event.preventDefault();
             this.requestOpen(false);
         };
+        this.scope = new FocusScopeController(this, {
+            contain: () => this.open && this.modal,
+            contents: () => [
+                ...['header', '', 'footer'].flatMap((name) => this.renderRoot
+                    ?.querySelector(name ? `slot[name="${name}"]` : 'slot:not([name])')
+                    ?.assignedElements({ flatten: true }) ?? []),
+                ...[...(this.panel?.children ?? [])].filter((one) => one.localName === 'button'),
+            ],
+            surface: () => this.panel,
+        });
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -117,9 +140,33 @@ 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 at = nearest(points, point);
+        if (at !== undefined) {
+            this.restAt(at);
+        }
     }
     show() {
         this.requestOpen(true);
@@ -143,8 +190,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 +204,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 +225,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 +245,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.d.ts

@@ -13,6 +13,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * - On the page that is showing, it renders its row.
  * - When its own page is showing, it renders only that page's rows. Its row
  *   belongs to the page above.
+ * - When a page further down its own is showing, it renders its page's slot
+ *   alone, so the rows below reach the page.
  * - Otherwise it renders nothing. The rows stay in the light DOM untouched, so
  *   there is no state to keep.
  *
@@ -23,6 +25,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * `aria-haspopup`, the same way `Menu` marks a row with a submenu. The server
  * render leaves both out, because the server cannot see the children.
  *
+ * The row is named by its label alone. Words in `description`, a line under
+ * the label, and in `end` describe it instead, through `aria-describedby`, as
+ * `Menu.Item` does: a reader hears "Theme", then "Dark".
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Panel item, Drill row
@@ -30,7 +36,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @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 description - A line under the label that describes the row. It describes the row to a screen reader and is not part of its name.
+ * @slot end - Content after the label, such as the setting a page holds or a count. It describes the row and is not part of its name.
  * @slot page - The rows of the page this row opens.
  * @slot start - Content before the label, usually an icon.
  *
@@ -71,6 +78,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * event handler is why it is kept off the typings.
      */
     onPage: boolean;
+    /**
+     * @internal Whether the page showing is below this row's own, deeper than one
+     * level. Written by the stack.
+     */
+    onPath: boolean;
     /**
      * @internal Whether this row's own page is the one showing. Written by the
      * stack.
@@ -89,6 +101,10 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * render would open with no caret on the row that leads to it.
      */
     private page;
+    /** Whether anything is slotted under the label, read the way `page` is. */
+    private description;
+    /** Whether anything is slotted after the label, read the way `page` is. */
+    private end;
     /**
      * Reads the children before each render, where they can be known.
      *
@@ -109,6 +125,10 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * the same note.
      */
     private readonly readPage;
+    /** Re-reads whether the line under the label or the words after it are filled. */
+    private readonly readWords;
+    /** What describes the row: the line under its label and the words after it. */
+    private get describedBy();
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /**

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, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -16,24 +16,41 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.focusable = false;
         this.isDrilldownItem = true;
         this.onPage = true;
+        this.onPath = false;
         this.showingPage = false;
         this.value = '';
         this.page = false;
+        this.description = false;
+        this.end = false;
         this.readPage = () => {
             const slot = this.renderRoot.querySelector('slot[name="page"]');
             this.page = (slot?.assignedElements().length ?? 0) > 0;
         };
+        this.readWords = () => {
+            const slot = (name) => this.renderRoot.querySelector(`slot[name="${name}"]`);
+            this.description = slotFilled(slot('description'));
+            this.end = slotFilled(slot('end'));
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.childrenKnown) {
-            this.page = this.knownChildren.some((child) => child.slot === 'page');
+            const named = (name) => this.knownChildren.some((child) => child.slot === name);
+            this.page = named('page');
+            this.description = named('description');
+            this.end = named('end');
         }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    get describedBy() {
+        const ids = [this.description ? 'description' : '', this.end ? 'end' : '']
+            .filter((id) => id !== '')
+            .join(' ');
+        return ids === '' ? nothing : ids;
+    }
     focusItem() {
         this.partNamed('item')?.focus();
     }
@@ -51,14 +68,14 @@ 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
     >`;
     }
     render() {
-        if (this.showingPage) {
+        if (this.showingPage || this.onPath) {
             return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
         }
         if (!this.onPage) {
@@ -68,14 +85,23 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       part="item"
       type="button"
       role="menuitem"
+      aria-describedby=${this.describedBy}
       aria-disabled=${this.disabled ? 'true' : nothing}
       aria-haspopup=${this.page ? 'menu' : nothing}
       tabindex=${this.focusable ? '0' : '-1'}
+      ?data-described=${this.description}
       @click=${() => this.select()}
     >
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
-      <slot name="end"></slot>
+      <slot
+        id="description"
+        name="description"
+        aria-hidden="true"
+        ?data-empty=${!this.description}
+        @slotchange=${this.readWords}
+      ></slot>
+      <slot id="end" name="end" aria-hidden="true" @slotchange=${this.readWords}></slot>
       ${this.page ? this.renderMark() : nothing}
     </button>
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
@@ -90,6 +116,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDrilldownItem.prototype, "onPath", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "showingPage", void 0);
@@ -99,6 +128,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDrilldownItem.prototype, "page", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "description", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "end", void 0);
 HelixHeadlessDrilldownItem = __decorate([
     customElement('helix-headless-drilldown-item')
 ], HelixHeadlessDrilldownItem);

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, typeaheadByWords, } 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: typeaheadByWords(),
         });
         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,16 +137,32 @@ 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;
         item.showingPage = item === page;
+        item.onPath = page !== null && item !== page && item.contains(page);
         for (const child of item.children) {
             if (child instanceof HelixHeadlessDrilldownItem && child.slot === 'page') {
                 this.mark(child, page, item === page);
@@ -151,7 +170,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',
@@ -112,8 +115,9 @@ registerElementEvents({
         'helix-graph-signal',
         'helix-graph-zoom',
     ],
-    'helix-headless-heatmap': ['helix-resize'],
+    'helix-headless-heatmap': ['change', 'helix-before-change', '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',
@@ -156,6 +166,7 @@ registerElementEvents({
     '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-before-toggle', 'helix-select'],
+    'helix-headless-meter': ['helix-band'],
     'helix-headless-notification': ['helix-dismiss', 'helix-read'],
     'helix-headless-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
@@ -163,9 +174,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'],
@@ -173,10 +187,17 @@ registerElementEvents({
     '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-progress': ['helix-complete'],
     '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 +205,7 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -200,6 +222,7 @@ registerElementEvents({
         'helix-before-resize',
         'helix-collapse',
         'helix-resized',
+        'input',
     ],
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
@@ -210,7 +233,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 +255,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'helix-tour-status',
         'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
@@ -273,5 +297,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',
+    ],
 });