Fix more TS errors in strict mode

src/lib/components/dialog/DialogTitle.svelte

@@ -7,7 +7,7 @@
 
   onMount(() => {
     $api.setTitleId(id);
-    return () => $api.setTitleId(null);
+    return () => $api.setTitleId(undefined);
   });
   $: propsWeControl = {
     id,

src/lib/components/menu/Menu.svelte

@@ -36,8 +36,8 @@
 
   export function useMenuContext(
     componentName: string
-  ): Writable<StateDefinition | undefined> {
-    let context: Writable<StateDefinition | undefined> | undefined =
+  ): Writable<StateDefinition> {
+    let context: Writable<StateDefinition> | undefined =
       getContext(MENU_CONTEXT_NAME);
 
     if (context === undefined) {
@@ -58,10 +58,7 @@
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeItemIndex: StateDefinition["activeItemIndex"] = null;
 
-  let api: Writable<StateDefinition | undefined> = writable();
-  setContext(MENU_CONTEXT_NAME, api);
-
-  $: api.set({
+  let api: Writable<StateDefinition> = writable({
     menuState,
     buttonStore,
     itemsStore: itemsStore,
@@ -125,6 +122,19 @@
       })();
     },
   });
+  setContext(MENU_CONTEXT_NAME, api);
+
+  $: api.update((obj) => {
+    return {
+      ...obj,
+      menuState,
+      buttonStore,
+      itemsStore: itemsStore,
+      items,
+      searchQuery,
+      activeItemIndex,
+    };
+  });
 
   function handleWindowMousedown(event: MouseEvent): void {
     let target = event.target as HTMLElement;

src/lib/components/popover/Popover.svelte

@@ -28,9 +28,9 @@
   const POPOVER_CONTEXT_NAME = "PopoverContext";
   export function usePopoverContext(
     component: string
-  ): Writable<StateDefinition | undefined> {
+  ): Writable<StateDefinition> {
     let context = getContext(POPOVER_CONTEXT_NAME) as
-      | Writable<StateDefinition | undefined>
+      | Writable<StateDefinition>
       | undefined;
     if (context === undefined) {
       throw new Error(
@@ -57,31 +57,18 @@
 
   let popoverState: PopoverStates = PopoverStates.Closed;
 
-  let api: Writable<StateDefinition | undefined> = writable();
-  setContext(POPOVER_CONTEXT_NAME, api);
+  let panel: Writable<StateDefinition["panel"]> = writable(null);
+  setContext("PopoverPanelRef", panel);
 
-  let openClosedState: Writable<State> | undefined = writable();
-  setContext("OpenClosed", openClosedState);
+  let button: Writable<StateDefinition["button"]> = writable(null);
+  setContext("PopoverButtonRef", button);
 
-  $: $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({
+  let api: Writable<StateDefinition> = writable({
     popoverState,
     buttonId,
     panelId,
-    panel,
-    button,
+    panel: $panel,
+    button: $button,
     togglePopover() {
       popoverState = match(popoverState, {
         [PopoverStates.Open]: PopoverStates.Closed,
@@ -105,6 +92,26 @@
       restoreElement?.focus();
     },
   });
+  setContext(POPOVER_CONTEXT_NAME, api);
+
+  let openClosedState: Writable<State> | undefined = writable();
+  setContext("OpenClosed", openClosedState);
+
+  $: $openClosedState = match(popoverState, {
+    [PopoverStates.Open]: State.Open,
+    [PopoverStates.Closed]: State.Closed,
+  });
+
+  $: api.update((obj) => {
+    return {
+      ...obj,
+      popoverState,
+      buttonId,
+      panelId,
+      panel: $panel,
+      button: $button,
+    };
+  });
 
   const registerBag = {
     buttonId,
@@ -121,8 +128,8 @@
   function isFocusWithinPopoverGroup() {
     return (
       groupContext?.isFocusWithinPopoverGroup() ??
-      (button?.contains(document.activeElement) ||
-        panel?.contains(document.activeElement))
+      ($button?.contains(document.activeElement) ||
+        $panel?.contains(document.activeElement))
     );
   }
 
@@ -144,14 +151,14 @@
 
     if (popoverState !== PopoverStates.Open) return;
 
-    if (button?.contains(target)) return;
-    if (panel?.contains(target)) return;
+    if ($button?.contains(target)) return;
+    if ($panel?.contains(target)) return;
 
     $api.closePopover();
 
     if (!isFocusableElement(target, FocusableMode.Loose)) {
       event.preventDefault();
-      button?.focus();
+      $button?.focus();
     }
   }
 </script>

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

@@ -29,9 +29,9 @@
   const RADIO_GROUP_CONTEXT_NAME = "RadioGroupContext";
   export function useRadioGroupContext(
     component: string
-  ): Writable<StateDefinition | undefined> {
+  ): Writable<StateDefinition> {
     const context = getContext(RADIO_GROUP_CONTEXT_NAME) as
-      | Writable<StateDefinition | undefined>
+      | Writable<StateDefinition>
       | undefined;
 
     if (context === undefined) {
@@ -55,10 +55,7 @@
 
   const dispatch = createEventDispatcher();
 
-  let api: Writable<StateDefinition | undefined> = writable();
-  setContext(RADIO_GROUP_CONTEXT_NAME, api);
-
-  $: api.set({
+  let api: Writable<StateDefinition> = writable({
     options,
     value,
     disabled,
@@ -83,6 +80,20 @@
       options = options.filter((radio) => radio.id !== id);
     },
   });
+  setContext(RADIO_GROUP_CONTEXT_NAME, api);
+
+  $: api.update((obj) => {
+    return {
+      ...obj,
+      options,
+      value,
+      disabled,
+      firstOption: options.find((option) => !option.propsRef.disabled),
+      containsCheckedOption: options.some(
+        (option) => option.propsRef.value === value
+      ),
+    };
+  });
 
   $: treeWalker({
     container: radioGroupRef,

src/lib/components/switch/Switch.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
   import { useSwitchContext } from "./SwitchGroup.svelte";
   import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
-  import {
-    DescriptionContext,
-    useDescriptionContext,
-  } from "$lib/components/description/DescriptionProvider.svelte";
+  import { useDescriptionContext } from "$lib/components/description/DescriptionProvider.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
   import { getContext, createEventDispatcher } from "svelte";

src/lib/components/switch/SwitchGroup.svelte

@@ -4,9 +4,7 @@
   }
 
   const SWITCH_CONTEXT_NAME = "SwitchContext";
-  export function useSwitchContext():
-    | Writable<StateDefinition | undefined>
-    | undefined {
+  export function useSwitchContext(): Writable<StateDefinition> | undefined {
     return getContext(SWITCH_CONTEXT_NAME);
   }
 </script>
@@ -19,18 +17,16 @@
 
   let switchStore: Writable<HTMLButtonElement | null> = writable(null);
 
-  let api: Writable<StateDefinition | undefined> = writable();
-  setContext("SwitchApi", api);
+  let api: Writable<StateDefinition | undefined> = writable({
+    switchStore,
+  });
+  setContext(SWITCH_CONTEXT_NAME, api);
 
   function onClick() {
     if (!$switchStore) return;
     $switchStore.click();
     $switchStore.focus({ preventScroll: true });
   }
-
-  $: api.set({
-    switchStore,
-  });
 </script>
 
 <div {...$$restProps}>

src/lib/components/tabs/TabGroup.svelte

@@ -27,10 +27,8 @@
 
   const TABS_CONTEXT_NAME = "TabsContext";
 
-  export function useTabsContext(
-    component: string
-  ): Writable<StateDefinition | undefined> {
-    let context: Writable<StateDefinition | undefined> | undefined =
+  export function useTabsContext(component: string): Writable<StateDefinition> {
+    let context: Writable<StateDefinition> | undefined =
       getContext(TABS_CONTEXT_NAME);
 
     if (context === undefined) {
@@ -54,10 +52,7 @@
 
   const dispatch = createEventDispatcher();
 
-  let api: Writable<StateDefinition | undefined> = writable();
-  setContext(TABS_CONTEXT_NAME, api);
-
-  $: api.set({
+  let api: Writable<StateDefinition> = writable({
     selectedIndex,
     orientation: vertical ? "vertical" : "horizontal",
     activation: manual ? "manual" : "auto",
@@ -81,6 +76,18 @@
       panels = panels.filter((p) => p !== panel);
     },
   });
+  setContext(TABS_CONTEXT_NAME, api);
+
+  $: api.update((obj) => {
+    return {
+      ...obj,
+      selectedIndex,
+      orientation: vertical ? "vertical" : "horizontal",
+      activation: manual ? "manual" : "auto",
+      tabs,
+      panels,
+    };
+  });
 
   onMount(() => {
     if ($api.tabs.length <= 0) return;

src/lib/components/transitions/TransitionChild.svelte

@@ -154,7 +154,7 @@
   }
 
   setContext(NESTING_CONTEXT_NAME, nesting);
-  let openClosedState: Writable<State> | undefined = writable(State.Closed);
+  let openClosedState: Writable<State> = writable(State.Closed);
   setContext("OpenClosed", openClosedState);
 
   $: openClosedState.set(

src/lib/components/transitions/TransitionRoot.svelte

@@ -114,16 +114,16 @@
   import TransitionChild from "./TransitionChild.svelte";
   import type { useId } from "$lib/hooks/use-id";
 
-  export let show: boolean = null;
+  export let show: boolean | undefined = undefined;
   export let unmount = true;
   export let appear = false;
 
   let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
 
   function computeShow(
-    show: boolean,
+    show: boolean | undefined,
     openClosedState: State | undefined
-  ): boolean {
+  ): boolean | undefined {
     if (show === null && openClosedState !== undefined) {
       return match(openClosedState, {
         [State.Open]: true,
@@ -161,7 +161,7 @@
   let initial = true;
   let transitionBag: Writable<TransitionContextValues> = writable();
   $: transitionBag.set({
-    show: shouldShow,
+    show: !!shouldShow,
     appear: appear || !initial,
   });