Migrate the rest of common components

.github/workflows/chromatic.yml

@@ -24,6 +24,7 @@ on:
 
 env:
   PUBLIC_ENV: production
+  NODE_ENV: production
 
 jobs:
   chromatic-deployment:
@@ -43,7 +44,7 @@ jobs:
       - run: npm run sync
       - run: npm run build
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v16.6.3
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitOnceUploaded: true

src/lib/components/accounts/Mailkey.svelte

@@ -68,10 +68,10 @@
     </p>
   {/if}
   <Flex gap={1} wrap justify="center">
-    <Button mode="primary" on:click={create}>
+    <Button mode="primary" onclick={create}>
       {$_("mailkey.create.button")}
     </Button>
-    <Button mode="danger" on:click={destroy}>
+    <Button mode="danger" onclick={destroy}>
       {$_("mailkey.destroy.button")}
     </Button>
   </Flex>

src/lib/components/accounts/Unverified.svelte

@@ -51,7 +51,7 @@ a user who is logged in but has `verified_journalist = false`.
 </script>
 
 <Tip>
-  <Unverified24 slot="icon" />
+  {#snippet icon()}<Unverified24 />{/snippet}
   <p>{$_("unverified.verify")}</p>
   <Flex class="buttons" gap={1}>
     <Button mode="primary" href={SQUARELET_ORGS_URL} target="_blank">

src/lib/components/accounts/UserMenu.svelte

@@ -36,28 +36,36 @@
 <Dropdown {position}>
   {#snippet anchor()}
     <NavItem title="Open Menu">
-      <Avatar {user} slot="start" />
+      {#snippet start()}
+        <Avatar {user} />
+      {/snippet}
       {#if width && width > remToPx(48)}
         <span class="name">{getUserName(user)}</span>
       {/if}
-      <div class="dropdownArrow" slot="end">
-        {#if position.includes("bottom")}
-          <ChevronDown12 />
-        {:else}
-          <ChevronUp12 />
-        {/if}
-      </div>
+      {#snippet end()}
+        <div class="dropdownArrow">
+          {#if position.includes("bottom")}
+            <ChevronDown12 />
+          {:else}
+            <ChevronUp12 />
+          {/if}
+        </div>
+      {/snippet}
     </NavItem>
   {/snippet}
   {#snippet inner(close)}
     <Menu>
-      <NavItem href={SQUARELET_BASE} target="_blank" on:click={close}>
-        <Gear16 slot="start" />
+      <NavItem href={SQUARELET_BASE} target="_blank" onclick={close}>
+        {#snippet start()}
+          <Gear16 />
+        {/snippet}
         {$_("authSection.user.acctSettings")}
       </NavItem>
 
-      <NavItem href={SIGN_OUT_URL} on:click={close}>
-        <SignOut16 slot="start" />
+      <NavItem href={SIGN_OUT_URL} onclick={close}>
+        {#snippet start()}
+          <SignOut16 />
+        {/snippet}
         {$_("authSection.user.signOut")}
       </NavItem>
     </Menu>

src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap

@@ -17,6 +17,7 @@ exports[`Mailkey 1`] = `
           title=""
           type="button"
         >
+          <!---->
           <svg
             class="octicon octicon-x-circle"
             height="24"
@@ -32,6 +33,7 @@ exports[`Mailkey 1`] = `
               d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
             />
           </svg>
+
           <!---->
         </button>
 
@@ -75,7 +77,8 @@ exports[`Mailkey 1`] = `
         <!---->
 
         <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
+          class="row align-stretch justify-center wrap  svelte-vh2qhd"
+          style="--gap: 1rem;"
         >
           <!---->
           <!---->
@@ -84,7 +87,9 @@ exports[`Mailkey 1`] = `
             title=""
             type="button"
           >
+            <!---->
             Create New Email Address
+
             <!---->
           </button>
 
@@ -96,7 +101,9 @@ exports[`Mailkey 1`] = `
             title=""
             type="button"
           >
+            <!---->
             Delete Existing Address
+
             <!---->
           </button>
 
@@ -129,6 +136,7 @@ exports[`Mailkey 2`] = `
           title=""
           type="button"
         >
+          <!---->
           <svg
             class="octicon octicon-x-circle"
             height="24"
@@ -144,6 +152,7 @@ exports[`Mailkey 2`] = `
               d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
             />
           </svg>
+
           <!---->
         </button>
 
@@ -192,7 +201,8 @@ exports[`Mailkey 2`] = `
         <!---->
 
         <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
+          class="row align-stretch justify-center wrap  svelte-vh2qhd"
+          style="--gap: 1rem;"
         >
           <!---->
           <!---->
@@ -201,7 +211,9 @@ exports[`Mailkey 2`] = `
             title=""
             type="button"
           >
+            <!---->
             Create New Email Address
+
             <!---->
           </button>
 
@@ -213,7 +225,9 @@ exports[`Mailkey 2`] = `
             title=""
             type="button"
           >
+            <!---->
             Delete Existing Address
+
             <!---->
           </button>
 

src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap

@@ -46,7 +46,6 @@ exports[`UserMenu 1`] = `
 
       <div
         class="dropdownArrow svelte-13wiold"
-        slot="end"
       >
         <svg
           class="octicon octicon-chevron-down"
@@ -87,7 +86,6 @@ exports[`UserMenu 1`] = `
         <svg
           class="octicon octicon-gear"
           height="16"
-          slot="start"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +118,6 @@ exports[`UserMenu 1`] = `
         <svg
           class="octicon octicon-sign-out"
           height="16"
-          slot="start"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"

src/lib/components/addons/AddOnPin.svelte

@@ -19,9 +19,7 @@
 
   let endpoint = $derived(new URL(`/api/addons/${addon.id}/`, BASE_API_URL));
 
-  async function toggle(event) {
-    event.preventDefault();
-
+  async function toggle() {
     const csrftoken = getCsrfToken();
     if (!csrftoken) {
       console.error("No CSRF token found");
@@ -62,7 +60,7 @@
 
 <Pin
   active={addon.active}
-  on:click={toggle}
+  onclick={toggle}
   {size}
   --fill={addon.active ? "var(--orange)" : "var(--gray-3)"}
 />

src/lib/components/addons/AddOnsNavigation.svelte

@@ -27,31 +27,39 @@
       href="/add-ons/"
       --hover-background="var(--blue-2)"
     >
-      <Infinity16 fill="var(--blue-3)" slot="start" />
+      {#snippet start()}
+        <Infinity16 fill="var(--blue-3)" />
+      {/snippet}
       All
     </NavItem>
     <NavItem
       active={active === "active"}
       href="/add-ons/?active=true"
       --hover-background="var(--orange-2)"
     >
-      <Pin --fill="var(--orange-3)" slot="start" />
+      {#snippet start()}
+        <Pin --fill="var(--orange-3)" />
+      {/snippet}
       Pinned
     </NavItem>
     <NavItem
       active={active === "featured"}
       href="/add-ons/?featured=true"
       --hover-background="var(--yellow-2)"
     >
-      <StarFill16 fill="var(--yellow-3)" slot="start" />
+      {#snippet start()}
+        <StarFill16 fill="var(--yellow-3)" />
+      {/snippet}
       Featured
     </NavItem>
     <NavItem
       active={active === "premium"}
       href="/add-ons/?premium=true"
       --hover-background="var(--green-2)"
     >
-      <Premium --fill="var(--green-3)" slot="start" />
+      {#snippet start()}
+        <Premium --fill="var(--green-3)" />
+      {/snippet}
       Premium
     </NavItem>
   </Flex>

src/lib/components/addons/DocumentList.svelte

@@ -51,7 +51,7 @@
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["navigation"] = true)}
+              onclick={() => ($sidebars["navigation"] = true)}
             >
               <span class="flipV">
                 <SidebarExpand16 />

src/lib/components/addons/History.svelte

@@ -77,7 +77,9 @@
 <SidebarGroup>
   {#snippet title()}
     <NavItem>
-      <History16 slot="start" />
+      {#snippet start()}
+        <History16 />
+      {/snippet}
       {$_("addonRuns.previous")}
     </NavItem>
   {/snippet}

src/lib/components/addons/HistoryEvent.svelte

@@ -156,7 +156,7 @@
           minW={false}
           ghost
           disabled={!csrftoken}
-          on:click={() => dismissRun()}
+          onclick={() => dismissRun()}
         >
           {$_("dialog.dismiss")}
         </Button>
@@ -168,7 +168,7 @@
           mode="danger"
           ghost
           disabled={!csrftoken}
-          on:click={() => cancelRun()}
+          onclick={() => cancelRun()}
           title={$_("dialog.cancel")}
         >
           {$_("dialog.cancel")}

src/lib/components/addons/Scheduled.svelte

@@ -55,7 +55,9 @@
 <SidebarGroup>
   {#snippet title()}
     <NavItem>
-      <Clock16 slot="start" />
+      {#snippet start()}
+        <Clock16 />
+      {/snippet}
       {$_("addonRuns.scheduled")}
     </NavItem>
   {/snippet}

src/lib/components/addons/ScheduledEvent.svelte

@@ -29,9 +29,10 @@
 
   interface Props {
     event: Event;
+    onclick?: () => void;
   }
 
-  let { event }: Props = $props();
+  let { event, onclick }: Props = $props();
 
   let addon = $derived(isAddon(event.addon) ? event.addon : undefined);
   let disabled = $derived(event.event === 0);
@@ -44,7 +45,7 @@
   }
 </script>
 
-<NavItem href={url(event)} on:click>
+<NavItem href={url(event)} {onclick}>
   <div class="info" class:disabled>
     <p class="name">
       {addon?.name}

src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap

@@ -3,7 +3,8 @@
 exports[`AddOnsNavigation 1`] = `
 <div>
   <div
-    style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 1rem;"
+    class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+    style="--gap: 1rem;"
   >
     <header
       class="header"
@@ -18,7 +19,8 @@ exports[`AddOnsNavigation 1`] = `
     </header>
 
     <div
-      style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+      style="--gap: 0.5rem;"
     >
       <svelte-css-wrapper
         style="display: contents; --hover-background: var(--blue-2);"
@@ -33,7 +35,6 @@ exports[`AddOnsNavigation 1`] = `
             class="octicon octicon-infinity"
             fill="var(--blue-3)"
             height="16"
-            slot="start"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +115,6 @@ exports[`AddOnsNavigation 1`] = `
             class="octicon octicon-star-fill"
             fill="var(--yellow-3)"
             height="16"
-            slot="start"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -192,7 +192,8 @@ exports[`AddOnsNavigation 1`] = `
     <!---->
 
     <div
-      style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+      style="--gap: 0.5rem;"
     >
       <svelte-css-wrapper
         style="display: contents; --color: var(--gray-4);"