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

package/dist/tabs/TabGroup.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">import { sortByDomNode } from "../utils/focus-management.js";
+<script lang="ts" module>import { sortByDomNode } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
 import FocusSentinel from "../internal/FocusSentinel.svelte";
 import { setContext, getContext, untrack } from "svelte";
@@ -23,7 +23,8 @@ export function useActions(component) {
 }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import StableCollection from "../utils/StableCollection.svelte";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">import StableCollection from "../utils/StableCollection.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 var Direction = /* @__PURE__ */ ((Direction2) => {
   Direction2[Direction2["Forwards"] = 0] = "Forwards";
   Direction2[Direction2["Backwards"] = 1] = "Backwards";
@@ -52,8 +53,8 @@ const stateReducer = (initialState) => {
     },
     setSelectedIndex(index) {
       if (index === _state2.selectedIndex) return _state2;
-      let tabs = sortByDomNode(_state2.tabs, (tab) => tab.current);
-      let panels = sortByDomNode(_state2.panels, (panel) => panel.current);
+      let tabs = sortByDomNode(_state2.tabs, (tab) => tab.current ?? null);
+      let panels = sortByDomNode(_state2.panels, (panel) => panel.current ?? null);
       let focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"));
       let nextState = { ..._state2, tabs, panels };
       if (
@@ -77,8 +78,8 @@ const stateReducer = (initialState) => {
           return _state2;
         }
         let nextSelectedIndex = match(direction, {
-          [0 /* Forwards */]: () => tabs.findIndex((tab) => $state.is(tab, focusableTabs[0])),
-          [1 /* Backwards */]: () => tabs.findIndex((tab) => $state.is(tab, focusableTabs[focusableTabs.length - 1]))
+          [0 /* Forwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
+          [1 /* Backwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1])
         });
         _state2 = {
           ...nextState,
@@ -88,50 +89,48 @@ const stateReducer = (initialState) => {
       }
       let before = tabs.slice(0, index);
       let after = tabs.slice(index);
-      let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => $state.is(_tab, tab)));
+      let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab));
       if (!next) {
         _state2 = nextState;
         return _state2;
       }
-      let selectedIndex2 = tabs.findIndex((tab) => $state.is(tab, next)) ?? _state2.selectedIndex;
+      let selectedIndex2 = tabs.findIndex((tab) => tab === next) ?? _state2.selectedIndex;
       if (selectedIndex2 === -1) selectedIndex2 = _state2.selectedIndex;
       _state2 = { ...nextState, selectedIndex: selectedIndex2 };
       return _state2;
     },
     registerTab(tab) {
-      if (_state2.tabs.some((_tab) => $state.is(_tab, tab))) return _state2;
-      _state2.tabs = sortByDomNode([..._state2.tabs, tab], (tab2) => tab2.current);
+      if (_state2.tabs.some((_tab) => _tab === tab)) return _state2;
+      _state2.tabs = sortByDomNode([..._state2.tabs, tab], (tab2) => tab2.current ?? null);
       let activeTab = _state2.tabs[_state2.selectedIndex];
       if (!_state2.info.isControlled) {
-        const selectedIndex2 = _state2.tabs.findIndex((tab2) => $state.is(tab2, activeTab));
+        const selectedIndex2 = _state2.tabs.findIndex((tab2) => tab2 === activeTab);
         if (selectedIndex2 !== _state2.selectedIndex) _state2.selectedIndex = selectedIndex2;
       }
       return _state2;
     },
     unregisterTab(tab) {
-      _state2.tabs = _state2.tabs.filter((_tab) => !$state.is(_tab, tab));
+      _state2.tabs = _state2.tabs.filter((_tab) => _tab !== tab);
       return _state2;
     },
     registerPanel(panel) {
-      if (_state2.panels.some((_panel) => $state.is(_panel, panel))) return _state2;
-      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current);
+      if (_state2.panels.some((_panel) => _panel === panel)) return _state2;
+      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current ?? null);
       return _state2;
     },
     unregisterPanel(panel) {
-      console.log("unregisterPanel", panel);
-      _state2.panels = _state2.panels.filter((_panel) => !$state.is(_panel, panel));
+      _state2.panels = _state2.panels.filter((_panel) => _panel !== panel);
       return _state2;
     }
   };
 };
 let {
-  as,
+  ref = $bindable(),
   defaultIndex = 0,
   vertical = false,
   manual = false,
   onchange,
   selectedIndex = void 0,
-  children,
   ...theirProps
 } = $props();
 const orientation = $derived(vertical ? "vertical" : "horizontal");
@@ -215,10 +214,10 @@ $effect(() => {
 $effect(() => {
   if (realSelectedIndex === void 0) return;
   if (_state.tabs.length <= 0) return;
-  let sorted = sortByDomNode(_state.tabs, (tab) => tab.current);
+  let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null);
   let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab);
   if (didOrderChange) {
-    change(sorted.findIndex((tab) => $state.is(tab, _state.tabs[realSelectedIndex])));
+    change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]));
   }
 });
 </script>
@@ -238,7 +237,5 @@ $effect(() => {
       }}
     />
   {/if}
-  <svelte:element this={as ?? DEFAULT_TABS_TAG} {...theirProps}>
-    {#if children}{@render children(slot)}{/if}
-  </svelte:element>
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_TABS_TAG} name="TabGroup" bind:ref />
 </StableCollection>

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

@@ -31,24 +31,37 @@ type TabsActionsContext = {
 };
 export declare function useActions(component: string): TabsActionsContext;
 import type { MutableRefObject } from "../utils/ref.svelte.js";
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): TabGroupProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "onchange" | "vertical" | "defaultIndex" | "selectedIndex" | "manual"> 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<TabsRenderPropArg> | 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: TabsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        defaultIndex?: number;
+        onchange?: (index: number) => void;
+        selectedIndex?: number;
+        vertical?: boolean;
+        manual?: 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_TABS_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_TABS_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 TabGroup: $$IsomorphicComponent;
-type TabGroup<TTag extends ElementType> = InstanceType<typeof TabGroup<TTag>>;
+type TabGroup<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = InstanceType<typeof TabGroup<TTag>>;
 export default TabGroup;

package/dist/tabs/TabList.svelte

@@ -1,18 +1,16 @@
-<script lang="ts" context="module">import { stateFromSlot } from "../utils/state.js";
-const DEFAULT_LIST_TAG = "div";
+<script lang="ts" module>const DEFAULT_LIST_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useData } from "./TabGroup.svelte";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">import { useData } from "./TabGroup.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const data = useData("Tab.List");
 const { orientation, selectedIndex } = $derived(data);
 const slot = $derived({ selectedIndex });
-const { as, children, ...theirProps } = $props();
+let { ref = $bindable(), ...theirProps } = $props();
 const ourProps = $derived({
   role: "tablist",
   "aria-orientation": orientation
 });
 </script>
 
-<svelte:element this={as ?? DEFAULT_LIST_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />

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

@@ -5,24 +5,31 @@ type ListRenderPropArg = {
 };
 type ListPropsWeControl = "aria-orientation" | "role";
 export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<TTag, ListRenderPropArg, ListPropsWeControl, {}>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): TabListProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LIST_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | ListPropsWeControl> 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<ListRenderPropArg> | 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: ListRenderPropArg) => 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_LIST_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_LIST_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 TabList: $$IsomorphicComponent;
-type TabList<TTag extends ElementType> = InstanceType<typeof TabList<TTag>>;
+type TabList<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = InstanceType<typeof TabList<TTag>>;
 export default TabList;

package/dist/tabs/TabPanel.svelte

@@ -1,34 +1,30 @@
-<script lang="ts" context="module">const DEFAULT_PANEL_TAG = "div";
+<script lang="ts" module>const DEFAULT_PANEL_TAG = "div";
 const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
-import { RenderFeatures } from "../utils/render.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
+import { mergeProps, RenderFeatures } from "../utils/render.js";
 import { useActions, useData } from "./TabGroup.svelte";
 import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import Hidden from "../internal/Hidden.svelte";
-import { stateFromSlot } from "../utils/state.js";
 import { onMount } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
-const {
-  as,
+let {
+  ref = $bindable(),
   id = `headlessui-tabs-panel-${internalId}`,
   tabIndex = 0,
-  children,
-  static: isStatic = false,
-  unmount = true,
   ...theirProps
 } = $props();
 const data = useData("Tab.Panel");
 const { selectedIndex, tabs, panels } = $derived(data);
 const actions = useActions("Tab.Panel");
-let internalPanelRef = $state();
-const panelRef = $derived({ current: internalPanelRef });
+const panelRef = $derived({ current: ref });
 onMount(() => actions.registerPanel(panelRef));
 const mySSRIndex = useStableCollectionIndex("panels");
 const myIndex = $derived.by(() => {
-  const index = tabs.findIndex((panel) => $state.is(panel, panelRef));
+  const index = tabs.findIndex((panel) => panel === panelRef);
   return index === -1 ? mySSRIndex : index;
 });
 const selected = $derived(myIndex === selectedIndex);
@@ -37,27 +33,29 @@ const slot = $derived({
   selected,
   focus
 });
-const ourProps = $derived({
-  id,
-  role: "tabpanel",
-  "aria-labelledby": tabs[myIndex]?.current?.id,
-  tabIndex: selected ? 0 : -1,
-  ...focusProps,
-  ...stateFromSlot(slot)
-});
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      role: "tabpanel",
+      "aria-labelledby": tabs[myIndex]?.current?.id,
+      tabIndex: selected ? 0 : -1
+    },
+    focusProps
+  )
+);
 </script>
 
-{#if !selected && unmount && !isStatic}
-  <Hidden as="span" bind:ref={internalPanelRef} aria-hidden="true" {...ourProps} />
+{#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}
+  <Hidden aria-hidden="true" {...ourProps} bind:ref />
 {:else}
-  <svelte:element
-    this={as ?? DEFAULT_PANEL_TAG}
-    bind:this={internalPanelRef}
-    {...ourProps}
-    {...theirProps}
-    hidden={isStatic || selected ? undefined : true}
-    style={isStatic || selected ? theirProps.style : "display: none;"}
-  >
-    {#if children}{@render children(slot)}{/if}
-  </svelte:element>
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    {slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    features={PanelRenderFeatures}
+    name="TabPanel"
+    bind:ref
+  />
 {/if}

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

@@ -11,24 +11,37 @@ export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> =
     tabIndex?: number;
 }>;
 import { type PropsForFeatures } from "../utils/render.js";
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): TabPanelProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<PanelRenderPropArg> | 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: PanelRenderPropArg) => string) | undefined;
+    } : {}) & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    } & {
+        id?: string;
+        tabIndex?: number;
+    };
     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_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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_PANEL_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 TabPanel: $$IsomorphicComponent;
-type TabPanel<TTag extends ElementType> = InstanceType<typeof TabPanel<TTag>>;
+type TabPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof TabPanel<TTag>>;
 export default TabPanel;

package/dist/tabs/TabPanels.svelte

@@ -1,13 +1,12 @@
-<script lang="ts" context="module">import { useData } from "./TabGroup.svelte";
+<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useData } from "./TabGroup.svelte";
 let DEFAULT_PANELS_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">const data = useData("Tab.Panels");
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const data = useData("Tab.Panels");
 const { selectedIndex } = $derived(data);
 const slot = $derived({ selectedIndex });
-const { as, children, ...theirProps } = $props();
+let { ref = $bindable(), ...theirProps } = $props();
 </script>
 
-<svelte:element this={as ?? DEFAULT_PANELS_TAG} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />

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

@@ -4,24 +4,31 @@ type PanelsRenderPropArg = {
     selectedIndex: number;
 };
 export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): TabPanelsProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANELS_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<PanelsRenderPropArg> | 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: PanelsRenderPropArg) => 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_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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_PANELS_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 TabPanels: $$IsomorphicComponent;
-type TabPanels<TTag extends ElementType> = InstanceType<typeof TabPanels<TTag>>;
+type TabPanels<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = InstanceType<typeof TabPanels<TTag>>;
 export default TabPanels;

package/dist/transition/InternalTransitionChild.svelte

@@ -0,0 +1,178 @@
+<script lang="ts" module>import { compact, RenderStrategy } from "../utils/render.js";
+import { onMount, setContext, untrack } from "svelte";
+import {
+  hasChildren,
+  TreeStates,
+  useNesting,
+  useParentNesting,
+  useTransitionContext
+} from "./context.svelte.js";
+import { match } from "../utils/match.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+import { classNames } from "../utils/class-names.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
+export function shouldForwardRef(props) {
+  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" || // If we have a single child, then we can forward the ref directly
+    props.children !== void 0
+  );
+}
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">let { ref = $bindable(), ..._props } = $props();
+const {
+  // Whether or not to enable transitions on the current element (by exposing
+  // transition data). When set to false, the `Transition` component still
+  // acts as a transition boundary for `TransitionChild` components.
+  transition = true,
+  // Event "handlers"
+  beforeEnter,
+  afterEnter,
+  beforeLeave,
+  afterLeave,
+  // Class names
+  enter,
+  enterFrom,
+  enterTo,
+  entered,
+  leave,
+  leaveFrom,
+  leaveTo,
+  ...theirProps
+} = $derived(_props);
+let containerElement = $state();
+let container = $state({ current: null });
+const requiresRef = $derived(shouldForwardRef(_props));
+const strategy = $derived(theirProps.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden);
+const _transitionContext = useTransitionContext();
+const { show, appear, initial } = $derived(_transitionContext);
+let _state = $state(untrack(() => show) ? TreeStates.Visible : TreeStates.Hidden);
+const parentNesting = useParentNesting();
+const { register, unregister } = $derived(parentNesting);
+onMount(() => {
+  if (requiresRef) {
+    container.current = ref ?? null;
+    containerElement = ref;
+  }
+  return register(container);
+});
+$effect(() => {
+  if (strategy !== RenderStrategy.Hidden) return;
+  if (!container.current) return;
+  if (show && _state !== TreeStates.Visible) {
+    _state = TreeStates.Visible;
+    return;
+  }
+  match(_state, {
+    [TreeStates.Hidden]: () => unregister(container),
+    [TreeStates.Visible]: () => register(container)
+  });
+});
+$effect(() => {
+  if (!requiresRef) return;
+  if (_state === TreeStates.Visible && container.current === null) {
+    throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?");
+  }
+});
+const skip = $derived(initial && !appear);
+const immediate = $derived(appear && show && initial);
+let isTransitioning = $state(false);
+let nesting = useNesting({
+  done: () => {
+    if (isTransitioning) return;
+    _state = TreeStates.Hidden;
+    unregister(container);
+  },
+  get parent() {
+    return parentNesting;
+  }
+});
+const start = (show2) => {
+  isTransitioning = true;
+  const direction = show2 ? "enter" : "leave";
+  nesting.onStart(container, direction, (direction2) => {
+    if (direction2 === "enter") beforeEnter?.();
+    else if (direction2 === "leave") beforeLeave?.();
+  });
+};
+const end = (show2) => {
+  let direction = show2 ? "enter" : "leave";
+  isTransitioning = false;
+  nesting.onStop(container, direction, (direction2) => {
+    if (direction2 === "enter") afterEnter?.();
+    else if (direction2 === "leave") afterLeave?.();
+  });
+  if (direction === "leave" && !hasChildren(nesting)) {
+    _state = TreeStates.Hidden;
+    unregister(container);
+  }
+};
+$effect(() => {
+  if (requiresRef && transition) return;
+  untrack(() => start(show));
+  untrack(() => end(show));
+});
+const enabled = $derived.by(() => {
+  if (!transition) return false;
+  if (!requiresRef) return false;
+  if (skip) return false;
+  return true;
+});
+const _transition = useTransition({
+  get enabled() {
+    return enabled;
+  },
+  get element() {
+    return containerElement;
+  },
+  get show() {
+    return show;
+  },
+  events: { start, end }
+});
+const { data: transitionData } = $derived(_transition);
+const ourProps = $derived(
+  compact({
+    class: classNames(
+      // Incoming classes if any
+      // all components accept className (but all HTML elements do)
+      theirProps.class,
+      // Apply these classes immediately
+      immediate && enter,
+      immediate && enterFrom,
+      // Map data attributes to `enter`, `enterFrom` and `enterTo` classes
+      transitionData.enter && enter,
+      transitionData.enter && transitionData.closed && enterFrom,
+      transitionData.enter && !transitionData.closed && enterTo,
+      // Map data attributes to `leave`, `leaveFrom` and `leaveTo` classes
+      transitionData.leave && leave,
+      transitionData.leave && !transitionData.closed && leaveFrom,
+      transitionData.leave && transitionData.closed && leaveTo,
+      // Map data attributes to `entered` class (backwards compatibility)
+      !transitionData.transition && show && entered
+    )?.trim() || void 0,
+    // If `class` is an empty string, we can omit it
+    ...transitionDataAttributes(transitionData)
+  })
+);
+const openClosedState = $derived.by(() => {
+  let openClosedState2 = 0;
+  if (_state === TreeStates.Visible) openClosedState2 |= State.Open;
+  if (_state === TreeStates.Hidden) openClosedState2 |= State.Closed;
+  if (transitionData.enter) openClosedState2 |= State.Opening;
+  if (transitionData.leave) openClosedState2 |= State.Closing;
+  return openClosedState2;
+});
+createOpenClosedContext({
+  get value() {
+    return openClosedState;
+  }
+});
+setContext("NestingContext", nesting);
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_TRANSITION_CHILD_TAG} name="TransitionChild" bind:ref />