@fusion.dev/helix 0.12.3 → 0.13.0

package/types/jsx.d.ts

@@ -59,6 +59,7 @@ import type {
   HelixEmpty,
   HelixFileInput,
   HelixFilterEvent,
+  HelixFilterInput,
   HelixFlex,
   HelixFormatDate,
   HelixGrid,
@@ -6941,6 +6942,171 @@ Here rather than on each control. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixFilterInput` component event */
+export type HelixFilterInputElementEvent<E = Event> = TypedEvent<
+  HelixFilterInput,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixFilterInputHelixBeforeChangeElementEvent =
+  HelixFilterInputElementEvent<HelixBeforeChangeEvent>;
+
+export type HelixFilterInputProps = {
+  /** 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. */
+  maxTags?: (HelixFilterInput["maxTags"]) | undefined;
+  /** The value the markup declared, which is where a reset returns to. */
+  "default-value"?: (HelixFilterInput["defaultValue"]) | undefined;
+  /** The value the markup declared, which is where a reset returns to. */
+  defaultValue?: (HelixFilterInput["defaultValue"]) | undefined;
+  /** What the control holds now, and what its form submits.
+
+One property, not two, so `input.value` answers the question anyone
+asking it meant. Writing always applies; `<helix-input value="x">` is the
+same statement in markup, and `default-value` is how markup seeds a value
+a reset should return to. */
+  value?: (HelixFilterInput["value"]) | undefined;
+  /** What is wrong, in the reader's words rather than the browser's. */
+  feedback?: (HelixFilterInput["feedback"]) | undefined;
+  /** Help under the control, shown while there is nothing wrong. */
+  hint?: (HelixFilterInput["hint"]) | undefined;
+  /** The accessible name, and the fallback for the `label` slot. */
+  label?: (HelixFilterInput["label"]) | undefined;
+  /** Whether the form refuses to submit without it. */
+  required?: (HelixFilterInput["required"]) | undefined;
+  /** Whether the field offers a button that empties it.
+
+The text only. The tokens are the consumer's markup and this element is not
+entitled to take them out of the document, which is the same reason
+`hideOverflow` marks the ones over the cap `hidden` rather than removing
+them. */
+  clearable?: (HelixFilterInput["clearable"]) | undefined;
+  /** What the clear button is called, since an icon has no name of its own. */
+  "clear-label"?: (HelixFilterInput["clearLabel"]) | undefined;
+  /** What the clear button is called, since an icon has no name of its own. */
+  clearLabel?: (HelixFilterInput["clearLabel"]) | undefined;
+  /** Shown while the field is empty.
+
+Not a label: it goes when typing starts. */
+  placeholder?: (HelixFilterInput["placeholder"]) | undefined;
+  /** Whether the control is non-interactive.
+
+Reflected, because the styled tier selects on it, and mirrored to
+`aria-disabled` rather than removing the element from the accessibility
+tree, so a screen reader can still announce that the control exists.
+
+The mirror itself is in `willUpdate` below, here rather than in each
+control, because here is where `disabled` is. */
+  disabled?: (HelixFilterInput["disabled"]) | undefined;
+  /** Name submitted with the form.
+
+**Reflected, and it is the exception to "reflect only what CSS selects
+on".** The platform builds a form's entry list from the `name` *content
+attribute*, not from the property, so a control named through the property
+submitted under no name at all and was silently dropped. Measured: two
+inputs in one form, one named by attribute and one by property, and the
+form carried a single entry.
+
+Safe for a React consumer, which is what the rule is protecting: React
+renders a custom element's props as attributes on the server, so the name
+is already in the markup being hydrated and reflecting it writes what is
+there. It is only a change to the markup when a consumer assigns it
+imperatively later, and nothing is hydrating by then.
+
+Here rather than on each control. */
+  name?: (HelixFilterInput["name"]) | undefined;
+
+  /** Announced once the text has moved. */
+  oninput?: ((e: HelixFilterInputElementEvent) => void) | undefined;
+  /** Relayed from the input once the reader has finished. */
+  onchange?: ((e: HelixFilterInputElementEvent) => void) | undefined;
+  /** Fired as the text changes, and cancelable. */
+  "onhelix-before-change"?: ((
+    e: HelixFilterInputHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
+};
+
+export type HelixFilterInputSolidJsProps = {
+  /** 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. */
+  "prop:maxTags"?: (HelixFilterInput["maxTags"]) | undefined;
+  /** The value the markup declared, which is where a reset returns to. */
+  "attr:default-value"?: (HelixFilterInput["defaultValue"]) | undefined;
+  /** The value the markup declared, which is where a reset returns to. */
+  "prop:defaultValue"?: (HelixFilterInput["defaultValue"]) | undefined;
+  /** What the control holds now, and what its form submits.
+
+One property, not two, so `input.value` answers the question anyone
+asking it meant. Writing always applies; `<helix-input value="x">` is the
+same statement in markup, and `default-value` is how markup seeds a value
+a reset should return to. */
+  "prop:value"?: (HelixFilterInput["value"]) | undefined;
+  /** What is wrong, in the reader's words rather than the browser's. */
+  "prop:feedback"?: (HelixFilterInput["feedback"]) | undefined;
+  /** Help under the control, shown while there is nothing wrong. */
+  "prop:hint"?: (HelixFilterInput["hint"]) | undefined;
+  /** The accessible name, and the fallback for the `label` slot. */
+  "prop:label"?: (HelixFilterInput["label"]) | undefined;
+  /** Whether the form refuses to submit without it. */
+  "prop:required"?: (HelixFilterInput["required"]) | undefined;
+  /** Whether the field offers a button that empties it.
+
+The text only. The tokens are the consumer's markup and this element is not
+entitled to take them out of the document, which is the same reason
+`hideOverflow` marks the ones over the cap `hidden` rather than removing
+them. */
+  "prop:clearable"?: (HelixFilterInput["clearable"]) | undefined;
+  /** What the clear button is called, since an icon has no name of its own. */
+  "attr:clear-label"?: (HelixFilterInput["clearLabel"]) | undefined;
+  /** What the clear button is called, since an icon has no name of its own. */
+  "prop:clearLabel"?: (HelixFilterInput["clearLabel"]) | undefined;
+  /** Shown while the field is empty.
+
+Not a label: it goes when typing starts. */
+  "prop:placeholder"?: (HelixFilterInput["placeholder"]) | undefined;
+  /** Whether the control is non-interactive.
+
+Reflected, because the styled tier selects on it, and mirrored to
+`aria-disabled` rather than removing the element from the accessibility
+tree, so a screen reader can still announce that the control exists.
+
+The mirror itself is in `willUpdate` below, here rather than in each
+control, because here is where `disabled` is. */
+  "prop:disabled"?: (HelixFilterInput["disabled"]) | undefined;
+  /** Name submitted with the form.
+
+**Reflected, and it is the exception to "reflect only what CSS selects
+on".** The platform builds a form's entry list from the `name` *content
+attribute*, not from the property, so a control named through the property
+submitted under no name at all and was silently dropped. Measured: two
+inputs in one form, one named by attribute and one by property, and the
+form carried a single entry.
+
+Safe for a React consumer, which is what the rule is protecting: React
+renders a custom element's props as attributes on the server, so the name
+is already in the markup being hydrated and reflecting it writes what is
+there. It is only a change to the markup when a consumer assigns it
+imperatively later, and nothing is hydrating by then.
+
+Here rather than on each control. */
+  "prop:name"?: (HelixFilterInput["name"]) | undefined;
+  /** Announced once the text has moved. */
+  "on:input"?: ((e: HelixFilterInputElementEvent) => void) | undefined;
+  /** Relayed from the input once the reader has finished. */
+  "on:change"?: ((e: HelixFilterInputElementEvent) => void) | undefined;
+  /** Fired as the text changes, and cancelable. */
+  "on:helix-before-change"?: ((
+    e: HelixFilterInputHelixBeforeChangeElementEvent,
+  ) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 export type HelixFlexProps = {
   /** Alignment across the direction. */
   align?: (HelixFlex["align"]) | undefined;
@@ -23529,6 +23695,187 @@ export type CustomElements = {
     HelixFileInputProps & BaseProps<HelixFileInput> & BaseEvents<HelixFileInput>
   >;
 
+  /**
+   * 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `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.
+   *
+   * One property, not two, so `input.value` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-input value="x">` is the
+   * same statement in markup, and `default-value` is how markup seeds a value
+   * a reset should return to.
+   * - `feedback`: What is wrong, in the reader's words rather than the browser's.
+   * - `hint`: Help under the control, shown while there is nothing wrong.
+   * - `label`: The accessible name, and the fallback for the `label` slot.
+   * - `required`: Whether the form refuses to submit without it.
+   * - `clearable`: Whether the field offers a button that empties it.
+   *
+   * The text only. The tokens are the consumer's markup and this element is not
+   * entitled to take them out of the document, which is the same reason
+   * `hideOverflow` marks the ones over the cap `hidden` rather than removing
+   * them.
+   * - `clear-label`/`clearLabel`: What the clear button is called, since an icon has no name of its own.
+   * - `placeholder`: Shown while the field is empty.
+   *
+   * Not a label: it goes when typing starts.
+   * - `disabled`: Whether the control is non-interactive.
+   *
+   * Reflected, because the styled tier selects on it, and mirrored to
+   * `aria-disabled` rather than removing the element from the accessibility
+   * tree, so a screen reader can still announce that the control exists.
+   *
+   * The mirror itself is in `willUpdate` below, here rather than in each
+   * control, because here is where `disabled` is.
+   * - `name`: Name submitted with the form.
+   *
+   * **Reflected, and it is the exception to "reflect only what CSS selects
+   * on".** The platform builds a form's entry list from the `name` *content
+   * attribute*, not from the property, so a control named through the property
+   * submitted under no name at all and was silently dropped. Measured: two
+   * inputs in one form, one named by attribute and one by property, and the
+   * form carried a single entry.
+   *
+   * Safe for a React consumer, which is what the rule is protecting: React
+   * renders a custom element's props as attributes on the server, so the name
+   * is already in the markup being hydrated and reflecting it writes what is
+   * there. It is only a change to the markup when a consumer assigns it
+   * imperatively later, and nothing is hydrating by then.
+   *
+   * Here rather than on each control.
+   * - `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.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang race it
+   * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `end`: After the text, for a count or a control.
+   * - `start`: Before the text, for a search icon.
+   * - `tags`: What is already narrowing the results, as `Tag`s.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `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
+   * a refusal and nothing moves. Nobody refusing means the control updates
+   * itself, whether or not a consumer declared `value`: a declared property
+   * is a seed and a correction, the way `<input value>` is, and a consumer
+   * who wants the change for themselves refuses it and assigns their own.
+   * - `formResetCallback() => void`: Returns the control to the value its markup declared.
+   *
+   * Both halves are dropped, the consumer's and the control's, because a
+   * reset means the form is as it was served. Clearing only the internal one
+   * would leave a control that had been written to stuck at that value.
+   * - `formStateRestoreCallback(state: string | null) => void`: Restores the value when the browser brings a form back.
+   *
+   * 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.
+   * - `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.
+   *
+   * **The argument is the effective state, and taking it whole is what latched
+   * every control in the library.** The platform calls this for the element's
+   * own `disabled` as well as for a fieldset, and our own arrives here at the
+   * worst possible moment: reflecting `disabled` to the attribute happens
+   * inside Lit's `update()`, the UA fires this synchronously from that write,
+   * and a reactive write during an update is a change-in-update Lit does not
+   * re-render for. So `formDisabled` ran exactly one update behind forever.
+   *
+   * Measured on Slider, logging what `render` saw:
+   *
+   * ```
+   * set true    disabled true   formDisabled false  isDisabled true
+   * set false   disabled false  formDisabled true   isDisabled true   <- stale
+   * (no third render)
+   * ```
+   *
+   * The host came out right every time, `disabled` false, `:disabled` not
+   * matching, and the inner control kept the attribute, so a control disabled
+   * once could never be re-enabled. It only shows when something re-enables,
+   * which is the same shape of bug `inheritDisabled` was written for.
+   *
+   * Our own half is already in `this.disabled` and `isDisabled` is an or, so
+   * this records only what the fieldset adds. That also removes the write
+   * entirely on the own-disabled path rather than moving it.
+   *
+   * The one case this cannot see is a control that is disabled itself *and*
+   * inside a disabled fieldset, whose own `disabled` is then removed: the
+   * effective state does not change, so the platform does not call again, and
+   * the fieldset's hold is not recorded. There is no callback to learn it from
+   * and reading `:disabled` here would answer about the attribute we are in the
+   * middle of removing.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--filter-input-background-color`: Fill behind the field. (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-size`: Height of the field with nothing in it, which it grows from. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `clear`: The button that empties the field.
+   * - `control`: The input itself.
+   * - `feedback`: What is wrong with it.
+   * - `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.
+   * - `tags`: The row the tokens sit in.
+   */
+  "helix-filter-input": Partial<
+    HelixFilterInputProps & BaseProps<HelixFilterInput> & BaseEvents<HelixFilterInput>
+  >;
+
   /**
    * The host is the flex container itself and the only child is a slot, so the
    * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
@@ -39344,6 +39691,190 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixFileInput>
   >;
 
+  /**
+   * 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `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.
+   *
+   * One property, not two, so `input.value` answers the question anyone
+   * asking it meant. Writing always applies; `<helix-input value="x">` is the
+   * same statement in markup, and `default-value` is how markup seeds a value
+   * a reset should return to.
+   * - `feedback`: What is wrong, in the reader's words rather than the browser's.
+   * - `hint`: Help under the control, shown while there is nothing wrong.
+   * - `label`: The accessible name, and the fallback for the `label` slot.
+   * - `required`: Whether the form refuses to submit without it.
+   * - `clearable`: Whether the field offers a button that empties it.
+   *
+   * The text only. The tokens are the consumer's markup and this element is not
+   * entitled to take them out of the document, which is the same reason
+   * `hideOverflow` marks the ones over the cap `hidden` rather than removing
+   * them.
+   * - `clear-label`/`clearLabel`: What the clear button is called, since an icon has no name of its own.
+   * - `placeholder`: Shown while the field is empty.
+   *
+   * Not a label: it goes when typing starts.
+   * - `disabled`: Whether the control is non-interactive.
+   *
+   * Reflected, because the styled tier selects on it, and mirrored to
+   * `aria-disabled` rather than removing the element from the accessibility
+   * tree, so a screen reader can still announce that the control exists.
+   *
+   * The mirror itself is in `willUpdate` below, here rather than in each
+   * control, because here is where `disabled` is.
+   * - `name`: Name submitted with the form.
+   *
+   * **Reflected, and it is the exception to "reflect only what CSS selects
+   * on".** The platform builds a form's entry list from the `name` *content
+   * attribute*, not from the property, so a control named through the property
+   * submitted under no name at all and was silently dropped. Measured: two
+   * inputs in one form, one named by attribute and one by property, and the
+   * form carried a single entry.
+   *
+   * Safe for a React consumer, which is what the rule is protecting: React
+   * renders a custom element's props as attributes on the server, so the name
+   * is already in the markup being hydrated and reflecting it writes what is
+   * there. It is only a change to the markup when a consumer assigns it
+   * imperatively later, and nothing is hydrating by then.
+   *
+   * Here rather than on each control.
+   * - `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.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang race it
+   * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `end`: After the text, for a count or a control.
+   * - `start`: Before the text, for a search icon.
+   * - `tags`: What is already narrowing the results, as `Tag`s.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `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
+   * a refusal and nothing moves. Nobody refusing means the control updates
+   * itself, whether or not a consumer declared `value`: a declared property
+   * is a seed and a correction, the way `<input value>` is, and a consumer
+   * who wants the change for themselves refuses it and assigns their own.
+   * - `formResetCallback() => void`: Returns the control to the value its markup declared.
+   *
+   * Both halves are dropped, the consumer's and the control's, because a
+   * reset means the form is as it was served. Clearing only the internal one
+   * would leave a control that had been written to stuck at that value.
+   * - `formStateRestoreCallback(state: string | null) => void`: Restores the value when the browser brings a form back.
+   *
+   * 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.
+   * - `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.
+   *
+   * **The argument is the effective state, and taking it whole is what latched
+   * every control in the library.** The platform calls this for the element's
+   * own `disabled` as well as for a fieldset, and our own arrives here at the
+   * worst possible moment: reflecting `disabled` to the attribute happens
+   * inside Lit's `update()`, the UA fires this synchronously from that write,
+   * and a reactive write during an update is a change-in-update Lit does not
+   * re-render for. So `formDisabled` ran exactly one update behind forever.
+   *
+   * Measured on Slider, logging what `render` saw:
+   *
+   * ```
+   * set true    disabled true   formDisabled false  isDisabled true
+   * set false   disabled false  formDisabled true   isDisabled true   <- stale
+   * (no third render)
+   * ```
+   *
+   * The host came out right every time, `disabled` false, `:disabled` not
+   * matching, and the inner control kept the attribute, so a control disabled
+   * once could never be re-enabled. It only shows when something re-enables,
+   * which is the same shape of bug `inheritDisabled` was written for.
+   *
+   * Our own half is already in `this.disabled` and `isDisabled` is an or, so
+   * this records only what the fieldset adds. That also removes the write
+   * entirely on the own-disabled path rather than moving it.
+   *
+   * The one case this cannot see is a control that is disabled itself *and*
+   * inside a disabled fieldset, whose own `disabled` is then removed: the
+   * effective state does not change, so the platform does not call again, and
+   * the fieldset's hold is not recorded. There is no callback to learn it from
+   * and reading `:disabled` here would answer about the attribute we are in the
+   * middle of removing.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--filter-input-background-color`: Fill behind the field. (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-size`: Height of the field with nothing in it, which it grows from. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `clear`: The button that empties the field.
+   * - `control`: The input itself.
+   * - `feedback`: What is wrong with it.
+   * - `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.
+   * - `tags`: The row the tokens sit in.
+   */
+  "helix-filter-input": Partial<
+    HelixFilterInputProps &
+      HelixFilterInputSolidJsProps &
+      BaseProps<HelixFilterInput> &
+      BaseEvents<HelixFilterInput>
+  >;
+
   /**
    * The host is the flex container itself and the only child is a slot, so the
    * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
@@ -50115,6 +50646,12 @@ export type CustomCssProperties = {
   "--file-input-background-color"?: (string) | undefined;
   /** Padding inside the field. */
   "--file-input-padding"?: (string) | undefined;
+  /** Fill behind the field. */
+  "--filter-input-background-color"?: (string) | undefined;
+  /** Smallest the text keeps as tokens fill the line, before it wraps to its own. */
+  "--filter-input-control-size"?: (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. */
   "--grid-columns"?: (string) | undefined;
   /** How tall a cell is. A row of a tall thin cell is what a status page draws. */

package/types/svelte.d.ts

@@ -47,6 +47,7 @@ declare module 'svelte/elements' {
     'helix-drilldown': CustomElements['helix-drilldown']
     'helix-empty': CustomElements['helix-empty']
     'helix-file-input': CustomElements['helix-file-input']
+    'helix-filter-input': CustomElements['helix-filter-input']
     'helix-flex': CustomElements['helix-flex']
     'helix-format-date': CustomElements['helix-format-date']
     'helix-grid': CustomElements['helix-grid']