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

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";
@@ -6,22 +6,9 @@ import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus
 import { match } from "../utils/match.js";
 import { useRef } from "../utils/ref.svelte.js";
 import { getContext, setContext } from "svelte";
+import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.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 * from "./ListboxStates.js";
 export function useActions(component) {
   const context = getContext("ListboxActionsContext");
   if (!context) {
@@ -42,13 +29,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,7 +219,7 @@ setContext("ListboxActionsContext", listboxActionsContext);
 const listboxDataContext = null;
 setContext("ListboxDataContext", listboxDataContext);
 let {
-  as,
+  ref = $bindable(),
   value: controlledValue,
   defaultValue,
   form,
@@ -244,7 +231,6 @@ let {
   horizontal = false,
   multiple = false,
   __demoMode = false,
-  children,
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
@@ -436,7 +422,6 @@ useLabels({
     }
   }
 });
-const ourProps = $derived(stateFromSlot(slot));
 const reset = () => {
   if (defaultValue === void 0) return;
   return theirOnChange?.(defaultValue);
@@ -446,6 +431,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

@@ -3,6 +3,7 @@ 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> = {
     open: boolean;
@@ -24,18 +25,7 @@ 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 * from "./ListboxStates.js";
 export type ListboxOptionDataRef<T> = MutableRefObject<{
     textValue?: string;
     disabled: boolean;
@@ -84,24 +74,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,5 +1,5 @@
-<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";
@@ -8,24 +8,23 @@ 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();
+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();
@@ -104,7 +103,7 @@ 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;
@@ -136,6 +135,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;
@@ -132,7 +131,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;