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

package/dist/tabs/TabPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   const DEFAULT_PANEL_TAG = "div" as const
   type PanelRenderPropArg = {
@@ -9,15 +10,14 @@
   type PanelPropsWeControl = "role" | "aria-labelledby"
   const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
+  export type TabPanelProps = Props<
+    typeof DEFAULT_PANEL_TAG,
     PanelRenderPropArg,
-    PanelPropsWeControl,
-    PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }
+    PropsForFeatures<typeof PanelRenderFeatures> & { element?: HTMLElement; id?: string; tabIndex?: number }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
   import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
@@ -30,15 +30,15 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-tabs-panel-${internalId}`,
     tabIndex = 0,
     ...theirProps
-  }: { as?: TTag } & TabPanelProps<TTag> = $props()
+  }: TabPanelProps = $props()
   const context = useTabs("TabPanel")
   const { selectedIndex, tabs, panels, registerPanel } = $derived(context)
 
-  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
+  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: element })
 
   onMount(() => registerPanel(panelRef))
 
@@ -71,7 +71,7 @@
 </script>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}
-  <Hidden aria-hidden="true" {...ourProps} bind:ref />
+  <Hidden aria-hidden="true" {...ourProps} bind:element />
 {:else}
   <ElementOrComponent
     {ourProps}
@@ -80,6 +80,6 @@
     defaultTag={DEFAULT_PANEL_TAG}
     features={PanelRenderFeatures}
     name="TabPanel"
-    bind:ref
+    bind:element
   />
 {/if}

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

@@ -1,44 +1,15 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_PANEL_TAG: "div";
 type PanelRenderPropArg = {
     selected: boolean;
     focus: boolean;
 };
-type PanelPropsWeControl = "role" | "aria-labelledby";
 declare const PanelRenderFeatures: number;
-export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, PropsForFeatures<typeof PanelRenderFeatures> & {
+export type TabPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, PropsForFeatures<typeof PanelRenderFeatures> & {
+    element?: HTMLElement;
     id?: string;
     tabIndex?: number;
 }>;
 import { type PropsForFeatures } from "../utils/render.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "static" | "id" | "tabIndex" | PanelPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        id?: string;
-        tabIndex?: number;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_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_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TabPanel: $$IsomorphicComponent;
-type TabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof TabPanel<TTag>>;
+declare const TabPanel: import("svelte").Component<TabPanelProps, {}, "element">;
 export default TabPanel;

package/dist/tabs/TabPanels.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { useTabs } from "./context.svelte.js"
 
   let DEFAULT_PANELS_TAG = "div" as const
@@ -8,16 +8,16 @@
     selectedIndex: number
   }
 
-  export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>
+  export type TabPanelsProps = Props<typeof DEFAULT_PANELS_TAG, PanelsRenderPropArg, { element?: HTMLElement }>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">
+<script lang="ts">
   const context = useTabs("TabPanels")
   const { selectedIndex } = $derived(context)
 
   const slot = $derived({ selectedIndex } satisfies PanelsRenderPropArg)
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabPanelsProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: TabPanelsProps = $props()
 </script>
 
-<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />
+<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:element />

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

@@ -1,31 +1,10 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANELS_TAG: "div";
 type PanelsRenderPropArg = {
     selectedIndex: number;
 };
-export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelsRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PanelsRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANELS_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_PANELS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TabPanels: $$IsomorphicComponent;
-type TabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = InstanceType<typeof TabPanels<TTag>>;
+export type TabPanelsProps = Props<typeof DEFAULT_PANELS_TAG, PanelsRenderPropArg, {
+    element?: HTMLElement;
+}>;
+declare const TabPanels: import("svelte").Component<TabPanelsProps, {}, "element">;
 export default TabPanels;

package/dist/textarea/Textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   const DEFAULT_TEXTAREA_TAG = "textarea" as const
 
@@ -12,11 +13,12 @@
   }
   type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = Props<
-    TTag,
+  export type TextareaProps<TValue = string> = Props<
+    typeof DEFAULT_TEXTAREA_TAG,
     TextareaRenderPropArg,
-    TextareaPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       value?: TValue
       disabled?: boolean
       invalid?: boolean
@@ -25,7 +27,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">
+<script lang="ts" generics="TValue = string">
   import { htmlid } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
   import { useProvidedId } from "../utils/id.js"
@@ -41,14 +43,14 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     value = $bindable(),
-    id = (providedId || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    id = providedId || `headlessui-input-${internalId}`,
     disabled: theirDisabled = false,
-    autofocus = false as PropsOf<TTag>["autofocus"],
+    autofocus = false,
     invalid = false,
     ...theirProps
-  }: { as?: TTag; value?: TValue } & TextareaProps<TTag, TValue> = $props()
+  }: TextareaProps<TValue> = $props()
   const disabled = $derived(providedDisabled.current || theirDisabled)
 
   const labelledBy = useLabelledBy()
@@ -93,6 +95,6 @@
   {slot}
   defaultTag={DEFAULT_TEXTAREA_TAG}
   name="Textarea"
-  bind:ref
+  bind:element
   bind:value
 />

package/dist/textarea/Textarea.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_TEXTAREA_TAG: "textarea";
 type TextareaRenderPropArg = {
     disabled: boolean;
@@ -7,41 +7,28 @@ type TextareaRenderPropArg = {
     autofocus: boolean;
     invalid: boolean;
 };
-type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby";
-export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = Props<TTag, TextareaRenderPropArg, TextareaPropsWeControl, {
+export type TextareaProps<TValue = string> = Props<typeof DEFAULT_TEXTAREA_TAG, TextareaRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     value?: TValue;
     disabled?: boolean;
     invalid?: boolean;
     autofocus?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> {
-    props(): {
-        as?: TTag | undefined;
-        value?: TValue | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "autofocus" | "value" | TextareaPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[TextareaRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: TextareaRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        value?: TValue | undefined;
-        disabled?: boolean;
-        invalid?: boolean;
-        autofocus?: boolean;
-    };
+declare class __sveltets_Render<TValue = string> {
+    props(): TextareaProps<TValue>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "element" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TValue>['props']>, ReturnType<__sveltets_Render<TTag, TValue>['events']>, ReturnType<__sveltets_Render<TTag, TValue>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TValue>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TValue>['props']> & {}): ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Textarea: $$IsomorphicComponent;
-type Textarea<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = InstanceType<typeof Textarea<TTag, TValue>>;
+type Textarea<TValue = string> = InstanceType<typeof Textarea<TValue>>;
 export default Textarea;

package/dist/transition/InternalTransitionChild.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import { compact, RenderStrategy } from "../utils/render.js"
-  import type { ElementType } from "../utils/types.js"
   import { onMount, setContext, untrack } from "svelte"
   import {
     hasChildren,
@@ -37,22 +36,20 @@
    * `Transition` parent, which is a `Fragment`, is not. So we should not forward
    * the ref to the `Fragment`.
    */
-  export function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
-    props: TransitionRootProps<TTag>
-  ) {
+  export function shouldForwardRef(props: TransitionRootProps) {
     return (
       // If we have any of the enter/leave classes
       Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) ||
       // If the `as` prop is not a Fragment
-      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" ||
+      !props.asChild ||
       // If we have a single child, then we can forward the ref directly
       props.children !== undefined
     )
   }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
-  let { ref = $bindable(), ..._props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
+<script lang="ts">
+  let { element = $bindable(), ..._props }: TransitionChildProps = $props()
   const {
     // Whether or not to enable transitions on the current element (by exposing
     // transition data). When set to false, the `Transition` component still
@@ -78,7 +75,7 @@
   } = $derived(_props)
   let containerElement = $state<HTMLElement>()
   let container = $state<{ current: HTMLElement | null }>({ current: null })
-  const requiresRef = $derived(shouldForwardRef(_props))
+  const requiresRef = $derived(shouldForwardRef(_props as TransitionRootProps))
 
   const strategy = $derived((theirProps.unmount ?? true) ? RenderStrategy.Unmount : RenderStrategy.Hidden)
 
@@ -92,8 +89,8 @@
 
   onMount(() => {
     if (requiresRef) {
-      container.current = ref ?? null
-      containerElement = ref
+      container.current = element ?? null
+      containerElement = element
     }
 
     return register(container)
@@ -224,7 +221,11 @@
         classNames(
           // Incoming classes if any
           // all components accept className (but all HTML elements do)
-          theirProps.class,
+          theirProps.asChild
+            ? undefined
+            : typeof theirProps.class === "function"
+              ? theirProps.class({ element })
+              : theirProps.class,
 
           // Apply these classes immediately
           immediate && enter,
@@ -264,4 +265,10 @@
   setContext<NestingContextValues>("NestingContext", nesting)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_TRANSITION_CHILD_TAG} name="TransitionChild" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={DEFAULT_TRANSITION_CHILD_TAG}
+  name="TransitionChild"
+  bind:element
+/>

package/dist/transition/InternalTransitionChild.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { ElementType } from "../utils/types.js";
 import type { TransitionRootProps } from "./Transition.svelte";
-import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
+import { type TransitionChildProps } from "./TransitionChild.svelte";
 /**
  * Check if we should forward the ref to the child element or not. This is to
  * prevent crashes when the `as` prop is a Fragment _and_ the component just acts
@@ -19,34 +18,6 @@ import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
  * `Transition` parent, which is a `Fragment`, is not. So we should not forward
  * the ref to the `Fragment`.
  */
-export declare function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(props: TransitionRootProps<TTag>): boolean;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "transition" | keyof import("./context.svelte.js").TransitionClasses | keyof import("./context.svelte.js").TransitionEvents | "appear"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[HTMLElement & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HTMLElement) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        unmount?: boolean | undefined;
-    } & import("./context.svelte.js").TransitionClasses & import("./context.svelte.js").TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_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_TRANSITION_CHILD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const InternalTransitionChild: $$IsomorphicComponent;
-type InternalTransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = InstanceType<typeof InternalTransitionChild<TTag>>;
+export declare function shouldForwardRef(props: TransitionRootProps): boolean;
+declare const InternalTransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
 export default InternalTransitionChild;

package/dist/transition/Transition.svelte

@@ -1,22 +1,16 @@
 <script lang="ts" module>
   import { State, useOpenClosed } from "../internal/open-closed.js"
-  import type { ElementType } from "../utils/types.js"
-  import { setContext, untrack, type Component } from "svelte"
-  import {
-    type TransitionChildProps,
-    DEFAULT_TRANSITION_CHILD_TAG,
-    TransitionChildRenderFeatures,
-  } from "./TransitionChild.svelte"
-
-  export type TransitionRootProps<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> =
-    TransitionChildProps<TTag> & {
-      show?: boolean
-      appear?: boolean
-    }
+  import { setContext, untrack } from "svelte"
+  import { type TransitionChildProps, TransitionChildRenderFeatures } from "./TransitionChild.svelte"
+
+  export type TransitionRootProps = TransitionChildProps & {
+    show?: boolean
+    appear?: boolean
+  }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
-  import InternalTransitionChild, { shouldForwardRef } from "./InternalTransitionChild.svelte"
+<script lang="ts">
+  import InternalTransitionChild from "./InternalTransitionChild.svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import {
     hasChildren,
@@ -26,9 +20,8 @@
     type TransitionContextValues,
   } from "./context.svelte.js"
 
-  let { ref = $bindable(), show, ..._props }: { as?: TTag } & TransitionRootProps<TTag> = $props()
+  let { element = $bindable(), show, ..._props }: TransitionRootProps = $props()
   const { appear = false, unmount = true, ...theirProps } = $derived(_props)
-  const requiresRef = shouldForwardRef(_props)
 
   const usesOpenClosedState = useOpenClosed()
 
@@ -69,7 +62,7 @@
   $effect(() => {
     if (show) {
       _state = TreeStates.Visible
-    } else if (!hasChildren(nestingBag) && untrack(() => ref)) {
+    } else if (!hasChildren(nestingBag) && untrack(() => element)) {
       _state = TreeStates.Hidden
     }
   })
@@ -98,12 +91,10 @@
       return initial
     },
   })
-
-  const InternalChild = InternalTransitionChild<any>
 </script>
 
 {#snippet children()}
-  <InternalChild bind:ref {...sharedProps} {...theirProps} {beforeEnter} {beforeLeave} />
+  <InternalTransitionChild bind:element {...sharedProps} {...theirProps} {beforeEnter} {beforeLeave} />
 {/snippet}
 
 <ElementOrComponent

package/dist/transition/Transition.svelte.d.ts

@@ -1,39 +1,7 @@
-import type { ElementType } from "../utils/types.js";
-import { type TransitionChildProps, DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
-export type TransitionRootProps<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = TransitionChildProps<TTag> & {
+import { type TransitionChildProps } from "./TransitionChild.svelte";
+export type TransitionRootProps = TransitionChildProps & {
     show?: boolean;
     appear?: boolean;
 };
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "transition" | keyof import("./context.svelte.js").TransitionClasses | keyof import("./context.svelte.js").TransitionEvents | "appear"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[HTMLElement & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HTMLElement) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        unmount?: boolean | undefined;
-    } & import("./context.svelte.js").TransitionClasses & import("./context.svelte.js").TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    } & {
-        show?: boolean;
-        appear?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_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_TRANSITION_CHILD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Transition: $$IsomorphicComponent;
-type Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = InstanceType<typeof Transition<TTag>>;
+declare const Transition: import("svelte").Component<TransitionRootProps, {}, "element">;
 export default Transition;

package/dist/transition/TransitionChild.svelte

@@ -1,25 +1,24 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
   import type { TransitionEvents, TransitionClasses } from "./context.svelte.js"
 
   type TransitionChildPropsWeControl = never
 
-  export type TransitionChildProps<TTag extends ElementType> = Props<
-    TTag,
+  export type TransitionChildProps = Props<
+    typeof DEFAULT_TRANSITION_CHILD_TAG,
     TransitionChildRenderPropArg,
-    TransitionChildPropsWeControl,
     PropsForFeatures<typeof TransitionChildRenderFeatures> &
       TransitionClasses &
-      TransitionEvents & { transition?: boolean; appear?: boolean }
+      TransitionEvents & { transition?: boolean; appear?: boolean; element?: HTMLElement }
   >
 
-  export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment"
-  export type TransitionChildRenderPropArg = HTMLElement
+  export const DEFAULT_TRANSITION_CHILD_TAG = "div"
+  export type TransitionChildRenderPropArg = { element?: HTMLElement }
   export const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
+<script lang="ts">
   import { useOpenClosed } from "../internal/open-closed.js"
   import { getContext } from "svelte"
   import InternalTransitionChild from "./InternalTransitionChild.svelte"
@@ -28,9 +27,9 @@
   const hasTransitionContext = !!getContext("TransitionContext")
   const hasOpenClosedContext = useOpenClosed() !== null
 
-  let { ref = $bindable(), as, ...props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
+  let { element = $bindable(), ...props }: TransitionChildProps = $props()
 
   const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild
 </script>
 
-<TransitionRootOrChild bind:ref {...props} />
+<TransitionRootOrChild bind:element {...props} />

package/dist/transition/TransitionChild.svelte.d.ts

@@ -1,41 +1,15 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { RenderFeatures, type PropsForFeatures } from "../utils/render.js";
 import type { TransitionEvents, TransitionClasses } from "./context.svelte.js";
-type TransitionChildPropsWeControl = never;
-export type TransitionChildProps<TTag extends ElementType> = Props<TTag, TransitionChildRenderPropArg, TransitionChildPropsWeControl, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
+export type TransitionChildProps = Props<typeof DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderPropArg, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
     transition?: boolean;
     appear?: boolean;
+    element?: HTMLElement;
 }>;
-export declare const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
-export type TransitionChildRenderPropArg = HTMLElement;
+export declare const DEFAULT_TRANSITION_CHILD_TAG = "div";
+export type TransitionChildRenderPropArg = {
+    element?: HTMLElement;
+};
 export declare const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "transition" | keyof TransitionClasses | keyof TransitionEvents | "appear"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[HTMLElement & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HTMLElement) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        unmount?: boolean | undefined;
-    } & TransitionClasses & TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_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_TRANSITION_CHILD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TransitionChild: $$IsomorphicComponent;
-type TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = InstanceType<typeof TransitionChild<TTag>>;
+declare const TransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
 export default TransitionChild;