@fusion.dev/helix 0.14.0 → 0.15.0

package/custom-elements.json

@@ -34556,23 +34556,145 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The frame is the field rather than the input, so the tokens sit inside the\nsame box as the text and the focus ring is drawn once around the whole\ncontrol. It grows down a line at a time as tokens are added, which is the\narrangement Combobox takes when it is holding a selection.\n\n**The tokens are the consumer's own elements**, so the only thing said about\nthem here is to keep their size and not run past the field. A `Tag` slotted\ninto `tags` already looks like one; anything else looks like whatever it is.\n\nHeight comes from the region, like every other control: `data-density` on\nwhatever holds it, not a `size` here.",
+          "description": "The frame is the field rather than the input, so the tokens sit inside the\nsame box as the text and the focus ring is drawn once around the whole\ncontrol. It grows down a line at a time as tokens are added, which is the\narrangement Combobox takes when it is holding a selection.\n\n**The tokens are the consumer's own elements**, so the only thing said about\nthem here is to keep their size and not run past the field. A `Tag` slotted\ninto `tags` already looks like one; anything else looks like whatever it is.\n\n**The suggestion panel is this element's own box, not a listbox's.** Combobox\nputs a `helix-listbox` in its panel because the options there are a selection\nit owns; these are the consumer's suggestions, so the panel is a plain\n`role=\"listbox\"` region and the options pass their own `helix-select`\nstraight through it. That is why this surface scrolls where Combobox's does\nnot: there is no list inside to do it.\n\nHeight comes from the region, like every other control: `data-density` on\nwhatever holds it, not a `size` here.",
           "name": "HelixFilterInput",
           "cssProperties": [
             {
               "description": "Fill behind the field.",
               "name": "--filter-input-background-color"
             },
+            {
+              "description": "Color of the suggestion panel's edge.",
+              "name": "--filter-input-border-color"
+            },
+            {
+              "description": "Width of that edge. Follows `--helix-border-floating`.",
+              "name": "--filter-input-border-width"
+            },
             {
               "description": "Smallest the text keeps as tokens fill the line, before it wraps to its own.",
               "name": "--filter-input-control-size"
             },
+            {
+              "description": "Width of the suggestion panel. Follows the field by default.",
+              "name": "--filter-input-panel-size"
+            },
+            {
+              "description": "Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.",
+              "name": "--filter-input-shadow"
+            },
             {
               "description": "Height of the field with nothing in it, which it grows from.",
               "name": "--filter-input-size"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element is open.\n\nOne property, not two, so `dialog.open` answers the question anyone\nasking it meant. Writing always applies; `<helix-dialog open>` is the\nsame statement in markup.\n\n**Not reflected, and that is required rather than tidy.** Reflection\nwrites the resolved state back as an attribute, so an element that opened\nitself would put `open` on its own host: cloned, serialized for\nhydration, or diffed by a framework, it comes back holding whatever the\nlast reader did rather than what the author wrote. `:state(open)` carries\nthe resolved state for stylesheets, which is what the mirror is for.",
+              "attribute": "open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Initial open state for uncontrolled use, where nothing declared one.",
+              "attribute": "default-open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "openState",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "The state, whoever set it, and `undefined` until somebody has.\n\nPrefixed, and it has to be. These mixins compose onto one prototype\nchain, `Select` takes this one and `MixinControllerValue` together, and\nTypeScript's `private` is a compile-time fiction: two mixins with a field\ncalled `state` share one property on the instance, and the second one\nsilently overwrites the first. Measured, as a select whose `value` came\nback holding its `open` boolean.\n\nOne field and not two. Writing always applies, the way a native control\ndoes when a script assigns to it.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "requestOpen",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Requests an open-state change, and reports whether it was applied.\n\nAnnounces before it acts, so `preventDefault()` on the `helix-before-open` or\n`helix-before-close` is a refusal and nothing moves. Nobody refusing means the\nelement opens or closes itself, whether or not a consumer declared\n`open`: a declared property is a seed and a correction, and a consumer\nwho wants the decision for themselves refuses it and assigns their own.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              },
+              "type": {
+                "text": "requestOpen(next: boolean) => boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "announceToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Says the state moved, under the platform's own name and in its shape.\n\n**A native `toggle` from inside a shadow root reaches nobody**, because\nit neither bubbles nor composes, so the ten families showing a\n`popover=\"manual\"` panel and the two rendering a real `<dialog>` announce\nnothing to a consumer. The disclosures have no native element to fire\nanything at all: `AccordionItem` and `TreeItem` are `aria-expanded` and\n`hidden` written by hand, which is `<details>`'s job done manually.\n\n**From here rather than from `PopoverController`.** The controller covers\neleven families and the mixin covers sixteen, so announcing from both\nwould announce twice on the ten they share. What `toggle` reports is the\n*state*, and the state is this mixin's; the controller is a way of\nputting a panel on the screen.\n\n**`newState` and `oldState`, because that is the platform's shape**, so a\nconsumer arriving from `<details>` reads the same two words. Not\ncancelable: the before events are the request, and a second cancelable\nevent for one transition is two answers to one question.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggleOpen",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Requests the opposite of the current state.",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              },
+              "type": {
+                "text": "toggleOpen() => boolean"
+              }
+            },
             {
               "kind": "field",
               "name": "collapseLabel",
@@ -35212,6 +35334,59 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "activeAt",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1",
+              "description": "Which suggestion the keyboard is on, or `-1` for none.\n\nAn index rather than a value, unlike Listbox's: these are the consumer's\nown list and two of them may legitimately carry the same value, a `label`\nand an `assignee` both called `ada`. Position is what a reader is moving\nthrough and it is what stays right when they do.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "suggesting",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is offering itself to be suggested.\n\n**The ARIA follows this rather than being declared once.** A text field\ncarrying `role=\"combobox\"` promises a popup; a filter field that no consumer\never gives options to has none, and saying otherwise sends a screen reader\nlooking for a list that does not exist. So the role, `aria-expanded` and\n`aria-controls` all arrive with the first option and leave with the last.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dismissed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether Escape has closed the panel over text that still has suggestions.\n\nWithout it the panel is open whenever there is something to show, so Escape\nwould close it and the next render would put it straight back. Cleared by\nthe next keystroke, because that is the reader saying something new.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "panel",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new PopoverController(this, { anchor: () => this.renderRoot?.querySelector<HTMLElement>('[part=\"field\"]'), boundary: (): readonly (Element | null | undefined)[] => [ this.renderRoot?.querySelector<HTMLElement>('[part=\"surface\"]'), this.renderRoot?.querySelector<HTMLElement>('[part=\"field\"]'), ], offset: () => 4, onDismiss: () => this.requestOpen(false), placement: 'bottom-start', surface: () => this.renderRoot?.querySelector<HTMLElement>('[part=\"surface\"]'), })",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "releaseCaret",
@@ -35279,6 +35454,97 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "suggestions",
+              "type": {
+                "text": "SuggestionOption[]"
+              },
+              "privacy": "private",
+              "description": "The suggestions, in the order a reader moves through them.\n\n**Groups are opened out rather than walked into.** A slot assigns the group\nelement, not the options inside it, so a panel that read only what was\nassigned would offer nothing at all the moment a consumer reached for\n`option-group` to say what a run of values belongs to.\n\nA disabled option keeps its place on screen and is skipped here, which is\nthe difference between a list that explains why something cannot be chosen\nand one that pretends it was never there.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectionDirection",
+              "type": {
+                "text": "'backward' | 'forward' | 'none'"
+              },
+              "description": "The caret and the selection, under the platform's own names.\n\n**Published for the reason `Input` publishes them, and this element needs\nthem more.** The `<input>` is inside this shadow root, so a consumer has no\nway to ask where the caret is: `querySelector` does not cross the boundary.\nA grammar that completes what is being typed cannot work without it, because\n\"what is being typed\" is the term the caret is in, and after writing a\ncompletion back the caret has to be put after it or the next parse reads the\nwrong term.\n\nZero before there is a control, which is where an empty field's caret would\nbe anyway.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectionEnd",
+              "type": {
+                "text": "number"
+              },
+              "description": "Where the selection ends, which is the caret when nothing is selected.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectionStart",
+              "type": {
+                "text": "number"
+              },
+              "description": "Where the selection starts, which is the caret when nothing is selected.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSelectionRange",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "start",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "end",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "optional": true,
+                  "type": {
+                    "text": "'backward' | 'forward' | 'none'"
+                  }
+                }
+              ],
+              "description": "Moves the caret, or selects a run of the text.",
+              "type": {
+                "text": "setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none') => void"
+              },
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleInput",
@@ -35312,6 +35578,44 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "settleOpen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the panel when there is something in it, and closes it when there is\nnot.\n\n**Derived rather than commanded, which is the whole of how two levels\nwork.** A reader who picks `disposition` wants its values next, and the\nconsumer answers by rendering those values; if picking closed the panel it\nwould shut and reopen between two renders, which a reader sees as a flicker\nand a screen reader hears as a list going away. Nothing here closes on a\nchoice: the panel goes when the consumer stops offering, which is exactly\nwhen a value has been completed and there is nothing left to say.\n\nThrough `requestOpen` for both directions, so `helix-before-open` and\n`helix-before-close` still gate it and a consumer who refuses is obeyed.\n**No guard of its own**, because that method already returns early when the\nanswer has not moved: this runs after every render, and a second guard here\nwould only be a copy of that one going stale.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "move",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "by",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Moves the highlight, wrapping, and opens the panel if it was closed.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleKeydown",
@@ -35322,6 +35626,54 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "refreshSuggesting",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "What is on offer, settled before the render that draws it.\n\n**Not left to `slotchange`, for the reason the token row is not.** That\nevent reports the assignment moving and nothing else, and it does not fire\nat all under the harness these are tested in, so a panel that learned only\nfrom it would be a panel that never opened. Reading the slot every update is\nwhat makes the answer true whenever anyone asks.\n\nState only. Opening is an announcement and belongs after the render, which\nis why `settleOpen` is not called from here.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSuggestions",
+              "privacy": "private",
+              "readonly": true,
+              "description": "The panel again, whenever what is in it changes.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Focus arriving in the field is a reader asking what they can type.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Focus leaving the element closes it.\n\n`relatedTarget` and not a timer: a press inside the panel moves focus within\nthis element and must not close what is being pressed.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleTokens",
@@ -35333,6 +35685,21 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "markActive",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Marks the highlighted suggestion, and tells the control which one it is.\n\n**Two halves, and neither does the other's job.** `active` is the option's\nown published flag and is what a stylesheet draws from. The control carries\n`aria-activedescendant`, because focus never leaves the text: a screen\nreader is told what is highlighted by the field the caret is in, not by the\nlist.\n\nThrough `ariaActiveDescendantElement` rather than an id, which is what\n`Listbox` reaches for and for the same two reasons: it crosses a shadow\nboundary, where an `aria-activedescendant` naming an id cannot, and it needs\nno ids invented for the consumer's own elements. Feature-tested, because\nwhere it is missing the assignment is a silent no-op rather than an error,\nand the highlight is still drawn.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "focus",
@@ -35697,6 +36064,11 @@
               {
                 "description": "A cap for a field in a row, where the rest becomes a count.",
                 "slug": "max-tags"
+              },
+              {
+                "description": "Keys before the colon, values after it, in one panel.",
+                "min": 420,
+                "slug": "suggesting"
               }
             ],
             "source": "helix/styled/src/filter-input"
@@ -35704,6 +36076,31 @@
           "tagName": "helix-filter-input",
           "customElement": true,
           "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element is open.\n\nOne property, not two, so `dialog.open` answers the question anyone\nasking it meant. Writing always applies; `<helix-dialog open>` is the\nsame statement in markup.\n\n**Not reflected, and that is required rather than tidy.** Reflection\nwrites the resolved state back as an attribute, so an element that opened\nitself would put `open` on its own host: cloned, serialized for\nhydration, or diffed by a framework, it comes back holding whatever the\nlast reader did rather than what the author wrote. `:state(open)` carries\nthe resolved state for stylesheets, which is what the mirror is for.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
+            {
+              "name": "default-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Initial open state for uncontrolled use, where nothing declared one.",
+              "fieldName": "defaultOpen",
+              "inheritedFrom": {
+                "name": "MixinControllerOpen",
+                "module": "src/mixins/mixin-controller-open/mixin-controller-open.ts"
+              }
+            },
             {
               "name": "collapse-label",
               "type": {
@@ -35935,6 +36332,42 @@
                 "name": "HelixHeadlessFilterInput",
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
+            },
+            {
+              "type": {
+                "text": "HelixBeforeCloseEvent"
+              },
+              "description": "Fired before the suggestions go, and cancelable.",
+              "name": "helix-before-close",
+              "reactProp": "onhelix-before-close",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "HelixBeforeOpenEvent"
+              },
+              "description": "Fired before the suggestions show, and cancelable.",
+              "name": "helix-before-open",
+              "reactProp": "onhelix-before-open",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "Says the panel moved, carrying `newState` and `oldState`.",
+              "name": "toggle",
+              "reactProp": "ontoggle",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
             }
           ],
           "slots": [
@@ -35954,6 +36387,14 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "description": "What could be typed next, as `Option`s, and `Option.Group`s of them.",
+              "name": "suggestions",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "description": "What is already narrowing the results, as `Tag`s.",
               "name": "tags",
@@ -36020,6 +36461,14 @@
                 "module": "src/filter-input/root/filter-input-root.ts"
               }
             },
+            {
+              "description": "The floating panel the suggestions sit in.",
+              "name": "surface",
+              "inheritedFrom": {
+                "name": "HelixHeadlessFilterInput",
+                "module": "src/filter-input/root/filter-input-root.ts"
+              }
+            },
             {
               "description": "The row the tokens sit in.",
               "name": "tags",

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.14.0",
+  "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.14.0",
-    "@fusion.dev/helix-headless": "0.14.0",
-    "@fusion.dev/helix-styles": "0.14.0"
+    "@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.14.0",
-    "@fusion.dev/helix-testing": "0.14.0",
+    "@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

@@ -6977,8 +6977,31 @@ 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. */
@@ -7062,9 +7085,36 @@ 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. */
@@ -7147,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;
@@ -23756,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.
    *
@@ -23763,6 +23830,19 @@ 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.
@@ -23812,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.
@@ -23840,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
    *
@@ -23847,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
@@ -23870,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.
    *
@@ -23910,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
@@ -23924,6 +24035,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-filter-input": Partial<
@@ -39759,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.
    *
@@ -39766,6 +39885,19 @@ 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.
@@ -39815,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.
@@ -39843,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
    *
@@ -39850,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
@@ -39873,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.
    *
@@ -39913,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
@@ -39927,6 +40090,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-filter-input": Partial<
@@ -50709,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. */

package/types/vue.d.ts

@@ -3578,8 +3578,31 @@ 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 HelixFilterInputVueProps = {
+  /** 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. */
@@ -3663,6 +3686,12 @@ export type HelixFilterInputVueEvents = {
   change: HelixFilterInputElementEvent;
   /** Fired as the text changes, and cancelable. */
   "helix-before-change": HelixFilterInputHelixBeforeChangeElementEvent;
+  /** Fired before the suggestions go, and cancelable. */
+  "helix-before-close": HelixFilterInputHelixBeforeCloseElementEvent;
+  /** Fired before the suggestions show, and cancelable. */
+  "helix-before-open": HelixFilterInputHelixBeforeOpenElementEvent;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  toggle: HelixFilterInputElementEvent;
 };
 
 export type HelixFlexVueProps = {
@@ -9669,8 +9698,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. */
@@ -10487,7 +10524,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixFileInputVueProps,
     HelixFileInputVueEvents
   >;
-  /** The frame is the field rather than the input, so the tokens sit inside the same box as the text and the focus ring is drawn once around the whole control. It grows down a line at a time as tokens are added, which is the arrangement Combobox takes when it is holding a selection.  **The tokens are the consumer's own elements**, so the only thing said about 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.  Height comes from the region, like every other control: 'data-density' on whatever holds it, not a 'size' here. */
+  /** The frame is the field rather than the input, so the tokens sit inside the same box as the text and the focus ring is drawn once around the whole control. It grows down a line at a time as tokens are added, which is the arrangement Combobox takes when it is holding a selection.  **The tokens are the consumer's own elements**, so the only thing said about 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. */
   "helix-filter-input": DefineCustomElement<
     HelixFilterInput,
     HelixFilterInputVueProps,