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

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

@@ -1,50 +1,37 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type LabelProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_LABEL_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
+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> & {
     passive?: boolean;
     htmlFor?: string;
-    children?: Snippet<[
-        {
-            disabled: boolean;
-        }
-    ]>;
 };
-declare const DEFAULT_LABEL_TAG: "label";
-interface SharedData {
-    slot?: {};
-    name?: string;
-    props?: Record<string, any>;
-}
-export type LabelContext = {
-    value: string | undefined;
-    register(value: string): () => void;
-} & SharedData;
-export declare function useLabelContext(): LabelContext;
-export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
-    readonly value: string | undefined;
-};
-export declare const useLabels: (options?: SharedData & {
-    inherit?: boolean;
-}) => LabelContext;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
-    props(): LabelProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<{}> | 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: {}) => string) | undefined;
+    } : {}) & {
+        passive?: boolean;
+        htmlFor?: string;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements>(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_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 keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_LABEL_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 Label: $$IsomorphicComponent;
-type Label<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Label<TTag>>;
+type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
 export default Label;

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

@@ -0,0 +1,17 @@
+interface SharedData {
+    slot?: {};
+    name?: string;
+    props?: Record<string, any>;
+}
+export type LabelContext = {
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useLabelContext(): LabelContext;
+export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
+    readonly value: string | undefined;
+};
+export declare const useLabels: (options?: SharedData & {
+    inherit?: boolean;
+}) => LabelContext;
+export {};

package/dist/label/context.svelte.js

@@ -0,0 +1,56 @@
+import { getContext, setContext } from "svelte";
+export function useLabelContext() {
+    let context = getContext("LabelContext");
+    if (context === null) {
+        let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useLabelContext);
+        throw err;
+    }
+    return context;
+}
+export function useLabelledBy(alwaysAvailableIds) {
+    const context = getContext("LabelContext");
+    const value = $derived((alwaysAvailableIds?.length ?? 0) > 0
+        ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ")
+        : context?.value);
+    return {
+        get value() {
+            return value;
+        },
+    };
+}
+export const useLabels = (options = {}) => {
+    const { slot, name, props, inherit } = $derived(options);
+    const parentLabelledBy = useLabelledBy();
+    let labelIds = $state([]);
+    const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
+    const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : undefined);
+    const context = {
+        get slot() {
+            return slot;
+        },
+        get name() {
+            return name;
+        },
+        get props() {
+            return props;
+        },
+        get value() {
+            return value;
+        },
+        register(value) {
+            labelIds.push(value);
+            return () => {
+                const clone = labelIds.slice();
+                const idx = clone.indexOf(value);
+                if (idx !== -1)
+                    clone.splice(idx, 1);
+                labelIds = clone;
+                return labelIds;
+            };
+        },
+    };
+    setContext("LabelContext", context);
+    return context;
+};

package/dist/legend/Legend.svelte

@@ -1,7 +1,8 @@
-<script lang="ts" context="module"></script>
+<script lang="ts" module>import { Label } from "../index.js";
+const DEFAULT_LEGEND_TAG = Label;
+</script>
 
-<script lang="ts">import Label from "../label/Label.svelte";
-let { ...props } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">let { ...props } = $props();
 </script>
 
 <Label as="div" {...props} />

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

@@ -1,17 +1,35 @@
-export type LegendProps = SvelteHTMLElements["div"];
-import type { SvelteHTMLElements } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
+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(): {};
 }
-declare const Legend: $$__sveltets_2_IsomorphicComponent<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Legend = InstanceType<typeof Legend>;
+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>>;
 export default Legend;

package/dist/listbox/Listbox.svelte

@@ -1,4 +1,4 @@
-<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";
@@ -42,13 +42,13 @@ export function useData(component) {
 }
 </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 { 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";
 function adjustOrderedState(state, adjustment = (i) => i) {
   let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
   let sortedOptions = sortByDomNode(
@@ -232,6 +232,7 @@ setContext("ListboxActionsContext", listboxActionsContext);
 const listboxDataContext = null;
 setContext("ListboxDataContext", listboxDataContext);
 let {
+  ref = $bindable(),
   as,
   value: controlledValue,
   defaultValue,
@@ -244,7 +245,6 @@ let {
   horizontal = false,
   multiple = false,
   __demoMode = false,
-  children,
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
@@ -436,7 +436,6 @@ useLabels({
     }
   }
 });
-const ourProps = $derived(stateFromSlot(slot));
 const reset = () => {
   if (defaultValue === void 0) return;
   return theirOnChange?.(defaultValue);
@@ -446,6 +445,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

@@ -84,24 +84,43 @@ export type ListboxDataContext = {
     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>;
+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>;
     };
     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,4 +1,4 @@
-<script lang="ts" context="module">import { useId } from "../hooks/use-id.js";
+<script lang="ts" module>import { useId } from "../hooks/use-id.js";
 import { getIdContext } from "../utils/id.js";
 import { ListboxStates, useActions, useData } from "./Listbox.svelte";
 import { attemptSubmit } from "../utils/form.js";
@@ -8,14 +8,15 @@ 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 { 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();
@@ -25,7 +26,6 @@ let {
   id = providedId || `headlessui-listbox-button-${internalId}`,
   disabled: ownDisabled = false,
   autofocus = false,
-  children,
   ...theirProps
 } = $props();
 const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
@@ -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 } from "../utils/types.js";
 import type { Snippet } from "svelte";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
@@ -13,13 +13,24 @@ type ButtonRenderPropArg = {
 };
 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, {
+    id?: string;
     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 import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "id" | ButtonPropsWeControl> 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<ButtonRenderPropArg> | 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: ButtonRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        autofocus?: boolean;
+        disabled?: boolean;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -28,14 +39,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,6 +15,7 @@ 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,
@@ -22,7 +23,6 @@ let {
   id = `headlessui-listbox-option-${internalId}`,
   disabled = false,
   value,
-  children,
   ...theirProps
 } = $props();
 const usedInSelectedOption = getContext("SelectedOptionContext") === true;
@@ -132,7 +132,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;

package/dist/listbox/ListboxOptions.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">import { mergeProps, RenderFeatures } from "../utils/render.js";
+<script lang="ts" module>import { mergeProps, RenderFeatures } from "../utils/render.js";
 import {
   useFloatingPanel,
   useFloatingPanelProps,
@@ -8,7 +8,7 @@ const DEFAULT_OPTIONS_TAG = "div";
 let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">import { useId } from "../hooks/use-id.js";
 import { ListboxStates, useActions, useData, ValueMode } from "./Listbox.svelte";
 import { getOwnerDocument } from "../utils/owner.js";
 import { State, useOpenClosed } from "../internal/open-closed.js";
@@ -23,10 +23,11 @@ import { match } from "../utils/match.js";
 import { Focus } from "../utils/calculate-active-index.js";
 import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js";
 import { useElementSize } from "../hooks/use-element-size.svelte.js";
-import { getContext, setContext } from "svelte";
+import { setContext } 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,
@@ -36,7 +37,6 @@ let {
   portal = false,
   modal = true,
   transition = false,
-  children,
   static: isStatic = false,
   unmount = true,
   ...theirProps
@@ -93,7 +93,7 @@ useInertOthers({
   },
   elements: {
     get allowed() {
-      return () => [data.buttonRef.current, data.optionsRef.current];
+      return [data.buttonRef.current, data.optionsRef.current];
     }
   }
 });
@@ -124,7 +124,7 @@ const selectedOptionIndex = () => {
   if (idx === -1) idx = 0;
   return idx;
 };
-const anchorOptions = (() => {
+const anchorOptions = $derived.by(() => {
   if (anchor == null) return void 0;
   if (selectedOptionIndex === null) return { ...anchor, inner: void 0 };
   let elements = Array.from(data.listRef.current.values());
@@ -135,8 +135,12 @@ const anchorOptions = (() => {
       index: selectedOptionIndex
     }
   };
-})();
-const floatingPanel = useFloatingPanel(anchorOptions);
+});
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchorOptions ?? null;
+  }
+});
 const { setFloating, style } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
@@ -224,7 +228,6 @@ const buttonSize = useElementSize({
 const ourProps = $derived(
   mergeProps(anchor ? getFloatingPanelProps() : {}, {
     id,
-    ref: optionsRef,
     "aria-activedescendant": data.activeOptionIndex === null ? void 0 : data.options[data.activeOptionIndex]?.id,
     "aria-multiselectable": data.mode === ValueMode.Multi ? true : void 0,
     "aria-labelledby": labelledby,
@@ -253,15 +256,14 @@ setContext("ListboxDataContext", derivedData);
   {#if !panelEnabled && unmount && !isStatic}
     <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
   {:else}
-    <svelte:element
-      this={as}
-      bind:this={ref}
-      {...ourProps}
-      {...theirProps}
-      hidden={isStatic || panelEnabled ? undefined : true}
-      style={isStatic || panelEnabled ? theirProps.style : "display: none;"}
-    >
-      {#if children}{@render children(slot)}{/if}
-    </svelte:element>
+    <ElementOrComponent
+      {ourProps}
+      {theirProps}
+      slots={slot}
+      defaultTag={DEFAULT_OPTIONS_TAG}
+      features={OptionsRenderFeatures}
+      name="MenuItems"
+      bind:ref
+    />
   {/if}
 </Portal>