Move to using writable<T> syntax

src/lib/components/description/DescriptionProvider.svelte

@@ -17,12 +17,12 @@
 
 <script lang="ts">
   import { getContext, setContext } from "svelte";
-  import type { Readable, Writable } from "svelte/store";
+  import type { Readable } from "svelte/store";
   import { writable } from "svelte/store";
   export let name: string;
   export let slotProps = {};
   let descriptionIds: string[] = [];
-  let contextStore: Writable<DescriptionContext> = writable({
+  let contextStore = writable<DescriptionContext>({
     name,
     slotProps,
     props: $$restProps,

src/lib/components/dialog/Dialog.svelte

@@ -128,7 +128,7 @@
 
   let titleId: StateDefinition["titleId"];
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     titleId,
     dialogState,
     setTitleId(id?: string) {

src/lib/components/disclosure/Disclosure.svelte

@@ -66,7 +66,7 @@
   let panelStore: StateDefinition["panelStore"] = writable(null);
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     buttonId,
     panelId,
     disclosureState,
@@ -111,7 +111,7 @@
     });
   }
 
-  let openClosedState: Writable<State> = writable(
+  let openClosedState = writable<State>(
     computeOpenClosedState(disclosureState)
   );
 

src/lib/components/disclosure/DisclosureButton.svelte

@@ -7,7 +7,6 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
   const forwardEvents = forwardEventsBuilder(get_current_component());
@@ -25,7 +24,7 @@
   $: isWithinPanel =
     panelContext === null ? false : panelContext === $api.panelId;
 
-  let ourStore: Writable<HTMLElement | null> = writable(null);
+  let ourStore = writable<HTMLElement | null>(null);
   $: if (!isWithinPanel) ourStore = buttonStore;
 
   function handleClick() {

src/lib/components/label/LabelProvider.svelte

@@ -20,7 +20,7 @@
   export let name: string;
   export let slotProps = {};
   let labelIds: string[] = [];
-  let contextStore: Writable<LabelContext> = writable({
+  let contextStore = writable<LabelContext>({
     name,
     slotProps,
     props: $$restProps,

src/lib/components/label/label.test.ts

@@ -138,7 +138,7 @@ it("should be possible to render a Label with an `as` prop", async () => {
 });
 
 it("should be possible to change the props of a Label", async () => {
-  let classStore: Writable<string | null> = writable(null);
+  let classStore = writable<string | null>(null);
   let { container } = render(svelte`
   <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>

src/lib/components/listbox/Listbox.svelte

@@ -92,7 +92,7 @@
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeOptionIndex: StateDefinition["activeOptionIndex"] = null;
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     listboxState,
     value,
     labelRef,

src/lib/components/menu/Menu.svelte

@@ -67,7 +67,7 @@
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeItemIndex: StateDefinition["activeItemIndex"] = null;
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     menuState,
     buttonStore,
     itemsStore: itemsStore,
@@ -189,7 +189,7 @@
     if (!event.defaultPrevented) $buttonStore?.focus({ preventScroll: true });
   }
 
-  let openClosedState: Writable<State> | undefined = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(menuState, {

src/lib/components/popover/Popover.svelte

@@ -69,7 +69,7 @@
   let panel: StateDefinition["panel"] = writable(null);
   let button: StateDefinition["button"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     popoverState,
     buttonId,
     panelId,
@@ -100,7 +100,7 @@
   });
   setContext(POPOVER_CONTEXT_NAME, api);
 
-  let openClosedState: Writable<State> = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(popoverState, {

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

@@ -70,7 +70,7 @@
     change: any;
   }>();
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     options,
     value,
     disabled,

src/lib/components/switch/SwitchGroup.svelte

@@ -26,7 +26,7 @@
 
   let switchStore: StateDefinition["switchStore"] = writable(null);
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     switchStore,
   });
   setContext(SWITCH_CONTEXT_NAME, api);

src/lib/components/tabs/TabGroup.svelte

@@ -70,7 +70,7 @@
 
   const dispatch = createEventDispatcher();
 
-  let api: Writable<StateDefinition> = writable({
+  let api = writable<StateDefinition>({
     selectedIndex,
     orientation: vertical ? "vertical" : "horizontal",
     activation: manual ? "manual" : "auto",

src/lib/components/tabs/TabPanel.svelte

@@ -7,14 +7,13 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render, { Features } from "$lib/utils/Render.svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
-  let elementRef: Writable<HTMLElement | null> = writable(null);
+  let elementRef = writable<HTMLElement | null>(null);
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;
 

src/lib/components/transitions/TransitionChild.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createEventDispatcher, onMount, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
@@ -60,7 +59,7 @@
   $: strategy =
     $$props.unmount === false ? RenderStrategy.Hidden : RenderStrategy.Unmount;
 
-  let nesting: Writable<NestingContextValues> = writable(
+  let nesting = writable<NestingContextValues>(
     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.
@@ -174,7 +173,7 @@
   }
 
   setContext(NESTING_CONTEXT_NAME, nesting);
-  let openClosedState: Writable<State> = writable(State.Closed);
+  let openClosedState = writable<State>(State.Closed);
   useOpenClosedProvider(openClosedState);
 
   $: openClosedState.set(

src/lib/components/transitions/TransitionRoot.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
@@ -69,14 +68,14 @@
   }
   let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
 
-  let nestingBag: Writable<NestingContextValues> = writable(
+  let nestingBag = writable<NestingContextValues>(
     useNesting(() => {
       state = TreeStates.Hidden;
     })
   );
 
   let initial = true;
-  let transitionBag: Writable<TransitionContextValues> = writable();
+  let transitionBag = writable<TransitionContextValues>();
   $: transitionBag.set({
     show: !!shouldShow,
     appear: appear || !initial,