@fusion.dev/helix-headless 0.144.0 → 0.145.0

package/dist/data-table/tree.js

@@ -0,0 +1,55 @@
+import { at } from '../table/column/table-column.js';
+import { filter, parse, sort } from './root/order.js';
+export const childrenOf = (row, field) => {
+    const value = at(row, field);
+    return Array.isArray(value) ? value : [];
+};
+export const grow = (rows, axes, { field, isOpen, query, spec, }) => {
+    const searching = query.trim() !== '';
+    const order = parse(spec);
+    const every = [];
+    const kept = new Set();
+    const seen = new Set();
+    const keep = (row) => {
+        if (seen.has(row)) {
+            return kept.has(row);
+        }
+        seen.add(row);
+        every.push(row);
+        let below = false;
+        for (const child of childrenOf(row, field)) {
+            below = keep(child) || below;
+        }
+        const stays = below || !searching || filter([row], query, axes).length > 0;
+        if (stays) {
+            kept.add(row);
+        }
+        return stays;
+    };
+    for (const row of rows) {
+        keep(row);
+    }
+    const placed = new Map();
+    const shown = [];
+    const lay = (level, depth, parent) => {
+        const siblings = sort(level.filter((row) => kept.has(row) && !placed.has(row)), order, axes);
+        for (const [index, row] of siblings.entries()) {
+            const children = childrenOf(row, field).filter((child) => kept.has(child));
+            const open = children.length > 0 && (searching || isOpen(row));
+            placed.set(row, {
+                branch: children.length > 0,
+                level: depth,
+                open,
+                parent,
+                position: index + 1,
+                siblings: siblings.length,
+            });
+            shown.push(row);
+            if (open) {
+                lay(children, depth + 1, row);
+            }
+        }
+    };
+    lay(rows, 1, undefined);
+    return { every, placed, rows: shown, total: every.length };
+};

package/dist/description-list/item/description-list-item.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One label and its value.
  *
@@ -12,11 +12,17 @@ import { type TemplateResult } from 'lit';
  * such as a tag, an avatar, or a link. The label is almost always text, so it
  * is also a property.
  *
+ * **For a label with several values, write each value as a `<dd>`**, such as
+ * the authors of a paper. The item then puts your `<dd>` elements after its
+ * `<dt>` in place of its own, so a screen reader hears one term and each of
+ * its descriptions, as in a native `<dl>`. A server cannot see your elements,
+ * so the served item wraps them in its own `<dd>` until it runs.
+ *
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
- * @slot - The value.
+ * @slot - The value, or several `<dd>` elements for several values.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
  * @csspart label - The `<dt>`, holding the label.
@@ -31,7 +37,16 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      * that varies and is often more than text.
      */
     label: string;
+    /**
+     * Whether the values are the consumer's own `<dd>` elements, which the item
+     * then does not wrap. Unknown on a server and while hydrating, where the
+     * item draws its own.
+     */
+    private get several();
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /** A value arriving or leaving can change whether the item wraps them. */
+    private readonly handleSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/description-list/item/description-list-item.js

@@ -11,10 +11,23 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     constructor() {
         super(...arguments);
         this.label = '';
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    get several() {
+        return this.knownChildren.some((child) => child.localName === 'dd');
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
-        return html `<dt part="label"><slot name="label">${this.label}</slot></dt>
-      <dd part="value"><slot></slot></dd>`;
+        const label = html `<dt part="label"><slot name="label">${this.label}</slot></dt>`;
+        return this.several
+            ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
+            : html `${label}
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot></dd>`;
     }
 };
 __decorate([

package/dist/description-list/root/description-list-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A list of labels and their values, such as a details panel.
  *
@@ -15,6 +15,11 @@ import { type TemplateResult } from 'lit';
  * matches a plain `<dl>` with the same content node for node, both with a
  * slotted label and with an item set to `display: contents`.
  *
+ * **A named list is a named group.** A `<dl>` takes no name in ARIA 1.2, so
+ * the list becomes a group around it when it has `label`, `aria-label` or
+ * `aria-labelledby`, and the name lands on the group. Unnamed, the host adds
+ * nothing to the tree.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -42,6 +47,27 @@ export declare class HelixHeadlessDescriptionList extends HelixElement {
      * and React reports that as a hydration mismatch.
      */
     direction?: 'row';
+    /**
+     * The list's name, read by screen readers, such as "Server details". It
+     * makes the list a named group.
+     */
+    label: string;
+    /**
+     * Hears a name written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * and `ariaLabelledByElements` belong to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A name written
+     * or taken off asks for an update, because it decides whether the list is a
+     * group.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** Whether anything names the list. */
+    private get named();
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/description-list/root/description-list-root.js

@@ -4,10 +4,32 @@ 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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDescriptionList = class HelixHeadlessDescriptionList extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label', 'aria-labelledby'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label' || name === 'aria-labelledby') {
+            this.requestUpdate();
+        }
+    }
+    get named() {
+        return (this.label !== '' ||
+            Boolean(this.getAttribute?.('aria-label')) ||
+            Boolean(this.getAttribute?.('aria-labelledby')));
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label, role: this.named ? 'group' : '' });
+    }
     render() {
         return html `<dl part="list"><slot></slot></dl>`;
     }
@@ -15,6 +37,9 @@ let HelixHeadlessDescriptionList = class HelixHeadlessDescriptionList extends He
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDescriptionList.prototype, "direction", void 0);
+__decorate([
+    property()
+], HelixHeadlessDescriptionList.prototype, "label", void 0);
 HelixHeadlessDescriptionList = __decorate([
     customElement('helix-headless-description-list')
 ], HelixHeadlessDescriptionList);

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

@@ -22,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'],
@@ -62,8 +62,10 @@ registerElementEvents({
     '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',
@@ -124,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',
@@ -137,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'],
@@ -153,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'],
@@ -166,6 +177,7 @@ registerElementEvents({
     '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-scroll-area': ['scroll', 'scrollend'],
     'helix-headless-select': [
         'change',
         'helix-before-change',
@@ -193,8 +205,8 @@ 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'],
@@ -224,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/filter-input/menu/filter-menu.d.ts

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

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

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

package/dist/image/root/image-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, DelayController, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
@@ -100,6 +100,14 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.settle();
+        if (this.alt === undefined && this.getAttribute('aria-hidden') !== 'true') {
+            reportRuntime({
+                kind: 'missing-alt',
+                message: `<${this.localName}> has no \`alt\`, so a screen reader announces its file name. ` +
+                    'Describe the picture in `alt`, or write `alt=""` for one that is decoration.',
+                tag: this.localName,
+            });
+        }
     }
     get image() {
         return this.renderRoot?.querySelector('img') ?? null;

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

@@ -36,7 +36,7 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
- * @event {Event} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
+ * @event {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired as the value changes.
  *
  * @csspart clear - The button that empties the field.

package/dist/input/root/input-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, drawIcon, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -38,7 +38,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.handleClear = () => {
             if (this.value !== '' && this.requestValue('')) {
                 this.announceChange();
-                this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
+                this.dispatchEvent(new HelixClearEvent());
             }
             const control = this.control;
             if (control) {