@fusion.dev/helix-headless 0.14.0 → 0.15.1

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

@@ -4,12 +4,13 @@ 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, MixinTokens, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const asksToGo = (node) => typeof node?.dismiss === 'function';
-let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinTokens(MixinControllerValue(MixinField(HelixFormElement))) {
+const isOption = (node) => 'active' in node && 'value' in node;
+let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
@@ -20,11 +21,27 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
         this.clearLabel = 'Clear';
         this.placeholder = '';
         this.over = 0;
+        this.activeAt = -1;
+        this.suggesting = false;
+        this.dismissed = false;
+        this.panel = new PopoverController(this, {
+            anchor: () => this.renderRoot?.querySelector('[part="field"]'),
+            boundary: () => [
+                this.renderRoot?.querySelector('[part="surface"]'),
+                this.renderRoot?.querySelector('[part="field"]'),
+            ],
+            offset: () => 4,
+            onDismiss: () => this.requestOpen(false),
+            placement: 'bottom-start',
+            surface: () => this.renderRoot?.querySelector('[part="surface"]'),
+        });
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
             this.requestValue(control.value);
             restoreValue(control, this.value);
+            this.dismissed = false;
+            this.settleOpen();
         };
         this.handleChange = (event) => {
             event.stopPropagation();
@@ -39,7 +56,68 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
             }
         };
         this.handleKeydown = (event) => {
-            this.tokenKeydown(event, this.value);
+            if (this.tokenKeydown(event, this.value)) {
+                return;
+            }
+            if (!this.suggesting) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.move(1);
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.move(-1);
+                    return;
+                case 'Home':
+                    if (this.open) {
+                        event.preventDefault();
+                        this.activeAt = 0;
+                    }
+                    return;
+                case 'End':
+                    if (this.open) {
+                        event.preventDefault();
+                        this.activeAt = this.suggestions.length - 1;
+                    }
+                    return;
+                case 'Escape':
+                    if (this.open) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.dismissed = true;
+                        this.activeAt = -1;
+                        this.requestOpen(false);
+                    }
+                    return;
+                case 'Enter': {
+                    const active = this.suggestions[this.activeAt];
+                    if (!this.open || !active) {
+                        return;
+                    }
+                    event.preventDefault();
+                    active.select();
+                    return;
+                }
+                default:
+            }
+        };
+        this.handleSuggestions = () => {
+            this.refreshSuggesting();
+            this.settleOpen();
+        };
+        this.handleFocusIn = () => {
+            this.settleOpen();
+        };
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && this.contains(next)) {
+                return;
+            }
+            this.activeAt = -1;
+            this.requestOpen(false);
         };
         this.handleTokens = () => {
             this.over = this.hideOverflow(this.tokens);
@@ -58,6 +136,56 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
     get showsClear() {
         return this.clearable && this.value !== '' && !this.isDisabled;
     }
+    get suggestions() {
+        const slot = this.renderRoot?.querySelector('slot[name="suggestions"]');
+        const found = [];
+        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
+            if (isOption(node)) {
+                found.push(node);
+                continue;
+            }
+            for (const child of node.children) {
+                if (isOption(child)) {
+                    found.push(child);
+                }
+            }
+        }
+        return found.filter((option) => !option.disabled);
+    }
+    get selectionDirection() {
+        return this.control?.selectionDirection ?? 'none';
+    }
+    get selectionEnd() {
+        return this.control?.selectionEnd ?? 0;
+    }
+    get selectionStart() {
+        return this.control?.selectionStart ?? 0;
+    }
+    setSelectionRange(start, end, direction) {
+        this.control?.setSelectionRange(start, end, direction);
+    }
+    settleOpen() {
+        const focused = this.matches(':focus-within') || this.contains(document.activeElement);
+        this.requestOpen(this.suggesting && !this.dismissed && !this.isDisabled && focused);
+    }
+    move(by) {
+        const options = this.suggestions;
+        if (options.length === 0) {
+            return;
+        }
+        if (!this.open) {
+            this.dismissed = false;
+            this.settleOpen();
+        }
+        const from = this.activeAt;
+        this.activeAt =
+            from < 0 ? (by > 0 ? 0 : options.length - 1) : (from + by + options.length) % options.length;
+    }
+    refreshSuggesting() {
+        const options = this.suggestions;
+        this.suggesting = options.length > 0;
+        this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
+    }
     removeLastToken() {
         const last = this.tokens?.assignedElements({ flatten: true }).at(-1);
         if (asksToGo(last)) {
@@ -74,23 +202,46 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
             this.releaseCaret = holdCaret(control);
         }
         this.handleTokens();
+        this.refreshSuggesting();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.handleTokens();
+        this.refreshSuggesting();
     }
     updated(changed) {
         super.updated(changed);
         this.releaseCaret?.();
         this.releaseCaret = undefined;
         this.internals.setFormValue(this.value);
+        this.markActive();
+        if (this.open) {
+            this.panel.show();
+        }
+        else {
+            this.panel.hide();
+        }
+        this.settleOpen();
+    }
+    markActive() {
+        const options = this.suggestions;
+        const active = this.open ? options[this.activeAt] : undefined;
+        for (const [at, option] of options.entries()) {
+            option.active = this.open && at === this.activeAt;
+        }
+        const control = this.control;
+        if (control && 'ariaActiveDescendantElement' in control) {
+            ;
+            control.ariaActiveDescendantElement = active ?? null;
+        }
+        active?.scrollIntoView({ block: 'nearest' });
     }
     focus(options) {
         this.control?.focus(options);
     }
     render() {
         return html `${this.renderLabel()}
-    <div part="field">
+    <div part="field" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
       <slot name="start"></slot>
       ${this.renderTokenRow(html `<slot name="tags" @slotchange=${this.handleTokens}></slot>`, this.over)}
       <input
@@ -101,6 +252,10 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
         name=${this.name || nothing}
         placeholder=${this.placeholder || nothing}
         aria-describedby=${this.describedBy ?? nothing}
+        role=${this.suggesting ? 'combobox' : nothing}
+        aria-autocomplete=${this.suggesting ? 'list' : nothing}
+        aria-controls=${this.suggesting ? 'suggestions' : nothing}
+        aria-expanded=${this.suggesting ? (this.open ? 'true' : 'false') : nothing}
         ?disabled=${this.isDisabled}
         ?required=${this.required}
         @input=${this.handleInput}
@@ -119,6 +274,14 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinToken
             </button>`
             : nothing}
     </div>
+    <!-- **Always rendered, and hidden rather than absent**, for the reason the
+         token row is: a slot that is not in the tree assigns nothing, so a panel
+         built only once there were options could never learn that there are
+         any. A manual popover puts it in the top layer, so it is not clipped by
+         a scrolling table or an overflow on an ancestor. -->
+    <div part="surface" id="suggestions" role="listbox" popover="manual" ?hidden=${!this.open}>
+      <slot name="suggestions" @slotchange=${this.handleSuggestions}></slot>
+    </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
@@ -134,6 +297,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessFilterInput.prototype, "over", void 0);
+__decorate([
+    state()
+], HelixHeadlessFilterInput.prototype, "activeAt", void 0);
+__decorate([
+    state()
+], HelixHeadlessFilterInput.prototype, "suggesting", void 0);
 HelixHeadlessFilterInput = __decorate([
     customElement('helix-headless-filter-input')
 ], HelixHeadlessFilterInput);

package/dist/time-input/root/time-input-root.js

@@ -167,17 +167,25 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
         if (!control) {
             return;
         }
-        const value = this.value;
+        const held = this.held;
+        const floor = toMinutes(this.min) ?? 0;
+        const ceiling = toMinutes(this.max) ?? 1439;
         let message = '';
-        if (value !== '' && !isTime(value)) {
-            message = 'Enter a time as HH:mm.';
+        if (held.length > 0 && !held.every(isTime)) {
+            message =
+                this.mode === undefined
+                    ? 'Enter a time as HH:mm.'
+                    : 'Enter times as HH:mm, separated by commas.';
         }
-        else if (value !== '' && toMinutes(value) < (toMinutes(this.min) ?? 0)) {
+        else if (held.some((one) => (toMinutes(one) ?? 0) < floor)) {
             message = `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
         }
-        else if (value !== '' && toMinutes(value) > (toMinutes(this.max) ?? 1439)) {
+        else if (held.some((one) => (toMinutes(one) ?? 0) > ceiling)) {
             message = `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
         }
+        else if (this.mode === 'range' && held.length > 2) {
+            message = 'A range is two times.';
+        }
         if (message === '') {
             this.internals.setValidity(control.validity, control.validationMessage, control);
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.14.0",
-    "@fusion.dev/helix-icons": "0.14.0",
+    "@fusion.dev/helix-core": "0.15.1",
+    "@fusion.dev/helix-icons": "0.15.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.14.0",
-    "@fusion.dev/helix-testing": "0.14.0",
+    "@fusion.dev/helix-cem": "0.15.1",
+    "@fusion.dev/helix-testing": "0.15.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -5800,6 +5800,12 @@ export type HelixHeadlessFilterInputElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessFilterInputHelixBeforeChangeElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-close` event type */
+export type HelixHeadlessFilterInputHelixBeforeCloseElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessFilterInputHelixBeforeOpenElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixHeadlessFilterInputProps = {
   /** Whether the field offers a button that empties it.
@@ -5817,6 +5823,23 @@ them. */
 
 Not a label: it goes when typing starts. */
   placeholder?: (HelixHeadlessFilterInput["placeholder"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixHeadlessFilterInput["open"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  defaultOpen?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
   /** What the control says once everything is showing. */
   "collapse-label"?: (HelixHeadlessFilterInput["collapseLabel"]) | undefined;
   /** What the control says once everything is showing. */
@@ -5883,8 +5906,18 @@ Here rather than on each control. */
   "onhelix-before-change"?: ((
     e: HelixHeadlessFilterInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** Fired before the suggestions go, and cancelable. */
+  "onhelix-before-close"?: ((
+    e: HelixHeadlessFilterInputHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before the suggestions show, and cancelable. */
+  "onhelix-before-open"?: ((
+    e: HelixHeadlessFilterInputHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** Announced once the text has moved. */
   oninput?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  ontoggle?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
 };
 
 export type HelixHeadlessFilterInputSolidJsProps = {
@@ -5903,6 +5936,23 @@ them. */
 
 Not a label: it goes when typing starts. */
   "prop:placeholder"?: (HelixHeadlessFilterInput["placeholder"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  "prop:open"?: (HelixHeadlessFilterInput["open"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "bool:default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "prop:defaultOpen"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
   /** What the control says once everything is showing. */
   "attr:collapse-label"?: (HelixHeadlessFilterInput["collapseLabel"]) | undefined;
   /** What the control says once everything is showing. */
@@ -5968,8 +6018,18 @@ Here rather than on each control. */
   "on:helix-before-change"?: ((
     e: HelixHeadlessFilterInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** Fired before the suggestions go, and cancelable. */
+  "on:helix-before-close"?: ((
+    e: HelixHeadlessFilterInputHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before the suggestions show, and cancelable. */
+  "on:helix-before-open"?: ((
+    e: HelixHeadlessFilterInputHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** Announced once the text has moved. */
   "on:input"?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  "on:toggle"?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -20567,6 +20627,20 @@ export type CustomElements = {
    * `helix-dismiss` its own remove control fires, so a consumer who handled the
    * pointer has already handled the keyboard.
    *
+   * **It can suggest what to type next, and it never learns the grammar.** Slot
+   * `helix-option` elements into `suggestions` and the field shows them, moves
+   * through them with the arrows, and lets Enter press one; the option fires its
+   * own `helix-select` and the consumer decides what choosing meant. Deciding
+   * *what* to suggest is theirs too: keys before a colon and values after it are
+   * the same panel with different contents, which is all a two-level filter is,
+   * and the parse that tells them apart belongs where the domain does.
+   *
+   * **The panel opens when there is something in it and closes when there is
+   * not**, rather than on a choice. A reader who picks a key wants its values
+   * next, and closing on the choice would shut the panel between two renders. Use
+   * `selectionStart` and `setSelectionRange` to write a completion back and put
+   * the caret after it, or the next parse reads the wrong term.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -20581,6 +20655,19 @@ export type CustomElements = {
    * - `placeholder`: Shown while the field is empty.
    *
    * Not a label: it goes when typing starts.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
+   * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
    * - `collapse-label`/`collapseLabel`: What the control says once everything is showing.
    * - `expandable`: Whether the count is a control that shows the rest.
    * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
@@ -20620,6 +20707,20 @@ export type CustomElements = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `selectionDirection`: The caret and the selection, under the platform's own names.
+   *
+   * **Published for the reason `Input` publishes them, and this element needs
+   * them more.** The `<input>` is inside this shadow root, so a consumer has no
+   * way to ask where the caret is: `querySelector` does not cross the boundary.
+   * A grammar that completes what is being typed cannot work without it, because
+   * "what is being typed" is the term the caret is in, and after writing a
+   * completion back the caret has to be put after it or the next parse reads the
+   * wrong term.
+   *
+   * Zero before there is a control, which is where an empty field's caret would
+   * be anyway. (property only) (readonly)
+   * - `selectionEnd`: Where the selection ends, which is the caret when nothing is selected. (property only) (readonly)
+   * - `selectionStart`: Where the selection starts, which is the caret when nothing is selected. (property only) (readonly)
    * - `form`: The form this control belongs to, if any. (property only) (readonly)
    * - `labels`: Labels associated with this control. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -20647,7 +20748,10 @@ export type CustomElements = {
    *
    * - `change`: Relayed from the input once the reader has finished.
    * - `helix-before-change`: Fired as the text changes, and cancelable.
+   * - `helix-before-close`: Fired before the suggestions go, and cancelable.
+   * - `helix-before-open`: Fired before the suggestions show, and cancelable.
    * - `input`: Announced once the text has moved.
+   * - `toggle`: Says the panel moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -20655,13 +20759,23 @@ export type CustomElements = {
    *
    * - `end`: After the text, for a count or a control.
    * - `start`: Before the text, for a search icon.
+   * - `suggestions`: What could be typed next, as `Option`s, and `Option.Group`s of them.
    * - `tags`: What is already narrowing the results, as `Tag`s.
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
+   * - `setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none') => void`: Moves the caret, or selects a run of the text.
    * - `focus(options?: FocusOptions) => void`: Puts the caret in the field, the way a label pointing at one would.
+   * - `requestOpen(next: boolean) => boolean`: Requests an open-state change, and reports whether it was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
    * - `requestValue(next: string) => boolean`: Requests a new value, and reports whether the request stood.
    *
    * Announces before it acts, so `preventDefault()` on the `helix-before-change` is
@@ -20724,6 +20838,7 @@ export type CustomElements = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
    * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
+   * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
    */
   "helix-headless-filter-input": Partial<
@@ -35007,6 +35122,20 @@ export type CustomElementsSolidJs = {
    * `helix-dismiss` its own remove control fires, so a consumer who handled the
    * pointer has already handled the keyboard.
    *
+   * **It can suggest what to type next, and it never learns the grammar.** Slot
+   * `helix-option` elements into `suggestions` and the field shows them, moves
+   * through them with the arrows, and lets Enter press one; the option fires its
+   * own `helix-select` and the consumer decides what choosing meant. Deciding
+   * *what* to suggest is theirs too: keys before a colon and values after it are
+   * the same panel with different contents, which is all a two-level filter is,
+   * and the parse that tells them apart belongs where the domain does.
+   *
+   * **The panel opens when there is something in it and closes when there is
+   * not**, rather than on a choice. A reader who picks a key wants its values
+   * next, and closing on the choice would shut the panel between two renders. Use
+   * `selectionStart` and `setSelectionRange` to write a completion back and put
+   * the caret after it, or the next parse reads the wrong term.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -35021,6 +35150,19 @@ export type CustomElementsSolidJs = {
    * - `placeholder`: Shown while the field is empty.
    *
    * Not a label: it goes when typing starts.
+   * - `open`: Whether the element is open.
+   *
+   * One property, not two, so `dialog.open` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-dialog open>` is the
+   * same statement in markup.
+   *
+   * **Not reflected, and that is required rather than tidy.** Reflection
+   * writes the resolved state back as an attribute, so an element that opened
+   * itself would put `open` on its own host: cloned, serialized for
+   * hydration, or diffed by a framework, it comes back holding whatever the
+   * last reader did rather than what the author wrote. `:state(open)` carries
+   * the resolved state for stylesheets, which is what the mirror is for.
+   * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
    * - `collapse-label`/`collapseLabel`: What the control says once everything is showing.
    * - `expandable`: Whether the count is a control that shows the rest.
    * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
@@ -35060,6 +35202,20 @@ export type CustomElementsSolidJs = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `selectionDirection`: The caret and the selection, under the platform's own names.
+   *
+   * **Published for the reason `Input` publishes them, and this element needs
+   * them more.** The `<input>` is inside this shadow root, so a consumer has no
+   * way to ask where the caret is: `querySelector` does not cross the boundary.
+   * A grammar that completes what is being typed cannot work without it, because
+   * "what is being typed" is the term the caret is in, and after writing a
+   * completion back the caret has to be put after it or the next parse reads the
+   * wrong term.
+   *
+   * Zero before there is a control, which is where an empty field's caret would
+   * be anyway. (property only) (readonly)
+   * - `selectionEnd`: Where the selection ends, which is the caret when nothing is selected. (property only) (readonly)
+   * - `selectionStart`: Where the selection starts, which is the caret when nothing is selected. (property only) (readonly)
    * - `form`: The form this control belongs to, if any. (property only) (readonly)
    * - `labels`: Labels associated with this control. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -35087,7 +35243,10 @@ export type CustomElementsSolidJs = {
    *
    * - `change`: Relayed from the input once the reader has finished.
    * - `helix-before-change`: Fired as the text changes, and cancelable.
+   * - `helix-before-close`: Fired before the suggestions go, and cancelable.
+   * - `helix-before-open`: Fired before the suggestions show, and cancelable.
    * - `input`: Announced once the text has moved.
+   * - `toggle`: Says the panel moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -35095,13 +35254,23 @@ export type CustomElementsSolidJs = {
    *
    * - `end`: After the text, for a count or a control.
    * - `start`: Before the text, for a search icon.
+   * - `suggestions`: What could be typed next, as `Option`s, and `Option.Group`s of them.
    * - `tags`: What is already narrowing the results, as `Tag`s.
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
+   * - `setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none') => void`: Moves the caret, or selects a run of the text.
    * - `focus(options?: FocusOptions) => void`: Puts the caret in the field, the way a label pointing at one would.
+   * - `requestOpen(next: boolean) => boolean`: Requests an open-state change, and reports whether it was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-open` or
+   * `helix-before-close` is a refusal and nothing moves. Nobody refusing means the
+   * element opens or closes itself, whether or not a consumer declared
+   * `open`: a declared property is a seed and a correction, and a consumer
+   * who wants the decision for themselves refuses it and assigns their own.
+   * - `toggleOpen() => boolean`: Requests the opposite of the current state.
    * - `requestValue(next: string) => boolean`: Requests a new value, and reports whether the request stood.
    *
    * Announces before it acts, so `preventDefault()` on the `helix-before-change` is
@@ -35164,6 +35333,7 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
    * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
+   * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
    */
   "helix-headless-filter-input": Partial<