refactor: use shorthand unsubscribe

src/Accordion/AccordionItem.svelte

@@ -14,24 +14,13 @@
   /** Specify the ARIA label for the accordion item chevron icon */
   export let iconDescription = "Expand/Collapse";
 
-  import { onMount, getContext } from "svelte";
+  import { getContext } from "svelte";
   import ChevronRight from "../icons/ChevronRight.svelte";
 
-  let initialDisabled = disabled;
-
-  const ctx = getContext("Accordion");
-  const unsubscribe = ctx.disableItems.subscribe((value) => {
-    if (!value && initialDisabled) return;
-    disabled = value;
-  });
-
   let animation = undefined;
 
-  onMount(() => {
-    return () => {
-      unsubscribe();
-    };
-  });
+  const { disableItems } = getContext("Accordion");
+  $: disabled = $disableItems;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/ContentSwitcher/Switch.svelte

@@ -17,25 +17,19 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  import { afterUpdate, getContext, onMount } from "svelte";
+  import { afterUpdate, getContext } from "svelte";
 
-  const ctx = getContext("ContentSwitcher");
+  const { add, update, change, currentId } = getContext("ContentSwitcher");
 
-  ctx.add({ id, text, selected });
+  add({ id, text, selected });
 
-  const unsubscribe = ctx.currentId.subscribe(($) => {
-    selected = $ === id;
-  });
+  $: selected = $currentId === id;
 
   afterUpdate(() => {
     if (selected) {
       ref.focus();
     }
   });
-
-  onMount(() => {
-    return () => unsubscribe();
-  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -52,7 +46,7 @@
   {...$$restProps}
   on:click
   on:click|preventDefault="{() => {
-    ctx.update(id);
+    update(id);
   }}"
   on:mouseover
   on:mouseenter
@@ -60,9 +54,9 @@
   on:keydown
   on:keydown="{({ key }) => {
     if (key === 'ArrowRight') {
-      ctx.change(1);
+      change(1);
     } else if (key === 'ArrowLeft') {
-      ctx.change(-1);
+      change(-1);
     }
   }}"
 >

src/ProgressIndicator/ProgressStep.svelte

@@ -23,7 +23,7 @@
   /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import { onMount, getContext } from "svelte";
+  import { getContext } from "svelte";
   import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
   import Warning from "../icons/Warning.svelte";
   import CircleDash from "../icons/CircleDash.svelte";
@@ -35,20 +35,11 @@
     getContext("ProgressIndicator");
 
   $: add({ id, complete, disabled });
-
-  const unsubscribe = stepsById.subscribe((value) => {
-    if (value[id]) {
-      step = value[id];
-      current = step.current;
-      complete = step.complete;
-    }
-  });
-
-  onMount(() => {
-    return () => {
-      unsubscribe();
-    };
-  });
+  $: if ($stepsById[id]) {
+    step = $stepsById[id];
+    current = step.current;
+    complete = step.complete;
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/Tooltip/TooltipFooter.svelte

@@ -2,23 +2,14 @@
   /** Specify a selector to be focused inside the footer when opening the tooltip */
   export let selectorPrimaryFocus = "a[href], button:not([disabled])";
 
-  import { getContext, onMount } from "svelte";
+  import { getContext } from "svelte";
 
   let ref = null;
   let open = false;
 
-  const ctx = getContext("Tooltip");
-  const unsubscribe = ctx.tooltipOpen.subscribe((tooltipOpen) => {
-    open = tooltipOpen;
-  });
+  const { tooltipOpen } = getContext("Tooltip");
 
-  onMount(() => {
-    return () => {
-      unsubscribe();
-    };
-  });
-
-  $: if (open && ref) {
+  $: if ((open || $tooltipOpen) && ref) {
     const node = ref.querySelector(selectorPrimaryFocus);
     if (node) node.focus();
   }