@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.41

package/dist/listbox/ListboxOptions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
   import {
     useFloatingPanel,
@@ -9,7 +9,8 @@
   } from "../internal/floating.svelte.js"
 
   const DEFAULT_OPTIONS_TAG = "div" as const
-  type OptionsRenderPropArg = {
+
+  export type OptionsRenderPropArg = {
     open: boolean
   }
   type OptionsPropsWeControl =
@@ -22,23 +23,19 @@
 
   let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<
-    TTag,
-    OptionsRenderPropArg,
-    OptionsPropsWeControl,
-    {
-      id?: string
-      anchor?: AnchorPropsWithSelection
-      portal?: boolean
-      modal?: boolean
-      transition?: boolean
-    } & PropsForFeatures<typeof OptionsRenderFeatures>
-  >
-
-  export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>
+  export type ListboxOptionsOwnProps = {
+    element?: HTMLElement
+    id?: string
+    anchor?: AnchorPropsWithSelection
+    portal?: boolean
+    modal?: boolean
+    transition?: boolean
+  } & PropsForFeatures<typeof OptionsRenderFeatures>
+
+  export type ListboxOptionsProps = Props<typeof DEFAULT_OPTIONS_TAG, OptionsRenderPropArg, ListboxOptionsOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { ListboxStates, useActions, useData, ValueMode, type ListboxDataContext } from "./Listbox.svelte"
   import { getOwnerDocument } from "../utils/owner.js"
@@ -55,25 +52,27 @@
   import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js"
   import { useElementSize } from "../hooks/use-element-size.svelte.js"
   import { setContext, type Snippet } from "svelte"
-  import Hidden from "../internal/Hidden.svelte"
   import Portal from "../portal/Portal.svelte"
-  import { stateFromSlot } from "../utils/state.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const internalId = useId()
   let {
-    as = DEFAULT_OPTIONS_TAG as TTag,
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-listbox-options-${internalId}`,
     anchor: rawAnchor,
     portal = false,
     modal = true,
     transition = false,
-    static: isStatic = false,
-    unmount = true,
     ...theirProps
-  }: { as?: TTag } & ListboxOptionsProps<TTag> = $props()
-  const anchor = $derived(useResolvedAnchor(rawAnchor))
+  }: ListboxOptionsProps = $props()
+  const resolvedAnchor = useResolvedAnchor({
+    get anchor() {
+      return rawAnchor
+    },
+  })
+  const { anchor } = $derived(resolvedAnchor)
+
+  let localOptionsElement = $state<HTMLElement | null>()
 
   // Always enable `portal` functionality, when `anchor` is enabled
   $effect(() => {
@@ -85,7 +84,7 @@
   const data = useData("ListboxOptions")
   const actions = useActions("ListboxOptions")
 
-  const ownerDocument = $derived(getOwnerDocument(data.optionsRef.current))
+  const ownerDocument = $derived(getOwnerDocument(data.optionsElement))
 
   const usesOpenClosedState = useOpenClosed()
   const show = $derived(
@@ -98,7 +97,7 @@
       return transition
     },
     get element() {
-      return ref
+      return localOptionsElement
     },
     get show() {
       return show
@@ -112,7 +111,7 @@
       return visible
     },
     get ref() {
-      return data.buttonRef.current
+      return data.buttonElement
     },
     get ondisappear() {
       return actions.closeListbox
@@ -138,7 +137,7 @@
     },
     elements: {
       get allowed() {
-        return [data.buttonRef.current, data.optionsRef.current]
+        return [data.buttonElement, data.optionsElement]
       },
     },
   })
@@ -158,7 +157,7 @@
       return didElementMoveEnabled
     },
     get element() {
-      return data.buttonRef.current
+      return data.buttonElement
     },
   })
 
@@ -181,9 +180,9 @@
     },
   })
 
-  const isSelected = (compareValue: unknown) => data.compare(frozenValue, compareValue)
+  const isSelected = (compareValue: unknown) => data.compare(frozenValue.data, compareValue)
 
-  const selectedOptionIndex = () => {
+  const selectedOptionIndex = $derived.by(() => {
     if (anchor == null) return null
     if (!anchor?.to?.includes("selection")) return null
 
@@ -193,13 +192,13 @@
     // Ensure that if no data is selected, we default to the first item.
     if (idx === -1) idx = 0
     return idx
-  }
+  })
 
   const anchorOptions = $derived.by(() => {
     if (anchor == null) return undefined
     if (selectedOptionIndex === null) return { ...anchor, inner: undefined }
 
-    let elements = Array.from(data.listRef.current.values())
+    let elements = Array.from(data.listElements.values())
 
     return {
       ...anchor,
@@ -215,24 +214,24 @@
       return anchorOptions ?? null
     },
   })
-  const { setFloating, style } = $derived(floatingPanel)
+  const { setFloating, styles } = $derived(floatingPanel)
   const getFloatingPanelProps = useFloatingPanelProps()
 
   $effect(() => {
-    data.optionsRef.current = ref || null
-    if (anchor) setFloating(ref)
+    localOptionsElement = element
+    data.optionsElement = element ?? null
+    if (anchor) setFloating(element ?? null)
   })
 
   const searchDisposables = useDisposables()
 
-  const { listboxState, optionsRef } = $derived(data)
+  const { listboxState, optionsElement } = $derived(data)
   $effect(() => {
-    let container = optionsRef.current
-    if (!container) return
+    if (!optionsElement) return
     if (listboxState !== ListboxStates.Open) return
-    if (container === getOwnerDocument(container)?.activeElement) return
+    if (optionsElement === getOwnerDocument(optionsElement)?.activeElement) return
 
-    container?.focus({ preventScroll: true })
+    optionsElement?.focus({ preventScroll: true })
   })
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -258,7 +257,7 @@
         }
         if (data.mode === ValueMode.Single) {
           actions.closeListbox()
-          data.buttonRef.current?.focus({ preventScroll: true })
+          data.buttonElement?.focus({ preventScroll: true })
         }
         break
 
@@ -288,14 +287,14 @@
         event.preventDefault()
         event.stopPropagation()
         actions.closeListbox()
-        data.buttonRef.current?.focus({ preventScroll: true })
+        data.buttonElement?.focus({ preventScroll: true })
         return
 
       case "Tab":
         event.preventDefault()
         event.stopPropagation()
         actions.closeListbox()
-        focusFrom(data.buttonRef.current!, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next)
+        focusFrom(data.buttonElement, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next)
         break
 
       default:
@@ -307,59 +306,113 @@
     }
   }
 
-  const labelledby = $derived(data.buttonRef.current?.id)
+  const labelledby = $derived(data.buttonElement?.id)
   const slot = $derived({
     open: data.listboxState === ListboxStates.Open,
   } satisfies OptionsRenderPropArg)
 
   const buttonSize = useElementSize({
     get element() {
-      return data.buttonRef.current
+      return data.buttonElement
     },
     unit: true,
   })
 
-  const ourProps = $derived(
-    mergeProps(anchor ? getFloatingPanelProps() : {}, {
+  $effect(() => {
+    transitionData
+  })
+
+  const ourProps = $derived({
+    ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
       id,
       "aria-activedescendant": data.activeOptionIndex === null ? undefined : data.options[data.activeOptionIndex]?.id,
       "aria-multiselectable": data.mode === ValueMode.Multi ? true : undefined,
       "aria-labelledby": labelledby,
       "aria-orientation": data.orientation,
-      onkeydown: handleKeyDown,
       role: "listbox",
       // When the `Listbox` is closed, it should not be focusable. This allows us
       // to skip focusing the `ListboxOptions` when pressing the tab key on an
       // open `Listbox`, and go to the next focusable element.
-      tabIndex: data.listboxState === ListboxStates.Open ? 0 : undefined,
-      style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-      ...transitionDataAttributes(transitionData),
-      ...stateFromSlot(slot),
-    })
-  )
+      tabindex: data.listboxState === ListboxStates.Open ? 0 : undefined,
+      style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    }),
+    ...transitionDataAttributes(transitionData),
+  })
 
-  const derivedData: ListboxDataContext = {
+  const derivedData: ListboxDataContext = $derived({
     ...data,
     get isSelected() {
       return data.mode === ValueMode.Multi ? data.isSelected : isSelected
     },
-  }
+  })
 
-  setContext("ListboxDataContext", derivedData)
+  setContext("ListboxDataContext", {
+    get value() {
+      return data.value
+    },
+    get disabled() {
+      return data.disabled
+    },
+    get invalid() {
+      return data.invalid
+    },
+    get mode() {
+      return data.mode
+    },
+    get orientation() {
+      return data.orientation
+    },
+    get activeOptionIndex() {
+      return data.activeOptionIndex
+    },
+    get closeOnSelect() {
+      return data.closeOnSelect
+    },
+    get compare() {
+      return data.compare
+    },
+    get isSelected() {
+      return data.mode === ValueMode.Multi ? data.isSelected : isSelected
+    },
+    get optionsProps() {
+      return data.optionsProps
+    },
+    get listElements() {
+      return data.listElements
+    },
+    get buttonElement() {
+      return data.buttonElement
+    },
+    get optionsElement() {
+      return data.optionsElement
+    },
+    get listboxState() {
+      return data.listboxState
+    },
+    get options() {
+      return data.options
+    },
+    get searchQuery() {
+      return data.searchQuery
+    },
+    get activationTrigger() {
+      return data.activationTrigger
+    },
+    get __demoMode() {
+      return data.__demoMode
+    },
+  })
 </script>
 
-<Portal enabled={portal ? isStatic || visible : false}>
-  {#if !panelEnabled && unmount && !isStatic}
-    <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
-  {:else}
-    <ElementOrComponent
-      {ourProps}
-      {theirProps}
-      slots={slot}
-      defaultTag={DEFAULT_OPTIONS_TAG}
-      features={OptionsRenderFeatures}
-      name="MenuItems"
-      bind:ref
-    />
-  {/if}
+<Portal enabled={portal ? theirProps.static || visible : false}>
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_OPTIONS_TAG}
+    features={OptionsRenderFeatures}
+    visible={panelEnabled}
+    name="ListboxOptions"
+    bind:element
+  />
 </Portal>

package/dist/listbox/ListboxOptions.svelte.d.ts

@@ -1,55 +1,20 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
 import { type AnchorPropsWithSelection } from "../internal/floating.svelte.js";
 declare const DEFAULT_OPTIONS_TAG: "div";
-type OptionsRenderPropArg = {
+export type OptionsRenderPropArg = {
     open: boolean;
 };
-type OptionsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "aria-multiselectable" | "aria-orientation" | "role" | "tabIndex";
 declare let OptionsRenderFeatures: number;
-export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+export type ListboxOptionsOwnProps = {
+    element?: HTMLElement;
     id?: string;
     anchor?: AnchorPropsWithSelection;
     portal?: boolean;
     modal?: boolean;
     transition?: boolean;
-} & PropsForFeatures<typeof OptionsRenderFeatures>>;
-export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "anchor" | "unmount" | "static" | "id" | "transition" | OptionsPropsWeControl | "portal" | "modal"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<OptionsRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: OptionsRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        anchor?: AnchorPropsWithSelection;
-        portal?: boolean;
-        modal?: boolean;
-        transition?: boolean;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxOptions: $$IsomorphicComponent;
-type ListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = InstanceType<typeof ListboxOptions<TTag>>;
+} & PropsForFeatures<typeof OptionsRenderFeatures>;
+export type ListboxOptionsProps = Props<typeof DEFAULT_OPTIONS_TAG, OptionsRenderPropArg, ListboxOptionsOwnProps>;
+declare const ListboxOptions: import("svelte").Component<ListboxOptionsProps, {}, "element">;
+type ListboxOptions = ReturnType<typeof ListboxOptions>;
 export default ListboxOptions;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,33 +1,32 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Component } from "svelte"
+  import type { Props } from "../utils/types.js"
+  import type { Snippet } from "svelte"
 
-  const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment"
-  type SelectedOptionRenderPropArg = {}
+  const DEFAULT_SELECTED_OPTION_TAG = "span"
+  export type SelectedOptionRenderPropArg = {
+    option: Snippet
+  }
   type SelectedOptionPropsWeControl = never
 
-  export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<
-    TTag,
+  export type ListboxSelectedOptionOwnProps = {
+    element?: HTMLElement
+    options: Snippet
+    placeholder?: Snippet
+  }
+
+  export type ListboxSelectedOptionProps = Props<
+    typeof DEFAULT_SELECTED_OPTION_TAG,
     SelectedOptionRenderPropArg,
-    SelectedOptionPropsWeControl,
-    {
-      options: Component<any, any>
-      placeholder?: Component<any, any>
-    }
+    ListboxSelectedOptionOwnProps
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">
+<script lang="ts">
   import { useData, ValueMode } from "./Listbox.svelte"
   import { setContext } from "svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let {
-    ref = $bindable(),
-    options,
-    placeholder,
-    ...theirProps
-  }: { as?: TTag } & ListboxSelectedOptionProps<TTag> = $props()
+  let { element = $bindable(), options, placeholder, ...theirProps }: ListboxSelectedOptionProps = $props()
 
   const data = useData("ListboxSelectedOption")
 
@@ -40,19 +39,18 @@
   setContext("SelectedOptionContext", true)
 </script>
 
-{#snippet children()}
+{#snippet option()}
   {#if placeholder && shouldShowPlaceholder}
-    {@const Component = placeholder}
-    <Component />
+    {@render placeholder()}
   {:else}
-    {@const Component = options}
-    <Component />
+    {@render options()}
   {/if}
 {/snippet}
 
 <ElementOrComponent
-  theirProps={{ ...theirProps, children }}
+  theirProps={{ ...theirProps, ...(theirProps.asChild ? {} : { children: option }) }}
+  slot={{ option }}
   defaultTag={DEFAULT_SELECTED_OPTION_TAG}
   name="ListboxSelectedOption"
-  bind:ref
-></ElementOrComponent>
+  bind:element
+/>

package/dist/listbox/ListboxSelectedOption.svelte.d.ts

@@ -1,40 +1,15 @@
-import type { ElementType, Props } from "../utils/types.js";
-import type { Component } from "svelte";
-declare const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
-type SelectedOptionRenderPropArg = {};
-type SelectedOptionPropsWeControl = never;
-export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
-    options: Component<any, any>;
-    placeholder?: Component<any, any>;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "placeholder" | "options"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<SelectedOptionRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: SelectedOptionRenderPropArg) => string) | undefined;
-    } : {}) & {
-        options: Component<any, any>;
-        placeholder?: Component<any, any>;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxSelectedOption: $$IsomorphicComponent;
-type ListboxSelectedOption<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = InstanceType<typeof ListboxSelectedOption<TTag>>;
+import type { Props } from "../utils/types.js";
+import type { Snippet } from "svelte";
+declare const DEFAULT_SELECTED_OPTION_TAG = "span";
+export type SelectedOptionRenderPropArg = {
+    option: Snippet;
+};
+export type ListboxSelectedOptionOwnProps = {
+    element?: HTMLElement;
+    options: Snippet;
+    placeholder?: Snippet;
+};
+export type ListboxSelectedOptionProps = Props<typeof DEFAULT_SELECTED_OPTION_TAG, SelectedOptionRenderPropArg, ListboxSelectedOptionOwnProps>;
+declare const ListboxSelectedOption: import("svelte").Component<ListboxSelectedOptionProps, {}, "element">;
+type ListboxSelectedOption = ReturnType<typeof ListboxSelectedOption>;
 export default ListboxSelectedOption;

package/dist/listbox/context.svelte.d.ts

@@ -0,0 +1,76 @@
+import type { Focus } from "../utils/calculate-active-index.js";
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+import type { SvelteMap } from "svelte/reactivity";
+export declare enum ListboxStates {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ValueMode {
+    Single = 0,
+    Multi = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}
+export type ListboxOptionDataRef<T> = MutableRefObject<{
+    textValue?: string;
+    disabled: boolean;
+    value: T;
+    domRef: MutableRefObject<HTMLElement | null>;
+}>;
+export interface StateDefinition<T> {
+    listboxState: ListboxStates;
+    options: {
+        id: string;
+        dataRef: ListboxOptionDataRef<T>;
+    }[];
+    searchQuery: string;
+    activeOptionIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    __demoMode: boolean;
+}
+export interface StateActions<T> {
+    openListbox(): void;
+    closeListbox(): void;
+    registerOption(id: string, dataRef: ListboxOptionDataRef<T>): void;
+    unregisterOption(id: string): void;
+    goToOption(action: {
+        focus: Focus.Specific;
+        id: string;
+        trigger?: ActivationTrigger;
+    } | {
+        focus: Exclude<Focus, Focus.Specific>;
+        trigger?: ActivationTrigger;
+    }): void;
+    search(query: string): void;
+    clearSearch(): void;
+}
+export type ListboxActionsContext<T = unknown> = {
+    registerOption(id: string, dataRef: ListboxOptionDataRef<T>): () => void;
+    goToOption(focus: Focus.Specific, id: string, trigger?: ActivationTrigger): void;
+    goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger): void;
+    selectOption(id: string): void;
+    selectActiveOption(): void;
+    onChange(value: T): void;
+} & Pick<StateActions<T>, "openListbox" | "closeListbox" | "search" | "clearSearch">;
+export declare function useActions<T>(component: string): ListboxActionsContext<T>;
+export type ListboxDataContext<T = unknown> = {
+    value: T;
+    disabled: boolean;
+    invalid: boolean;
+    mode: ValueMode;
+    orientation: "horizontal" | "vertical";
+    activeOptionIndex: number | null;
+    closeOnSelect?: boolean;
+    compare(a: T, z: T): boolean;
+    isSelected(value: T): boolean;
+    optionsProps: {
+        static: boolean;
+        hold: boolean;
+    };
+    listElements: SvelteMap<string, HTMLElement | null>;
+    buttonElement: HTMLElement | null;
+    optionsElement: HTMLElement | null;
+} & StateDefinition<T>;
+export declare function useData<T>(component: string): ListboxDataContext<T>;

package/dist/listbox/context.svelte.js

@@ -0,0 +1,36 @@
+import { getContext } from "svelte";
+export var ListboxStates;
+(function (ListboxStates) {
+    ListboxStates[ListboxStates["Open"] = 0] = "Open";
+    ListboxStates[ListboxStates["Closed"] = 1] = "Closed";
+})(ListboxStates || (ListboxStates = {}));
+export var ValueMode;
+(function (ValueMode) {
+    ValueMode[ValueMode["Single"] = 0] = "Single";
+    ValueMode[ValueMode["Multi"] = 1] = "Multi";
+})(ValueMode || (ValueMode = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export function useActions(component) {
+    const context = getContext("ListboxActionsContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useActions);
+        throw err;
+    }
+    return context;
+}
+export function useData(component) {
+    const context = getContext("ListboxDataContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useData);
+        throw err;
+    }
+    return context;
+}