From 05306edc662c2d3058a274d3a917201f6b365b2f Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 6 Sep 2024 10:06:20 -0600
Subject: [PATCH 1/5] Fix styling for non-expandable Accordion

---
 src/lib/holocene/accordion.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/holocene/accordion.svelte b/src/lib/holocene/accordion.svelte
index 474330b1e..e44208546 100644
--- a/src/lib/holocene/accordion.svelte
+++ b/src/lib/holocene/accordion.svelte
@@ -91,8 +91,8 @@
     </div>
   </div>
 {:else}
-  <Card {...$$restProps}>
-    <div class="flex w-full flex-col rounded-lg p-2">
+  <Card class="w-full" {...$$restProps}>
+    <div class="flex w-full flex-col rounded-lg">
       <div class="space-between flex w-full flex-row items-center">
         <h3 class="flex w-full items-center gap-2">
           {#if icon}<Icon name={icon} />{/if}
@@ -111,7 +111,7 @@
       </p>
     </div>
 
-    <div class="mt-6 block w-full p-2">
+    <div class="mt-6 block w-full" class:hidden={!open}>
       <slot />
     </div>
   </Card>

From f1cf2f79114a87acf9f5d28edf473759e8ae4867 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 6 Sep 2024 10:06:36 -0600
Subject: [PATCH 2/5] Update padding on Card to match Accordion

---
 src/lib/holocene/card.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/holocene/card.svelte b/src/lib/holocene/card.svelte
index 2537d7efc..5928f00b3 100644
--- a/src/lib/holocene/card.svelte
+++ b/src/lib/holocene/card.svelte
@@ -4,6 +4,6 @@
 
 <style lang="postcss">
   .card {
-    @apply rounded-2xl border-2 border-subtle p-5;
+    @apply rounded-2xl border-2 border-subtle p-4;
   }
 </style>

From 6cb2c2436eccb06c9b383fa6176b8a8d47a387b5 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 9 Sep 2024 15:11:40 -0700
Subject: [PATCH 3/5] Add AccordionGroup

---
 .../holocene/accordion/accordion-group.svelte |  5 +++++
 .../{ => accordion}/accordion.stories.svelte  | 21 ++++++++++++++++---
 .../holocene/{ => accordion}/accordion.svelte |  8 ++++---
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/holocene/accordion/accordion-group.svelte
 rename src/lib/holocene/{ => accordion}/accordion.stories.svelte (67%)
 rename src/lib/holocene/{ => accordion}/accordion.svelte (96%)

diff --git a/src/lib/holocene/accordion/accordion-group.svelte b/src/lib/holocene/accordion/accordion-group.svelte
new file mode 100644
index 000000000..7bdc4e0ae
--- /dev/null
+++ b/src/lib/holocene/accordion/accordion-group.svelte
@@ -0,0 +1,5 @@
+<div
+  class="*:rounded-none *:border-t-0 [&>*:first-child]:rounded-t-2xl [&>*:first-child]:border-t-2 [&>*:last-child]:rounded-b-2xl"
+>
+  <slot />
+</div>
diff --git a/src/lib/holocene/accordion.stories.svelte b/src/lib/holocene/accordion/accordion.stories.svelte
similarity index 67%
rename from src/lib/holocene/accordion.stories.svelte
rename to src/lib/holocene/accordion/accordion.stories.svelte
index 0ec142fd8..d85f386b4 100644
--- a/src/lib/holocene/accordion.stories.svelte
+++ b/src/lib/holocene/accordion/accordion.stories.svelte
@@ -33,12 +33,27 @@
 <script lang="ts">
   import { action } from '@storybook/addon-actions';
   import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  import AccordionGroup from './accordion-group.svelte';
 </script>
 
 <Template let:args>
-  <Accordion {...args} onToggle={action('onToggle')}>
-    <p>Accordion Content</p>
-  </Accordion>
+  <div class="flex flex-col gap-2">
+    <Accordion {...args} onToggle={action('onToggle')}>
+      <p>Accordion Content</p>
+    </Accordion>
+    <AccordionGroup>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+    </AccordionGroup>
+  </div>
 </Template>
 
 <Story name="Default" args={{ open: false }} />
diff --git a/src/lib/holocene/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
similarity index 96%
rename from src/lib/holocene/accordion.svelte
rename to src/lib/holocene/accordion/accordion.svelte
index e44208546..a5aaa1649 100644
--- a/src/lib/holocene/accordion.svelte
+++ b/src/lib/holocene/accordion/accordion.svelte
@@ -6,7 +6,6 @@
   import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
-  import Card from '$lib/holocene/card.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
   import type { IconName } from './icon';
@@ -91,7 +90,10 @@
     </div>
   </div>
 {:else}
-  <Card class="w-full" {...$$restProps}>
+  <div
+    class="surface-primary w-full rounded-2xl border-2 border-subtle p-4"
+    {...$$restProps}
+  >
     <div class="flex w-full flex-col rounded-lg">
       <div class="space-between flex w-full flex-row items-center">
         <h3 class="flex w-full items-center gap-2">
@@ -114,5 +116,5 @@
     <div class="mt-6 block w-full" class:hidden={!open}>
       <slot />
     </div>
-  </Card>
+  </div>
 {/if}

From 00c8acef953ff32cf1524f9fd4a80efdb204e7d4 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 9 Sep 2024 15:40:26 -0700
Subject: [PATCH 4/5] Make ring inset on focus-within

---
 src/lib/holocene/accordion/accordion.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/holocene/accordion/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
index a5aaa1649..f169114bf 100644
--- a/src/lib/holocene/accordion/accordion.svelte
+++ b/src/lib/holocene/accordion/accordion.svelte
@@ -43,7 +43,7 @@
 {#if expandable}
   <div
     class={merge(
-      'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-2 text-primary focus-within:ring-4 focus-within:ring-primary/70',
+      'surface-primary w-full rounded-2xl border-2 border-subtle p-2 focus-within:ring-4 focus-within:ring-inset focus-within:ring-primary/70',
       className,
     )}
     {...$$restProps}

From c7b8afdd0c86ac58d998f29c8c87829f5cdc0e5b Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 9 Sep 2024 16:03:48 -0700
Subject: [PATCH 5/5] Fix imports and A11y warning

---
 src/lib/components/data-encoder-settings.svelte               | 2 +-
 src/lib/components/schedule/schedule-advanced-settings.svelte | 2 +-
 src/lib/components/workflow/pending-activities.svelte         | 2 +-
 src/lib/components/workflow/workflow-summary.svelte           | 2 +-
 src/lib/holocene/accordion/accordion.svelte                   | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/data-encoder-settings.svelte b/src/lib/components/data-encoder-settings.svelte
index b5fdc5712..03f2adb07 100644
--- a/src/lib/components/data-encoder-settings.svelte
+++ b/src/lib/components/data-encoder-settings.svelte
@@ -4,7 +4,7 @@
 
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
diff --git a/src/lib/components/schedule/schedule-advanced-settings.svelte b/src/lib/components/schedule/schedule-advanced-settings.svelte
index 6f448f488..13028fad5 100644
--- a/src/lib/components/schedule/schedule-advanced-settings.svelte
+++ b/src/lib/components/schedule/schedule-advanced-settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import ScheduleNotes from './schedule-notes.svelte';
diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
index cfaa316cf..1b288f0f8 100644
--- a/src/lib/components/workflow/pending-activities.svelte
+++ b/src/lib/components/workflow/pending-activities.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
diff --git a/src/lib/components/workflow/workflow-summary.svelte b/src/lib/components/workflow/workflow-summary.svelte
index 223738437..eb0b01713 100644
--- a/src/lib/components/workflow/workflow-summary.svelte
+++ b/src/lib/components/workflow/workflow-summary.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import WorkflowDetail from '$lib/components/workflow/workflow-detail.svelte';
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import {
diff --git a/src/lib/holocene/accordion/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
index f169114bf..1ca62a631 100644
--- a/src/lib/holocene/accordion/accordion.svelte
+++ b/src/lib/holocene/accordion/accordion.svelte
@@ -6,10 +6,9 @@
   import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
+  import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
-  import type { IconName } from './icon';
-
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     id?: string;
@@ -66,6 +65,7 @@
           class="flex flex-row items-center gap-2 pr-2"
           on:click|stopPropagation
           on:keyup|stopPropagation
+          role="none"
         >
           <slot name="action" />
         </div>