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

package/dist/select/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_SELECT_TAG = "select" as const
 
@@ -13,11 +13,12 @@
   }
   type SelectPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<
-    TTag,
+  export type SelectProps = Props<
+    typeof DEFAULT_SELECT_TAG,
     SelectRenderPropArg,
-    SelectPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       disabled?: boolean
       invalid?: boolean
       autofocus?: boolean
@@ -25,7 +26,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECT_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useProvidedId } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
@@ -41,13 +42,13 @@
   const providedId = useProvidedId()
   const providedDisabled = useDisabled()
   let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-select-${internalId}`) as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = providedId || `headlessui-select-${internalId}`,
     disabled: theirDisabled = false,
     invalid = false,
     autofocus = false,
     ...theirProps
-  }: { as?: TTag } & SelectProps<TTag> = $props()
+  }: SelectProps = $props()
 
   const disabled = $derived(providedDisabled.current ?? theirDisabled)
   const labelledBy = useLabelledBy()
@@ -101,4 +102,4 @@
   } satisfies SelectRenderPropArg)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:element />

package/dist/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_SELECT_TAG: "select";
 type SelectRenderPropArg = {
     disabled: boolean;
@@ -8,38 +8,12 @@ type SelectRenderPropArg = {
     autofocus: boolean;
     invalid: boolean;
 };
-type SelectPropsWeControl = "aria-labelledby" | "aria-describedby";
-export type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<TTag, SelectRenderPropArg, SelectPropsWeControl, {
+export type SelectProps = Props<typeof DEFAULT_SELECT_TAG, SelectRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     disabled?: boolean;
     invalid?: boolean;
     autofocus?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "autofocus" | SelectPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[SelectRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: SelectRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-        invalid?: boolean;
-        autofocus?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_SELECT_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_SELECT_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Select: $$IsomorphicComponent;
-type Select<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = InstanceType<typeof Select<TTag>>;
+declare const Select: import("svelte").Component<SelectProps, {}, "element">;
 export default Select;

package/dist/switch/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_SWITCH_TAG = "button" as const
   type SwitchRenderPropArg = {
@@ -13,11 +13,12 @@
   }
   type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role"
 
-  export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<
-    TTag,
+  export type SwitchProps = Props<
+    typeof DEFAULT_SWITCH_TAG,
     SwitchRenderPropArg,
-    SwitchPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       checked?: boolean
       defaultChecked?: boolean
       onchange?(checked: boolean): void
@@ -31,7 +32,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
   import { useProvidedId } from "../utils/id.js"
@@ -53,8 +54,8 @@
   const providedId = useProvidedId()
   const providedDisabled = useDisabled()
   let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-switch-${internalId}`) as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = providedId || `headlessui-switch-${internalId}`,
     disabled: theirDisabled = false,
     checked: controlledChecked = $bindable(),
     defaultChecked: _defaultChecked,
@@ -65,11 +66,11 @@
     autofocus = false,
     tabIndex,
     ...theirProps
-  }: { as?: TTag } & SwitchProps<TTag> = $props()
+  }: SwitchProps = $props()
   const disabled = $derived(providedDisabled.current ?? theirDisabled)
   const groupContext = getContext<GroupContext>("GroupContext")
   $effect(() => {
-    if (groupContext) groupContext.switchElement = ref ?? null
+    if (groupContext) groupContext.switchElement = element ?? null
   })
 
   const defaultChecked = _defaultChecked
@@ -152,10 +153,10 @@
 
   const buttonType = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as: theirProps.as }
+      return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_SWITCH_TAG }
     },
     get ref() {
-      return { current: ref }
+      return { current: element }
     },
   })
 
@@ -197,4 +198,4 @@
   />
 {/if}
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SWITCH_TAG} name="Switch" bind:element />

package/dist/switch/Switch.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_SWITCH_TAG: "button";
 type SwitchRenderPropArg = {
     checked: boolean;
@@ -9,8 +9,9 @@ type SwitchRenderPropArg = {
     changing: boolean;
     disabled: boolean;
 };
-type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role";
-export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl, {
+export type SwitchProps = Props<typeof DEFAULT_SWITCH_TAG, SwitchRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     checked?: boolean;
     defaultChecked?: boolean;
     onchange?(checked: boolean): void;
@@ -21,38 +22,5 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
     disabled?: boolean;
     tabIndex?: number;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[SwitchRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: SwitchRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        checked?: boolean;
-        defaultChecked?: boolean;
-        onchange?(checked: boolean): void;
-        name?: string;
-        value?: string;
-        form?: string;
-        autofocus?: boolean;
-        disabled?: boolean;
-        tabIndex?: number;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref" | "checked";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    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 = typeof DEFAULT_SWITCH_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Switch: $$IsomorphicComponent;
-type Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = InstanceType<typeof Switch<TTag>>;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "element" | "checked">;
 export default Switch;

package/dist/switch/SwitchGroup.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { PropsAsChild } from "../utils/types.js"
 
   const DEFAULT_GROUP_TAG = "svelte:fragment"
 
-  export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
+  export type SwitchGroupProps = PropsAsChild
 
   export type GroupContext = {
     switchElement: HTMLElement | null
   }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+<script lang="ts">
   import { setContext } from "svelte"
   import { useLabels } from "../label/context.svelte.js"
   import { useDescriptions } from "../description/context.svelte.js"
@@ -44,7 +44,7 @@
     },
   })
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
+  let { ...theirProps }: SwitchGroupProps = $props()
 </script>
 
-<ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />
+<ElementOrComponent {theirProps} name="SwitchGroup" />

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

@@ -1,31 +1,11 @@
-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>;
+import type { PropsAsChild } from "../utils/types.js";
+export type SwitchGroupProps = PropsAsChild;
 export type GroupContext = {
     switchElement: HTMLElement | null;
 };
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_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<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: {}) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    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 = typeof DEFAULT_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const SwitchGroup: $$IsomorphicComponent;
-type SwitchGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof SwitchGroup<TTag>>;
+declare const SwitchGroup: import("svelte").Component<{
+    children?: import("svelte").Snippet<[{
+        props?: Record<string, any>;
+    }]> | undefined;
+}, {}, "">;
 export default SwitchGroup;

package/dist/tabs/Tab.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_TAB_TAG = "button" as const
   type TabRenderPropArg = {
@@ -12,11 +12,11 @@
   }
   type TabPropsWeControl = "aria-controls" | "aria-selected" | "role" | "tabIndex"
 
-  export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<
-    TTag,
+  export type TabProps = Props<
+    typeof DEFAULT_TAB_TAG,
     TabRenderPropArg,
-    TabPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       autofocus?: boolean
       disabled?: boolean
@@ -24,7 +24,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TAB_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
   import { Focus, focusIn, FocusResult } from "../utils/focus-management.js"
@@ -43,17 +43,17 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-tabs-tab-${internalId}`,
     disabled = false,
     autofocus = false,
     ...theirProps
-  }: { as?: TTag } & TabProps<TTag> = $props()
+  }: TabProps = $props()
 
   const context = useTabs("Tab")
   const { orientation, activation, selectedIndex, tabs, panels, registerTab, change } = $derived(context)
 
-  const tabRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
+  const tabRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: element })
 
   onMount(() => registerTab(tabRef))
 
@@ -68,7 +68,7 @@
   const activateUsing = $derived((cb: () => FocusResult) => {
     let result = cb()
     if (result === FocusResult.Success && activation === "auto") {
-      let newTab = getOwnerDocument(ref)?.activeElement
+      let newTab = getOwnerDocument(element)?.activeElement
       let idx = context.tabs.findIndex((tab) => tab.current === newTab)
       if (idx !== -1) change(idx)
     }
@@ -127,7 +127,7 @@
     if (ready) return
     ready = true
 
-    ref?.focus({ preventScroll: true })
+    element?.focus({ preventScroll: true })
     change(myIndex)
 
     microTask(() => {
@@ -175,7 +175,7 @@
 
   const resolvedType = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as: theirProps.as }
+      return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_TAB_TAG }
     },
     get ref() {
       return tabRef
@@ -204,4 +204,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:element />

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_TAB_TAG: "button";
 type TabRenderPropArg = {
     hover: boolean;
@@ -8,38 +8,11 @@ type TabRenderPropArg = {
     selected: boolean;
     disabled: boolean;
 };
-type TabPropsWeControl = "aria-controls" | "aria-selected" | "role" | "tabIndex";
-export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<TTag, TabRenderPropArg, TabPropsWeControl, {
+export type TabProps = Props<typeof DEFAULT_TAB_TAG, TabRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     autofocus?: boolean;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TAB_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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("svelte").Snippet<[TabRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: TabRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        autofocus?: boolean;
-        disabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    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 = typeof DEFAULT_TAB_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Tab: $$IsomorphicComponent;
-type Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = InstanceType<typeof Tab<TTag>>;
+declare const Tab: import("svelte").Component<TabProps, {}, "element">;
 export default Tab;

package/dist/tabs/TabGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { sortByDomNode } from "../utils/focus-management.js"
   import FocusSentinel from "../internal/FocusSentinel.svelte"
 
@@ -9,11 +9,11 @@
   }
   type TabsPropsWeControl = never
 
-  export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<
-    TTag,
+  export type TabGroupProps = Props<
+    typeof DEFAULT_TABS_TAG,
     TabsRenderPropArg,
-    TabsPropsWeControl,
     {
+      element?: HTMLElement
       defaultIndex?: number
       onchange?: (index: number) => void
       selectedIndex?: number
@@ -23,21 +23,21 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">
+<script lang="ts">
   import StableCollection from "../utils/StableCollection.svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { createTabContext } from "./context.svelte.js"
   import { untrack } from "svelte"
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     defaultIndex = 0,
     vertical = false,
     manual = false,
     onchange,
     selectedIndex = undefined,
     ...theirProps
-  }: { as?: TTag } & TabGroupProps<TTag> = $props()
+  }: TabGroupProps = $props()
   const _state = createTabContext({
     get vertical() {
       return vertical
@@ -104,5 +104,5 @@
       }}
     />
   {/if}
-  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_TABS_TAG} name="TabGroup" bind:ref />
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_TABS_TAG} name="TabGroup" bind:element />
 </StableCollection>

package/dist/tabs/TabGroup.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_TABS_TAG: "div";
 type TabsRenderPropArg = {
     selectedIndex: number;
 };
-type TabsPropsWeControl = never;
-export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<TTag, TabsRenderPropArg, TabsPropsWeControl, {
+export type TabGroupProps = Props<typeof DEFAULT_TABS_TAG, TabsRenderPropArg, {
+    element?: HTMLElement;
     defaultIndex?: number;
     onchange?: (index: number) => void;
     selectedIndex?: number;
     vertical?: boolean;
     manual?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "onchange" | "manual" | "vertical" | "selectedIndex" | "defaultIndex"> 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<[TabsRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: TabsRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        defaultIndex?: number;
-        onchange?: (index: number) => void;
-        selectedIndex?: number;
-        vertical?: boolean;
-        manual?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    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 = typeof DEFAULT_TABS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TabGroup: $$IsomorphicComponent;
-type TabGroup<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = InstanceType<typeof TabGroup<TTag>>;
+declare const TabGroup: import("svelte").Component<TabGroupProps, {}, "element">;
 export default TabGroup;

package/dist/tabs/TabList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_LIST_TAG = "div" as const
   type ListRenderPropArg = {
@@ -7,17 +7,16 @@
   }
   type ListPropsWeControl = "aria-orientation" | "role"
 
-  export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<
-    TTag,
+  export type TabListProps = Props<
+    typeof DEFAULT_LIST_TAG,
     ListRenderPropArg,
-    ListPropsWeControl,
     {
-      //
+      element?: HTMLElement
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { useTabs } from "./context.svelte.js"
 
@@ -26,11 +25,11 @@
 
   const slot = $derived({ selectedIndex } satisfies ListRenderPropArg)
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabListProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: TabListProps = $props()
   const ourProps = $derived({
     role: "tablist",
     "aria-orientation": orientation,
   })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:element />

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

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