@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.31

package/dist/popover/context.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { MouseEventHandler } from "svelte/elements";
+export type MouseEvent<T extends EventTarget> = Parameters<MouseEventHandler<T>>[0];
+export declare enum PopoverStates {
+    Open = 0,
+    Closed = 1
+}
+export interface StateDefinition {
+    popoverState: PopoverStates;
+    buttons: symbol[];
+    button?: HTMLElement;
+    buttonId?: string;
+    panel?: HTMLElement;
+    panelId?: string;
+    beforePanelSentinel?: HTMLButtonElement;
+    afterPanelSentinel?: HTMLButtonElement;
+    afterButtonSentinel?: HTMLButtonElement;
+    __demoMode: boolean;
+}
+interface ActionDefinition {
+    togglePopover(): void;
+    closePopover(): void;
+    setButton(button: HTMLElement): void;
+    setButtonId(buttonId: string | undefined): void;
+    setPanel(panel?: HTMLElement): void;
+    setPanelId(panelId?: string): void;
+}
+export type PopoverContext = StateDefinition & ActionDefinition;
+export declare const createPopoverContext: (initialState: StateDefinition) => PopoverContext;
+export declare function usePopoverContext(component: string): PopoverContext;
+export type PopoverAPIContext = {
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void;
+    isPortalled: boolean;
+};
+export declare function usePopoverAPIContext(component: string): PopoverAPIContext;
+export type PopoverGroupContext = {
+    registerPopover(registerBag: PopoverRegisterBag): void;
+    unregisterPopover(registerBag: PopoverRegisterBag): void;
+    isFocusWithinPopoverGroup(): boolean;
+    closeOthers(buttonId: string): void;
+};
+export declare function usePopoverGroupContext(): PopoverGroupContext | undefined;
+export type PopoverPanelContext = {
+    value: string;
+};
+export declare function usePopoverPanelContext(): PopoverPanelContext | undefined;
+export interface PopoverRegisterBag {
+    buttonId?: string;
+    panelId?: string;
+    close(): void;
+}
+export {};

package/dist/popover/context.svelte.js

@@ -0,0 +1,108 @@
+import { getContext, setContext } from "svelte";
+export var PopoverStates;
+(function (PopoverStates) {
+    PopoverStates[PopoverStates["Open"] = 0] = "Open";
+    PopoverStates[PopoverStates["Closed"] = 1] = "Closed";
+})(PopoverStates || (PopoverStates = {}));
+export const createPopoverContext = (initialState) => {
+    const _state = $state(initialState);
+    const context = {
+        get popoverState() {
+            return _state.popoverState;
+        },
+        get buttons() {
+            return _state.buttons;
+        },
+        get button() {
+            return _state.button;
+        },
+        get buttonId() {
+            return _state.buttonId;
+        },
+        get panel() {
+            return _state.panel;
+        },
+        get panelId() {
+            return _state.panelId;
+        },
+        get beforePanelSentinel() {
+            return _state.beforePanelSentinel;
+        },
+        set beforePanelSentinel(value) {
+            _state.beforePanelSentinel = value;
+        },
+        get afterPanelSentinel() {
+            return _state.afterPanelSentinel;
+        },
+        set afterPanelSentinel(value) {
+            _state.afterPanelSentinel = value;
+        },
+        get afterButtonSentinel() {
+            return _state.afterButtonSentinel;
+        },
+        set afterButtonSentinel(value) {
+            _state.afterButtonSentinel = value;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        togglePopover() {
+            _state.__demoMode = false;
+            _state.popoverState = _state.popoverState === PopoverStates.Closed ? PopoverStates.Open : PopoverStates.Closed;
+        },
+        closePopover() {
+            if (_state.popoverState === PopoverStates.Closed)
+                return;
+            _state.__demoMode = false;
+            _state.popoverState = PopoverStates.Closed;
+        },
+        setButton(button) {
+            if (_state.button === button)
+                return;
+            _state.button = button;
+        },
+        setButtonId(buttonId) {
+            if (_state.buttonId === buttonId)
+                return;
+            _state.buttonId = buttonId;
+        },
+        setPanel(panel) {
+            if (_state.panel === panel)
+                return;
+            _state.panel = panel;
+        },
+        setPanelId(panelId) {
+            if (_state.panelId === panelId)
+                return;
+            _state.panelId = panelId;
+        },
+    };
+    setContext("PopoverContext", context);
+    return context;
+};
+export function usePopoverContext(component) {
+    const context = getContext("PopoverContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Popover /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, usePopoverContext);
+        throw err;
+    }
+    return context;
+}
+export function usePopoverAPIContext(component) {
+    const context = getContext("PopoverAPIContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Popover /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, usePopoverAPIContext);
+        throw err;
+    }
+    return context;
+}
+export function usePopoverGroupContext() {
+    return getContext("PopoverGroupContext");
+}
+export function usePopoverPanelContext() {
+    return getContext("PopoverPanelContext");
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Popover, type PopoverProps } from "./Popover.svelte";
+export { default as PopoverBackdrop, type PopoverBackdropProps } from "./PopoverBackdrop.svelte";
+export { default as PopoverButton, type PopoverButtonProps, type PopoverButtonComponentProps, type PopoverButtonSlot, type PopoverButtonPropsWeControl, } from "./PopoverButton.svelte";
+export { default as PopoverGroup, type PopoverGroupProps } from "./PopoverGroup.svelte";
+export { default as PopoverPanel, type PopoverPanelProps } from "./PopoverPanel.svelte";

package/dist/popover/index.js

@@ -0,0 +1,5 @@
+export { default as Popover } from "./Popover.svelte";
+export { default as PopoverBackdrop } from "./PopoverBackdrop.svelte";
+export { default as PopoverButton, } from "./PopoverButton.svelte";
+export { default as PopoverGroup } from "./PopoverGroup.svelte";
+export { default as PopoverPanel } from "./PopoverPanel.svelte";

package/dist/portal/InternalPortal.svelte.d.ts

@@ -14,17 +14,17 @@ export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "enabled"> 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<PortalRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "enabled"> 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<[{
+            slot: PortalRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PortalRenderPropArg) => string) | null | 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: PortalRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         enabled?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -33,9 +33,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const InternalPortal: $$IsomorphicComponent;

package/dist/portal/Portal.svelte.d.ts

@@ -2,9 +2,7 @@ import type { ElementType } from "../utils/types.js";
 import { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
     props(): PortalProps<TTag>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -13,9 +11,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Portal: $$IsomorphicComponent;

package/dist/portal/PortalGroup.svelte.d.ts

@@ -11,17 +11,17 @@ export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG
 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") | "target"> 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<GroupRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "target"> 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<[{
+            slot: GroupRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: GroupRenderPropArg) => string) | null | 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: GroupRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         target: HTMLElement | null;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -30,9 +30,7 @@ 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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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 PortalGroup: $$IsomorphicComponent;

package/dist/select/Select.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>let DEFAULT_SELECT_TAG = "select";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECT_TAG">import { useId } from "../hooks/use-id.js";
+import { useProvidedId } from "../utils/id.js";
+import { useDisabled } from "../hooks/use-disabled.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 { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+const providedId = useProvidedId();
+const providedDisabled = useDisabled();
+let {
+  ref = $bindable(),
+  id = providedId || `headlessui-select-${internalId}`,
+  disabled: theirDisabled = false,
+  invalid = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled.current ?? theirDisabled);
+const labelledBy = useLabelledBy();
+const describedBy = useDescribedBy();
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+const slot = $derived({
+  disabled,
+  invalid,
+  hover,
+  focus,
+  active,
+  autofocus
+});
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_SELECT_TAG} name="Select" bind:ref />

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

@@ -0,0 +1,46 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare let DEFAULT_SELECT_TAG: "select";
+type SelectRenderPropArg = {
+    disabled: boolean;
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    autofocus: boolean;
+    invalid: boolean;
+};
+type SelectPropsWeControl = "aria-labelledby" | "aria-describedby";
+export type SelectProps<TTag extends ElementType = typeof DEFAULT_SELECT_TAG> = Props<TTag, SelectRenderPropArg, SelectPropsWeControl, {
+    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<[{
+            slot: 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>>;
+export default Select;

package/dist/select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select, type SelectProps } from "./Select.svelte";

package/dist/select/index.js

@@ -0,0 +1 @@
+export { default as Select } from "./Select.svelte";

package/dist/switch/Switch.svelte

@@ -3,9 +3,8 @@
 
 <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 { 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/context.svelte.js";
 import { useDescribedBy } from "../description/context.svelte.js";
@@ -14,18 +13,19 @@ 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 { 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 {
   ref = $bindable(),
-  id: ownId,
-  disabled: ownDisabled,
-  defaultChecked,
-  checked = $bindable(defaultChecked),
-  onchange,
+  id = providedId || `headlessui-switch-${internalId}`,
+  disabled: theirDisabled = false,
+  checked: controlledChecked = $bindable(),
+  defaultChecked: _defaultChecked,
+  onchange: controlledOnChange,
   name,
   value,
   form,
@@ -33,19 +33,30 @@ let {
   tabIndex,
   ...theirProps
 } = $props();
-const id = $derived(ownId || providedId || `headlessui-switch-${internalId}`);
-const disabled = $derived(ownDisabled || providedDisabled || false);
+const disabled = $derived(providedDisabled.current ?? theirDisabled);
 const groupContext = getContext("GroupContext");
 $effect(() => {
   if (groupContext) groupContext.switchElement = ref ?? null;
 });
-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;
   });
 };
@@ -123,11 +134,10 @@ const ourProps = $derived(
     pressProps
   )
 );
-const reset = () => {
+const reset = $derived(() => {
   if (defaultChecked === void 0) return;
-  checked = defaultChecked;
-  return onchange?.(checked);
-};
+  return onchange?.(defaultChecked);
+});
 </script>
 
 {#if name}

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;
@@ -24,12 +24,14 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> 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<SwitchRenderPropArg> | 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<[{
+            slot: SwitchRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: SwitchRenderPropArg) => string) | null | 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: SwitchRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         checked?: boolean;
         defaultChecked?: boolean;
         onchange?(checked: boolean): void;
@@ -40,9 +42,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH
         disabled?: boolean;
         tabIndex?: number;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref" | "checked";
     exports(): {};
@@ -51,9 +51,7 @@ 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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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;

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

@@ -7,15 +7,15 @@ export type GroupContext = {
 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;
+    } & (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<[{
+            slot: {};
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: {}) => string) | null | 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>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -24,9 +24,7 @@ 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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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;

package/dist/tabs/Tab.svelte

@@ -2,7 +2,6 @@
 </script>
 
 <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";
 import { getOwnerDocument } from "../utils/owner.js";
@@ -15,6 +14,7 @@ import { onMount } from "svelte";
 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(),
@@ -23,11 +23,10 @@ let {
   autofocus = false,
   ...theirProps
 } = $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({ current: ref });
-onMount(() => actions.registerTab(tabRef));
+onMount(() => registerTab(tabRef));
 const mySSRIndex = useStableCollectionIndex("tabs");
 const myIndex = $derived.by(() => {
   const index = tabs.findIndex((tab) => tab === tabRef);
@@ -38,8 +37,8 @@ const activateUsing = $derived((cb) => {
   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 idx = context.tabs.findIndex((tab) => tab.current === newTab);
+    if (idx !== -1) change(idx);
   }
   return result;
 });
@@ -48,7 +47,7 @@ const handleKeyDown = (event) => {
   if (event.key === " " || event.key === "Enter") {
     event.preventDefault();
     event.stopPropagation();
-    actions.change(myIndex);
+    change(myIndex);
     return;
   }
   switch (event.key) {
@@ -86,7 +85,7 @@ const handleSelection = () => {
   if (ready) return;
   ready = true;
   ref?.focus({ preventScroll: true });
-  actions.change(myIndex);
+  change(myIndex);
   microTask(() => {
     ready = false;
   });