From db9ec57065cd2243c975966e2abb735a15ef07e1 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 13 Dec 2021 17:13:47 -0800
Subject: [PATCH] Initial commit with files

Still need to fix the imports
---
 .../components/description/Description.svelte |  21 ++
 .../description/DescriptionProvider.svelte    |  40 +++
 src/lib/components/dialog/Dialog.svelte       | 243 ++++++++++++++++++
 .../components/dialog/DialogOverlay.svelte    |  20 ++
 src/lib/components/dialog/DialogTitle.svelte  |  19 ++
 .../components/disclosure/Disclosure.svelte   | 105 ++++++++
 .../disclosure/DisclosureButton.svelte        | 103 ++++++++
 .../disclosure/DisclosurePanel.svelte         |  40 +++
 .../components/focus-trap/FocusTrap.svelte    | 127 +++++++++
 src/lib/components/label/Label.svelte         |  37 +++
 src/lib/components/label/LabelProvider.svelte |  37 +++
 src/lib/components/listbox/Listbox.svelte     | 191 ++++++++++++++
 .../components/listbox/ListboxButton.svelte   |  85 ++++++
 .../components/listbox/ListboxLabel.svelte    |  20 ++
 .../components/listbox/ListboxOption.svelte   | 114 ++++++++
 .../components/listbox/ListboxOptions.svelte  | 118 +++++++++
 src/lib/components/menu/Menu.svelte           | 151 +++++++++++
 src/lib/components/menu/MenuButton.svelte     |  83 ++++++
 src/lib/components/menu/MenuItem.svelte       |  79 ++++++
 src/lib/components/menu/MenuItems.svelte      | 139 ++++++++++
 src/lib/components/popover/Popover.svelte     | 145 +++++++++++
 .../components/popover/PopoverButton.svelte   | 176 +++++++++++++
 .../components/popover/PopoverGroup.svelte    |  57 ++++
 .../components/popover/PopoverOverlay.svelte  |  25 ++
 .../components/popover/PopoverPanel.svelte    | 117 +++++++++
 src/lib/components/portal/Portal.svelte       |  29 +++
 src/lib/components/portal/PortalGroup.svelte  |  18 ++
 .../components/radio-group/RadioGroup.svelte  | 182 +++++++++++++
 .../radio-group/RadioGroupOption.svelte       |  91 +++++++
 src/lib/components/switch/Switch.svelte       |  71 +++++
 src/lib/components/switch/SwitchGroup.svelte  |  35 +++
 src/lib/components/tabs/Tab.svelte            |  98 +++++++
 src/lib/components/tabs/TabGroup.svelte       | 122 +++++++++
 src/lib/components/tabs/TabList.svelte        |  13 +
 src/lib/components/tabs/TabPanel.svelte       |  30 +++
 src/lib/components/tabs/TabPanels.svelte      |   9 +
 .../transitions/TransitionChild.svelte        | 173 +++++++++++++
 .../transitions/TransitionRoot.svelte         | 177 +++++++++++++
 src/lib/hooks/use-effect.ts                   |   6 +
 src/lib/hooks/use-id.ts                       |   8 +
 src/lib/hooks/use-inert-others.ts             | 100 +++++++
 src/lib/hooks/use-portal.ts                   |  14 +
 src/lib/hooks/use-tree-walker.ts              |  28 ++
 .../internal/ForcePortalRootContext.svelte    |  17 ++
 src/lib/internal/StackContextProvider.svelte  |  42 +++
 src/lib/internal/dom-containers.ts            |   7 +
 src/lib/internal/open-closed.ts               |  21 ++
 src/lib/utils/Render.svelte                   |   6 +
 src/lib/utils/calculate-active-index.ts       |  84 ++++++
 src/lib/utils/disposables.ts                  |  33 +++
 src/lib/utils/focus-management.ts             | 155 +++++++++++
 src/lib/utils/keyboard.ts                     |  21 ++
 src/lib/utils/match.ts                        |  20 ++
 src/lib/utils/once.ts                         |   9 +
 src/lib/utils/transition.ts                   |  95 +++++++
 src/lib/utils/tree-walker.ts                  |  28 ++
 56 files changed, 4034 insertions(+)
 create mode 100644 src/lib/components/description/Description.svelte
 create mode 100644 src/lib/components/description/DescriptionProvider.svelte
 create mode 100644 src/lib/components/dialog/Dialog.svelte
 create mode 100644 src/lib/components/dialog/DialogOverlay.svelte
 create mode 100644 src/lib/components/dialog/DialogTitle.svelte
 create mode 100644 src/lib/components/disclosure/Disclosure.svelte
 create mode 100644 src/lib/components/disclosure/DisclosureButton.svelte
 create mode 100644 src/lib/components/disclosure/DisclosurePanel.svelte
 create mode 100644 src/lib/components/focus-trap/FocusTrap.svelte
 create mode 100644 src/lib/components/label/Label.svelte
 create mode 100644 src/lib/components/label/LabelProvider.svelte
 create mode 100644 src/lib/components/listbox/Listbox.svelte
 create mode 100644 src/lib/components/listbox/ListboxButton.svelte
 create mode 100644 src/lib/components/listbox/ListboxLabel.svelte
 create mode 100644 src/lib/components/listbox/ListboxOption.svelte
 create mode 100644 src/lib/components/listbox/ListboxOptions.svelte
 create mode 100644 src/lib/components/menu/Menu.svelte
 create mode 100644 src/lib/components/menu/MenuButton.svelte
 create mode 100644 src/lib/components/menu/MenuItem.svelte
 create mode 100644 src/lib/components/menu/MenuItems.svelte
 create mode 100644 src/lib/components/popover/Popover.svelte
 create mode 100644 src/lib/components/popover/PopoverButton.svelte
 create mode 100644 src/lib/components/popover/PopoverGroup.svelte
 create mode 100644 src/lib/components/popover/PopoverOverlay.svelte
 create mode 100644 src/lib/components/popover/PopoverPanel.svelte
 create mode 100644 src/lib/components/portal/Portal.svelte
 create mode 100644 src/lib/components/portal/PortalGroup.svelte
 create mode 100644 src/lib/components/radio-group/RadioGroup.svelte
 create mode 100644 src/lib/components/radio-group/RadioGroupOption.svelte
 create mode 100644 src/lib/components/switch/Switch.svelte
 create mode 100644 src/lib/components/switch/SwitchGroup.svelte
 create mode 100644 src/lib/components/tabs/Tab.svelte
 create mode 100644 src/lib/components/tabs/TabGroup.svelte
 create mode 100644 src/lib/components/tabs/TabList.svelte
 create mode 100644 src/lib/components/tabs/TabPanel.svelte
 create mode 100644 src/lib/components/tabs/TabPanels.svelte
 create mode 100644 src/lib/components/transitions/TransitionChild.svelte
 create mode 100644 src/lib/components/transitions/TransitionRoot.svelte
 create mode 100644 src/lib/hooks/use-effect.ts
 create mode 100644 src/lib/hooks/use-id.ts
 create mode 100644 src/lib/hooks/use-inert-others.ts
 create mode 100644 src/lib/hooks/use-portal.ts
 create mode 100644 src/lib/hooks/use-tree-walker.ts
 create mode 100644 src/lib/internal/ForcePortalRootContext.svelte
 create mode 100644 src/lib/internal/StackContextProvider.svelte
 create mode 100644 src/lib/internal/dom-containers.ts
 create mode 100644 src/lib/internal/open-closed.ts
 create mode 100644 src/lib/utils/Render.svelte
 create mode 100644 src/lib/utils/calculate-active-index.ts
 create mode 100644 src/lib/utils/disposables.ts
 create mode 100644 src/lib/utils/focus-management.ts
 create mode 100644 src/lib/utils/keyboard.ts
 create mode 100644 src/lib/utils/match.ts
 create mode 100644 src/lib/utils/once.ts
 create mode 100644 src/lib/utils/transition.ts
 create mode 100644 src/lib/utils/tree-walker.ts

diff --git a/src/lib/components/description/Description.svelte b/src/lib/components/description/Description.svelte
new file mode 100644
index 0000000..fe01822
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/description/DescriptionProvider.svelte b/src/lib/components/description/DescriptionProvider.svelte
new file mode 100644
index 0000000..e9191bd
--- /dev/null
+++ b/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} />
diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
new file mode 100644
index 0000000..17dcbff
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/dialog/DialogOverlay.svelte b/src/lib/components/dialog/DialogOverlay.svelte
new file mode 100644
index 0000000..9166e65
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/dialog/DialogTitle.svelte b/src/lib/components/dialog/DialogTitle.svelte
new file mode 100644
index 0000000..f164622
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/disclosure/Disclosure.svelte b/src/lib/components/disclosure/Disclosure.svelte
new file mode 100644
index 0000000..be5153d
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/disclosure/DisclosureButton.svelte b/src/lib/components/disclosure/DisclosureButton.svelte
new file mode 100644
index 0000000..25303d4
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/disclosure/DisclosurePanel.svelte b/src/lib/components/disclosure/DisclosurePanel.svelte
new file mode 100644
index 0000000..001bde2
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/focus-trap/FocusTrap.svelte b/src/lib/components/focus-trap/FocusTrap.svelte
new file mode 100644
index 0000000..67c3f0a
--- /dev/null
+++ b/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}
+/>
diff --git a/src/lib/components/label/Label.svelte b/src/lib/components/label/Label.svelte
new file mode 100644
index 0000000..1bd93f8
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/label/LabelProvider.svelte b/src/lib/components/label/LabelProvider.svelte
new file mode 100644
index 0000000..544ae0a
--- /dev/null
+++ b/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} />
diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
new file mode 100644
index 0000000..f593a3d
--- /dev/null
+++ b/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} />
diff --git a/src/lib/components/listbox/ListboxButton.svelte b/src/lib/components/listbox/ListboxButton.svelte
new file mode 100644
index 0000000..0053183
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/listbox/ListboxLabel.svelte b/src/lib/components/listbox/ListboxLabel.svelte
new file mode 100644
index 0000000..4d932c6
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/listbox/ListboxOption.svelte b/src/lib/components/listbox/ListboxOption.svelte
new file mode 100644
index 0000000..73c504d
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/listbox/ListboxOptions.svelte b/src/lib/components/listbox/ListboxOptions.svelte
new file mode 100644
index 0000000..6c52017
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
new file mode 100644
index 0000000..1712539
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/menu/MenuButton.svelte b/src/lib/components/menu/MenuButton.svelte
new file mode 100644
index 0000000..6361262
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/menu/MenuItem.svelte b/src/lib/components/menu/MenuItem.svelte
new file mode 100644
index 0000000..2a4b36e
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/menu/MenuItems.svelte b/src/lib/components/menu/MenuItems.svelte
new file mode 100644
index 0000000..a773de2
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
new file mode 100644
index 0000000..6e88ce1
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/popover/PopoverButton.svelte b/src/lib/components/popover/PopoverButton.svelte
new file mode 100644
index 0000000..8a29aae
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/popover/PopoverGroup.svelte b/src/lib/components/popover/PopoverGroup.svelte
new file mode 100644
index 0000000..340d5b2
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
new file mode 100644
index 0000000..27bfd38
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
new file mode 100644
index 0000000..47ba6f9
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/portal/Portal.svelte b/src/lib/components/portal/Portal.svelte
new file mode 100644
index 0000000..8d65770
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/portal/PortalGroup.svelte b/src/lib/components/portal/PortalGroup.svelte
new file mode 100644
index 0000000..dd4da8d
--- /dev/null
+++ b/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 />
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
new file mode 100644
index 0000000..04dcf73
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/radio-group/RadioGroupOption.svelte b/src/lib/components/radio-group/RadioGroupOption.svelte
new file mode 100644
index 0000000..529426e
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
new file mode 100644
index 0000000..c6fcb68
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/switch/SwitchGroup.svelte b/src/lib/components/switch/SwitchGroup.svelte
new file mode 100644
index 0000000..d95ea91
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/tabs/Tab.svelte b/src/lib/components/tabs/Tab.svelte
new file mode 100644
index 0000000..c2a030b
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
new file mode 100644
index 0000000..07b9cae
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/tabs/TabList.svelte b/src/lib/components/tabs/TabList.svelte
new file mode 100644
index 0000000..9a944c1
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/tabs/TabPanel.svelte b/src/lib/components/tabs/TabPanel.svelte
new file mode 100644
index 0000000..271d65c
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/tabs/TabPanels.svelte b/src/lib/components/tabs/TabPanels.svelte
new file mode 100644
index 0000000..fe7f915
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
new file mode 100644
index 0000000..ee19d0a
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
new file mode 100644
index 0000000..b612269
--- /dev/null
+++ b/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>
diff --git a/src/lib/hooks/use-effect.ts b/src/lib/hooks/use-effect.ts
new file mode 100644
index 0000000..dc44507
--- /dev/null
+++ b/src/lib/hooks/use-effect.ts
@@ -0,0 +1,6 @@
+export function useEffect(fn, ...args) {
+    if (fn.__cleanup) {
+        fn.__cleanup();
+    }
+    fn.__cleanup = fn(...args);
+}
diff --git a/src/lib/hooks/use-id.ts b/src/lib/hooks/use-id.ts
new file mode 100644
index 0000000..432e280
--- /dev/null
+++ b/src/lib/hooks/use-id.ts
@@ -0,0 +1,8 @@
+let id = 0
+function generateId() {
+    return ++id
+}
+
+export function useId() {
+    return generateId()
+}
diff --git a/src/lib/hooks/use-inert-others.ts b/src/lib/hooks/use-inert-others.ts
new file mode 100644
index 0000000..5eb7076
--- /dev/null
+++ b/src/lib/hooks/use-inert-others.ts
@@ -0,0 +1,100 @@
+let interactables = new Set<HTMLElement>()
+let originals = new Map<HTMLElement, { 'aria-hidden': string | null; inert: boolean }>()
+
+function inert(element: HTMLElement) {
+    element.setAttribute('aria-hidden', 'true')
+    // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
+    element.inert = true
+}
+
+function restore(element: HTMLElement) {
+    let original = originals.get(element)
+    if (!original) return
+
+    if (original['aria-hidden'] === null) element.removeAttribute('aria-hidden')
+    else element.setAttribute('aria-hidden', original['aria-hidden'])
+    // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
+    element.inert = original.inert
+}
+
+export function useInertOthers<TElement extends HTMLElement>(
+    container: TElement | null,
+    enabled: boolean = true
+) {
+    if (!enabled) return
+    if (!container) return
+
+    let element = container
+
+    // Mark myself as an interactable element
+    interactables.add(element)
+
+    // Restore elements that now contain an interactable child
+    for (let original of originals.keys()) {
+        if (original.contains(element)) {
+            restore(original)
+            originals.delete(original)
+        }
+    }
+
+    // Collect direct children of the body
+    document.querySelectorAll('body > *').forEach(child => {
+        if (!(child instanceof HTMLElement)) return // Skip non-HTMLElements
+
+        // Skip the interactables, and the parents of the interactables
+        for (let interactable of interactables) {
+            if (child.contains(interactable)) return
+        }
+
+        // Keep track of the elements
+        if (interactables.size === 1) {
+            originals.set(child, {
+                'aria-hidden': child.getAttribute('aria-hidden'),
+                // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
+                inert: child.inert,
+            })
+
+            // Mutate the element
+            inert(child)
+        }
+    })
+
+    return () => {
+        // Inert is disabled on the current element
+        interactables.delete(element)
+
+        // We still have interactable elements, therefore this one and its parent
+        // will become inert as well.
+        if (interactables.size > 0) {
+            // Collect direct children of the body
+            document.querySelectorAll('body > *').forEach(child => {
+                if (!(child instanceof HTMLElement)) return // Skip non-HTMLElements
+
+                // Skip already inert parents
+                if (originals.has(child)) return
+
+                // Skip the interactables, and the parents of the interactables
+                for (let interactable of interactables) {
+                    if (child.contains(interactable)) return
+                }
+
+                originals.set(child, {
+                    'aria-hidden': child.getAttribute('aria-hidden'),
+                    // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
+                    inert: child.inert,
+                })
+
+                // Mutate the element
+                inert(child)
+            })
+        } else {
+            for (let element of originals.keys()) {
+                // Restore
+                restore(element)
+
+                // Cleanup
+                originals.delete(element)
+            }
+        }
+    }
+}
diff --git a/src/lib/hooks/use-portal.ts b/src/lib/hooks/use-portal.ts
new file mode 100644
index 0000000..a6ed850
--- /dev/null
+++ b/src/lib/hooks/use-portal.ts
@@ -0,0 +1,14 @@
+export function portal(element: HTMLElement, target: HTMLElement) {
+    target.append(element);
+    return {
+        update(newTarget: HTMLElement) {
+            target = newTarget;
+            newTarget.append(element);
+        },
+        destroy() {
+            if (target.childNodes.length <= 0) {
+                target.parentElement?.removeChild(target);
+            }
+        },
+    }
+}
diff --git a/src/lib/hooks/use-tree-walker.ts b/src/lib/hooks/use-tree-walker.ts
new file mode 100644
index 0000000..e990ea6
--- /dev/null
+++ b/src/lib/hooks/use-tree-walker.ts
@@ -0,0 +1,28 @@
+type AcceptNode = (
+    node: HTMLElement
+) =>
+    | typeof NodeFilter.FILTER_ACCEPT
+    | typeof NodeFilter.FILTER_SKIP
+    | typeof NodeFilter.FILTER_REJECT
+
+export function treeWalker({
+    container,
+    accept,
+    walk,
+    enabled,
+}: {
+    container: HTMLElement | null
+    accept: AcceptNode
+    walk(node: HTMLElement): void
+    enabled?: boolean
+}) {
+    let root = container
+    if (!root) return
+    if (enabled !== undefined && !enabled) return
+
+    let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
+    // @ts-ignore-error Typescript bug thinks this can only have 3 args
+    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, acceptNode, false)
+
+    while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
+}
diff --git a/src/lib/internal/ForcePortalRootContext.svelte b/src/lib/internal/ForcePortalRootContext.svelte
new file mode 100644
index 0000000..25d9c58
--- /dev/null
+++ b/src/lib/internal/ForcePortalRootContext.svelte
@@ -0,0 +1,17 @@
+<script lang="ts" context="module">
+    import { getContext, setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    const FORCE_PORTAL_ROOT_CONTEXT_NAME =
+        "headlessui-force-portal-root-context";
+
+    export function usePortalRoot(): Writable<boolean> | undefined {
+        return getContext(FORCE_PORTAL_ROOT_CONTEXT_NAME);
+    }
+</script>
+
+<script lang="ts">
+    export let force: boolean;
+    setContext(FORCE_PORTAL_ROOT_CONTEXT_NAME, writable(force));
+</script>
+
+<slot />
diff --git a/src/lib/internal/StackContextProvider.svelte b/src/lib/internal/StackContextProvider.svelte
new file mode 100644
index 0000000..3cd2ee6
--- /dev/null
+++ b/src/lib/internal/StackContextProvider.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+    export enum StackMessage {
+        Add,
+        Remove,
+    }
+</script>
+
+<script lang="ts">
+    import { getContext, setContext } from "svelte";
+    import { writable, Writable } from "svelte/store";
+    type OnUpdate = (
+        message: StackMessage,
+        element: HTMLElement | null
+    ) => void;
+
+    export let onUpdate: OnUpdate | undefined;
+    export let element: HTMLElement | null;
+
+    let parentUpdateStore: Writable<OnUpdate> | undefined =
+        getContext("StackContext");
+    let notifyStore: Writable<OnUpdate> = writable(() => {});
+    setContext("StackContext", notifyStore);
+
+    $: notifyStore.set((...args: Parameters<OnUpdate>) => {
+        // Notify our layer
+        onUpdate?.(...args);
+
+        // Notify the parent
+        $parentUpdateStore?.(...args);
+    });
+
+    $: _cleanup = (() => {
+        if (_cleanup) {
+            _cleanup();
+        }
+        if (!element) return null;
+        $notifyStore(StackMessage.Add, element);
+        return () => $notifyStore(StackMessage.Remove, element);
+    })();
+</script>
+
+<slot />
diff --git a/src/lib/internal/dom-containers.ts b/src/lib/internal/dom-containers.ts
new file mode 100644
index 0000000..a2ddac8
--- /dev/null
+++ b/src/lib/internal/dom-containers.ts
@@ -0,0 +1,7 @@
+export function contains(containers: Set<HTMLElement>, element: HTMLElement) {
+    for (let container of containers) {
+        if (container.contains(element)) return true
+    }
+
+    return false
+}
diff --git a/src/lib/internal/open-closed.ts b/src/lib/internal/open-closed.ts
new file mode 100644
index 0000000..3217e0c
--- /dev/null
+++ b/src/lib/internal/open-closed.ts
@@ -0,0 +1,21 @@
+import { getContext, setContext } from "svelte";
+import type { Writable } from "svelte/store";
+
+export enum State {
+    Open,
+    Closed,
+}
+
+const OPEN_CLOSED_CONTEXT_NAME = "OpenClosed";
+export function hasOpenClosed() {
+    return useOpenClosed() !== undefined
+}
+
+export function useOpenClosed(): Writable<State> | undefined {
+    return getContext(OPEN_CLOSED_CONTEXT_NAME);
+}
+
+export function useOpenClosedProvider(value: Writable<State>) {
+    setContext(OPEN_CLOSED_CONTEXT_NAME, value);
+}
+
diff --git a/src/lib/utils/Render.svelte b/src/lib/utils/Render.svelte
new file mode 100644
index 0000000..8156a16
--- /dev/null
+++ b/src/lib/utils/Render.svelte
@@ -0,0 +1,6 @@
+<script lang="ts" context="module">
+    export enum RenderStrategy {
+        Unmount,
+        Hidden,
+    }
+</script>
diff --git a/src/lib/utils/calculate-active-index.ts b/src/lib/utils/calculate-active-index.ts
new file mode 100644
index 0000000..afdd9d7
--- /dev/null
+++ b/src/lib/utils/calculate-active-index.ts
@@ -0,0 +1,84 @@
+function assertNever(x: never): never {
+    throw new Error('Unexpected object: ' + x)
+}
+
+export enum Focus {
+    /** Focus the first non-disabled item. */
+    First,
+
+    /** Focus the previous non-disabled item. */
+    Previous,
+
+    /** Focus the next non-disabled item. */
+    Next,
+
+    /** Focus the last non-disabled item. */
+    Last,
+
+    /** Focus a specific item based on the `id` of the item. */
+    Specific,
+
+    /** Focus no items at all. */
+    Nothing,
+}
+
+export function calculateActiveIndex<TItem>(
+    action: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> },
+    resolvers: {
+        resolveItems(): TItem[]
+        resolveActiveIndex(): number | null
+        resolveId(item: TItem): string
+        resolveDisabled(item: TItem): boolean
+    }
+) {
+    let items = resolvers.resolveItems()
+    if (items.length <= 0) return null
+
+    let currentActiveIndex = resolvers.resolveActiveIndex()
+    let activeIndex = currentActiveIndex ?? -1
+
+    let nextActiveIndex = (() => {
+        switch (action.focus) {
+            case Focus.First:
+                return items.findIndex(item => !resolvers.resolveDisabled(item))
+
+            case Focus.Previous: {
+                let idx = items
+                    .slice()
+                    .reverse()
+                    .findIndex((item, idx, all) => {
+                        if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false
+                        return !resolvers.resolveDisabled(item)
+                    })
+                if (idx === -1) return idx
+                return items.length - 1 - idx
+            }
+
+            case Focus.Next:
+                return items.findIndex((item, idx) => {
+                    if (idx <= activeIndex) return false
+                    return !resolvers.resolveDisabled(item)
+                })
+
+            case Focus.Last: {
+                let idx = items
+                    .slice()
+                    .reverse()
+                    .findIndex(item => !resolvers.resolveDisabled(item))
+                if (idx === -1) return idx
+                return items.length - 1 - idx
+            }
+
+            case Focus.Specific:
+                return items.findIndex(item => resolvers.resolveId(item) === action.id)
+
+            case Focus.Nothing:
+                return null
+
+            default:
+                assertNever(action)
+        }
+    })()
+
+    return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex
+}
diff --git a/src/lib/utils/disposables.ts b/src/lib/utils/disposables.ts
new file mode 100644
index 0000000..ceec032
--- /dev/null
+++ b/src/lib/utils/disposables.ts
@@ -0,0 +1,33 @@
+export function disposables() {
+    let disposables: Function[] = []
+
+    let api = {
+        requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
+            let raf = requestAnimationFrame(...args)
+            api.add(() => cancelAnimationFrame(raf))
+        },
+
+        nextFrame(...args: Parameters<typeof requestAnimationFrame>) {
+            api.requestAnimationFrame(() => {
+                api.requestAnimationFrame(...args)
+            })
+        },
+
+        setTimeout(...args: Parameters<typeof setTimeout>) {
+            let timer = setTimeout(...args)
+            api.add(() => clearTimeout(timer))
+        },
+
+        add(cb: () => void) {
+            disposables.push(cb)
+        },
+
+        dispose() {
+            for (let dispose of disposables.splice(0)) {
+                dispose()
+            }
+        },
+    }
+
+    return api
+}
diff --git a/src/lib/utils/focus-management.ts b/src/lib/utils/focus-management.ts
new file mode 100644
index 0000000..af9b627
--- /dev/null
+++ b/src/lib/utils/focus-management.ts
@@ -0,0 +1,155 @@
+import { match } from './match'
+
+// Credit:
+//  - https://stackoverflow.com/a/30753870
+let focusableSelector = [
+    '[contentEditable=true]',
+    '[tabindex]',
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'iframe',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+]
+    .map(
+        process.env.NODE_ENV === 'test'
+            ? // TODO: Remove this once JSDOM fixes the issue where an element that is
+            // "hidden" can be the document.activeElement, because this is not possible
+            // in real browsers.
+            selector => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
+            : selector => `${selector}:not([tabindex='-1'])`
+    )
+    .join(',')
+
+export enum Focus {
+    /** Focus the first non-disabled element */
+    First = 1 << 0,
+
+    /** Focus the previous non-disabled element */
+    Previous = 1 << 1,
+
+    /** Focus the next non-disabled element */
+    Next = 1 << 2,
+
+    /** Focus the last non-disabled element */
+    Last = 1 << 3,
+
+    /** Wrap tab around */
+    WrapAround = 1 << 4,
+
+    /** Prevent scrolling the focusable elements into view */
+    NoScroll = 1 << 5,
+}
+
+export enum FocusResult {
+    Error,
+    Overflow,
+    Success,
+    Underflow,
+}
+
+enum Direction {
+    Previous = -1,
+    Next = 1,
+}
+
+export function getFocusableElements(container: HTMLElement | null = document.body) {
+    if (container == null) return []
+    return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
+}
+
+export enum FocusableMode {
+    /** The element itself must be focusable. */
+    Strict,
+
+    /** The element should be inside of a focusable element. */
+    Loose,
+}
+
+export function isFocusableElement(
+    element: HTMLElement,
+    mode: FocusableMode = FocusableMode.Strict
+) {
+    if (element === document.body) return false
+
+    return match(mode, {
+        [FocusableMode.Strict]() {
+            return element.matches(focusableSelector)
+        },
+        [FocusableMode.Loose]() {
+            let next: HTMLElement | null = element
+
+            while (next !== null) {
+                if (next.matches(focusableSelector)) return true
+                next = next.parentElement
+            }
+
+            return false
+        },
+    })
+}
+
+export function focusElement(element: HTMLElement | null) {
+    element?.focus({ preventScroll: true })
+}
+
+export function focusIn(container: HTMLElement | HTMLElement[], focus: Focus) {
+    let elements = Array.isArray(container) ? container : getFocusableElements(container)
+    let active = document.activeElement as HTMLElement
+
+    let direction = (() => {
+        if (focus & (Focus.First | Focus.Next)) return Direction.Next
+        if (focus & (Focus.Previous | Focus.Last)) return Direction.Previous
+
+        throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
+    })()
+
+    let startIndex = (() => {
+        if (focus & Focus.First) return 0
+        if (focus & Focus.Previous) return Math.max(0, elements.indexOf(active)) - 1
+        if (focus & Focus.Next) return Math.max(0, elements.indexOf(active)) + 1
+        if (focus & Focus.Last) return elements.length - 1
+
+        throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
+    })()
+
+    let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {}
+
+    let offset = 0
+    let total = elements.length
+    let next = undefined
+    do {
+        // Guard against infinite loops
+        if (offset >= total || offset + total <= 0) return FocusResult.Error
+
+        let nextIdx = startIndex + offset
+
+        if (focus & Focus.WrapAround) {
+            nextIdx = (nextIdx + total) % total
+        } else {
+            if (nextIdx < 0) return FocusResult.Underflow
+            if (nextIdx >= total) return FocusResult.Overflow
+        }
+
+        next = elements[nextIdx]
+
+        // Try the focus the next element, might not work if it is "hidden" to the user.
+        next?.focus(focusOptions)
+
+        // Try the next one in line
+        offset += direction
+    } while (next !== document.activeElement)
+
+    // This is a little weird, but let me try and explain: There are a few scenario's
+    // in chrome for example where a focused `<a>` tag does not get the default focus
+    // styles and sometimes they do. This highly depends on whether you started by
+    // clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
+    // then the active element (document.activeElement) is this anchor, which is expected.
+    // However in that case the default focus styles are not applied *unless* you
+    // also add this tabindex.
+    if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0')
+
+    return FocusResult.Success
+}
diff --git a/src/lib/utils/keyboard.ts b/src/lib/utils/keyboard.ts
new file mode 100644
index 0000000..b910fcd
--- /dev/null
+++ b/src/lib/utils/keyboard.ts
@@ -0,0 +1,21 @@
+// TODO: This must already exist somewhere, right? 🤔
+// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export enum Keys {
+    Space = ' ',
+    Enter = 'Enter',
+    Escape = 'Escape',
+    Backspace = 'Backspace',
+
+    ArrowLeft = 'ArrowLeft',
+    ArrowUp = 'ArrowUp',
+    ArrowRight = 'ArrowRight',
+    ArrowDown = 'ArrowDown',
+
+    Home = 'Home',
+    End = 'End',
+
+    PageUp = 'PageUp',
+    PageDown = 'PageDown',
+
+    Tab = 'Tab',
+}
diff --git a/src/lib/utils/match.ts b/src/lib/utils/match.ts
new file mode 100644
index 0000000..8295a4e
--- /dev/null
+++ b/src/lib/utils/match.ts
@@ -0,0 +1,20 @@
+export function match<TValue extends string | number = string, TReturnValue = unknown>(
+    value: TValue,
+    lookup: Record<TValue, TReturnValue | ((...args: any[]) => TReturnValue)>,
+    ...args: any[]
+): TReturnValue {
+    if (value in lookup) {
+        let returnValue = lookup[value]
+        return typeof returnValue === 'function' ? returnValue(...args) : returnValue
+    }
+
+    let error = new Error(
+        `Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(
+            lookup
+        )
+            .map(key => `"${key}"`)
+            .join(', ')}.`
+    )
+    if (Error.captureStackTrace) Error.captureStackTrace(error, match)
+    throw error
+}
diff --git a/src/lib/utils/once.ts b/src/lib/utils/once.ts
new file mode 100644
index 0000000..bd737c7
--- /dev/null
+++ b/src/lib/utils/once.ts
@@ -0,0 +1,9 @@
+export function once<T>(cb: (...args: T[]) => void) {
+    let state = { called: false }
+
+    return (...args: T[]) => {
+        if (state.called) return
+        state.called = true
+        return cb(...args)
+    }
+}
diff --git a/src/lib/utils/transition.ts b/src/lib/utils/transition.ts
new file mode 100644
index 0000000..9e3454e
--- /dev/null
+++ b/src/lib/utils/transition.ts
@@ -0,0 +1,95 @@
+import { once } from './once'
+import { disposables } from './disposables'
+
+function addClasses(node: HTMLElement, ...classes: string[]) {
+    node && classes.length > 0 && node.classList.add(...classes)
+}
+
+function removeClasses(node: HTMLElement, ...classes: string[]) {
+    node && classes.length > 0 && node.classList.remove(...classes)
+}
+
+export enum Reason {
+    Finished = 'finished',
+    Cancelled = 'cancelled',
+}
+
+function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
+    let d = disposables()
+
+    if (!node) return d.dispose
+
+    // Safari returns a comma separated list of values, so let's sort them and take the highest value.
+    let { transitionDuration, transitionDelay } = getComputedStyle(node)
+
+    let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(value => {
+        let [resolvedValue = 0] = value
+            .split(',')
+            // Remove falsy we can't work with
+            .filter(Boolean)
+            // Values are returned as `0.3s` or `75ms`
+            .map(v => (v.includes('ms') ? parseFloat(v) : parseFloat(v) * 1000))
+            .sort((a, z) => z - a)
+
+        return resolvedValue
+    })
+
+    // Waiting for the transition to end. We could use the `transitionend` event, however when no
+    // actual transition/duration is defined then the `transitionend` event is not fired.
+    //
+    // TODO: Downside is, when you slow down transitions via devtools this timeout is still using the
+    // full 100% speed instead of the 25% or 10%.
+    if (durationMs !== 0) {
+        d.setTimeout(() => {
+            done(Reason.Finished)
+        }, durationMs + delaysMs)
+    } else {
+        // No transition is happening, so we should cleanup already. Otherwise we have to wait until we
+        // get disposed.
+        done(Reason.Finished)
+    }
+
+    // If we get disposed before the timeout runs we should cleanup anyway
+    d.add(() => done(Reason.Cancelled))
+
+    return d.dispose
+}
+
+export function transition(
+    node: HTMLElement,
+    base: string[],
+    from: string[],
+    to: string[],
+    entered: string[],
+    done?: (reason: Reason) => void
+) {
+    let d = disposables()
+    let _done = done !== undefined ? once(done) : () => { }
+
+    removeClasses(node, ...entered)
+    addClasses(node, ...base, ...from)
+
+    d.nextFrame(() => {
+        removeClasses(node, ...from)
+        addClasses(node, ...to)
+
+        d.add(
+            waitForTransition(node, reason => {
+                removeClasses(node, ...to, ...base)
+                addClasses(node, ...entered)
+                return _done(reason)
+            })
+        )
+    })
+
+    // Once we get disposed, we should ensure that we cleanup after ourselves. In case of an unmount,
+    // the node itself will be nullified and will be a no-op. In case of a full transition the classes
+    // are already removed which is also a no-op. However if you go from enter -> leave mid-transition
+    // then we have some leftovers that should be cleaned.
+    d.add(() => removeClasses(node, ...base, ...from, ...to, ...entered))
+
+    // When we get disposed early, than we should also call the done method but switch the reason.
+    d.add(() => _done(Reason.Cancelled))
+
+    return d.dispose
+}
diff --git a/src/lib/utils/tree-walker.ts b/src/lib/utils/tree-walker.ts
new file mode 100644
index 0000000..e990ea6
--- /dev/null
+++ b/src/lib/utils/tree-walker.ts
@@ -0,0 +1,28 @@
+type AcceptNode = (
+    node: HTMLElement
+) =>
+    | typeof NodeFilter.FILTER_ACCEPT
+    | typeof NodeFilter.FILTER_SKIP
+    | typeof NodeFilter.FILTER_REJECT
+
+export function treeWalker({
+    container,
+    accept,
+    walk,
+    enabled,
+}: {
+    container: HTMLElement | null
+    accept: AcceptNode
+    walk(node: HTMLElement): void
+    enabled?: boolean
+}) {
+    let root = container
+    if (!root) return
+    if (enabled !== undefined && !enabled) return
+
+    let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
+    // @ts-ignore-error Typescript bug thinks this can only have 3 args
+    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, acceptNode, false)
+
+    while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
+}