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

package/dist/switch/Switch.svelte

@@ -1,55 +1,62 @@
-<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 { useProvidedId } from "../utils/id.js";
+import { getContext, tick } from "svelte";
 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 { useControllable } from "../hooks/use-controllable.svelte.js";
 import FormFields from "../internal/FormFields.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
-let providedId = useProvidedId();
-let { value: providedDisabled } = $derived(useDisabled());
+const providedId = useProvidedId();
+const providedDisabled = useDisabled();
 let {
-  as = DEFAULT_SWITCH_TAG,
-  id: ownId,
-  disabled: ownDisabled,
-  defaultChecked,
-  checked = $bindable(defaultChecked),
-  onchange,
+  ref = $bindable(),
+  id = providedId || `headlessui-switch-${internalId}`,
+  disabled: theirDisabled = false,
+  checked: controlledChecked = $bindable(),
+  defaultChecked: _defaultChecked,
+  onchange: controlledOnChange,
   name,
   value,
   form,
   autofocus = false,
   tabIndex,
-  children,
   ...theirProps
 } = $props();
-const id = $derived(ownId || providedId || `headlessui-switch-${internalId}`);
-const disabled = $derived(ownDisabled || providedDisabled || false);
+const disabled = $derived(providedDisabled?.value ?? theirDisabled);
 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();
+const defaultChecked = _defaultChecked;
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledChecked;
+    },
+    set controlledValue(checked2) {
+      controlledChecked = checked2;
+    }
+  },
+  controlledOnChange,
+  defaultChecked ?? false
+);
+const { value: checked, onchange } = $derived(controllable);
 let changing = $state(false);
 const toggle = () => {
   changing = true;
-  checked = !checked;
-  onchange?.(checked);
-  d.nextFrame(() => {
+  onchange?.(!checked);
+  tick().then(() => {
     changing = false;
   });
 };
@@ -100,7 +107,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,15 +131,13 @@ const ourProps = $derived(
     },
     focusProps,
     hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+    pressProps
   )
 );
-const reset = () => {
+const reset = $derived(() => {
   if (defaultChecked === void 0) return;
-  checked = defaultChecked;
-  return onchange?.(checked);
-};
+  return onchange?.(defaultChecked);
+});
 </script>
 
 {#if name}
@@ -144,6 +149,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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 declare const DEFAULT_SWITCH_TAG: "button";
 type SwitchRenderPropArg = {
     checked: boolean;
@@ -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 PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<SwitchRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: PropsOf<TTag>["class"] | ((bag: 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;

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;