Run prettier over everything and fix some imports

2021-12-13 18:22:16 -08:00
parent 3bf974a654
commit 82b138f0ae
63 changed files with 3317 additions and 3319 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,20 +1,24 @@
 module.exports = {
  root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["svelte3", "@typescript-eslint"],
+  ignorePatterns: ["*.cjs"],
+  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
  settings: {
-		'svelte3/typescript': () => require('typescript')
+    "svelte3/typescript": () => require("typescript"),
  },
  parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
+    sourceType: "module",
+    ecmaVersion: 2020,
  },
  env: {
    browser: true,
    es2017: true,
-		node: true
-	}
+    node: true,
+  },
 };
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
 # svelte-headlessui
+
 Unofficial Svelte port of Headless UI components (https://headlessui.dev/)
--- a/src/lib/components/description/Description.svelte
+++ b/src/lib/components/description/Description.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";
  import { getContext, onMount } from "svelte";
-    import { Writable } from "svelte/store";
-    import { DescriptionContext } from "./DescriptionProvider.svelte";
+  import type { Writable } from "svelte/store";
+  import type { DescriptionContext } from "./DescriptionProvider.svelte";
  const id = `headlessui-description-${useId()}`;
  let contextStore: Writable<DescriptionContext> | undefined = getContext(
    "headlessui-description-context"
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -1,10 +1,5 @@
 <script lang="ts" context="module">
-    import {
-        getContext,
-        setContext,
-        createEventDispatcher,
-        tick,
-    } from "svelte";
+  import { getContext, setContext, createEventDispatcher, tick } from "svelte";
  export enum DialogStates {
    Open,
    Closed,
@@ -38,17 +33,17 @@
 </script>

 <script lang="ts">
-    import { State } from "./open-closed";
+  import { State } from "$lib/internal/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 { match } from "$lib/utils/match";
+  import { useId } from "$lib/hooks/use-id";
+  import { useInertOthers } from "$lib/hooks/use-inert-others";
+  import { contains } from "$lib/internal/dom-containers";
+  import { Keys } from "$lib/utils/keyboard";
+  import FocusTrap from "$lib/components/FocusTrap/FocusTrap.svelte";
  import StackContextProvider, {
    StackMessage,
-    } from "./StackContextProvider.svelte";
+  } from "$lib/internal/StackContextProvider.svelte";
  import DescriptionProvider from "./DescriptionProvider.svelte";
  import ForcePortalRootContext from "./ForcePortalRootContext.svelte";
  import Portal from "./Portal.svelte";
@@ -204,7 +199,7 @@
  on:mousedown={handleWindowMousedown}
  on:keydown={handleWindowKeydown}
 />
-{#if open}
+{#if visible}
  <FocusTrap {containers} {enabled} options={{ initialFocus }} />
  <StackContextProvider
    element={internalDialogRef}
@@ -223,10 +218,7 @@
      <Portal>
        <PortalGroup target={internalDialogRef}>
          <ForcePortalRootContext force={false}>
-                        <DescriptionProvider
-                            name={"Dialog.Description"}
-                            let:describedby
-                        >
+            <DescriptionProvider name={"Dialog.Description"} let:describedby>
              <div
                {...{ ...$$restProps, ...propsWeControl }}
                aria-describedby={describedby}
--- a/src/lib/components/dialog/DialogOverlay.svelte
+++ b/src/lib/components/dialog/DialogOverlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { DialogStates, useDialogContext } from "./Dialog.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";
  let api = useDialogContext("DialogOverlay");
  let id = `headlessui-dialog-overlay-${useId()}`;
  function handleClick(event: MouseEvent) {
--- a/src/lib/components/dialog/DialogTitle.svelte
+++ b/src/lib/components/dialog/DialogTitle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { DialogStates, useDialogContext } from "./Dialog.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";
  import { onMount } from "svelte";
  let api = useDialogContext("DialogTitle");
  let id = `headlessui-dialog-title-${useId()}`;
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -27,8 +27,9 @@
  export function useDisclosureContext(
    component: string
  ): Writable<StateDefinition | undefined> {
-        let context: Writable<StateDefinition | undefined> | undefined =
-            getContext(DISCLOSURE_CONTEXT_NAME);
+    let context: Writable<StateDefinition | undefined> | undefined = getContext(
+      DISCLOSURE_CONTEXT_NAME
+    );

    if (context === undefined) {
      throw new Error(
@@ -41,9 +42,9 @@
 </script>

 <script lang="ts">
-    import { useId } from "./use-id";
-    import { match } from "./match";
-    import { State } from "./open-closed";
+  import { useId } from "$lib/hooks/use-id";
+  import { match } from "$lib/utils/match";
+  import { State } from "$lib/internal/open-closed";
  export let defaultOpen = false;
  let buttonId = `headlessui-disclosure-button-${useId()}`;
  let panelId = `headlessui-disclosure-panel-${useId()}`;
@@ -78,8 +79,7 @@

      let restoreElement = (() => {
        if (!focusableElement) return $buttonStore;
-                if (focusableElement instanceof HTMLElement)
-                    return focusableElement;
+        if (focusableElement instanceof HTMLElement) return focusableElement;

        return $buttonStore;
      })();
@@ -98,8 +98,5 @@
 </script>

 <div {...$$restProps}>
-    <slot
-        open={disclosureState === DisclosureStates.Open}
-        close={$api?.close}
-    />
+  <slot open={disclosureState === DisclosureStates.Open} close={$api?.close} />
 </div>
--- a/src/lib/components/disclosure/DisclosureButton.svelte
+++ b/src/lib/components/disclosure/DisclosureButton.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-    import {
-        useDisclosureContext,
-        DisclosureStates,
-    } from "./Disclosure.svelte";
+  import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
  import { usePanelContext } from "./DisclosurePanel.svelte";
-    import { useId } from "./use-id";
-    import { Keys } from "./keyboard";
+  import { useId } from "$lib/hooks/use-id";
+  import { Keys } from "$lib/utils/keyboard";
  export let disabled = false;
  const api = useDisclosureContext("DisclosureButton");
  const panelContext = usePanelContext();
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -8,12 +8,9 @@
 </script>

 <script lang="ts">
-    import {
-        useDisclosureContext,
-        DisclosureStates,
-    } from "./Disclosure.svelte";
-    import { Writable } from "svelte/store";
-    import { State } from "./open-closed";
+  import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
+  import type { Writable } from "svelte/store";
+  import { State } from "$lib/internal/open-closed";
  const api = useDisclosureContext("DisclosureButton");
  $: id = $api?.panelId;
  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
--- a/src/lib/components/focus-trap/FocusTrap.svelte
+++ b/src/lib/components/focus-trap/FocusTrap.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { Keys } from "./keyboard";
+  import { Keys } from "$lib/utils/keyboard";
  import {
    focusElement,
    focusIn,
    Focus,
    FocusResult,
-    } from "./focus-management";
-    import { contains } from "./dom-containers";
+  } from "$lib/utils/focus-management";
+  import { contains } from "$lib/internal/dom-containers";
  import { afterUpdate, onMount, onDestroy } from "svelte";

  export let containers: Set<HTMLElement>;
@@ -85,8 +85,7 @@
    for (let element of containers) {
      let result = focusIn(
        element,
-                (event.shiftKey ? Focus.Previous : Focus.Next) |
-                    Focus.WrapAround
+        (event.shiftKey ? Focus.Previous : Focus.Next) | Focus.WrapAround
      );

      if (result === FocusResult.Success) {
--- a/src/lib/components/label/Label.svelte
+++ b/src/lib/components/label/Label.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";
  import { getContext, onMount } from "svelte";
-    import { Writable } from "svelte/store";
-    import { LabelContext } from "./LabelProvider.svelte";
+  import type { Writable } from "svelte/store";
+  import type { LabelContext } from "./LabelProvider.svelte";
  const id = `headlessui-label-${useId()}`;
  export let passive = false;
  let contextStore: Writable<LabelContext> | undefined = getContext(
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -37,11 +37,14 @@
 </script>

 <script lang="ts">
-    import { Focus, calculateActiveIndex } from "./calculate-active-index";
+  import {
+    Focus,
+    calculateActiveIndex,
+  } from "$lib/utils/calculate-active-index";
  import { createEventDispatcher, setContext } from "svelte";
  import { writable, Writable } from "svelte/store";
-    import { match } from "./match";
-    import { State, useOpenClosedProvider } from "./open-closed";
+  import { match } from "$lib/utils/match";
+  import { State, useOpenClosedProvider } from "$lib/internal/open-closed";

  const dispatch = createEventDispatcher();

@@ -116,10 +119,7 @@
        }
      );

-            if (
-                searchQuery === "" &&
-                activeOptionIndex === nextActiveOptionIndex
-            )
+      if (searchQuery === "" && activeOptionIndex === nextActiveOptionIndex)
        return;
      activeOptionIndex = nextActiveOptionIndex;
      searchQuery = "";
@@ -131,8 +131,7 @@
      searchQuery += value.toLowerCase();

      let match = options.findIndex(
-                (option) =>
-                    !option.disabled && option.textValue.startsWith(searchQuery)
+        (option) => !option.disabled && option.textValue.startsWith(searchQuery)
      );

      if (match === -1 || match === activeOptionIndex) return;
@@ -151,9 +150,7 @@
    unregisterOption(id: string) {
      let nextOptions = options.slice();
      let currentActiveOption =
-                activeOptionIndex !== null
-                    ? nextOptions[activeOptionIndex]
-                    : null;
+        activeOptionIndex !== null ? nextOptions[activeOptionIndex] : null;
      let idx = nextOptions.findIndex((a) => a.id === id);
      if (idx !== -1) nextOptions.splice(idx, 1);
      options = nextOptions;
--- a/src/lib/components/listbox/ListboxButton.svelte
+++ b/src/lib/components/listbox/ListboxButton.svelte
@@ -1,9 +1,9 @@
 <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";
+  import { useId } from "$lib/hooks/use-id";
+  import { Keys } from "$lib/utils/keyboard";
+  import { Focus } from "$lib/utils/calculate-active-index";
  let api: SvelteStore<StateDefinition> = getContext("api");
  let id = `headlessui-listbox-button-${useId()}`;
  let buttonStore: SvelteStore<HTMLButtonElement> = getContext("buttonStore");
--- a/src/lib/components/listbox/ListboxLabel.svelte
+++ b/src/lib/components/listbox/ListboxLabel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { getContext } from "svelte";
  import { ListboxStates, StateDefinition } from "./Listbox.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";
  let api: SvelteStore<StateDefinition> = getContext("api");
  let id = `headlessui-listbox-label-${useId()}`;
  let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
--- a/src/lib/components/listbox/ListboxOption.svelte
+++ b/src/lib/components/listbox/ListboxOption.svelte
@@ -1,8 +1,8 @@
 <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";
+  import { useId } from "$lib/hooks/use-id";
+  import { Focus } from "$lib/utils/calculate-active-index";
  export let value: any;
  export let disabled = false;
  let api: SvelteStore<StateDefinition> = getContext("api");
@@ -48,9 +48,7 @@
    }
    if (newState !== oldState || newActive !== oldActive) {
      if (newState === ListboxStates.Open && newActive) {
-                document
-                    .getElementById(id)
-                    ?.scrollIntoView?.({ block: "nearest" });
+        document.getElementById(id)?.scrollIntoView?.({ block: "nearest" });
      }
    }
    oldState = newState;
--- a/src/lib/components/listbox/ListboxOptions.svelte
+++ b/src/lib/components/listbox/ListboxOptions.svelte
@@ -1,15 +1,14 @@
 <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";
+  import { useId } from "$lib/hooks/use-id";
+  import { match } from "$lib/utils/match";
+  import { Keys } from "$lib/utils/keyboard";
+  import { Focus } from "$lib/utils/calculate-active-index";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
  let api: SvelteStore<StateDefinition> = getContext("api");
  let id = `headlessui-listbox-options-${useId()}`;
-    let optionsStore: SvelteStore<HTMLUListElement> =
-        getContext("optionsStore");
+  let optionsStore: SvelteStore<HTMLUListElement> = getContext("optionsStore");

  let searchDebounce: ReturnType<typeof setTimeout> | null = null;
  async function handleKeyDown(event: KeyboardEvent) {
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -1,9 +1,12 @@
 <script lang="ts" context="module">
-    import { Focus, calculateActiveIndex } from "./calculate-active-index";
+  import {
+    Focus,
+    calculateActiveIndex,
+  } from "$lib/utils/calculate-active-index";
  import { getContext, setContext } from "svelte";
  import { writable, Writable } from "svelte/store";
-    import { State } from "./open-closed";
-    import { match } from "./match";
+  import { State } from "$lib/internal/open-closed";
+  import { match } from "$lib/utils/match";
  export enum MenuStates {
    Open,
    Closed,
@@ -81,8 +84,7 @@
        }
      );

-            if (searchQuery === "" && activeItemIndex === nextActiveItemIndex)
-                return;
+      if (searchQuery === "" && activeItemIndex === nextActiveItemIndex) return;
      searchQuery = "";
      activeItemIndex = nextActiveItemIndex;
    },
@@ -91,8 +93,7 @@

      let match = items.findIndex(
        (item) =>
-                    item.data.textValue.startsWith(searchQuery) &&
-                    !item.data.disabled
+          item.data.textValue.startsWith(searchQuery) && !item.data.disabled
      );

      if (match === -1 || match === activeItemIndex) return;
@@ -132,8 +133,7 @@

    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 });
+    if (!event.defaultPrevented) $buttonStore?.focus({ preventScroll: true });
  }

  let openClosedState: Writable<State> | undefined = writable();
--- a/src/lib/components/menu/MenuButton.svelte
+++ b/src/lib/components/menu/MenuButton.svelte
@@ -1,8 +1,8 @@
 <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 { useId } from "$lib/hooks/use-id";
+  import { Keys } from "$lib/utils/keyboard";
+  import { Focus } from "$lib/utils/calculate-active-index";
  import { tick } from "svelte";
  export let disabled = false;
  const api = useMenuContext("MenuButton");
@@ -66,9 +66,7 @@
    id,
    "aria-haspopup": true,
    "aria-controls": $itemsStore?.id,
-        "aria-expanded": disabled
-            ? undefined
-            : $api.menuState === MenuStates.Open,
+    "aria-expanded": disabled ? undefined : $api.menuState === MenuStates.Open,
  };
 </script>

--- a/src/lib/components/menu/MenuItem.svelte
+++ b/src/lib/components/menu/MenuItem.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { useMenuContext, MenuStates, MenuItemData } from "./Menu.svelte";
-    import { useId } from "./use-id";
-    import { Focus } from "./calculate-active-index";
+  import { useId } from "$lib/hooks/use-id";
+  import { Focus } from "$lib/utils/calculate-active-index";
  import { afterUpdate, onDestroy, onMount, tick } from "svelte";
  export let disabled = false;
  const api = useMenuContext("MenuItem");
--- a/src/lib/components/menu/MenuItems.svelte
+++ b/src/lib/components/menu/MenuItems.svelte
@@ -1,12 +1,12 @@
 <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 { useId } from "$lib/hooks/use-id";
+  import { Keys } from "$lib/utils/keyboard";
+  import { Focus } from "$lib/utils/calculate-active-index";
+  import { treeWalker } from "$lib/utils/tree-walker";
+  import { State } from "$lib/internal/open-closed";
  import { getContext, tick } from "svelte";
-    import { Writable } from "svelte/store";
+  import type { Writable } from "svelte/store";
  const api = useMenuContext("MenuButton");
  const id = `headlessui-menu-items-${useId()}`;
  let searchDebounce: ReturnType<typeof setTimeout> | null = null;
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -27,10 +27,13 @@
 </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 { match } from "$lib/utils/match";
+  import { useId } from "$lib/hooks/use-id";
+  import {
+    isFocusableElement,
+    FocusableMode,
+  } from "$lib/utils/focus-management";
+  import { State } from "$lib/internal/open-closed";
  import type { PopoverGroupContext } from "./PopoverGroup.svelte";
  import { getContext, setContext, onMount } from "svelte";
  import { writable, Writable } from "svelte/store";
@@ -79,8 +82,7 @@

      let restoreElement = (() => {
        if (!focusableElement) return $api.button;
-                if (focusableElement instanceof HTMLElement)
-                    return focusableElement;
+        if (focusableElement instanceof HTMLElement) return focusableElement;

        return $api.button;
      })();
--- a/src/lib/components/popover/PopoverButton.svelte
+++ b/src/lib/components/popover/PopoverButton.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { Keys } from "./keyboard";
-    import { getFocusableElements, Focus, focusIn } from "./focus-management";
+  import { Keys } from "$lib/utils/keyboard";
+  import {
+    getFocusableElements,
+    Focus,
+    focusIn,
+  } from "$lib/utils/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");
+  let buttonStore: Writable<HTMLButtonElement> = getContext("PopoverButtonRef");
  export let disabled: Boolean = false;
  let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");

@@ -75,10 +78,8 @@
          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;
+            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();
--- a/src/lib/components/popover/PopoverGroup.svelte
+++ b/src/lib/components/popover/PopoverGroup.svelte
@@ -8,7 +8,7 @@
 </script>

 <script lang="ts">
-    import { PopoverRegisterBag } from "./Popover.svelte";
+  import type { PopoverRegisterBag } from "./Popover.svelte";
  import { setContext } from "svelte";
  let groupRef: HTMLDivElement | undefined;
  let popovers: PopoverRegisterBag[] = [];
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { State } from "./open-closed";
+  import { State } from "$lib/internal/open-closed";
  import { getContext } from "svelte";
  import type { Writable } from "svelte/store";
  import { PopoverStates, StateDefinition } from "./Popover.svelte";
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -3,14 +3,14 @@
 </script>

 <script lang="ts">
-    import { Keys } from "./keyboard";
-    import { State } from "./open-closed";
+  import { Keys } from "$lib/utils/keyboard";
+  import { State } from "$lib/internal/open-closed";
  import {
    getFocusableElements,
    Focus,
    FocusResult,
    focusIn,
-    } from "./focus-management";
+  } from "$lib/utils/focus-management";
  import { getContext, setContext, onMount } from "svelte";
  import type { Writable } from "svelte/store";
  import { PopoverStates, StateDefinition } from "./Popover.svelte";
@@ -109,9 +109,6 @@
 />
 {#if visible}
  <div {...$$restProps} on:keydown={handleKeydown} bind:this={$panelStore}>
-        <slot
-            open={$api.popoverState === PopoverStates.Open}
-            close={$api.close}
-        />
+    <slot open={$api.popoverState === PopoverStates.Open} close={$api.close} />
  </div>
 {/if}
--- a/src/lib/components/portal/Portal.svelte
+++ b/src/lib/components/portal/Portal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { usePortalGroupContext } from "./PortalGroup.svelte";
-    import { usePortalRoot } from "./ForcePortalRootContext.svelte";
-    import { portal } from "./use-portal";
+  import { usePortalRoot } from "$lib/internal/ForcePortalRootContext.svelte";
+  import { portal } from "$lib/hooks/use-portal";
  let forceInRoot = usePortalRoot();
  let groupTarget = usePortalGroupContext();
  $: target = (() => {
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -3,9 +3,9 @@
  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";
+  import { Focus, focusIn, FocusResult } from "$lib/utils/focus-management";
+  import { Keys } from "$lib/utils/keyboard";
+  import { useId } from "$lib/hooks/use-id";
  export interface Option {
    id: string;
    element: HTMLElement | null;
@@ -45,7 +45,7 @@
 </script>

 <script lang="ts">
-    import { treeWalker } from "./use-tree-walker";
+  import { treeWalker } from "$lib/hooks/use-tree-walker";
  export let disabled = false;
  export let value: any;
  let radioGroupRef: HTMLElement | null = null;
@@ -112,18 +112,13 @@
          event.preventDefault();
          event.stopPropagation();

-                    let result = focusIn(
-                        all,
-                        Focus.Previous | Focus.WrapAround
-                    );
+          let result = focusIn(all, Focus.Previous | Focus.WrapAround);

          if (result === FocusResult.Success) {
            let activeOption = options.find(
-                            (option) =>
-                                option.element === document.activeElement
+              (option) => option.element === document.activeElement
            );
-                        if (activeOption)
-                            $api.change(activeOption.propsRef.value);
+            if (activeOption) $api.change(activeOption.propsRef.value);
          }
        }
        break;
@@ -138,11 +133,9 @@

          if (result === FocusResult.Success) {
            let activeOption = options.find(
-                            (option) =>
-                                option.element === document.activeElement
+              (option) => option.element === document.activeElement
            );
-                        if (activeOption)
-                            $api.change(activeOption.propsRef.value);
+            if (activeOption) $api.change(activeOption.propsRef.value);
          }
        }
        break;
--- a/src/lib/components/radio-group/RadioGroupOption.svelte
+++ b/src/lib/components/radio-group/RadioGroupOption.svelte
@@ -4,7 +4,7 @@
  import LabelProvider from "./LabelProvider.svelte";

  import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";

  enum OptionState {
    Empty = 1 << 0,
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -1,11 +1,11 @@
 <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 type { StateDefinition } from "./SwitchGroup.svelte";
+  import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
+  import type { DescriptionContext } from "$lib/components/description/DescriptionProvider.svelte";
+  import { useId } from "$lib/hooks/use-id";
+  import { Keys } from "$lib/utils/keyboard";
  import { getContext, createEventDispatcher } from "svelte";
-    import { Writable } from "svelte/store";
+  import type { Writable } from "svelte/store";

  const dispatch = createEventDispatcher();
  export let checked = false;
@@ -13,8 +13,9 @@
  let labelContext: Writable<LabelContext> | undefined = getContext(
    "headlessui-label-context"
  );
-    let descriptionContext: Writable<DescriptionContext> | undefined =
-        getContext("headlessui-description-context");
+  let descriptionContext: Writable<DescriptionContext> | undefined = getContext(
+    "headlessui-description-context"
+  );
  let id = `headlessui-switch-${useId()}`;
  $: switchStore = $api?.switchStore;
  let internalSwitchRef = null;
--- a/src/lib/components/tabs/Tab.svelte
+++ b/src/lib/components/tabs/Tab.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
  import { onMount } from "svelte";
-    import { Focus, focusIn } from "./focus-management";
-    import { Keys } from "./keyboard";
-    import { match } from "./match";
+  import { Focus, focusIn } from "$lib/utils/focus-management";
+  import { Keys } from "$lib/utils/keyboard";
+  import { match } from "$lib/utils/match";

  import { useTabsContext } from "./TabGroup.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";

  export let disabled = false;

--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -97,9 +97,7 @@

    // Overflow
    else if (defaultIndex > $api.tabs.length) {
-            selectedIndex = tabs.indexOf(
-                focusableTabs[focusableTabs.length - 1]
-            );
+      selectedIndex = tabs.indexOf(focusableTabs[focusableTabs.length - 1]);
    }

    // Middle
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { useTabsContext } from "./TabGroup.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";

  let api = useTabsContext("TabPanel");
  let id = `headlessui-tabs-panel-${useId()}`;
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-    import {
-        createEventDispatcher,
-        getContext,
-        onMount,
-        setContext,
-    } from "svelte";
+  import { createEventDispatcher, 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 { match } from "$lib/utils/match";
+  import { State } from "$lib/internal/open-closed";
+  import { Reason, transition } from "$lib/utils/transition";

  import {
    hasChildren,
@@ -19,7 +14,7 @@
    useParentNesting,
    useTransitionContext,
  } from "./TransitionRoot.svelte";
-    import { useId } from "./use-id";
+  import { useId } from "$lib/hooks/use-id";

  export let unmount = true;
  export let enter = "";
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -54,9 +54,7 @@
      | { children: NestingContextValues["children"] }
  ): boolean {
    if ("children" in bag) return hasChildren(bag.children);
-        return (
-            bag.filter(({ state }) => state === TreeStates.Visible).length > 0
-        );
+    return bag.filter(({ state }) => state === TreeStates.Visible).length > 0;
  }

  export function useNesting(done?: () => void) {
@@ -67,9 +65,7 @@
    onDestroy(() => (mounted = false));

    function unregister(childId: ID, strategy = RenderStrategy.Hidden) {
-            let idx = transitionableChildren.findIndex(
-                ({ id }) => id === childId
-            );
+      let idx = transitionableChildren.findIndex(({ id }) => id === childId);
      if (idx === -1) return;

      match(strategy, {
@@ -112,11 +108,11 @@
  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 { match } from "$lib/utils/match";
+  import { State } from "$lib/internal/open-closed";
+  import { RenderStrategy } from "$lib/utils/Render.svelte";
  import TransitionChild from "./TransitionChild.svelte";
-    import type { useId } from "./use-id";
+  import type { useId } from "$lib/hooks/use-id";

  export let show: boolean;
  export let unmount = true;
--- a/src/lib/hooks/use-id.ts
+++ b/src/lib/hooks/use-id.ts
@@ -1,8 +1,8 @@
-let id = 0
+let id = 0;
 function generateId() {
-    return ++id
+  return ++id;
 }

 export function useId() {
-    return generateId()
+  return generateId();
 }
--- a/src/lib/hooks/use-inert-others.ts
+++ b/src/lib/hooks/use-inert-others.ts
@@ -1,100 +1,103 @@
-let interactables = new Set<HTMLElement>()
-let originals = new Map<HTMLElement, { 'aria-hidden': string | null; inert: boolean }>()
+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')
+  element.setAttribute("aria-hidden", "true");
  // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
-    element.inert = true
+  element.inert = true;
 }

 function restore(element: HTMLElement) {
-    let original = originals.get(element)
-    if (!original) return
+  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'])
+  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
+  element.inert = original.inert;
 }

 export function useInertOthers<TElement extends HTMLElement>(
  container: TElement | null,
  enabled: boolean = true
 ) {
-    if (!enabled) return
-    if (!container) return
+  if (!enabled) return;
+  if (!container) return;

-    let element = container
+  let element = container;

  // Mark myself as an interactable element
-    interactables.add(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)
+      restore(original);
+      originals.delete(original);
    }
  }

  // Collect direct children of the body
-    document.querySelectorAll('body > *').forEach(child => {
-        if (!(child instanceof HTMLElement)) return // Skip non-HTMLElements
+  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
+      if (child.contains(interactable)) return;
    }

    // Keep track of the elements
    if (interactables.size === 1) {
      originals.set(child, {
-                'aria-hidden': child.getAttribute('aria-hidden'),
+        "aria-hidden": child.getAttribute("aria-hidden"),
        // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
        inert: child.inert,
-            })
+      });

      // Mutate the element
-            inert(child)
+      inert(child);
    }
-    })
+  });

  return () => {
    // Inert is disabled on the current element
-        interactables.delete(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
+      document.querySelectorAll("body > *").forEach((child) => {
+        if (!(child instanceof HTMLElement)) return; // Skip non-HTMLElements

        // Skip already inert parents
-                if (originals.has(child)) return
+        if (originals.has(child)) return;

        // Skip the interactables, and the parents of the interactables
        for (let interactable of interactables) {
-                    if (child.contains(interactable)) return
+          if (child.contains(interactable)) return;
        }

        originals.set(child, {
-                    'aria-hidden': child.getAttribute('aria-hidden'),
+          "aria-hidden": child.getAttribute("aria-hidden"),
          // @ts-expect-error `inert` does not exist on HTMLElement (yet!)
          inert: child.inert,
-                })
+        });

        // Mutate the element
-                inert(child)
-            })
+        inert(child);
+      });
    } else {
      for (let element of originals.keys()) {
        // Restore
-                restore(element)
+        restore(element);

        // Cleanup
-                originals.delete(element)
-            }
+        originals.delete(element);
      }
    }
+  };
 }
--- a/src/lib/hooks/use-portal.ts
+++ b/src/lib/hooks/use-portal.ts
@@ -10,5 +10,5 @@ export function portal(element: HTMLElement, target: HTMLElement) {
        target.parentElement?.removeChild(target);
      }
    },
-    }
+  };
 }
--- a/src/lib/hooks/use-tree-walker.ts
+++ b/src/lib/hooks/use-tree-walker.ts
@@ -3,7 +3,7 @@ type AcceptNode = (
 ) =>
  | typeof NodeFilter.FILTER_ACCEPT
  | typeof NodeFilter.FILTER_SKIP
-    | typeof NodeFilter.FILTER_REJECT
+  | typeof NodeFilter.FILTER_REJECT;

 export function treeWalker({
  container,
@@ -11,18 +11,25 @@ export function treeWalker({
  walk,
  enabled,
 }: {
-    container: HTMLElement | null
-    accept: AcceptNode
-    walk(node: HTMLElement): void
-    enabled?: boolean
+  container: HTMLElement | null;
+  accept: AcceptNode;
+  walk(node: HTMLElement): void;
+  enabled?: boolean;
 }) {
-    let root = container
-    if (!root) return
-    if (enabled !== undefined && !enabled) return
+  let root = container;
+  if (!root) return;
+  if (enabled !== undefined && !enabled) return;

-    let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
+  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)
+  let walker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_ELEMENT,
+    acceptNode,
+    false
+  );

-    while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
+  while (walker.nextNode()) walk(walker.currentNode as HTMLElement);
 }
--- a/src/lib/internal/ForcePortalRootContext.svelte
+++ b/src/lib/internal/ForcePortalRootContext.svelte
@@ -1,8 +1,7 @@
 <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";
+  const FORCE_PORTAL_ROOT_CONTEXT_NAME = "headlessui-force-portal-root-context";

  export function usePortalRoot(): Writable<boolean> | undefined {
    return getContext(FORCE_PORTAL_ROOT_CONTEXT_NAME);
--- a/src/lib/internal/StackContextProvider.svelte
+++ b/src/lib/internal/StackContextProvider.svelte
@@ -8,10 +8,7 @@
 <script lang="ts">
  import { getContext, setContext } from "svelte";
  import { writable, Writable } from "svelte/store";
-    type OnUpdate = (
-        message: StackMessage,
-        element: HTMLElement | null
-    ) => void;
+  type OnUpdate = (message: StackMessage, element: HTMLElement | null) => void;

  export let onUpdate: OnUpdate | undefined;
  export let element: HTMLElement | null;
--- a/src/lib/internal/dom-containers.ts
+++ b/src/lib/internal/dom-containers.ts
@@ -1,7 +1,7 @@
 export function contains(containers: Set<HTMLElement>, element: HTMLElement) {
  for (let container of containers) {
-        if (container.contains(element)) return true
+    if (container.contains(element)) return true;
  }

-    return false
+  return false;
 }
--- a/src/lib/internal/open-closed.ts
+++ b/src/lib/internal/open-closed.ts
@@ -8,7 +8,7 @@ export enum State {

 const OPEN_CLOSED_CONTEXT_NAME = "OpenClosed";
 export function hasOpenClosed() {
-    return useOpenClosed() !== undefined
+  return useOpenClosed() !== undefined;
 }

 export function useOpenClosed(): Writable<State> | undefined {
@@ -18,4 +18,3 @@ export function useOpenClosed(): Writable<State> | undefined {
 export function useOpenClosedProvider(value: Writable<State>) {
  setContext(OPEN_CLOSED_CONTEXT_NAME, value);
 }
-
--- a/src/lib/utils/calculate-active-index.ts
+++ b/src/lib/utils/calculate-active-index.ts
@@ -1,5 +1,5 @@
 function assertNever(x: never): never {
-    throw new Error('Unexpected object: ' + x)
+  throw new Error("Unexpected object: " + x);
 }

 export enum Focus {
@@ -23,62 +23,67 @@ export enum Focus {
 }

 export function calculateActiveIndex<TItem>(
-    action: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> },
+  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
+    resolveItems(): TItem[];
+    resolveActiveIndex(): number | null;
+    resolveId(item: TItem): string;
+    resolveDisabled(item: TItem): boolean;
  }
 ) {
-    let items = resolvers.resolveItems()
-    if (items.length <= 0) return null
+  let items = resolvers.resolveItems();
+  if (items.length <= 0) return null;

-    let currentActiveIndex = resolvers.resolveActiveIndex()
-    let activeIndex = currentActiveIndex ?? -1
+  let currentActiveIndex = resolvers.resolveActiveIndex();
+  let activeIndex = currentActiveIndex ?? -1;

  let nextActiveIndex = (() => {
    switch (action.focus) {
      case Focus.First:
-                return items.findIndex(item => !resolvers.resolveDisabled(item))
+        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
+            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)
-                })
+          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
+          .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)
+        return items.findIndex(
+          (item) => resolvers.resolveId(item) === action.id
+        );

      case Focus.Nothing:
-                return null
+        return null;

      default:
-                assertNever(action)
+        assertNever(action);
    }
-    })()
+  })();

-    return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex
+  return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
 }
--- a/src/lib/utils/disposables.ts
+++ b/src/lib/utils/disposables.ts
@@ -1,33 +1,33 @@
 export function disposables() {
-    let disposables: Function[] = []
+  let disposables: Function[] = [];

  let api = {
    requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
-            let raf = requestAnimationFrame(...args)
-            api.add(() => cancelAnimationFrame(raf))
+      let raf = requestAnimationFrame(...args);
+      api.add(() => cancelAnimationFrame(raf));
    },

    nextFrame(...args: Parameters<typeof requestAnimationFrame>) {
      api.requestAnimationFrame(() => {
-                api.requestAnimationFrame(...args)
-            })
+        api.requestAnimationFrame(...args);
+      });
    },

    setTimeout(...args: Parameters<typeof setTimeout>) {
-            let timer = setTimeout(...args)
-            api.add(() => clearTimeout(timer))
+      let timer = setTimeout(...args);
+      api.add(() => clearTimeout(timer));
    },

    add(cb: () => void) {
-            disposables.push(cb)
+      disposables.push(cb);
    },

    dispose() {
      for (let dispose of disposables.splice(0)) {
-                dispose()
+        dispose();
      }
    },
-    }
+  };

-    return api
+  return api;
 }
--- a/src/lib/utils/focus-management.ts
+++ b/src/lib/utils/focus-management.ts
@@ -1,27 +1,28 @@
-import { match } from './match'
+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])',
+  "[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'
+    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'])`
+        (selector) =>
+          `${selector}:not([tabindex='-1']):not([style*='display: none'])`
+      : (selector) => `${selector}:not([tabindex='-1'])`
  )
-    .join(',')
+  .join(",");

 export enum Focus {
  /** Focus the first non-disabled element */
@@ -55,9 +56,11 @@ enum Direction {
  Next = 1,
 }

-export function getFocusableElements(container: HTMLElement | null = document.body) {
-    if (container == null) return []
-    return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
+export function getFocusableElements(
+  container: HTMLElement | null = document.body
+) {
+  if (container == null) return [];
+  return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector));
 }

 export enum FocusableMode {
@@ -72,75 +75,82 @@ export function isFocusableElement(
  element: HTMLElement,
  mode: FocusableMode = FocusableMode.Strict
 ) {
-    if (element === document.body) return false
+  if (element === document.body) return false;

  return match(mode, {
    [FocusableMode.Strict]() {
-            return element.matches(focusableSelector)
+      return element.matches(focusableSelector);
    },
    [FocusableMode.Loose]() {
-            let next: HTMLElement | null = element
+      let next: HTMLElement | null = element;

      while (next !== null) {
-                if (next.matches(focusableSelector)) return true
-                next = next.parentElement
+        if (next.matches(focusableSelector)) return true;
+        next = next.parentElement;
      }

-            return false
+      return false;
    },
-    })
+  });
 }

 export function focusElement(element: HTMLElement | null) {
-    element?.focus({ preventScroll: true })
+  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 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
+    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')
-    })()
+    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
+    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')
-    })()
+    throw new Error(
+      "Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last"
+    );
+  })();

-    let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {}
+  let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};

-    let offset = 0
-    let total = elements.length
-    let next = undefined
+  let offset = 0;
+  let total = elements.length;
+  let next = undefined;
  do {
    // Guard against infinite loops
-        if (offset >= total || offset + total <= 0) return FocusResult.Error
+    if (offset >= total || offset + total <= 0) return FocusResult.Error;

-        let nextIdx = startIndex + offset
+    let nextIdx = startIndex + offset;

    if (focus & Focus.WrapAround) {
-            nextIdx = (nextIdx + total) % total
+      nextIdx = (nextIdx + total) % total;
    } else {
-            if (nextIdx < 0) return FocusResult.Underflow
-            if (nextIdx >= total) return FocusResult.Overflow
+      if (nextIdx < 0) return FocusResult.Underflow;
+      if (nextIdx >= total) return FocusResult.Overflow;
    }

-        next = elements[nextIdx]
+    next = elements[nextIdx];

    // Try the focus the next element, might not work if it is "hidden" to the user.
-        next?.focus(focusOptions)
+    next?.focus(focusOptions);

    // Try the next one in line
-        offset += direction
-    } while (next !== document.activeElement)
+    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
@@ -149,7 +159,7 @@ export function focusIn(container: HTMLElement | HTMLElement[], focus: 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')
+  if (!next.hasAttribute("tabindex")) next.setAttribute("tabindex", "0");

-    return FocusResult.Success
+  return FocusResult.Success;
 }
--- a/src/lib/utils/keyboard.ts
+++ b/src/lib/utils/keyboard.ts
@@ -1,21 +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',
+  Space = " ",
+  Enter = "Enter",
+  Escape = "Escape",
+  Backspace = "Backspace",

-    ArrowLeft = 'ArrowLeft',
-    ArrowUp = 'ArrowUp',
-    ArrowRight = 'ArrowRight',
-    ArrowDown = 'ArrowDown',
+  ArrowLeft = "ArrowLeft",
+  ArrowUp = "ArrowUp",
+  ArrowRight = "ArrowRight",
+  ArrowDown = "ArrowDown",

-    Home = 'Home',
-    End = 'End',
+  Home = "Home",
+  End = "End",

-    PageUp = 'PageUp',
-    PageDown = 'PageDown',
+  PageUp = "PageUp",
+  PageDown = "PageDown",

-    Tab = 'Tab',
+  Tab = "Tab",
 }
--- a/src/lib/utils/match.ts
+++ b/src/lib/utils/match.ts
@@ -1,20 +1,25 @@
-export function match<TValue extends string | number = string, TReturnValue = unknown>(
+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 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
+      .map((key) => `"${key}"`)
+      .join(", ")}.`
+  );
+  if (Error.captureStackTrace) Error.captureStackTrace(error, match);
+  throw error;
 }
--- a/src/lib/utils/once.ts
+++ b/src/lib/utils/once.ts
@@ -1,9 +1,9 @@
 export function once<T>(cb: (...args: T[]) => void) {
-    let state = { called: false }
+  let state = { called: false };

  return (...args: T[]) => {
-        if (state.called) return
-        state.called = true
-        return cb(...args)
-    }
+    if (state.called) return;
+    state.called = true;
+    return cb(...args);
+  };
 }
--- a/src/lib/utils/transition.ts
+++ b/src/lib/utils/transition.ts
@@ -1,38 +1,40 @@
-import { once } from './once'
-import { disposables } from './disposables'
+import { once } from "./once";
+import { disposables } from "./disposables";

 function addClasses(node: HTMLElement, ...classes: string[]) {
-    node && classes.length > 0 && node.classList.add(...classes)
+  node && classes.length > 0 && node.classList.add(...classes);
 }

 function removeClasses(node: HTMLElement, ...classes: string[]) {
-    node && classes.length > 0 && node.classList.remove(...classes)
+  node && classes.length > 0 && node.classList.remove(...classes);
 }

 export enum Reason {
-    Finished = 'finished',
-    Cancelled = 'cancelled',
+  Finished = "finished",
+  Cancelled = "cancelled",
 }

 function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
-    let d = disposables()
+  let d = disposables();

-    if (!node) return d.dispose
+  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 { transitionDuration, transitionDelay } = getComputedStyle(node);

-    let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(value => {
+  let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(
+    (value) => {
      let [resolvedValue = 0] = value
-            .split(',')
+        .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)
+        .map((v) => (v.includes("ms") ? parseFloat(v) : parseFloat(v) * 1000))
+        .sort((a, z) => z - a);

-        return resolvedValue
-    })
+      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.
@@ -41,18 +43,18 @@ function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
  // full 100% speed instead of the 25% or 10%.
  if (durationMs !== 0) {
    d.setTimeout(() => {
-            done(Reason.Finished)
-        }, durationMs + delaysMs)
+      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)
+    done(Reason.Finished);
  }

  // If we get disposed before the timeout runs we should cleanup anyway
-    d.add(() => done(Reason.Cancelled))
+  d.add(() => done(Reason.Cancelled));

-    return d.dispose
+  return d.dispose;
 }

 export function transition(
@@ -63,33 +65,33 @@ export function transition(
  entered: string[],
  done?: (reason: Reason) => void
 ) {
-    let d = disposables()
-    let _done = done !== undefined ? once(done) : () => { }
+  let d = disposables();
+  let _done = done !== undefined ? once(done) : () => {};

-    removeClasses(node, ...entered)
-    addClasses(node, ...base, ...from)
+  removeClasses(node, ...entered);
+  addClasses(node, ...base, ...from);

  d.nextFrame(() => {
-        removeClasses(node, ...from)
-        addClasses(node, ...to)
+    removeClasses(node, ...from);
+    addClasses(node, ...to);

    d.add(
-            waitForTransition(node, reason => {
-                removeClasses(node, ...to, ...base)
-                addClasses(node, ...entered)
-                return _done(reason)
-            })
-        )
+      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))
+  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))
+  d.add(() => _done(Reason.Cancelled));

-    return d.dispose
+  return d.dispose;
 }
--- a/src/lib/utils/tree-walker.ts
+++ b/src/lib/utils/tree-walker.ts
@@ -3,7 +3,7 @@ type AcceptNode = (
 ) =>
  | typeof NodeFilter.FILTER_ACCEPT
  | typeof NodeFilter.FILTER_SKIP
-    | typeof NodeFilter.FILTER_REJECT
+  | typeof NodeFilter.FILTER_REJECT;

 export function treeWalker({
  container,
@@ -11,18 +11,25 @@ export function treeWalker({
  walk,
  enabled,
 }: {
-    container: HTMLElement | null
-    accept: AcceptNode
-    walk(node: HTMLElement): void
-    enabled?: boolean
+  container: HTMLElement | null;
+  accept: AcceptNode;
+  walk(node: HTMLElement): void;
+  enabled?: boolean;
 }) {
-    let root = container
-    if (!root) return
-    if (enabled !== undefined && !enabled) return
+  let root = container;
+  if (!root) return;
+  if (enabled !== undefined && !enabled) return;

-    let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
+  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)
+  let walker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_ELEMENT,
+    acceptNode,
+    false
+  );

-    while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
+  while (walker.nextNode()) walk(walker.currentNode as HTMLElement);
 }
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,4 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>
+  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+</p>
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,5 @@
-import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
+import adapter from "@sveltejs/adapter-auto";
+import preprocess from "svelte-preprocess";

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,8 +11,8 @@ const config = {
    adapter: adapter(),

    // hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
-	}
+    target: "#svelte",
+  },
 };

 export default config;