@fusion.dev/helix-core 0.144.0 → 0.146.0

package/dist/controllers/relative-clock-controller/relative-clock-controller.js

@@ -0,0 +1,31 @@
+import { subscribe } from '../../utils/ticker/ticker.js';
+export class RelativeClockController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.now = Date.now();
+        this.stop = undefined;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.tick();
+    }
+    hostDisconnected() {
+        this.stop?.();
+        this.stop = undefined;
+    }
+    tick() {
+        this.stop?.();
+        this.stop = undefined;
+        const now = Date.now();
+        const next = this.options.expires(new Date(now));
+        if (next === undefined) {
+            return;
+        }
+        this.now = now;
+        this.host.requestUpdate();
+        if (Number.isFinite(next) && this.host.isConnected) {
+            this.stop = subscribe(next, () => this.tick());
+        }
+    }
+}

package/dist/controllers/source-controller/source-controller.d.ts

@@ -107,13 +107,20 @@ export declare class SourceController implements ReactiveController {
     get hidden(): ReadonlySet<string>;
     /**
      * Hides these series on the table and shows every other, for every chart
-     * and legend reading it, which then redraw.
+     * and legend reading it, which then redraw. Answers the table it wrote to,
+     * or null where `for` names none.
+     *
+     * Given `among`, only those names are shown or hidden, and a series hidden
+     * outside them stays hidden. A legend passes its own entries, so a legend
+     * of the rows and a legend of the columns on one table each keep what the
+     * other hid.
      *
      * Names are matched without regard to case or surrounding space, as a
      * column's heading is everywhere else. Nothing happens where `for` names no
-     * table, or the set is already this one.
+     * table, or the set is already this one, so two writers that agree stop
+     * asking each other to redraw.
      */
-    hide(names: Iterable<string>): void;
+    hide(names: Iterable<string>, among?: Iterable<string>): Element | null;
     /** Counts this controller among the readers of the table it watches, or of none. */
     private enlist;
     hostConnected(): void;

package/dist/controllers/source-controller/source-controller.js

@@ -54,15 +54,17 @@ export class SourceController {
         const element = this.element;
         return element ? (HIDDEN.get(element) ?? NONE) : NONE;
     }
-    hide(names) {
+    hide(names, among) {
         const element = this.resolve();
         if (!element) {
-            return;
+            return null;
         }
-        const next = new Set([...names].map(seriesKey).filter(Boolean));
         const now = HIDDEN.get(element) ?? NONE;
+        const mine = among === undefined ? undefined : new Set([...among].map(seriesKey));
+        const kept = mine === undefined ? [] : [...now].filter((one) => !mine.has(one));
+        const next = new Set([...kept, ...[...names].map(seriesKey)].filter(Boolean));
         if (next.size === now.size && [...next].every((one) => now.has(one))) {
-            return;
+            return element;
         }
         if (next.size === 0) {
             HIDDEN.delete(element);
@@ -73,6 +75,7 @@ export class SourceController {
         for (const reader of READERS.get(element) ?? []) {
             reader.host.requestUpdate();
         }
+        return element;
     }
     enlist(element) {
         if (this.watched) {

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -20,7 +20,9 @@ export interface VirtualizeOptions {
      * the straight line the note below defends. A host that returns its row
      * elements gets each one measured after it renders and placed by what it
      * came to; a host that returns nothing gets every item at `estimate`, which
-     * is right whenever the rows really are uniform and is cheaper.
+     * is right whenever the rows really are uniform and is cheaper. A host that
+     * returns its rows and turns `measured` off keeps the straight line, with its
+     * slope read once from the rows it drew.
      *
      * **Each row carries its own index rather than being counted off from
      * `window.first`.** A host is free to place its rows whenever it likes, and
@@ -63,6 +65,16 @@ export interface Window {
     /** Index one past the last item rendered. */
     last: number;
 }
+/** Where `reveal` puts an item, and how it gets there. */
+export interface RevealOptions {
+    /**
+     * Where the item lands: the least distance that shows it whole (`nearest`,
+     * the default), or at the box's `start`, `center` or `end`.
+     */
+    align?: 'center' | 'end' | 'nearest' | 'start';
+    /** The platform's scroll behavior. Instant when left out. */
+    behavior?: ScrollBehavior;
+}
 /**
  * Works out which slice of a long set is worth rendering.
  *
@@ -86,35 +98,14 @@ export interface Window {
  * track, so the room the absent rows would have taken is left as padding before
  * and after. A reader dragging that thumb is dragging against the real length.
  *
- * **What it does not do, and the reason is narrower than it first looks.** True
- * virtualization means never creating the rows that are not on screen, and that
- * needs the set as *data*. Two channels are shut: a consumer's items arrive as
- * light-DOM children, which exist by the time this could decide not to create
- * them, and an `items` property cannot survive React hydration, which skips
- * every property it would have to apply imperatively (see `bindReactHandler`,
- * and the note in the rules that objects and functions have that bug and are
- * not fixed).
- *
- * **A third channel is open.** Data as *text*
- * in the markup, a `<script type="application/json">` child or an attribute, is
- * neither a property nor a node per row: React's hydration bug cannot touch text
- * it renders as a child, a server emits it, and the node count is one. The
- * charts already read data out of the document this way, `for="<id>"` at a real
- * `<table>`, so the pattern is in the library rather than being invented for
- * this.
- *
- * So the thing actually blocked is the *row template*. Turning an item into
- * markup wants either a render function, which is a function property and dies
- * on the same bug, or a `<template>` with named holes, which survives because it
- * is markup and which no component here asks anyone to write. That is a decision
- * about what this library is willing to look like, not a platform limit, and it
- * is open at #71.
- *
- * So what this buys is the expensive half rather than all of it: the rows
- * outside the window are not laid out and not painted, which is where the time
- * goes in a long list, and the node count stays. That is worth having and it is
- * not worth calling something it is not. An element that windows children it
- * was handed is not a virtual list, whatever it is named.
+ * **The set arrives as data**, which is what lets a host create only the rows
+ * in the window. A host takes it through a property (an `items` array, which
+ * `applyReactProperties` carries across React hydration with every other object
+ * property) or as text in the markup (a `<script type="application/json">`
+ * named by `for`, which a server emits and which is one node whatever the
+ * row count). A host that is handed its rows as light-DOM children still gets
+ * the expensive half from this: the rows outside the window are not laid out
+ * and not painted, and the node count stays.
  *
  * **One estimate, not per-row measurement.** Measuring every row to place it is
  * how a virtual list ends up reading the layout it is trying to avoid, and it
@@ -140,6 +131,15 @@ export declare class VirtualizeController implements ReactiveController {
     private readonly heights;
     /** Room `shift` added above the window, owed to the scroll offset once drawn. */
     private owed;
+    /**
+     * The drawn rows' height on the straight line, read once per estimate.
+     *
+     * Undefined until a host that offers `rows` has drawn some on the uniform
+     * path, and again after `forget`.
+     */
+    private sample;
+    /** The length of the set when `endInSight` last answered true. */
+    private askedAt;
     constructor(host: ReactiveControllerHost, options: VirtualizeOptions);
     hostConnected(): void;
     hostDisconnected(): void;
@@ -156,6 +156,28 @@ export declare class VirtualizeController implements ReactiveController {
     measure(): void;
     /** The straight line: one estimate, so offset and index convert by division. */
     private uniform;
+    /**
+     * How tall one item is on the straight line: the drawn rows' height once
+     * read, and `estimate` until then.
+     *
+     * **An estimate that is wrong on the straight line leaves the end of the
+     * set out of reach.** Rows of 21 pixels placed at 32 fill two thirds of the
+     * room they are counted for, so the window stops short of the bottom of the
+     * box and the spacer after it holds the rest: in Chromium, `scrollToIndex`
+     * on the last of 5,000 such rows scrolled to the end and drew nothing there.
+     * Reading the drawn rows once corrects the slope, and it is still a line.
+     */
+    private line;
+    /**
+     * Reads the drawn rows' height once for the straight line, for a host that
+     * offers `rows` and does not measure.
+     *
+     * The mean of the rows drawn, each item's elements counted together. A row
+     * with no height, such as one that is not laid out, says nothing. When the
+     * line moves, the scroll offset moves with it, so the item at the top of the
+     * box stays there.
+     */
+    private sampleRows;
     /** Whether this pass places by measurement: offered, and wanted. */
     private measuring;
     /**
@@ -166,6 +188,53 @@ export declare class VirtualizeController implements ReactiveController {
      * on screen plus the overscan, whatever the set's length.
      */
     private placed;
+    /**
+     * The items on screen, with no overscan: `first` is the item at the top of
+     * the box and `last` is one past the item at its bottom, so
+     * `items.slice(first, last)` is what a reader sees.
+     *
+     * For a host that reports what is visible, where `window` is what is drawn.
+     * An empty span (`first === last`) while the box has no height or the set
+     * no items.
+     */
+    visible(): {
+        first: number;
+        last: number;
+    };
+    /**
+     * How much of the set lies below the bottom of the box, in pixels.
+     *
+     * For a host that asks for more items as a reader nears the end. Read from
+     * the arithmetic and not from `scrollHeight`, which also counts whatever the
+     * host draws around the rows.
+     */
+    remaining(): number;
+    /**
+     * Whether a reader has come within one screen of the end of the set, true
+     * once for each length of it.
+     *
+     * For a host that asks for more items as a reader nears the end: it sends
+     * its request when this answers true, and the set growing lets it answer
+     * true again. False while the box has no height or the set no items, so a
+     * list that has not been laid out asks for nothing.
+     *
+     * `length` is what the answer is kept for, the count by default. A host
+     * whose count is a filtered view of what it holds passes what it holds, so
+     * new items that the filter hides still let it ask again.
+     */
+    endInSight(length?: number): boolean;
+    /**
+     * The two spacers' heights for the window, with item `kept` drawn too.
+     *
+     * For a host that keeps an item outside the window drawn, the row holding
+     * focus say. The item takes its own room out of the spacer on its side, so
+     * the scrollbar still measures the set. Every host that keeps a focused row
+     * asks this, so the arithmetic is written once.
+     */
+    spacers(kept?: number): {
+        after: number;
+        before: number;
+    };
     /**
      * Measures what was just drawn, and holds the reader still if it moved.
      *
@@ -206,14 +275,25 @@ export declare class VirtualizeController implements ReactiveController {
      */
     sizeOf(index: number): number;
     /**
-     * Scrolls the box the least distance that shows item `index` whole.
+     * Scrolls the box to show item `index`.
      *
-     * For a host moving focus to an item outside the window, whose own element
-     * cannot be scrolled to because it is not drawn where it belongs. `inset` is
-     * how far into the box the items start, for a heading that sticks at its
-     * top and covers that much of every item scrolled under it.
+     * By default the least distance that shows it whole, for a host moving focus
+     * to an item outside the window, whose own element cannot be scrolled to
+     * because it is not drawn where it belongs. `inset` is how far into the box
+     * the items start, for a heading that sticks at its top and covers that much
+     * of every item scrolled under it.
+     *
+     * `align` puts the item at the box's `start`, `center` or `end` instead, and
+     * `behavior` is the platform's, for a host whose consumer asked to be taken
+     * to an item. A smooth scroll moves the window through the box's own
+     * `scroll` events, the same as a reader scrolling.
+     */
+    reveal(index: number, inset?: number, { align, behavior }?: RevealOptions): void;
+    /**
+     * Where item `index` starts along the scroll axis, in pixels from the top of
+     * the set: what was measured above it, or the estimate.
      */
-    reveal(index: number, inset?: number): void;
+    offsetOf(index: number): number;
     /**
      * Drops every measurement, for a host that swapped its data.
      *

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -8,6 +8,7 @@ export class VirtualizeController {
         this.warned = false;
         this.window = { after: 0, before: 0, first: 0, last: 0 };
         this.owed = 0;
+        this.askedAt = -1;
         this.handleScroll = () => {
             this.settling = 0;
             this.measure();
@@ -39,13 +40,14 @@ export class VirtualizeController {
         }
         this.observer.observe(box);
         box.addEventListener('scroll', this.handleScroll, { passive: true });
+        box.setAttribute('data-virtual', '');
         this.watching = true;
     }
     measure() {
         this.watch();
         const box = this.options.container();
         const total = Math.max(0, this.options.count());
-        const size = Math.max(1, this.options.estimate());
+        const size = this.line();
         if (!box) {
             return;
         }
@@ -79,6 +81,36 @@ export class VirtualizeController {
         const last = Math.min(total, first + fits);
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
+    line() {
+        const estimate = Math.max(1, this.options.estimate());
+        return this.sample?.estimate === estimate ? this.sample.size : estimate;
+    }
+    sampleRows() {
+        const estimate = Math.max(1, this.options.estimate());
+        if (this.sample?.estimate === estimate) {
+            return;
+        }
+        const heights = new Map();
+        for (const { element, index } of this.options.rows?.() ?? []) {
+            heights.set(index, (heights.get(index) ?? 0) + element.getBoundingClientRect().height);
+        }
+        const seen = [...heights.values()].filter((height) => height > 0);
+        if (seen.length === 0) {
+            return;
+        }
+        const was = this.line();
+        const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length);
+        this.sample = { estimate, size };
+        if (Math.abs(size - was) < 0.5) {
+            return;
+        }
+        const box = this.options.container();
+        if (box && box.scrollTop > 0) {
+            box.scrollTop = (box.scrollTop / was) * size;
+        }
+        this.settling = 0;
+        this.measure();
+    }
     measuring() {
         return this.options.rows !== undefined && (this.options.measured?.() ?? true);
     }
@@ -97,6 +129,58 @@ export class VirtualizeController {
             last,
         };
     }
+    visible() {
+        const box = this.options.container();
+        const total = Math.max(0, this.options.count());
+        if (!box || total === 0) {
+            return { first: 0, last: 0 };
+        }
+        const top = Math.max(0, box.scrollTop);
+        const bottom = top + box.clientHeight;
+        if (!this.measuring()) {
+            const size = this.line();
+            const first = Math.min(Math.floor(top / size), total);
+            return { first, last: Math.max(first, Math.min(total, Math.ceil(bottom / size))) };
+        }
+        const first = this.heights.indexAt(top, total);
+        let last = first;
+        while (last < total && this.heights.before(last, total) < bottom) {
+            last += 1;
+        }
+        return { first, last };
+    }
+    remaining() {
+        const box = this.options.container();
+        const total = Math.max(0, this.options.count());
+        if (!box) {
+            return 0;
+        }
+        const length = this.measuring() ? this.heights.total(total) : total * this.line();
+        return Math.max(0, length - Math.max(0, box.scrollTop) - box.clientHeight);
+    }
+    endInSight(length = Math.max(0, this.options.count())) {
+        const screen = this.options.container()?.clientHeight ?? 0;
+        if (length === 0 ||
+            screen <= 0 ||
+            this.askedAt === length ||
+            this.options.count() <= 0 ||
+            this.remaining() > screen) {
+            return false;
+        }
+        this.askedAt = length;
+        return true;
+    }
+    spacers(kept) {
+        const { after, before, first, last } = this.window;
+        if (kept === undefined || (kept >= first && kept < last)) {
+            return { after, before };
+        }
+        const room = this.sizeOf(kept);
+        return {
+            after: kept >= last ? Math.max(0, after - room) : after,
+            before: kept < first ? Math.max(0, before - room) : before,
+        };
+    }
     hostUpdated() {
         if (this.owed !== 0) {
             const box = this.options.container();
@@ -106,6 +190,7 @@ export class VirtualizeController {
             this.owed = 0;
         }
         if (!this.measuring()) {
+            this.sampleRows();
             return;
         }
         const rows = this.options.rows?.();
@@ -147,27 +232,52 @@ export class VirtualizeController {
         this.owed += room;
     }
     sizeOf(index) {
-        return this.measuring() ? this.heights.at(index) : Math.max(1, this.options.estimate());
+        return this.measuring() ? this.heights.at(index) : this.line();
     }
-    reveal(index, inset = 0) {
+    reveal(index, inset = 0, { align = 'nearest', behavior } = {}) {
         const box = this.options.container();
         if (!box) {
             return;
         }
-        const total = Math.max(0, this.options.count());
-        const top = this.measuring()
-            ? this.heights.before(index, total)
-            : index * Math.max(1, this.options.estimate());
-        const bottom = top + this.sizeOf(index) + inset;
-        if (top < box.scrollTop) {
-            box.scrollTop = top;
+        const top = this.offsetOf(index);
+        const size = this.sizeOf(index);
+        const room = box.clientHeight - inset;
+        let to;
+        if (align === 'start') {
+            to = top;
+        }
+        else if (align === 'center') {
+            to = top - inset - (room - size) / 2;
+        }
+        else if (align === 'end') {
+            to = top + size + inset - box.clientHeight;
         }
-        else if (bottom > box.scrollTop + box.clientHeight) {
-            box.scrollTop = bottom - box.clientHeight;
+        else if (top < box.scrollTop) {
+            to = top;
+        }
+        else if (top + size + inset > box.scrollTop + box.clientHeight) {
+            to = top + size + inset - box.clientHeight;
+        }
+        else {
+            return;
         }
+        const next = Math.max(0, to);
+        if (behavior && typeof box.scrollTo === 'function') {
+            box.scrollTo({ behavior, top: next });
+        }
+        else {
+            box.scrollTop = next;
+        }
+    }
+    offsetOf(index) {
+        const total = Math.max(0, this.options.count());
+        return this.measuring()
+            ? this.heights.before(index, total)
+            : Math.max(0, Math.min(index, total)) * this.line();
     }
     forget() {
         this.heights.forget();
+        this.sample = undefined;
     }
     report() {
         if (this.warned) {

package/dist/events/action.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A reader acted on a row: Enter on a list row, or a press in a list that
+ * selects nothing. Sent from the row, so `target` is the row acted on.
+ *
+ * Carries nothing, because the row is the whole of the answer. Not cancelable:
+ * a row with a link follows it and sends nothing, so there is no default left
+ * to refuse.
+ */
+export declare class HelixActionEvent extends Event {
+    static readonly eventName = "helix-action";
+    constructor();
+}

package/dist/events/action.js

@@ -0,0 +1,6 @@
+export class HelixActionEvent extends Event {
+    static { this.eventName = 'helix-action'; }
+    constructor() {
+        super(HelixActionEvent.eventName, { bubbles: true, cancelable: false, composed: true });
+    }
+}

package/dist/events/activate.d.ts

@@ -0,0 +1,22 @@
+import type { ActivateDetail } from './details.js';
+/**
+ * A set has made a different child current.
+ *
+ * The notification half of `helix-before-activate`, dispatched after the state
+ * has moved, so `currentTarget.active` is the new value and the detail is a fact
+ * rather than a proposal. `previous` is the value that was current before, where
+ * the set knows it, as Web Awesome's `wa-video-change` carries both.
+ *
+ * **Not cancelable**, for the reason every notification here is not: the
+ * decision was taken by the event before it, and a second refusable event for
+ * one transition is two answers to one question.
+ *
+ * **Prefixed, and it has to be.** `activate` unprefixed is not in any
+ * `*EventMap` in the DOM library, checked rather than assumed, but the prefix is
+ * what stops an event dispatched inside a shadow root and retargeted to the host
+ * being mistaken for something the host's own contents sent.
+ */
+export declare class HelixActivateEvent extends CustomEvent<ActivateDetail> {
+    static readonly eventName = "helix-activate";
+    constructor(detail: ActivateDetail);
+}

package/dist/events/activate.js

@@ -0,0 +1,11 @@
+export class HelixActivateEvent extends CustomEvent {
+    static { this.eventName = 'helix-activate'; }
+    constructor(detail) {
+        super(HelixActivateEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/aura-fallback.d.ts

@@ -0,0 +1,12 @@
+import type { AuraFallbackDetail } from './details.js';
+/**
+ * An aura stopped drawing its shader and shows its gradient, and says why.
+ *
+ * Sent each time it falls back, from the aura, which then matches
+ * `:state(fallback)` until it draws again. Not cancelable: there is nothing
+ * left to refuse.
+ */
+export declare class HelixAuraFallbackEvent extends CustomEvent<AuraFallbackDetail> {
+    static readonly eventName = "helix-aura-fallback";
+    constructor(detail: AuraFallbackDetail);
+}

package/dist/events/aura-fallback.js

@@ -0,0 +1,11 @@
+export class HelixAuraFallbackEvent extends CustomEvent {
+    static { this.eventName = 'helix-aura-fallback'; }
+    constructor(detail) {
+        super(HelixAuraFallbackEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/before-activate.d.ts

@@ -0,0 +1,24 @@
+import type { ChangeDetail } from './details.js';
+/**
+ * A set is about to make a different child current, and can be refused.
+ *
+ * **Not a generic `helix-change`.** `Tabs` moving to another tab, `Tree` marking
+ * another row and `Steps` advancing are not a value changing, they are a set
+ * choosing, and the platform's word for a committed value would say the wrong
+ * thing. `active` names which child is current, so `activate` is the verb, and
+ * unlike `change` the platform has no claim on it.
+ *
+ * **This fires before the state moves.** Inside a handler `currentTarget.active`
+ * still holds the previous value, and `detail.value` is a proposal another
+ * listener may refuse, so a consumer who only wants to know which child is
+ * current listens for `helix-activate` instead. `helix-select` is not that
+ * notification either: it fires when an item is *chosen*, not when `active` is
+ * assigned.
+ *
+ * The shape is the one `MixinControllerOpen` already has, a cancelable request
+ * and a plain notification after the state has moved.
+ */
+export declare class HelixBeforeActivateEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-before-activate";
+    constructor(detail: ChangeDetail);
+}

package/dist/events/before-activate.js

@@ -0,0 +1,11 @@
+export class HelixBeforeActivateEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-activate'; }
+    constructor(detail) {
+        super(HelixBeforeActivateEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/before-change.d.ts

@@ -0,0 +1,26 @@
+import type { ChangeDetail } from './details.js';
+/**
+ * A value is about to change, and the change can be refused.
+ *
+ * **The request half of every value control.** It announces the value being
+ * *proposed*, before anything moves, so a listener calling `preventDefault()`
+ * refuses it and the control stays where it was. That is how a consumer takes
+ * one decision without declaring a mode, which is what 294 settled: the element
+ * always owns and applies its state, and refusing is the way to take it over.
+ *
+ * **The notification is native and separate.** Once this has gone out and the
+ * value has moved, the control announces it again under the platform's own
+ * name, `input` while a reader is editing and `change` when they are done, so
+ * `onChange` in React and `onchange=` in HTML both reach it and
+ * `currentTarget.value` is correct by the time a handler reads it. This event
+ * carries the detail because at the moment it fires the value is not on the
+ * element yet.
+ *
+ * **`announcesInput` picks which native notification fires, not which name this
+ * carries.** Granularity is the platform's own distinction, `input` against
+ * `change`; the request is always this one event.
+ */
+export declare class HelixBeforeChangeEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-before-change";
+    constructor(detail: ChangeDetail);
+}

package/dist/events/before-change.js

@@ -0,0 +1,11 @@
+export class HelixBeforeChangeEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-change'; }
+    constructor(detail) {
+        super(HelixBeforeChangeEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/before-close.d.ts

@@ -0,0 +1,6 @@
+import type { OpenDetail } from './details.js';
+/** Fired when an element is about to close. See `HelixBeforeOpenEvent`. */
+export declare class HelixBeforeCloseEvent extends CustomEvent<OpenDetail> {
+    static readonly eventName = "helix-before-close";
+    constructor();
+}

package/dist/events/before-close.js

@@ -0,0 +1,11 @@
+export class HelixBeforeCloseEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-close'; }
+    constructor() {
+        super(HelixBeforeCloseEvent.eventName, {
+            bubbles: false,
+            cancelable: true,
+            composed: false,
+            detail: { open: false },
+        });
+    }
+}