@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.40

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,21 +12,18 @@
   }
   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
-    }
-  >
+  export type TabOwnProps = {
+    element?: HTMLElement
+    id?: string
+    autofocus?: boolean
+    disabled?: boolean
+  }
+
+  export type TabProps = Props<typeof DEFAULT_TAB_TAG, TabRenderPropArg, TabOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TAB_TAG">
+<script lang="ts">
   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"
   import { getOwnerDocument } from "../utils/owner.js"
@@ -40,23 +37,23 @@
   import { useHover } from "../hooks/use-hover.svelte.js"
   import { mergeProps } from "../utils/render.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useTabs } from "./context.svelte.js"
 
   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 data = useData("Tab")
-  const { orientation, activation, selectedIndex, tabs, panels } = $derived(data)
-  const actions = useActions("Tab")
+  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(() => actions.registerTab(tabRef))
+  onMount(() => registerTab(tabRef))
 
   const mySSRIndex = useStableCollectionIndex("tabs")
 
@@ -69,9 +66,9 @@
   const activateUsing = $derived((cb: () => FocusResult) => {
     let result = cb()
     if (result === FocusResult.Success && activation === "auto") {
-      let newTab = getOwnerDocument(ref)?.activeElement
-      let idx = data.tabs.findIndex((tab) => tab.current === newTab)
-      if (idx !== -1) actions.change(idx)
+      let newTab = getOwnerDocument(element)?.activeElement
+      let idx = context.tabs.findIndex((tab) => tab.current === newTab)
+      if (idx !== -1) change(idx)
     }
     return result
   })
@@ -83,7 +80,7 @@
       event.preventDefault()
       event.stopPropagation()
 
-      actions.change(myIndex)
+      change(myIndex)
       return
     }
 
@@ -128,8 +125,8 @@
     if (ready) return
     ready = true
 
-    ref?.focus({ preventScroll: true })
-    actions.change(myIndex)
+    element?.focus({ preventScroll: true })
+    change(myIndex)
 
     microTask(() => {
       ready = false
@@ -176,7 +173,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
@@ -205,4 +202,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,41 +8,13 @@ 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 TabOwnProps = {
+    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>, ("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(): "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']> & {
-        $$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 = typeof DEFAULT_TAB_TAG> = InstanceType<typeof Tab<TTag>>;
+};
+export type TabProps = Props<typeof DEFAULT_TAB_TAG, TabRenderPropArg, TabOwnProps>;
+declare const Tab: import("svelte").Component<TabProps, {}, "element">;
+type Tab = ReturnType<typeof Tab>;
 export default Tab;

package/dist/tabs/TabGroup.svelte

@@ -1,297 +1,75 @@
 <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 { match } from "../utils/match.js"
   import FocusSentinel from "../internal/FocusSentinel.svelte"
-  import { setContext, getContext, untrack } from "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,
-    TabsRenderPropArg,
-    TabsPropsWeControl,
-    {
-      defaultIndex?: number
-      onchange?: (index: number) => void
-      selectedIndex?: number
-      vertical?: boolean
-      manual?: boolean
-    }
-  >
-
-  interface StateDefinition {
-    info: { isControlled: boolean }
-    selectedIndex: number
-
-    tabs: MutableRefObject<HTMLElement | undefined>[]
-    panels: MutableRefObject<HTMLElement | undefined>[]
-  }
-
-  type TabsDataContext = StateDefinition & {
-    orientation: "horizontal" | "vertical"
-    activation: "manual" | "auto"
+  export type TabGroupOwnProps = {
+    element?: HTMLElement
+    defaultIndex?: number
+    onchange?: (index: number) => void
+    selectedIndex?: number
+    vertical?: boolean
+    manual?: boolean
   }
 
-  export function useData(component: string) {
-    const context = getContext<TabsDataContext>("TabsData")
-    if (!context) {
-      let err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`)
-      if (Error.captureStackTrace) Error.captureStackTrace(err, useData)
-      throw err
-    }
-    return context
-  }
-
-  type TabsActionsContext = {
-    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void
-    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void
-    change: (index: number) => void
-  }
-
-  export function useActions(component: string) {
-    const context = getContext<TabsActionsContext>("TabsActions")
-    if (!context) {
-      const err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`)
-      if (Error.captureStackTrace) Error.captureStackTrace(err, useActions)
-      throw err
-    }
-    return context
-  }
+  export type TabGroupProps = Props<typeof DEFAULT_TABS_TAG, TabsRenderPropArg, TabGroupOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">
+<script lang="ts">
   import StableCollection from "../utils/StableCollection.svelte"
-  import type { MutableRefObject } from "../utils/ref.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  enum Direction {
-    Forwards,
-    Backwards,
-  }
-
-  enum Ordering {
-    Less = -1,
-    Equal = 0,
-    Greater = 1,
-  }
-
-  const stateReducer = (initialState: StateDefinition) => {
-    let _state = $state(initialState)
-    return {
-      get info() {
-        return _state.info
-      },
-      get selectedIndex() {
-        return _state.selectedIndex
-      },
-      get tabs() {
-        return _state.tabs
-      },
-      get panels() {
-        return _state.panels
-      },
-      setSelectedIndex(index: number) {
-        if (index === _state.selectedIndex) return _state
-        let tabs = sortByDomNode(_state.tabs, (tab) => tab.current ?? null)
-        let panels = sortByDomNode(_state.panels, (panel) => panel.current ?? null)
-
-        let focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"))
-
-        let nextState = { ..._state, tabs, panels }
-
-        if (
-          // Underflow
-          index < 0 ||
-          // Overflow
-          index > tabs.length - 1
-        ) {
-          let direction = match(Math.sign(index - _state.selectedIndex), {
-            [Ordering.Less]: () => Direction.Backwards,
-            [Ordering.Equal]: () => {
-              return match(Math.sign(index), {
-                [Ordering.Less]: () => Direction.Forwards,
-                [Ordering.Equal]: () => Direction.Forwards,
-                [Ordering.Greater]: () => Direction.Backwards,
-              })
-            },
-            [Ordering.Greater]: () => Direction.Forwards,
-          })
-
-          // If there are no focusable tabs then.
-          // We won't change the selected index
-          // because it's likely the user is
-          // lazy loading tabs and there's
-          // nothing to focus on yet
-          if (focusableTabs.length === 0) {
-            _state = nextState
-            return _state
-          }
-
-          let nextSelectedIndex = match(direction, {
-            [Direction.Forwards]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
-            [Direction.Backwards]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1]),
-          })
-
-          _state = {
-            ...nextState,
-            selectedIndex: nextSelectedIndex === -1 ? _state.selectedIndex : nextSelectedIndex,
-          }
-          return _state
-        }
-
-        // Middle
-        let before = tabs.slice(0, index)
-        let after = tabs.slice(index)
-
-        let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab))
-        if (!next) {
-          _state = nextState
-          return _state
-        }
-
-        let selectedIndex = tabs.findIndex((tab) => tab === next) ?? _state.selectedIndex
-        if (selectedIndex === -1) selectedIndex = _state.selectedIndex
-
-        _state = { ...nextState, selectedIndex }
-        return _state
-      },
-      registerTab(tab: MutableRefObject<HTMLElement | undefined>) {
-        if (_state.tabs.some((_tab) => _tab === tab)) return _state
-
-        _state.tabs = sortByDomNode([..._state.tabs, tab], (tab) => tab.current ?? null)
-        let activeTab = _state.tabs[_state.selectedIndex]
-
-        // When the component is uncontrolled, then we want to maintain the actively
-        // selected tab even if new tabs are inserted or removed before the active
-        // tab.
-        //
-        // When the component is controlled, then we don't want to do this and
-        // instead we want to select the tab based on the `selectedIndex` prop.
-        if (!_state.info.isControlled) {
-          const selectedIndex = _state.tabs.findIndex((tab) => tab === activeTab)
-          if (selectedIndex !== _state.selectedIndex) _state.selectedIndex = selectedIndex
-        }
-
-        return _state
-      },
-      unregisterTab(tab: MutableRefObject<HTMLElement | undefined>) {
-        _state.tabs = _state.tabs.filter((_tab) => _tab !== tab)
-        return _state
-      },
-      registerPanel(panel: MutableRefObject<HTMLElement | undefined>) {
-        if (_state.panels.some((_panel) => _panel === panel)) return _state
-        _state.panels = sortByDomNode([..._state.panels, panel], (panel) => panel.current ?? null)
-        return _state
-      },
-      unregisterPanel(panel: MutableRefObject<HTMLElement | undefined>) {
-        _state.panels = _state.panels.filter((_panel) => _panel !== panel)
-        return _state
-      },
-    }
-  }
+  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()
-  const orientation = $derived(vertical ? "vertical" : "horizontal")
-  const activation = $derived(manual ? "manual" : "auto")
-
-  const isControlled = $derived(selectedIndex !== undefined)
-
-  const _state = stateReducer({
-    info: { isControlled: selectedIndex !== undefined },
-    selectedIndex: selectedIndex ?? defaultIndex,
-    tabs: [],
-    panels: [],
-  })
-  $effect(() => {
-    untrack(() => _state.info).isControlled = isControlled
-  })
-
-  const slot = $derived({
-    selectedIndex: _state.selectedIndex,
-  } satisfies TabsRenderPropArg)
-  const stableTabs = $derived(_state.tabs)
-
-  const tabsData = {
-    get orientation() {
-      return orientation
-    },
-    get activation() {
-      return activation
+  }: TabGroupProps = $props()
+  const _state = createTabContext({
+    get vertical() {
+      return vertical
     },
-    get info() {
-      return _state.info
+    get manual() {
+      return manual
     },
     get selectedIndex() {
-      return _state.selectedIndex
+      return selectedIndex
     },
-    get tabs() {
-      return _state.tabs
+    get defaultIndex() {
+      return defaultIndex
     },
-    get panels() {
-      return _state.panels
+    change: (index: number) => {
+      if (realSelectedIndex !== index) {
+        onchange?.(index)
+      }
+
+      if (!isControlled) {
+        _state.selectedIndex = index
+      }
     },
-  }
-
+  })
+  const isControlled = $derived(_state.info.isControlled)
   const realSelectedIndex = $derived(isControlled ? selectedIndex! : _state.selectedIndex)
 
-  const registerTab = (tab: MutableRefObject<HTMLElement | undefined>) => {
-    _state.registerTab(tab)
-    return () => _state.unregisterTab(tab)
-  }
-
-  const registerPanel = (panel: MutableRefObject<HTMLElement | undefined>) => {
-    _state.registerPanel(panel)
-    return () => _state.unregisterPanel(panel)
-  }
-
-  const change = (index: number) => {
-    if (realSelectedIndex !== index) {
-      onchange?.(index)
-    }
-
-    if (!isControlled) {
-      _state.setSelectedIndex(index)
-    }
-  }
-
-  setContext<TabsActionsContext>("TabsActions", { registerTab, registerPanel, change })
-  setContext<TabsDataContext>("TabsData", {
-    get orientation() {
-      return orientation
-    },
-    get activation() {
-      return activation
-    },
-    get info() {
-      return _state.info
-    },
-    get selectedIndex() {
-      return _state.selectedIndex
-    },
-    get tabs() {
-      return _state.tabs
-    },
-    get panels() {
-      return _state.panels
-    },
-  })
+  const slot = $derived({
+    selectedIndex: _state.selectedIndex,
+  } satisfies TabsRenderPropArg)
+  const stableTabs = $derived(_state.tabs)
 
   $effect(() => {
     const newSelectedIndex = selectedIndex ?? defaultIndex
-    untrack(() => _state.setSelectedIndex(newSelectedIndex))
+    untrack(() => (_state.selectedIndex = newSelectedIndex))
   })
 
   $effect(() => {
@@ -304,16 +82,16 @@
     let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab)
 
     if (didOrderChange) {
-      change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]))
+      _state.change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]))
     }
   })
 </script>
 
 <StableCollection>
-  {#if tabsData.tabs.length <= 0}
+  {#if _state.tabs.length <= 0}
     <FocusSentinel
       onfocus={() => {
-        for (let tab of stableTabs) {
+        for (const tab of stableTabs) {
           if (tab?.current?.tabIndex === 0) {
             tab?.current?.focus()
             return true
@@ -324,5 +102,5 @@
       }}
     />
   {/if}
-  <ElementOrComponent {theirProps} 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,67 +1,17 @@
-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 TabGroupOwnProps = {
+    element?: HTMLElement;
     defaultIndex?: number;
     onchange?: (index: number) => void;
     selectedIndex?: number;
     vertical?: boolean;
     manual?: boolean;
-}>;
-interface StateDefinition {
-    info: {
-        isControlled: boolean;
-    };
-    selectedIndex: number;
-    tabs: MutableRefObject<HTMLElement | undefined>[];
-    panels: MutableRefObject<HTMLElement | undefined>[];
-}
-type TabsDataContext = StateDefinition & {
-    orientation: "horizontal" | "vertical";
-    activation: "manual" | "auto";
-};
-export declare function useData(component: string): TabsDataContext;
-type TabsActionsContext = {
-    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void;
-    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void;
-    change: (index: number) => void;
 };
-export declare function useActions(component: string): TabsActionsContext;
-import type { MutableRefObject } from "../utils/ref.svelte.js";
-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(): "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']> & {
-        $$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 = typeof DEFAULT_TABS_TAG> = InstanceType<typeof TabGroup<TTag>>;
+export type TabGroupProps = Props<typeof DEFAULT_TABS_TAG, TabsRenderPropArg, TabGroupOwnProps>;
+declare const TabGroup: import("svelte").Component<TabGroupProps, {}, "element">;
+type TabGroup = ReturnType<typeof TabGroup>;
 export default TabGroup;

package/dist/tabs/TabList.svelte

@@ -1,36 +1,33 @@
 <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,
-    ListRenderPropArg,
-    ListPropsWeControl,
-    {
-      //
-    }
-  >
+  export type TabListOwnProps = {
+    element?: HTMLElement
+  }
+
+  export type TabListProps = Props<typeof DEFAULT_LIST_TAG, ListRenderPropArg, TabListOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">
-  import { useData } from "./TabGroup.svelte"
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useTabs } from "./context.svelte.js"
 
-  const data = useData("Tab.List")
-  const { orientation, selectedIndex } = $derived(data)
+  const context = useTabs("TabList")
+  const { orientation, selectedIndex } = $derived(context)
 
   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 />