@fusion.dev/helix-headless 0.14.0 → 0.15.1

package/types/vue.d.ts

@@ -2975,6 +2975,12 @@ export type HelixHeadlessFilterInputElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessFilterInputHelixBeforeChangeElementEvent =
   HelixHeadlessFilterInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-close` event type */
+export type HelixHeadlessFilterInputHelixBeforeCloseElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessFilterInputHelixBeforeOpenElementEvent =
+  HelixHeadlessFilterInputElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixHeadlessFilterInputVueProps = {
   /** Whether the field offers a button that empties it.
@@ -2992,6 +2998,23 @@ them. */
 
 Not a label: it goes when typing starts. */
   placeholder?: (HelixHeadlessFilterInput["placeholder"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixHeadlessFilterInput["open"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  "default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
+  /** Initial open state for uncontrolled use, where nothing declared one. */
+  defaultOpen?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
   /** What the control says once everything is showing. */
   "collapse-label"?: (HelixHeadlessFilterInput["collapseLabel"]) | undefined;
   /** What the control says once everything is showing. */
@@ -3058,8 +3081,14 @@ export type HelixHeadlessFilterInputVueEvents = {
   change: HelixHeadlessFilterInputElementEvent;
   /** Fired as the text changes, and cancelable. */
   "helix-before-change": HelixHeadlessFilterInputHelixBeforeChangeElementEvent;
+  /** Fired before the suggestions go, and cancelable. */
+  "helix-before-close": HelixHeadlessFilterInputHelixBeforeCloseElementEvent;
+  /** Fired before the suggestions show, and cancelable. */
+  "helix-before-open": HelixHeadlessFilterInputHelixBeforeOpenElementEvent;
   /** Announced once the text has moved. */
   input: HelixHeadlessFilterInputElementEvent;
+  /** Says the panel moved, carrying `newState` and `oldState`. */
+  toggle: HelixHeadlessFilterInputElementEvent;
 };
 
 export type HelixHeadlessFormatDateVueProps = {
@@ -8333,7 +8362,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFileInputVueProps,
     HelixHeadlessFileInputVueEvents
   >;
-  /** **The tokens are the consumer's own elements, slotted.** What a filter narrows by belongs to the consumer's model rather than to this element: a facet with a prefix, a saved query, a range. So they are slotted rather than rendered from a list of strings, and removing one is a request this element makes rather than a change it applies. Combobox is the other way round, and that is the difference between the two: its tokens are a view of a selection it owns, drawn from options it was handed.  **'value' is the text being typed, not the tokens**, which is what makes this a field a consumer can listen to. Every keystroke announces 'input' with the text on the element, so a table narrows as the reader types. The tokens need no reporting back, being markup the consumer already holds.  Backspace on an empty field asks the last token to go, through the same 'helix-dismiss' its own remove control fires, so a consumer who handled the pointer has already handled the keyboard. */
+  /** **The tokens are the consumer's own elements, slotted.** What a filter narrows by belongs to the consumer's model rather than to this element: a facet with a prefix, a saved query, a range. So they are slotted rather than rendered from a list of strings, and removing one is a request this element makes rather than a change it applies. Combobox is the other way round, and that is the difference between the two: its tokens are a view of a selection it owns, drawn from options it was handed.  **'value' is the text being typed, not the tokens**, which is what makes this a field a consumer can listen to. Every keystroke announces 'input' with the text on the element, so a table narrows as the reader types. The tokens need no reporting back, being markup the consumer already holds.  Backspace on an empty field asks the last token to go, through the same 'helix-dismiss' its own remove control fires, so a consumer who handled the pointer has already handled the keyboard.  **It can suggest what to type next, and it never learns the grammar.** Slot 'helix-option' elements into 'suggestions' and the field shows them, moves through them with the arrows, and lets Enter press one; the option fires its own 'helix-select' and the consumer decides what choosing meant. Deciding *what* to suggest is theirs too: keys before a colon and values after it are the same panel with different contents, which is all a two-level filter is, and the parse that tells them apart belongs where the domain does.  **The panel opens when there is something in it and closes when there is not**, rather than on a choice. A reader who picks a key wants its values next, and closing on the choice would shut the panel between two renders. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term. */
   "helix-headless-filter-input": DefineCustomElement<
     HelixHeadlessFilterInput,
     HelixHeadlessFilterInputVueProps,