@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.50

package/dist/legend/Legend.svelte

@@ -1,23 +1,30 @@
 <script lang="ts" module>
-  import { Label, type LabelProps } from "../index.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Component } from "svelte"
+  import { Label } from "../index.js"
+  import type { Props } from "../utils/types.js"
+  import type { ClassValue } from "svelte/elements"
 
-  const DEFAULT_LEGEND_TAG = Label as Component<LabelProps, any>
+  const DEFAULT_LEGEND_TAG = "div" as const
 
-  type LegendRenderPropArg = {}
-  type LegendPropsWeControl = never
+  export type LegendOwnProps = {
+    element?: HTMLElement
+    class?: ClassValue
+  }
 
-  export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<
-    TTag,
-    LegendRenderPropArg,
-    LegendPropsWeControl,
-    {}
-  >
+  export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, {}, LegendOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">
-  let { ...props }: { as?: TTag } & LegendProps<TTag> = $props()
+<script lang="ts">
+  let { asChild, children: theirChildren, ...props }: LegendProps = $props()
 </script>
 
-<Label as="div" {...props} />
+<Label asChild>
+  {#snippet children({ props: childProps })}
+    {#if asChild}
+      {@render theirChildren?.({ props: { ...props, ...childProps } })}
+    {:else}
+      <div {...props} {...childProps}>
+        {@render theirChildren?.({ props: {} })}
+      </div>
+    {/if}
+  {/snippet}
+</Label>

package/dist/legend/Legend.svelte.d.ts

@@ -1,35 +1,11 @@
-import { type LabelProps } from "../index.js";
-import type { ElementType, Props } from "../utils/types.js";
-import type { Component } from "svelte";
-declare const DEFAULT_LEGEND_TAG: Component<LabelProps, any>;
-type LegendRenderPropArg = {};
-type LegendPropsWeControl = never;
-export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<TTag, LegendRenderPropArg, LegendPropsWeControl, {}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../index.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../index.js").PropsOf<TTag> ? { [P in T]: import("../index.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../index.js").Children<LegendRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../index.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../index.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("../index.js").PropsOf<TTag>["class"] | ((bag: LegendRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LEGEND_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_LEGEND_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 Legend: $$IsomorphicComponent;
-type Legend<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = InstanceType<typeof Legend<TTag>>;
+import type { Props } from "../utils/types.js";
+import type { ClassValue } from "svelte/elements";
+declare const DEFAULT_LEGEND_TAG: "div";
+export type LegendOwnProps = {
+    element?: HTMLElement;
+    class?: ClassValue;
+};
+export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, {}, LegendOwnProps>;
+declare const Legend: import("svelte").Component<LegendProps, {}, "">;
+type Legend = ReturnType<typeof Legend>;
 export default Legend;

package/dist/listbox/Listbox.svelte

@@ -5,128 +5,56 @@
   import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js"
   import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js"
   import { match } from "../utils/match.js"
-  import { useRef, type MutableRefObject } from "../utils/ref.svelte.js"
-  import type { ElementType, EnsureArray, Props } from "../utils/types.js"
-  import { getContext, setContext, type Snippet } from "svelte"
-  import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js"
+  import type { EnsureArray, PropsAsChild } from "../utils/types.js"
+  import { setContext } from "svelte"
+  import { ActivationTrigger, ListboxStates, ValueMode } from "./context.svelte.js"
 
-  let DEFAULT_LISTBOX_TAG = "svelte:fragment"
-  type ListboxRenderPropArg<T> = {
+  export type ListboxRenderPropArg<T> = {
     open: boolean
     disabled: boolean
     invalid: boolean
     value: T
   }
 
-  export type ListboxProps<
-    TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
-    TType = string,
-    TActualType = TType extends (infer U)[] ? U : TType,
-  > = Props<
-    TTag,
-    ListboxRenderPropArg<TType>,
-    "value" | "defaultValue" | "onchange" | "by" | "disabled" | "horizontal" | "name" | "multiple",
-    {
-      value?: TType
-      defaultValue?: TType
-      onchange?: (value: TType) => void
-      by?: ByComparator<TActualType>
-      disabled?: boolean
-      invalid?: boolean
-      horizontal?: boolean
-      form?: string
-      name?: string
-      multiple?: boolean
-
-      __demoMode?: boolean
-    }
-  >
-
-  export type ListboxChildren<T> = Snippet<[ListboxRenderPropArg<T>]>
-
-  export * from "./ListboxStates.js"
-
-  export type ListboxOptionDataRef<T> = MutableRefObject<{
-    textValue?: string
-    disabled: boolean
-    value: T
-    domRef: MutableRefObject<HTMLElement | null>
-  }>
-
-  interface StateDefinition<T> {
-    listboxState: ListboxStates
-
-    options: { id: string; dataRef: ListboxOptionDataRef<T> }[]
-    searchQuery: string
-    activeOptionIndex: number | null
-    activationTrigger: ActivationTrigger
-
-    __demoMode: boolean
+  export type ListboxOwnProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = {
+    value?: TType
+    defaultValue?: TType
+    onchange?: (value: TType) => void
+    by?: ByComparator<TActualType>
+    disabled?: boolean
+    invalid?: boolean
+    horizontal?: boolean
+    form?: string
+    name?: string
+    multiple?: boolean
+    closeOnSelect?: boolean
+    __demoMode?: boolean
   }
 
-  type ListboxActionsContext = {
-    openListbox(): void
-    closeListbox(): void
-    registerOption(id: string, dataRef: ListboxOptionDataRef<unknown>): () => 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: unknown): void
-    search(query: string): void
-    clearSearch(): void
-  }
-
-  export function useActions(component: string) {
-    const context = getContext<ListboxActionsContext>("ListboxActionsContext")
-    if (!context) {
-      let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`)
-      if (Error.captureStackTrace) Error.captureStackTrace(err, useActions)
-      throw err
-    }
-    return context
-  }
+  export type ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<
+    ListboxRenderPropArg<TType>,
+    ListboxOwnProps<TType, TActualType>
+  >
 
-  export type ListboxDataContext = {
-    value: unknown
-    disabled: boolean
-    invalid: boolean
-    mode: ValueMode
-    orientation: "horizontal" | "vertical"
-    activeOptionIndex: number | null
-    compare(a: unknown, z: unknown): boolean
-    isSelected(value: unknown): boolean
-
-    optionsPropsRef: MutableRefObject<{
-      static: boolean
-      hold: boolean
-    }>
-
-    listRef: MutableRefObject<Map<string, HTMLElement | null>>
-
-    buttonRef: MutableRefObject<HTMLElement | null>
-    optionsRef: MutableRefObject<HTMLElement | null>
-  } & Omit<StateDefinition<unknown>, "dataRef">
-
-  export function useData(component: string) {
-    const context = getContext<ListboxDataContext>("ListboxData")
-    if (context === null) {
-      let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`)
-      if (Error.captureStackTrace) Error.captureStackTrace(err, useData)
-      throw err
-    }
-    return context
-  }
+  export * from "./context.svelte.js"
 </script>
 
-<script lang="ts" generics="TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG">
+<script lang="ts" generics="TType = string, TActualType = TType extends (infer U)[] ? U : TType">
   import { disposables } from "../utils/disposables.js"
   import FormFields from "../internal/FormFields.svelte"
-  import { createFloatingContext } from "../internal/floating.svelte.js"
+  import { useFloatingProvider } from "../internal/floating-provider.svelte.js"
   import { createOpenClosedContext, State } from "../internal/open-closed.js"
   import { useLabels } from "../label/context.svelte.js"
   import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import type {
+    ListboxActionsContext,
+    ListboxDataContext,
+    ListboxOptionDataRef,
+    StateActions,
+    StateDefinition,
+  } from "./context.svelte.js"
+  import { SvelteMap } from "svelte/reactivity"
 
   function adjustOrderedState<T>(
     state: StateDefinition<T>,
@@ -199,11 +127,7 @@
         _state.__demoMode = false
         return _state
       },
-      goToOption(
-        action:
-          | { focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
-          | { focus: Exclude<Focus, Focus.Specific>; trigger?: ActivationTrigger }
-      ) {
+      goToOption(action) {
         if (disabled) return _state
         if (_state.listboxState === ListboxStates.Closed) return _state
 
@@ -302,7 +226,7 @@
         _state.activeOptionIndex = activeOptionIndex
         return _state
       },
-      search(value: string) {
+      search(value) {
         if (disabled) return _state
         if (_state.listboxState === ListboxStates.Closed) return _state
 
@@ -340,13 +264,13 @@
         _state.searchQuery = ""
         return _state
       },
-      registerOption(action: { id: string; dataRef: ListboxOptionDataRef<TActualType> }) {
-        let option = { id: action.id, dataRef: action.dataRef }
+      registerOption(id, dataRef) {
+        let option = { id, dataRef }
         let adjustedState = adjustOrderedState(_state, (options) => [...options, option])
 
         // Check if we need to make the newly registered option active.
         if (_state.activeOptionIndex === null) {
-          if (isSelected(action.dataRef.current.value as any)) {
+          if (isSelected(dataRef.current.value as any)) {
             adjustedState.activeOptionIndex = adjustedState.options.indexOf(option)
           }
         }
@@ -355,9 +279,9 @@
         _state.activeOptionIndex = adjustedState.activeOptionIndex
         return _state
       },
-      unregisterOption(action: { id: string }) {
+      unregisterOption(id) {
         let adjustedState = adjustOrderedState(_state, (options) => {
-          let idx = options.findIndex((a) => a.id === action.id)
+          let idx = options.findIndex((a) => a.id === id)
           if (idx !== -1) options.splice(idx, 1)
           return options
         })
@@ -367,19 +291,11 @@
         _state.activationTrigger = ActivationTrigger.Other
         return _state
       },
-    }
+    } satisfies StateDefinition<TActualType> & StateActions<TActualType>
   }
 
-  const listboxActionsContext: ListboxActionsContext | null = null
-  setContext("ListboxActionsContext", listboxActionsContext)
-
-  const listboxDataContext: ListboxDataContext | null = null
-  setContext("ListboxDataContext", listboxDataContext)
-
   let {
-    ref = $bindable(),
-    as,
-    value: controlledValue,
+    value: controlledValue = $bindable(),
     defaultValue,
     form,
     name,
@@ -389,12 +305,13 @@
     disabled: ownDisabled = false,
     horizontal = false,
     multiple = false,
+    closeOnSelect,
     __demoMode = false,
     ...theirProps
-  }: { as?: TTag } & ListboxProps<TTag, TType, TActualType> = $props()
+  }: ListboxProps<TType, TActualType> = $props()
 
   const providedDisabled = useDisabled()
-  const disabled = $derived(providedDisabled.value || ownDisabled)
+  const disabled = $derived(providedDisabled.current || ownDisabled)
 
   const orientation = horizontal ? "horizontal" : "vertical"
   const controllable = useControllable<any>(
@@ -402,6 +319,9 @@
       get controlledValue() {
         return controlledValue
       },
+      set controlledValue(value) {
+        controlledValue = value
+      },
     },
     controlledOnChange,
     defaultValue
@@ -418,13 +338,13 @@
     __demoMode,
   } as StateDefinition<TActualType>)
 
-  type _Data = ListboxDataContext
+  type _Data = ListboxDataContext<TActualType>
 
-  const optionsPropsRef = useRef<_Data["optionsPropsRef"]["current"]>({ static: false, hold: false })
+  const optionsProps = $state<_Data["optionsProps"]>({ static: false, hold: false })
 
-  const buttonRef = useRef<_Data["buttonRef"]["current"]>(null)
-  const optionsRef = useRef<_Data["optionsRef"]["current"]>(null)
-  const listRef = useRef<_Data["listRef"]["current"]>(new Map())
+  let buttonElement = $state<_Data["buttonElement"]>(null)
+  let optionsElement = $state<_Data["optionsElement"]>(null)
+  const listElements = new SvelteMap<string, HTMLElement | null>()
 
   const compare = useByComparator(by)
 
@@ -438,7 +358,7 @@
       },
     })
 
-  const data = {
+  const data: ListboxDataContext<TActualType> = {
     get listboxState() {
       return _state.listboxState
     },
@@ -472,23 +392,31 @@
     get orientation() {
       return orientation
     },
+    get closeOnSelect() {
+      return closeOnSelect
+    },
     compare,
     isSelected,
-    get optionsPropsRef() {
-      return optionsPropsRef
+    get optionsProps() {
+      return optionsProps
+    },
+    get buttonElement() {
+      return buttonElement
+    },
+    set buttonElement(value) {
+      buttonElement = value
     },
-    get buttonRef() {
-      return buttonRef
+    get optionsElement() {
+      return optionsElement
     },
-    get optionsRef() {
-      return optionsRef
+    set optionsElement(value) {
+      optionsElement = value
     },
-    get listRef() {
-      return listRef
+    get listElements() {
+      return listElements
     },
   }
-  setContext<ListboxDataContext>("ListboxDataContext", data)
-  setContext("ListboxData", data)
+  setContext<ListboxDataContext<TActualType>>("ListboxDataContext", data)
 
   // Handle outside click
   const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open)
@@ -497,14 +425,14 @@
       return outsideClickEnabled
     },
     get containers() {
-      return [data.buttonRef, data.optionsRef]
+      return [data.buttonElement, data.optionsElement]
     },
     cb: (event, target) => {
       _state.closeListbox()
 
       if (!isFocusableElement(target, FocusableMode.Loose)) {
         event.preventDefault()
-        data.buttonRef.current?.focus()
+        data.buttonElement?.focus()
       }
     },
   })
@@ -548,8 +476,8 @@
   }
 
   const registerOption = (id: string, dataRef: ListboxOptionDataRef<TActualType>) => {
-    _state.registerOption({ id, dataRef })
-    return () => _state.unregisterOption({ id })
+    _state.registerOption(id, dataRef)
+    return () => _state.unregisterOption(id)
   }
 
   const onChange = (value: unknown) => {
@@ -572,7 +500,7 @@
     })
   }
 
-  setContext<ListboxActionsContext>("ListboxActionsContext", {
+  setContext<ListboxActionsContext<TActualType>>("ListboxActionsContext", {
     onChange,
     registerOption,
     goToOption,
@@ -584,7 +512,7 @@
     clearSearch: _state.clearSearch,
   })
 
-  createFloatingContext()
+  useFloatingProvider()
 
   const openClosed = $derived(
     match(data.listboxState, {
@@ -602,7 +530,7 @@
     inherit: true,
     props: {
       get htmlFor() {
-        return data.buttonRef.current?.id
+        return data.buttonElement?.id
       },
     },
     slot: {
@@ -624,4 +552,4 @@
 {#if name && value}
   <FormFields {disabled} data={{ [name]: value }} {form} onReset={reset} />
 {/if}
-<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_LISTBOX_TAG} name="Listbox" bind:ref />
+<ElementOrComponent {theirProps} slots={slot} name="Listbox" />

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

@@ -1,17 +1,12 @@
 import { type ByComparator } from "../hooks/use-by-comparator.js";
-import { Focus } from "../utils/calculate-active-index.js";
-import { type MutableRefObject } from "../utils/ref.svelte.js";
-import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
-import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js";
-declare let DEFAULT_LISTBOX_TAG: string;
-type ListboxRenderPropArg<T> = {
+import type { PropsAsChild } from "../utils/types.js";
+export type ListboxRenderPropArg<T> = {
     open: boolean;
     disabled: boolean;
     invalid: boolean;
     value: T;
 };
-export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> = Props<TTag, ListboxRenderPropArg<TType>, "value" | "defaultValue" | "onchange" | "by" | "disabled" | "horizontal" | "name" | "multiple", {
+export type ListboxOwnProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = {
     value?: TType;
     defaultValue?: TType;
     onchange?: (value: TType) => void;
@@ -22,95 +17,25 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     form?: string;
     name?: string;
     multiple?: boolean;
+    closeOnSelect?: boolean;
     __demoMode?: boolean;
-}>;
-export type ListboxChildren<T> = Snippet<[ListboxRenderPropArg<T>]>;
-export * from "./ListboxStates.js";
-export type ListboxOptionDataRef<T> = MutableRefObject<{
-    textValue?: string;
-    disabled: boolean;
-    value: T;
-    domRef: MutableRefObject<HTMLElement | null>;
-}>;
-interface StateDefinition<T> {
-    listboxState: ListboxStates;
-    options: {
-        id: string;
-        dataRef: ListboxOptionDataRef<T>;
-    }[];
-    searchQuery: string;
-    activeOptionIndex: number | null;
-    activationTrigger: ActivationTrigger;
-    __demoMode: boolean;
-}
-type ListboxActionsContext = {
-    openListbox(): void;
-    closeListbox(): void;
-    registerOption(id: string, dataRef: ListboxOptionDataRef<unknown>): () => 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: unknown): void;
-    search(query: string): void;
-    clearSearch(): void;
 };
-export declare function useActions(component: string): ListboxActionsContext;
-export type ListboxDataContext = {
-    value: unknown;
-    disabled: boolean;
-    invalid: boolean;
-    mode: ValueMode;
-    orientation: "horizontal" | "vertical";
-    activeOptionIndex: number | null;
-    compare(a: unknown, z: unknown): boolean;
-    isSelected(value: unknown): boolean;
-    optionsPropsRef: MutableRefObject<{
-        static: boolean;
-        hold: boolean;
-    }>;
-    listRef: MutableRefObject<Map<string, HTMLElement | null>>;
-    buttonRef: MutableRefObject<HTMLElement | null>;
-    optionsRef: MutableRefObject<HTMLElement | null>;
-} & Omit<StateDefinition<unknown>, "dataRef">;
-export declare function useData(component: string): ListboxDataContext;
-declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "defaultValue" | "by" | "horizontal"> 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<ListboxRenderPropArg<TType>> | 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: ListboxRenderPropArg<TType>) => string) | undefined;
-    } : {}) & {
-        value?: TType | undefined;
-        defaultValue?: TType | undefined;
-        onchange?: ((value: TType) => void) | undefined;
-        by?: ByComparator<TActualType> | undefined;
-        disabled?: boolean;
-        invalid?: boolean;
-        horizontal?: boolean;
-        form?: string;
-        name?: string;
-        multiple?: boolean;
-        __demoMode?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+export type ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<ListboxRenderPropArg<TType>, ListboxOwnProps<TType, TActualType>>;
+export * from "./context.svelte.js";
+declare class __sveltets_Render<TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
+    props(): ListboxProps<TType, TActualType>;
+    events(): {};
     slots(): {};
-    bindings(): "ref";
+    bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TActualType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TActualType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TActualType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TActualType, TTag>['exports']>;
-    <TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TType, TActualType, TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TType, TActualType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <TType = string, TActualType = TType extends (infer U)[] ? U : TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TActualType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TActualType>['props']>, ReturnType<__sveltets_Render<TType, TActualType>['events']>, ReturnType<__sveltets_Render<TType, TActualType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType, TActualType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType, TActualType>['exports']>;
+    <TType = string, TActualType = TType extends (infer U)[] ? U : TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TActualType>['props']> & {}): ReturnType<__sveltets_Render<TType, TActualType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const Listbox: $$IsomorphicComponent;
-type Listbox<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> = InstanceType<typeof Listbox<TType, TActualType, TTag>>;
+type Listbox<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = InstanceType<typeof Listbox<TType, TActualType>>;
 export default Listbox;