@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

package/dist/listbox/Listbox.svelte

@@ -1,54 +1,23 @@
-<script lang="ts" context="module">import { useByComparator } from "../hooks/use-by-comparator.js";
+<script lang="ts" module>import { useByComparator } from "../hooks/use-by-comparator.js";
 import { useControllable } from "../hooks/use-controllable.svelte.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 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 } from "../utils/ref.svelte.js";
-import { getContext, setContext } from "svelte";
+import { setContext } from "svelte";
+import { ActivationTrigger, ListboxStates, ValueMode } from "./context.svelte.js";
 let DEFAULT_LISTBOX_TAG = "svelte:fragment";
-export var ListboxStates = /* @__PURE__ */ ((ListboxStates2) => {
-  ListboxStates2[ListboxStates2["Open"] = 0] = "Open";
-  ListboxStates2[ListboxStates2["Closed"] = 1] = "Closed";
-  return ListboxStates2;
-})(ListboxStates || {});
-export var ValueMode = /* @__PURE__ */ ((ValueMode2) => {
-  ValueMode2[ValueMode2["Single"] = 0] = "Single";
-  ValueMode2[ValueMode2["Multi"] = 1] = "Multi";
-  return ValueMode2;
-})(ValueMode || {});
-export var ActivationTrigger = /* @__PURE__ */ ((ActivationTrigger2) => {
-  ActivationTrigger2[ActivationTrigger2["Pointer"] = 0] = "Pointer";
-  ActivationTrigger2[ActivationTrigger2["Other"] = 1] = "Other";
-  return ActivationTrigger2;
-})(ActivationTrigger || {});
-export function useActions(component) {
-  const context = getContext("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 function useData(component) {
-  const context = getContext("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="TTag extends ElementType, TType, TActualType">import { disposables } from "../utils/disposables.js";
+<script lang="ts" generics="TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG">import { disposables } from "../utils/disposables.js";
 import FormFields from "../internal/FormFields.svelte";
-import { createFloatingContext } from "../internal/floating.svelte.js";
+import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import { stateFromSlot } from "../utils/state.js";
-import { useLabels } from "../label/Label.svelte";
+import { useLabels } from "../label/context.svelte.js";
 import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { SvelteMap } from "svelte/reactivity";
 function adjustOrderedState(state, adjustment = (i) => i) {
   let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
   let sortedOptions = sortByDomNode(
@@ -202,11 +171,11 @@ const stateReducer = (initialState) => {
       _state2.searchQuery = "";
       return _state2;
     },
-    registerOption(action) {
-      let option = { id: action.id, dataRef: action.dataRef };
+    registerOption(id, dataRef) {
+      let option = { id, dataRef };
       let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
       if (_state2.activeOptionIndex === null) {
-        if (isSelected(action.dataRef.current.value)) {
+        if (isSelected(dataRef.current.value)) {
           adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
         }
       }
@@ -214,9 +183,9 @@ const stateReducer = (initialState) => {
       _state2.activeOptionIndex = adjustedState.activeOptionIndex;
       return _state2;
     },
-    unregisterOption(action) {
+    unregisterOption(id) {
       let adjustedState = adjustOrderedState(_state2, (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;
       });
@@ -227,12 +196,8 @@ const stateReducer = (initialState) => {
     }
   };
 };
-const listboxActionsContext = null;
-setContext("ListboxActionsContext", listboxActionsContext);
-const listboxDataContext = null;
-setContext("ListboxDataContext", listboxDataContext);
 let {
-  as,
+  ref = $bindable(),
   value: controlledValue,
   defaultValue,
   form,
@@ -244,7 +209,6 @@ let {
   horizontal = false,
   multiple = false,
   __demoMode = false,
-  children,
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
@@ -269,10 +233,10 @@ const _state = stateReducer({
   optionsVisible: false,
   __demoMode
 });
-const optionsPropsRef = useRef({ static: false, hold: false });
-const buttonRef = useRef(null);
-const optionsRef = useRef(null);
-const listRef = useRef(/* @__PURE__ */ new Map());
+const optionsProps = $state({ static: false, hold: false });
+let buttonElement = $state(null);
+let optionsElement = $state(null);
+const listElements = new SvelteMap();
 const compare = useByComparator(by);
 const isSelected = (compareValue) => match(data.mode, {
   [ValueMode.Multi]: () => {
@@ -318,34 +282,39 @@ const data = {
   },
   compare,
   isSelected,
-  get optionsPropsRef() {
-    return optionsPropsRef;
+  get optionsProps() {
+    return optionsProps;
+  },
+  get buttonElement() {
+    return buttonElement;
+  },
+  set buttonElement(value2) {
+    buttonElement = value2;
   },
-  get buttonRef() {
-    return buttonRef;
+  get optionsElement() {
+    return optionsElement;
   },
-  get optionsRef() {
-    return optionsRef;
+  set optionsElement(value2) {
+    optionsElement = value2;
   },
-  get listRef() {
-    return listRef;
+  get listElements() {
+    return listElements;
   }
 };
 setContext("ListboxDataContext", data);
-setContext("ListboxData", data);
 const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open);
 useOutsideClick({
   get enabled() {
     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();
     }
   }
 });
@@ -377,8 +346,8 @@ const goToOption = (focus, id, trigger) => {
   });
 };
 const registerOption = (id, dataRef) => {
-  _state.registerOption({ id, dataRef });
-  return () => _state.unregisterOption({ id });
+  _state.registerOption(id, dataRef);
+  return () => _state.unregisterOption(id);
 };
 const onChange = (value2) => {
   return match(data.mode, {
@@ -408,7 +377,7 @@ setContext("ListboxActionsContext", {
   search: _state.search,
   clearSearch: _state.clearSearch
 });
-createFloatingContext();
+useFloatingProvider();
 const openClosed = $derived(
   match(data.listboxState, {
     [ListboxStates.Open]: State.Open,
@@ -424,7 +393,7 @@ useLabels({
   inherit: true,
   props: {
     get htmlFor() {
-      return data.buttonRef.current?.id;
+      return data.buttonElement?.id;
     }
   },
   slot: {
@@ -436,7 +405,6 @@ useLabels({
     }
   }
 });
-const ourProps = $derived(stateFromSlot(slot));
 const reset = () => {
   if (defaultValue === void 0) return;
   return theirOnChange?.(defaultValue);
@@ -446,6 +414,4 @@ const reset = () => {
 {#if name && value}
   <FormFields {disabled} data={{ [name]: value }} {form} onReset={reset} />
 {/if}
-<svelte:element this={as ?? DEFAULT_LISTBOX_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_LISTBOX_TAG} name="Listbox" bind:ref />

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

@@ -1,6 +1,4 @@
 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";
 declare let DEFAULT_LISTBOX_TAG: string;
@@ -24,84 +22,44 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     __demoMode?: boolean;
 }>;
 export type ListboxChildren<T> = Snippet<[ListboxRenderPropArg<T>]>;
-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>;
-}>;
-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<TTag extends ElementType, TType, TActualType> {
-    props(): ListboxProps<TTag, TType, TActualType>;
+export * from "./context.svelte.js";
+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" | "horizontal" | "defaultValue" | "by"> 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>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType, TType, TActualType>(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, TType, TActualType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType, TActualType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType, TActualType>['exports']>;
+    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']>;
 }
 declare const Listbox: $$IsomorphicComponent;
-type Listbox<TTag extends ElementType, TType, TActualType> = InstanceType<typeof Listbox<TTag, TType, TActualType>>;
+type Listbox<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> = InstanceType<typeof Listbox<TType, TActualType, TTag>>;
 export default Listbox;

package/dist/listbox/ListboxButton.svelte

@@ -1,36 +1,36 @@
-<script lang="ts" context="module">import { useId } from "../hooks/use-id.js";
-import { getIdContext } from "../utils/id.js";
+<script lang="ts" module>import { useId } from "../hooks/use-id.js";
+import { useProvidedId } from "../utils/id.js";
 import { ListboxStates, useActions, useData } from "./Listbox.svelte";
 import { attemptSubmit } from "../utils/form.js";
 import { Focus } from "../utils/calculate-active-index.js";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import { useActivePress } from "../hooks/use-active-press.svelte.js";
 import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { useFloating } from "../internal/floating.svelte.js";
+import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js";
 import { stateFromSlot } from "../utils/state.js";
-import { useLabelledBy } from "../label/Label.svelte";
-import { useDescribedBy } from "../description/Description.svelte";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const DEFAULT_BUTTON_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">const data = useData("ListboxButton");
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const data = useData("ListboxButton");
 const actions = useActions("ListboxButton");
 const internalId = useId();
-const providedId = getIdContext();
+const providedId = useProvidedId();
 let {
-  as = DEFAULT_BUTTON_TAG,
   ref = $bindable(),
   id = providedId || `headlessui-listbox-button-${internalId}`,
   disabled: ownDisabled = false,
   autofocus = false,
-  children,
   ...theirProps
 } = $props();
-const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+const { setReference } = useFloatingReference();
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
 $effect(() => {
-  data.buttonRef.current = ref || null;
+  data.buttonElement = ref || null;
   setReference(ref);
 });
 const disabled = $derived(data.disabled || ownDisabled);
@@ -62,7 +62,7 @@ const handleKeyUp = (event) => {
 const handleClick = (event) => {
   if (data.listboxState === ListboxStates.Open) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   } else {
     event.preventDefault();
     actions.openListbox();
@@ -104,10 +104,10 @@ const slot = $derived({
 });
 const buttonType = useResolveButtonType({
   get props() {
-    return { type: theirProps.type, as };
+    return { type: theirProps.type, as: theirProps.as };
   },
   get ref() {
-    return data.buttonRef;
+    return { current: data.buttonElement };
   }
 });
 const ourProps = $derived(
@@ -117,7 +117,7 @@ const ourProps = $derived(
       id,
       type: buttonType.type,
       "aria-haspopup": "listbox",
-      "aria-controls": data.optionsRef.current?.id,
+      "aria-controls": data.optionsElement?.id,
       "aria-expanded": data.listboxState === ListboxStates.Open,
       "aria-labelledby": labelledBy.value,
       "aria-describedby": describedBy.value,
@@ -136,6 +136,4 @@ const ourProps = $derived(
 );
 </script>
 
-<svelte:element this={as} bind:this={ref} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />

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

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 import type { Snippet } from "svelte";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
@@ -15,11 +15,20 @@ type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup"
 export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
     autofocus?: boolean;
     disabled?: boolean;
-    ref?: HTMLElementType<TTag> | null;
 }>;
 export type ListboxButtonChildren = Snippet<[ButtonRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): ListboxButtonProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | ButtonPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<ButtonRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
+    } : {}) & {
+        autofocus?: boolean;
+        disabled?: boolean;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -28,14 +37,14 @@ declare class __sveltets_Render<TTag extends ElementType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType>(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']>> & {
+    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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_BUTTON_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 ListboxButton: $$IsomorphicComponent;
-type ListboxButton<TTag extends ElementType> = InstanceType<typeof ListboxButton<TTag>>;
+type ListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof ListboxButton<TTag>>;
 export default ListboxButton;

package/dist/listbox/ListboxOption.svelte

@@ -1,7 +1,7 @@
-<script lang="ts" context="module">const DEFAULT_OPTION_TAG = "div";
+<script lang="ts" module>const DEFAULT_OPTION_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType, TType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG">import { useId } from "../hooks/use-id.js";
 import {
   ActivationTrigger,
   ListboxStates,
@@ -15,14 +15,13 @@ 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";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
 let {
-  as = DEFAULT_OPTION_TAG,
   ref = $bindable(),
   id = `headlessui-listbox-option-${internalId}`,
   disabled = false,
   value,
-  children,
   ...theirProps
 } = $props();
 const usedInSelectedOption = getContext("SelectedOptionContext") === true;
@@ -45,10 +44,13 @@ const bag = $derived({
 });
 $effect(() => {
   if (!ref) {
-    data.listRef.current.delete(id);
+    data.listElements.delete(id);
   } else {
-    data.listRef.current.set(id, ref);
+    data.listElements.set(id, ref);
   }
+  return () => {
+    if (ref) data.listElements.delete(id);
+  };
 });
 $effect(() => {
   if (data.__demoMode) return;
@@ -73,7 +75,7 @@ const handleClick = (event) => {
   actions.onChange(value);
   if (data.mode === ValueMode.Single) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   }
 };
 const handleFocus = () => {
@@ -132,7 +134,5 @@ const ourProps = $derived(
 </script>
 
 {#if selected || !usedInSelectedOption}
-  <svelte:element this={as} bind:this={ref} {...ourProps} {...theirProps}>
-    {#if children}{@render children(slot)}{/if}
-  </svelte:element>
+  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:ref />
 {/if}

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

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLElementType, Props } from "../utils/types.js";
+import type { ElementType, Props } from "../utils/types.js";
 declare const DEFAULT_OPTION_TAG: "div";
 type OptionRenderPropArg = {
     /** @deprecated use `focus` instead */
@@ -10,14 +10,25 @@ type OptionRenderPropArg = {
 };
 type OptionPropsWeControl = "aria-disabled" | "aria-selected" | "role" | "tabIndex";
 export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<TTag, OptionRenderPropArg, OptionPropsWeControl, {
+    id?: string;
     disabled?: boolean;
     value: TType;
-    ref?: HTMLElementType<TTag> | null;
 }>;
 export type ListboxOptionChildren = Snippet<[OptionRenderPropArg]>;
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends ElementType, TType> {
-    props(): ListboxOptionProps<TTag, TType>;
+declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<OptionRenderPropArg> | 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: OptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        disabled?: boolean;
+        value: TType;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -26,14 +37,14 @@ declare class __sveltets_Render<TTag extends ElementType, TType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends ElementType, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    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']> & {
+        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ListboxOption: $$IsomorphicComponent;
-type ListboxOption<TTag extends ElementType, TType> = InstanceType<typeof ListboxOption<TTag, TType>>;
+type ListboxOption<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> = InstanceType<typeof ListboxOption<TType, TTag>>;
 export default ListboxOption;