@pzerelles/headlessui-svelte 2.1.2-next.32 → 2.1.2-next.33

package/dist/label/Label.svelte

@@ -1,15 +1,21 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  let DEFAULT_LABEL_TAG = "label" as const
-
-  export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
-    passive?: boolean
-    htmlFor?: string
-  }
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_LABEL_TAG = "label" as const
+
+  export type LabelProps = Props<
+    typeof DEFAULT_LABEL_TAG,
+    {},
+    {
+      element?: HTMLElement
+      id?: string
+      passive?: boolean
+      htmlFor?: string
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">
+<script lang="ts">
   import { onMount } from "svelte"
   import { useProvidedId, htmlid } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
@@ -23,12 +29,12 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
-    id = `headlessui-label-${internalId}` as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = `headlessui-label-${internalId}`,
     htmlFor = providedHtmlFor,
     passive = false,
     ...theirOriginalProps
-  }: { as?: TTag } & LabelProps<TTag> = $props()
+  }: LabelProps = $props()
 
   onMount(() => {
     context.register(id)
@@ -103,5 +109,5 @@
   {theirProps}
   defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
   name={context.name || "Label"}
-  bind:ref
+  bind:element
 />

package/dist/label/Label.svelte.d.ts

@@ -1,34 +1,10 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-declare let DEFAULT_LABEL_TAG: "label";
-export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_LABEL_TAG: "label";
+export type LabelProps = Props<typeof DEFAULT_LABEL_TAG, {}, {
+    element?: HTMLElement;
+    id?: string;
     passive?: boolean;
     htmlFor?: string;
-};
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: {}) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        passive?: boolean;
-        htmlFor?: string;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LABEL_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_LABEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Label: $$IsomorphicComponent;
-type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
+}>;
+declare const Label: import("svelte").Component<LabelProps, {}, "element">;
 export default Label;

package/dist/legend/Legend.svelte

@@ -4,14 +4,28 @@
 
   const DEFAULT_LEGEND_TAG = "div" as const
 
-  type LegendRenderPropArg = {}
-  type LegendPropsWeControl = never
-
-  export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>
+  export type LegendProps = Props<
+    typeof DEFAULT_LEGEND_TAG,
+    {},
+    {
+      element?: HTMLElement
+      class?: string
+    }
+  >
 </script>
 
 <script lang="ts">
-  let { ...props }: LegendProps = $props()
+  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,7 +1,8 @@
 import type { Props } from "../utils/types.js";
 declare const DEFAULT_LEGEND_TAG: "div";
-type LegendRenderPropArg = {};
-type LegendPropsWeControl = never;
-export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>;
+export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, {}, {
+    element?: HTMLElement;
+    class?: string;
+}>;
 declare const Legend: import("svelte").Component<LegendProps, {}, "">;
 export default Legend;

package/dist/listbox/Listbox.svelte

@@ -5,8 +5,8 @@
   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 type { ElementType, EnsureArray, Props } from "../utils/types.js"
-  import { setContext, type Snippet } from "svelte"
+  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"
@@ -17,14 +17,8 @@
     value: T
   }
 
-  export type ListboxProps<
-    TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
-    TType = string,
-    TActualType = TType extends (infer U)[] ? U : TType,
-  > = Props<
-    TTag,
+  export type ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<
     ListboxRenderPropArg<TType>,
-    "value" | "defaultValue" | "onchange" | "by" | "disabled" | "horizontal" | "name" | "multiple",
     {
       value?: TType
       defaultValue?: TType
@@ -37,7 +31,6 @@
       name?: string
       multiple?: boolean
       closeOnSelect?: boolean
-
       __demoMode?: boolean
     }
   >
@@ -45,10 +38,7 @@
   export * from "./context.svelte.js"
 </script>
 
-<script
-  lang="ts"
-  generics="TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType"
->
+<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 { useFloatingProvider } from "../internal/floating-provider.svelte.js"
@@ -304,7 +294,6 @@
   }
 
   let {
-    ref = $bindable(),
     value: controlledValue = $bindable(),
     defaultValue,
     form,
@@ -318,7 +307,7 @@
     closeOnSelect,
     __demoMode = false,
     ...theirProps
-  }: { as?: TTag } & ListboxProps<TTag, TType, TActualType> = $props()
+  }: ListboxProps<TType, TActualType> = $props()
 
   const providedDisabled = useDisabled()
   const disabled = $derived(providedDisabled.current || ownDisabled)
@@ -562,4 +551,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,14 +1,12 @@
 import { type ByComparator } from "../hooks/use-by-comparator.js";
-import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
-declare let DEFAULT_LISTBOX_TAG: string;
+import type { PropsAsChild } from "../utils/types.js";
 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 ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<ListboxRenderPropArg<TType>, {
     value?: TType;
     defaultValue?: TType;
     onchange?: (value: TType) => void;
@@ -23,41 +21,20 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     __demoMode?: boolean;
 }>;
 export * from "./context.svelte.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "value" | "name" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by" | "closeOnSelect"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[ListboxRenderPropArg<TType> & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ListboxRenderPropArg<TType>) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        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;
-        closeOnSelect?: boolean;
-        __demoMode?: boolean;
-    };
+declare class __sveltets_Render<TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
+    props(): ListboxProps<TType, TActualType>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']>, ReturnType<__sveltets_Render<TTag, TType, TActualType>['events']>, ReturnType<__sveltets_Render<TTag, TType, TActualType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType, TActualType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType, TActualType>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']> & {}): ReturnType<__sveltets_Render<TTag, TType, TActualType>['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<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> = InstanceType<typeof Listbox<TTag, TType, TActualType>>;
+type Listbox<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = InstanceType<typeof Listbox<TType, TActualType>>;
 export default Listbox;

package/dist/listbox/ListboxButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import { useId } from "../hooks/use-id.js"
   import { useProvidedId } from "../utils/id.js"
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { ListboxStates, useActions, useData } from "./Listbox.svelte"
   import { attemptSubmit } from "../utils/form.js"
   import { Focus } from "../utils/calculate-active-index.js"
@@ -10,7 +10,7 @@
   import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
   import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js"
   import { stateFromSlot } from "../utils/state.js"
-  import type { Snippet } from "svelte"
+  import type { SvelteHTMLElements } from "svelte/elements"
   import { useLabelledBy } from "../label/context.svelte.js"
   import { useDescribedBy } from "../description/context.svelte.js"
   import { useHover } from "../hooks/use-hover.svelte.js"
@@ -30,35 +30,36 @@
   }
   type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-labelledby" | "disabled"
 
-  export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
+  export type ListboxButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
     ButtonRenderPropArg,
-    ButtonPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       autofocus?: boolean
       disabled?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   const data = useData("ListboxButton")
   const actions = useActions("ListboxButton")
 
   const internalId = useId()
   const providedId = useProvidedId()
   let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-listbox-button-${internalId}`) as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = providedId || `headlessui-listbox-button-${internalId}`,
     disabled: ownDisabled = false,
     autofocus = false,
     ...theirProps
-  }: { as?: TTag } & ListboxButtonProps<TTag> = $props()
+  }: ListboxButtonProps = $props()
   const { setReference } = useFloatingReference()
   const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
   $effect(() => {
-    data.buttonElement = ref || null
-    setReference(ref)
+    data.buttonElement = element || null
+    setReference(element)
   })
 
   const disabled = $derived(data.disabled || ownDisabled)
@@ -149,7 +150,7 @@
 
   const buttonType = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as: theirProps.as }
+      return { type: theirProps.type ?? undefined, as: DEFAULT_BUTTON_TAG }
     },
     get ref() {
       return { current: data.buttonElement }
@@ -182,4 +183,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:element />

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

@@ -1,5 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-import type { Snippet } from "svelte";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
     disabled: boolean;
@@ -11,36 +10,11 @@ type ButtonRenderPropArg = {
     active: boolean;
     value: any;
 };
-type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-labelledby" | "disabled";
-export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+export type ListboxButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     autofocus?: boolean;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "autofocus" | ButtonPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[ButtonRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        autofocus?: boolean;
-        disabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_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_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxButton: $$IsomorphicComponent;
-type ListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof ListboxButton<TTag>>;
+declare const ListboxButton: import("svelte").Component<ListboxButtonProps, {}, "element">;
 export default ListboxButton;

package/dist/listbox/ListboxOption.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_OPTION_TAG = "div" as const
   type OptionRenderPropArg = {
@@ -13,11 +13,11 @@
   }
   type OptionPropsWeControl = "aria-disabled" | "aria-selected" | "role" | "tabIndex"
 
-  export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<
-    TTag,
+  export type ListboxOptionProps<TType = string> = Props<
+    typeof DEFAULT_OPTION_TAG,
     OptionRenderPropArg,
-    OptionPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       disabled?: boolean
       value: TType
@@ -25,7 +25,7 @@
   >
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG">
+<script lang="ts" generics="TType">
   import { useId } from "../hooks/use-id.js"
   import {
     ActivationTrigger,
@@ -37,7 +37,7 @@
   } from "./Listbox.svelte"
   import { disposables } from "../utils/disposables.js"
   import { Focus } from "../utils/calculate-active-index.js"
-  import { getContext, onMount, type Snippet } from "svelte"
+  import { getContext, onMount } from "svelte"
   import { useTextValue } from "../hooks/use-text-value.svelte.js"
   import { useTrackedPointer } from "../hooks/use-tracked-pointer.js"
   import { stateFromSlot } from "../utils/state.js"
@@ -45,12 +45,12 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-listbox-option-${internalId}`,
     disabled = false,
     value,
     ...theirProps
-  }: { as?: TTag } & ListboxOptionProps<TTag, TType> = $props()
+  }: ListboxOptionProps<TType> = $props()
   const usedInSelectedOption = getContext<boolean>("SelectedOptionContext") === true
   const data = useData("ListboxOption")
   const actions = useActions("ListboxOption")
@@ -62,13 +62,13 @@
   const selected = $derived(data.isSelected(value))
   const getTextValue = useTextValue({
     get element() {
-      return ref as HTMLElement
+      return element as HTMLElement
     },
   })
   const bag: ListboxOptionDataRef<TType>["current"] = $derived({
     disabled,
     value,
-    domRef: { current: ref || null },
+    domRef: { current: element || null },
     get textValue() {
       return getTextValue()
     },
@@ -76,14 +76,14 @@
 
   $effect(() => {
     if (usedInSelectedOption) return
-    if (!ref) {
+    if (!element) {
       data.listElements.delete(id)
     } else {
-      data.listElements.set(id, ref)
+      data.listElements.set(id, element)
     }
 
     return () => {
-      if (ref) data.listElements.delete(id)
+      if (element) data.listElements.delete(id)
     }
   })
 
@@ -93,7 +93,7 @@
     if (!active) return
     if (data.activationTrigger === ActivationTrigger.Pointer) return
     return disposables().requestAnimationFrame(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
+      ;(element as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
     })
   })
 
@@ -177,5 +177,5 @@
 </script>
 
 {#if selected || !usedInSelectedOption}
-  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:ref />
+  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:element />
 {/if}

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_OPTION_TAG: "div";
 type OptionRenderPropArg = {
     /** @deprecated use `focus` instead */
@@ -8,39 +8,26 @@ type OptionRenderPropArg = {
     disabled: boolean;
     selectedOption: boolean;
 };
-type OptionPropsWeControl = "aria-disabled" | "aria-selected" | "role" | "tabIndex";
-export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+export type ListboxOptionProps<TType = string> = Props<typeof DEFAULT_OPTION_TAG, OptionRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     value: TType;
 }>;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "value" | "id" | OptionPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[OptionRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: OptionRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-        value: TType;
-    };
+declare class __sveltets_Render<TType> {
+    props(): ListboxOptionProps<TType>;
     events(): {};
     slots(): {};
-    bindings(): "ref";
+    bindings(): "element";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    <TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {}): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxOption: $$IsomorphicComponent;
-type ListboxOption<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> = InstanceType<typeof ListboxOption<TType, TTag>>;
+type ListboxOption<TType> = InstanceType<typeof ListboxOption<TType>>;
 export default ListboxOption;

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,
@@ -7,8 +7,10 @@
     useResolvedAnchor,
     type AnchorPropsWithSelection,
   } from "../internal/floating.svelte.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   const DEFAULT_OPTIONS_TAG = "div" as const
+
   type OptionsRenderPropArg = {
     open: boolean
   }
@@ -22,11 +24,11 @@
 
   let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<
-    TTag,
+  export type ListboxOptionsProps = Props<
+    typeof DEFAULT_OPTIONS_TAG,
     OptionsRenderPropArg,
-    OptionsPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       anchor?: AnchorPropsWithSelection
       portal?: boolean
@@ -36,7 +38,7 @@
   >
 </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"
@@ -58,14 +60,14 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-listbox-options-${internalId}`,
     anchor: rawAnchor,
     portal = false,
     modal = true,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & ListboxOptionsProps<TTag> = $props()
+  }: ListboxOptionsProps = $props()
   const resolvedAnchor = useResolvedAnchor({
     get anchor() {
       return rawAnchor
@@ -219,9 +221,9 @@
   const getFloatingPanelProps = useFloatingPanelProps()
 
   $effect(() => {
-    localOptionsElement = ref
-    data.optionsElement = ref ?? null
-    if (anchor) setFloating(ref ?? null)
+    localOptionsElement = element
+    data.optionsElement = element ?? null
+    if (anchor) setFloating(element ?? null)
   })
 
   const searchDisposables = useDisposables()
@@ -414,6 +416,6 @@
     features={OptionsRenderFeatures}
     visible={panelEnabled}
     name="ListboxOptions"
-    bind:ref
+    bind:element
   />
 </Portal>