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

package/dist/menu/context.svelte.js

@@ -0,0 +1,21 @@
+import { getContext } from "svelte";
+export var MenuStates;
+(function (MenuStates) {
+    MenuStates[MenuStates["Open"] = 0] = "Open";
+    MenuStates[MenuStates["Closed"] = 1] = "Closed";
+})(MenuStates || (MenuStates = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export function useMenuContext(component) {
+    const context = getContext("MenuContext");
+    if (!context) {
+        let err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useMenuContext);
+        throw err;
+    }
+    return context;
+}

package/dist/menu/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Menu, type MenuProps, type MenuChildren } from "./Menu.svelte";
+export { default as MenuButton, type MenuButtonProps, type MenuButtonChildren } from "./MenuButton.svelte";
+export { default as MenuHeading, type MenuHeadingProps, type MenuHeadingChildren } from "./MenuHeading.svelte";
+export { default as MenuItem, type MenuItemProps, type MenuItemChildren } from "./MenuItem.svelte";
+export { default as MenuItems, type MenuItemsProps, type MenuItemsChildren } from "./MenuItems.svelte";
+export { default as MenuSection, type MenuSectionProps, type MenuSectionChildren } from "./MenuSection.svelte";
+export { default as MenuSeparator, type MenuSeparatorProps, type MenuSeparatorChildren } from "./MenuSeparator.svelte";

package/dist/menu/index.js

@@ -0,0 +1,7 @@
+export { default as Menu } from "./Menu.svelte";
+export { default as MenuButton } from "./MenuButton.svelte";
+export { default as MenuHeading } from "./MenuHeading.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as MenuItems } from "./MenuItems.svelte";
+export { default as MenuSection } from "./MenuSection.svelte";
+export { default as MenuSeparator } from "./MenuSeparator.svelte";

package/dist/portal/InternalPortal.svelte

@@ -1,15 +1,15 @@
-<script lang="ts" context="module">import { usePortalRoot } from "../internal/portal-force-root.svelte.js";
+<script lang="ts" module>import { usePortalRoot } from "../internal/portal-force-root.svelte.js";
 import { getOwnerDocument } from "../utils/owner.js";
 import { getContext, onMount, setContext } from "svelte";
 import { env } from "../utils/env.js";
-import Portal from "../internal/Portal.svelte";
 function usePortalTarget(options) {
   const { element } = $derived(options);
   const forceInRoot = usePortalRoot();
-  const groupTarget = getContext("PortalGroupContext");
+  const portalGroupContext = getContext("PortalGroupContext");
+  const { target: groupTarget } = $derived(portalGroupContext ?? {});
   const ownerDocument = $derived(getOwnerDocument(element));
   const initialTarget = () => {
-    if (!forceInRoot && groupTarget !== null) return groupTarget.current ?? null;
+    if (!forceInRoot?.force && groupTarget) return groupTarget ?? null;
     if (env.isServer) return null;
     let existingRoot = ownerDocument?.getElementById("headlessui-portal-root");
     if (existingRoot) return existingRoot;
@@ -20,15 +20,15 @@ function usePortalTarget(options) {
   };
   let target = $state(initialTarget());
   $effect(() => {
-    if (target === null) return;
+    if (!target) return;
     if (!ownerDocument?.body.contains(target)) {
       ownerDocument?.body.appendChild(target);
     }
   });
   $effect(() => {
-    if (forceInRoot) return;
-    if (groupTarget === null) return;
-    target = groupTarget.current;
+    if (forceInRoot?.force) return;
+    if (!groupTarget) return;
+    target = groupTarget;
   });
   return {
     get target() {
@@ -59,38 +59,31 @@ export function useNestedPortals() {
   setContext("PortalParentContext", context);
   return context;
 }
-export const DEFAULT_PORTAL_TAG = "svelte:fragment";
+export const DEFAULT_PORTAL_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">let { as = DEFAULT_PORTAL_TAG, children, ...theirProps } = $props();
-let internalPortalRootRef = $state(null);
-const portalRef = $derived(internalPortalRootRef);
-const ownerDocument = $derived(getOwnerDocument(internalPortalRootRef));
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let { ref = $bindable(), ...theirProps } = $props();
 const portalTarget = usePortalTarget({
   get element() {
-    return internalPortalRootRef;
+    return ref ?? null;
   }
 });
 const { target } = $derived(portalTarget);
-const element = $derived(env.isServer ? null : ownerDocument?.createElement("div") ?? null);
 const parent = getContext("PortalParentContext");
 $effect(() => {
-  if (!target || !element) return;
-  if (!target.contains(element)) {
-    element.setAttribute("data-headlessui-portal", "");
-    target.appendChild(element);
+  if (!target || !ref) return;
+  if (ref.parentNode !== target) {
+    ref.setAttribute("data-headlessui-portal", "");
+    target.appendChild(ref);
   }
 });
-$effect(() => {
-  if (!element) return;
-  if (!parent) return;
-  return parent.register(element);
-});
 onMount(() => {
+  if (parent) parent.register(ref);
   return () => {
-    if (!target || !element) return;
-    if (element instanceof Node && target.contains(element)) {
-      target.removeChild(element);
+    if (!target || !ref) return;
+    if (ref instanceof Node && target.contains(ref)) {
+      target.removeChild(ref);
     }
     if (target.childNodes.length <= 0) {
       target.parentElement?.removeChild(target);
@@ -99,10 +92,6 @@ onMount(() => {
 });
 </script>
 
-{#if target && element}
-  <Portal target={element}>
-    <svelte:element this={as} bind:this={internalPortalRootRef} {...theirProps}>
-      {#if children}{@render children({})}{/if}
-    </svelte:element>
-  </Portal>
+{#if target}
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:ref />
 {/if}

package/dist/portal/InternalPortal.svelte.d.ts

@@ -5,30 +5,39 @@ type PortalParentContext = {
     readonly portals: HTMLElement[];
 };
 export declare function useNestedPortals(): PortalParentContext;
-export declare const DEFAULT_PORTAL_TAG = "svelte:fragment";
+export declare const DEFAULT_PORTAL_TAG = "div";
 type PortalRenderPropArg = {};
 type PortalPropsWeControl = never;
 export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, {
     enabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): PortalProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "enabled"> 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<PortalRenderPropArg> | 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: PortalRenderPropArg) => string) | undefined;
+    } : {}) & {
+        enabled?: boolean;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     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_PORTAL_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_PORTAL_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 InternalPortal: $$IsomorphicComponent;
-type InternalPortal<TTag extends ElementType> = InstanceType<typeof InternalPortal<TTag>>;
+type InternalPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof InternalPortal<TTag>>;
 export default InternalPortal;

package/dist/portal/Portal.svelte

@@ -1,11 +1,7 @@
-<script lang="ts" generics="TTag extends ElementType">import InternalPortal, { DEFAULT_PORTAL_TAG } from "./InternalPortal.svelte";
-let { as = DEFAULT_PORTAL_TAG, enabled = true, children, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import InternalPortal, { DEFAULT_PORTAL_TAG } from "./InternalPortal.svelte";
+let { ref = $bindable(), enabled = true, ...theirProps } = $props();
 </script>
 
 {#if enabled}
-  <InternalPortal {...theirProps} />
-{:else}
-  <svelte:element this={as} {...theirProps}>
-    {#if children}{@render children({})}{/if}
-  </svelte:element>
-{/if}
+  <InternalPortal {...theirProps} bind:ref />
+{:else if theirProps.children}{@render theirProps.children()}{/if}

package/dist/portal/Portal.svelte.d.ts

@@ -1,23 +1,23 @@
 import type { ElementType } from "../utils/types.js";
-import { type PortalProps } from "./InternalPortal.svelte";
-declare class __sveltets_Render<TTag extends ElementType> {
+import { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte";
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
     props(): PortalProps<TTag>;
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     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_PORTAL_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_PORTAL_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 Portal: $$IsomorphicComponent;
-type Portal<TTag extends ElementType> = InstanceType<typeof Portal<TTag>>;
+type Portal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof Portal<TTag>>;
 export default Portal;

package/dist/portal/PortalGroup.svelte

@@ -1,8 +1,9 @@
-<script lang="ts" context="module">const DEFAULT_GROUP_TAG = "svelte:fragment";
+<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { setContext } from "svelte";
-let { as = DEFAULT_GROUP_TAG, target, children, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { setContext } from "svelte";
+let { ref = $bindable(), target, ...theirProps } = $props();
 setContext("PortalGroupContext", {
   get target() {
     return target;
@@ -10,6 +11,4 @@ setContext("PortalGroupContext", {
 });
 </script>
 
-<svelte:element this={as} {...theirProps}>
-  {#if children}{@render children({})}{/if}
-</svelte:element>
+<ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PortalGroup" bind:ref />

package/dist/portal/PortalGroup.svelte.d.ts

@@ -3,29 +3,38 @@ declare const DEFAULT_GROUP_TAG = "svelte:fragment";
 type GroupRenderPropArg = {};
 type GroupPropsWeControl = never;
 export type PortalGroupContext = {
-    readonly element: HTMLElement | null;
+    readonly target: HTMLElement | null;
 };
 export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, {
     target: HTMLElement | null;
 }>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): PortalGroupProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "target"> 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<GroupRenderPropArg> | 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: GroupRenderPropArg) => string) | undefined;
+    } : {}) & {
+        target: HTMLElement | null;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     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_GROUP_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_GROUP_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 PortalGroup: $$IsomorphicComponent;
-type PortalGroup<TTag extends ElementType> = InstanceType<typeof PortalGroup<TTag>>;
+type PortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PortalGroup<TTag>>;
 export default PortalGroup;

package/dist/switch/Switch.svelte

@@ -1,27 +1,26 @@
-<script lang="ts" context="module">const DEFAULT_SWITCH_TAG = "button";
+<script lang="ts" module>const DEFAULT_SWITCH_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">import { useId } from "../hooks/use-id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 import { useProvidedId } from "../internal/id.js";
 import { getContext } from "svelte";
-import { useControllable } from "../hooks/use-controllable.svelte.js";
 import { useDisposables } from "../utils/disposables.js";
 import { attemptSubmit } from "../utils/form.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 { mergeProps } from "../utils/render.js";
 import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { stateFromSlot } from "../utils/state.js";
 import FormFields from "../internal/FormFields.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
 let providedId = useProvidedId();
 let { value: providedDisabled } = $derived(useDisabled());
 let {
-  as = DEFAULT_SWITCH_TAG,
+  ref = $bindable(),
   id: ownId,
   disabled: ownDisabled,
   defaultChecked,
@@ -32,17 +31,14 @@ let {
   form,
   autofocus = false,
   tabIndex,
-  children,
   ...theirProps
 } = $props();
 const id = $derived(ownId || providedId || `headlessui-switch-${internalId}`);
 const disabled = $derived(ownDisabled || providedDisabled || false);
 const groupContext = getContext("GroupContext");
-let ref = $state(null);
 $effect(() => {
-  if (groupContext) groupContext.switchElement = ref;
+  if (groupContext) groupContext.switchElement = ref ?? null;
 });
-$inspect(providedDisabled);
 const d = useDisposables();
 let changing = $state(false);
 const toggle = () => {
@@ -100,7 +96,7 @@ const slot = $derived({
 });
 const buttonType = useResolveButtonType({
   get props() {
-    return { type: theirProps.type, as };
+    return { type: theirProps.type, as: theirProps.as };
   },
   get ref() {
     return { current: ref };
@@ -124,8 +120,7 @@ const ourProps = $derived(
     },
     focusProps,
     hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+    pressProps
   )
 );
 const reset = () => {
@@ -144,6 +139,5 @@ const reset = () => {
     onReset={reset}
   />
 {/if}
-<svelte:element this={as} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:ref />

package/dist/switch/Switch.svelte.d.ts

@@ -21,24 +21,41 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
     disabled?: boolean;
     tabIndex?: number;
 }>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): SwitchProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> 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<SwitchRenderPropArg> | 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: SwitchRenderPropArg) => string) | undefined;
+    } : {}) & {
+        checked?: boolean;
+        defaultChecked?: boolean;
+        onchange?(checked: boolean): void;
+        name?: string;
+        value?: string;
+        form?: string;
+        autofocus?: boolean;
+        disabled?: boolean;
+        tabIndex?: number;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "checked";
+    bindings(): "ref" | "checked";
     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_SWITCH_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_SWITCH_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 Switch: $$IsomorphicComponent;
-type Switch<TTag extends ElementType> = InstanceType<typeof Switch<TTag>>;
+type Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = InstanceType<typeof Switch<TTag>>;
 export default Switch;

package/dist/switch/SwitchGroup.svelte

@@ -1,9 +1,10 @@
-<script lang="ts" context="module">const DEFAULT_GROUP_TAG = "svelte:fragment";
+<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { setContext } from "svelte";
-import { useLabels } from "../label/Label.svelte";
-import { useDescriptions } from "../description/Description.svelte";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import { setContext } from "svelte";
+import { useLabels } from "../label/context.svelte.js";
+import { useDescriptions } from "../description/context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 let switchElement = $state(null);
 useLabels({
   name: "SwitchGroup",
@@ -30,9 +31,7 @@ setContext("GroupContext", {
     switchElement = element;
   }
 });
-const { as = DEFAULT_GROUP_TAG, children, ...theirProps } = $props();
+let { ref = $bindable(), ...theirProps } = $props();
 </script>
 
-<svelte:element this={as} {...theirProps}>
-  {#if children}{@render children({})}{/if}
-</svelte:element>
+<ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />

package/dist/switch/SwitchGroup.svelte.d.ts

@@ -2,26 +2,33 @@ import type { ElementType, Props } from "../utils/types.js";
 declare const DEFAULT_GROUP_TAG = "svelte:fragment";
 export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>;
 export type GroupContext = {
-    switchElement: HTMLButtonElement | null;
+    switchElement: HTMLElement | null;
 };
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): SwitchGroupProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> 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<{}> | 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: {}) => string) | undefined;
+    } : {});
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     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_GROUP_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_GROUP_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 SwitchGroup: $$IsomorphicComponent;
-type SwitchGroup<TTag extends ElementType> = InstanceType<typeof SwitchGroup<TTag>>;
+type SwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof SwitchGroup<TTag>>;
 export default SwitchGroup;

package/dist/tabs/Tab.svelte

@@ -1,7 +1,7 @@
-<script lang="ts" context="module">const DEFAULT_TAB_TAG = "button";
+<script lang="ts" module>const DEFAULT_TAB_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TAB_TAG">import { useId } from "../hooks/use-id.js";
 import { useActions, useData } from "./TabGroup.svelte";
 import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
 import { Focus, focusIn, FocusResult } from "../utils/focus-management.js";
@@ -11,28 +11,26 @@ import { microTask } from "../utils/microTask.js";
 import { useActivePress } from "../hooks/use-active-press.svelte.js";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { stateFromSlot } from "../utils/state.js";
 import { onMount } from "svelte";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
-const {
-  as,
+let {
+  ref = $bindable(),
   id = `headlessui-tabs-tab-${internalId}`,
   disabled = false,
   autofocus = false,
-  children,
   ...theirProps
 } = $props();
 const data = useData("Tab");
 const { orientation, activation, selectedIndex, tabs, panels } = $derived(data);
 const actions = useActions("Tab");
-let ref = $state();
 const tabRef = $derived({ current: ref });
 onMount(() => actions.registerTab(tabRef));
 const mySSRIndex = useStableCollectionIndex("tabs");
 const myIndex = $derived.by(() => {
-  const index = tabs.findIndex((tab) => $state.is(tab, tabRef));
+  const index = tabs.findIndex((tab) => tab === tabRef);
   return index === -1 ? mySSRIndex : index;
 });
 const selected = $derived(myIndex === selectedIndex);
@@ -127,7 +125,7 @@ const slot = $derived({
 });
 const resolvedType = useResolveButtonType({
   get props() {
-    return { type: theirProps.type, as };
+    return { type: theirProps.type, as: theirProps.as };
   },
   get ref() {
     return tabRef;
@@ -150,12 +148,9 @@ const ourProps = $derived(
     },
     focusProps,
     hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+    pressProps
   )
 );
 </script>
 
-<svelte:element this={as ?? DEFAULT_TAB_TAG} bind:this={ref} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:ref />

package/dist/tabs/Tab.svelte.d.ts

@@ -10,27 +10,39 @@ type TabRenderPropArg = {
 };
 type TabPropsWeControl = "aria-controls" | "aria-selected" | "role" | "tabIndex";
 export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, {
+    id?: string;
     autofocus?: boolean;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): TabProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TAB_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "id" | TabPropsWeControl> 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<TabRenderPropArg> | 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: TabRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        autofocus?: boolean;
+        disabled?: boolean;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     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_TAB_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_TAB_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 Tab: $$IsomorphicComponent;
-type Tab<TTag extends ElementType> = InstanceType<typeof Tab<TTag>>;
+type Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = InstanceType<typeof Tab<TTag>>;
 export default Tab;