Initial commit with files

Still need to fix the imports

src/lib/components/description/Description.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { useId } from "./use-id";
+    import { getContext, onMount } from "svelte";
+    import { Writable } from "svelte/store";
+    import { DescriptionContext } from "./DescriptionProvider.svelte";
+    const id = `headlessui-description-${useId()}`;
+    let contextStore: Writable<DescriptionContext> | undefined = getContext(
+        "headlessui-description-context"
+    );
+    if (!contextStore) {
+        throw new Error(
+            "You used a <Description /> component, but it is not inside a relevant parent."
+        );
+    }
+
+    onMount(() => $contextStore.register(id));
+</script>
+
+<p {...$$restProps} {...$contextStore?.props} {id}>
+    <slot />
+</p>

src/lib/components/description/DescriptionProvider.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+    export interface DescriptionContext {
+        name?: string;
+        props?: object;
+        register: (value: string) => void;
+        descriptionIds?: string;
+    }
+</script>
+
+<script lang="ts">
+    import { setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    export let name: string;
+    let descriptionIds = [];
+    let contextStore: Writable<DescriptionContext> = writable({
+        name,
+        register,
+        props: $$restProps,
+    });
+    setContext("headlessui-description-context", contextStore);
+
+    $: contextStore.set({
+        name,
+        props: $$restProps,
+        register,
+        descriptionIds:
+            descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined,
+    });
+
+    function register(value: string) {
+        descriptionIds = [...descriptionIds, value];
+        return () => {
+            descriptionIds = descriptionIds.filter(
+                (descriptionId) => descriptionId !== value
+            );
+        };
+    }
+</script>
+
+<slot describedby={$contextStore.descriptionIds} />

src/lib/components/dialog/Dialog.svelte

@@ -0,0 +1,243 @@
+<script lang="ts" context="module">
+    import {
+        getContext,
+        setContext,
+        createEventDispatcher,
+        tick,
+    } from "svelte";
+    export enum DialogStates {
+        Open,
+        Closed,
+    }
+
+    export interface StateDefinition {
+        dialogState: DialogStates;
+
+        titleId: string | null;
+
+        setTitleId(id: string | null): void;
+
+        close(): void;
+    }
+
+    const DIALOG_CONTEXT_NAME = "DialogContext";
+
+    export function useDialogContext(
+        component: string
+    ): Writable<StateDefinition | undefined> {
+        let context = getContext(DIALOG_CONTEXT_NAME) as
+            | Writable<StateDefinition | undefined>
+            | undefined;
+        if (context === undefined) {
+            throw new Error(
+                `<${component} /> is missing a parent <Dialog /> component.`
+            );
+        }
+        return context;
+    }
+</script>
+
+<script lang="ts">
+    import { State } from "./open-closed";
+    import { writable, Writable } from "svelte/store";
+    import { match } from "./match";
+    import { useId } from "./use-id";
+    import { useInertOthers } from "./use-inert-others";
+    import { contains } from "./dom-containers";
+    import { Keys } from "./keyboard";
+    import FocusTrap from "./FocusTrap.svelte";
+    import StackContextProvider, {
+        StackMessage,
+    } from "./StackContextProvider.svelte";
+    import DescriptionProvider from "./DescriptionProvider.svelte";
+    import ForcePortalRootContext from "./ForcePortalRootContext.svelte";
+    import Portal from "./Portal.svelte";
+    import PortalGroup from "./PortalGroup.svelte";
+    export let open: Boolean | undefined = undefined;
+    export let initialFocus: HTMLElement | null = null;
+
+    const dispatch = createEventDispatcher();
+
+    let containers: Set<HTMLElement> = new Set();
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    $: open =
+        open === undefined && openClosedState !== undefined
+            ? match($openClosedState, {
+                  [State.Open]: true,
+                  [State.Closed]: false,
+              })
+            : open;
+
+    // Validations
+    let hasOpen = open !== undefined || openClosedState !== null;
+
+    if (!hasOpen) {
+        throw new Error(
+            `You forgot to provide an \`open\` prop to the \`Dialog\`.`
+        );
+    }
+
+    if (typeof open !== "boolean") {
+        throw new Error(
+            `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
+        );
+    }
+
+    $: dialogState = open ? DialogStates.Open : DialogStates.Closed;
+    $: visible =
+        openClosedState !== undefined
+            ? $openClosedState === State.Open
+            : dialogState === DialogStates.Open;
+
+    let internalDialogRef: HTMLDivElement | null = null;
+    $: enabled = dialogState === DialogStates.Open;
+
+    const id = `headlessui-dialog-${useId()}`;
+
+    $: _cleanup = (() => {
+        if (_cleanup) {
+            _cleanup();
+        }
+        return useInertOthers(internalDialogRef, enabled);
+    })();
+
+    let titleId: StateDefinition["titleId"] = null;
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext(DIALOG_CONTEXT_NAME, api);
+    $: api.set({
+        titleId,
+        dialogState,
+        setTitleId(id: string | null) {
+            if (titleId === id) return;
+            titleId = id;
+        },
+        close() {
+            dispatch("close", false);
+        },
+    });
+
+    // Handle outside click
+    async function handleWindowMousedown(event: MouseEvent) {
+        let target = event.target as HTMLElement;
+
+        if (dialogState !== DialogStates.Open) return;
+        if (containers.size !== 1) return;
+        if (contains(containers, target)) return;
+
+        $api.close();
+        await tick();
+        target?.focus();
+    }
+
+    // Handle `Escape` to close
+    function handleWindowKeydown(event: KeyboardEvent) {
+        if (event.key !== Keys.Escape) return;
+        if (dialogState !== DialogStates.Open) return;
+        if (containers.size > 1) return; // 1 is myself, otherwise other elements in the Stack
+        event.preventDefault();
+        event.stopPropagation();
+        $api.close();
+    }
+
+    $: _cleanupScrollLock = (() => {
+        if (_cleanupScrollLock) {
+            _cleanupScrollLock();
+        }
+        if (dialogState !== DialogStates.Open) return;
+
+        let overflow = document.documentElement.style.overflow;
+        let paddingRight = document.documentElement.style.paddingRight;
+
+        let scrollbarWidth =
+            window.innerWidth - document.documentElement.clientWidth;
+
+        document.documentElement.style.overflow = "hidden";
+        document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
+
+        return () => {
+            document.documentElement.style.overflow = overflow;
+            document.documentElement.style.paddingRight = paddingRight;
+        };
+    })();
+
+    $: _cleanupClose = () => {
+        if (_cleanupClose) {
+            _cleanupClose();
+        }
+        if (dialogState !== DialogStates.Open) return;
+        let container = internalDialogRef;
+        if (!container) return;
+
+        let observer = new IntersectionObserver((entries) => {
+            for (let entry of entries) {
+                if (
+                    entry.boundingClientRect.x === 0 &&
+                    entry.boundingClientRect.y === 0 &&
+                    entry.boundingClientRect.width === 0 &&
+                    entry.boundingClientRect.height === 0
+                ) {
+                    $api.close();
+                }
+            }
+        });
+
+        observer.observe(container);
+
+        return () => observer.disconnect();
+    };
+
+    function handleClick(event: MouseEvent) {
+        event.stopPropagation();
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "dialog",
+        "aria-modal": dialogState === DialogStates.Open ? true : undefined,
+        "aria-labelledby": titleId,
+    };
+</script>
+
+<svelte:window
+    on:mousedown={handleWindowMousedown}
+    on:keydown={handleWindowKeydown}
+/>
+{#if open}
+    <FocusTrap {containers} {enabled} options={{ initialFocus }} />
+    <StackContextProvider
+        element={internalDialogRef}
+        onUpdate={(message, element) => {
+            return match(message, {
+                [StackMessage.Add]() {
+                    containers.add(element);
+                },
+                [StackMessage.Remove]() {
+                    containers.delete(element);
+                },
+            });
+        }}
+    >
+        <ForcePortalRootContext force={true}>
+            <Portal>
+                <PortalGroup target={internalDialogRef}>
+                    <ForcePortalRootContext force={false}>
+                        <DescriptionProvider
+                            name={"Dialog.Description"}
+                            let:describedby
+                        >
+                            <div
+                                {...{ ...$$restProps, ...propsWeControl }}
+                                aria-describedby={describedby}
+                                on:click={handleClick}
+                            >
+                                <slot {open} />
+                            </div>
+                        </DescriptionProvider>
+                    </ForcePortalRootContext>
+                </PortalGroup>
+            </Portal>
+        </ForcePortalRootContext>
+    </StackContextProvider>
+{/if}

src/lib/components/dialog/DialogOverlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { DialogStates, useDialogContext } from "./Dialog.svelte";
+    import { useId } from "./use-id";
+    let api = useDialogContext("DialogOverlay");
+    let id = `headlessui-dialog-overlay-${useId()}`;
+    function handleClick(event: MouseEvent) {
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        event.stopPropagation();
+        $api.close();
+    }
+    $: propsWeControl = {
+        id,
+        "aria-hidden": true,
+    };
+</script>
+
+<div {...{ ...$$restProps, ...propsWeControl }} on:click={handleClick}>
+    <slot open={$api.dialogState === DialogStates.Open} />
+</div>

src/lib/components/dialog/DialogTitle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { DialogStates, useDialogContext } from "./Dialog.svelte";
+    import { useId } from "./use-id";
+    import { onMount } from "svelte";
+    let api = useDialogContext("DialogTitle");
+    let id = `headlessui-dialog-title-${useId()}`;
+
+    onMount(() => {
+        $api.setTitleId(id);
+        return () => $api.setTitleId(null);
+    });
+    $: propsWeControl = {
+        id,
+    };
+</script>
+
+<h2 {...{ ...$$restProps, ...propsWeControl }}>
+    <slot open={$api.dialogState === DialogStates.Open} />
+</h2>

src/lib/components/disclosure/Disclosure.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" context="module">
+    import { writable, Writable } from "svelte/store";
+    import { getContext, setContext } from "svelte";
+    export enum DisclosureStates {
+        Open,
+        Closed,
+    }
+
+    export interface StateDefinition {
+        // State
+        disclosureState: DisclosureStates;
+        panelStore: Writable<HTMLElement | null>;
+        panelId: string;
+        buttonStore: Writable<HTMLButtonElement | null>;
+        buttonId: string;
+
+        // State mutators
+        toggleDisclosure(): void;
+        closeDisclosure(): void;
+
+        // Exposed functions
+        close(focusableElement: HTMLElement | HTMLElement | null): void;
+    }
+
+    let DISCLOSURE_CONTEXT_NAME = "DisclosureContext";
+
+    export function useDisclosureContext(
+        component: string
+    ): Writable<StateDefinition | undefined> {
+        let context: Writable<StateDefinition | undefined> | undefined =
+            getContext(DISCLOSURE_CONTEXT_NAME);
+
+        if (context === undefined) {
+            throw new Error(
+                `<${component} /> is missing a parent <Disclosure /> component.`
+            );
+        }
+
+        return context;
+    }
+</script>
+
+<script lang="ts">
+    import { useId } from "./use-id";
+    import { match } from "./match";
+    import { State } from "./open-closed";
+    export let defaultOpen = false;
+    let buttonId = `headlessui-disclosure-button-${useId()}`;
+    let panelId = `headlessui-disclosure-panel-${useId()}`;
+
+    let disclosureState: StateDefinition["disclosureState"] = defaultOpen
+        ? DisclosureStates.Open
+        : DisclosureStates.Closed;
+    let panelStore: StateDefinition["panelStore"] = writable(null);
+    let buttonStore: StateDefinition["buttonStore"] = writable(null);
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext(DISCLOSURE_CONTEXT_NAME, api);
+
+    $: api.set({
+        buttonId,
+        panelId,
+        disclosureState,
+        panelStore,
+        buttonStore,
+        toggleDisclosure() {
+            disclosureState = match(disclosureState, {
+                [DisclosureStates.Open]: DisclosureStates.Closed,
+                [DisclosureStates.Closed]: DisclosureStates.Open,
+            });
+        },
+        closeDisclosure() {
+            if (disclosureState === DisclosureStates.Closed) return;
+            disclosureState = DisclosureStates.Closed;
+        },
+        close(focusableElement: HTMLElement | null) {
+            $api.closeDisclosure();
+
+            let restoreElement = (() => {
+                if (!focusableElement) return $buttonStore;
+                if (focusableElement instanceof HTMLElement)
+                    return focusableElement;
+
+                return $buttonStore;
+            })();
+
+            restoreElement?.focus();
+        },
+    });
+
+    let openClosedState: Writable<State> | undefined = writable();
+    setContext("OpenClosed", openClosedState);
+
+    $: $openClosedState = match(disclosureState, {
+        [DisclosureStates.Open]: State.Open,
+        [DisclosureStates.Closed]: State.Closed,
+    });
+</script>
+
+<div {...$$restProps}>
+    <slot
+        open={disclosureState === DisclosureStates.Open}
+        close={$api?.close}
+    />
+</div>

src/lib/components/disclosure/DisclosureButton.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+    import {
+        useDisclosureContext,
+        DisclosureStates,
+    } from "./Disclosure.svelte";
+    import { usePanelContext } from "./DisclosurePanel.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    export let disabled = false;
+    const api = useDisclosureContext("DisclosureButton");
+    const panelContext = usePanelContext();
+    const id = `headlessui-disclosure-button-${useId()}`;
+
+    $: buttonStore = $api?.buttonStore;
+    $: panelStore = $api?.panelStore;
+
+    $: isWithinPanel =
+        panelContext === null ? false : panelContext === $api?.panelId;
+
+    function handleClick() {
+        if (disabled) return;
+
+        if (isWithinPanel) {
+            $api.toggleDisclosure();
+            $buttonStore?.focus();
+        } else {
+            $api.toggleDisclosure();
+        }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (disabled) return;
+
+        if (isWithinPanel) {
+            switch (event.key) {
+                case Keys.Space:
+                case Keys.Enter:
+                    event.preventDefault();
+                    event.stopPropagation();
+                    $api.toggleDisclosure();
+                    $buttonStore?.focus();
+                    break;
+            }
+        } else {
+            switch (event.key) {
+                case Keys.Space:
+                case Keys.Enter:
+                    event.preventDefault();
+                    event.stopPropagation();
+                    $api.toggleDisclosure();
+                    break;
+            }
+        }
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Space:
+                // Required for firefox, event.preventDefault() in handleKeyDown for
+                // the Space key doesn't cancel the handleKeyUp, which in turn
+                // triggers a *click*.
+                event.preventDefault();
+                break;
+        }
+    }
+
+    $: propsWeControl = isWithinPanel
+        ? {}
+        : {
+              id,
+              "aria-expanded": disabled
+                  ? undefined
+                  : $api.disclosureState === DisclosureStates.Open,
+              "aria-controls": $panelStore ? $api?.panelId : undefined,
+              disabled: disabled ? true : undefined,
+          };
+</script>
+
+{#if isWithinPanel}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        on:click={handleClick}
+        on:keydown={handleKeyDown}
+    >
+        <slot
+            open={$api?.disclosureState === DisclosureStates.Open}
+            close={$api?.close}
+        />
+    </button>
+{:else}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$buttonStore}
+        on:click={handleClick}
+        on:keydown={handleKeyDown}
+        on:keyup={handleKeyUp}
+    >
+        <slot
+            open={$api?.disclosureState === DisclosureStates.Open}
+            close={$api?.close}
+        />
+    </button>
+{/if}

src/lib/components/disclosure/DisclosurePanel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+    import { getContext, setContext } from "svelte";
+    let DISCLOSURE_PANEL_CONTEXT_NAME = "DisclosurePanelContext";
+
+    export function usePanelContext(): string | undefined {
+        return getContext(DISCLOSURE_PANEL_CONTEXT_NAME);
+    }
+</script>
+
+<script lang="ts">
+    import {
+        useDisclosureContext,
+        DisclosureStates,
+    } from "./Disclosure.svelte";
+    import { Writable } from "svelte/store";
+    import { State } from "./open-closed";
+    const api = useDisclosureContext("DisclosureButton");
+    $: id = $api?.panelId;
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
+
+    $: panelStore = $api?.panelStore;
+
+    $: visible =
+        $openClosedState !== null
+            ? $openClosedState === State.Open
+            : $api?.disclosureState === DisclosureStates.Open;
+
+    $: propsWeControl = { id };
+</script>
+
+{#if visible}
+    <div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
+        <slot
+            open={$api?.disclosureState === DisclosureStates.Open}
+            close={$api?.close}
+        />
+    </div>
+{/if}

src/lib/components/focus-trap/FocusTrap.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+    import { Keys } from "./keyboard";
+    import {
+        focusElement,
+        focusIn,
+        Focus,
+        FocusResult,
+    } from "./focus-management";
+    import { contains } from "./dom-containers";
+    import { afterUpdate, onMount, onDestroy } from "svelte";
+
+    export let containers: Set<HTMLElement>;
+    export let enabled: boolean = true;
+    export let options: { initialFocus?: HTMLElement | null } = {};
+
+    let restoreElement: HTMLElement | null =
+        typeof window !== "undefined"
+            ? (document.activeElement as HTMLElement)
+            : null;
+
+    let previousActiveElement: HTMLElement | null = null;
+
+    function handleFocus() {
+        if (!enabled) return;
+        if (containers.size !== 1) return;
+        let { initialFocus } = options;
+
+        let activeElement = document.activeElement as HTMLElement;
+
+        if (initialFocus) {
+            if (initialFocus === activeElement) {
+                return; // Initial focus ref is already the active element
+            }
+        } else if (contains(containers, activeElement)) {
+            return; // Already focused within Dialog
+        }
+
+        restoreElement = activeElement;
+
+        // Try to focus the initialFocus ref
+        if (initialFocus) {
+            focusElement(initialFocus);
+        } else {
+            let couldFocus = false;
+            for (let container of containers) {
+                let result = focusIn(container, Focus.First);
+                if (result === FocusResult.Success) {
+                    couldFocus = true;
+                    break;
+                }
+            }
+
+            if (!couldFocus)
+                console.warn(
+                    "There are no focusable elements inside the <FocusTrap />"
+                );
+        }
+
+        previousActiveElement = document.activeElement as HTMLElement;
+    }
+
+    // Restore when `enabled` becomes false
+    function restore() {
+        focusElement(restoreElement);
+        restoreElement = null;
+        previousActiveElement = null;
+    }
+
+    // Handle initial focus
+    onMount(handleFocus);
+
+    afterUpdate(() => (enabled ? handleFocus() : restore()));
+
+    onDestroy(restore);
+
+    // Handle Tab & Shift+Tab keyboard events
+    function handleWindowKeyDown(event: KeyboardEvent) {
+        if (!enabled) return;
+        if (event.key !== Keys.Tab) return;
+        if (!document.activeElement) return;
+        if (containers.size !== 1) return;
+
+        event.preventDefault();
+
+        for (let element of containers) {
+            let result = focusIn(
+                element,
+                (event.shiftKey ? Focus.Previous : Focus.Next) |
+                    Focus.WrapAround
+            );
+
+            if (result === FocusResult.Success) {
+                previousActiveElement = document.activeElement as HTMLElement;
+                break;
+            }
+        }
+    }
+
+    // Prevent programmatically escaping
+    function handleWindowFocus(event: FocusEvent) {
+        if (!enabled) return;
+        if (containers.size !== 1) return;
+
+        let previous = previousActiveElement;
+        if (!previous) return;
+
+        let toElement = event.target as HTMLElement | null;
+
+        if (toElement && toElement instanceof HTMLElement) {
+            if (!contains(containers, toElement)) {
+                event.preventDefault();
+                event.stopPropagation();
+                focusElement(previous);
+            } else {
+                previousActiveElement = toElement;
+                focusElement(toElement);
+            }
+        } else {
+            focusElement(previousActiveElement);
+        }
+    }
+</script>
+
+<svelte:window
+    on:keydown={handleWindowKeyDown}
+    on:focus|capture={handleWindowFocus}
+/>

src/lib/components/label/Label.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { useId } from "./use-id";
+    import { getContext, onMount } from "svelte";
+    import { Writable } from "svelte/store";
+    import { LabelContext } from "./LabelProvider.svelte";
+    const id = `headlessui-label-${useId()}`;
+    export let passive = false;
+    let contextStore: Writable<LabelContext> | undefined = getContext(
+        "headlessui-label-context"
+    );
+    if (!contextStore) {
+        throw new Error(
+            "You used a <Label /> component, but it is not inside a relevant parent."
+        );
+    }
+
+    onMount(() => $contextStore.register(id));
+
+    let allProps = { ...$$restProps, ...$contextStore.props, id };
+    if (passive) delete allProps["onClick"];
+</script>
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label
+    {...allProps}
+    on:blur
+    on:click
+    on:focus
+    on:keyup
+    on:keydown
+    on:keypress
+    on:click={(event) => {
+        if (!passive) allProps["onClick"]?.(event);
+    }}
+>
+    <slot />
+</label>

src/lib/components/label/LabelProvider.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" context="module">
+    export interface LabelContext {
+        name?: string;
+        props?: object;
+        register: (value: string) => void;
+        labelIds?: string;
+    }
+</script>
+
+<script lang="ts">
+    import { setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    export let name: string;
+    let labelIds = [];
+    let contextStore: Writable<LabelContext> = writable({
+        name,
+        register,
+        props: $$restProps,
+    });
+    setContext("headlessui-label-context", contextStore);
+
+    $: contextStore.set({
+        name,
+        props: $$restProps,
+        register,
+        labelIds: labelIds.length > 0 ? labelIds.join(" ") : undefined,
+    });
+
+    function register(value: string) {
+        labelIds = [...labelIds, value];
+        return () => {
+            labelIds = labelIds.filter((labelId) => labelId !== value);
+        };
+    }
+</script>
+
+<slot labelledby={$contextStore.labelIds} />

src/lib/components/listbox/Listbox.svelte

@@ -0,0 +1,191 @@
+<script lang="ts" context="module">
+    export enum ListboxStates {
+        Open,
+        Closed,
+    }
+    export type ListboxOptionDataRef = {
+        textValue: string;
+        disabled: boolean;
+        value: unknown;
+    };
+
+    export type StateDefinition = {
+        // State
+        listboxState: ListboxStates;
+        value: any;
+        orientation: "vertical" | "horizontal";
+
+        labelRef: HTMLLabelElement | null;
+        buttonRef: HTMLButtonElement | null;
+        optionsRef: HTMLDivElement | null;
+
+        disabled: boolean;
+        options: { id: string; dataRef: ListboxOptionDataRef }[];
+        searchQuery: string;
+        activeOptionIndex: number | null;
+
+        // State mutators
+        closeListbox(): void;
+        openListbox(): void;
+        goToOption(focus: Focus, id?: string): void;
+        search(value: string): void;
+        clearSearch(): void;
+        registerOption(id: string, dataRef: ListboxOptionDataRef): void;
+        unregisterOption(id: string): void;
+        select(value: unknown): void;
+    };
+</script>
+
+<script lang="ts">
+    import { Focus, calculateActiveIndex } from "./calculate-active-index";
+    import { createEventDispatcher, setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    import { match } from "./match";
+    import { State, useOpenClosedProvider } from "./open-closed";
+
+    const dispatch = createEventDispatcher();
+
+    let listboxState = ListboxStates.Closed;
+    let labelStore = writable(null);
+    setContext("labelStore", labelStore);
+    $: labelRef = $labelStore;
+    let buttonStore = writable(null);
+    setContext("buttonStore", buttonStore);
+    $: buttonRef = $buttonStore;
+    let optionsStore = writable(null);
+    setContext("optionsStore", optionsStore);
+    $: optionsRef = $optionsStore;
+    let options = [];
+    let searchQuery = "";
+    let activeOptionIndex = null;
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext("api", api);
+
+    let openClosedState = writable(State.Closed);
+    useOpenClosedProvider(openClosedState);
+    $: openClosedState.set(
+        match(listboxState, {
+            [ListboxStates.Open]: State.Open,
+            [ListboxStates.Closed]: State.Closed,
+        })
+    );
+
+    export let disabled = false;
+    export let horizontal = false;
+    export let value: any;
+
+    $: orientation = (horizontal ? "horizontal" : "vertical") as
+        | "horizontal"
+        | "vertical";
+    $: api.set({
+        listboxState,
+        labelRef,
+        value,
+        buttonRef,
+        optionsRef,
+        options,
+        searchQuery,
+        activeOptionIndex,
+        disabled,
+        orientation,
+        closeListbox() {
+            if (disabled) return;
+            if (listboxState === ListboxStates.Closed) return;
+            listboxState = ListboxStates.Closed;
+            activeOptionIndex = null;
+        },
+        openListbox() {
+            if (disabled) return;
+            if (listboxState === ListboxStates.Open) return;
+            listboxState = ListboxStates.Open;
+        },
+        goToOption(focus: Focus, id?: string) {
+            if (disabled) return;
+            if (listboxState === ListboxStates.Closed) return;
+
+            let nextActiveOptionIndex = calculateActiveIndex(
+                focus === Focus.Specific
+                    ? { focus: Focus.Specific, id: id! }
+                    : { focus: focus as Exclude<Focus, Focus.Specific> },
+                {
+                    resolveItems: () => options,
+                    resolveActiveIndex: () => activeOptionIndex,
+                    resolveId: (option) => option.id,
+                    resolveDisabled: (option) => option.disabled,
+                }
+            );
+
+            if (
+                searchQuery === "" &&
+                activeOptionIndex === nextActiveOptionIndex
+            )
+                return;
+            activeOptionIndex = nextActiveOptionIndex;
+            searchQuery = "";
+        },
+        search(value: string) {
+            if (disabled) return;
+            if (listboxState === ListboxStates.Closed) return;
+
+            searchQuery += value.toLowerCase();
+
+            let match = options.findIndex(
+                (option) =>
+                    !option.disabled && option.textValue.startsWith(searchQuery)
+            );
+
+            if (match === -1 || match === activeOptionIndex) return;
+            activeOptionIndex = match;
+        },
+        clearSearch() {
+            if (disabled) return;
+            if (listboxState === ListboxStates.Closed) return;
+            if (searchQuery === "") return;
+
+            searchQuery = "";
+        },
+        registerOption(id: string, dataRef) {
+            options = [...options, { id, dataRef }];
+        },
+        unregisterOption(id: string) {
+            let nextOptions = options.slice();
+            let currentActiveOption =
+                activeOptionIndex !== null
+                    ? nextOptions[activeOptionIndex]
+                    : null;
+            let idx = nextOptions.findIndex((a) => a.id === id);
+            if (idx !== -1) nextOptions.splice(idx, 1);
+            options = nextOptions;
+            activeOptionIndex = (() => {
+                if (idx === activeOptionIndex) return null;
+                if (currentActiveOption === null) return null;
+
+                // If we removed the option before the actual active index, then it would be out of sync. To
+                // fix this, we will find the correct (new) index position.
+                return nextOptions.indexOf(currentActiveOption);
+            })();
+        },
+        select(value: unknown) {
+            if (disabled) return;
+            dispatch("updateValue", { value });
+        },
+    });
+
+    function handleMousedown(event: MouseEvent) {
+        let target = event.target as HTMLElement;
+        let active = document.activeElement;
+
+        if (listboxState !== ListboxStates.Open) return;
+        if (buttonRef?.contains(target)) return;
+
+        if (!optionsRef?.contains(target)) $api.closeListbox();
+        if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
+        if (!event.defaultPrevented) {
+            buttonRef?.focus({ preventScroll: true });
+        }
+    }
+</script>
+
+<svelte:window on:mousedown={handleMousedown} />
+<slot open={listboxState === ListboxStates.Open} />

src/lib/components/listbox/ListboxButton.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { getContext, tick } from "svelte";
+    import { ListboxStates, StateDefinition } from "./Listbox.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { Focus } from "./calculate-active-index";
+    let api: SvelteStore<StateDefinition> = getContext("api");
+    let id = `headlessui-listbox-button-${useId()}`;
+    let buttonStore: SvelteStore<HTMLButtonElement> = getContext("buttonStore");
+
+    async function handleKeyDown(event: KeyboardEvent) {
+        switch (event.key) {
+            // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
+            case Keys.Space:
+            case Keys.Enter:
+            case Keys.ArrowDown:
+                event.preventDefault();
+                $api.openListbox();
+                await tick();
+                $api.optionsRef?.focus({ preventScroll: true });
+                if (!$api.value) $api.goToOption(Focus.First);
+                break;
+
+            case Keys.ArrowUp:
+                event.preventDefault();
+                $api.openListbox();
+                await tick();
+                $api.optionsRef?.focus({ preventScroll: true });
+                if (!$api.value) $api.goToOption(Focus.Last);
+                break;
+        }
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Space:
+                // Required for firefox, event.preventDefault() in handleKeyDown for
+                // the Space key doesn't cancel the handleKeyUp, which in turn
+                // triggers a *click*.
+                event.preventDefault();
+                break;
+        }
+    }
+
+    async function handleClick(event: MouseEvent) {
+        if ($api.disabled) return;
+        if ($api.listboxState === ListboxStates.Open) {
+            $api.closeListbox();
+            await tick();
+            $api.buttonRef?.focus({ preventScroll: true });
+        } else {
+            event.preventDefault();
+            $api.openListbox();
+            await tick();
+            $api.optionsRef?.focus({ preventScroll: true });
+        }
+    }
+
+    $: propsWeControl = {
+        id,
+        "aria-haspopup": true,
+        "aria-controls": $api?.optionsRef?.id,
+        "aria-expanded": $api?.disabled
+            ? undefined
+            : $api?.listboxState === ListboxStates.Open,
+        "aria-labelledby": $api?.labelRef
+            ? [$api?.labelRef?.id, id].join(" ")
+            : undefined,
+        disabled: $api?.disabled === true ? true : undefined,
+    };
+</script>
+
+<button
+    {...$$restProps}
+    {...propsWeControl}
+    bind:this={$buttonStore}
+    on:click={handleClick}
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+>
+    <slot
+        open={$api.listboxState === ListboxStates.Open}
+        disabled={$api.disabled}
+    />
+</button>

src/lib/components/listbox/ListboxLabel.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { getContext } from "svelte";
+    import { ListboxStates, StateDefinition } from "./Listbox.svelte";
+    import { useId } from "./use-id";
+    let api: SvelteStore<StateDefinition> = getContext("api");
+    let id = `headlessui-listbox-label-${useId()}`;
+    let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
+
+    function handleClick() {
+        $api.buttonRef?.focus({ preventScroll: true });
+    }
+</script>
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label {...$$restProps} {id} bind:this={$labelStore} on:click={handleClick}>
+    <slot
+        open={$api.listboxState === ListboxStates.Open}
+        disabled={$api.disabled}
+    />
+</label>

src/lib/components/listbox/ListboxOption.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { getContext, onDestroy, onMount, tick } from "svelte";
+    import { ListboxStates, StateDefinition } from "./Listbox.svelte";
+    import { useId } from "./use-id";
+    import { Focus } from "./calculate-active-index";
+    export let value: any;
+    export let disabled = false;
+    let api: SvelteStore<StateDefinition> = getContext("api");
+    let id = `headlessui-listbox-option-${useId()}`;
+
+    $: active =
+        $api?.activeOptionIndex !== null
+            ? $api?.options[$api.activeOptionIndex].id === id
+            : false;
+
+    $: selected = $api?.value === value;
+    $: dataRef = {
+        disabled,
+        value,
+        textValue: "",
+    };
+
+    onMount(() => {
+        let textValue = document
+            .getElementById(id)
+            ?.textContent?.toLowerCase()
+            .trim();
+        if (textValue !== undefined) dataRef.textValue = textValue;
+    });
+
+    onMount(() => $api.registerOption(id, dataRef));
+    onDestroy(() => $api.unregisterOption(id));
+
+    let oldState = $api?.listboxState;
+    let oldSelected = selected;
+    let oldActive = active;
+    async function updateFocus(
+        newState: ListboxStates,
+        newSelected: boolean,
+        newActive: boolean
+    ) {
+        // Wait for a tick since we need to ensure registerOption has been applied
+        await tick();
+        if (newState !== oldState || newSelected !== oldSelected) {
+            if (newState === ListboxStates.Open && newSelected) {
+                $api?.goToOption(Focus.Specific, id);
+            }
+        }
+        if (newState !== oldState || newActive !== oldActive) {
+            if (newState === ListboxStates.Open && newActive) {
+                document
+                    .getElementById(id)
+                    ?.scrollIntoView?.({ block: "nearest" });
+            }
+        }
+        oldState = newState;
+        oldSelected = newSelected;
+        oldActive = newActive;
+    }
+    $: updateFocus($api?.listboxState, selected, active);
+
+    async function handleClick(event: MouseEvent) {
+        if (disabled) return event.preventDefault();
+        $api.select(value);
+        $api.closeListbox();
+        await tick();
+        $api.buttonRef?.focus({ preventScroll: true });
+    }
+
+    function handleFocus() {
+        if (disabled) return $api.goToOption(Focus.Nothing);
+        $api.goToOption(Focus.Specific, id);
+    }
+
+    function handleMove() {
+        if (disabled) return;
+        if (active) return;
+        $api.goToOption(Focus.Specific, id);
+    }
+
+    function handleLeave() {
+        if (disabled) return;
+        if (!active) return;
+        $api.goToOption(Focus.Nothing);
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "option",
+        tabIndex: disabled === true ? undefined : -1,
+        "aria-disabled": disabled === true ? true : undefined,
+        "aria-selected": selected === true ? selected : undefined,
+    };
+
+    $: classStyle = $$props.class
+        ? typeof $$props.class === "function"
+            ? $$props.class({ active, selected, disabled })
+            : $$props.class
+        : "";
+</script>
+
+<li
+    {...$$restProps}
+    class={classStyle}
+    {...propsWeControl}
+    on:click={handleClick}
+    on:focus={handleFocus}
+    on:pointermove={handleMove}
+    on:mousemove={handleMove}
+    on:pointerleave={handleLeave}
+    on:mouseleave={handleLeave}
+>
+    <slot {active} {selected} {disabled} />
+</li>

src/lib/components/listbox/ListboxOptions.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { getContext, tick } from "svelte";
+    import { ListboxStates, StateDefinition } from "./Listbox.svelte";
+    import { useId } from "./use-id";
+    import { match } from "./match";
+    import { Keys } from "./keyboard";
+    import { Focus } from "./calculate-active-index";
+    import { State, useOpenClosed } from "./open-closed";
+    let api: SvelteStore<StateDefinition> = getContext("api");
+    let id = `headlessui-listbox-options-${useId()}`;
+    let optionsStore: SvelteStore<HTMLUListElement> =
+        getContext("optionsStore");
+
+    let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+    async function handleKeyDown(event: KeyboardEvent) {
+        if (searchDebounce) clearTimeout(searchDebounce);
+
+        switch (event.key) {
+            // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
+
+            case Keys.Space:
+                if ($api.searchQuery !== "") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return $api.search(event.key);
+                }
+            // When in type ahead mode, fallthrough
+            case Keys.Enter:
+                event.preventDefault();
+                event.stopPropagation();
+                if ($api.activeOptionIndex !== null) {
+                    let { dataRef } = $api.options[$api.activeOptionIndex];
+                    $api.select(dataRef.value);
+                }
+                $api.closeListbox();
+                await tick();
+                $api.buttonRef?.focus({ preventScroll: true });
+                break;
+
+            case match($api.orientation, {
+                vertical: Keys.ArrowDown,
+                horizontal: Keys.ArrowRight,
+            }):
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToOption(Focus.Next);
+
+            case match($api.orientation, {
+                vertical: Keys.ArrowUp,
+                horizontal: Keys.ArrowLeft,
+            }):
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToOption(Focus.Previous);
+
+            case Keys.Home:
+            case Keys.PageUp:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToOption(Focus.First);
+
+            case Keys.End:
+            case Keys.PageDown:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToOption(Focus.Last);
+
+            case Keys.Escape:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.closeListbox();
+                await tick();
+                $api.buttonRef?.focus({ preventScroll: true });
+                break;
+
+            case Keys.Tab:
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+
+            default:
+                if (event.key.length === 1) {
+                    $api.search(event.key);
+                    searchDebounce = setTimeout(() => $api.clearSearch(), 350);
+                }
+                break;
+        }
+    }
+
+    $: propsWeControl = {
+        "aria-activedescendant":
+            $api?.activeOptionIndex === null
+                ? undefined
+                : $api?.options[$api.activeOptionIndex]?.id,
+        "aria-labelledby": $api?.labelRef?.id ?? $api?.buttonRef?.id,
+        "aria-orientation": $api?.orientation,
+        id,
+        role: "listbox",
+        tabIndex: 0,
+    };
+
+    let usesOpenClosedState = useOpenClosed();
+    $: visible =
+        usesOpenClosedState !== undefined
+            ? $usesOpenClosedState === State.Open
+            : $api.listboxState === ListboxStates.Open;
+</script>
+
+{#if visible}
+    <ul
+        bind:this={$optionsStore}
+        on:keydown={handleKeyDown}
+        {...$$restProps}
+        {...propsWeControl}
+    >
+        <slot open={$api?.listboxState === ListboxStates.Open} />
+    </ul>
+{/if}

src/lib/components/menu/Menu.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" context="module">
+    import { Focus, calculateActiveIndex } from "./calculate-active-index";
+    import { getContext, setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    import { State } from "./open-closed";
+    import { match } from "./match";
+    export enum MenuStates {
+        Open,
+        Closed,
+    }
+    export type MenuItemData = { textValue: string; disabled: boolean };
+    export type StateDefinition = {
+        // State
+        menuState: MenuStates;
+        buttonStore: Writable<HTMLButtonElement | null>;
+        itemsStore: Writable<HTMLDivElement | null>;
+        items: { id: string; data: MenuItemData }[];
+        searchQuery: string;
+        activeItemIndex: number | null;
+
+        // State mutators
+        closeMenu(): void;
+        openMenu(): void;
+        goToItem(focus: Focus, id?: string): void;
+        search(value: string): void;
+        clearSearch(): void;
+        registerItem(id: string, dataRef: MenuItemData): void;
+        unregisterItem(id: string): void;
+    };
+
+    const MENU_CONTEXT_NAME = "MenuContext";
+
+    export function useMenuContext(
+        componentName: string
+    ): Writable<StateDefinition | undefined> {
+        let context: Writable<StateDefinition | undefined> | undefined =
+            getContext(MENU_CONTEXT_NAME);
+
+        if (context === undefined) {
+            throw new Error(
+                `<${componentName} /> is missing a parent <Menu /> component.`
+            );
+        }
+        return context;
+    }
+</script>
+
+<script lang="ts">
+    let menuState: StateDefinition["menuState"] = MenuStates.Closed;
+    let buttonStore: StateDefinition["buttonStore"] = writable(null);
+    let itemsStore: StateDefinition["itemsStore"] = writable(null);
+    let items: StateDefinition["items"] = [];
+    let searchQuery: StateDefinition["searchQuery"] = "";
+    let activeItemIndex: StateDefinition["activeItemIndex"] = null;
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext(MENU_CONTEXT_NAME, api);
+
+    $: api.set({
+        menuState,
+        buttonStore,
+        itemsStore: itemsStore,
+        items,
+        searchQuery,
+        activeItemIndex,
+        closeMenu: () => {
+            menuState = MenuStates.Closed;
+            activeItemIndex = null;
+        },
+        openMenu: () => (menuState = MenuStates.Open),
+        goToItem(focus: Focus, id?: string) {
+            let nextActiveItemIndex = calculateActiveIndex(
+                focus === Focus.Specific
+                    ? { focus: Focus.Specific, id: id! }
+                    : { focus: focus as Exclude<Focus, Focus.Specific> },
+                {
+                    resolveItems: () => items,
+                    resolveActiveIndex: () => activeItemIndex,
+                    resolveId: (item) => item.id,
+                    resolveDisabled: (item) => item.data.disabled,
+                }
+            );
+
+            if (searchQuery === "" && activeItemIndex === nextActiveItemIndex)
+                return;
+            searchQuery = "";
+            activeItemIndex = nextActiveItemIndex;
+        },
+        search(value: string) {
+            searchQuery += value.toLowerCase();
+
+            let match = items.findIndex(
+                (item) =>
+                    item.data.textValue.startsWith(searchQuery) &&
+                    !item.data.disabled
+            );
+
+            if (match === -1 || match === activeItemIndex) return;
+
+            activeItemIndex = match;
+        },
+        clearSearch() {
+            searchQuery = "";
+        },
+        registerItem(id: string, data: MenuItemData) {
+            items.push({ id, data });
+        },
+        unregisterItem(id: string) {
+            let nextItems = items.slice();
+            let currentActiveItem =
+                activeItemIndex !== null ? nextItems[activeItemIndex] : null;
+            let idx = nextItems.findIndex((a) => a.id === id);
+            if (idx !== -1) nextItems.splice(idx, 1);
+            items = nextItems;
+            activeItemIndex = (() => {
+                if (idx === activeItemIndex) return null;
+                if (currentActiveItem === null) return null;
+
+                // If we removed the item before the actual active index, then it would be out of sync. To
+                // fix this, we will find the correct (new) index position.
+                return nextItems.indexOf(currentActiveItem);
+            })();
+        },
+    });
+
+    function handleWindowMousedown(event: MouseEvent): void {
+        let target = event.target as HTMLElement;
+        let active = document.activeElement;
+
+        if (menuState !== MenuStates.Open) return;
+        if ($buttonStore?.contains(target)) return;
+
+        if (!$itemsStore?.contains(target)) $api.closeMenu();
+        if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
+        if (!event.defaultPrevented)
+            $buttonStore?.focus({ preventScroll: true });
+    }
+
+    let openClosedState: Writable<State> | undefined = writable();
+    setContext("OpenClosed", openClosedState);
+
+    $: $openClosedState = match(menuState, {
+        [MenuStates.Open]: State.Open,
+        [MenuStates.Closed]: State.Closed,
+    });
+</script>
+
+<svelte:window on:mousedown={handleWindowMousedown} />
+<div {...$$restProps}>
+    <slot />
+</div>

src/lib/components/menu/MenuButton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { useMenuContext, MenuStates } from "./Menu.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { Focus } from "./calculate-active-index";
+    import { tick } from "svelte";
+    export let disabled = false;
+    const api = useMenuContext("MenuButton");
+    const id = `headlessui-menu-button-${useId()}`;
+
+    $: buttonStore = $api?.buttonStore;
+    $: itemsStore = $api?.itemsStore;
+    async function handleKeyDown(event: KeyboardEvent) {
+        switch (event.key) {
+            // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
+
+            case Keys.Space:
+            case Keys.Enter:
+            case Keys.ArrowDown:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.openMenu();
+                await tick();
+                $itemsStore?.focus({ preventScroll: true });
+                $api.goToItem(Focus.First);
+                break;
+
+            case Keys.ArrowUp:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.openMenu();
+                await tick();
+                $itemsStore?.focus({ preventScroll: true });
+                $api.goToItem(Focus.Last);
+                break;
+        }
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Space:
+                // Required for firefox, event.preventDefault() in handleKeyDown for
+                // the Space key doesn't cancel the handleKeyUp, which in turn
+                // triggers a *click*.
+                event.preventDefault();
+                break;
+        }
+    }
+
+    async function handleClick(event: MouseEvent) {
+        if (disabled) return;
+        if ($api.menuState === MenuStates.Open) {
+            $api.closeMenu();
+            await tick();
+            $buttonStore?.focus({ preventScroll: true });
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+            $api.openMenu();
+            await tick();
+            $itemsStore?.focus({ preventScroll: true });
+        }
+    }
+
+    $: propsWeControl = {
+        id,
+        "aria-haspopup": true,
+        "aria-controls": $itemsStore?.id,
+        "aria-expanded": disabled
+            ? undefined
+            : $api.menuState === MenuStates.Open,
+    };
+</script>
+
+<button
+    {...{ ...$$restProps, ...propsWeControl }}
+    bind:this={$buttonStore}
+    on:click={handleClick}
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+>
+    <slot open={$api?.menuState === MenuStates.Open} />
+</button>

src/lib/components/menu/MenuItem.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { useMenuContext, MenuStates, MenuItemData } from "./Menu.svelte";
+    import { useId } from "./use-id";
+    import { Focus } from "./calculate-active-index";
+    import { afterUpdate, onDestroy, onMount, tick } from "svelte";
+    export let disabled = false;
+    const api = useMenuContext("MenuItem");
+    const id = `headlessui-menu-item-${useId()}`;
+
+    $: active =
+        $api?.activeItemIndex !== null
+            ? $api?.items[$api?.activeItemIndex].id === id
+            : false;
+
+    $: buttonStore = $api?.buttonStore;
+
+    let elementRef: HTMLDivElement | undefined;
+    $: textValue = elementRef?.textContent?.toLowerCase().trim();
+    $: data = { disabled, textValue } as MenuItemData;
+
+    onMount(async () => {
+        await tick();
+        $api?.registerItem(id, data);
+    });
+
+    onDestroy(() => {
+        $api.unregisterItem(id);
+    });
+
+    afterUpdate(async () => {
+        if ($api.menuState !== MenuStates.Open) return;
+        if (!active) return;
+        await tick();
+        elementRef?.scrollIntoView?.({ block: "nearest" });
+    });
+
+    async function handleClick(event: MouseEvent) {
+        if (disabled) return event.preventDefault();
+        $api.closeMenu();
+        $buttonStore?.focus({ preventScroll: true });
+    }
+
+    function handleFocus() {
+        if (disabled) return $api.goToItem(Focus.Nothing);
+        $api.goToItem(Focus.Specific, id);
+    }
+
+    function handleMove() {
+        if (disabled) return;
+        if (active) return;
+        $api.goToItem(Focus.Specific, id);
+    }
+
+    function handleLeave() {
+        if (disabled) return;
+        if (!active) return;
+        $api.goToItem(Focus.Nothing);
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "menuitem",
+        tabIndex: disabled === true ? undefined : -1,
+        "aria-disabled": disabled === true ? true : undefined,
+    };
+</script>
+
+<div
+    {...{ ...$$restProps, ...propsWeControl }}
+    bind:this={elementRef}
+    on:click={handleClick}
+    on:focus={handleFocus}
+    on:pointermove={handleMove}
+    on:mousemove={handleMove}
+    on:pointerleave={handleLeave}
+    on:mouseleave={handleLeave}
+>
+    <slot {active} {disabled} />
+</div>

src/lib/components/menu/MenuItems.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { useMenuContext, MenuStates } from "./Menu.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { Focus } from "./calculate-active-index";
+    import { treeWalker } from "./tree-walker";
+    import { State } from "./open-closed";
+    import { getContext, tick } from "svelte";
+    import { Writable } from "svelte/store";
+    const api = useMenuContext("MenuButton");
+    const id = `headlessui-menu-items-${useId()}`;
+    let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+
+    $: buttonStore = $api?.buttonStore;
+    $: itemsStore = $api?.itemsStore;
+
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    $: visible =
+        openClosedState !== undefined
+            ? $openClosedState === State.Open
+            : $api.menuState === MenuStates.Open;
+
+    $: treeWalker({
+        container: $itemsStore,
+        enabled: $api?.menuState === MenuStates.Open,
+        accept(node) {
+            if (node.getAttribute("role") === "menuitem")
+                return NodeFilter.FILTER_REJECT;
+            if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
+            return NodeFilter.FILTER_ACCEPT;
+        },
+        walk(node) {
+            node.setAttribute("role", "none");
+        },
+    });
+
+    async function handleKeyDown(event: KeyboardEvent) {
+        if (searchDebounce) clearTimeout(searchDebounce);
+
+        switch (event.key) {
+            // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
+
+            case Keys.Space:
+                if ($api.searchQuery !== "") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return $api.search(event.key);
+                }
+            // When in type ahead mode, fallthrough
+            case Keys.Enter:
+                event.preventDefault();
+                event.stopPropagation();
+                if ($api.activeItemIndex !== null) {
+                    let { id } = $api.items[$api.activeItemIndex];
+                    document.getElementById(id)?.click();
+                }
+                $api.closeMenu();
+                await tick();
+                $buttonStore?.focus({ preventScroll: true });
+                break;
+
+            case Keys.ArrowDown:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToItem(Focus.Next);
+
+            case Keys.ArrowUp:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToItem(Focus.Previous);
+
+            case Keys.Home:
+            case Keys.PageUp:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToItem(Focus.First);
+
+            case Keys.End:
+            case Keys.PageDown:
+                event.preventDefault();
+                event.stopPropagation();
+                return $api.goToItem(Focus.Last);
+
+            case Keys.Escape:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.closeMenu();
+                await tick();
+                $buttonStore?.focus({ preventScroll: true });
+                break;
+
+            case Keys.Tab:
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+
+            default:
+                if (event.key.length === 1) {
+                    $api.search(event.key);
+                    searchDebounce = setTimeout(() => $api.clearSearch(), 350);
+                }
+                break;
+        }
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Space:
+                // Required for firefox, event.preventDefault() in handleKeyDown for
+                // the Space key doesn't cancel the handleKeyUp, which in turn
+                // triggers a *click*.
+                event.preventDefault();
+                break;
+        }
+    }
+
+    $: propsWeControl = {
+        "aria-activedescendant":
+            $api.activeItemIndex === null
+                ? undefined
+                : $api.items[$api.activeItemIndex]?.id,
+        "aria-labelledby": $buttonStore?.id,
+        id,
+        role: "menu",
+        tabIndex: 0,
+    };
+</script>
+
+{#if visible}
+    <div
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$itemsStore}
+        on:keydown={handleKeyDown}
+        on:keyup={handleKeyUp}
+    >
+        <slot open={$api.menuState === MenuStates.Open} />
+    </div>
+{/if}

src/lib/components/popover/Popover.svelte

@@ -0,0 +1,145 @@
+<script lang="ts" context="module">
+    export enum PopoverStates {
+        Open,
+        Closed,
+    }
+    export interface StateDefinition {
+        // State
+        popoverState: PopoverStates;
+        button: HTMLElement | null;
+        buttonId: string;
+        panel: HTMLElement | null;
+        panelId: string;
+
+        // State mutators
+        togglePopover(): void;
+        closePopover(): void;
+
+        // Exposed functions
+        close(focusableElement: HTMLElement | null): void;
+    }
+
+    export interface PopoverRegisterBag {
+        buttonId: string;
+        panelId: string;
+        close(): void;
+    }
+</script>
+
+<script lang="ts">
+    import { match } from "./match";
+    import { useId } from "./use-id";
+    import { isFocusableElement, FocusableMode } from "./focus-management";
+    import { State } from "./open-closed";
+    import type { PopoverGroupContext } from "./PopoverGroup.svelte";
+    import { getContext, setContext, onMount } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    const buttonId = `headlessui-popover-button-${useId()}`;
+    const panelId = `headlessui-popover-panel-${useId()}`;
+
+    let popoverState: PopoverStates = PopoverStates.Closed;
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext("PopoverApi", api);
+
+    let openClosedState: Writable<State> | undefined = writable();
+    setContext("OpenClosed", openClosedState);
+
+    $: $openClosedState = match(popoverState, {
+        [PopoverStates.Open]: State.Open,
+        [PopoverStates.Closed]: State.Closed,
+    });
+
+    let panelStore = writable(null);
+    setContext("PopoverPanelRef", panelStore);
+    $: panel = $panelStore;
+
+    let buttonStore = writable(null);
+    setContext("PopoverButtonRef", buttonStore);
+    $: button = $buttonStore;
+
+    $: api.set({
+        popoverState,
+        buttonId,
+        panelId,
+        panel,
+        button,
+        togglePopover() {
+            popoverState = match(popoverState, {
+                [PopoverStates.Open]: PopoverStates.Closed,
+                [PopoverStates.Closed]: PopoverStates.Open,
+            });
+        },
+        closePopover() {
+            if (popoverState === PopoverStates.Closed) return;
+            popoverState = PopoverStates.Closed;
+        },
+        close(focusableElement: HTMLElement | null) {
+            $api.closePopover();
+
+            let restoreElement = (() => {
+                if (!focusableElement) return $api.button;
+                if (focusableElement instanceof HTMLElement)
+                    return focusableElement;
+
+                return $api.button;
+            })();
+
+            restoreElement?.focus();
+        },
+    });
+
+    const registerBag = {
+        buttonId,
+        panelId,
+        close() {
+            $api.closePopover();
+        },
+    };
+
+    const groupContext: PopoverGroupContext | undefined =
+        getContext("PopoverGroup");
+    const registerPopover = groupContext?.registerPopover;
+
+    function isFocusWithinPopoverGroup() {
+        return (
+            groupContext?.isFocusWithinPopoverGroup() ??
+            (button?.contains(document.activeElement) ||
+                panel?.contains(document.activeElement))
+        );
+    }
+
+    onMount(() => registerPopover?.(registerBag));
+
+    // Handle focus out
+    function handleFocus() {
+        if (popoverState !== PopoverStates.Open) return;
+        if (isFocusWithinPopoverGroup()) return;
+        if (!button) return;
+        if (!panel) return;
+
+        $api.closePopover();
+    }
+
+    // Handle outside click
+    function handleMousedown(event: MouseEvent) {
+        let target = event.target as HTMLElement;
+
+        if (popoverState !== PopoverStates.Open) return;
+
+        if (button?.contains(target)) return;
+        if (panel?.contains(target)) return;
+
+        $api.closePopover();
+
+        if (!isFocusableElement(target, FocusableMode.Loose)) {
+            event.preventDefault();
+            button?.focus();
+        }
+    }
+</script>
+
+<svelte:window on:focus|capture={handleFocus} on:mousedown={handleMousedown} />
+<div {...$$restProps}>
+    <slot open={popoverState === PopoverStates.Open} close={$api.close} />
+</div>

src/lib/components/popover/PopoverButton.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+    import { Keys } from "./keyboard";
+    import { getFocusableElements, Focus, focusIn } from "./focus-management";
+    import { getContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    import { PopoverStates, StateDefinition } from "./Popover.svelte";
+    import type { PopoverGroupContext } from "./PopoverGroup.svelte";
+    import type { PopoverPanelContext } from "./PopoverPanel.svelte";
+    let buttonStore: Writable<HTMLButtonElement> =
+        getContext("PopoverButtonRef");
+    export let disabled: Boolean = false;
+    let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
+
+    const groupContext: PopoverGroupContext | undefined =
+        getContext("PopoverGroup");
+    const closeOthers = groupContext?.closeOthers;
+
+    let panelContext: PopoverPanelContext | undefined =
+        getContext("PopoverPanel");
+    let isWithinPanel =
+        panelContext === null ? false : panelContext === $api.panelId;
+    if (isWithinPanel) {
+        buttonStore = writable();
+    }
+
+    // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
+    let activeElementRef: Element | null = null;
+    let previousActiveElementRef: Element | null =
+        typeof window === "undefined" ? null : document.activeElement;
+
+    function handleFocus() {
+        previousActiveElementRef = activeElementRef;
+        activeElementRef = document.activeElement;
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (isWithinPanel) {
+            if ($api.popoverState === PopoverStates.Closed) return;
+            switch (event.key) {
+                case Keys.Space:
+                case Keys.Enter:
+                    event.preventDefault(); // Prevent triggering a *click* event
+                    event.stopPropagation();
+                    $api.closePopover();
+                    $api.button?.focus(); // Re-focus the original opening Button
+                    break;
+            }
+        } else {
+            switch (event.key) {
+                case Keys.Space:
+                case Keys.Enter:
+                    event.preventDefault(); // Prevent triggering a *click* event
+                    event.stopPropagation();
+                    if ($api.popoverState === PopoverStates.Closed)
+                        closeOthers?.($api.buttonId);
+                    $api.togglePopover();
+                    break;
+
+                case Keys.Escape:
+                    if ($api.popoverState !== PopoverStates.Open)
+                        return closeOthers?.($api.buttonId);
+                    if (!$api.button) return;
+                    if (!$api.button?.contains(document.activeElement)) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    $api.closePopover();
+                    break;
+
+                case Keys.Tab:
+                    if ($api.popoverState !== PopoverStates.Open) return;
+                    if (!$api.panel) return;
+                    if (!$api.button) return;
+
+                    // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
+                    if (event.shiftKey) {
+                        // Check if the last focused element exists, and check that it is not inside button or panel itself
+                        if (!previousActiveElementRef) return;
+                        if ($api.button?.contains(previousActiveElementRef))
+                            return;
+                        if ($api.panel?.contains(previousActiveElementRef))
+                            return;
+
+                        // Check if the last focused element is *after* the button in the DOM
+                        let focusableElements = getFocusableElements();
+                        let previousIdx = focusableElements.indexOf(
+                            previousActiveElementRef as HTMLElement
+                        );
+                        let buttonIdx = focusableElements.indexOf($api.button!);
+                        if (buttonIdx > previousIdx) return;
+
+                        event.preventDefault();
+                        event.stopPropagation();
+
+                        focusIn($api.panel!, Focus.Last);
+                    } else {
+                        event.preventDefault();
+                        event.stopPropagation();
+
+                        focusIn($api.panel!, Focus.First);
+                    }
+
+                    break;
+            }
+        }
+    }
+    function handleKeyUp(event: KeyboardEvent) {
+        if (isWithinPanel) return;
+        if (event.key === Keys.Space) {
+            // Required for firefox, event.preventDefault() in handleKeyDown for
+            // the Space key doesn't cancel the handleKeyUp, which in turn
+            // triggers a *click*.
+            event.preventDefault();
+        }
+        if ($api.popoverState !== PopoverStates.Open) return;
+        if (!$api.panel) return;
+        if (!$api.button) return;
+
+        // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
+        switch (event.key) {
+            case Keys.Tab:
+                // Check if the last focused element exists, and check that it is not inside button or panel itself
+                if (!previousActiveElementRef) return;
+                if ($api.button?.contains(previousActiveElementRef)) return;
+                if ($api.panel?.contains(previousActiveElementRef)) return;
+
+                // Check if the last focused element is *after* the button in the DOM
+                let focusableElements = getFocusableElements();
+                let previousIdx = focusableElements.indexOf(
+                    previousActiveElementRef as HTMLElement
+                );
+                let buttonIdx = focusableElements.indexOf($api.button!);
+                if (buttonIdx > previousIdx) return;
+
+                event.preventDefault();
+                event.stopPropagation();
+                focusIn($api.panel!, Focus.Last);
+                break;
+        }
+    }
+    function handleClick() {
+        if (disabled) return;
+        if (isWithinPanel) {
+            $api.closePopover();
+            $api.button?.focus(); // Re-focus the original opening Button
+        } else {
+            if ($api.popoverState === PopoverStates.Closed)
+                closeOthers?.($api.buttonId);
+            $api.button?.focus();
+            $api.togglePopover();
+        }
+    }
+
+    $: propsWeControl = isWithinPanel
+        ? {}
+        : {
+              id: $api.buttonId,
+              "aria-expanded": disabled
+                  ? undefined
+                  : $api.popoverState === PopoverStates.Open,
+              "aria-controls": $api.panel ? $api.panelId : undefined,
+              disabled: disabled ? true : undefined,
+          };
+</script>
+
+<svelte:window on:focus|capture={handleFocus} />
+
+<button
+    {...$$restProps}
+    {...propsWeControl}
+    on:click={handleClick}
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+    bind:this={$buttonStore}
+>
+    <slot open={$api.popoverState === PopoverStates.Open} />
+</button>

src/lib/components/popover/PopoverGroup.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" context="module">
+    export interface PopoverGroupContext {
+        registerPopover(registerbag: PopoverRegisterBag): void;
+        unregisterPopover(registerbag: PopoverRegisterBag): void;
+        isFocusWithinPopoverGroup(): boolean;
+        closeOthers(buttonId: string): void;
+    }
+</script>
+
+<script lang="ts">
+    import { PopoverRegisterBag } from "./Popover.svelte";
+    import { setContext } from "svelte";
+    let groupRef: HTMLDivElement | undefined;
+    let popovers: PopoverRegisterBag[] = [];
+
+    function unregisterPopover(registerBag: PopoverRegisterBag) {
+        popovers = popovers.filter((bag) => bag != registerBag);
+    }
+
+    function registerPopover(registerBag: PopoverRegisterBag) {
+        popovers = [...popovers, registerBag];
+        return () => {
+            unregisterPopover(registerBag);
+        };
+    }
+
+    function isFocusWithinPopoverGroup() {
+        let element = document.activeElement as HTMLElement;
+
+        if (groupRef?.contains(element)) return true;
+
+        // Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
+        return popovers.some((bag) => {
+            return (
+                document.getElementById(bag.buttonId)?.contains(element) ||
+                document.getElementById(bag.panelId)?.contains(element)
+            );
+        });
+    }
+
+    function closeOthers(buttonId: string) {
+        for (let popover of popovers) {
+            if (popover.buttonId !== buttonId) popover.close();
+        }
+    }
+
+    setContext("PopoverGroup", {
+        unregisterPopover,
+        registerPopover,
+        isFocusWithinPopoverGroup,
+        closeOthers,
+    });
+</script>
+
+<div {...$$restProps} bind:this={groupRef}>
+    <slot />
+</div>

src/lib/components/popover/PopoverOverlay.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { State } from "./open-closed";
+    import { getContext } from "svelte";
+    import type { Writable } from "svelte/store";
+    import { PopoverStates, StateDefinition } from "./Popover.svelte";
+
+    let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
+
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    $: visible =
+        openClosedState !== undefined
+            ? $openClosedState === State.Open
+            : $api.popoverState === PopoverStates.Open;
+
+    function handleClick() {
+        $api.closePopover();
+    }
+</script>
+
+{#if visible}
+    <div {...$$restProps} on:click={handleClick} aria-hidden>
+        <slot open={$api.popoverState === PopoverStates.Open} />
+    </div>
+{/if}

src/lib/components/popover/PopoverPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" context="module">
+    export type PopoverPanelContext = string | null;
+</script>
+
+<script lang="ts">
+    import { Keys } from "./keyboard";
+    import { State } from "./open-closed";
+    import {
+        getFocusableElements,
+        Focus,
+        FocusResult,
+        focusIn,
+    } from "./focus-management";
+    import { getContext, setContext, onMount } from "svelte";
+    import type { Writable } from "svelte/store";
+    import { PopoverStates, StateDefinition } from "./Popover.svelte";
+    let panelStore: SvelteStore<HTMLDivElement> = getContext("PopoverPanelRef");
+    export let focus = false;
+
+    let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
+    setContext("PopoverPanelContext", $api.panelId);
+
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    $: visible =
+        openClosedState !== undefined
+            ? $openClosedState === State.Open
+            : $api.popoverState === PopoverStates.Open;
+
+    onMount(() => {
+        if (!focus) return;
+        if ($api.popoverState !== PopoverStates.Open) return;
+        if (!$api.panel) return;
+
+        let activeElement = document.activeElement as HTMLElement;
+        if ($api.panel?.contains(activeElement)) return; // Already focused within Dialog
+
+        focusIn($api.panel!, Focus.First);
+    });
+
+    function handleWindowKeydown(event: KeyboardEvent) {
+        if ($api.popoverState !== PopoverStates.Open) return;
+        if (!$api.panel) return;
+
+        if (event.key !== Keys.Tab) return;
+        if (!document.activeElement) return;
+        if (!$api.panel?.contains(document.activeElement)) return;
+
+        // We will take-over the default tab behaviour so that we have a bit
+        // control over what is focused next. It will behave exactly the same,
+        // but it will also "fix" some issues based on whether you are using a
+        // Portal or not.
+        event.preventDefault();
+
+        let result = focusIn(
+            $api.panel!,
+            event.shiftKey ? Focus.Previous : Focus.Next
+        );
+
+        if (result === FocusResult.Underflow) {
+            return $api.button?.focus();
+        } else if (result === FocusResult.Overflow) {
+            if (!$api.button) return;
+
+            let elements = getFocusableElements();
+            let buttonIdx = elements.indexOf($api.button!);
+
+            let nextElements = elements
+                .splice(buttonIdx + 1) // Elements after button
+                .filter((element) => !$api.panel?.contains(element)); // Ignore items in panel
+
+            // Try to focus the next element, however it could fail if we are in a
+            // Portal that happens to be the very last one in the DOM. In that
+            // case we would Error (because nothing after the button is
+            // focusable). Therefore we will try and focus the very first item in
+            // the document.body.
+            if (focusIn(nextElements, Focus.First) === FocusResult.Error) {
+                focusIn(document.body, Focus.First);
+            }
+        }
+    }
+
+    function handleFocus() {
+        if (!focus) return;
+        if ($api.popoverState !== PopoverStates.Open) return;
+        if (!$api.panel) return;
+        if ($api.panel?.contains(document.activeElement as HTMLElement)) return;
+        $api.closePopover();
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Escape:
+                if ($api.popoverState !== PopoverStates.Open) return;
+                if (!$api.panel) return;
+                if (!$api.panel?.contains(document.activeElement)) return;
+                event.preventDefault();
+                event.stopPropagation();
+                $api.closePopover();
+                $api.button?.focus();
+                break;
+        }
+    }
+</script>
+
+<svelte:window
+    on:keydown={handleWindowKeydown}
+    on:focus|capture={handleFocus}
+/>
+{#if visible}
+    <div {...$$restProps} on:keydown={handleKeydown} bind:this={$panelStore}>
+        <slot
+            open={$api.popoverState === PopoverStates.Open}
+            close={$api.close}
+        />
+    </div>
+{/if}

src/lib/components/portal/Portal.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { usePortalGroupContext } from "./PortalGroup.svelte";
+    import { usePortalRoot } from "./ForcePortalRootContext.svelte";
+    import { portal } from "./use-portal";
+    let forceInRoot = usePortalRoot();
+    let groupTarget = usePortalGroupContext();
+    $: target = (() => {
+        // Group context is used, but still null
+        if (
+            !(forceInRoot && $forceInRoot) &&
+            groupTarget !== undefined &&
+            $groupTarget !== null
+        )
+            return $groupTarget;
+
+        // No group context is used, let's create a default portal root
+        if (typeof window === "undefined") return null;
+        let existingRoot = document.getElementById("headlessui-portal-root");
+        if (existingRoot) return existingRoot;
+
+        let root = document.createElement("div");
+        root.setAttribute("id", "headlessui-portal-root");
+        return document.body.appendChild(root);
+    })();
+</script>
+
+<div use:portal={target}>
+    <slot />
+</div>

src/lib/components/portal/PortalGroup.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">
+    import { getContext, setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    const PORTAL_GROUP_CONTEXT_NAME = "headlessui-portal-group-context";
+
+    export function usePortalGroupContext():
+        | Writable<HTMLElement | null>
+        | undefined {
+        return getContext(PORTAL_GROUP_CONTEXT_NAME);
+    }
+</script>
+
+<script lang="ts">
+    export let target: HTMLElement | null;
+    setContext(PORTAL_GROUP_CONTEXT_NAME, writable(target));
+</script>
+
+<slot />

src/lib/components/radio-group/RadioGroup.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" context="module">
+    import DescriptionProvider from "./DescriptionProvider.svelte";
+    import LabelProvider from "./LabelProvider.svelte";
+    import { createEventDispatcher, getContext, setContext } from "svelte";
+    import { Writable, writable } from "svelte/store";
+    import { Focus, focusIn, FocusResult } from "./focus-management";
+    import { Keys } from "./keyboard";
+    import { useId } from "./use-id";
+    export interface Option {
+        id: string;
+        element: HTMLElement | null;
+        propsRef: { value: unknown; disabled: boolean };
+    }
+
+    export interface StateDefinition {
+        // State
+        options: Option[];
+        value: unknown;
+        disabled: boolean;
+        firstOption: Option | undefined;
+        containsCheckedOption: boolean;
+
+        // State mutators
+        change(nextValue: unknown): boolean;
+        registerOption(action: Option): void;
+        unregisterOption(id: Option["id"]): void;
+    }
+
+    const RADIO_GROUP_CONTEXT_NAME = "RadioGroupContext";
+    export function useRadioGroupContext(
+        component: string
+    ): Writable<StateDefinition | undefined> {
+        const context = getContext(RADIO_GROUP_CONTEXT_NAME) as
+            | Writable<StateDefinition | undefined>
+            | undefined;
+
+        if (context === undefined) {
+            throw new Error(
+                `<${component} /> is missing a parent <RadioGroup /> component.`
+            );
+        }
+
+        return context;
+    }
+</script>
+
+<script lang="ts">
+    import { treeWalker } from "./use-tree-walker";
+    export let disabled = false;
+    export let value: any;
+    let radioGroupRef: HTMLElement | null = null;
+    let options: StateDefinition["options"] = [];
+
+    let id = `headlessui-radiogroup-${useId()}`;
+
+    const dispatch = createEventDispatcher();
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext(RADIO_GROUP_CONTEXT_NAME, api);
+
+    $: api.set({
+        options,
+        value,
+        disabled,
+        firstOption: options.find((option) => !option.propsRef.disabled),
+        containsCheckedOption: options.some(
+            (option) => option.propsRef.value === value
+        ),
+        change(nextValue: unknown) {
+            if (disabled) return false;
+            if (value === nextValue) return false;
+            let nextOption = options.find(
+                (option) => option.propsRef.value === nextValue
+            )?.propsRef;
+            if (nextOption?.disabled) return false;
+            dispatch("updateValue", nextValue);
+            return true;
+        },
+        registerOption(action: Option) {
+            options = [...options, action];
+        },
+        unregisterOption(id: Option["id"]) {
+            options = options.filter((radio) => radio.id !== id);
+        },
+    });
+
+    $: treeWalker({
+        container: radioGroupRef,
+        accept(node) {
+            if (node.getAttribute("role") === "radio")
+                return NodeFilter.FILTER_REJECT;
+            if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
+            return NodeFilter.FILTER_ACCEPT;
+        },
+        walk(node) {
+            node.setAttribute("role", "none");
+        },
+    });
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (!radioGroupRef) return;
+        if (!radioGroupRef.contains(event.target as HTMLElement)) return;
+
+        let all = options
+            .filter((option) => option.propsRef.disabled === false)
+            .map((radio) => radio.element) as HTMLElement[];
+
+        switch (event.key) {
+            case Keys.ArrowLeft:
+            case Keys.ArrowUp:
+                {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    let result = focusIn(
+                        all,
+                        Focus.Previous | Focus.WrapAround
+                    );
+
+                    if (result === FocusResult.Success) {
+                        let activeOption = options.find(
+                            (option) =>
+                                option.element === document.activeElement
+                        );
+                        if (activeOption)
+                            $api.change(activeOption.propsRef.value);
+                    }
+                }
+                break;
+
+            case Keys.ArrowRight:
+            case Keys.ArrowDown:
+                {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    let result = focusIn(all, Focus.Next | Focus.WrapAround);
+
+                    if (result === FocusResult.Success) {
+                        let activeOption = options.find(
+                            (option) =>
+                                option.element === document.activeElement
+                        );
+                        if (activeOption)
+                            $api.change(activeOption.propsRef.value);
+                    }
+                }
+                break;
+
+            case Keys.Space:
+                {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    let activeOption = options.find(
+                        (option) => option.element === document.activeElement
+                    );
+                    if (activeOption) $api.change(activeOption.propsRef.value);
+                }
+                break;
+        }
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "radiogroup",
+    };
+</script>
+
+<DescriptionProvider name="RadioGroup.Description" let:describedby>
+    <LabelProvider name="RadioGroup.Label" let:labelledby>
+        <div
+            {...{ ...$$restProps, ...propsWeControl }}
+            bind:this={radioGroupRef}
+            aria-labelledby={labelledby}
+            aria-describedby={describedby}
+            on:keydown={handleKeyDown}
+        >
+            <slot />
+        </div>
+    </LabelProvider>
+</DescriptionProvider>

src/lib/components/radio-group/RadioGroupOption.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import DescriptionProvider from "./DescriptionProvider.svelte";
+    import LabelProvider from "./LabelProvider.svelte";
+
+    import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
+    import { useId } from "./use-id";
+
+    enum OptionState {
+        Empty = 1 << 0,
+        Active = 1 << 1,
+    }
+
+    export let value: any;
+    export let disabled: boolean = false;
+    let api = useRadioGroupContext("RadioGroupOption");
+    let id = `headlessui-radiogroup-option-${useId()}`;
+    let optionRef: HTMLElement | null = null;
+    $: propsRef = { value, disabled };
+    let state = OptionState.Empty;
+
+    function updateOption(option: Option) {
+        $api?.unregisterOption(option.id);
+        $api?.registerOption(option);
+    }
+    $: updateOption({ id, element: optionRef, propsRef });
+    onDestroy(() => $api?.unregisterOption(id));
+
+    $: isFirstOption = $api?.firstOption?.id === id;
+    $: isDisabled = $api?.disabled || disabled;
+    $: checked = $api?.value === value;
+
+    $: tabIndex = (() => {
+        if (isDisabled) return -1;
+        if (checked) return 0;
+        if (!$api.containsCheckedOption && isFirstOption) return 0;
+        return -1;
+    })();
+
+    function handleClick() {
+        if (!$api.change(value)) return;
+
+        state |= OptionState.Active;
+        optionRef?.focus();
+    }
+    function handleFocus() {
+        state |= OptionState.Active;
+    }
+    function handleBlur() {
+        state &= ~OptionState.Active;
+    }
+
+    $: classStyle = $$props.class
+        ? typeof $$props.class === "function"
+            ? $$props.class({
+                  active: state & OptionState.Active,
+                  checked,
+                  disabled: isDisabled,
+              })
+            : $$props.class
+        : "";
+
+    $: propsWeControl = {
+        id,
+        class: classStyle,
+        role: "radio",
+        "aria-checked": checked ? ("true" as const) : ("false" as const),
+        "aria-disabled": isDisabled ? true : undefined,
+        tabIndex: tabIndex,
+    };
+</script>
+
+<DescriptionProvider name="RadioGroup.Description" let:describedby>
+    <LabelProvider name="RadioGroup.Label" let:labelledby>
+        <div
+            {...{ ...$$restProps, ...propsWeControl }}
+            bind:this={optionRef}
+            aria-labelledby={labelledby}
+            aria-describedby={describedby}
+            on:click={isDisabled ? undefined : handleClick}
+            on:focus={isDisabled ? undefined : handleFocus}
+            on:blur={isDisabled ? undefined : handleBlur}
+        >
+            <slot
+                {checked}
+                disabled={isDisabled}
+                active={state & OptionState.Active}
+            />
+        </div>
+    </LabelProvider>
+</DescriptionProvider>

src/lib/components/switch/Switch.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { StateDefinition } from "./SwitchGroup.svelte";
+    import { LabelContext } from "./LabelProvider.svelte";
+    import { DescriptionContext } from "./DescriptionProvider.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { getContext, createEventDispatcher } from "svelte";
+    import { Writable } from "svelte/store";
+
+    const dispatch = createEventDispatcher();
+    export let checked = false;
+    let api: Writable<StateDefinition> | undefined = getContext("SwitchApi");
+    let labelContext: Writable<LabelContext> | undefined = getContext(
+        "headlessui-label-context"
+    );
+    let descriptionContext: Writable<DescriptionContext> | undefined =
+        getContext("headlessui-description-context");
+    let id = `headlessui-switch-${useId()}`;
+    $: switchStore = $api?.switchStore;
+    let internalSwitchRef = null;
+
+    function toggle() {
+        dispatch("updateValue", !checked);
+    }
+
+    function handleClick(event: MouseEvent) {
+        event.preventDefault();
+        toggle();
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        if (event.key !== Keys.Tab) event.preventDefault();
+        if (event.key === Keys.Space) toggle();
+    }
+
+    // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
+    function handleKeyPress(event: KeyboardEvent) {
+        event.preventDefault();
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "switch",
+        tabIndex: 0,
+        "aria-checked": checked,
+        "aria-labelledby": $labelContext?.labelIds,
+        "aria-describedby": $descriptionContext?.descriptionIds,
+    };
+</script>
+
+{#if switchStore}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$switchStore}
+        on:click={handleClick}
+        on:keyup={handleKeyUp}
+        on:keypress={handleKeyPress}
+    >
+        <slot />
+    </button>
+{:else}
+    <button
+        {...{ ...$$restProps, ...propsWeControl }}
+        bind:this={$internalSwitchRef}
+        on:click={handleClick}
+        on:keyup={handleKeyUp}
+        on:keypress={handleKeyPress}
+    >
+        <slot />
+    </button>
+{/if}

src/lib/components/switch/SwitchGroup.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+    export interface StateDefinition {
+        switchStore: Writable<HTMLButtonElement | null>;
+    }
+</script>
+
+<script lang="ts">
+    import DescriptionProvider from "./DescriptionProvider.svelte";
+    import LabelProvider from "./LabelProvider.svelte";
+    import { setContext } from "svelte";
+    import { Writable, writable } from "svelte/store";
+
+    let switchStore: Writable<HTMLButtonElement | null> = writable(null);
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext("SwitchApi", api);
+
+    function onClick() {
+        if (!$switchStore) return;
+        $switchStore.click();
+        $switchStore.focus({ preventScroll: true });
+    }
+
+    $: api.set({
+        switchStore,
+    });
+</script>
+
+<div {...$$restProps}>
+    <DescriptionProvider name="Switch.Description">
+        <LabelProvider name="Switch.Label" {onClick}>
+            <slot />
+        </LabelProvider>
+    </DescriptionProvider>
+</div>

src/lib/components/tabs/Tab.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Focus, focusIn } from "./focus-management";
+    import { Keys } from "./keyboard";
+    import { match } from "./match";
+
+    import { useTabsContext } from "./TabGroup.svelte";
+    import { useId } from "./use-id";
+
+    export let disabled = false;
+
+    let api = useTabsContext("Tab");
+    let id = `headlessui-tabs-tab-${useId()}`;
+    let tabRef = null;
+
+    onMount(() => {
+        $api.registerTab(tabRef);
+        return () => $api.unregisterTab(tabRef);
+    });
+
+    $: myIndex = $api.tabs.indexOf(tabRef);
+    $: selected = myIndex === $api.selectedIndex;
+
+    function handleKeyDown(event: KeyboardEvent) {
+        let list = $api?.tabs.filter(Boolean) as HTMLElement[];
+
+        if (event.key === Keys.Space || event.key === Keys.Enter) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            $api?.setSelectedIndex(myIndex);
+            return;
+        }
+
+        switch (event.key) {
+            case Keys.Home:
+            case Keys.PageUp:
+                event.preventDefault();
+                event.stopPropagation();
+
+                return focusIn(list, Focus.First);
+
+            case Keys.End:
+            case Keys.PageDown:
+                event.preventDefault();
+                event.stopPropagation();
+
+                return focusIn(list, Focus.Last);
+        }
+
+        return match($api.orientation, {
+            vertical() {
+                if (event.key === Keys.ArrowUp)
+                    return focusIn(list, Focus.Previous | Focus.WrapAround);
+                if (event.key === Keys.ArrowDown)
+                    return focusIn(list, Focus.Next | Focus.WrapAround);
+                return;
+            },
+            horizontal() {
+                if (event.key === Keys.ArrowLeft)
+                    return focusIn(list, Focus.Previous | Focus.WrapAround);
+                if (event.key === Keys.ArrowRight)
+                    return focusIn(list, Focus.Next | Focus.WrapAround);
+                return;
+            },
+        });
+    }
+
+    function handleFocus() {
+        tabRef?.focus();
+    }
+
+    function handleSelection() {
+        if (disabled) return;
+
+        tabRef?.focus();
+        $api?.setSelectedIndex(myIndex);
+    }
+
+    $: propsWeControl = {
+        id,
+        role: "tab",
+        "aria-controls": $api.panels[myIndex]?.id,
+        "aria-selected": selected,
+        tabIndex: selected ? 0 : -1,
+        disabled: disabled ? true : undefined,
+    };
+</script>
+
+<button
+    {...{ ...$$restProps, ...propsWeControl }}
+    bind:this={tabRef}
+    on:keydown={handleKeyDown}
+    on:click={handleSelection}
+    on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
+>
+    <slot />
+</button>

src/lib/components/tabs/TabGroup.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" context="module">
+    import {
+        createEventDispatcher,
+        getContext,
+        onMount,
+        setContext,
+    } from "svelte";
+
+    import { writable, Writable } from "svelte/store";
+
+    export type StateDefinition = {
+        // State
+        selectedIndex: number | null;
+        orientation: "vertical" | "horizontal";
+        activation: "auto" | "manual";
+
+        tabs: (HTMLElement | null)[];
+        panels: (HTMLElement | null)[];
+
+        // State mutators
+        setSelectedIndex(index: number): void;
+        registerTab(tab: HTMLElement | null): void;
+        unregisterTab(tab: HTMLElement | null): void;
+        registerPanel(panel: HTMLElement | null): void;
+        unregisterPanel(panel: HTMLElement | null): void;
+    };
+
+    const TABS_CONTEXT_NAME = "TabsContext";
+
+    export function useTabsContext(
+        component: string
+    ): Writable<StateDefinition | undefined> {
+        let context: Writable<StateDefinition | undefined> | undefined =
+            getContext(TABS_CONTEXT_NAME);
+
+        if (context === undefined) {
+            throw new Error(
+                `<${component} /> is missing a parent <TabGroup /> component.`
+            );
+        }
+
+        return context;
+    }
+</script>
+
+<script lang="ts">
+    export let defaultIndex = 0;
+    export let vertical = false;
+    export let manual = false;
+
+    let selectedIndex: StateDefinition["selectedIndex"] = null;
+    let tabs: StateDefinition["tabs"] = [];
+    let panels: StateDefinition["panels"] = [];
+
+    const dispatch = createEventDispatcher();
+
+    let api: Writable<StateDefinition | undefined> = writable();
+    setContext(TABS_CONTEXT_NAME, api);
+
+    $: api.set({
+        selectedIndex,
+        orientation: vertical ? "vertical" : "horizontal",
+        activation: manual ? "manual" : "auto",
+        tabs,
+        panels,
+        setSelectedIndex(index: number) {
+            if (selectedIndex === index) return;
+            selectedIndex = index;
+            dispatch("updateValue", index);
+        },
+        registerTab(tab: typeof tabs[number]) {
+            if (!tabs.includes(tab)) tabs = [...tabs, tab];
+        },
+        unregisterTab(tab: typeof tabs[number]) {
+            tabs = tabs.filter((t) => t !== tab);
+        },
+        registerPanel(panel: typeof panels[number]) {
+            if (!panels.includes(panel)) panels = [...panels, panel];
+        },
+        unregisterPanel(panel: typeof panels[number]) {
+            panels = panels.filter((p) => p !== panel);
+        },
+    });
+
+    onMount(() => {
+        if ($api.tabs.length <= 0) return;
+        if (selectedIndex !== null) return;
+
+        let tabs = $api.tabs.filter(Boolean) as HTMLElement[];
+        let focusableTabs = tabs.filter((tab) => !tab.hasAttribute("disabled"));
+        if (focusableTabs.length <= 0) return;
+
+        // Underflow
+        if (defaultIndex < 0) {
+            selectedIndex = tabs.indexOf(focusableTabs[0]);
+        }
+
+        // Overflow
+        else if (defaultIndex > $api.tabs.length) {
+            selectedIndex = tabs.indexOf(
+                focusableTabs[focusableTabs.length - 1]
+            );
+        }
+
+        // Middle
+        else {
+            let before = tabs.slice(0, defaultIndex);
+            let after = tabs.slice(defaultIndex);
+
+            let next = [...after, ...before].find((tab) =>
+                focusableTabs.includes(tab)
+            );
+            if (!next) return;
+
+            selectedIndex = tabs.indexOf(next);
+        }
+    });
+</script>
+
+<div {...$$restProps}>
+    <slot {selectedIndex} />
+</div>

src/lib/components/tabs/TabList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { useTabsContext } from "./TabGroup.svelte";
+
+    let api = useTabsContext("TabList");
+    $: propsWeControl = {
+        role: "tablist",
+        "aria-orientation": $api.orientation,
+    };
+</script>
+
+<div {...{ ...$$restProps, ...propsWeControl }}>
+    <slot selectedIndex={$api.selectedIndex} />
+</div>

src/lib/components/tabs/TabPanel.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { useTabsContext } from "./TabGroup.svelte";
+    import { useId } from "./use-id";
+
+    let api = useTabsContext("TabPanel");
+    let id = `headlessui-tabs-panel-${useId()}`;
+    let panelRef = null;
+
+    onMount(() => {
+        $api.registerPanel(panelRef);
+        return () => $api.unregisterPanel(panelRef);
+    });
+
+    $: myIndex = $api.panels.indexOf(panelRef);
+    $: selected = myIndex === $api.selectedIndex;
+
+    $: propsWeControl = {
+        id,
+        role: "tabpanel",
+        "aria-labelledby": $api.tabs[myIndex]?.id,
+        tabIndex: selected ? 0 : -1,
+    };
+</script>
+
+<div {...{ ...$$restProps, ...propsWeControl }} bind:this={panelRef}>
+    {#if selected}
+        <slot />
+    {/if}
+</div>

src/lib/components/tabs/TabPanels.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { useTabsContext } from "./TabGroup.svelte";
+
+    let api = useTabsContext("TabPanels");
+</script>
+
+<div {...$$restProps}>
+    <slot selectedIndex={$api.selectedIndex} />
+</div>

src/lib/components/transitions/TransitionChild.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+    import {
+        createEventDispatcher,
+        getContext,
+        onMount,
+        setContext,
+    } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    import { match } from "./match";
+    import { State } from "./open-closed";
+    import { Reason, transition } from "./transition";
+
+    import {
+        hasChildren,
+        NestingContextValues,
+        NESTING_CONTEXT_NAME,
+        TreeStates,
+        useNesting,
+        useParentNesting,
+        useTransitionContext,
+    } from "./TransitionRoot.svelte";
+    import { useId } from "./use-id";
+
+    export let unmount = true;
+    export let enter = "";
+    export let enterFrom = "";
+    export let enterTo = "";
+    export let entered = "";
+    export let leave = "";
+    export let leaveFrom = "";
+    export let leaveTo = "";
+
+    const dispatch = createEventDispatcher();
+
+    let container: HTMLElement | null = null;
+    let state = TreeStates.Visible;
+
+    let transitionContext = useTransitionContext();
+    let nestingContext = useParentNesting();
+
+    let initial = true;
+
+    let id = useId();
+
+    let isTransitioning = false;
+
+    let nesting: Writable<NestingContextValues> = writable();
+    nesting.set(
+        useNesting(() => {
+            // When all children have been unmounted we can only hide ourselves if and only if we are not
+            // transitioning ourselves. Otherwise we would unmount before the transitions are finished.
+            if (!isTransitioning) {
+                state = TreeStates.Hidden;
+                $nestingContext.unregister(id);
+                dispatch("afterLeave");
+            }
+        })
+    );
+
+    onMount(() => $nestingContext.register(id));
+
+    $: {
+        (() => {
+            // If we are in another mode than the Hidden mode then ignore
+            /* if (strategy.value !== RenderStrategy.Hidden) return */
+            if (!id) return;
+
+            // Make sure that we are visible
+            if ($transitionContext.show && state !== TreeStates.Visible) {
+                state = TreeStates.Visible;
+                return;
+            }
+
+            match(state, {
+                [TreeStates.Hidden]: () => $nestingContext.unregister(id),
+                [TreeStates.Visible]: () => $nestingContext.register(id),
+            });
+        })();
+    }
+
+    function splitClasses(classes: string = "") {
+        return classes
+            .split(" ")
+            .filter((className) => className.trim().length > 1);
+    }
+
+    let enterClasses = splitClasses(enter);
+    let enterFromClasses = splitClasses(enterFrom);
+    let enterToClasses = splitClasses(enterTo);
+
+    let enteredClasses = splitClasses(entered);
+
+    let leaveClasses = splitClasses(leave);
+    let leaveFromClasses = splitClasses(leaveFrom);
+    let leaveToClasses = splitClasses(leaveTo);
+
+    let mounted = false;
+    onMount(() => (mounted = true));
+
+    function executeTransition(show: boolean, appear: boolean) {
+        // Skipping initial transition
+        let skip = initial && !appear;
+
+        let node = container;
+        if (!node || !(node instanceof HTMLElement)) return;
+        if (skip) return;
+
+        isTransitioning = true;
+
+        if (show) dispatch("beforeEnter");
+        if (!show) dispatch("beforeLeave");
+
+        return show
+            ? transition(
+                  node,
+                  enterClasses,
+                  enterFromClasses,
+                  enterToClasses,
+                  enteredClasses,
+                  (reason) => {
+                      isTransitioning = false;
+                      if (reason === Reason.Finished) dispatch("afterEnter");
+                  }
+              )
+            : transition(
+                  node,
+                  leaveClasses,
+                  leaveFromClasses,
+                  leaveToClasses,
+                  enteredClasses,
+                  (reason) => {
+                      isTransitioning = false;
+
+                      if (reason !== Reason.Finished) return;
+
+                      // When we don't have children anymore we can safely unregister from the parent and hide
+                      // ourselves.
+                      if (!hasChildren($nesting)) {
+                          state = TreeStates.Hidden;
+                          $nestingContext.unregister(id);
+                          dispatch("afterLeave");
+                      }
+                  }
+              );
+    }
+
+    let _cleanup = null;
+    $: if (mounted) {
+        if (_cleanup) {
+            _cleanup();
+        }
+        _cleanup = executeTransition(
+            $transitionContext.show,
+            $transitionContext.appear
+        );
+        initial = false;
+    }
+
+    setContext(NESTING_CONTEXT_NAME, nesting);
+    let openClosedState: Writable<State> | undefined = writable();
+    setContext("OpenClosed", openClosedState);
+
+    $: openClosedState.set(
+        match(state, {
+            [TreeStates.Visible]: State.Open,
+            [TreeStates.Hidden]: State.Closed,
+        })
+    );
+</script>
+
+<div bind:this={container} {...$$restProps}>
+    <slot />
+</div>

src/lib/components/transitions/TransitionRoot.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" context="module">
+    export enum TreeStates {
+        Visible = "visible",
+        Hidden = "hidden",
+    }
+
+    type ID = ReturnType<typeof useId>;
+
+    export interface NestingContextValues {
+        children: { id: ID; state: TreeStates }[];
+        register: (id: ID) => () => void;
+        unregister: (id: ID, strategy?: RenderStrategy) => void;
+    }
+
+    interface TransitionContextValues {
+        show: boolean;
+        appear: boolean;
+    }
+
+    const TRANSITION_CONTEXT_NAME = "TransitionContext";
+    export const NESTING_CONTEXT_NAME = "NestingContext";
+    export function hasTransitionContext() {
+        return getContext(TRANSITION_CONTEXT_NAME) !== undefined;
+    }
+    export function useTransitionContext(): Writable<TransitionContextValues> {
+        let context = getContext(TRANSITION_CONTEXT_NAME) as
+            | Writable<TransitionContextValues>
+            | undefined;
+        if (context === undefined) {
+            throw new Error(
+                "A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
+            );
+        }
+
+        return context;
+    }
+
+    export function useParentNesting(): Writable<NestingContextValues> {
+        let context = getContext(NESTING_CONTEXT_NAME) as
+            | Writable<NestingContextValues>
+            | undefined;
+        if (context === undefined) {
+            throw new Error(
+                "A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
+            );
+        }
+
+        return context;
+    }
+
+    export function hasChildren(
+        bag:
+            | NestingContextValues["children"]
+            | { children: NestingContextValues["children"] }
+    ): boolean {
+        if ("children" in bag) return hasChildren(bag.children);
+        return (
+            bag.filter(({ state }) => state === TreeStates.Visible).length > 0
+        );
+    }
+
+    export function useNesting(done?: () => void) {
+        let transitionableChildren: NestingContextValues["children"] = [];
+
+        let mounted = false;
+        onMount(() => (mounted = true));
+        onDestroy(() => (mounted = false));
+
+        function unregister(childId: ID, strategy = RenderStrategy.Hidden) {
+            let idx = transitionableChildren.findIndex(
+                ({ id }) => id === childId
+            );
+            if (idx === -1) return;
+
+            match(strategy, {
+                [RenderStrategy.Unmount]() {
+                    transitionableChildren.splice(idx, 1);
+                },
+                [RenderStrategy.Hidden]() {
+                    transitionableChildren[idx].state = TreeStates.Hidden;
+                },
+            });
+
+            if (!hasChildren(transitionableChildren) && mounted) {
+                done?.();
+            }
+        }
+
+        function register(childId: ID) {
+            let child = transitionableChildren.find(({ id }) => id === childId);
+            if (!child) {
+                transitionableChildren.push({
+                    id: childId,
+                    state: TreeStates.Visible,
+                });
+            } else if (child.state !== TreeStates.Visible) {
+                child.state = TreeStates.Visible;
+            }
+
+            return () => unregister(childId, RenderStrategy.Unmount);
+        }
+
+        return {
+            children: transitionableChildren,
+            register,
+            unregister,
+        };
+    }
+</script>
+
+<script lang="ts">
+    import { getContext, onDestroy, onMount, setContext } from "svelte";
+
+    import { writable, Writable } from "svelte/store";
+    import { match } from "./match";
+    import { State } from "./open-closed";
+    import { RenderStrategy } from "./Render.svelte";
+    import TransitionChild from "./TransitionChild.svelte";
+    import type { useId } from "./use-id";
+
+    export let show: boolean;
+    export let unmount = true;
+    export let appear = false;
+
+    let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+
+    $: shouldShow = (() => {
+        if (show === null && openClosedState !== undefined) {
+            return match($openClosedState, {
+                [State.Open]: true,
+                [State.Closed]: false,
+            });
+        }
+
+        return show;
+    })();
+
+    $: if (shouldShow !== true && shouldShow !== false) {
+        throw new Error(
+            "A <Transition /> is used but it is missing a `show={true | false}` prop."
+        );
+    }
+    $: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
+
+    let nestingBag: Writable<NestingContextValues> = writable();
+    nestingBag.set(
+        useNesting(() => {
+            state = TreeStates.Hidden;
+        })
+    );
+
+    let initial = true;
+    let transitionBag: Writable<TransitionContextValues> = writable();
+    $: transitionBag.set({
+        show: shouldShow,
+        appear: appear || !initial,
+    });
+
+    onMount(() => {
+        initial = false;
+    });
+
+    $: if (!initial) {
+        if (shouldShow) {
+            state = TreeStates.Visible;
+        } else if (!hasChildren($nestingBag)) {
+            state = TreeStates.Hidden;
+        }
+    }
+
+    setContext(NESTING_CONTEXT_NAME, nestingBag);
+    setContext(TRANSITION_CONTEXT_NAME, transitionBag);
+</script>
+
+<TransitionChild {...$$restProps} {unmount}>
+    <slot />
+</TransitionChild>