From 9e97b0ebd6cc6c251b3e1afa0d7b11fd5f7cdf3a Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 06:34:36 +0100
Subject: [PATCH 1/7] feat: sd-accordion refresh

---
 .../accordion-group/accordion-group.stories.ts   | 16 ++++++++++++++++
 .../accordion-group/accordion-group.ts           |  6 +++++-
 .../src/components/accordion/accordion.ts        | 11 ++++++++---
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/accordion-group/accordion-group.stories.ts b/packages/components/src/components/accordion-group/accordion-group.stories.ts
index 6685345a7..991a00ba5 100644
--- a/packages/components/src/components/accordion-group/accordion-group.stories.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.stories.ts
@@ -50,6 +50,22 @@ export const CloseOthers = {
   }
 };
 
+/**
+ * Use 'background' property to set the background color to 'white', 'neutral-100', or 'primary-100'.
+ */
+export const Background = {
+  parameters: { controls: { exclude: 'background' } },
+  render: (args: any) => {
+    return generateTemplate({
+      axis: {
+        y: { type: 'attribute', name: 'background' }
+      },
+      args,
+      constants: { type: 'template', name: 'width', value: '<div style="width: 300px">%TEMPLATE%</div>' }
+    });
+  }
+};
+
 /**
  * Part of sd-accordion-group
  */
diff --git a/packages/components/src/components/accordion-group/accordion-group.ts b/packages/components/src/components/accordion-group/accordion-group.ts
index 165505c0d..d635966ca 100644
--- a/packages/components/src/components/accordion-group/accordion-group.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.ts
@@ -24,6 +24,9 @@ export default class SdAccordionGroup extends SolidElement {
   /** Closes other accordions. */
   @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;
 
+  /** Set the background color of the accordion group. */
+  @property({ reflect: true }) background: 'white' | 'neutral-100' | 'primary-100' = 'white';
+
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('sd-show', this.handleAccordionShow);
@@ -52,7 +55,7 @@ export default class SdAccordionGroup extends SolidElement {
 
   render() {
     return html`
-      <div part="base">
+      <div part="base" class="bg-${this.background}">
         <slot></slot>
       </div>
     `;
@@ -64,6 +67,7 @@ export default class SdAccordionGroup extends SolidElement {
     css`
       :host {
         display: block;
+        background-color: var(--sd-color-white);
       }
       ::slotted(sd-accordion:not(:first-of-type)) {
         margin-top: -1px;
diff --git a/packages/components/src/components/accordion/accordion.ts b/packages/components/src/components/accordion/accordion.ts
index 26937f9d9..4dfdc5d38 100644
--- a/packages/components/src/components/accordion/accordion.ts
+++ b/packages/components/src/components/accordion/accordion.ts
@@ -150,13 +150,12 @@ export default class SdAccordion extends SolidElement {
 
   render() {
     return html`
-      <div part="base" class="outline outline-1 outline-neutral-400 -outline-offset-1">
+      <div part="base" class="border-y-[1px] border-neutral-400">
         <header
           part="header"
           id="header"
           class=${cx(
-            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline',
-            this.open ? 'bg-white text-accent hover:bg-neutral-200' : 'text-primary bg-neutral-100 hover:bg-neutral-200'
+            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group'
           )}
           role="button"
           aria-expanded=${this.open ? 'true' : 'false'}
@@ -165,6 +164,12 @@ export default class SdAccordion extends SolidElement {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
+          <div
+            class=${cx(
+              !this.open && 'opacity-0',
+              'w-1 bg-accent absolute left-0 transition-all h-8 group-hover:h-full'
+            )}
+          ></div>
           <slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>
 
           <span

From 131af6f0723660545b6bbe319135b357dd807df9 Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 10:32:46 +0100
Subject: [PATCH 2/7] fix: remove unnecesary background color css

---
 .../components/src/components/accordion-group/accordion-group.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/accordion-group/accordion-group.ts b/packages/components/src/components/accordion-group/accordion-group.ts
index d635966ca..005618475 100644
--- a/packages/components/src/components/accordion-group/accordion-group.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.ts
@@ -67,7 +67,6 @@ export default class SdAccordionGroup extends SolidElement {
     css`
       :host {
         display: block;
-        background-color: var(--sd-color-white);
       }
       ::slotted(sd-accordion:not(:first-of-type)) {
         margin-top: -1px;

From 9f7308173a795d77449b5c8a2738613f62e9cdbd Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 10:57:07 +0100
Subject: [PATCH 3/7] fix: focus on proper element in sd-carousel

---
 .../components/src/components/carousel/carousel.stories.ts   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/carousel/carousel.stories.ts b/packages/components/src/components/carousel/carousel.stories.ts
index 3125797e2..94537686d 100644
--- a/packages/components/src/components/carousel/carousel.stories.ts
+++ b/packages/components/src/components/carousel/carousel.stories.ts
@@ -243,7 +243,8 @@ export const Mouseless = {
 
   play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {
     const el = canvasElement.querySelector('.mouseless sd-carousel');
-    await waitUntil(() => el?.shadowRoot?.querySelector('scroll-container'));
-    await userEvent.type(el!.shadowRoot!.querySelector('scroll-container')!, '{space}', { pointerEventsCheck: 0 });
+    await waitUntil(() => el?.shadowRoot?.querySelector('#scroll-container'));
+
+    el?.shadowRoot?.querySelector('#scroll-container')!.focus();
   }
 };

From 8a76945d43e25c977e643764ad10fb026bd064d5 Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 11:04:36 +0100
Subject: [PATCH 4/7] fix: remove userEvent import

---
 packages/components/src/components/carousel/carousel.stories.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/carousel/carousel.stories.ts b/packages/components/src/components/carousel/carousel.stories.ts
index 94537686d..cb3bb401c 100644
--- a/packages/components/src/components/carousel/carousel.stories.ts
+++ b/packages/components/src/components/carousel/carousel.stories.ts
@@ -2,7 +2,6 @@
 import '../../solid-components';
 import { html } from 'lit';
 import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
-import { userEvent } from '@storybook/testing-library';
 import { waitUntil } from '@open-wc/testing-helpers';
 
 const { argTypes, parameters } = storybookDefaults('sd-carousel');

From 845528d936d9572b3bea7c39415300779cbb17c1 Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 11:28:42 +0100
Subject: [PATCH 5/7] fix: make accent size responsive

---
 packages/components/src/components/accordion/accordion.ts       | 2 +-
 packages/components/src/components/carousel/carousel.stories.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/accordion/accordion.ts b/packages/components/src/components/accordion/accordion.ts
index 4dfdc5d38..bd9dd7cd2 100644
--- a/packages/components/src/components/accordion/accordion.ts
+++ b/packages/components/src/components/accordion/accordion.ts
@@ -167,7 +167,7 @@ export default class SdAccordion extends SolidElement {
           <div
             class=${cx(
               !this.open && 'opacity-0',
-              'w-1 bg-accent absolute left-0 transition-all h-8 group-hover:h-full'
+              'w-1 bg-accent absolute left-0 transition-all h-[75%] group-hover:h-full'
             )}
           ></div>
           <slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>
diff --git a/packages/components/src/components/carousel/carousel.stories.ts b/packages/components/src/components/carousel/carousel.stories.ts
index cb3bb401c..4d979ee24 100644
--- a/packages/components/src/components/carousel/carousel.stories.ts
+++ b/packages/components/src/components/carousel/carousel.stories.ts
@@ -244,6 +244,6 @@ export const Mouseless = {
     const el = canvasElement.querySelector('.mouseless sd-carousel');
     await waitUntil(() => el?.shadowRoot?.querySelector('#scroll-container'));
 
-    el?.shadowRoot?.querySelector('#scroll-container')!.focus();
+    el?.shadowRoot?.querySelector<HTMLElement>('#scroll-container')!.focus();
   }
 };

From d74ce5ec486067d3d4888a16d4c33006de5616fc Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Thu, 16 Nov 2023 16:27:51 +0100
Subject: [PATCH 6/7] fix: add Samples and remove background property

---
 .../accordion-group.stories.ts                | 68 ++++++++++++++-----
 .../accordion-group/accordion-group.ts        |  5 +-
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/accordion-group/accordion-group.stories.ts b/packages/components/src/components/accordion-group/accordion-group.stories.ts
index 991a00ba5..b11843432 100644
--- a/packages/components/src/components/accordion-group/accordion-group.stories.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.stories.ts
@@ -50,22 +50,6 @@ export const CloseOthers = {
   }
 };
 
-/**
- * Use 'background' property to set the background color to 'white', 'neutral-100', or 'primary-100'.
- */
-export const Background = {
-  parameters: { controls: { exclude: 'background' } },
-  render: (args: any) => {
-    return generateTemplate({
-      axis: {
-        y: { type: 'attribute', name: 'background' }
-      },
-      args,
-      constants: { type: 'template', name: 'width', value: '<div style="width: 300px">%TEMPLATE%</div>' }
-    });
-  }
-};
-
 /**
  * Part of sd-accordion-group
  */
@@ -119,3 +103,55 @@ export const Mouseless = {
     });
   }
 };
+
+/**
+ * Accordion group can be used with background options of white, neutral-100 and primary-100.
+ */
+
+export const Samples = {
+  render: () => {
+    return html`
+      <div class="w-full flex gap-8 flex-col">
+        <div>
+          <div class="p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">white</div>
+
+          <sd-accordion-group class="w-1/2 bg-white p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+
+        <div>
+          <div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">neutral-100</div>
+          <sd-accordion-group class="w-1/2 bg-neutral-100 p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+
+        <div>
+          <div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">primary-100</div>
+          <sd-accordion-group class="w-1/2 bg-primary-100 p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+      </div>
+    `;
+  }
+};
diff --git a/packages/components/src/components/accordion-group/accordion-group.ts b/packages/components/src/components/accordion-group/accordion-group.ts
index 005618475..165505c0d 100644
--- a/packages/components/src/components/accordion-group/accordion-group.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.ts
@@ -24,9 +24,6 @@ export default class SdAccordionGroup extends SolidElement {
   /** Closes other accordions. */
   @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;
 
-  /** Set the background color of the accordion group. */
-  @property({ reflect: true }) background: 'white' | 'neutral-100' | 'primary-100' = 'white';
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('sd-show', this.handleAccordionShow);
@@ -55,7 +52,7 @@ export default class SdAccordionGroup extends SolidElement {
 
   render() {
     return html`
-      <div part="base" class="bg-${this.background}">
+      <div part="base">
         <slot></slot>
       </div>
     `;

From 8b27690b42f8e1f0fed0e837cb11e463ce67e52d Mon Sep 17 00:00:00 2001
From: Vahid Menu Nesro <vahid.nesro@virtual-identity.com>
Date: Mon, 20 Nov 2023 10:25:15 +0100
Subject: [PATCH 7/7] fix: improve height calculation for accent

---
 packages/components/src/components/accordion/accordion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/accordion/accordion.ts b/packages/components/src/components/accordion/accordion.ts
index bd9dd7cd2..f6c2e31ce 100644
--- a/packages/components/src/components/accordion/accordion.ts
+++ b/packages/components/src/components/accordion/accordion.ts
@@ -167,7 +167,7 @@ export default class SdAccordion extends SolidElement {
           <div
             class=${cx(
               !this.open && 'opacity-0',
-              'w-1 bg-accent absolute left-0 transition-all h-[75%] group-hover:h-full'
+              'w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full'
             )}
           ></div>
           <slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>