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

package/dist/tabs/Tab.svelte

@@ -1,8 +1,8 @@
 <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 = {
+  export type TabRenderPropArg = {
     hover: boolean
     focus: boolean
     active: boolean
@@ -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,6 +1,6 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_TAB_TAG: "button";
-type TabRenderPropArg = {
+export type TabRenderPropArg = {
     hover: boolean;
     focus: boolean;
     active: 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,19 +1,19 @@
 <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"
 
   const DEFAULT_TABS_TAG = "div" as const
-  type TabsRenderPropArg = {
+  export type TabsRenderPropArg = {
     selectedIndex: number
   }
   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 = {
+export 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,23 +1,22 @@
 <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 = {
+  export type ListRenderPropArg = {
     selectedIndex: number
   }
   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 = {
+export 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;

package/dist/tabs/TabPanel.svelte

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

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

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

package/dist/tabs/TabPanels.svelte

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

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

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

package/dist/tabs/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Tab, type TabProps } from "./Tab.svelte";
-export { default as TabGroup, type TabGroupProps } from "./TabGroup.svelte";
-export { default as TabList, type TabListProps } from "./TabList.svelte";
-export { default as TabPanel, type TabPanelProps } from "./TabPanel.svelte";
-export { default as TabPanels, type TabPanelsProps } from "./TabPanels.svelte";
+export { default as Tab, type TabProps, type TabRenderPropArg as TabSlot } from "./Tab.svelte";
+export { default as TabGroup, type TabGroupProps, type TabsRenderPropArg as TabGroupSlot } from "./TabGroup.svelte";
+export { default as TabList, type TabListProps, type ListRenderPropArg as TabListSlot } from "./TabList.svelte";
+export { default as TabPanel, type TabPanelProps, type PanelRenderPropArg as TabPanelSlot } from "./TabPanel.svelte";
+export { default as TabPanels, type TabPanelsProps, type PanelsRenderPropArg as TabPanelsSlot, } from "./TabPanels.svelte";

package/dist/tabs/index.js

@@ -2,4 +2,4 @@ export { default as Tab } from "./Tab.svelte";
 export { default as TabGroup } from "./TabGroup.svelte";
 export { default as TabList } from "./TabList.svelte";
 export { default as TabPanel } from "./TabPanel.svelte";
-export { default as TabPanels } from "./TabPanels.svelte";
+export { default as TabPanels, } from "./TabPanels.svelte";

package/dist/textarea/Textarea.svelte

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