@fusion.dev/helix 0.12.3 → 0.13.0

package/types/vue.d.ts

@@ -39,6 +39,7 @@ import type {
   HelixDrilldown,
   HelixEmpty,
   HelixFileInput,
+  HelixFilterInput,
   HelixFlex,
   HelixFormatDate,
   HelixGrid,
@@ -3554,6 +3555,91 @@ export type HelixFileInputVueEvents = {
   "helix-before-change": HelixFileInputHelixBeforeChangeElementEvent;
 };
 
+/** `HelixFilterInput` component event */
+export type HelixFilterInputElementEvent<E = Event> = TypedEvent<
+  HelixFilterInput,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixFilterInputHelixBeforeChangeElementEvent =
+  HelixFilterInputElementEvent<HelixBeforeChangeEvent>;
+
+export type HelixFilterInputVueProps = {
+  /** 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;
+};
+
+export type HelixFilterInputVueEvents = {
+  /** Announced once the text has moved. */
+  input: HelixFilterInputElementEvent;
+  /** Relayed from the input once the reader has finished. */
+  change: HelixFilterInputElementEvent;
+  /** Fired as the text changes, and cancelable. */
+  "helix-before-change": HelixFilterInputHelixBeforeChangeElementEvent;
+};
+
 export type HelixFlexVueProps = {
   /** Alignment across the direction. */
   align?: (HelixFlex["align"]) | undefined;
@@ -9556,6 +9642,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. */
@@ -10370,6 +10462,12 @@ 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. */
+  "helix-filter-input": DefineCustomElement<
+    HelixFilterInput,
+    HelixFilterInputVueProps,
+    HelixFilterInputVueEvents
+  >;
   /** 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 replaces.  There is no separate Stack. A stack is this with 'direction="column"', and a second element whose whole definition is one default of the first is a name to learn rather than a capability to gain.  Gap takes a space token name rather than a length, so spacing stays on the scale. A layout that can say 'gap="13px"' is one that will.  Presentation only, so there is no headless tier: the split exists to keep behavior separate from styling, and this is entirely styling. */
   "helix-flex": DefineCustomElement<
     HelixFlex,