@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.61

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,
@@ -28,8 +27,8 @@
    *
    * ```tsx
    * <Transition show={true}>
-   *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
-   *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
+   *   <TransitionChild enter="duration-100"><div>Child 1</div></TransitionChild>
+   *   <TransitionChild enter="duration-200"><div>Child 2</div></TransitionChild>
    * </Transition>
    * ```
    *
@@ -37,22 +36,26 @@
    * `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) ||
+      Boolean(
+        props.enter ||
+          props.enterFrom ||
+          props.enterTo ||
+          props.leave ||
+          props.leaveFrom ||
+          props.leaveTo ||
+          props.class
+      ) ||
       // If the `as` prop is not a Fragment
-      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" ||
-      // If we have a single child, then we can forward the ref directly
-      props.children !== undefined
+      props.asChild
     )
   }
 </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 +81,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)
 
@@ -91,9 +94,9 @@
   const { register, unregister } = $derived(parentNesting)
 
   onMount(() => {
-    if (requiresRef) {
-      container.current = ref ?? null
-      containerElement = ref
+    if (requiresRef || element) {
+      container.current = element ?? null
+      containerElement = element
     }
 
     return register(container)
@@ -118,10 +121,10 @@
   //[state, container, register, unregister, show, strategy]
 
   $effect(() => {
-    if (!requiresRef) return
+    if (!requiresRef && !element) return
 
     if (_state === TreeStates.Visible && container.current === null) {
-      throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")
+      throw new Error("Did you forget to passthrough the actual DOM node as `element`?")
     }
   })
 
@@ -174,7 +177,7 @@
   }
 
   $effect(() => {
-    if (requiresRef && transition) return
+    if ((requiresRef || element) && transition) return
 
     // When we don't transition, then we can complete the transition
     // immediately.
@@ -188,7 +191,7 @@
     if (!transition) return false
 
     // If we don't require a ref, then we can't transition.
-    if (!requiresRef) return false
+    if (!requiresRef && !element) return false
 
     // If the server handoff isn't completed yet, we can't transition.
     //if (!ready) return false
@@ -224,7 +227,11 @@
         classNames(
           // Incoming classes if any
           // all components accept className (but all HTML elements do)
-          theirProps.class,
+          theirProps.asChild || !requiresRef
+            ? undefined
+            : typeof theirProps.class === "function"
+              ? theirProps.class({ element })
+              : theirProps.class,
 
           // Apply these classes immediately
           immediate && enter,
@@ -244,6 +251,7 @@
           !transitionData.transition && show && entered
         )?.trim() || undefined, // If `class` is an empty string, we can omit it
       ...transitionDataAttributes(transitionData),
+      ...(!theirProps.asChild && !requiresRef ? { asChild: true } : {}),
     })
   )
 
@@ -264,4 +272,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
@@ -10,8 +9,8 @@ import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
  *
  * ```tsx
  * <Transition show={true}>
- *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
- *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
+ *   <TransitionChild enter="duration-100"><div>Child 1</div></TransitionChild>
+ *   <TransitionChild enter="duration-200"><div>Child 2</div></TransitionChild>
  * </Transition>
  * ```
  *
@@ -19,37 +18,7 @@ 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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<HTMLElement> | 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: HTMLElement) => string) | undefined;
-    } : {}) & {
-        unmount?: boolean | undefined;
-    } & import("./context.svelte.js").TransitionClasses & import("./context.svelte.js").TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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 | undefined;
+declare const InternalTransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
+type InternalTransitionChild = ReturnType<typeof InternalTransitionChild>;
 export default InternalTransitionChild;

package/dist/transition/Transition.svelte

@@ -1,22 +1,25 @@
 <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 { setContext, untrack } from "svelte"
   import {
+    type TransitionChildOwnProps,
     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
-    }
+  export type TransitionRootOwnProps = TransitionChildOwnProps & {
+    show?: boolean
+    appear?: boolean
+  }
+
+  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 +29,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 +71,7 @@
   $effect(() => {
     if (show) {
       _state = TreeStates.Visible
-    } else if (!hasChildren(nestingBag) && untrack(() => ref)) {
+    } else if (!hasChildren(nestingBag) && untrack(() => element)) {
       _state = TreeStates.Hidden
     }
   })
@@ -98,12 +100,10 @@
       return initial
     },
   })
-
-  const InternalChild = InternalTransitionChild as Component<TransitionChildProps<TTag>, any>
 </script>
 
 {#snippet children()}
-  <InternalChild bind:ref {...sharedProps} {...theirProps} {beforeEnter} {beforeLeave} />
+  <InternalTransitionChild bind:element {...sharedProps} {...theirProps} {beforeEnter} {beforeLeave} />
 {/snippet}
 
 <ElementOrComponent
@@ -112,7 +112,6 @@
     children,
   }}
   theirProps={{}}
-  defaultTag={"svelte:fragment"}
   features={TransitionChildRenderFeatures}
   visible={_state === TreeStates.Visible}
   name="Transition"

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

@@ -1,42 +1,12 @@
-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 TransitionChildOwnProps, type TransitionChildProps } from "./TransitionChild.svelte";
+export type TransitionRootOwnProps = TransitionChildOwnProps & {
     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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<HTMLElement> | 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: HTMLElement) => string) | undefined;
-    } : {}) & {
-        unmount?: boolean | undefined;
-    } & import("./context.svelte.js").TransitionClasses & import("./context.svelte.js").TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    } & {
-        show?: boolean;
-        appear?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+export type TransitionRootProps = TransitionChildProps & {
+    show?: boolean;
+    appear?: boolean;
+};
+declare const Transition: import("svelte").Component<TransitionRootProps, {}, "element">;
+type Transition = ReturnType<typeof Transition>;
 export default Transition;

package/dist/transition/TransitionChild.svelte

@@ -1,25 +1,26 @@
 <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 TransitionChildOwnProps = PropsForFeatures<typeof TransitionChildRenderFeatures> &
+    TransitionClasses &
+    TransitionEvents & { transition?: boolean; appear?: boolean; element?: HTMLElement }
+
+  export type TransitionChildProps = Props<
+    typeof DEFAULT_TRANSITION_CHILD_TAG,
     TransitionChildRenderPropArg,
-    TransitionChildPropsWeControl,
-    PropsForFeatures<typeof TransitionChildRenderFeatures> &
-      TransitionClasses &
-      TransitionEvents & { transition?: boolean; appear?: boolean }
+    TransitionChildOwnProps
   >
 
-  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 +29,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,44 +1,17 @@
-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 TransitionChildOwnProps = PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
     transition?: boolean;
     appear?: boolean;
-}>;
-export declare const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
-export type TransitionChildRenderPropArg = HTMLElement;
+    element?: HTMLElement;
+};
+export type TransitionChildProps = Props<typeof DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderPropArg, TransitionChildOwnProps>;
+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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<HTMLElement> | 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: HTMLElement) => string) | undefined;
-    } : {}) & {
-        unmount?: boolean | undefined;
-    } & TransitionClasses & TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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">;
+type TransitionChild = ReturnType<typeof TransitionChild>;
 export default TransitionChild;

package/dist/transition/context.svelte.js

@@ -10,15 +10,15 @@ export var TreeStates;
 })(TreeStates || (TreeStates = {}));
 export function useTransitionContext() {
     const context = getContext("TransitionContext");
-    if (context === null) {
-        throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
+    if (!context) {
+        throw new Error("A <TransitionChild /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }
 export function useParentNesting() {
-    let context = getContext("NestingContext");
-    if (context === null) {
-        throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
+    const context = getContext("NestingContext");
+    if (!context) {
+        throw new Error("A <TransitionChild /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }
@@ -29,7 +29,7 @@ export function hasChildren(bag) {
 }
 export function useNesting(options) {
     const { done, parent } = $derived(options);
-    let transitionableChildren = $state([]);
+    const transitionableChildren = $state([]);
     const mounted = useIsMounted();
     const d = useDisposables();
     const unregister = (container, strategy = RenderStrategy.Hidden) => {
@@ -60,13 +60,13 @@ export function useNesting(options) {
         }
         return () => unregister(container, RenderStrategy.Unmount);
     };
-    let todos = $state([]);
+    const todos = $state([]);
     let wait = $state(Promise.resolve());
-    let chains = $state({
+    const chains = $state({
         enter: [],
         leave: [],
     });
-    let onStart = (container, direction, cb) => {
+    const onStart = (container, direction, cb) => {
         // Clear out all existing todos
         todos.splice(0);
         // Remove all existing promises for the current container from the parent because we can
@@ -85,7 +85,7 @@ export function useNesting(options) {
         parent?.chains[direction].push([
             container,
             new Promise((resolve) => {
-                Promise.all(chains[direction].map(([_container, promise]) => promise)).then(() => resolve());
+                Promise.all(chains[direction].map(([, promise]) => promise)).then(() => resolve());
             }),
         ]);
         if (direction === "enter") {
@@ -96,7 +96,7 @@ export function useNesting(options) {
         }
     };
     const onStop = (_container, direction, cb) => {
-        Promise.all(chains[direction].splice(0).map(([_container, promise]) => promise)) // Wait for my children
+        Promise.all(chains[direction].splice(0).map(([, promise]) => promise)) // Wait for my children
             .then(() => {
             todos.shift()?.(); // I'm ready
         })

package/dist/transition/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Transition, type TransitionRootProps } from "./Transition.svelte";
-export { default as TransitionChild, type TransitionChildProps } from "./TransitionChild.svelte";
+export { default as Transition, type TransitionRootProps as TransitionProps, type TransitionRootOwnProps as TransitionOwnProps, } from "./Transition.svelte";
+export { default as TransitionChild, type TransitionChildProps, type TransitionChildRenderPropArg as TransitionChildSlot, type TransitionChildRenderPropArg as TransitionSlot, type TransitionChildOwnProps, } from "./TransitionChild.svelte";

package/dist/transition/index.js

@@ -1,2 +1,2 @@
-export { default as Transition } from "./Transition.svelte";
-export { default as TransitionChild } from "./TransitionChild.svelte";
+export { default as Transition, } from "./Transition.svelte";
+export { default as TransitionChild, } from "./TransitionChild.svelte";

package/dist/utils/DisabledProvider.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { provideDisabled } from "../hooks/use-disabled.js"
+  import type { Snippet } from "svelte"
+
+  const { disabled, children }: { disabled?: boolean; children?: Snippet } = $props()
+
+  provideDisabled(() => disabled ?? false)
+</script>
+
+{@render children?.()}

package/dist/utils/DisabledProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    disabled?: boolean;
+    children?: Snippet;
+};
+declare const DisabledProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type DisabledProvider = ReturnType<typeof DisabledProvider>;
+export default DisabledProvider;

package/dist/utils/ElementOrComponent.svelte

@@ -1,47 +1,88 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">
-  import type { ElementType, Props } from "./types.js"
-  import { mergePropsAdvanced, RenderFeatures, RenderStrategy, type PropsForFeatures } from "./render.js"
-  import Generic from "./Generic.svelte"
-  import type { ComponentProps } from "svelte"
+<script lang="ts" generics="TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue">
+  import type { Props } from "./types.js"
+  import { mergePropsAdvanced, RenderFeatures, type PropsForFeatures } from "./render.js"
+  import { stateFromSlot } from "./state.js"
 
   let {
     ourProps,
     theirProps,
-    slots,
-    slot = slots,
+    slots: slot,
     defaultTag,
     features,
     visible = true,
     name,
-    ref = $bindable(),
+    element = $bindable(),
     value = $bindable(),
     checked = $bindable(),
   }: {
     ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
-    theirProps: Expand<{ as?: TTag } & Props<any, TSlot, any>>
-    slot?: TSlot
+    theirProps: Expand<Props<any, TSlot, any>>
     slots?: TSlot
-    defaultTag: ElementType
+    defaultTag?: string
     features?: TFeature
     visible?: boolean
     name: string
     ref?: HTMLElement
+    element?: HTMLElement
     value?: TValue
     checked?: boolean
   } = $props()
 
   const featureFlags = $derived(features ?? RenderFeatures.None)
-  const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
+  let {
+    as,
+    static: isStatic = false,
+    unmount = true,
+    children,
+    asChild,
+    class: className,
+    ...rest
+  } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
   const render = $derived(
     visible ||
       (featureFlags & RenderFeatures.Static && isStatic) ||
       (featureFlags & RenderFeatures.RenderStrategy && !unmount)
   )
-  const hiddenProps = $derived(
-    !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
-      ? { hidden: true, style: "display: none;" }
-      : {}
+
+  const resolvedClass: string | undefined = $derived(
+    typeof className === "function" ? className(slot) : (className ?? undefined)
   )
+
+  const _props = $derived.by(() => {
+    // Allow for className to be a function with the slot as the contents
+    if ("class" in rest && rest.class && typeof rest.class === "function") {
+      rest.class = rest.className(slot)
+    }
+
+    // Drop `aria-labelledby` if it only references the current element. If the `aria-labelledby`
+    // references itself but also another element then we can keep it.
+    if (rest["aria-labelledby"] && rest["aria-labelledby"] === rest.id) {
+      rest["aria-labelledby"] = undefined
+    }
+
+    const hiddenProps =
+      !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
+        ? { hidden: true, style: "display: none;" }
+        : {}
+
+    return { ...rest, ...(resolvedClass ? { class: resolvedClass } : {}), ...hiddenProps, ...stateFromSlot(slot) }
+  })
 </script>
 
-{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} {name} bind:ref bind:value bind:checked />{/if}
+{#if render}
+  {#if asChild || !defaultTag}
+    {@render children?.({ ...slot, props: _props })}
+  {:else if defaultTag === "select"}
+    <select {..._props} bind:this={element} bind:value>{@render children?.(slot)}</select>
+  {:else if defaultTag === "input" && (_props as Record<string, any>).type === "checkbox"}
+    <input type="checkbox" {..._props} bind:this={element} bind:checked />
+  {:else if defaultTag === "input"}
+    <input {..._props} bind:this={element} bind:value />
+  {:else if defaultTag === "textarea"}
+    <textarea {..._props} bind:this={element} bind:value></textarea>
+  {:else if children}
+    <svelte:element this={defaultTag} {..._props} bind:this={element}>{@render children(slot)}</svelte:element>
+  {:else}
+    <svelte:element this={defaultTag} {..._props} bind:this={element} />
+  {/if}
+{/if}