@fusion.dev/helix 0.13.2 → 0.15.0

package/dist/element-events.generated.js

@@ -53,7 +53,14 @@ registerElementEvents({
     'helix-drilldown': ['helix-select'],
     'helix-drilldown-item': ['helix-select'],
     'helix-file-input': ['change', 'helix-before-change', 'input'],
-    'helix-filter-input': ['change', 'helix-before-change', 'input'],
+    'helix-filter-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'input',
+        'toggle',
+    ],
     'helix-heatmap': ['helix-resize'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'input'],

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

@@ -102,4 +102,68 @@ opacity: 0.5;
 box-shadow: none;
 print-color-adjust: exact;
 }
+}
+
+[part="surface"] {
+background-color: var(--helix-color-surface-overlay);
+border: var(--filter-input-border-width, var(--helix-border-floating)) solid
+var(--filter-input-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));
+inset: auto;
+margin: var(--helix-space-none);
+
+max-block-size: var(--floating-available-block-size, 20rem);
+min-inline-size: max-content;
+overflow-y: auto;
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-none);
+position: absolute;
+}
+
+[part="surface"] {
+--_travel: calc(var(--helix-space-2xs) * -1);
+
+opacity: 0;
+scale: 0.96;
+transform: translateY(var(--_travel));
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+transform var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="surface"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="surface"][hidden],
+[part="surface"]:not(:popover-open) {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
 }`);

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

@@ -1,6 +1,7 @@
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import type { CSSResultGroup } from 'lit';
 import '../../icon/index.js';
+import '../../option/index.js';
 /**
  * @summary A field that narrows something else, beside what is already narrowing it.
  *
@@ -14,6 +15,13 @@ import '../../icon/index.js';
  * them here is to keep their size and not run past the field. A `Tag` slotted
  * into `tags` already looks like one; anything else looks like whatever it is.
  *
+ * **The suggestion panel is this element's own box, not a listbox's.** Combobox
+ * puts a `helix-listbox` in its panel because the options there are a selection
+ * it owns; these are the consumer's suggestions, so the panel is a plain
+ * `role="listbox"` region and the options pass their own `helix-select`
+ * straight through it. That is why this surface scrolls where Combobox's does
+ * not: there is no list inside to do it.
+ *
  * Height comes from the region, like every other control: `data-density` on
  * whatever holds it, not a `size` here.
  *
@@ -24,7 +32,12 @@ import '../../icon/index.js';
  * @documentation https://helix.fusion.dev/components/filter-input
  *
  * @cssproperty --filter-input-background-color - Fill behind the field.
+ * @cssproperty --filter-input-border-color - Color of the suggestion panel's edge.
+ * @cssproperty --filter-input-border-width - Width of that edge. Follows `--helix-border-floating`.
  * @cssproperty --filter-input-control-size - Smallest the text keeps as tokens fill the line, before it wraps to its own.
+ * @cssproperty --filter-input-panel-size - Width of the suggestion panel. Follows the field by default.
+ * @cssproperty --filter-input-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
  * @cssproperty --filter-input-size - Height of the field with nothing in it, which it grows from.
  */
 export declare class HelixFilterInput extends HelixHeadlessFilterInput {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import '../../icon/index.js';
+import '../../option/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';

package/dist/shared/tags/tags.css.js

@@ -3,6 +3,11 @@ export const styles = createSheet(`[part="tags"] {
 display: contents;
 }
 
+:where(button)[part="rest"] {
+all: unset;
+box-sizing: border-box;
+}
+
 [part="rest"] {
 align-self: center;
 color: var(--helix-color-foreground-subtle);
@@ -11,4 +16,19 @@ font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
 white-space: nowrap;
+}
+
+button[part="rest"] {
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+button[part="rest"]:hover {
+color: var(--helix-color-foreground);
+}
+
+button[part="rest"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
 }`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.13.2",
+  "version": "0.15.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.13.2",
-    "@fusion.dev/helix-headless": "0.13.2",
-    "@fusion.dev/helix-styles": "0.13.2"
+    "@fusion.dev/helix-core": "0.15.0",
+    "@fusion.dev/helix-headless": "0.15.0",
+    "@fusion.dev/helix-styles": "0.15.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.13.2",
-    "@fusion.dev/helix-testing": "0.13.2",
+    "@fusion.dev/helix-cem": "0.15.0",
+    "@fusion.dev/helix-testing": "0.15.0",
     "@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

@@ -4068,6 +4068,16 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "default-open"?: (HelixCombobox["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   defaultOpen?: (HelixCombobox["defaultOpen"]) | undefined;
+  /** What the control says once everything is showing. */
+  "collapse-label"?: (HelixCombobox["collapseLabel"]) | undefined;
+  /** What the control says once everything is showing. */
+  collapseLabel?: (HelixCombobox["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  expandable?: (HelixCombobox["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "expand-label"?: (HelixCombobox["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  expandLabel?: (HelixCombobox["expandLabel"]) | undefined;
   /** How many tokens to show before the rest become a count. */
   "max-tags"?: (HelixCombobox["maxTags"]) | undefined;
   /** How many tokens to show before the rest become a count. */
@@ -4222,6 +4232,16 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "bool:default-open"?: (HelixCombobox["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   "prop:defaultOpen"?: (HelixCombobox["defaultOpen"]) | undefined;
+  /** What the control says once everything is showing. */
+  "attr:collapse-label"?: (HelixCombobox["collapseLabel"]) | undefined;
+  /** What the control says once everything is showing. */
+  "prop:collapseLabel"?: (HelixCombobox["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  "prop:expandable"?: (HelixCombobox["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "attr:expand-label"?: (HelixCombobox["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "prop:expandLabel"?: (HelixCombobox["expandLabel"]) | undefined;
   /** How many tokens to show before the rest become a count. */
   "attr:max-tags"?: (HelixCombobox["maxTags"]) | undefined;
   /** How many tokens to show before the rest become a count. */
@@ -6957,8 +6977,41 @@ export type HelixFilterInputElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixFilterInputHelixBeforeChangeElementEvent =
   HelixFilterInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-close` event type */
+export type HelixFilterInputHelixBeforeCloseElementEvent =
+  HelixFilterInputElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixFilterInputHelixBeforeOpenElementEvent =
+  HelixFilterInputElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixFilterInputProps = {
+  /** 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?: (HelixFilterInput["open"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "default-open"?: (HelixFilterInput["defaultOpen"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  defaultOpen?: (HelixFilterInput["defaultOpen"]) | undefined;
+  /** What the control says once everything is showing. */
+  "collapse-label"?: (HelixFilterInput["collapseLabel"]) | undefined;
+  /** What the control says once everything is showing. */
+  collapseLabel?: (HelixFilterInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  expandable?: (HelixFilterInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "expand-label"?: (HelixFilterInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  expandLabel?: (HelixFilterInput["expandLabel"]) | undefined;
   /** How many tokens to show before the rest become a count. */
   "max-tags"?: (HelixFilterInput["maxTags"]) | undefined;
   /** How many tokens to show before the rest become a count. */
@@ -7032,9 +7085,46 @@ Here rather than on each control. */
   "onhelix-before-change"?: ((
     e: HelixFilterInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** Fired before the suggestions go, and cancelable. */
+  "onhelix-before-close"?: ((
+    e: HelixFilterInputHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before the suggestions show, and cancelable. */
+  "onhelix-before-open"?: ((
+    e: HelixFilterInputHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  ontoggle?: ((e: HelixFilterInputElementEvent) => void) | undefined;
 };
 
 export type HelixFilterInputSolidJsProps = {
+  /** 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"?: (HelixFilterInput["open"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "bool:default-open"?: (HelixFilterInput["defaultOpen"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "prop:defaultOpen"?: (HelixFilterInput["defaultOpen"]) | undefined;
+  /** What the control says once everything is showing. */
+  "attr:collapse-label"?: (HelixFilterInput["collapseLabel"]) | undefined;
+  /** What the control says once everything is showing. */
+  "prop:collapseLabel"?: (HelixFilterInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  "prop:expandable"?: (HelixFilterInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "attr:expand-label"?: (HelixFilterInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "prop:expandLabel"?: (HelixFilterInput["expandLabel"]) | undefined;
   /** How many tokens to show before the rest become a count. */
   "attr:max-tags"?: (HelixFilterInput["maxTags"]) | undefined;
   /** How many tokens to show before the rest become a count. */
@@ -7107,6 +7197,16 @@ Here rather than on each control. */
   "on:helix-before-change"?: ((
     e: HelixFilterInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** Fired before the suggestions go, and cancelable. */
+  "on:helix-before-close"?: ((
+    e: HelixFilterInputHelixBeforeCloseElementEvent,
+  ) => void) | undefined;
+  /** Fired before the suggestions show, and cancelable. */
+  "on:helix-before-open"?: ((
+    e: HelixFilterInputHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  "on:toggle"?: ((e: HelixFilterInputElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -21424,6 +21524,9 @@ export type CustomElements = {
    * 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.
    * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
@@ -21642,7 +21745,7 @@ export type CustomElements = {
    * - `listbox-loading`: Shown while the options are still on their way.
    * - `listbox-search`: The region holding the field that narrows the list.
    * - `listbox-search-field`: The field itself.
-   * - `rest`: The count of choices held beyond `max-tags`.
+   * - `rest`: The count of choices held beyond `max-tags`. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
@@ -23713,6 +23816,13 @@ export type CustomElements = {
    * them here is to keep their size and not run past the field. A `Tag` slotted
    * into `tags` already looks like one; anything else looks like whatever it is.
    *
+   * **The suggestion panel is this element's own box, not a listbox's.** Combobox
+   * puts a `helix-listbox` in its panel because the options there are a selection
+   * it owns; these are the consumer's suggestions, so the panel is a plain
+   * `role="listbox"` region and the options pass their own `helix-select`
+   * straight through it. That is why this surface scrolls where Combobox's does
+   * not: there is no list inside to do it.
+   *
    * Height comes from the region, like every other control: `data-density` on
    * whatever holds it, not a `size` here.
    *
@@ -23720,6 +23830,22 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `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.
    * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
@@ -23766,6 +23892,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.
@@ -23794,6 +23934,9 @@ export type CustomElements = {
    * - `input`: Announced once the text has moved.
    * - `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.
+   * - `toggle`: Says the panel moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -23801,12 +23944,21 @@ 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.
    *
+   * - `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
@@ -23824,6 +23976,7 @@ export type CustomElements = {
    * Falling back to `defaultValue` rather than to empty, because a restore
    * with no state is a form the browser has nothing recorded for, which is
    * the same situation as a fresh one.
+   * - `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.
    * - `formDisabledCallback(disabled: boolean) => void`: The platform's notice that an ancestor fieldset changed.
    *
@@ -23864,7 +24017,11 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--filter-input-background-color`: Fill behind the field. (default: `undefined`)
+   * - `--filter-input-border-color`: Color of the suggestion panel's edge. (default: `undefined`)
+   * - `--filter-input-border-width`: Width of that edge. Follows `--helix-border-floating`. (default: `undefined`)
    * - `--filter-input-control-size`: Smallest the text keeps as tokens fill the line, before it wraps to its own. (default: `undefined`)
+   * - `--filter-input-panel-size`: Width of the suggestion panel. Follows the field by default. (default: `undefined`)
+   * - `--filter-input-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    * - `--filter-input-size`: Height of the field with nothing in it, which it grows from. (default: `undefined`)
    *
    * ## CSS Parts
@@ -23877,7 +24034,8 @@ export type CustomElements = {
    * - `field`: The box holding everything.
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
-   * - `rest`: How many tokens did not fit.
+   * - `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-filter-input": Partial<
@@ -37377,6 +37535,9 @@ export type CustomElementsSolidJs = {
    * 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.
    * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
@@ -37595,7 +37756,7 @@ export type CustomElementsSolidJs = {
    * - `listbox-loading`: Shown while the options are still on their way.
    * - `listbox-search`: The region holding the field that narrows the list.
    * - `listbox-search-field`: The field itself.
-   * - `rest`: The count of choices held beyond `max-tags`.
+   * - `rest`: The count of choices held beyond `max-tags`. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
@@ -39710,6 +39871,13 @@ export type CustomElementsSolidJs = {
    * them here is to keep their size and not run past the field. A `Tag` slotted
    * into `tags` already looks like one; anything else looks like whatever it is.
    *
+   * **The suggestion panel is this element's own box, not a listbox's.** Combobox
+   * puts a `helix-listbox` in its panel because the options there are a selection
+   * it owns; these are the consumer's suggestions, so the panel is a plain
+   * `role="listbox"` region and the options pass their own `helix-select`
+   * straight through it. That is why this surface scrolls where Combobox's does
+   * not: there is no list inside to do it.
+   *
    * Height comes from the region, like every other control: `data-density` on
    * whatever holds it, not a `size` here.
    *
@@ -39717,6 +39885,22 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `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.
    * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
@@ -39763,6 +39947,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.
@@ -39791,6 +39989,9 @@ export type CustomElementsSolidJs = {
    * - `input`: Announced once the text has moved.
    * - `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.
+   * - `toggle`: Says the panel moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -39798,12 +39999,21 @@ 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.
    *
+   * - `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
@@ -39821,6 +40031,7 @@ export type CustomElementsSolidJs = {
    * Falling back to `defaultValue` rather than to empty, because a restore
    * with no state is a form the browser has nothing recorded for, which is
    * the same situation as a fresh one.
+   * - `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.
    * - `formDisabledCallback(disabled: boolean) => void`: The platform's notice that an ancestor fieldset changed.
    *
@@ -39861,7 +40072,11 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--filter-input-background-color`: Fill behind the field. (default: `undefined`)
+   * - `--filter-input-border-color`: Color of the suggestion panel's edge. (default: `undefined`)
+   * - `--filter-input-border-width`: Width of that edge. Follows `--helix-border-floating`. (default: `undefined`)
    * - `--filter-input-control-size`: Smallest the text keeps as tokens fill the line, before it wraps to its own. (default: `undefined`)
+   * - `--filter-input-panel-size`: Width of the suggestion panel. Follows the field by default. (default: `undefined`)
+   * - `--filter-input-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    * - `--filter-input-size`: Height of the field with nothing in it, which it grows from. (default: `undefined`)
    *
    * ## CSS Parts
@@ -39874,7 +40089,8 @@ export type CustomElementsSolidJs = {
    * - `field`: The box holding everything.
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
-   * - `rest`: How many tokens did not fit.
+   * - `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-filter-input": Partial<
@@ -50657,8 +50873,16 @@ export type CustomCssProperties = {
   "--file-input-padding"?: (string) | undefined;
   /** Fill behind the field. */
   "--filter-input-background-color"?: (string) | undefined;
+  /** Color of the suggestion panel's edge. */
+  "--filter-input-border-color"?: (string) | undefined;
+  /** Width of that edge. Follows `--helix-border-floating`. */
+  "--filter-input-border-width"?: (string) | undefined;
   /** Smallest the text keeps as tokens fill the line, before it wraps to its own. */
   "--filter-input-control-size"?: (string) | undefined;
+  /** Width of the suggestion panel. Follows the field by default. */
+  "--filter-input-panel-size"?: (string) | undefined;
+  /** Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. */
+  "--filter-input-shadow"?: (string) | undefined;
   /** Height of the field with nothing in it, which it grows from. */
   "--filter-input-size"?: (string) | undefined;
   /** An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say. */